styles for tiny viewports

handle objects better
confirm OCA device is d&b
2026-07-26 09:18:39 +00:00 · 2023-05-24 01:19:01 -04:00 · 2023-05-24 01:18:36 -04:00 · 2023-05-24 00:23:33 -04:00 · 2023-05-24 00:22:00 -04:00 · 2023-05-23 23:37:25 -04:00
83 changed files with 3824 additions and 4431 deletions
@@ -17,6 +17,7 @@ jobs:
      - run: npm ci
      - run: npm run release
  build-windows:
+    needs: build-linux
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v3
@@ -27,7 +28,8 @@ jobs:
      - run: npm ci
      - run: npm run release
  build-macos:
-    runs-on: macos-13
+    needs: build-windows
+    runs-on: macos-latest
    env:
      CSC_LINK: ${{ secrets.MACOS_CSC_LINK }}
      CSC_KEY_PASSWORD: ${{ secrets.MACOS_CSC_KEY_PASSWORD }}
@@ -1,8 +1,8 @@
-# <img width="30" alt="icon" src="https://github.com/stagehacks/Cue-View/assets/919746/b8fb5fa8-de7e-4e1b-9043-47194fb2762d"> Cue View
+# Cue View

 A dashboard for everything in your show.

-<img width="100%" alt="screenshot" src="https://github.com/stagehacks/Cue-View/assets/919746/dd89a45b-620c-4358-8001-8406bc2c2497">
+![Screen Shot 2021-10-26 at 11 57 21 PM](https://user-images.githubusercontent.com/919746/138997636-dfca293a-7c98-459d-85a3-405c9b11ce8a.png)

 ## Features

@@ -21,6 +21,69 @@ A dashboard for everything in your show.
 - XAir Audio Consoles
 - Art-Net Universes
 - sACN Universes
+
+#### Future Devices
+
 - ATEM Video Mixers
- Shure ULXD Wireless
- DiGico SD Consoles
+- DiGiCo Consoles
+- d&b DS100, amps
+- Hog
+- Meyer Galileo Processors
+
+# Plugins
+
+A Cue View "plugin" is a system for communicating with a type of device, for example QLab or Watchout. It consists of a JS file that describes how to communicate with the device, an HTML template for displaying the device's data, and a CSS file to style the HTML.
+
+### plugin.js
+
+```js
+exports.config = {
+	defaultName: 'Example Plugin',
+	connectionType: 'osc' or 'TCPsocket' or 'UDPsocket',
+	searchOptions: {
+		type: 'Bonjour',
+		bonjourNane: 'device'
+	},
+	searchOptions: {
+		type: 'UDPsocket',
+		searchBuffer: Buffer.from([0x00, 0x01, 0x02]),
+		devicePort: 1234, // port the device receives messages on
+		listenPort: 2345, // port Cue View should listen for responses on
+		validateResponse: function(msg, info){
+			// if this function returns true, Cue View adds the responding IP address to the list
+		}
+	},
+	searchOptions: {
+		type: 'TCPport',
+		searchBuffer: Buffer.from('are you there'),
+		testPort: 1234, // port the device receives messages on
+		validateResponse: function(msg, info){
+			// if this function returns true, Cue View adds the responding IP address to the list
+		}
+	},
+	defaultPort: 1234, // only available for TCPsocket and UDPsocket devices
+	heartbeatInterval: 5000 // how frequently, in ms, to send the heartbeat message
+}
+
+exports.ready = function (device){
+	// runs when Cue View identifies a new device. send all data requests here
+	device.send(); // method for sending a message to the device requesting more info. arguments change based on connectionType
+
+	device.send(`/this/is/osc`); // osc
+	device.send(`/this/is/osc`, [{ type: 'i', value: 20 }, { type: 's', value: 'foo' }]); // osc with arguments
+
+	device.send(`hello`); // UDPsocket and TCPsocket
+
+}
+
+exports.data = function (device, buf){
+	// runs when Cue View receives a message from the device.
+	device.draw(); // flag for QLab to update the device's view
+	device.send();
+}
+
+exports.heartbeat = function (device){
+	// runs every n milliseconds, defined by exports.heartbeatInterval
+	devide.send();
+}
+```
@@ -49,33 +49,17 @@
              <tr>
                <th>Addr:</th>
                <td colspan="3">
-                  <input id="device-settings-ip" type="text" maxlength="30" title="IP Address of the remote device" />
+                  <input id="device-settings-ip" type="text" maxlength="30" />
                </td>
              </tr>
              <tr>
-                <th id="device-settings-port-label" title="'Receive' port on the remote device">Port:</th>
+                <th>Port:</th>
                <td>
-                  <input
-                    id="device-settings-port"
-                    type="number"
-                    maxlength="5"
-                    title="'Receive' port on the remote device" />
+                  <input id="device-settings-port" type="number" value="53000" maxlength="5" />
                </td>
                <th>Pin:</th>
                <td><input id="device-settings-pin" type="checkbox" /></td>
              </tr>
-              <tr id="device-settings-rx-port-row">
-                <th title="'Send' port on the remote device">Local:</th>
-                <td>
-                  <input
-                    id="device-settings-rx-port"
-                    type="number"
-                    maxlength="5"
-                    title="'Send' port on the remote device" />
-                </td>
-                <th></th>
-                <td></td>
-              </tr>
              <tbody id="device-settings-fields"></tbody>
            </table>

@@ -145,7 +145,7 @@ const windowMac = {
  width: 1500,
  height: 900,
  titleBarStyle: 'hiddenInset',
-  transparent: false,
+  transparent: true,
  frame: false,
  show: false,
  vibrancy: 'window',
@@ -1,7 +1,7 @@
 {
  "name": "cue-view",
  "productName": "Cue View",
-  "version": "1.1.0",
+  "version": "0.9.9-pre",
  "description": "A dashboard for everything in your show",
  "main": "main.js",
  "scripts": {
@@ -20,30 +20,29 @@
  "homepage": "https://github.com/stagehacks/Cue-View",
  "repository": "https://github.com/stagehacks/Cue-View",
  "devDependencies": {
-    "@electron/notarize": "^2.3.0",
-    "electron": "^29.1.0",
-    "electron-builder": "^24.13.3",
-    "eslint": "^8.57.0",
+    "@electron/notarize": "^1.2.3",
+    "electron": "^22.2.0",
+    "electron-builder": "^24.4.0",
+    "eslint": "^8.40.0",
    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "prettier": "^3.2.5"
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "prettier": "^2.8.8"
  },
  "dependencies": {
-    "@jwetzell/posistagenet": "^0.4.6",
-    "atem-connection": "^3.5.0",
+    "atem-connection": "^3.1.3",
    "bonjour": "^3.5.0",
-    "electron-updater": "^6.1.8",
+    "electron-updater": "^5.3.0",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "netmask": "^2.0.2",
    "osc": "^2.4.4",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.0"
  },
  "build": {
    "appId": "com.stagehacks.cueview",
    "icon": "src/assets/img/",
-    "artifactName": "${name}.${os}-${arch}.v${version}.${ext}",
+    "artifactName": "${name}.${os}.v${version}.${ext}",
    "mac": {
      "category": "Utilities",
      "icon": "src/assets/img/icon.icns",
@@ -51,15 +50,6 @@
      "electronLanguages": [
        "en"
      ],
-      "target": [
-        {
-          "target": "zip",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
-        }
-      ],
      "publish": [
        "github"
      ]
@@ -1,2 +1,2 @@
-<p>Quit any other applications that use Art-Net before using this plugin.</p>
+<p><em>Art-Net</em> requires no configuration.</p>
 <p>Art-Net™ Designed by and Copyright Artistic Licence Holdings Ltd</p>
@@ -1,8 +1,8 @@
 exports.config = {
  defaultName: 'Art-Net',
  connectionType: 'UDPsocket',
-  remotePort: 6454,
-  mayChangePorts: false,
+  defaultPort: 6454,
+  mayChangePort: false,
  heartbeatInterval: 5000,
  heartbeatTimeout: 15000,
  searchOptions: {
@@ -23,21 +23,11 @@ exports.ready = function ready(_device) {
 };

 exports.data = function data(_device, buf) {
-  const device = _device;
-
-  if (buf.length < 18 || buf.slice(0, 7).toString() !== 'Art-Net') {
+  if (buf.length < 18) {
    return;
  }
-
-  const opCode = buf.readUInt16BE(8);
-
-  if (opCode === 33) {
-    sendArtPollReply(device);
-    return;
-  }
-
  const universeIndex = buf.readUInt8(14);
-
+  const device = _device;
  let universe = device.data.universes[universeIndex];

  if (!universe) {
@@ -103,53 +93,3 @@ exports.update = function update(_device, _document, updateType, updateData) {
    });
  }
 };
-
-function sendArtPollReply(device) {
-  // minimum viable Art-Net packet
-  // not to full Art-Net spec
-  // https://art-net.org.uk/how-it-works/discovery-packets/artpollreply/
-
-  const interfaces = device.getNetworkInterfaces();
-
-  for (let i = 0; i < Object.keys(interfaces).length; i++) {
-    const buf = Buffer.alloc(213);
-    buf.write('Art-Net', 0);
-
-    buf.writeInt16LE(0x2100, 8);
-
-    const addr = interfaces[Object.keys(interfaces)[i]][0].address.split('.');
-
-    buf.writeUInt8(addr[0], 10);
-    buf.writeUInt8(addr[1], 11);
-    buf.writeUInt8(addr[2], 12);
-    buf.writeUInt8(addr[3], 13);
-
-    buf.writeInt16LE(6454, 14);
-
-    buf.write('Cue View', 26);
-
-    buf.writeUInt8(4, 173);
-
-    buf.writeUInt8(0xc0, 174);
-    buf.writeUInt8(0xc0, 175);
-    buf.writeUInt8(0xc0, 176);
-    buf.writeUInt8(0xc0, 177);
-
-    buf.writeUInt8(0x80, 178);
-    buf.writeUInt8(0x80, 179);
-    buf.writeUInt8(0x80, 180);
-    buf.writeUInt8(0x80, 181);
-
-    buf.writeUInt8(0x80, 182);
-    buf.writeUInt8(0x80, 183);
-    buf.writeUInt8(0x80, 184);
-    buf.writeUInt8(0x80, 185);
-
-    buf.writeUInt8(0x00, 186);
-    buf.writeUInt8(0x01, 187);
-    buf.writeUInt8(0x02, 188);
-    buf.writeUInt8(0x03, 189);
-
-    device.send(buf);
-  }
-}
@@ -0,0 +1,441 @@
+exports.config = {
+  defaultName: 'd&b Amps',
+  connectionType: 'TCPsocket',
+  defaultPort: 30013,
+  mayChangePort: false,
+  heartbeatInterval: 1000,
+  heartbeatTimeout: 5000,
+  searchOptions: {
+    type: 'Bonjour',
+    bonjourName: 'oca',
+    validateResponse(msg, info) {
+      return msg.includes('d&b audiotechnik');
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  const device = _device;
+
+  device.data.oca = structuredClone(OCAStructure);
+
+  device.data.ocaKeys = Object.keys(device.data.oca);
+  device.data.ocaIDs = [];
+
+  for (let i = 0; i < device.data.ocaKeys.length; i++) {
+    const key = device.data.oca[device.data.ocaKeys[i]];
+    key.parameters = [0];
+    device.data.ocaIDs[i] = key;
+    ocaCommandRequest(i, key.target, key.method, device);
+    ocaSubscriptionRequest(i, key.target, key.method, device);
+  }
+};
+
+exports.data = function data(_device, _buffer) {
+  const device = _device;
+
+  if (_buffer[0] === 0x3b && _buffer[1] === 0 && _buffer[2] === 1) {
+    let start = 0;
+    while (start < _buffer.length - 3) {
+      const messageLength = _buffer.readInt32BE(start + 3) + 1;
+      const message = _buffer.slice(start, start + messageLength);
+
+      const messageType = message[7];
+
+      if (messageType === 0x04) {
+        // keep-alive message
+      } else if (messageType === 0x02) {
+        // console.log('NOTIFICATION!!');
+        console.log(message.slice(33));
+      } else if (messageType === 0x03) {
+        const messageHandle = _buffer.readInt32BE(start + 14);
+        const paramCount = message[19];
+
+        if (paramCount) {
+          let paramsStart = 20;
+          const ocaObj = device.data.ocaIDs[messageHandle];
+
+          ocaObj.parameters = [];
+
+          while (paramsStart < message.length) {
+            let paramLength = 0;
+            let param;
+
+            if (ocaObj.format === 'int16' || ocaObj.format === 'float' || ocaObj.format === 'int32') {
+              paramLength = 2;
+              param = message.slice(paramsStart, paramsStart + paramLength + 2);
+            } else if (ocaObj.format === 'int8') {
+              paramLength = 1;
+              param = message.slice(paramsStart, paramsStart + paramLength);
+            } else if (ocaObj.format === 'stringArray') {
+              const nextBreak = message.indexOf(0x00, paramsStart + 1);
+
+              if (nextBreak < 0) {
+                break;
+              }
+
+              paramLength = nextBreak - paramsStart + 1;
+              param = message.slice(paramsStart - 1, paramsStart + paramLength - 1).toString();
+            } else {
+              paramLength = message.readInt16BE(20);
+              param = message.slice(paramsStart + 2, paramsStart + 2 + paramLength);
+            }
+
+            if (ocaObj.format === 'string') {
+              ocaObj.parameters.push(param.toString());
+            } else if (ocaObj.format === 'stringArray') {
+              ocaObj.parameters.push(param.toString());
+            } else if (ocaObj.format === 'float') {
+              ocaObj.parameters.push(param.readFloatBE(0));
+            } else if (ocaObj.format === 'int16') {
+              ocaObj.parameters.push(param.readInt16BE(0));
+            } else if (ocaObj.format === 'int8') {
+              ocaObj.parameters.push(param.readInt8(0));
+            } else if (ocaObj.format === 'int32') {
+              ocaObj.parameters.push(param.readInt32BE(0));
+            } else {
+              ocaObj.parameters.push(param);
+            }
+            this.deviceInfoUpdate(device, 'status', 'ok');
+            paramsStart += paramLength + 2;
+          }
+        }
+        device.draw();
+      }
+
+      start += messageLength;
+    }
+  }
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send(Buffer.from('3b00010000000b0400010001', 'hex'));
+};
+
+function ocaCommandRequest(handle, target, method, device) {
+  const buf = Buffer.from('3b00010000001a01000100000011AAAAAAAABBBBBBBBCCCCCCCC00', 'hex');
+  buf.writeInt32BE(handle, 14); // handle
+  buf.writeInt32BE(target, 18); // target
+  buf.writeInt32BE(method, 22); // method
+  device.send(buf);
+  return buf;
+}
+
+function ocaSubscriptionRequest(handle, target, method, device) {
+  const buf = Buffer.from(
+    '3b00010000002f01000100000026000000ae00000004000300010510008205000100010000041f000100010000010000',
+    'hex'
+  );
+  buf.writeInt32BE(handle, 14); // handle
+  buf.writeInt32BE(target, 27); // target
+  device.send(buf);
+  return buf;
+}
+
+const OCAStructure = {
+  ModelDescription: {
+    target: 0x1000010d,
+    method: 0x00050001,
+    format: 'string',
+  },
+  PwrOn: {
+    target: 0x10000100,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  SubNet: {
+    target: 0x10000109,
+    method: 0x00050001,
+    format: 'int32',
+  },
+  DeviceId: {
+    target: 0x10000108,
+    method: 0x00050001,
+    format: 'int32',
+  },
+  DeviceType: {
+    target: 0x10000034,
+    method: 0x00050001,
+    format: 'string',
+  },
+  FirmwareRevision: {
+    target: 0x10000031,
+    method: 0x00050001,
+    format: 'string',
+  },
+  ChannelNameA: {
+    target: 0x10008215,
+    method: 0x00050001,
+    format: 'string',
+  },
+  ChannelNameB: {
+    target: 0x10010215,
+    method: 0x00050001,
+    format: 'string',
+  },
+  ChannelNameC: {
+    target: 0x10018215,
+    method: 0x00050001,
+    format: 'string',
+  },
+  ChannelNameD: {
+    target: 0x10020215,
+    method: 0x00050001,
+    format: 'string',
+  },
+  DelayA: {
+    target: 0x10008207,
+    method: 0x00050001,
+    format: 'float',
+  },
+  DelayB: {
+    target: 0x10010207,
+    method: 0x00050001,
+    format: 'float',
+  },
+  DelayC: {
+    target: 0x10018207,
+    method: 0x00050001,
+    format: 'float',
+  },
+  DelayD: {
+    target: 0x10020207,
+    method: 0x00050001,
+    format: 'float',
+  },
+  InputEnable1A: {
+    target: 0x10008220,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable2A: {
+    target: 0x10008221,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable3A: {
+    target: 0x10008222,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable4A: {
+    target: 0x10008223,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable5A: {
+    target: 0x10008224,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable6A: {
+    target: 0x10008225,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable7A: {
+    target: 0x10008226,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable8A: {
+    target: 0x10008227,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable1B: {
+    target: 0x10010220,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable2B: {
+    target: 0x10010221,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable3B: {
+    target: 0x10010222,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable4B: {
+    target: 0x10010223,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable5B: {
+    target: 0x10010224,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable6B: {
+    target: 0x10010225,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable7B: {
+    target: 0x10010226,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable8B: {
+    target: 0x10010227,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable1C: {
+    target: 0x10018220,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable2C: {
+    target: 0x10018221,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable3C: {
+    target: 0x10018222,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable4C: {
+    target: 0x10018223,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable5C: {
+    target: 0x10018224,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable6C: {
+    target: 0x10018225,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable7C: {
+    target: 0x10018226,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable8C: {
+    target: 0x10018227,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable1D: {
+    target: 0x10020220,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable2D: {
+    target: 0x10020221,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable3D: {
+    target: 0x10020222,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable4D: {
+    target: 0x10020223,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable5D: {
+    target: 0x10020224,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable6D: {
+    target: 0x10020225,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable7D: {
+    target: 0x10020226,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputEnable8D: {
+    target: 0x10020227,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  InputGainA: {
+    target: 0x10008206,
+    method: 0x00040001,
+    format: 'float',
+  },
+  InputGainB: {
+    target: 0x10010206,
+    method: 0x00040001,
+    format: 'float',
+  },
+  InputGainC: {
+    target: 0x10018206,
+    method: 0x00040001,
+    format: 'float',
+  },
+  InputGainD: {
+    target: 0x10020206,
+    method: 0x00040001,
+    format: 'float',
+  },
+  SpeakerIDA: {
+    target: 0x10008214,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  SpeakerIDB: {
+    target: 0x10010214,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  SpeakerIDC: {
+    target: 0x10018214,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  SpeakerIDD: {
+    target: 0x10020214,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  SpeakerIDList: {
+    target: 0x10010214,
+    method: 0x00040005,
+    format: 'stringArray',
+  },
+  OutputMode: {
+    target: 0x10000111,
+    method: 0x00040001,
+    format: 'int16',
+  },
+  OutputModeList: {
+    target: 0x10000111,
+    method: 0x00040005,
+    format: 'stringArray',
+  },
+  MuteA: {
+    target: 0x10008205,
+    method: 0x00040001,
+    format: 'int8',
+  },
+  MuteB: {
+    target: 0x10010205,
+    method: 0x00040001,
+    format: 'int8',
+  },
+  MuteC: {
+    target: 0x10018205,
+    method: 0x00040001,
+    format: 'int8',
+  },
+  MuteD: {
+    target: 0x10020205,
+    method: 0x00040001,
+    format: 'int8',
+  },
+};
@@ -0,0 +1,108 @@
+table {
+  color: white;
+  background-color: #323232;
+  font-size: 14px;
+}
+.button {
+  padding: 4px;
+  height: 65px;
+  border-radius: 4px;
+  position: relative;
+  text-align: right;
+  margin: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.light-button {
+  background: linear-gradient(0deg, #484848, #737373);
+  outline: black 2px outset;
+  border-top: #8b8b8b 2px solid;
+  border-left: #8b8b8b 2px solid;
+  min-width: 100px;
+}
+.dark-button {
+  background: linear-gradient(0deg, #0e0e0e, #282828);
+  outline: #737373 2px solid;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mute {
+  text-align: center;
+  background-image: url('muteicon-on.png'), linear-gradient(0deg, #484848, #737373);
+  background-position: 52px 13px, 0px 0px;
+  background-repeat: no-repeat;
+}
+.gain-box {
+  background-color: #272727;
+  height: 60px;
+  width: 65px;
+  margin: 2px;
+  border: #656565 2px solid;
+  outline: #111111 2px solid;
+  text-align: right;
+}
+.gain-head {
+  box-sizing: border-box;
+  height: 12px;
+  width: 100%;
+  background: #686868;
+  border: #1a1a1a 2px solid;
+  outline: #656565 2px solid;
+  margin-bottom: 27px;
+}
+.gain-box span {
+  padding: 4px;
+}
+h3 {
+  margin: 7px 0px 3px;
+  margin-left: 12px;
+  text-align: left;
+  font-weight: normal;
+  font-size: 22px;
+}
+h4 {
+  text-align: left;
+  font-size: 16px;
+  margin: 0px;
+}
+
+.channel-input {
+  position: absolute;
+  left: 9px;
+  top: 27px;
+  border-right: white 1px solid;
+  padding-right: 40px;
+  text-align: left;
+  line-height: 14px;
+}
+.channel-delay {
+  position: absolute;
+  left: 170px;
+  top: 40px;
+}
+.power-1 {
+  background: linear-gradient(0deg, #5a8127, #789b50);
+  border: #506937 1px solid;
+}
+.indicate-1 {
+  background: #00ff00;
+  border: black 2px inset;
+}
+
+.mute-1 {
+  border-top: #772b26 2px solid;
+  border-left: #772b26 2px solid;
+  background-image: url('muteicon-mute.png'), linear-gradient(0deg, #b52714, #c4473e);
+}
+
+@media screen and (min-width: 0px) and (max-width: 450px) {
+  .hide-medium {
+    display: none;
+  }
+}
+@media screen and (min-width: 0px) and (max-width: 300px) {
+  .hide-small {
+    display: none;
+  }
+}
@@ -0,0 +1,141 @@
+<header>
+	<h1><%= listName %></h1>
+	<h2><%= data.oca.FirmwareRevision.parameters[0] %></h2>
+</header>
+
+<table>
+	<tr>
+		<td>
+			<div class="button dark-button indicate-<%=data.oca.PwrOn.parameters[0]%>"></div>
+		</td>
+		<td width="250px" class="hide-small">
+			<div class="button dark-button">
+				<h4><%= data.oca.ModelDescription.parameters[0] %></h4><br>
+				<span class="hide-medium"><%= data.oca.OutputModeList.parameters[data.oca.OutputMode.parameters[0]+1] %></span>
+			</div>
+		</td>
+		<td class="hide-medium">
+			<div class="button dark-button">
+				<h4>ID</h4><br>
+				<%= data.oca.SubNet.parameters[0] %>.<%= data.oca.DeviceId.parameters[0].toString().padStart(2, '0') %>
+			</div>
+		</td>
+		<td width="95px"><div class="button dark-button power-<%=data.oca.PwrOn.parameters[0]%>"><h4>Power</h4><br>On</div></td>
+	</tr>
+	<tr>
+		<td></td>
+		<td class="hide-small">
+			<div class="button light-button">
+				<h4><%= data.oca.ChannelNameA.parameters[0] %></h4>
+				<div class="channel-input">
+					Input<br>
+					<% if(data.oca.InputEnable1A.parameters[0]){ %> A1 <% } %>
+					<% if(data.oca.InputEnable2A.parameters[0]){ %> A2 <% } %>
+					<% if(data.oca.InputEnable3A.parameters[0]){ %> A3 <% } %>
+					<% if(data.oca.InputEnable4A.parameters[0]){ %> A4 <% } %>
+					<% if(data.oca.InputEnable5A.parameters[0]){ %> D1 <% } %>
+					<% if(data.oca.InputEnable6A.parameters[0]){ %> D2 <% } %>
+					<% if(data.oca.InputEnable7A.parameters[0]){ %> D3 <% } %>
+					<% if(data.oca.InputEnable8A.parameters[0]){ %> D4 <% } %>
+				</div>
+				<div class="channel-delay">
+					<%= data.oca.DelayA.parameters[0].toFixed(1) %>ms
+				</div>
+			</div>
+		</td>
+		<td class="hide-medium">
+			<div class="gain-box">
+				<div class="gain-head"></div>
+				<span><%= data.oca.InputGainA.parameters[0].toFixed(1) %>db</span>
+			</div>
+		</td>
+		<td><div class="button light-button mute mute-<%=data.oca.MuteA.parameters[0]%>"><h3>A</h3><%= data.oca.SpeakerIDList.parameters[data.oca.SpeakerIDA.parameters[0]] %></div></td>
+	</tr>
+	<tr>
+		<td></td>
+		<td class="hide-small">
+			<div class="button light-button">
+				<h4><%= data.oca.ChannelNameB.parameters[0] %></h4>
+				<div class="channel-input">
+					Input<br>
+					<% if(data.oca.InputEnable1B.parameters[0]){ %> A1 <% } %>
+					<% if(data.oca.InputEnable2B.parameters[0]){ %> A2 <% } %>
+					<% if(data.oca.InputEnable3B.parameters[0]){ %> A3 <% } %>
+					<% if(data.oca.InputEnable4B.parameters[0]){ %> A4 <% } %>
+					<% if(data.oca.InputEnable5B.parameters[0]){ %> D1 <% } %>
+					<% if(data.oca.InputEnable6B.parameters[0]){ %> D2 <% } %>
+					<% if(data.oca.InputEnable7B.parameters[0]){ %> D3 <% } %>
+					<% if(data.oca.InputEnable8B.parameters[0]){ %> D4 <% } %>
+				</div>
+				<div class="channel-delay">
+					<%= data.oca.DelayB.parameters[0].toFixed(1) %>ms
+				</div>
+			</div>
+		</td>
+		<td class="hide-medium">
+			<div class="gain-box">
+			<div class="gain-head"></div>
+			<span><%= data.oca.InputGainB.parameters[0].toFixed(1) %>db</span>
+		</div>
+	</td>
+		<td><div class="button light-button mute mute-<%=data.oca.MuteB.parameters[0]%>"><h3>B</h3><%= data.oca.SpeakerIDList.parameters[data.oca.SpeakerIDB.parameters[0]] %></div></td>
+	</tr>
+	<tr>
+		<td></td>
+		<td class="hide-small">
+			<div class="button light-button">
+				<h4><%= data.oca.ChannelNameC.parameters[0] %></h4>
+				<div class="channel-input">
+					Input<br>
+					<% if(data.oca.InputEnable1C.parameters[0]){ %> A1 <% } %>
+					<% if(data.oca.InputEnable2C.parameters[0]){ %> A2 <% } %>
+					<% if(data.oca.InputEnable3C.parameters[0]){ %> A3 <% } %>
+					<% if(data.oca.InputEnable4C.parameters[0]){ %> A4 <% } %>
+					<% if(data.oca.InputEnable5C.parameters[0]){ %> D1 <% } %>
+					<% if(data.oca.InputEnable6C.parameters[0]){ %> D2 <% } %>
+					<% if(data.oca.InputEnable7C.parameters[0]){ %> D3 <% } %>
+					<% if(data.oca.InputEnable8C.parameters[0]){ %> D4 <% } %>
+				</div>
+				<div class="channel-delay">
+					<%= data.oca.DelayC.parameters[0].toFixed(1) %>ms
+				</div>
+			</div>
+		</td>
+		<td class="hide-medium">
+			<div class="gain-box">
+			<div class="gain-head"></div>
+			<span><%= data.oca.InputGainC.parameters[0].toFixed(1) %>db</span>
+		</div>
+	</td>
+		<td><div class="button light-button mute mute-<%=data.oca.MuteC.parameters[0]%>"><h3>C</h3><%= data.oca.SpeakerIDList.parameters[data.oca.SpeakerIDC.parameters[0]] %></div></td>
+	</tr>
+	<tr>
+		<td></td>
+		<td class="hide-small">
+			<div class="button light-button">
+				<h4><%= data.oca.ChannelNameD.parameters[0] %></h4>
+				<div class="channel-input">
+					Input<br>
+					<% if(data.oca.InputEnable1D.parameters[0]){ %> A1 <% } %>
+					<% if(data.oca.InputEnable2D.parameters[0]){ %> A2 <% } %>
+					<% if(data.oca.InputEnable3D.parameters[0]){ %> A3 <% } %>
+					<% if(data.oca.InputEnable4D.parameters[0]){ %> A4 <% } %>
+					<% if(data.oca.InputEnable5D.parameters[0]){ %> D1 <% } %>
+					<% if(data.oca.InputEnable6D.parameters[0]){ %> D2 <% } %>
+					<% if(data.oca.InputEnable7D.parameters[0]){ %> D3 <% } %>
+					<% if(data.oca.InputEnable8D.parameters[0]){ %> D4 <% } %>
+				</div>
+				<div class="channel-delay">
+					<%= data.oca.DelayD.parameters[0].toFixed(1) %>ms
+				</div>
+			</div>
+		</td>
+		<td class="hide-medium">
+			<div class="gain-box">
+			<div class="gain-head"></div>
+			<span><%= data.oca.InputGainD.parameters[0].toFixed(1) %>db</span>
+		</div>
+	</td>
+		<td><div class="button light-button mute mute-<%=data.oca.MuteD.parameters[0]%>"><h3>D</h3><%= data.oca.SpeakerIDList.parameters[data.oca.SpeakerIDD.parameters[0]] %></div></td>
+	</tr>
+</table>
@@ -1,42 +0,0 @@
-<tr class="fader" id="<%=type%>-<%=index%>">
-    <% if(fader && fader.meter>0){ %>
-        <td class="fader-channel" style="background: linear-gradient(0deg, rgba(68, 255, 68, 0.3) <%=fader.meter%>%, transparent <%=fader.meter%>%);">
-            <%=index%>
-        </td>
-    <% }else{ %>
-        <td class="fader-channel"><%=index%></td>
-    <% } %>
-
-    <% if(type=="Control_Groups"){ %>
-        <td class="fader-name lcd-control-group state-<%= fader ? fader.solo : '' %>">
-            <%= fader ? fader.name : "-" %>
-        </td>
-    <% }else if(type=="Input_Channels"){ %>
-        <td class="fader-name lcd-channel-input state-<%= fader ? fader.solo : '' %>">
-            <%= fader ? (fader.Channel_Input ? fader.Channel_Input.name: "") : "" %>
-        </td>
-    <% }else if(type=="Group_Outputs"){ %>
-        <td class="fader-name lcd-group-output state-<%= fader ? fader.solo : '' %>">
-            <%= fader ? (fader.Buss_Trim ? fader.Buss_Trim.name: "") : "" %>
-        </td>
-    <% }else if(type=="Aux_Outputs"){ %>
-        <td class="fader-name lcd-aux-output state-<%= fader ? fader.solo : '' %>">
-            <%= fader ? (fader.Buss_Trim ? fader.Buss_Trim.name: "") : "" %>
-        </td>
-    <% } %>
-    
-    <td class="fader-mute state-<%= fader ? fader.mute : '-' %>"></td>
-
-    <% if(fader){ %>
-        <% let percent = (fader.fader-10)*1.5+100 %>
-        <td class="fader-fader" style="background: linear-gradient(90deg, rgb(150, 150, 150, 0.2) <%=percent%>%, transparent <%=percent%>%);">
-            <% if(fader.fader>-100){ %>
-                <small style="mix-blend-mode: difference;"><%= fader ? Math.round(fader.fader*10.0)/10.0 : '-' %>db</small>
-            <% } %>
-        </td>
-    <% }else{ %>
-        <td>-</td>
-    <% } %>
-    
-   
-</tr>
@@ -1,17 +0,0 @@
-Cue View emulates to be the DiGiCo SD iPad app.
-<ol>
-  <li>On the SD console open <em>Master Screen</em> &rarr; <em>Setup</em> &rarr; <em>External Control</em></li>
-  <li>Enable <em>External Control</em> by pressing the button at the top of the panel</li>
-  <li>Press the <em>add device</em> button and select <em>DiGiCo Pad</em></li>
-  <li>Enter a <em>Device Name</em> for Cue View and then enter the IP Address of this computer</li>
-  <li>Enter Send and Receive Port numbers</li>
-  <ul>
-    <li>Cue View <em>Port</em> = DiGiCo <em>Receive</em></li>
-    <li>Cue View <em>Local</em> = DiGiCo <em>Send</em></li>
-  </ul>
-  <li>Tick the <em>Enable</em> column for this device</li>
-  <li>
-    Press the <em>Load</em> button in the bottom right corner of the panel and select the commands button for the
-    relevant console
-  </li>
-</ol>
@@ -1,192 +0,0 @@
-const _ = require('lodash');
-const fs = require('fs');
-const path = require('path');
-
-exports.config = {
-  defaultName: 'DiGiCo SD',
-  connectionType: 'osc-udp',
-  remotePort: 8000,
-  localPort: 8001,
-  mayChangePorts: true,
-  heartbeatInterval: 2000,
-  heartbeatTimeout: 11000,
-  searchOptions: {
-    type: 'UDPsocket',
-    // send "/Console/Name/?" this is what the iPad sends to check connection
-    searchBuffer: Buffer.from([
-      0x2f, 0x43, 0x6f, 0x6e, 0x73, 0x6f, 0x6c, 0x65, 0x2f, 0x4e, 0x61, 0x6d, 0x65, 0x2f, 0x3f, 0x00, 0x2c, 0x00, 0x00,
-      0x00,
-    ]),
-    devicePort: 8000,
-    listenPort: 9000,
-    validateResponse(msg, info) {
-      console.log(msg);
-      console.log(msg.toString());
-      return msg.toString().includes('/Console');
-    },
-  },
-};
-
-exports.ready = function ready(_device) {
-  const device = _device;
-  device.data = new DiGiCo();
-
-  device.send('/Console/Name/?');
-  device.send('/Console/Session/Filename/?');
-  device.send('/Console/Channels/?');
-  device.send('/Snapshots/Current_Snapshot/?');
-  device.send('/Meters/clear');
-};
-exports.data = function data(_device, oscData) {
-  const device = _device;
-  this.deviceInfoUpdate(device, 'status', 'ok');
-
-  const properties = oscData.address.split('/');
-  properties.shift();
-
-  if (properties[0] !== 'Meters') {
-    setObjectProperty(device.data, properties, oscData.args);
-    // console.log(properties);
-  }
-
-  if (properties[0] === 'Console' && properties[1] === 'Control_Groups') {
-    for (let i = 1; i <= device.data.Console.Control_Groups; i++) {
-      device.send(`/Control_Groups/${i}/?`);
-    }
-    device.draw();
-  } else if (properties[0] === 'Console' && properties[1] === 'Input_Channels') {
-    for (let i = 1; i <= device.data.Console.Input_Channels; i++) {
-      device.send(`/Input_Channels/${i}/Channel_Input/name/?`);
-      device.send(`/Input_Channels/${i}/mute/?`);
-      device.send(`/Input_Channels/${i}/solo/?`);
-      device.send(`/Input_Channels/${i}/fader/?`);
-      device.send(`/Meters/request/1${i}`, [
-        { type: 's', value: `/Input_Channels/${i}/Channel_Input/post_meter/left` },
-      ]);
-    }
-    device.draw();
-  } else if (properties[0] === 'Console' && properties[1] === 'Group_Outputs') {
-    for (let i = 1; i <= device.data.Console.Group_Outputs; i++) {
-      device.send(`/Group_Outputs/${i}/mute/?`);
-      device.send(`/Group_Outputs/${i}/solo/?`);
-      device.send(`/Group_Outputs/${i}/fader/?`);
-      device.send(`/Group_Outputs/${i}/Buss_Trim/name/?`);
-      device.send(`/Meters/request/3${i}`, [{ type: 's', value: `/Group_Outputs/${i}/fader_meter/left` }]);
-    }
-    device.draw();
-  } else if (properties[0] === 'Console' && properties[1] === 'Aux_Outputs') {
-    for (let i = 1; i <= device.data.Console.Aux_Outputs; i++) {
-      device.send(`/Aux_Outputs/${i}/mute/?`);
-      device.send(`/Aux_Outputs/${i}/solo/?`);
-      device.send(`/Aux_Outputs/${i}/fader/?`);
-      device.send(`/Aux_Outputs/${i}/Buss_Trim/name/?`);
-      device.send(`/Meters/request/4${i}`, [{ type: 's', value: `/Aux_Outputs/${i}/fader_meter/left` }]);
-    }
-    device.draw();
-  } else if (properties[0] === 'Console' && properties[1] === 'Name') {
-    this.deviceInfoUpdate(device, 'defaultName', device.data.Console.Name);
-  } else if (['Control_Groups', 'Input_Channels', 'Group_Outputs', 'Aux_Outputs'].includes(properties[0])) {
-    device.update('fader', {
-      type: properties[0],
-      channel: properties[1],
-    });
-  } else if (properties[0] === 'Snapshots') {
-    device.update('updateSnapshot', {
-      snapshots: device.data.Snapshots,
-    });
-  } else if (properties[0] === 'Meters' && properties[1] === 'values') {
-    for (let i = 0; i < oscData.args.length; i += 2) {
-      const channelType = oscData.args[i].toString()[0];
-      const channelNumber = oscData.args[i].toString().substring(1);
-      const meterValue = BigInt(oscData.args[i + 1]) / -40000n + 100n;
-
-      if (channelType === '1' && device.data.Input_Channels[channelNumber]) {
-        device.data.Input_Channels[channelNumber].meter = meterValue;
-        device.update('fader', {
-          type: 'Input_Channels',
-          channel: channelNumber,
-        });
-      } else if (channelType === '3' && device.data.Group_Outputs[channelNumber]) {
-        device.data.Group_Outputs[channelNumber].meter = meterValue;
-        device.update('fader', {
-          type: 'Group_Outputs',
-          channel: channelNumber,
-        });
-      } else if (channelType === '4' && device.data.Aux_Outputs[channelNumber]) {
-        device.data.Aux_Outputs[channelNumber].meter = meterValue;
-        device.update('fader', {
-          type: 'Aux_Outputs',
-          channel: channelNumber,
-        });
-      }
-    }
-  }
-};
-
-exports.heartbeat = function heartbeat(device) {
-  device.send('/Console/Name/?');
-  console.log(device.data);
-
-  // Need to do a /Meters/clear when quitting Cue View or closing the View
-};
-
-class DiGiCo {
-  constructor() {
-    this.Console = {};
-    this.Input_Channels = {};
-    this.Aux_Outputs = {};
-    this.Control_Groups = {};
-    this.Group_Outputs = {};
-    this.Matrix_Outputs = {};
-    this.Layout = {};
-  }
-}
-
-/*
- This function takes somethings like this /Console/Session/Filename with a osc args like ['session.ses'] 
- and turns it into a nested object like. An easy way to set properties converting OSC paths to properties
- {
-    Console: {
-      Session: {
-        Filename: 'session.ses'
-      }
-    }
- }
-
-*/
-function setObjectProperty(_object, _properties, value) {
-  let object = _object;
-  const properties = _properties;
-
-  for (let i = 0; i < properties.length - 1; i++) {
-    const property = properties[i];
-    if (object[property] === undefined) {
-      object[property] = {};
-    }
-    object = object[property];
-  }
-  const property = properties[properties.length - 1];
-  if (Array.isArray(value)) {
-    // if this is an array of length one just set the property to the contents so ['string'] becomes 'string'
-    if (value.length === 1) {
-      object[property] = value[0];
-      return;
-    }
-  }
-  object[property] = value;
-}
-
-const faderTemplate = _.template(fs.readFileSync(path.join(__dirname, `/fader.ejs`)));
-exports.update = function update(device, doc, updateType, data) {
-  if (updateType === 'fader') {
-    const $elem = doc.getElementById(`${data.type}-${data.channel}`);
-    $elem.outerHTML = faderTemplate({
-      type: data.type,
-      fader: device.data[data.type][data.channel],
-      index: data.channel,
-    });
-  } else if (updateType === 'snapshot') {
-    const $elem = doc.getElementById(`snapshot`);
-    $elem.textContent = `${data.snapshots.Current_Snapshot}`;
-  }
-};
@@ -1,76 +0,0 @@
-.column {
-  float: left;
-  margin: 5px;
-}
-.section {
-  border: #333 3px solid;
-  border-bottom: none;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  padding: 10px;
-  margin-bottom: 30px;
-}
-.section h3 {
-  font-weight: 300;
-  margin-top: 0px;
-  color: #aaa !important;
-}
-table {
-  border-collapse: collapse;
-  display: block;
-}
-.fader:nth-child(even) {
-  background: #1a1a1a;
-}
-.fader:nth-child(odd) {
-  background: #1f1f1f;
-}
-.fader td {
-  text-align: center;
-  width: 30px;
-  height: 20px;
-  border: black 1px solid;
-}
-.fader .fader-channel {
-  color: #777;
-  font-size: 10px;
-}
-.fader .fader-name {
-  width: 80px;
-  color: black;
-  font-family: monospace;
-}
-.fader .lcd-control-group {
-  background-color: rgb(66, 132, 255);
-}
-.fader .lcd-channel-input {
-  background-color: rgb(135, 175, 235);
-}
-.fader .lcd-group-output {
-  background-color: rgb(241, 71, 48);
-}
-.fader .lcd-aux-output {
-  background-color: rgb(197, 0, 187);
-}
-.fader .fader-name.state-1 {
-  background-color: rgb(0, 185, 0);
-}
-.fader .fader-mute {
-  width: 10px;
-  background-color: #444;
-}
-.fader .fader-mute.state-1 {
-  background-color: red;
-}
-.fader .fader-fader {
-  text-align: left;
-  width: 70px;
-  padding: 0px 10px;
-  color: rgb(68, 68, 68);
-}
-
-#snapshot {
-  font-size: 36px;
-  font-weight: bold;
-  font-family: 'Arial Black', 'Impact';
-}
@@ -1,56 +0,0 @@
-<header>
-  <h1><%= listName %></h1>
-  <h2><%= data.Console.Session.Filename %></h2>
-</header>
-
-<% 
-const fs = require('fs');
-let _ = require('lodash');
-const path = require('path');
-  
-  let faderTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/digico/fader.ejs`)));
-%>
-
-<div class="column">
-  <div class="section">
-    <h3>snapshot <span id="snapshot"></span></h3>
-  </div>
-
-  <div class="section">
-  <h3>control groups</h3>
-  <table>
-    <% for(let i=1; i<=data.Console.Control_Groups; i++){ %>
-      <%= faderTemplate({type: "Control_Groups", fader: data.Control_Groups[i], index: i}) %>
-    <% } %>
-  </table>
-  </div>
-
-  <div class="section">
-  <h3>group outputs</h3>
-  <table>
-    <% for(let i=1; i<=data.Console.Group_Outputs; i++){ %>
-      <%= faderTemplate({type: "Group_Outputs", fader: data.Group_Outputs[i], index: i}) %>
-    <% } %>
-  </table>
-  </div>
-
-  <div class="section">
-    <h3>aux outputs</h3>
-    <table>
-      <% for(let i=1; i<=data.Console.Aux_Outputs; i++){ %>
-        <%= faderTemplate({type: "Aux_Outputs", fader: data.Aux_Outputs[i], index: i}) %>
-      <% } %>
-    </table>
-    </div>
-</div>
-
-<div class="column section">
-  <h3>input channels</h3>
-  <table>
-    <% for(let i=1; i<=data.Console.Input_Channels; i++){ %>
-      <%= faderTemplate({type: "Input_Channels", fader: data.Input_Channels[i], index: i}) %>
-    <% } %>
-  </table>
-</div>
-
-
@@ -1,13 +1,5 @@
-<h2>Connection Requirements: Eos 3.2 and newer</h2>
-<h4>Browser: Setup &rarr; Device Settings &rarr; Network</h4>
-<ul>
-  <li>Enable <em>Third Party OSC</em> on the network interface(s) you are using</li>
-  <li>Ensure this Cue View device's port is set to <em>3037</em></li>
-</ul>
+<h2>Connection Requirements</h2>

-<p>&nbsp;</p>
-
-<h2>Connection Requirements: Eos 3.1 and earlier</h2>
 <h4>Shell/ECU &rarr; Network</h4>
 <ul>
  <li>Enable <em>&#10004; TCP OSC</em>. The TCP format should be "TCP Format for OSC 1.1 (SLIP)".</li>
@@ -15,7 +7,7 @@
 </ul>
 If the "Third Party OSC" option is not available, Eos must be updated to 3.1 or newer.

-<h4>Browser: System Settings &rarr; Show Control &rarr; OSC</h4>
+<h4>System Settings &rarr; Show Control &rarr; OSC</h4>
 <ul>
  <li>Enable <em>&#10004; OSC RX</em></li>
  <li>Enable <em>&#10004; OSC TX</em></li>
@@ -80,12 +80,9 @@ exports.data = function data(_device, osc) {
  } else if (match(addressParts, ['eos', 'out', 'event', 'cue', '*', '*', 'fire'])) {
    device.data.EOS.activeCue = addressParts[5];
    device.draw();
-    const cues = device.data.EOS.cueLists[addressParts[4]][addressParts[5]];
-    if (cues) {
-      device.update('activeCue', {
-        uid: cues[0].uid,
-      });
-    }
+    device.update('activeCue', {
+      uid: device.data.EOS.cueLists[addressParts[4]][addressParts[5]][0].uid,
+    });
  } else if (match(addressParts, ['eos', 'out', 'notify', 'cue', '*', '*', '*', '*'])) {
    const cueList = addressParts[4];
    const cueNumber = osc.args[1];
@@ -3,8 +3,8 @@ const md5 = require('md5');
 exports.config = {
  defaultName: 'PJLink Projector',
  connectionType: 'TCPsocket',
-  remotePort: 4352,
-  mayChangePorts: false,
+  defaultPort: 4352,
+  mayChangePort: false,
  heartbeatInterval: 5000,
  heartbeatTimeout: 15000,
  searchOptions: {
@@ -1 +0,0 @@
-<p><em>PosiStageNet</em> requires no configuration.</p>
@@ -1,58 +0,0 @@
-const { Decoder } = require('@jwetzell/posistagenet');
-
-exports.config = {
-  defaultName: 'PosiStageNet',
-  connectionType: 'multicast',
-  port: 56565,
-  remotePort: 56565,
-  mayChangePorts: false,
-  heartbeatInterval: 5000,
-  heartbeatTimeout: 15000,
-  searchOptions: {
-    type: 'multicast',
-    address: `236.10.10.10`,
-    port: 56565,
-    validateResponse(msg, info) {
-      // TODO(jwetzell): find a way to check that this is a posistagenet message
-      return true;
-    },
-  },
-};
-
-exports.ready = function ready(_device) {
-  const device = _device;
-  device.data = {};
-  const networkInterfaces = device.getNetworkInterfaces();
-
-  Object.keys(networkInterfaces).forEach((networkInterfaceID) => {
-    const networkInterface = networkInterfaces[networkInterfaceID];
-    device.connection.addMembership(`236.10.10.10`, networkInterface[0].address);
-  });
-};
-
-exports.data = function data(_device, buf, info) {
-  const device = _device;
-
-  if (!device.decoders) {
-    device.decoders = {};
-  }
-
-  if (!device.decoders[info.address]) {
-    device.decoders[info.address] = new Decoder();
-  }
-
-  device.decoders[info.address].decode(buf);
-
-  Object.keys(device.decoders).forEach((address) => {
-    device.data[address] = {
-      trackers: device.decoders[address].trackers,
-      system_name: device.decoders[address].system_name,
-      fields: device.decoders[address].getTrackerFields(),
-    };
-  });
-  device.draw();
-};
-
-exports.heartbeat = function heartbeat(device) {};
-
-exports.update = function update(_device, doc, updateType, updateData) {};
@@ -1,46 +0,0 @@
-section {
-  background-color: #2d2d2d;
-  border: gray 1px solid;
-  padding: 10px;
-  padding-top: 0px;
-  border-radius: 10px;
-  overflow: hidden;
-}
-table {
-  border: #414142 1px solid;
-  background-color: #272727;
-}
-table,
-th,
-td {
-  border-collapse: collapse;
-  color: #ccc;
-
-  font-size: 13px;
-}
-th {
-  padding: 2px 10px;
-}
-td {
-  text-align: center;
-  padding: 2px 7px;
-  font-family: 'Courier New', Courier, monospace;
-}
-.bg-pos {
-  background-color: #443727;
-}
-.bg-speed {
-  background-color: #32422e;
-}
-.bg-ori {
-  background-color: #2e4242;
-}
-.bg-accel {
-  background-color: #392b3f;
-}
-.bg-trgtpos {
-  background-color: #3a2732;
-}
-.border-right {
-  border-right: 1px solid #272727;
-}
@@ -1,154 +0,0 @@
-<header>
-  <h1><%= listName%></h1>
-</header>
-
-<div>
-  <!-- Server Loop -->
-  <% Object.keys(data).forEach((address) => { 
-    const instanceData = data[address]
-  %>
-  <section>
-  <h2>Server: <%= instanceData.system_name %> (<%= address %>)</h2>
-  <h3>Tracker Count: <%= Object.keys(instanceData.trackers).length %></h3>
-
-  <table>
-    <tr>
-      <th></th>
-      <% if(instanceData.fields.has('tracker_name')) { %>
-        <th></th>
-      <% } %>
-
-      <% if(instanceData.fields.has('pos')) { %>
-        <th colspan="3" class="bg-pos border-right">POS</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('speed')) { %>
-        <th colspan="3" class="bg-speed border-right">SPEED</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('ori')) { %>
-        <th colspan="3" class="bg-ori border-right">ORI</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('status')) { %>
-        <th class="border-right"></th>
-      <% } %>
-
-      <% if(instanceData.fields.has('accel')) { %>
-        <th colspan="3" class="bg-accel border-right">ACCEL</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('trgtpos')) { %>
-        <th colspan="3" class="bg-trgtpos border-right">TRGTPOS</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('timestamp')) { %>
-        <th></th>
-      <% } %>
-    </tr>
-    <tr>
-      <th>ID</th>
-      <% if(instanceData.fields.has('tracker_name')) { %>
-        <th>Name</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('pos')) { %>
-        <th class="bg-pos">x</th>
-        <th class="bg-pos">y</th>
-        <th class="bg-pos border-right">z</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('speed')) { %>
-        <th class="bg-speed">x</th>
-        <th class="bg-speed">y</th>
-        <th class="bg-speed border-right">z</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('ori')) { %>
-        <th class="bg-ori">x</th>
-        <th class="bg-ori">y</th>
-        <th class="bg-ori border-right">z</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('status')) { %>
-        <th class="border-right">validity</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('accel')) { %>
-        <th class="bg-accel">x</th>
-        <th class="bg-accel">y</th>
-        <th class="bg-accel border-right">z</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('trgtpos')) { %>
-        <th class="bg-trgtpos">x</th>
-        <th class="bg-trgtpos">y</th>
-        <th class="bg-trgtpos border-right">z</th>
-      <% } %>
-
-      <% if(instanceData.fields.has('timestamp')) { %>
-        <th>tracker_timestamp</th>
-      <% } %>
-
-    </tr>
-    <!-- Tracker Loop -->
-    <% Object.entries(instanceData.trackers).forEach(([trackerId,trackerData]) => { %>
-
-    <tr>
-      <td><%= trackerId %></td>
-      <% if(instanceData.fields.has('tracker_name')) { %>
-        <td><%= trackerData.tracker_name?.tracker_name%></td>
-      <% } %>
-      
-      <% if(instanceData.fields.has('pos')) { %>
-        <!-- pos -->
-        <td class="bg-pos"><%= trackerData.pos?.pos_x?.toFixed(2) %></td>
-        <td class="bg-pos"><%= trackerData.pos?.pos_y?.toFixed(2) %></td>
-        <td class="bg-pos border-right"><%= trackerData.pos?.pos_z?.toFixed(2) %></td>
-      <% } %>
-
-      <% if(instanceData.fields.has('speed')) { %>
-        <!-- speed -->
-        <td class="bg-speed"><%= trackerData.speed?.speed_x?.toFixed(2) %></td>
-        <td class="bg-speed"><%= trackerData.speed?.speed_y?.toFixed(2) %></td>
-        <td class="bg-speed border-right"><%= trackerData.speed?.speed_z?.toFixed(2) %></td>
-      <% } %>
-
-      <% if(instanceData.fields.has('ori')) { %>
-        <!-- ori -->
-        <td class="bg-ori"><%= trackerData.ori?.ori_x?.toFixed(2) %></td>
-        <td class="bg-ori"><%= trackerData.ori?.ori_y?.toFixed(2) %></td>
-        <td class="bg-ori border-right"><%= trackerData.ori?.ori_z?.toFixed(2) %></td>
-      <% } %>
-
-      <% if(instanceData.fields.has('status')) { %>
-        <td class="border-right"><%= trackerData.status?.validity?.toFixed(2) %></td>
-      <% } %>
-
-      <% if(instanceData.fields.has('accel')) { %>
-        <!-- accel -->
-        <td class="bg-accel"><%= trackerData.accel?.accel_x?.toFixed(2) %></td>
-        <td class="bg-accel"><%= trackerData.accel?.accel_y?.toFixed(2) %></td>
-        <td class="bg-accel border-right"><%= trackerData.accel?.accel_z?.toFixed(2) %></td>
-      <% } %>
-
-      <% if(instanceData.fields.has('trgtpos')) { %>
-        <!-- trgtpos -->
-        <td class="bg-trgtpos"><%= trackerData.trgtpos?.trgtpos_x?.toFixed(2) %></td>
-        <td class="bg-trgtpos"><%= trackerData.trgtpos?.trgtpos_y?.toFixed(2) %></td>
-        <td class="bg-trgtpos border-right"><%= trackerData.trgtpos?.trgtpos_z?.toFixed(2) %></td>
-      <% } %>
-
-      <% if(instanceData.fields.has('timestamp')) { %>
-        <td><%= trackerData.timestamp?.tracker_timestamp %></td>
-      <% } %>
-
-    </tr>
-
-    <% }); %>
-  </table>
-</section>
-  <% 
-    }); 
-  %>
-</div>
@@ -1,17 +1,15 @@
-<% let cueKeys = allCues[cueList.uniqueID]; %>
+<div id="<%= cueList.uniqueID %>">

-<div id="<%= cueKeys.uniqueID %>">
-
-<h3><%= workspace.displayName %> &mdash; <%= cueList.listName %></h3>
+<h3><%= cueList.displayName %></h3>
 <%
-  let width = 100/cueKeys.cartColumns;
-  let height = 600/(cueKeys.cartRows);
+  let width = 100/cueList.cartColumns;
+  let height = 600/(cueList.cartRows);
 %>

 <div class="cart">

-<% for(let r=0; r<cueKeys.cartRows; r++){ %>
-  <% for(let c=0; c<cueKeys.cartColumns; c++){ %>
+<% for(let r=0; r<cueList.cartRows; r++){ %>
+  <% for(let c=0; c<cueList.cartColumns; c++){ %>
    <% let style = `style="left:${width*c}%; top:${height*r}px; width:${width }%; height:${height}px;"`; %>

    <div class="cartCueWrapper" <%= style %>><div class="cartCue cartBlank"></div></div>
@@ -20,27 +18,25 @@
 <% } %>


-<% for(let i=0; i<cueList.cues.length; i++){
-  let cue = allCues[cueList.cues[i].uniqueID];
+<% for(var c in cueList.cues){ 
+  let cue = cueList.cues[c];

  if(!cue.cartPosition){
    cue.cartPosition = [0, 0];
  }

-
  let row = cue.cartPosition[0]-1;
  let col = cue.cartPosition[1]-1;

  let colPos = width*col;
  let rowPos = height*row;

-  if(col>=cueKeys.cartColumns || row>=cueKeys.cartRows){
+  if(col>=cueList.cartColumns || row>=cueList.cartRows){
    continue;
-  }
-
+  } 
 %>
-
-<%= tileTemplate({cue: cueList.cues[i], allCues: allCues, workspace: workspace}) %>
+ 
+<%= tileTemplate({cue: allCues[cue.uniqueID], allCues: allCues}) %>

 <% } %>

@@ -1,206 +1,145 @@
-<% let cueKeys = allCues[cue.uniqueID]; %>
 <% let playbackPosition = workspace.playbackPosition==cue.uniqueID ? "playback-position" : "" %>
-<% let selected = workspace.selected.includes(cue.uniqueID) ? "selected": "" %>
+<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%= playbackPosition %>" id="<%= cue.uniqueID %>">

-<% if(cueKeys && cueKeys.parent){ %>
+  <td></td> <!-- playhead/color indicator -->

-<tr class="q-<%= cueKeys.colorName %> q-armed-<%= cueKeys.armed %> <%= playbackPosition %> <%= selected %>" id="<%= cueKeys.uniqueID %>">
+  <td><center>
+  <% if(cue.broken){ %>
+    <img src="./plugins/qlab/img/status_broken.png" height="18px">

-    <!-- playhead/color indicator -->
-    <td class="playhead"></td> 
+  <% }else if(cue.running){ %>
+    <img src="./plugins/qlab/img/status_running.png" height="18px">
+
+  <% }else if(cue.paused){ %>
+    <img src="./plugins/qlab/img/status_paused.png" height="18px">
+
+  <% }else if(cue.loaded){ %>
+    <img src="./plugins/qlab/img/status_loaded.png" height="18px">
+
+  <% }else if(cue.flagged){ %>
+    <img src="./plugins/qlab/img/status_flagged.png" height="20px">
+
+  <% }else{ %>
    
+  <% } %>
+  </center></td>

-    <!-- status indicator -->
-    <td><center> 
-    <% if(cueKeys.isBroken){ %>
-        <img src="./plugins/qlab/img/status_broken.png" height="18px">
-    
-    <% }else if(cueKeys.isRunning){ %>
-        <img src="./plugins/qlab/img/status_running.png" height="18px">
-    
-    <% }else if(cueKeys.isPaused){ %>
-        <img src="./plugins/qlab/img/status_paused.png" height="18px">
-    
-    <% }else if(cueKeys.isLoaded){ %>
-        <img src="./plugins/qlab/img/status_loaded.png" height="18px">
-    
-    <% }else if(cueKeys.isFlagged){ %>
-        <img src="./plugins/qlab/img/status_flagged.png" height="20px">
-    
-    <% }else{ %>
-        
-    <% } %>
-    </center></td>
+  <% if(cue.type == "Group" && cue.groupMode){ %>
+    <td><img src="./plugins/qlab/img/v5/group-<%= cue.groupMode %>.png" height="20px"></td>
+
+  <% }else{ %>
+    <td><img src="./plugins/qlab/img/<%= cue.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>
+
+  <% } %>


-    <!-- cue type icon -->
-    <% if(cueKeys.type == "Group" && cueKeys.mode){ %> 
-        <td><img src="./plugins/qlab/img/v5/group-<%= cueKeys.mode %>.png" height="20px"></td>
-
-    <% }else{ %>
-        <td><img src="./plugins/qlab/img/<%= cueKeys.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>
-
-    <% } %>
-
-
-
-    <!-- cue number -->
-    <td><center><%= cueKeys.number || "&nbsp;" %></center></td>
-
-
-    <% let nextCue = cueKeys.cueInWorkspace.parent.cues[cueKeys.cueInWorkspace.sortIndex+1]; %>
-
-    <!-- spaces before name -->
-    <% for(let i=0; i<cueKeys.parentKeys.length; i++){ %>
-        <% let parent = cueKeys.parentKeys[i+1]; %>
-        <%  %>
-
-        <% if(cueKeys.type=="Group" && cueKeys.cues.length==0 && i==cueKeys.parentKeys.length-1){ %>
-            <td class="gMode-<%= cueKeys.mode %> gLeft gTop gBot group-arrow"></td>
-
-        <% }else if(cueKeys.type=="Group" && i==cueKeys.parentKeys.length-1){ %>
-            <td class="gMode-<%= cueKeys.mode %> gLeft gTop group-arrow"></td>
-
-        <%}else if(parent){%>
-
-            <% let parentCues = parent.cueInWorkspace.cues %>
-            <% let lastCueInMe = parentCues[parentCues.length-1]%>
-
-            <% while(lastCueInMe.type=="Group" && lastCueInMe.cues.length){
-                parentCues = lastCueInMe.cues;
-                lastCueInMe = parentCues[parentCues.length-1];
-            } %>
-                    
-            <% if(lastCueInMe.uniqueID == cueKeys.uniqueID){ %>
-                <td class="gMode-<%= parent.mode %> gLeft gBot"></td>
-
-            <% }else{ %>
-                <td class="gMode-<%= parent.mode %> gLeft"></td>
-                
-
-            <% } %>
-
-
-        <% }else if(cueKeys.parentKeys[i]){ %>
-            <% let nextCue2 = cueKeys.parentKeys[i].cues[cueKeys.cueInWorkspace.sortIndex+1]; %>
-
-            <% if(!nextCue2){ %>
-                <td class="gMode-<%= cueKeys.parentKeys[i].mode %> gBot"></td>
-
-            <% }else{ %>
-                <td></td>
-
-            <% } %>
-
-
-        <% } %>
-        
-    <% } %>    
-
-            
-
-    <!-- cue name -->
  
-    <% if(cue.type=="Group"){ %>
-        
-        <% if(cue.cues && cue.cues.length==0){ %>
-          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gBot gRight"><%= cueKeys.listName %></td>
-    
+
+  <td><center><%= cue.number || "&nbsp;" %></center></td>
+
+
+  <% for(let i=0; i<cue.nestedGroupModes.length; i++){ %>
+
+      <% if(cue.cues && cue.cues.length==0 && i==cue.nestedGroupModes.length-1){ %>
+        <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft gBot gTop group-arrow"></td>
+      
+      <% }else if(cue.cues && i==cue.nestedGroupModes.length-1){ %>
+        <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft gTop group-arrow"></td>
+
+      <% }else if(cue.nestedGroupPosition[i]<=0){ %>
+        <% if(i<cue.nestedGroupModes.length-1){ %>
+          <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft gBot"></td>
+
        <% }else{ %>
-          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gRight"><%= cueKeys.listName %></td>
-    
+          <td class="gMode-<%= cue.nestedGroupModes[i] %> gBot"></td>
+
        <% } %>
-    
-    <% }else if(!nextCue){ %>
-        <td colspan="<%= 11-cueKeys.parentKeys.length %>" class="cue-name gMode-<%= cueKeys.parent.mode %> gBot gRight"><%= cueKeys.listName %></td>
-    
-    <% }else{ %>
-        <td colspan="<%= 11-cueKeys.parentKeys.length %>" class="cue-name gMode-<%= cueKeys.parent.mode %> gRight"><%= cueKeys.listName %></td>
-    
-    <% } %>
-    
+
+      <% }else if(i<cue.nestedGroupModes.length-1){ %>
+        <td class="gMode-<%= cue.nestedGroupModes[i] %> gLeft"></td>
+
+      <% }else{ %>
+        <td class="gMode-<%= cue.nestedGroupModes[i] %>"></td>
+
+      <% } %>
+      
+
+  <% } %>
+
+  
+
+  <!-- end spacer cells -->


-
-    <!-- cue target -->
-    <% if(cueKeys.currentCueTarget){ %>
-        <td class="q-target hide-medium"><%= allCues[cueKeys.currentCueTarget].number ||  allCues[cueKeys.currentCueTarget].listName %></td>
+	<% if(cue.type=="Group"){ %>
+    <% if(cue.cues.length==0){ %>
+      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gBot gRight"><%= cue.listName %></td>

    <% }else{ %>
-        <td class="q-target hide-medium"></td>
-
-    <% } %>
-    
-
-
-    <!-- cue preWait -->
-    <% if(cueKeys.preWait){ %>
-        <td class="q-time hide-small"><%= elapsedTime(cueKeys.preWait, cueKeys.preWaitElapsed, "preWait", cueKeys) %></td>
-
-    <% }else{ %>
-        <td class="q-time q-gray-text hide-small">00:00.00</td>
+      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gRight"><%= cue.listName %></td>

    <% } %>

+  <% }else if(cue.nestedGroupPosition[1]==0){ %>
+    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[cue.nestedGroupModes.length-1] %> gBot gRight"><%= cue.listName %></td>
+
+  <% }else{ %>
+    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[cue.nestedGroupModes.length-1] %> gRight"><%= cue.listName %></td>
+
+  <% } %>


-    <!-- cue duration -->
-    <% let cueTypesWithAction = ["Audio", "Mic", "Video", "Camera", "Text", "Light", "Fade", "Network", "MIDI File", "Timecode", "Wait"]; %>
-    <% if((cueKeys.type=="Group" && cueKeys.mode==3) || (cueKeys.type=="Group" && cueKeys.mode==6) || cueTypesWithAction.includes(cueKeys.type)){ %>
-        <td class="q-time hide-medium"><%= elapsedTime(cueKeys.duration, cueKeys.actionElapsed, "action", cueKeys) %></td>
-
-    <% }else{ %>
-        <td class="hide-medium"></td>
-
-    <% } %>
-
-
-    <!-- cue postWait -->
-    <% if(cueKeys.postWait){ %>
-        <td class="q-time hide-medium"><%= elapsedTime(cueKeys.postWait, cueKeys.postWaitElapsed, "postWait", cueKeys) %></td>
-
-    <% }else{ %>
-        <td class="q-time q-gray-text hide-medium">00:00.00</td>
-
-    <% } %>
+  <td class="q-time hide-medium"><%= cue.target %></td>



-    <!-- cue continueMode -->
-    <% if(cueKeys.continueMode==2){ %>
-        <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>

-    <% }else if(cueKeys.continueMode==1){ %>
-        <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>
+  <% if(cue.preWait){ %>
+    <td class="q-time hide-small"><%= elapsedTime(cue.preWait, cue.preWaitElapsed, "preWait", cue) %></td>

-    <% }else{ %>
-        <td class="hide-small"></td>
-
-    <% } %>
-
-
-</tr>
-
-
-    <% }else{ %>
-
-<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> " id="<%= cue.uniqueID %>">
-    <td></td>
-    <td></td>
-    <td></td>
-    <td><center><%= cue.number || "&nbsp;" %></center></td>
-    <td colspan="11" id="cue-name"><%= cue.listName %></td>
-    <td class="q-time hide-medium"></td>
+  <% }else{ %>
    <td class="q-time q-gray-text hide-small">00:00.00</td>
+
+  <% } %>
+
+
+  <% let cueTypesWithAction = ["Audio", "Mic", "Video", "Camera", "Text", "Light", "Fade", "Network", "MIDI File", "Timecode", "Wait"]; %>
+  <% if((cue.type=="Group" && cue.groupMode==3) || cueTypesWithAction.indexOf(cue.type)>=0){ %>
+    <td class="q-time hide-medium"><%= elapsedTime(cue.duration, cue.actionElapsed, "action", cue) %></td>
+
+  <% }else{ %>
    <td class="hide-medium"></td>
+
+  <% } %>
+
+
+
+  <% if(cue.postWait){ %>
+    <td class="q-time hide-medium"><%= elapsedTime(cue.postWait, cue.postWaitElapsed, "postWait", cue) %></td>
+
+  <% }else{ %>
    <td class="q-time q-gray-text hide-medium">00:00.00</td>
+
+  <% } %>
+
+
+
+  <% if(cue.continueMode==2){ %>
+    <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>
+
+  <% }else if(cue.continueMode==1){ %>
+    <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>
+
+  <% }else{ %>
    <td class="hide-small"></td>
+
+  <% } %>
+
+
 </tr>

-<% } %>
-
-<%
-function prettyFormatTime(seconds){
+<% 
+  function prettyFormatTime(seconds){
    if(!seconds){
      return "00:00.00";
    }
@@ -212,14 +151,14 @@ function prettyFormatTime(seconds){
    return string.substring(startIndex, string.length-2)
  }

-function elapsedTime(def, value, type, cue){
+  function elapsedTime(def, value, type, cue){

-    if(type=="action" && cue.isPaused){
+    if(type=="action" && cue.paused){
      value-=cue.preWait;
    }

    let border, fill;
-    if(cue.isPaused){
+    if(cue.paused){
      border = "#f6e737";
      fill = "rgba(255, 240, 60, 0.7)";
    }else{
@@ -232,7 +171,7 @@ function elapsedTime(def, value, type, cue){
      let percent = value/def*100;
      let bg = `style='background: black; background: linear-gradient(90deg, ${fill} ${percent}%, transparent ${percent}%);`;

-      if(cue.isPaused){
+      if(cue.paused){
        bg+= "outline-color: "+border+";";
        bg+= "color: white;";
      }
@@ -240,7 +179,7 @@ function elapsedTime(def, value, type, cue){
      
      return `<div class='q-time-elapsed' ${bg}>${prettyFormatTime(Math.min(def, value))}</span>`;

-    }else if(type=="postWait" && cue.continueMode==0){
+    }else if(type=="postWait" || type=="action"){
      return `<span class='q-gray-text'>${prettyFormatTime(def)}</span>`;

    }else{
@@ -1,13 +1,13 @@
-<h3 id="<%= cueList.uniqueID %>"><%= workspace.displayName %> &mdash; <%= cueList.listName %></h3>
+<h3 id="<%= cueList.uniqueID %>"><%= workspace.displayName %> &mdash; <%= cueList.displayName %></h3>

 <table cellspacing="0">
  <tr>
-    <th width="3px" style="border-left: none; border-right: none;"></th>
+    <th width="1px" style="border-left: none; border-right: none;"></th>
    <th width="20px" style="border-left: none; border-right: none;"></th>
    <th width="20px" style="border-left: none;"></th>
    <th width="55px">Number</th>
-    <th width="25px" class="no-border">Name</th>
    <th width="25px" style="padding: 0px"></th>
+    <th width="25px" class="no-border">Q</th>
    <th width="25px" class="no-border"></th>
    <th width="25px" class="no-border"></th>
    <th width="25px" class="no-border"></th>
@@ -18,17 +18,17 @@
    <th width="25px" class="no-border"></th>
    <th class="no-border"></th>
    <th width="55px" class="hide-medium">Target</th>
-    <th width="80px" class="hide-small"style="border-right: none;">Pre-Wait</th>
-    <th width="80px" class="hide-medium" style="border-left: none; border-right: none;">Duration</th>
-    <th width="80px" class="hide-medium" style="border-left: none; border-right: none;">Post-Wait</th>
+    <th width="80px" class="hide-small"style="border-right: none;">Pre Wait</th>
+    <th width="80px" class="hide-medium" style="border-left: none; border-right: none;">Action</th>
+    <th width="80px" class="hide-medium" style="border-left: none; border-right: none;">Post Wait</th>
    <th width="20px" class="hide-small" style="border-left: none; border-right: none;">
      <img src="plugins/qlab/img/auto_continue_stubby.png" height="20px">
    </th>
  </tr>
  <tbody id="">
    
-    <% for(let i=0; i<cueList.cues.length; i++){ %>
-      <%= displayCueRow(cueList.cues[i]) %>
+    <% for(const cue_id in cueList.cues){ %>
+      <%= displayCueRow(cueList.cues[cue_id]) %>
    <% } %>

  </tbody>
@@ -36,13 +36,16 @@


 <% 
+
+
+
 function displayCueRow(q){
-  let html = rowTemplate({cue: q, allCues: allCues, workspace: workspace});
+  let html = rowTemplate({cue: allCues[q.uniqueID], allCues: allCues, workspace: workspace});

  if(q.cues){
-    for(let i=0; i<q.cues.length; i++){
-      html += displayCueRow(q.cues[i]);
-    }
+    q.cues.forEach(q =>{
+      html += displayCueRow(q);
+    })
  }
  return html;
 }
@@ -5,10 +5,8 @@ const path = require('path');
 exports.config = {
  defaultName: 'QLab',
  connectionType: 'osc',
-  remotePort: 53000,
-  localPort: 53001,
-  mayChangePorts: true,
-  mayChangeLocalPort: false,
+  defaultPort: 53000,
+  mayChangePort: true,
  heartbeatInterval: 100,
  heartbeatTimeout: 5000,
  searchOptions: {
@@ -28,362 +26,391 @@ exports.config = {
  ],
 };

+let lastElapsedUpdate = Date.now();
+let interval = 5;
+let heartbeatCount = 0;
+
 const valuesForKeysString =
  '["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",' +
-  '"type","children","preWait","postWait","duration","colorName","continueMode",' +
+  '"type","children","preWait","postWait","currentDuration","colorName","continueMode",' +
  '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",' +
-  '"actionElapsed","postWaitElapsed","isPaused","currentCueTarget","isRunning","armed","notes"]';
+  '"actionElapsed","postWaitElapsed","isPaused"]';

 exports.ready = function ready(_device) {
  const device = _device;
-  device.send(`/version`);
-  device.send('/workspaces');
-  device.data.workspaces = {};
-  device.data.cueKeys = {};
-  device.data.version = '';
-  device.data.lastElapsedMessage = 0;
-  device.data.ticks = 0;
-
  device.templates = {
    cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
    tile: _.template(fs.readFileSync(path.join(__dirname, `tile.ejs`))),
    cart: _.template(fs.readFileSync(path.join(__dirname, `cart.ejs`))),
    cuelist: _.template(fs.readFileSync(path.join(__dirname, `cuelist.ejs`))),
  };
+  device.send(`/version`);
+  device.send('/workspaces');
 };

 exports.data = function data(_device, oscData) {
  const device = _device;

-  const msgAddr = oscData.address.split('/');
-  msgAddr.shift();
+  const oscAddressParts = oscData.address.split('/');
+  oscAddressParts.shift();

-  let json = [];
-  try {
-    json = JSON.parse(oscData.args[0]);
-  } catch (err) {
-    // a handful of messages don't respond with JSON
-  }
-
-  if (Object.keys(json).length > 0) {
-    if (json.status === 'denied') {
-      if (device.data.workspaces[json.workspace_id]) {
-        device.data.workspaces[json.workspace_id].permission = 'denied';
-      }
-      return;
-    }
-    if (json.status === 'error') {
-      device.send('/workspaces');
-      return;
-    }
-  }
-
-  if (oscData.address === '/reply/workspaces') {
-    for (let i = 0; i < json.data.length; i++) {
-      device.data.workspaces[json.data[i].uniqueID] = {
-        version: json.data[i].version,
-        displayName: json.data[i].displayName,
-        port: json.data[i].port,
-        udpReplyPort: json.data[i].udpReplyPort,
-        cueLists: [],
-        selected: [],
-      };
-      device.data.version = json.data[i].version;
-      device.data.workspaces[json.data[i].uniqueID].permission = 'ok';
-      device.send(`/workspace/${json.data[i].uniqueID}/connect`, device.fields.passcode);
-    }
+  if (match(oscAddressParts, ['reply', 'version'])) {
+    const json = JSON.parse(oscData.args[0]);
+    device.data.version = json.data;

    this.deviceInfoUpdate(device, 'status', 'ok');
-    device.draw();
-  } else if (/reply\/workspace\/.*\/connect/.test(oscData.address)) {
-    if (json.data === 'badpass') {
-      device.data.workspaces[json.workspace_id].permission = 'badpass';
-    } else {
-      device.data.workspaces[json.workspace_id].permission = 'ok';
-      device.send(`/workspace/${msgAddr[2]}/cueLists`);
-      device.send(`/workspace/${msgAddr[2]}/updates`, [{ type: 'i', value: 1 }]);
-    }
-  } else if (/reply\/workspace\/.*\/cueLists/.test(oscData.address)) {
-    insertChildCues(device, device.data.workspaces[msgAddr[2]].cueLists, json.data, '[root group of cue lists]');
-  } else if (/reply\/cue_id\/.*\/valuesForKeys/.test(oscData.address)) {
-    const keyValues = json.data;
-    let cue = device.data.cueKeys[msgAddr[2]];
+  } else if (match(oscAddressParts, ['reply', 'workspaces'])) {
+    const json = JSON.parse(oscData.args[0]);
+    device.data.workspaces = {};

-    if (cue === undefined) {
-      device.data.cueKeys[msgAddr[2]] = {};
-      cue = device.data.cueKeys[msgAddr[2]];
-    }
-    cue.uniqueID = keyValues.uniqueID;
-    cue.number = keyValues.number;
-    cue.listName = keyValues.listName;
-    cue.isBroken = keyValues.isBroken;
-    cue.isRunning = keyValues.isRunning;
-    cue.isLoaded = keyValues.isLoaded;
-    cue.isFlagged = keyValues.isFlagged;
-    cue.type = keyValues.type;
-    cue.cues = keyValues.children;
-    cue.preWait = keyValues.preWait;
-    cue.postWait = keyValues.postWait;
-    cue.duration = keyValues.duration;
-    cue.colorName = keyValues.colorName;
-    cue.continueMode = keyValues.continueMode;
-    cue.mode = keyValues.mode;
-    cue.parent = keyValues.parent;
-    cue.cartRows = keyValues.cartRows;
-    cue.cartColumns = keyValues.cartColumns;
-    cue.cartPosition = keyValues.cartPosition;
-    cue.displayName = keyValues.displayName;
-    cue.preWaitElapsed = keyValues.preWaitElapsed;
-    cue.actionElapsed = keyValues.actionElapsed;
-    cue.postWaitElapsed = keyValues.postWaitElapsed;
-    cue.isPaused = keyValues.isPaused;
-    cue.currentCueTarget = keyValues.currentCueTarget;
-    cue.armed = keyValues.armed;
-    cue.notes = keyValues.notes;
+    json.data.forEach((wksp) => {
+      device.data.workspaces[wksp.uniqueID] = {
+        uniqueID: wksp.uniqueID,
+        displayName: wksp.displayName,
+        cueLists: {},
+        cues: {},
+      };
+      device.send(`/workspace/${wksp.uniqueID}/connect`, device.fields.passcode);
+    });

-    if (keyValues.isRunning) {
-      device.data.lastElapsedMessage = device.data.ticks;
-    }
-
-    if (cue.parent !== '[root group of cue lists]') {
-      cue.parent = device.data.cueKeys[cue.parent];
-    }
-
-    if (cue.type === 'Cue List' || cue.type === 'Group' || cue.type === 'Cart') {
-      if (device.data.cueKeys[msgAddr[2]].cueInWorkspace && cue.cues) {
-        insertChildCues(
-          device,
-          device.data.cueKeys[msgAddr[2]].cueInWorkspace.cues,
-          [...keyValues.children],
-          device.data.cueKeys[msgAddr[2]].cueInWorkspace
-        );
-      }
+    if (Object.keys(device.data.workspaces).length === 0) {
+      device.data.permission = 'no workspaces';
      device.draw();
    }
+  } else if (match(oscAddressParts, ['reply', 'workspace', '*', 'connect'])) {
+    device.send(`/workspace/${oscAddressParts[2]}/updates`, [{ type: 'i', value: 1 }]);
+    device.send(`/workspace/${oscAddressParts[2]}/cueLists`);
+  } else if (match(oscAddressParts, ['reply', 'workspace', '*', 'cueLists'])) {
+    this.deviceInfoUpdate(device, 'status', 'ok');
+    const workspace = device.data.workspaces[oscAddressParts[2]];
+    const json = JSON.parse(oscData.args[0]);

-    if (cue.type !== 'Cue List' && cue.type !== 'Cart') {
-      device.update('updateCueRow', { cue, workspace: device.data.workspaces[json.workspace_id] });
-    }
-  } else if (/reply\/cue_id\/(.*)\/(.*)Elapsed/.test(oscData.address)) {
-    const workspace = device.data.workspaces[json.workspace_id];
-    let cueID;
-    let keyName;
-    device.data.lastElapsedMessage = device.data.ticks;
+    workspace.cueLists = {};
+    workspace.cues = {};

-    if (workspace?.version.startsWith('5.')) {
-      const addrParts = json.address.split('/');
-      cueID = addrParts[4];
-      keyName = addrParts[5];
-    } else {
-      const addrParts = json.address.split('/');
-      cueID = addrParts[2];
-      keyName = addrParts[3];
-    }
+    if (json.status === 'denied') {
+      device.data.permission = 'denied';
+      device.draw();
+    } else if (json.data) {
+      device.data.permission = 'ok';

-    device.data.cueKeys[cueID][keyName] = json.data;
-
-    device.update('updateCueRow', { cue: device.data.cueKeys[cueID], workspace });
-  } else if (/reply\/workspace\/.*\/selectedCues/.test(oscData.address)) {
-    const workspace = device.data.workspaces[msgAddr[2]];
-    if (!workspace) {
-      return;
-    }
-    workspace.selected = [];
-    for (let i = 0; i < json.data.length; i++) {
-      workspace.selected.push(json.data[i].uniqueID);
-    }
-    device.update('updatePlaybackAndSelected', { workspace: device.data.workspaces[json.workspace_id] });
-  } else if (/update\/workspace\/.*\/cue_id\/.*/.test(oscData.address)) {
-    device.send(`/cue_id/${msgAddr[4]}/valuesForKeys`, [{ type: 's', value: valuesForKeysString }]);
-  } else if (/update\/workspace\/.*\/cueList\/.*\/playbackPosition/.test(oscData.address)) {
-    const workspace = device.data.workspaces[msgAddr[2]];
-    if (workspace) {
-      workspace.playbackPosition = oscData.args[0];
-      device.update('updatePlaybackAndSelected', { workspace: device.data.workspaces[msgAddr[2]] });
-    }
-  } else if (/update\/workspace\/.*\/dashboard/.test(oscData.address)) {
-    device.send(`/workspace/${msgAddr[2]}/selectedCues`);
-    device.send(`/cue_id/active/preWaitElapsed`);
-  }
-};
-
-exports.update = function update(device, _doc, updateType, data) {
-  const doc = _doc;
-  if (updateType === 'updateCueRow') {
-    const $elem = doc.getElementById(data.cue.uniqueID);
-    if ($elem) {
-      if (data.cue.parent.type === 'Cart') {
-        $elem.outerHTML = device.templates.tile({
-          allCues: device.data.cueKeys,
-          cue: data.cue,
-          workspace: data.workspace,
-        });
-      } else {
-        $elem.outerHTML = device.templates.cue({
-          allCues: device.data.cueKeys,
-          cue: data.cue,
-          workspace: data.workspace,
-        });
-      }
-    }
-  } else if (updateType === 'updatePlaybackAndSelected') {
-    Array.from(doc.querySelectorAll('.selected')).forEach(($el) => {
-      $el.classList.remove('selected');
-    });
-    Array.from(doc.querySelectorAll('.playback-position')).forEach(($el) => {
-      $el.classList.remove('playback-position');
-    });
-
-    for (let i = 0; i < data.workspace.selected.length; i++) {
-      const $elem = doc.getElementById(data.workspace.selected[i]);
-      if ($elem) {
-        $elem.classList.add('selected');
-      }
-    }
-
-    const $playheadInfo = doc.getElementById('playhead-information');
-    const $playheadName = doc.getElementById('playhead-name');
-    const $playheadNotes = doc.getElementById('playhead-notes');
-
-    if (data.workspace.playbackPosition) {
-      const $cueRow = doc.getElementById(data.workspace.playbackPosition);
-      if ($cueRow) {
-        $cueRow.classList.add('playback-position');
-        $cueRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-
-      const cue = device.data.cueKeys[data.workspace.playbackPosition];
-      if (cue && $playheadName) {
-        $playheadName.setAttribute('class', `playhead-name cartColor-${cue.colorName} playhead-disarmed`);
-        $playheadInfo.classList.add('playhead-active');
-        if (cue.number) {
-          $playheadName.innerHTML = `${cue.number} &bull; ${cue.displayName}`;
-        } else {
-          $playheadName.innerHTML = cue.displayName;
-        }
-        if (cue.notes) {
-          $playheadNotes.innerHTML = cue.notes;
-        } else {
-          $playheadNotes.innerHTML = '<span style="color:#5C5C5C">Notes</span>';
-        }
-        if (!cue.armed) {
-          $playheadName.classList.add('playhead-disarmed');
-        } else {
-          $playheadName.classList.remove('playhead-disarmed');
-        }
-      }
-    } else {
-      $playheadName.setAttribute('class', `playhead-name`);
-      $playheadName.innerHTML = '<span style="color:#747574">[no cue on standby]</span>';
-      $playheadNotes.innerHTML = '';
-      $playheadInfo.classList.remove('playhead-active');
-    }
-  }
-};
-
-exports.heartbeat = function heartbeat(_device) {
-  const device = _device;
-  device.data.ticks++;
-  if (device.data.ticks % 10 === 0) {
-    device.send(`/thump`);
-  }
-  if (device.data.ticks - device.data.lastElapsedMessage < 5) {
-    device.send(`/cue_id/active/preWaitElapsed`);
-    device.send(`/cue_id/active/postWaitElapsed`);
-    device.send(`/cue_id/active/actionElapsed`);
-  }
-};
-
-function insertChildCues(_device, _oldCues, newCues, _parent) {
-  const device = _device;
-  const newIDs = _.keyBy(newCues, 'uniqueID');
-  const oldCues = _oldCues;
-  const parent = _parent;
-
-  if (!oldCues) {
-    return;
-  }
-
-  for (let i = 0; i < oldCues.length; i++) {
-    const oldCue = oldCues[i];
-
-    if (!newIDs[oldCue.uniqueID]) {
-      oldCues.splice(i, 1);
-      i--;
-    }
-
-    const indexOfOldCueInNew = _.findIndex(newCues, (o) => o.uniqueID === oldCue.uniqueID);
-
-    if (indexOfOldCueInNew >= 0) {
-      const newCue = newCues[indexOfOldCueInNew];
-      oldCues[i].armed = newCue.armed;
-      oldCues[i].colorName = newCue.colorName;
-      oldCues[i].colorNameLive = newCue['colorName/live'];
-
-      oldCues[i].flagged = newCue.flagged;
-      oldCues[i].listName = newCue.listName;
-      oldCues[i].name = newCue.name;
-      oldCues[i].number = newCue.number;
-      oldCues[i].type = newCue.type;
-      oldCues[i].sortIndex = indexOfOldCueInNew;
-      oldCues[i].parent = parent;
-
-      newCue.used = true;
-
-      let keys = device.data.cueKeys[oldCues[i].uniqueID];
-      if (!keys) {
-        device.data.cueKeys[oldCues[i].uniqueID] = {};
-        keys = device.data.cueKeys[oldCues[i].uniqueID];
-      }
-
-      keys.cueInWorkspace = oldCues[i];
-
-      if (oldCues[i].type === 'Group' || oldCues[i].type === 'Cue List' || oldCues[i].type === 'Cart') {
-        insertChildCues(device, oldCues[i].cues, newCue.cues, oldCues[i]);
-      }
-    }
-  }
-  for (let i = 0; i < newCues.length; i++) {
-    const newCue = newCues[i];
-    if (newCue.used !== true) {
-      const newIndex = oldCues.push({
-        armed: newCue.armed,
-        colorName: newCue.colorName,
-        colorNameLive: newCue['colorName/live'],
-        flagged: newCue.flagged,
-        listName: newCue.listName,
-        name: newCue.name,
-        number: newCue.number,
-        type: newCue.type,
-        uniqueID: newCue.uniqueID,
-        sortIndex: i,
-        parent,
+      json.data.forEach((cueList) => {
+        workspace.cueLists[cueList.uniqueID] = cueList;
+        addCueToWorkspace(workspace, cueList);
      });

-      const freshCue = oldCues[newIndex - 1];
+      device.draw();

-      let keys = device.data.cueKeys[freshCue.uniqueID];
-      if (!keys) {
-        device.data.cueKeys[freshCue.uniqueID] = {};
-        keys = device.data.cueKeys[freshCue.uniqueID];
+      setTimeout(() => {
+        json.data.forEach((ql) => {
+          workspace.cueLists[ql.uniqueID] = ql;
+          getValuesForKeys(device, json.workspace_id, ql);
+        });
+      }, 0);
+    }
+  } else if (
+    match(oscAddressParts, ['reply', 'cue_id', '*', 'children']) ||
+    match(oscAddressParts, ['reply', 'workspace', '*', 'cue_id', '*', 'children'])
+  ) {
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = device.data.workspaces[json.workspace_id];
+    const cueID = json.address.substring(55, 91);
+    const cue = workspace.cues[cueID];
+
+    if (!_.isEqual(cue.cues, json.data)) {
+      workspace.cueLists[cueID].cues = json.data;
+      addCueToWorkspace(workspace, workspace.cueLists[cueID]);
+      device.draw();
+      getValuesForKeys(device, json.workspace_id, cue);
+    }
+  } else if (
+    match(oscAddressParts, ['reply', 'cue_id', '*', 'valuesForKeys']) ||
+    match(oscAddressParts, ['reply', 'workspace', '*', 'cue_id', '*', 'valuesForKeys'])
+  ) {
+    const json = JSON.parse(oscData.args[0]);
+    const cueValues = json.data;
+    const workspace = device.data.workspaces[json.workspace_id];
+    let cue = workspace.cues[cueValues.uniqueID];
+
+    if (!cue) {
+      workspace.cues[cueValues.uniqueID] = {};
+      cue = workspace.cues[cueValues.uniqueID];
+    }
+
+    cue.uniqueID = cueValues.uniqueID;
+    cue.number = cueValues.number;
+    cue.name = cueValues.name;
+    cue.listName = cueValues.listName;
+    cue.displayName = cueValues.displayName;
+    cue.broken = cueValues.isBroken;
+    cue.running = cueValues.isRunning;
+    cue.loaded = cueValues.isLoaded;
+    cue.flagged = cueValues.isFlagged;
+    cue.paused = cueValues.isPaused;
+    cue.type = cueValues.type;
+    // cue.cues = cueValues.children;
+    cue.preWait = cueValues.preWait;
+    cue.postWait = cueValues.postWait;
+    cue.duration = cueValues.currentDuration;
+    cue.colorName = cueValues.colorName;
+    cue.continueMode = cueValues.continueMode;
+    cue.groupMode = cueValues.mode;
+    cue.parent = cueValues.parent;
+    cue.cartRows = cueValues.cartRows;
+    cue.cartColumns = cueValues.cartColumns;
+    cue.cartPosition = cueValues.cartPosition;
+    cue.preWaitElapsed = cueValues.preWaitElapsed;
+    cue.actionElapsed = cueValues.actionElapsed;
+    cue.postWaitElapsed = cueValues.postWaitElapsed;
+
+    // QLab 5 fix
+    if (cueValues.type === 'Group' || cueValues.type === 'Cue List') {
+      cue.cues = cueValues.children;
+    } else {
+      cue.cues = undefined;
+    }
+
+    const nestedGroupModes = [];
+    const nestedGroupPosition = [];
+
+    let obj = cue;
+    let sum = 0;
+
+    if (obj.cues) {
+      sum += obj.cues.length;
+    }
+
+    while (obj.parent !== '[root group of cue lists]') {
+      let pos = _.findIndex(workspace.cues[obj.parent].cues, {
+        uniqueID: obj.uniqueID,
+      });
+      pos = Math.abs(pos - workspace.cues[obj.parent].cues.length) - 1;
+
+      if (obj.cues === undefined) {
+        sum += pos;
      }

-      if (freshCue.parent === '[root group of cue lists]') {
-        keys.parentKeys = [];
+      nestedGroupPosition.unshift(sum);
+
+      if (obj.cues) {
+        sum += pos;
+        nestedGroupModes.unshift(obj.groupMode);
      } else {
-        keys.parentKeys = [...device.data.cueKeys[freshCue.parent.uniqueID].parentKeys];
-        keys.parentKeys.push(device.data.cueKeys[freshCue.parent.uniqueID]);
+        nestedGroupModes.unshift(workspace.cues[obj.parent].groupMode);
      }

-      device.send(`/cue_id/${newCue.uniqueID}/valuesForKeys`, [{ type: 's', value: valuesForKeysString }]);
+      obj = workspace.cues[obj.parent];
+    }

-      keys.cueInWorkspace = freshCue;
+    cue.nestedGroupModes = nestedGroupModes;
+    cue.nestedGroupPosition = nestedGroupPosition;

-      if (freshCue.type === 'Group' || freshCue.type === 'Cue List' || oldCues[i].type === 'Cart') {
-        freshCue.cues = [];
-        insertChildCues(device, freshCue.cues, newCue.cues, freshCue);
+    device.update('updateCueData', {
+      cue,
+      allCues: workspace.cues,
+      workspace,
+    });
+  } else if (match(oscAddressParts, ['reply', 'cue_id', '*', 'preWaitElapsed'])) {
+    const oscArgs = JSON.parse(oscData.args[0]);
+    if (oscArgs.status !== 'error') {
+      const workspace = device.data.workspaces[oscArgs.workspace_id];
+      if (workspace) {
+        const cue = workspace.cues[oscArgs.address.substring(55, 91)];
+
+        if (cue) {
+          cue.preWaitElapsed = oscArgs.data;
+          lastElapsedUpdate = Date.now();
+
+          device.update('updateCueData', {
+            cue,
+            allCues: workspace.cues,
+            workspace,
+          });
+        }
      }
    }
+  } else if (match(oscAddressParts, ['reply', 'cue_id', '*', 'actionElapsed'])) {
+    const oscArgs = JSON.parse(oscData.args[0]);
+    if (oscArgs.status !== 'error') {
+      const workspace = device.data.workspaces[oscArgs.workspace_id];
+      if (workspace) {
+        const cue = workspace.cues[oscArgs.address.substring(55, 91)];
+
+        if (cue) {
+          cue.actionElapsed = oscArgs.data;
+          lastElapsedUpdate = Date.now();
+
+          device.update('updateCueData', {
+            cue,
+            allCues: workspace.cues,
+            workspace,
+          });
+        }
+      }
+    }
+  } else if (match(oscAddressParts, ['reply', 'cue_id', '*', 'postWaitElapsed'])) {
+    const oscArgs = JSON.parse(oscData.args[0]);
+    if (oscArgs.status !== 'error') {
+      const workspace = device.data.workspaces[oscArgs.workspace_id];
+      if (workspace) {
+        const cue = workspace.cues[oscArgs.address.substring(55, 91)];
+
+        if (cue) {
+          cue.postWaitElapsed = oscArgs.data;
+          lastElapsedUpdate = Date.now();
+
+          device.update('updateCueData', {
+            cue,
+            allCues: workspace.cues,
+            workspace,
+          });
+        }
+      }
+    }
+  } else if (match(oscAddressParts, ['update', 'workspace', '*', 'cue_id', '*'])) {
+    const workspace = device.data.workspaces[oscAddressParts[2]];
+
+    if (workspace) {
+      const cueLists = Object.keys(workspace.cueLists);
+      const cueID = oscAddressParts[4];
+
+      if (cueID !== '[root group of cue lists') {
+        if (cueLists.includes(cueID)) {
+          device.send(`/workspace/${workspace.uniqueID}/cue_id/${cueID}/children`);
+        }
+
+        device.send(`/workspace/${oscAddressParts[2]}/cue_id/${cueID}/valuesForKeys`, [
+          { type: 's', value: valuesForKeysString },
+        ]);
+      }
+    }
+  } else if (match(oscAddressParts, ['update', 'workspace', '*'])) {
+    // occurs when cue lists are reordered or a list is deleted
+    device.send(`/workspace/${oscAddressParts[2]}/cueLists`);
+  } else if (match(oscAddressParts, ['update', 'workspace', '*', 'dashboard'])) {
+    // this workspace might be new, let's check
+    if (device.data.workspaces[oscAddressParts[2]] === undefined) {
+      device.send('/workspaces');
+    }
+  } else if (match(oscAddressParts, ['update', 'workspace', '*', 'cueList', '*', 'playbackPosition'])) {
+    const workspace = device.data.workspaces[oscAddressParts[2]];
+
+    if (workspace) {
+      const cue = workspace.cues[oscData.args[0]];
+
+      if (cue) {
+        workspace.playbackPosition = oscData.args[0] ? cue.uniqueID : '';
+        device.update('updatePlaybackPosition', { cue });
+      }
+    }
+  } else if (match(oscAddressParts, ['update', 'workspace', '*', 'disconnect'])) {
+    delete device.data.workspaces[oscAddressParts[2]];
+    if (Object.keys(device.data.workspaces).length === 0) {
+      device.data.permission = 'no workspaces';
+    }
+    device.draw();
+  } else if (match(oscAddressParts, ['reply', 'thump'])) {
+    // intermittent connection check even if nothing's happening
+  } else {
+    // console.log(address)
+  }
+};
+
+exports.update = function update(device, doc, updateType, data) {
+  if (updateType === 'updateCueData') {
+    const $elem = doc.getElementById(data.cue.uniqueID);
+
+    if ($elem) {
+      if (data.cue.type === 'Cue List') {
+        $elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
+      } else if (data.cue.type === 'Cart') {
+        $elem.outerHTML = device.templates.cart({
+          tileTemplate: device.templates.tile,
+          cueList: data.cue,
+          allCues: data.workspace.cues,
+        });
+      } else if (data.cue.cartPosition && data.cue.cartPosition[0] !== 0) {
+        // checking that the parent cue is a cart cue
+        const parentCue = data.workspace.cues[data.cue.parent];
+        if (parentCue && parentCue.type === 'Cart') {
+          $elem.outerHTML = device.templates.tile(data);
+        } else {
+          $elem.outerHTML = device.templates.cue(data);
+        }
+      } else {
+        $elem.outerHTML = device.templates.cue(data);
+      }
+    }
+  } else if (updateType === 'updatePlaybackPosition') {
+    Array.from(doc.getElementsByClassName('playback-position')).forEach(($elem, index, array) => {
+      $elem.classList.remove('playback-position');
+    });
+
+    const $elem = doc.getElementById(data.cue.uniqueID);
+    $elem.classList.add('playback-position');
+    $elem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+};
+
+function addCueToWorkspace(_workspace, cue) {
+  const workspace = _workspace;
+  workspace.cues[cue.uniqueID] = cue;
+  workspace.cues[cue.uniqueID].nestedGroupModes = [];
+  workspace.cues[cue.uniqueID].nestedGroupPosition = [];
+
+  if (cue.cues) {
+    // this cue has children so add them as well
+    cue.cues.forEach((childCue) => {
+      addCueToWorkspace(workspace, childCue);
+    });
  }
-  oldCues.sort((a, b) => a.sortIndex - b.sortIndex);
 }
+
+function getValuesForKeys(device, workspaceID, cue) {
+  device.send(`/workspace/${workspaceID}/cue_id/${cue.uniqueID}/valuesForKeys`, [
+    { type: 's', value: valuesForKeysString },
+  ]);
+  if (cue.cues) {
+    cue.cues.forEach((childCue) => {
+      getValuesForKeys(device, workspaceID, childCue);
+    });
+  }
+}
+
+function match(testArray, patternArray) {
+  let out = true;
+  if (testArray.length !== patternArray.length) {
+    return false;
+  }
+  patternArray.forEach((patternPart, i) => {
+    if (testArray[i] !== patternPart && patternPart !== '*') {
+      out = false;
+    }
+  });
+  return out;
+}
+
+exports.heartbeat = function heartbeat(device) {
+  heartbeatCount++;
+
+  if (Date.now() - lastElapsedUpdate > 300) {
+    interval = 24;
+  } else {
+    interval = 1;
+  }
+
+  if (heartbeatCount % 20 === 0 && device.data.workspaces && Object.keys(device.data.workspaces).length === 0) {
+    device.send(`/version`);
+    device.send('/workspaces');
+  }
+
+  if (heartbeatCount % 16 === 0) {
+    device.send(`/thump`);
+  }
+
+  if (heartbeatCount % interval === 0 && device.data.workspaces && Object.keys(device.data.workspaces).length > 0) {
+    device.send(`/cue_id/active/preWaitElapsed`);
+    device.send(`/cue_id/active/actionElapsed`);
+    device.send(`/cue_id/active/postWaitElapsed`);
+  }
+};
@@ -1,6 +1,3 @@
-body {
-  margin-bottom: 200px !important;
-}
 table {
  background-color: #323232;
  border: 0px;
@@ -36,60 +33,61 @@ td img {
 }

 tr:nth-child(even) {
-  background: #2d2d2d;
+  background: #323232;
 }
 tr:nth-child(odd) {
-  background: #262626;
+  background: #2c2c2c;
 }

-tr:nth-child(odd).q-red {
-  background: linear-gradient(to top, #262626, #49302f 1px);
-}
 tr:nth-child(even).q-red {
-  background: linear-gradient(to top, #2d2c2d, #513635 1px);
+  background: linear-gradient(to top, #2c2c2c, #4c3130 1px);
 }
-.q-red td.playhead {
-  background: linear-gradient(to right, #ff4242 55%, transparent 55%);
+tr:nth-child(odd).q-red {
+  background: linear-gradient(to top, #323232, #513635 1px);
 }
-
-tr:nth-child(odd).q-orange {
-  background: linear-gradient(to top, #262626, #443526 1px);
+.q-red td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #ff4242 solid;
 }
 tr:nth-child(even).q-orange {
-  background: linear-gradient(to top, #2d2c2d, #4a3b2c 1px);
+  background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
 }
-.q-orange td.playhead {
-  background: linear-gradient(to right, #ffa500 55%, transparent 55%);
+tr:nth-child(odd).q-orange {
+  background: linear-gradient(to top, #323232, #514330 1px);
 }
-
-tr:nth-child(odd).q-green {
-  background: linear-gradient(to top, #262626, #2d3d27 1px);
+.q-orange td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #ffa500 solid;
 }
 tr:nth-child(even).q-green {
-  background: linear-gradient(to top, #2d2c2d, #32422e 1px);
+  background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
 }
-.q-green td.playhead {
-  background: linear-gradient(to right, #01d52f 55%, transparent 55%);
+tr:nth-child(odd).q-green {
+  background: linear-gradient(to top, #323232, #324b33 1px);
 }
-
-tr:nth-child(odd).q-blue {
-  background: linear-gradient(to top, #262626, #292d40 1px);
+.q-green td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #01d52f solid;
 }
 tr:nth-child(even).q-blue {
-  background: linear-gradient(to top, #2d2c2d, #2f3346 1px);
+  background: linear-gradient(to top, #2c2c2c, #323647 1px);
 }
-.q-blue td.playhead {
-  background: linear-gradient(to right, #536de0 55%, transparent 55%);
+tr:nth-child(odd).q-blue {
+  background: linear-gradient(to top, #323232, #363b4b 1px);
 }
-
-tr:nth-child(odd).q-purple {
-  background: linear-gradient(to top, #262626, #342639 1px);
+.q-blue td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #536de0 solid;
 }
 tr:nth-child(even).q-purple {
-  background: linear-gradient(to top, #2d2c2d, #382c3f 1px);
+  background: linear-gradient(to top, #2c2c2c, #39273d 1px);
 }
-.q-purple td.playhead {
-  background: linear-gradient(to right, #a601c0 55%, transparent 55%);
+tr:nth-child(odd).q-purple {
+  background: linear-gradient(to top, #323232, #433147 1px);
+}
+.q-purple td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #a601c0 solid;
 }

 tr.q-armed-false td {
@@ -98,20 +96,11 @@ tr.q-armed-false td {
 }

 tr.playback-position {
-  background: #444 !important;
-  color: white;
-}
-tr.playback-position td.playhead {
-  padding: 0px;
-}
-tr.playback-position td.playhead::before {
-  content: url(img/playhead.png);
-}
-tr.playback-position .q-gray-text {
+  background-image: none !important;
+  background: #1557da !important;
  color: white !important;
 }
-tr.selected {
-  background: #1557da !important;
+tr.playback-position .q-gray-text {
  color: white !important;
 }

@@ -151,19 +140,22 @@ tr.selected {
  border-radius: 6px;
 }
 .gMode-1 {
-  border-color: #48477f;
+  border-color: #5a5a87;
 }
 .gMode-2 {
-  border-color: #48477f;
+  border-color: #5a5a87;
 }
 .gMode-3 {
-  border-color: #43a424;
+  border-color: #429242;
 }
 .gMode-4 {
-  border-color: #7f26a5;
+  border-color: #925fc0;
+}
+.gMode-4 {
+  border-color: #925fc0;
 }
 .gMode-6 {
-  border-color: #ee6a21;
+  border-color: #d05b15;
 }
 .gMode-,
 .gMode-0 {
@@ -180,12 +172,6 @@ tr.selected {
  font-size: 14px;
  text-align: center;
 }
-.q-target {
-  text-align: center;
-  font-size: 12px;
-  padding-left: 5px;
-  padding-right: 5px;
-}
 .q-gray-text {
  color: #424242;
 }
@@ -207,10 +193,6 @@ tr.selected {
  box-sizing: border-box;
  padding: 3px;
 }
-.cartCueWrapper.selected .cartCue {
-  border-color: #89b4db;
-  box-shadow: #89b4db 0px 0px 2px 3px;
-}
 .cartCue {
  height: 100%;
  box-sizing: border-box;
@@ -227,27 +209,27 @@ tr.selected {
  right: 13px;
  top: 13px;
 }
-div.cartColor-red {
-  border-color: #e7443a;
-  background-color: #942f27;
+.cartColor-red {
+  border-color: #ff4242;
+  background-color: #9b3726;
 }
-div.cartColor-orange {
-  border-color: #f18f28;
-  background-color: #a95023;
+.cartColor-orange {
+  border-color: #ffa500;
+  background-color: #ad6026;
 }
-div.cartColor-green {
-  border-color: #4ebf32;
-  background-color: #397824;
+.cartColor-green {
+  border-color: #01d52f;
+  background-color: #397f27;
 }
-div.cartColor-blue {
-  border-color: #3a54cf;
-  background-color: #25378a;
+.cartColor-blue {
+  border-color: #536de0;
+  background-color: #304893;
 }
-div.cartColor-purple {
-  border-color: #7e25a5;
-  background-color: #4c2269;
+.cartColor-purple {
+  border-color: #a601c0;
+  background-color: #592d74;
 }
-div.cartColor-none {
+.cartColor-none {
  border-color: #95929f;
  background-color: #3b3b3b;
 }
@@ -261,53 +243,6 @@ div.cartColor-none {
  box-shadow: 0px 0px 3px 3px #88b3db, inset 0px 0px 5px #88b3db;
 }

-#playhead-information {
-  width: 80%;
-  height: 120px;
-  position: fixed;
-  bottom: 30px;
-  left: 10%;
-  padding: 16px;
-  box-sizing: border-box;
-
-  background-color: #2e2d2d;
-  border: #424242 3px solid;
-  border-radius: 4px;
-  box-shadow: black 0px 0px 20px 5px;
-}
-#playhead-information.playhead-active {
-  border-color: #4cbe34;
-}
-.playhead-name {
-  width: 100%;
-  padding: 6px 12px;
-  box-sizing: border-box;
-  margin-bottom: 12px;
-
-  background-color: #434343;
-  border: #434343 1px solid;
-  font-size: 18px;
-  color: white;
-  border-radius: 3px;
-}
-.playhead-disarmed {
-  background: url('img/disarmed-pattern-light.png');
-  background-attachment: fixed;
-}
-#playhead-notes {
-  width: 100%;
-  padding: 6px 8px;
-  box-sizing: border-box;
-  height: 36px;
-
-  border: #5c5b5b 1px solid;
-  font-size: 18px;
-  color: #9a9a99;
-  border-radius: 3px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
@media screen and (min-width: 0px) and (max-width: 750px) {
  .hide-medium {
    display: none;
@@ -3,42 +3,26 @@
  <h2>QLab <%= data.version || "" %></h2>
 </header>

-
-
-<% const workspaceKeys = Object.keys(data.workspaces); %>
-
-<% if(workspaceKeys.length==0){ %>
-  <h3>QLab is open but there isn't an open Workspace</h3>
-<% } %>
-
  
-<% for(let i=0; i<workspaceKeys.length; i++){ %>
-  <% const workspace = data.workspaces[workspaceKeys[i]]; %>
+  <% if(data.permission=="ok"){
+    for(const workspace_id in data.workspaces){
+      const workspace = data.workspaces[workspace_id];
+      for(const cueList_id in workspace.cueLists){
+        const ql = workspace.cueLists[cueList_id]; %>
+        
+        <% if(ql.type=="Cue List"){ %>
+          <%= templates.cuelist({cueList: ql, allCues: workspace.cues, rowTemplate: templates.cue, workspace: workspace}) %>
+        <% }else if(ql.type=="Cart"){ %>
+          <%= templates.cart({cueList: ql, allCues: workspace.cues, tileTemplate: templates.tile}) %>
+        <% } %>

-  <% if(workspace.permission=="ok"){ %>
+<% }}}else if(data.permission=="no workspaces"){ %>

-    <% for(let j=0; j<workspace.cueLists.length; j++){ %>
-      <% const cueList = workspace.cueLists[j]; %>
+  <h3>QLab is launched but there are no open Workspaces</h3>

-      <% if(cueList.type=="Cue List"){ %>
-        <%= templates.cuelist({cueList: cueList, allCues: data.cueKeys, rowTemplate: templates.cue, workspace: workspace}) %>
-      <% }else if(cueList.type=="Cart"){ %>
-        <%= templates.cart({cueList: cueList, allCues: data.cueKeys, tileTemplate: templates.tile, workspace: workspace}) %>
-      <% } %>
+<% }else if(data.permission=="denied"){ %>

-    <% } %>
-  
-  <% }else{ %>
-
-    <h3><%= workspace.displayName %> &mdash; <u>Incorrect Passcode or OSC Access Permissions</u></h3>
-    <button href="https://qlab.app/docs/v5/fundamentals/workspace-settings#the-osc-access-tab">QLab Documentation: OSC Access Tab</button>
-    <h1>&nbsp;</h1>
-  <% } %>
+  <h3>Incorrect Passcode or OSC Access Permissions</h3>
+  <button href="https://qlab.app/docs/v5/fundamentals/workspace-settings#the-osc-access-tab">QLab Documentation: OSC Access Tab</button>

 <% } %>
-
-<div id="playhead-information">
-  <div id="playhead-name" class="playhead-name"><span style="color:#747574">[no cue on standby]</span></div>
-  <div id="playhead-notes"></div>
-</div>
-
@@ -1,17 +1,17 @@
 <%
+
  let height = 0;
  let width = 0;
  let left = 0;
  let top = 0;
-  let cueKeys = allCues[cue.uniqueID];
-  let parent = allCues[cue.parent];

-  if(cueKeys.parent){
-    width = 100/cueKeys.parent.cartColumns;
-    height = 600/cueKeys.parent.cartRows;

-    top = (cueKeys.cartPosition[0]-1)*height;
-    left = (cueKeys.cartPosition[1]-1)*width;
+  if(cue.parent){
+    width = 100/allCues[cue.parent].cartColumns;
+    height = 600/allCues[cue.parent].cartRows;
+
+    top = (cue.cartPosition[0]-1)*height;
+    left = (cue.cartPosition[1]-1)*width;
  }

  let style = `style="left:${left}%; top:${top}px; width:${width }%; height:${height}px;"`;
@@ -21,21 +21,17 @@
 <div id="<%= cue.uniqueID %>" class="cartCueWrapper" <%= style %> > 

  <div class="cartCueIcon">
-    <% if(cueKeys.isBroken){ %>
+    <% if(cue.broken){ %>
      <img src="plugins/qlab/img/status_broken_white.png" height="18px">
-    <% }else if(cueKeys.isRunning){ %>
+    <% }else if(cue.running){ %>
      <img src="plugins/qlab/img/pause_circled.png" height="24px">
    <% }else{ %>
      <img src="plugins/qlab/img/play_circled.png" height="24px">
    <% } %>
  </div>

-  <div class="cartCue cartColor-<%= cueKeys.colorName %>">
-    <p>
-      <%= cueKeys.number %>
-      <% if(cueKeys.number){ %> &bull; <% } %>
-      <%= cueKeys.displayName %>
-    </p>
+  <div class="cartCue cartColor-<%= cue.colorName %>">
+    <p><%= cue.number %> &bull;  <%= cue.displayName %></p>
  </div>

 </div>
@@ -3,8 +3,8 @@ const _ = require('lodash');
 exports.config = {
  defaultName: 'sACN',
  connectionType: 'multicast',
-  remotePort: 5568,
-  mayChangePorts: false,
+  defaultPort: 5568,
+  mayChangePort: false,
  heartbeatInterval: 5000,
  heartbeatTimeout: 15000,
  searchOptions: {
@@ -55,7 +55,10 @@ exports.data = function data(_device, buf) {
  universe.priority = buf.readUInt8(108);
  universe.cid = buf.toString('hex', 22, 38);
  universe.slots = buf.slice(126);
-  universe.startCode = buf.readUInt8(125);
+
+  if (buf.readUInt8(125) !== 0) {
+    universe.startCode = buf.readUInt8(125);
+  }

  device.data.source = buf.toString('utf8', 44, 108);
  device.displayName = `${device.data.source} sACN`;
@@ -67,12 +70,12 @@ exports.data = function data(_device, buf) {
    universe.slotElems = [];
    universe.slotElemsSet = false;

-    if (universe.priority > 0 && universe.startCode === 0) {
+    if (universe.priority > 0) {
      device.draw();
      device.update('elementCache');
    }
  }
-  if (universe.priority > 0 && universe.startCode === 0) {
+  if (universe.priority > 0) {
    device.update('universeData', {
      universeIndex,
      universe,
@@ -112,7 +115,7 @@ exports.update = function update(_device, doc, updateType, updateData) {
      } else if (data.startCode === 0xcc) {
        $code.textContent = 'RDM';
      }
-    } else if (data.universe.startCode === 0) {
+    } else {
      device.draw();
      device.update('elementCache');
    }
@@ -1,6 +0,0 @@
-<h3>Connection Requirements</h3>
-<ul>
-  <li>Remote App must be set to OSC App under Remote App Interface settings</li>
-  <li>Network Protocol must be set to TCP under Remote App Interface settings</li>
-  <li>OSC Version must be set to 1.1 under Remote App Interface settings</li>
-</ul>
@@ -1,242 +0,0 @@
-exports.config = {
-  defaultName: 'Show Cue Systems',
-  connectionType: 'osc',
-  defaultPort: 58100,
-  mayChangePorts: true,
-  heartbeatInterval: 5000,
-  searchOptions: {
-    type: 'TCPport',
-    searchBuffer: Buffer.from('/status', 'ascii'),
-    testPort: 58100,
-    validateResponse(msg, info) {
-      return msg.toString().includes('/status');
-    },
-  },
-  fields: [],
-};
-
-const typeMap = {
-  A: 'Video/Image',
-  E: 'Memo',
-  F: 'Audio File',
-  G: 'GoTo Cue',
-  H: 'Multi-File Cue',
-  I: 'Live Input',
-  J: 'Enable/Disable',
-  K: 'Lighting',
-  L: 'Level Change',
-  M: 'Control Send',
-  N: 'Note',
-  P: 'Playlist',
-  Q: 'Call Cue',
-  R: 'Run Program',
-  S: 'SFR',
-  T: 'Set Position',
-  U: 'MIDI Time Code',
-};
-
-const versionMap = {
-  10: 'LITE',
-  20: 'STD',
-  30: 'PRO',
-  40: 'PLUS',
-  45: 'DEMO',
-  50: 'PLAT',
-};
-
-const activationMap = {
-  man: 'Manual',
-  'm+c': 'Manual w/ Confirmation',
-  auto: 'Auto-start',
-  'a+c': 'Auto-start w/ Confirmation',
-  callq: 'Call Cue',
-  hot: 'Hotkey (Trigger)',
-  hktg: 'Hotkey (Toggle)',
-  hknt: 'Hotkey (Note)',
-  time: 'Time-Based',
-  ext: 'External (Trigger)',
-  extg: 'External (Toggle)',
-  exnt: 'External (Note)',
-  mtc: 'MIDI Time Code',
-  ocm: 'On Cue Marker',
-};
-
-const stateMap = {
-  0: 'Ready',
-  1: 'Playing',
-  2: 'Paused',
-  3: 'Completed',
-};
-
-exports.ready = function ready(_device) {
-  const device = _device;
-  device.data.cues = [];
-  device.data.initialized = false;
-  device.send('/prod/gettitle');
-};
-
-exports.data = function data(_device, oscData) {
-  const device = _device;
-  this.deviceInfoUpdate(device, 'status', 'ok');
-  const messagePath = oscData.address;
-  if (messagePath === '/prod/gettitle') {
-    const title = oscData.args[0].replaceAll('"', '').trim();
-    this.deviceInfoUpdate(device, 'defaultName', title);
-    device.send('/info/scsversion');
-  } else if (messagePath === '/info/scsversion') {
-    const versionInfo = oscData.args;
-    const versionNumber = versionInfo[0].toString();
-    const versionMajor = versionNumber.substring(0, 2).replace('0', '');
-    const versionMinor = versionNumber.substring(2, 4).replace('0', '');
-    const versionPatch = versionNumber.substring(4, 6).replace('0', '');
-    const versionString = `${versionMajor}.${versionMinor}.${versionPatch}`;
-
-    const versionType = versionMap[versionInfo[1]];
-    device.data.version = {
-      number: versionString,
-      type: versionType,
-    };
-    device.send('/info/finalcue');
-  } else if (messagePath === '/info/finalcue') {
-    const cueCount = oscData.args[0];
-    if (cueCount !== device.data.cues.length) {
-      device.data.initialized = false;
-      device.data.cues = new Array(cueCount).fill(0).map(() => ({
-        label: '',
-        page: '',
-        description: '',
-        type: { code: '', display: '' },
-        state: '',
-        activation: { code: '', display: '' },
-        file_info: '',
-        length: '',
-        colors: ['', ''],
-      }));
-      device.send('/cue/getitemsn', [
-        { type: 'i', value: 1 },
-        { type: 's', value: 'QNTCLSPARZ' },
-      ]);
-    }
-  } else if (messagePath === '/info/getcue') {
-    const cueLabelInfo = oscData.args;
-    const cueNumber = cueLabelInfo[0];
-    const cueLabel = cueLabelInfo[1].replaceAll('"', '');
-
-    device.data.cues[cueNumber - 1].label = cueLabel;
-    device.draw();
-  } else if (messagePath === '/cue/getpage') {
-    const pageInfo = oscData.args;
-    const cueLabel = pageInfo[0].replaceAll('"', '');
-    const cueIndex = device.data.cues.map((cue) => cue.label).indexOf(cueLabel);
-    device.data.cues[cueIndex].page = pageInfo[1].replaceAll('"', '');
-    if (cueIndex < device.data.cues.length - 1) {
-      device.send('/cue/getpage', [{ type: 's', value: device.data.cues[cueIndex + 1].label }]);
-    } else {
-      device.draw();
-      device.data.initialized = true;
-      device.send('/status');
-    }
-  } else if (messagePath === '/cue/getname') {
-    const nameInfo = oscData.args;
-    const cueLabel = nameInfo[0].replaceAll('"', '');
-    const cueIndex = device.data.cues.map((cue) => cue.label).indexOf(cueLabel);
-
-    device.data.cues[cueIndex].description = nameInfo[1].replaceAll('"', '');
-    device.draw();
-  } else if (messagePath === '/cue/gettype') {
-    const typeInfo = oscData.args;
-    const cueLabel = typeInfo[0].replaceAll('"', '');
-    const cueIndex = device.data.cues.map((cue) => cue.label).indexOf(cueLabel);
-
-    device.data.cues[cueIndex].type = {
-      code: typeInfo[1].replaceAll('"', ''),
-      display: typeMap[typeInfo[1].replaceAll('"', '')],
-    };
-    device.draw();
-  } else if (messagePath === '/cue/getitemsn') {
-    const itemParts = oscData.args;
-    if (itemParts.length === 12) {
-      const cueIndex = itemParts[0] - 1;
-      device.data.cues[cueIndex].label = itemParts[2];
-      device.data.cues[cueIndex].description = itemParts[3];
-      device.data.cues[cueIndex].type = {
-        code: itemParts[4],
-        display: typeMap[itemParts[4]],
-      };
-      device.data.cues[cueIndex].colors = itemParts[5].split(', ');
-      device.data.cues[cueIndex].length = millisToString(itemParts[6]);
-      device.data.cues[cueIndex].state = stateMap[itemParts[7]];
-      device.data.cues[cueIndex].position = itemParts[8];
-      device.data.cues[cueIndex].activation = {
-        code: itemParts[9],
-        display: activationMap[itemParts[9]],
-      };
-      device.data.cues[cueIndex].repeat = itemParts[10];
-      device.data.cues[cueIndex].loop = itemParts[11];
-      device.draw();
-
-      if (!device.data.initialized) {
-        if (cueIndex < device.data.cues.length - 1) {
-          device.send('/cue/getitemsn', [
-            { type: 'i', value: cueIndex + 2 },
-            { type: 's', value: 'QNTCLSPARZ' },
-          ]);
-        } else {
-          device.send('/cue/getpage', [{ type: 's', value: device.data.cues[0].label }]);
-        }
-      }
-    } else {
-      console.error('bad response from getitems');
-    }
-  } else if (messagePath === '/cue/statechange') {
-    const cueLabel = oscData.args[0];
-    const cueIndex = device.data.cues.map((cue) => cue.label).indexOf(cueLabel);
-    if (cueIndex !== undefined) {
-      device.data.cues[cueIndex].state = stateMap[oscData.args[1]];
-      device.draw();
-      device.send('/cue/getitemsn', [
-        { type: 'i', value: cueIndex + 1 },
-        { type: 's', value: 'QNTCLSPARZ' },
-      ]);
-    }
-  } else if (messagePath === '/status') {
-    // const status = oscData.args[0];
-    device.send('/info/currcue');
-  } else if (messagePath === '/connected') {
-    device.send('/prod/gettitle');
-  } else if (messagePath === '/info/currcue') {
-    device.data.currentCue = oscData.args[0];
-    device.draw();
-  } else if (messagePath === '/info/nextcue') {
-    device.data.nextCue = oscData.args[0];
-    device.draw();
-    device.data.initialized = false;
-    device.send('/cue/getitemsn', [
-      { type: 'i', value: 1 },
-      { type: 's', value: 'QNTCLSPARZ' },
-    ]);
-  } else {
-    console.error(`unhandled message path: ${messagePath}`);
-  }
-};
-
-function millisToString(duration) {
-  const milliseconds = parseInt(duration % 1000, 10);
-  let seconds = parseInt((duration / 1000) % 60, 10);
-  const minutes = parseInt((duration / (1000 * 60)) % 60, 10);
-
-  if (minutes === 0) {
-    return `${seconds}.${milliseconds}`;
-  }
-  if (seconds === 0) {
-    return `0.${milliseconds}`;
-  }
-  if (seconds < 10) {
-    seconds = `0${seconds}`;
-  }
-  return `${minutes}:${seconds}.${milliseconds}`;
-}
-
-exports.heartbeat = function heartbeat(device) {
-  device.send('/info/finalcue');
-};
@@ -1,17 +0,0 @@
-table {
-  background: white;
-}
-
-th {
-  text-align: left;
-  font-weight: normal;
-}
-
-.header-row {
-  background: white;
-}
-
-td {
-  padding-left: 5px;
-  padding-right: 5px;
-}
@@ -1,34 +0,0 @@
-<header>
-	<h1><%= listName  %></h1>
-</header>
-<table>
-	<tr class="header-row">
-	  <th>Label</th>
-	  <th>Page</th>
-	  <th>Description</th>
-	  <th>Cue Type</th>
-	  <th>State</th>
-	  <th>Activation</th>
-	  <th>Length</th>
-	</tr>
-	<% data.cues.forEach((cue, index )=>{ %>
-
-		<% if (data.currentCue === index + 1){ %>
-			<tr style="background-color: black; color: white;">
-		<%} else if (index + 1 < data.currentCue){ %>
-			<tr style="background-color: #808080; color: #E5E5E5;">
-		<%} else{ %>
-			<tr style="background-color: <%=cue.colors[0]%>; color: <%=cue.colors[1]%>;">
-		<% } %>
-
-		
-		<td><%=cue.label%></td>
-		<td><%=cue.page%></td>
-		<td><%=cue.description%></td>
-		<td><%=cue.type.display%></td>
-		<td><%=cue.state%></td>
-		<td><%=cue.activation.display%></td>
-		<td><%=cue.length%></td>
-	</tr>
-	<% }) %>
-  </table>
@@ -8,7 +8,6 @@ class Channel {
    this.rx_rf_lvl = 0;
    this.rf_antenna = 0;
    this.tx_type = 0;
-    this.rx_graph_bars = 0;
  }
 }

@@ -3,8 +3,8 @@ const Channel = require('./channel');
 exports.config = {
  defaultName: 'Shure Wireless',
  connectionType: 'TCPsocket',
-  remotePort: 2202,
-  mayChangePorts: false,
+  defaultPort: 2202,
+  mayChangePort: false,
  heartbeatInterval: 5000,
  heartbeatTimeout: 10000,
  searchOptions: {
@@ -21,10 +21,6 @@ exports.ready = function ready(_device) {
  const device = _device;
  device.data.channelCount = 0;
  device.data.channels = [{}, new Channel(), new Channel(), new Channel(), new Channel()];
-
-  device.send('< GET 0 ALL >');
-  device.send('< SET 0 METER_RATE 00100 >');
-  device.send('< SAMPLE 0 AUDIO_LVL>');
 };

 exports.data = function data(_device, message) {
@@ -35,8 +31,6 @@ exports.data = function data(_device, message) {
    return;
  }

-  // console.log(msgStr);
-
  msgStr = msgStr.slice(2).slice(0, -1);
  const msgs = msgStr.split('><');

@@ -90,23 +84,23 @@ exports.data = function data(_device, message) {
 exports.update = function update(device, doc, updateType, data) {
  for (let i = 1; i < data.channels.length; i++) {
    const channel = data.channels[i];
+
+    const $rf = doc.getElementById(`ch-${i}-rf`);
+    if ($rf) {
+      $rf.style.height = 90 - (channel.rx_rf_lvl + 90) * 2;
+    }
+
    const $audio = doc.getElementById(`ch-${i}-audio`);
-    const $audioText = doc.getElementById(`ch-${i}-audio-text`);
    if ($audio) {
      $audio.style.height = 90 - channel.audio_lvl * 2;
    }
-    if ($audioText) {
-      $audioText.textContent = channel.audio_lvl;
-    }

    const $rfA = doc.getElementById(`ch-${i}-a`);
    const $rfB = doc.getElementById(`ch-${i}-b`);
-    let rfClass = '';

    if ($rfA) {
      if (channel.rf_antenna.charAt(0) === 'A') {
        $rfA.style.color = '#53c3c3';
-        rfClass = 'color-1';
      } else {
        $rfA.style.color = '#333';
      }
@@ -114,32 +108,10 @@ exports.update = function update(device, doc, updateType, data) {
    if ($rfB) {
      if (channel.rf_antenna.charAt(1) === 'B') {
        $rfB.style.color = '#53c3c3';
-        rfClass = 'color-2';
      } else {
        $rfB.style.color = '#333';
      }
    }
-
-    const $rf = doc.getElementById(`ch-${i}-rf`);
-    const $rfGraph = doc.getElementById(`ch-${i}-graph`);
-    const $rfText = doc.getElementById(`ch-${i}-rf-text`);
-    const rfHeight = 90 - (channel.rx_rf_lvl + 90) * 2;
-    if ($rf) {
-      $rf.style.height = rfHeight;
-    }
-    if ($rfGraph) {
-      if ($rfGraph.childElementCount > 115) {
-        $rfGraph.removeChild($rfGraph.firstElementChild);
-      }
-      $rfGraph.insertAdjacentHTML(
-        'beforeend',
-        `<div class="rf-graph-bar ${rfClass}" style="height: ${channel.rx_rf_lvl + 100}px;"></div>`
-      );
-      channel.rx_graph_bars++;
-    }
-    if ($rfText) {
-      $rfText.textContent = channel.rx_rf_lvl;
-    }
  }
 };

@@ -72,7 +72,7 @@ table td {
  border-radius: 2px;
 }
 .batt-knob.green {
-  background-color: #adff2f;
+  background-color: greenyellow;
 }
 .batt-bar {
  height: 26px;
@@ -99,25 +99,3 @@ small {
 small small {
  color: #444;
 }
-
-.rf-graph {
-  height: 80px;
-  vertical-align: bottom;
-  text-align: left;
-}
-.rf-graph-bar {
-  padding: 0px;
-  margin: 0px;
-  width: 1px;
-  height: 1px;
-  background: #383943;
-  display: inline-block;
-}
-.color-1 {
-  background: #292662;
-  border-top: #554ed4 1px solid;
-}
-.color-2 {
-  background: #283636;
-  border-top: #50c3c3 1px solid;
-}
@@ -24,7 +24,7 @@
          id="ch-<%= i %>-rf"
          style="height: <%= 90- ((ch.rx_rf_lvl + 90) * 2) %>"></div>
      </div>
-      <small><span id="ch-<%= i %>-rf-text"><%= ch.rx_rf_lvl %></span><br /><small>dBm</small></small>
+      <small><%= ch.rx_rf_lvl %><br /><small>dBm</small></small>
    </td>
    <td style="width: 40px">
      <div class="rf-indicator-wrapper">&nbsp;</div>
@@ -33,9 +33,9 @@
        <div
          class="bar"
          id="ch-<%= i %>-audio"
-          style="height: <%= 90- (ch.rx_rf_lvl * 2) %>"></div>
+          style="height: <%= 90- (ch.audio_lvl * 2) %>"></div>
      </div>
-      <small><span id="ch-<%= i %>-audio-text"><%= ch.audio_lvl %></span><br /><small>dBFS</small></small>
+      <small><%= ch.audio_lvl %><br /><small>dBFS</small></small>
    </td>
    <td style="width: 40px">
      <div class="rf-indicator-wrapper">&nbsp;</div>
@@ -43,12 +43,7 @@
      <div class="bar-wrapper pink">
        <div class="bar" style="height: <%= 60- (ch.audio_gain * 1.4) %>"></div>
      </div>
-      <small id=""><%= ch.audio_gain %><br /><small>dB</small></small>
-    </td>
-  </tr>
-  <tr>
-    <td colspan="3" id="ch-<%= i %>-graph" class="rf-graph">
-     
+      <small><%= ch.audio_gain %><br /><small>dB</small></small>
    </td>
  </tr>
  <tr>
@@ -1,8 +1,8 @@
 exports.config = {
  defaultName: 'Dataton Watchout',
  connectionType: 'TCPsocket',
-  remotePort: 3040,
-  mayChangePorts: false,
+  defaultPort: 3040,
+  mayChangePort: false,
  heartbeatInterval: 250,
  heartbeatTimeout: 5000,
  searchOptions: {
@@ -1,8 +1,8 @@
 exports.config = {
  defaultName: 'X32 Mixer',
  connectionType: 'osc-udp',
-  remotePort: 10023,
-  mayChangePorts: false,
+  defaultPort: 10023,
+  mayChangePort: false,
  heartbeatInterval: 9000,
  heartbeatTimeout: 11000,
  searchOptions: {
@@ -1,8 +1,8 @@
 exports.config = {
  defaultName: 'X Air Mixer',
  connectionType: 'UDPsocket',
-  remotePort: 10024,
-  mayChangePorts: false,
+  defaultPort: 10024,
+  mayChangePort: false,
  heartbeatInterval: 9000,
  heartbeatTimeout: 15000,
  searchOptions: {
@@ -59,11 +59,6 @@ window.init = function init() {
    DEVICE.changeActivePort(e.target.value);
  };

-  document.getElementById('device-settings-rx-port').onchange = function portChange(e) {
-    e.stopPropagation();
-    DEVICE.changeActiveRxPort(e.target.value);
-  };
-
  document.getElementById('device-settings-pin').onchange = function pinChange(e) {
    e.stopPropagation();
    if (e.target.checked) {
@@ -96,8 +91,6 @@ window.init = function init() {
    const deviceID = e.srcElement.id;
    if (e.srcElement.id !== 'device-list') {
      VIEW.switchDevice(deviceID);
-    } else {
-      VIEW.switchDevice(undefined);
    }
  };

@@ -106,7 +99,7 @@ window.init = function init() {
      {
        type: e.target.value,
        defaultName: 'New Device',
-        remotePort: PLUGINS.all[e.target.value].config.remotePort || '',
+        port: undefined,
        addresses: [],
      },
      'fromAddButton'
@@ -132,6 +125,22 @@ window.init = function init() {
      }
    }
  };
+
+  document.getElementById('device-list-col').onclick = function deviceListClick(e) {
+    try {
+      document.querySelector('#device-list .active-device').classList.remove('active-device');
+      ipcRenderer.send('disableDeviceDropdown', '');
+    } catch (err) {
+      // console.log(err)
+    }
+    try {
+      document.getElementsByClassName('active-device-outline')[0].classList.remove('active-device-outline');
+    } catch (err) {
+      // console.log(err)
+    }
+
+    VIEW.switchDevice();
+  };
 };

 ipcRenderer.on('setActiveDevicePinned', (event, message) => {
@@ -78,10 +78,7 @@ a {
 #device-list {
  box-sizing: border-box;
  width: 100%;
-  height: calc(100% - 387px);
  padding: 0px 10px;
-  overflow-x: hidden;
-  overflow-y: scroll;
 }
 #device-list div {
  pointer-events: none;
@@ -182,19 +179,9 @@ a {
 #device-settings #device-settings-plugin-dropdown {
  width: 170px;
 }
-#device-settings #device-settings-port,
-#device-settings #device-settings-rx-port {
+#device-settings #device-settings-port {
  width: 70px;
 }
-#network-indicator-dot {
-  position: absolute;
-  left: 250px;
-  bottom: 8px;
-  background: #00ff00;
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-}

 /* SECOND COL */
 #all-devices {
@@ -203,20 +190,11 @@ a {
  background-color: rgba(0, 0, 0, 0.3);
 }
 .device-pin {
-  position: absolute;
-  right: 45px;
-  top: 4px;
-  height: 20px;
-  padding: inherit;
-}
-.device-traffic-signal {
  position: absolute;
  right: 15px;
  top: 4px;
  height: 20px;
  padding: inherit;
-  opacity: 0.3;
-  transition: opacity 0.1s ease-in-out;
 }
 .device-wrapper {
  box-sizing: border-box;
@@ -371,20 +349,3 @@ select.button:focus {
 body :not(input):not(select):not(textarea) {
  user-select: none;
 }
-
-::-webkit-scrollbar {
-  /* background-color: black; */
-  width: 12px;
-}
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-corner {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-::-webkit-scrollbar-thumb {
-  background-color: #6b6b6b;
-  border-radius: 16px;
-  border: 3px solid #2b2b2b;
-}
-::-webkit-scrollbar-button {
-  display: none;
-}
@@ -43,9 +43,7 @@ header h2 {
 header h2 {
  color: #b6b6b6;
 }
-h3 {
-  font-weight: 300;
-}
+
 table.cv-table {
  border: none;
  table-layout: fixed;
@@ -27,16 +27,6 @@ function registerDevice(newDevice, discoveryMethod) {
    return false;
  }

-  // set the local port for the new device
-  let newLocalPort = newDevice.localPort;
-  if (!newLocalPort) {
-    if (PLUGINS.all[newDevice.type].config.localPort) {
-      newLocalPort = PLUGINS.all[newDevice.type].config.localPort;
-    } else {
-      newLocalPort = newDevice.remotePort;
-    }
-  }
-
  const id = newDevice.id || uuid();
  devices[id] = {
    id,
@@ -45,8 +35,7 @@ function registerDevice(newDevice, discoveryMethod) {
    type: newDevice.type,
    displayName: newDevice.displayName,
    defaultName: newDevice.defaultName,
-    remotePort: newDevice.remotePort,
-    localPort: newLocalPort,
+    port: newDevice.port,
    addresses: newDevice.addresses,
    data: {},
    templates: {},
@@ -55,10 +44,8 @@ function registerDevice(newDevice, discoveryMethod) {
    lastDrawn: 0,
    lastHeartbeat: 0,
    lastMessage: 0,
-    sendQueue: [],
    heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
    heartbeatTimeout: PLUGINS.all[newDevice.type].heartbeatTimeout,
-    trafficSignal: VIEW.trafficSignal,
    draw() {
      VIEW.draw(this);
    },
@@ -93,11 +80,11 @@ function initDeviceConnection(id) {

  infoUpdate(device, 'status', 'new');

-  if (device.remotePort === undefined) {
-    device.remotePort = device.plugin.config.defaultPort;
+  if (device.port === undefined) {
+    device.port = device.plugin.config.defaultPort;
  }

-  if (device.remotePort === undefined || device.addresses.length === 0) {
+  if (device.port === undefined || device.addresses.length === 0) {
    return true;
  }
  try {
@@ -114,15 +101,13 @@ function initDeviceConnection(id) {
    if (plugins[type].config.connectionType.includes('udp')) {
      device.connection = new osc.UDPPort({
        localAddress: '0.0.0.0',
-        localPort: device.localPort,
        remoteAddress: device.addresses[0],
-        remotePort: device.remotePort,
+        remotePort: device.port,
      });
    } else {
      device.connection = new osc.TCPSocketPort({
        address: device.addresses[0],
-        port: device.remotePort,
-        useSLIP: plugins[type].config.useSLIP !== undefined ? plugins[type].config.useSLIP : true
+        port: device.port,
      });
    }
    device.connection.open();
@@ -142,22 +127,16 @@ function initDeviceConnection(id) {
      } catch (err) {
        console.error(err);
      }
-      device.trafficSignal(device);
      device.lastMessage = Date.now();
    });
    device.send = (address, args) => {
-      const addr = address;
-      const arg = args;
-      device.sendQueue.push({ address: addr, args: arg });
-    };
-    device.sendNow = (data) => {
-      device.connection.send(data);
+      device.connection.send({ address, args });
    };
  } else if (plugins[type].config.connectionType === 'TCPsocket') {
    device.connection = new net.Socket();
    device.connection.connect(
      {
-        port: device.remotePort,
+        port: device.port,
        host: device.addresses[0],
      },
      () => {}
@@ -176,34 +155,26 @@ function initDeviceConnection(id) {
      // log("SOCK IN", message);
      plugins[type].data(device, message);
      device.lastMessage = Date.now();
-      device.trafficSignal(device);
      infoUpdate(device, 'status', 'ok');
    });
    device.send = (data) => {
      // log("SOCK OUT", data);
-      device.sendQueue.push(data);
-    };
-    device.sendNow = (data) => {
      device.connection.write(data);
    };
  } else if (plugins[type].config.connectionType === 'UDPsocket') {
    device.connection = udp.createSocket('udp4');

-    device.connection.bind({ port: plugins[type].config.remotePort }, () => {
+    device.connection.bind({ port: plugins[type].config.defaultPort }, () => {
      plugins[type].ready(device);

      device.connection.on('message', (msg, info) => {
        plugins[type].data(device, msg);
        device.lastMessage = Date.now();
-        device.trafficSignal(device);
        infoUpdate(device, 'status', 'ok');
      });
    });

    device.send = (data) => {
-      device.sendQueue.push(data);
-    };
-    device.sendNow = (data) => {
      device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
        // console.log(err);
      });
@@ -211,13 +182,12 @@ function initDeviceConnection(id) {
  } else if (plugins[type].config.connectionType === 'multicast') {
    device.connection = udp.createSocket('udp4');

-    device.connection.bind(device.remotePort, () => {
+    device.connection.bind(device.port, () => {
      plugins[type].ready(device);

      device.connection.on('message', (msg, info) => {
-        plugins[type].data(device, msg, info);
+        plugins[type].data(device, msg);
        device.lastMessage = Date.now();
-        device.trafficSignal(device);
        infoUpdate(device, 'status', 'ok');
      });
    });
@@ -232,7 +202,6 @@ function initDeviceConnection(id) {

    device.connection.on('connected', () => {
      infoUpdate(device, 'status', 'ok');
-      device.trafficSignal(device);
      plugins[type].ready(device);
    });

@@ -257,14 +226,8 @@ module.exports.deleteActive = function deleteActive() {
  );

  if (choice) {
-    if (device.plugin.config.connectionType === 'TCPsocket') {
+    if (device.plugin.connectionType === 'TCPsocket') {
      device.connection.destroy();
-    } else if (device.plugin.config.connectionType === 'UDPsocket') {
-      device.connection.close();
-    } else if (device.plugin.config.connectionType === 'multicast') {
-      device.connection.close();
-    } else if (device.plugin.config.connectionType.startsWith('osc')) {
-      device.connection.close();
    }
    VIEW.removeDeviceFromList(device);
    delete devices[device.id];
@@ -300,7 +263,7 @@ module.exports.changeActiveIP = function changeActiveIP(newIP) {

 module.exports.changeActivePort = function changeActivePort(newPort) {
  const device = VIEW.getActiveDevice();
-  device.remotePort = newPort;
+  device.port = newPort;

  initDeviceConnection(device.id);
  VIEW.draw(device);
@@ -354,34 +317,16 @@ function heartbeat() {
        initDeviceConnection(deviceID);
      } else if (Date.now() - d.lastMessage > d.heartbeatTimeout) {
        infoUpdate(d, 'status', 'broken');
-      } else if ((d.remotePort !== undefined || d.defaultPort !== undefined) && d.addresses.length > 0 && d.send) {
+      } else if (d.port !== undefined && d.addresses.length > 0 && d.send) {
        PLUGINS.all[d.type].heartbeat(d);
      } else {
        //
      }
      d.lastHeartbeat = Date.now();
    }
-
-    if (d.sendQueue.length > 0 && d.sendNow) {
-      d.sendNow(d.sendQueue[0]);
-      d.sendQueue.shift();
-    }
  });
 }
-setInterval(heartbeat, 50);
-
-function networkTick() {
-  Object.keys(devices).forEach((deviceID) => {
-    const d = devices[deviceID];
-
-    if (d.sendQueue.length > 0 && d.sendNow) {
-      d.sendNow(d.sendQueue[0]);
-      d.sendQueue.shift();
-      d.trafficSignal(d);
-    }
-  });
-}
-setInterval(networkTick, 10);
+setInterval(heartbeat, 100);

 function isDeviceAlreadyAdded(newDevice) {
  let deviceAlreadyAdded = false;
@@ -62,8 +62,7 @@ module.exports.loadDevices = function loadDevices() {
        type: savedDevices[i].type,
        displayName: savedDevices[i].displayName,
        defaultName: savedDevices[i].defaultName,
-        remotePort: savedDevices[i].remotePort,
-        localPort: savedDevices[i].localPort,
+        port: savedDevices[i].port,
        addresses: savedDevices[i].addresses,
        id: savedDevices[i].id,
        fields: savedDevices[i].fields,
@@ -111,8 +110,7 @@ module.exports.saveAll = function saveAll() {
      type: device.type,
      displayName: device.displayName,
      defaultName: device.defaultName,
-      remotePort: device.remotePort,
-      localPort: device.localPort,
+      port: device.port,
      id: device.id,
      fields: device.fields,
    };
@@ -126,15 +126,29 @@ function searchBonjour(pluginType, pluginConfig) {
      }
    });

-    DEVICE.registerDevice(
-      {
-        type: pluginType,
-        defaultName: e.name,
-        remotePort: e.port,
-        addresses: validAddresses,
-      },
-      'fromSearch'
-    );
+    if (pluginConfig.searchOptions.validateResponse) {
+      if (pluginConfig.searchOptions.validateResponse(e.fqdn)) {
+        DEVICE.registerDevice(
+          {
+            type: pluginType,
+            defaultName: e.name,
+            port: e.port,
+            addresses: validAddresses,
+          },
+          'fromSearch'
+        );
+      }
+    } else {
+      DEVICE.registerDevice(
+        {
+          type: pluginType,
+          defaultName: e.name,
+          port: e.port,
+          addresses: validAddresses,
+        },
+        'fromSearch'
+      );
+    }
  });
 }

@@ -157,7 +171,7 @@ function TCPtest(ipAddr, pluginType, pluginConfig) {
          {
            type: pluginType,
            defaultName: pluginConfig.defaultName,
-            remotePort: pluginConfig.remotePort,
+            port: pluginConfig.defaultPort,
            addresses: [ipAddr],
          },
          'fromSearch'
@@ -215,7 +229,7 @@ function searchUDP(pluginType, pluginConfig) {
            {
              type: pluginType,
              defaultName: pluginConfig.defaultName,
-              remotePort: pluginConfig.remotePort,
+              port: pluginConfig.defaultPort,
              addresses: [info.address],
            },
            'fromSearch'
@@ -247,7 +261,7 @@ function searchMulticast(pluginType, pluginConfig) {
          {
            type: pluginType,
            defaultName: pluginConfig.defaultName,
-            remotePort: pluginConfig.remotePort,
+            port: pluginConfig.defaultPort,
            addresses: [info.address],
          },
          'fromSearch'
@@ -21,10 +21,6 @@ function drawDeviceFrame(id) {

  const d = DEVICE.all[id];

-  if (d.frameDrawn) {
-    return true;
-  }
-
  const str = `
    <html>
      <head>
@@ -60,8 +56,6 @@ function drawDeviceFrame(id) {
    $devicePinned.style.display = 'none';
  }

-  d.frameDrawn = true;
-
  return true;
 }

@@ -149,9 +143,8 @@ module.exports.removeDeviceFromList = function removeDeviceFromList(device) {
 };

 function switchDevice(id) {
-  if (activeDevice && activeDevice.pinIndex === false && activeDevice.id !== id) {
+  if (activeDevice && activeDevice.pinIndex === false) {
    document.getElementById(`device-${activeDevice.id}`).remove();
-    activeDevice.frameDrawn = false;
    activeDevice = false;
  }
  activeDevice = DEVICE.all[id];
@@ -169,10 +162,6 @@ function switchDevice(id) {
  if (id === undefined) {
    document.getElementById('refresh-device-button').disabled = true;
    document.getElementById('device-settings-table').style.display = 'none';
-    const $activeDevice = document.querySelector('.active-device');
-    if ($activeDevice) {
-      $activeDevice.classList.remove('active-device');
-    }
    return;
  }

@@ -182,10 +171,7 @@ function switchDevice(id) {
  const $deviceWrapper = document.getElementById(`device-${i}`);

  if (!$deviceWrapper) {
-    let html = `<div class="col device-wrapper" id="device-${i}">`;
-    html += `<img id="device-${i}-pinned" class="device-pin" src="src/assets/img/outline_push_pin_white_18dp.png">`;
-    html += `<img id="device-${i}-traffic" class="device-traffic-signal" src="src/assets/img/outline_link_white_18dp.png">`;
-    html += `<iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
+    const html = `<div class="col device-wrapper" id="device-${i}"><img id="device-${i}-pinned" class="device-pin" src="src/assets/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
    document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html);
  }

@@ -197,30 +183,13 @@ function switchDevice(id) {
  document.getElementById('device-settings-plugin-dropdown').value = activeDevice.type;
  document.getElementById('device-settings-name').value = activeDevice.displayName || activeDevice.defaultName || '';
  document.getElementById('device-settings-ip').value = activeDevice.addresses[0] || '';
-  document.getElementById('device-settings-port').value = activeDevice.remotePort || '';
+  document.getElementById('device-settings-port').value = activeDevice.port || '';
  document.getElementById('device-settings-pin').checked = activeDevice.pinIndex;

-  if (activeDevice.plugin.config.mayChangePorts) {
+  if (activeDevice.plugin.config.mayChangePort) {
    document.getElementById('device-settings-port').disabled = false;
-    document.getElementById('device-settings-rx-port').disabled = false;
  } else {
    document.getElementById('device-settings-port').disabled = true;
-    document.getElementById('device-settings-rx-port').disabled = true;
-  }
-
-  if (activeDevice.plugin.config.mayChangeLocalPort === false) {
-    document.getElementById('device-settings-rx-port').disabled = true;
-  } else {
-    document.getElementById('device-settings-rx-port').disabled = false;
-  }
-
-  if (activeDevice.plugin.config.localPort) {
-    // document.getElementById('device-settings-port-label').textContent = 'Remote\nPort:';
-    document.getElementById('device-settings-rx-port-row').style.display = 'table-row';
-    document.getElementById('device-settings-rx-port').value = activeDevice.localPort || '';
-  } else {
-    document.getElementById('device-settings-port-label').textContent = 'Port:';
-    document.getElementById('device-settings-rx-port-row').style.display = 'none';
  }

  updateFields();
@@ -336,16 +305,6 @@ module.exports.selectNextDevice = function selectNextDevice() {
  switchDevice(keys[prevIndex]);
 };

-module.exports.trafficSignal = function trafficSignal(device) {
-  const $signal = document.querySelector(`#device-${device.id} .device-traffic-signal`);
-  if ($signal) {
-    $signal.style.opacity = 1;
-    setTimeout(() => {
-      $signal.style.opacity = 0.3;
-    }, 50);
-  }
-};
-
 function populatePluginLists() {
  let typeSelect = '';
  let addSelect = '<option value="" disabled selected hidden>&nbsp;+&nbsp;</option>';
Author	SHA1	Message	Date
sparks-alec	d377df5803	styles for tiny viewports	2023-05-24 01:19:01 -04:00
sparks-alec	1eea4bf342	handle objects better	2023-05-24 01:18:36 -04:00
sparks-alec	d3bd8cc88e	confirm OCA device is d&b	2023-05-24 00:23:33 -04:00
sparks-alec	76e0a6a87a	add basic hostname validation for bonjour devices	2023-05-24 00:22:00 -04:00
sparks-alec	50ccd0bb5a	initial d&b commit	2023-05-23 23:37:25 -04:00
				`@@ -1 +0,0 @@`
				`<p><em>PosiStageNet</em> requires no configuration.</p>`