' + + ' ' + _.t('sidebar.nodeNew') + '' + + ' ' + _.t('sidebar.nodeOnline') + '' + + ' ' + _.t('sidebar.nodeOffline') + '' + + '
' + + '' + + ' 2.4 Ghz' + + ' 5 Ghz' + + ' ' + _.t('others') + '' + + '
' + 'Copyright (C) Milan Pässler
' + diff --git a/lib/forcegraph/draw.js b/lib/forcegraph/draw.js index c10c4d1..2fddc4e 100644 --- a/lib/forcegraph/draw.js +++ b/lib/forcegraph/draw.js @@ -21,8 +21,8 @@ define(['helper'], function (helper) { function drawDetailNode(d) { if (transform.k > 1) { ctx.beginPath(); - helper.positionClients(ctx, d, Math.PI, d.o.clients, 15); ctx.fillStyle = clientColor; + helper.positionClients(ctx, d, Math.PI, d.o, 15); ctx.fill(); ctx.beginPath(); var name = d.o.node_id; diff --git a/lib/infobox/node.js b/lib/infobox/node.js index b54829e..ab7c7c6 100644 --- a/lib/infobox/node.js +++ b/lib/infobox/node.js @@ -74,21 +74,27 @@ define(['sorttable', 'snabbdom', 'd3-interpolate', 'moment', 'helper'], V.h('br'), V.h('i', { props: { className: 'ion-people', title: _.t('node.clients') } }) ]), - V.h('span', [ - d.clients_wifi24, - V.h('br'), - '2,4 Ghz' - ]), - V.h('span', [ - d.clients_wifi5, - V.h('br'), - '5 Ghz' - ]), - V.h('span', [ - d.clients_other, - V.h('br'), - _.t('other') - ]) + V.h('span', + { props: { className: 'legend-24ghz'}}, + [ + d.clients_wifi24, + V.h('br'), + V.h('span', { props: { className: 'symbol', title: '2,4 Ghz'}}) + ]), + V.h('span', + { props: { className: 'legend-5ghz'}}, + [ + d.clients_wifi5, + V.h('br'), + V.h('span', { props: { className: 'symbol', title: '5 Ghz'}}) + ]), + V.h('span', + { props: { className: 'legend-others'}}, + [ + d.clients_other, + V.h('br'), + V.h('span', { props: { className: 'symbol', title: _.t('others')}}) + ]) ]; return V.h('td', { props: { className: 'clients' } }, clients); diff --git a/lib/legend.js b/lib/legend.js index 8450270..fa8daf6 100644 --- a/lib/legend.js +++ b/lib/legend.js @@ -32,15 +32,12 @@ define(['helper'], function (helper) { var p = document.createElement('p'); p.classList.add('legend'); - p.innerHTML = ' ' + _.t('sidebar.nodeNew') + '' + - ' ' + _.t('sidebar.nodeOnline') + '' + - ' ' + _.t('sidebar.nodeOffline') + ''; - el.appendChild(p); p.appendChild(document.createElement('br')); p.appendChild(stats); p.appendChild(document.createElement('br')); p.appendChild(timestamp); + el.appendChild(p); }; return self; diff --git a/lib/map.js b/lib/map.js index 4f3ac1f..6c8dd1c 100644 --- a/lib/map.js +++ b/lib/map.js @@ -151,7 +151,7 @@ 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: 'orange', weight: 20, fillOpacity: 1, opacity: 0.7, className: 'stroke-first' }); + m.setStyle({ color: '#ad2358', weight: 8, fillOpacity: 1, opacity: 0.4, className: 'stroke-first' }); } else if (highlight.type === 'link' && linkDict[highlight.o.id]) { m = linkDict[highlight.o.id]; m.setStyle({ weight: 4, opacity: 1, dashArray: '5, 10' }); diff --git a/lib/map/clientlayer.js b/lib/map/clientlayer.js index aa25553..9bc5281 100644 --- a/lib/map/clientlayer.js +++ b/lib/map/clientlayer.js @@ -45,20 +45,20 @@ define(['leaflet', 'rbush', 'helper'], return tile; } - var startDistance = 12; + var startDistance = 10; - ctx.beginPath(); nodes.forEach(function (d) { var p = map.project([d.node.location.latitude, d.node.location.longitude]); p.x -= s.x; p.y -= s.y; - helper.positionClients(ctx, p, d.startAngle, d.node.clients, startDistance); + ctx.beginPath(); + ctx.fillStyle = 'rgba(220, 0, 103, 0.7)'; + helper.positionClients(ctx, p, d.startAngle, d.node, startDistance); + ctx.fill(); }); - ctx.fillStyle = 'rgba(220, 0, 103, 0.7)'; - ctx.fill(); return tile; } diff --git a/lib/utils/helper.js b/lib/utils/helper.js index 6264990..dfcc9f5 100644 --- a/lib/utils/helper.js +++ b/lib/utils/helper.js @@ -153,20 +153,32 @@ define({ return { minX: br.lat, minY: tl.lng, maxX: tl.lat, maxY: br.lng }; }, - positionClients: function positionClients(ctx, p, startAngle, clients, startDistance) { - if (clients === 0) { + positionClients: function positionClients(ctx, p, startAngle, node, startDistance) { + if (node.clients === 0) { return; } var radius = 3; var a = 1.2; + var mode = 0; - for (var orbit = 0, i = 0; i < clients; orbit++) { + for (var orbit = 0, i = 0; i < node.clients; orbit++) { var distance = startDistance + orbit * 2 * radius * a; var n = Math.floor((Math.PI * distance) / (a * radius)); - var delta = clients - i; + var delta = node.clients - i; for (var j = 0; j < Math.min(delta, n); i++, j++) { + if (mode !== 1 && i >= (node.clients_wifi24 + node.clients_wifi5)) { + mode = 1; + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = 'rgba(10, 156, 146, 0.7)'; + } else if (mode === 0 && i >= node.clients_wifi24) { + mode = 2; + ctx.fill(); + ctx.beginPath(); + ctx.fillStyle = 'rgba(227, 166, 25, 0.7)'; + } var angle = 2 * Math.PI / n * j; var x = p.x + distance * Math.cos(angle + startAngle); var y = p.y + distance * Math.sin(angle + startAngle); diff --git a/locale/en.json b/locale/en.json index ee59a8a..da3dc05 100644 --- a/locale/en.json +++ b/locale/en.json @@ -45,9 +45,9 @@ "clients": "with %{smart_count} client |||| with %{smart_count} clients", "gateway": "on %{smart_count} gateway |||| on %{smart_count} gateways", "lastUpdate": "Last update", - "nodeNew": "Node is new", - "nodeOnline": "Node is online", - "nodeOffline": "Node is offline", + "nodeNew": "new", + "nodeOnline": "online", + "nodeOffline": "offline", "aboutInfo": "You can zoom in with double-click and zoom out with shift+double-click
", "actual": "Current", "stats": "Statistics", @@ -87,7 +87,7 @@ "yes": "yes", "no": "no", "unknown": "unknown", - "others": "others", + "others": "other", "none": "none", "remove": "remove", "close": "close" diff --git a/scss/modules/_legend.scss b/scss/modules/_legend.scss index 01f730f..d359c74 100644 --- a/scss/modules/_legend.scss +++ b/scss/modules/_legend.scss @@ -17,15 +17,21 @@ header { } .legend { - .symbol { - border-radius: 50%; - display: inline-block; - height: 1em; - vertical-align: -5%; - width: 1em; + span { + &:not(:first-child) { + margin-left: 1em; + } } } +.symbol { + border-radius: 50%; + display: inline-block; + height: 1em; + vertical-align: -5%; + width: 1em; +} + // Dot looks compared to thin font a bit darker - lighten it 10% .legend-new { .symbol { @@ -45,7 +51,20 @@ header { } } -.legend-online, -.legend-offline { - margin-left: 1em; +.legend-24ghz { + .symbol { + background-color: $color-24ghz; + } +} + +.legend-5ghz { + .symbol { + background-color: $color-5ghz; + } +} + +.legend-others { + .symbol { + background-color: $color-others; + } } diff --git a/scss/modules/_variables.scss b/scss/modules/_variables.scss index 8992af2..81003ef 100644 --- a/scss/modules/_variables.scss +++ b/scss/modules/_variables.scss @@ -11,6 +11,10 @@ $color-online: #1566a9 !default; $color-offline: #cf3e2a !default; $color-unseen: #d89100 !default; +$color-24ghz: $color-primary !default; +$color-5ghz: #e3a619 !default; +$color-others: #0a9c92 !default; + $color-map-background: #f8f4f0 !default; $font-family: Assistant, sans-serif !default;