colors for network map (#1666)

* Update settings.js

added default color options for network map

* Update networkMap.js

- add timestamp node to indicate when the map was created
- colorize nodes by device type
- colorize edges by activity

* Update networkMap.js

make travis happy

* Update networkMap.js

* Update networkMap.js

* Update settings.js

* Refactor

* Move to graphviz.

lib/extension/networkMap.js

@@ -53,6 +53,8 @@ class NetworkMap {
     }
 
     graphviz(zigbee, topology) {
+        const colors = settings.get().map_options.graphviz.colors;
+
         let text = 'digraph G {\nnode[shape=record];\n';
         let devStyle = '';
 
@@ -95,11 +97,14 @@ class NetworkMap {
 
             // Shape the record according to device type
             if (deviceType == 'Coordinator') {
-                devStyle = 'style="bold"';
+                devStyle = `style="bold, filled", fillcolor="${colors.fill.coordinator}", ` +
+                    `fontcolor="${colors.font.coordinator}"`;
             } else if (deviceType == 'Router') {
-                devStyle = 'style="rounded"';
+                devStyle = `style="rounded, filled", fillcolor="${colors.fill.router}", ` +
+                    `fontcolor="${colors.font.router}"`;
             } else {
-                devStyle = 'style="rounded, dashed"';
+                devStyle = `style="rounded, dashed, filled", fillcolor="${colors.fill.enddevice}", `
+                    + `fontcolor="${colors.font.enddevice}"`;
             }
 
             // Add the device with its labels to the graph as a node.
@@ -113,7 +118,8 @@ class NetworkMap {
             topology.filter((e) => (e.ieeeAddr === device.ieeeAddr) || (e.nwkAddr === device.nwkAddr)).forEach((e) => {
                 const lineStyle = (device.type=='EndDevice') ? 'style="dashed", '
                     : (!e.routes.length) ? 'style="dotted", ' : '';
-                const lineWeight = (!e.routes.length) ? 'weight=0, ' : '';
+                const lineWeight = (!e.routes.length) ? `weight=0, color="${colors.line.inactive}", `
+                    : `weight=1, color="${colors.line.active}", `;
                 const textRoutes = e.routes.map((r) => `0x${r.toString(16)}`);
                 const lineLabels = `label="${e.lqi}\\n[${textRoutes.join(']\\n[')}]"`;
                 text += `  "${e.parent}" -> "${device.ieeeAddr}" [${lineStyle}${lineWeight}${lineLabels}]\n`;

lib/util/settings.js

@@ -14,6 +14,26 @@ const defaults = {
     },
     groups: {},
     device_options: {},
+    map_options: {
+        graphviz: {
+            colors: {
+                fill: {
+                    enddevice: '#fff8ce',
+                    coordinator: '#e04e5d',
+                    router: '#4ea3e0',
+                },
+                font: {
+                    coordinator: '#ffffff',
+                    router: '#ffffff',
+                    enddevice: '#000000',
+                },
+                line: {
+                    active: '#009900',
+                    inactive: '#994444',
+                },
+            },
+        },
+    },
     experimental: {
         livolo: false,
         // json or attribute