diff --git a/.github/example-columns2.jpg b/.github/example-columns2.jpg
new file mode 100644
index 0000000..6424af5
Binary files /dev/null and b/.github/example-columns2.jpg differ
diff --git a/.github/exampleColumnsNewLines.jpg b/.github/exampleColumnsNewLines.jpg
new file mode 100644
index 0000000..967d880
Binary files /dev/null and b/.github/exampleColumnsNewLines.jpg differ
diff --git a/MMM-NetworkScanner.js b/MMM-NetworkScanner.js
index 4b26e0f..1825ce9 100644
--- a/MMM-NetworkScanner.js
+++ b/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;
+ }
});
},
diff --git a/README.md b/README.md
index a5d2ab7..145ec33 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,15 @@ A module for MagicMirror which determines the status of devices on the network b
## Example
+devices as rows
+devices as columns
+
+
+devices as columns with newLines
+
+
## 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
diff --git a/exampleColumnsNewLines.jpg b/exampleColumnsNewLines.jpg
new file mode 100644
index 0000000..967d880
Binary files /dev/null and b/exampleColumnsNewLines.jpg differ