[TASK] Different colors on map and forcegraph for clients

lib/about.js

@@ -4,7 +4,18 @@ define(function () {
   return function () {
     this.render = function render(d) {
       d.innerHTML = _.t('sidebar.aboutInfo') +
-
+        '<h4>' + _.t('node.nodes') + '</h4>' +
+        '<p class="legend">' +
+        '<span class="legend-new"><span class="symbol"></span> ' + _.t('sidebar.nodeNew') + '</span>' +
+        '<span class="legend-online"><span class="symbol"></span> ' + _.t('sidebar.nodeOnline') + '</span>' +
+        '<span class="legend-offline"><span class="symbol"></span> ' + _.t('sidebar.nodeOffline') + '</span>' +
+        '</p>' +
+        '<h4>' + _.t('node.clients') + '</h4>' +
+        '<p class="legend">' +
+        '<span class="legend-24ghz"><span class="symbol"></span> 2.4 Ghz</span>' +
+        '<span class="legend-5ghz"><span class="symbol"></span> 5 Ghz</span>' +
+        '<span class="legend-others"><span class="symbol"></span> ' + _.t('others') + '</span>' +
+        '</p>' +
         '<h3>AGPL 3</h3>' +
 
         '<p>Copyright (C) Milan Pässler</p>' +

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;

lib/infobox/node.js

@@ -74,20 +74,26 @@ define(['sorttable', 'snabbdom', 'd3-interpolate', 'moment', 'helper'],
           V.h('br'),
           V.h('i', { props: { className: 'ion-people', title: _.t('node.clients') } })
         ]),
-        V.h('span', [
+        V.h('span',
+          { props: { className: 'legend-24ghz'}},
+          [
             d.clients_wifi24,
             V.h('br'),
-          '2,4 Ghz'
+            V.h('span', { props: { className: 'symbol', title: '2,4 Ghz'}})
           ]),
-        V.h('span', [
+        V.h('span',
+          { props: { className: 'legend-5ghz'}},
+          [
             d.clients_wifi5,
             V.h('br'),
-          '5 Ghz'
+            V.h('span', { props: { className: 'symbol', title: '5 Ghz'}})
           ]),
-        V.h('span', [
+        V.h('span',
+          { props: { className: 'legend-others'}},
+          [
             d.clients_other,
             V.h('br'),
-          _.t('other')
+            V.h('span', { props: { className: 'symbol', title: _.t('others')}})
           ])
       ];
 

lib/legend.js

@@ -32,15 +32,12 @@ define(['helper'], function (helper) {
 
       var p = document.createElement('p');
       p.classList.add('legend');
-      p.innerHTML = '<span class="legend-new"><span class="symbol"></span> ' + _.t('sidebar.nodeNew') + '</span>' +
-        '<span class="legend-online"><span class="symbol"></span> ' + _.t('sidebar.nodeOnline') + '</span>' +
-        '<span class="legend-offline"><span class="symbol"></span> ' + _.t('sidebar.nodeOffline') + '</span>';
-      el.appendChild(p);
 
       p.appendChild(document.createElement('br'));
       p.appendChild(stats);
       p.appendChild(document.createElement('br'));
       p.appendChild(timestamp);
+      el.appendChild(p);
     };
 
     return self;

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' });

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;
       }

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) {
+  positionClients: function positionClients(ctx, p, startAngle, node, startDistance) {
-    if (clients === 0) {
+    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);

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",
+    "nodeNew": "new",
-    "nodeOnline": "Node is online",
+    "nodeOnline": "online",
-    "nodeOffline": "Node is offline",
+    "nodeOffline": "offline",
     "aboutInfo": "<h2>About Meshviewer</h2> <p>You can zoom in with double-click and zoom out with shift+double-click</p>",
     "actual": "Current",
     "stats": "Statistics",
@@ -87,7 +87,7 @@
   "yes": "yes",
   "no": "no",
   "unknown": "unknown",
-  "others": "others",
+  "others": "other",
   "none": "none",
   "remove": "remove",
   "close": "close"

scss/modules/_legend.scss

@@ -17,6 +17,13 @@ header {
 }
 
 .legend {
+  span {
+    &:not(:first-child) {
+      margin-left: 1em;
+    }
+  }
+}
+
 .symbol {
   border-radius: 50%;
   display: inline-block;
@@ -24,7 +31,6 @@ header {
   vertical-align: -5%;
   width: 1em;
 }
-}
 
 // Dot looks compared to thin font a bit darker - lighten it 10%
 .legend-new {
@@ -45,7 +51,20 @@ header {
   }
 }
 
-.legend-online,
+.legend-24ghz {
-.legend-offline {
+  .symbol {
-  margin-left: 1em;
+    background-color: $color-24ghz;
+  }
+}
+
+.legend-5ghz {
+  .symbol {
+    background-color: $color-5ghz;
+  }
+}
+
+.legend-others {
+  .symbol {
+    background-color: $color-others;
+  }
 }

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;