diff --git a/app.js b/app.js index 84316b2df83915be46d4aacd64bea688c7a44be0..5e6d0b02013796a48449a610054017f13966f49d 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 367aaa02e05c26f492995726ca30f1d39d715bf1..9ad95295f7c239e1c79aa2bf421a0700a0a22d49 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 5c56e72fa54eb646ed1fcb28489dc5d040274d4b..2c1aa0e56d6b6eae3f7333032d8aa8ca755495a4 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 38323f71ec8bb9e7a948e9b03fc6021fa6bfec59..5847b0fa1d548ef668cb39727ce5240010a432ac 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 a6d5639d0f2d3f99350ea1dedba45a20f50d53e5..84583c57ab72e2b6e041296b6a2fa11760490e64 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 6b1d9fd59c4c13ad23bcdcb4567aac6bec4162fa..b021856b157259d58cf1b6d2b9c02fbb8b1da8c1 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 fdd4742c39fe99436d22a63a905a240ccbb03823..3bceeb691804fa805dd758bcd2ab26dc2428a58d 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 f465a3aafcd40358a65857e92563a8d8a7ba3227..905aedcfbc02320584509d6b6218788f3e204c43 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 0176564e603a8ded2da1f6ccaea821a361f395b6..847ba0e9bbd857796f33c8ec1eb6ed67a5a339f5 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 e53caa852126873b0b6966aa77caa264c9051f6c..bd83b451828f13ccb48b11df07c3d84d1973a620 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);