From 2c7500f1bbbb7bfb0522343fb18a51df1a254d9d Mon Sep 17 00:00:00 2001 From: Xaver Maierhofer <xaver.maierhofer@xwissen.info> Date: Sun, 5 Nov 2017 18:23:40 +0100 Subject: [PATCH] [TASK] Make more colors configurable --- app.js | 2 -- config.default.json | 58 +++++++++++++++++++++++++++++++++++++++ gulp/tasks/html.js | 2 +- lib/forcegraph/draw.js | 15 +++------- lib/gui.js | 2 +- lib/map.js | 4 +-- lib/map/labellayer.js | 6 ++-- lib/map/locationmarker.js | 35 ++--------------------- lib/proportions.js | 2 +- lib/utils/helper.js | 6 ++-- 10 files changed, 76 insertions(+), 56 deletions(-) diff --git a/app.js b/app.js index 84316b2..5e6d0b0 100644 --- a/app.js +++ b/app.js @@ -37,7 +37,5 @@ require.config({ }); require(['main'], function (main) { - /** global: config */ - window.config = jsonData; main(); }); diff --git a/config.default.json b/config.default.json index 367aaa0..9ad9529 100644 --- a/config.default.json +++ b/config.default.json @@ -75,6 +75,7 @@ "fr", "ru" ], + // Color configs "icon": { "base": { "fillOpacity": 0.6, @@ -107,5 +108,62 @@ "fillColor": "#93E929" } }, + "client": { + "wifi24": "rgba(220, 0, 103, 0.7)", + "wifi5": "rgba(10, 156, 146, 0.7)", + "other": "rgba(227, 166, 25, 0.7)" + }, + "map": { + "labelNewColor": "#459c18", + "tqFrom": "#F02311", + "tqTo": "#04C714", + "highlightNode": { + "color": "#ad2358", + "weight": 8, + "fillOpacity": 1, + "opacity": 0.4, + "className": "stroke-first" + }, + "highlightLink": { + "weight": 4, + "opacity": 1, + "dashArray": "5, 10" + } + }, + "forceGraph": { + "nodeColor": "#fff", + "highlightColor": "rgba(255, 255, 255, 0.2)", + "labelColor": "#fff", + "tqFrom": "#770038", + "tqTo": "#dc0067" + }, + "locate": { + "outerCircle": { + "stroke": false, + "color": "#4285F4", + "opacity": 1, + "fillOpacity": 0.3, + "clickable": false, + "radius": 16 + }, + "innerCircle": { + "stroke:": true, + "color": "#ffffff", + "fillColor": "#4285F4", + "weight": 1.5, + "clickable": false, + "opacity": 1, + "fillOpacity": 1, + "radius": 7 + }, + "accuracyCircle": { + "stroke": true, + "color": "#4285F4", + "weight": 1, + "clickable": false, + "opacity": 0.7, + "fillOpacity": 0.2 + } + }, "cacheBreaker": "<!-- inject:cache-breaker -->" } diff --git a/gulp/tasks/html.js b/gulp/tasks/html.js index 5c56e72..2c1aa0e 100644 --- a/gulp/tasks/html.js +++ b/gulp/tasks/html.js @@ -10,7 +10,7 @@ module.exports = function (gulp, plugins, config, env) { JSON.parse(JSON.minify(defaultConfig)), JSON.parse(JSON.minify(customConfig.contents.toString('utf8'))) ); - return '<script>var jsonData =' + + return '<script>window.config =' + JSON.stringify(buildConfig) .replace('<!-- inject:cache-breaker -->', Math.random().toString(12).substring(7)) + diff --git a/lib/forcegraph/draw.js b/lib/forcegraph/draw.js index 38323f7..5847b0f 100644 --- a/lib/forcegraph/draw.js +++ b/lib/forcegraph/draw.js @@ -4,16 +4,9 @@ define(['helper'], function (helper) { var ctx; var width; var height; - var transform; - var highlight; - var nodeColor = '#fff'; - var highlightColor = 'rgba(255, 255, 255, 0.2)'; - - var labelColor = '#fff'; - var NODE_RADIUS = 15; var LINE_RADIUS = 12; @@ -26,7 +19,7 @@ define(['helper'], function (helper) { name = d.o.hostname; } ctx.textAlign = 'center'; - ctx.fillStyle = labelColor; + ctx.fillStyle = config.forceGraph.labelColor; ctx.fillText(name, d.x, d.y + 20); } } @@ -34,7 +27,7 @@ define(['helper'], function (helper) { function drawHighlightNode(d) { if (highlight && highlight.type === 'node' && d.o.node_id === highlight.id) { ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI); - ctx.fillStyle = highlightColor; + ctx.fillStyle = config.forceGraph.highlightColor; ctx.fill(); ctx.beginPath(); } @@ -43,7 +36,7 @@ define(['helper'], function (helper) { function drawHighlightLink(d, to) { if (highlight && highlight.type === 'link' && d.o.id === highlight.id) { ctx.lineTo(to[0], to[1]); - ctx.strokeStyle = highlightColor; + ctx.strokeStyle = config.forceGraph.highlightColor; ctx.lineWidth = LINE_RADIUS * 2; ctx.lineCap = 'round'; ctx.stroke(); @@ -62,7 +55,7 @@ define(['helper'], function (helper) { ctx.moveTo(d.x + 3, d.y); ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI); - ctx.fillStyle = nodeColor; + ctx.fillStyle = config.forceGraph.nodeColor; ctx.fill(); drawDetailNode(d); diff --git a/lib/gui.js b/lib/gui.js index a6d5639..84583c5 100644 --- a/lib/gui.js +++ b/lib/gui.js @@ -12,7 +12,7 @@ function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist, var content; var contentDiv; - var linkScale = d3Interpolate.interpolate('#F02311', '#04C714'); + var linkScale = d3Interpolate.interpolate(config.map.tqFrom, config.map.tqTo); var sidebar; var buttons = document.createElement('div'); diff --git a/lib/map.js b/lib/map.js index 6b1d9fd..b021856 100644 --- a/lib/map.js +++ b/lib/map.js @@ -152,10 +152,10 @@ define(['map/clientlayer', 'map/labellayer', 'map/button', 'leaflet'], if (highlight !== undefined) { if (highlight.type === 'node' && nodeDict[highlight.o.node_id]) { m = nodeDict[highlight.o.node_id]; - m.setStyle({ color: '#ad2358', weight: 8, fillOpacity: 1, opacity: 0.4, className: 'stroke-first' }); + m.setStyle(config.map.highlightNode); } else if (highlight.type === 'link' && linkDict[highlight.o.id]) { m = linkDict[highlight.o.id]; - m.setStyle({ weight: 4, opacity: 1, dashArray: '5, 10' }); + m.setStyle(config.map.highlightLink); } } diff --git a/lib/map/labellayer.js b/lib/map/labellayer.js index fdd4742..3bceeb6 100644 --- a/lib/map/labellayer.js +++ b/lib/map/labellayer.js @@ -212,9 +212,9 @@ define(['leaflet', 'rbush', 'helper', 'moment'], // - color (string) var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true)); - var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false)); - var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true)); - var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true)); + var labelsOffline = d.offline.map(prepareLabel(config.icon.offline.color, 9, 5, false)); + var labelsNew = d.new.map(prepareLabel(config.map.labelNewColor, 11, 8, true)); + var labelsLost = d.lost.map(prepareLabel(config.icon.lost.color, 11, 8, true)); var labels = [] .concat(labelsNew) diff --git a/lib/map/locationmarker.js b/lib/map/locationmarker.js index f465a3a..905aedc 100644 --- a/lib/map/locationmarker.js +++ b/lib/map/locationmarker.js @@ -2,39 +2,10 @@ define(['leaflet'], function (L) { 'use strict'; return L.CircleMarker.extend({ - outerCircle: { - stroke: false, - color: '#4285F4', - opacity: 1, - fillOpacity: 0.3, - clickable: false, - radius: 16 - }, - - innerCircle: { - stroke: true, - color: '#ffffff', - fillColor: '#4285F4', - weight: 1.5, - clickable: false, - opacity: 1, - fillOpacity: 1, - radius: 7 - }, - - accuracyCircle: { - stroke: true, - color: '#4285F4', - weight: 1, - clickable: false, - opacity: 0.7, - fillOpacity: 0.2 - }, - initialize: function (latlng) { - this.accuracyCircle = L.circle(latlng, 0, this.accuracyCircle); - this.outerCircle = L.circleMarker(latlng, this.outerCircle); - L.CircleMarker.prototype.initialize.call(this, latlng, this.innerCircle); + this.accuracyCircle = L.circle(latlng, 0, config.locate.accuracyCircle); + this.outerCircle = L.circleMarker(latlng, config.locate.outerCircle); + L.CircleMarker.prototype.initialize.call(this, latlng, config.locate.innerCircle); this.on('remove', function () { this._map.removeLayer(this.accuracyCircle); diff --git a/lib/proportions.js b/lib/proportions.js index 0176564..847ba0e 100644 --- a/lib/proportions.js +++ b/lib/proportions.js @@ -5,7 +5,7 @@ define(['d3-interpolate', 'snabbdom', 'filters/genericnode', 'helper'], return function (filterManager) { var self = this; - var scale = d3Interpolate.interpolate('#770038', '#dc0067'); + var scale = d3Interpolate.interpolate(config.forceGraph.tqFrom, config.forceGraph.tqTo); var statusTable; var fwTable; diff --git a/lib/utils/helper.js b/lib/utils/helper.js index e53caa8..bd83b45 100644 --- a/lib/utils/helper.js +++ b/lib/utils/helper.js @@ -151,7 +151,7 @@ define({ var mode = 0; ctx.beginPath(); - ctx.fillStyle = 'rgba(220, 0, 103, 0.7)'; + ctx.fillStyle = config.client.wifi24; for (var orbit = 0, i = 0; i < node.clients; orbit++) { var distance = startDistance + orbit * 2 * radius * a; @@ -163,12 +163,12 @@ define({ mode = 1; ctx.fill(); ctx.beginPath(); - ctx.fillStyle = 'rgba(10, 156, 146, 0.7)'; + ctx.fillStyle = config.client.wifi5; } else if (mode === 0 && i >= node.clients_wifi24) { mode = 2; ctx.fill(); ctx.beginPath(); - ctx.fillStyle = 'rgba(227, 166, 25, 0.7)'; + ctx.fillStyle = config.client.other; } var angle = 2 * Math.PI / n * j; var x = p.x + distance * Math.cos(angle + startAngle); -- GitLab