Output as rows or columns, state driven colored icons and text

MMM-NetworkScanner.js

@@ -30,6 +30,10 @@ Module.register("MMM-NetworkScanner", {
 		showLastSeenWhenOffline: false, // show last seen only when offline //
 
 		debug: false,
+
+		// sjj: show table as device rows or as device columns
+		showDeviceColums: false,
+		coloredState: false,
 	},
 
 	// Subclass start method.
@@ -182,20 +186,29 @@ Module.register("MMM-NetworkScanner", {
 
 		// Display device status
 		var deviceTable = document.createElement("table");
-		deviceTable.classList.add("small");
+		deviceTable.classList.add("deviceTable", "small");
+
+		// sjj: Show devices in columns
+		// generate header row and device state row
+
+		var headerRow = document.createElement("tr");
+		headerRow.classList.add("headerRow", "dimmed");
+		var devStateRow = document.createElement("tr");
+		devStateRow.classList.add("devStateRow", "dimmed");
+
 		this.networkDevices.forEach(function(device) {
+
 			if (device && (device.online || device.showOffline)) {
 
 				// device row
-
 				var deviceRow = document.createElement("tr");
 				var deviceOnline = (device.online ? "bright" : "dimmed");
-				deviceRow.classList.add(deviceOnline);
+				deviceRow.classList.add("deviceRow", deviceOnline);
 
 				// Icon
 
 				var deviceCell = document.createElement("td");
-				deviceCell.classList.add("device");
+				deviceCell.classList.add("deviceCell");
 				var icon = document.createElement("i");
 				icon.classList.add("fa", "fa-fw", "fa-" + device.icon);
 
@@ -216,19 +229,68 @@ Module.register("MMM-NetworkScanner", {
 				if ((self.config.showLastSeen && device.lastSeen  && !self.config.showLastSeenWhenOffline) || 
 					(self.config.showLastSeen && !device.lastSeen &&  self.config.showLastSeenWhenOffline)) {
 					var dateCell = document.createElement("td");
-					dateCell.classList.add("date", "dimmed", "light");
+					dateCell.classList.add("dateCell", "dimmed", "light");
 					if (typeof device.lastSeen !== 'undefined') {
 						dateCell.innerHTML = device.lastSeen.fromNow();
 					}
 					deviceRow.appendChild(dateCell);
 				}
 
-				deviceTable.appendChild(deviceRow);
+				// sjj: Append a new row if showDeviceColums and showInNewRow are both true
+
+				if (self.config.showDeviceColums && device.showInNewRow) {
+					// append the previously processed devices to the table
+					deviceTable.appendChild(headerRow);
+					deviceTable.appendChild(devStateRow);
+
+					//generate new line contents
+					headerRow = document.createElement("tr");
+					headerRow.classList.add("headerRow", "dimmed");
+					devStateRow = document.createElement("tr");
+					devStateRow.classList.add("devStateRow", "dimmed");
+				}
+
+				// sjj: fill also header and devState row
+				// header row
+				var headerDevCell = document.createElement("td");
+				headerDevCell.classList.add("headerDevCell");
+				headerDevCell.innerHTML += device.name;
+
+				headerRow.appendChild(headerDevCell);
+
+				// device state row
+				var devStateCell = document.createElement("td");
+				devStateCell.classList.add("devStateCell");
+
+				// color online / offline
+				if (self.config.coloredState) {
+					if (device.online) {
+						icon.style.cssText = "color: " + device.colorStateOnline;
+					} else {
+						icon.style.cssText = "color: " + device.colorStateOffline;
+					};
+				}
+
+				devStateCell.appendChild(icon);
+
+				devStateRow.appendChild(devStateCell);
+
+				// sjj: show as Device rows or as Device columns 
+				if (!self.config.showDeviceColums) {
+					deviceTable.appendChild(deviceRow);
+				}
 
 			} else {
 				if (this.config.debug) Log.info(self.name + " Online, but ignoring: '" + device + "'");
 			}
 		});
+
+		// sjj: show as Device rows or as Device columns 
+		if (self.config.showDeviceColums) {
+			deviceTable.appendChild(headerRow);
+			deviceTable.appendChild(devStateRow);
+		}
+
 		if (deviceTable.hasChildNodes()) {
 			wrapper.appendChild(deviceTable);
 		} else {
@@ -260,6 +322,17 @@ Module.register("MMM-NetworkScanner", {
 					device.name = "Unknown";
 				}
 			}
+			// sjj: coloredState
+			if (!device.hasOwnProperty("colorStateOnline")) {
+				device.colorStateOnline = "#ffffff";
+			}
+			if (!device.hasOwnProperty("colorStateOffline")) {
+				device.colorStateOffline = "#ffffff";
+			}
+			// sjj show device in a new rox id mode is show in rows
+			if (!device.hasOwnProperty("showInNewRow")) {
+				device.showInNewRow = false;
+			}
 		});
 	},
 

README.md

@@ -3,8 +3,15 @@ A module for MagicMirror which determines the status of devices on the network b
 
 ## Example
 
+devices as rows<br/>
 ![](.github/example.png)
 
+devices as columns<br/>
+![](.github/example-columns2.jpg)
+
+devices as columns with newLines<br/>
+![](.github/exampleColumnsNewLines.jpg)
+
 ## Installation
 
 In your terminal, install `arp-scan`:
@@ -61,6 +68,8 @@ Add the module to the modules array in the `config/config.js` file:
 | `colored` | `false` | `optional` determines whether devices are shown in the color defined in the devices section. |
 | `coloredSymbolOnly` | `false` | `optional` shows only the devices symbol. |
 | `showLastSeenWhenOffline:` | `false` | `optional` show last seen only when offline. |
+| `showDeviceColums:` | `false` | `optional` show devices as columns. |
+| `coloredState:` | `false` | `optional` determines whether devices are shown in a color defined in the devices section and controlled by the online / offline state. |
 
 
 
@@ -74,9 +83,14 @@ The device object contains information about the devices to be found on the netw
 | `name` | `optional` the friendly name for the device. If omitted, the `macAddress` or `ipAddress` will be used. | `Phone` or `Router` |
 | `icon` | `optional` the symbol to show next to the device. See [Font Awesome](http://fontawesome.io/cheatsheet/) cheatsheet. If omitted, `question` will be used. | There are a huge number of icons to choose from. Here are some examples: `globe`, `server`, `desktop`, `laptop`, `mobile`, `wifi`. |
 | `color` | `optional` the color the device should be display with. | `#ff0000`  for red |
+| `colorStateOnline` | `optional` the color the device should be display with when it is online. | `#ff0000`  for red |
+| `colorStateOffline` | `optional` the color the device should be display with when it is offline. | `#ff0000`  for red |
+| `showInNewRow` | `optional` add a line break if showDeviceColumns = true. | false  for no line break |
 
 **Note** A device object should only contain either a `macAddress` *or* an `ipAddress` **NOT** both.
 
+**Note** The `coloredState` parameter overwrites the `colored` parameter if both parameters are set to true. With the parameter `coloredSymbolOnly` the status driven coloring can be limited to the icon. 
+
 ##### Generating the device array
 The `devices` array can be generated by using `arps2mm.sh` from within the `scripts` folder. The output of the script will include all the devices found on the network, using the name of the vendor identified from the arp-scan result. Run the following script, edit the device names and icons then copy the array into the config file:
 
@@ -104,9 +118,64 @@ Scans the network (using the default `updateInterval`) and display the status of
                 { macAddress: "3a:3b:3c:3a:3b:3c", name: "Son", icon: "male"},
                 { macAddress: "4a:4b:4c:4a:4b:4c", name: "Daughter", icon: "female"}
             ],
-            showUnknown: false
+            showUnknown: false,
+        }
      }
 ````
+#### example with columns
+Displays the specified devices as columns:
+````javascript
+    {
+        module: "MMM-NetworkScanner",
+        position: "top_left",
+        header: "Geräte im Netzwerk",
+        config: {
+            devices: [
+                { 
+                    ipAddress: "192.168.178.101", 
+                    name: "UniFi", 
+                    icon: "server", 
+                    colorStateOnline: "green", 
+                    colorStateOffline: "red",
+                },
+                { 
+                    ipAddress: "192.168.178.31", 
+                    name: "QNAP1", 
+                    icon: "database", 
+                    colorStateOnline: "green", 
+                    colorStateOffline: "red",
+                 },
+                { 
+                    ipAddress: "192.168.178.32", 
+                    name: "QNAP2", 
+                    icon: "database", 
+                    colorStateOnline: "green", 
+                    colorStateOffline: "red",
+                    showInNewRow: true,
+                },
+                { 
+                    ipAddress: "192.168.178.33", 
+                    name: "QNAP3", 
+                    icon: "database", 
+                    colorStateOnline: "green", 
+                    colorStateOffline: "red",
+                },
+                { 
+                    ipAddress: "192.168.178.134", 
+                    name: "APS", 
+                    icon: "wifi", 
+                    colorStateOnline: "green", 
+                    colorStateOffline: "red",
+                 },
+
+            ],
+            sort: false,
+            showUnknown: false,
+            showDeviceColums: true,
+            coloredState: true,
+        }
+    }
+````
 #### Keep alive example
 Scan every 5 seconds and only display the specified devices whether they are online or offline. Devices will continue to be shown as online (i.e. kept alive) for 5 mins after they are last found:
 ````javascript