Merge branch 'main' into plugin-digico-sd

2026-07-26 09:18:39 +00:00 · 2023-06-23 03:23:10 -04:00
parent 3621617f5d 1c8813c1b7
commit e896bd5f52
69 changed files with 8067 additions and 1368 deletions
@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Let us know what isn't working
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Windows 10]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
@@ -1,7 +1,7 @@
 name: release
 on:
  workflow_dispatch:
-  
+
 env:
  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

@@ -13,28 +13,33 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: 18
+          cache: 'npm'
      - run: npm ci
      - run: npm run release
  build-windows:
+    needs: build-linux
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
+          cache: 'npm'
      - run: npm ci
      - run: npm run release
  build-macos:
+    needs: build-windows
    runs-on: macos-latest
    env:
      CSC_LINK: ${{ secrets.MACOS_CSC_LINK }}
      CSC_KEY_PASSWORD: ${{ secrets.MACOS_CSC_KEY_PASSWORD }}
      APPLE_ID: ${{ secrets.APPLE_ID }}
-      APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+      APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
+          cache: 'npm'
      - run: npm ci
      - run: npm run release
@@ -1,8 +1,8 @@
-# Cue View
+# <img width="30" alt="icon" src="https://github.com/stagehacks/Cue-View/assets/919746/b8fb5fa8-de7e-4e1b-9043-47194fb2762d"> Cue View

 A dashboard for everything in your show.

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

 ## Features

@@ -21,14 +21,9 @@ A dashboard for everything in your show.
 - XAir Audio Consoles
 - Art-Net Universes
 - sACN Universes
+- ATEM VIdeo Mixers
+- Shure ULXD Wireless

-#### Future Devices
-
- ATEM Video Mixers
- DiGiCo Consoles
- d&b DS100, amps
- Hog
- Meyer Galileo Processors

 # Plugins

@@ -8,9 +8,12 @@ window.init = function init() {
    const interfaceID = Object.keys(networkInterfaces)[i];
    const interfaceObj = networkInterfaces[interfaceID];

-    html += `<tr><td><span class="if-${interfaceID.substring(0, 2)}">${interfaceID}</span></td>`;
-    html += `<td>${interfaceObj[0].address}</td>`;
-    html += `<td>${interfaceObj[0].netmask}</td>`;
+    html += `
+      <tr>
+        <td><span class="if-${interfaceID.substring(0, 2)}">${interfaceID}</span></td>
+        <td>${interfaceObj[0].address}</td>
+        <td>${interfaceObj[0].netmask}</td>
+    `;

    if (interfaceObj[0].searchTruncated) {
      html += `<td class='red'>`;
@@ -18,8 +21,10 @@ window.init = function init() {
      html += `<td class='green'>`;
    }

-    html += `${interfaceObj[0].firstSearchAddress} - ${interfaceObj[0].lastSearchAddress}</td>`;
-    html += `</tr>`;
+    html += `
+      ${interfaceObj[0].firstSearchAddress} - ${interfaceObj[0].lastSearchAddress}</td>
+      </tr>
+    `;

    document.getElementById('network-interfaces').innerHTML = html;
  }
@@ -1,7 +1,7 @@
 {
  "name": "cue-view",
  "productName": "Cue View",
-  "version": "0.9.9-pre",
+  "version": "1.0.0",
  "description": "A dashboard for everything in your show",
  "main": "main.js",
  "scripts": {
@@ -21,28 +21,28 @@
  "repository": "https://github.com/stagehacks/Cue-View",
  "devDependencies": {
    "@electron/notarize": "^1.2.3",
-    "electron": "^22.0.2",
-    "electron-builder": "^23.6.0",
-    "eslint": "^8.31.0",
+    "electron": "^22.2.0",
+    "electron-builder": "^24.4.0",
+    "eslint": "^8.41.0",
    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.27.4",
-    "prettier": "^2.8.2"
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "prettier": "^2.8.8"
  },
  "dependencies": {
+    "atem-connection": "^3.1.3",
    "bonjour": "^3.5.0",
    "electron-updater": "^5.3.0",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "netmask": "^2.0.2",
-    "osc": "^2.4.3",
+    "osc": "^2.4.4",
    "uuid": "^9.0.0"
  },
  "build": {
    "appId": "com.stagehacks.cueview",
    "icon": "src/assets/img/",
    "artifactName": "${name}.${os}.v${version}.${ext}",
-    "afterSign": "notarize.js",
    "mac": {
      "category": "Utilities",
      "icon": "src/assets/img/icon.icns",
@@ -1,2 +1,2 @@
-<p><em>Art-Net</em> requires no configuration.</p>
+<p>Quit any other applications that use Art-Net before using this plugin.</p>
 <p>Art-Net™ Designed by and Copyright Artistic Licence Holdings Ltd</p>
@@ -23,11 +23,21 @@ exports.ready = function ready(_device) {
 };

 exports.data = function data(_device, buf) {
-  if (buf.length < 18) {
+  const device = _device;
+
+  if (buf.length < 18 || buf.slice(0, 7).toString() !== 'Art-Net') {
    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) {
@@ -93,3 +103,53 @@ 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,11 @@
+<h3>ATEM Configuration</h3>
+<ul>
+  <li>Set the IP Address, Subnet Mask, and Gateway of the ATEM using the <em>ATEM Setup utility</em></li>
+  <li>The ATEM must be connected to a computer using a USB cable to change its Network settings</li>
+</ul>
+
+<h3>ATEM Software Download</h3>
+<button href="https://www.blackmagicdesign.com/support/family/atem-live-production-switchers">
+  Blackmagic Support
+</button>
+(Look for <em>ATEM Switchers Update</em>)
@@ -0,0 +1,240 @@
+const { TransitionStyle, TransitionSelection } = require('atem-connection/dist/enums');
+
+let timerFrameRate;
+
+exports.config = {
+  defaultName: 'ATEM',
+  connectionType: 'atem',
+  defaultPort: 9910,
+  mayChangePort: false,
+  searchOptions: {
+    type: 'UDPScan',
+    searchBuffer: Buffer.from([
+      0x10, 0x14, 0x53, 0xab, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3a, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      0x00,
+    ]),
+    listenPort: 0,
+    devicePort: 9910,
+    validateResponse(msg, info) {
+      // This is a tad bit hacky but works from what I can see.
+      return Buffer.compare(msg.slice(0, 4), Buffer.from([16, 20, 83, 171])) === 0;
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  console.log('atem ready');
+  const device = _device;
+  device.data = device.connection.state;
+  device.draw();
+
+  // TODO: this is a little hacky but it works? gotta be a way to hook into device.draw() to trigger update
+  setInterval(() => {
+    device.update('inputs', device.data);
+    device.update('fadeToBlack', device.data);
+    device.update(`transitionPosition`, device.data);
+    device.update('downstreamKeyers', device.data);
+    device.update('upstreamKeyers', device.data);
+    device.update('transitionProperties', device.data);
+    device.update('deviceInfo', device.data);
+  }, 1000);
+};
+
+exports.update = function update(device, _document, updateType, data) {
+  const document = _document;
+
+  if (updateType.includes('transitionPosition')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[i];
+      const tbarId = `me-${i}-tbar-div`;
+      const tbarHandleId = `me-${i}-tbar-handle-div`;
+      if (document.getElementById(tbarId)) {
+        document.getElementById(tbarId).style.height = `${mixEffect.transitionPosition.handlePosition / 100}%`;
+      }
+      if (document.getElementById(tbarHandleId)) {
+        document.getElementById(tbarHandleId).style.bottom = `${mixEffect.transitionPosition.handlePosition / 100}%`;
+      }
+      document.getElementById(`me-${i}-transition-rate`).textContent = framesToTime(
+        mixEffect.transitionPosition.remainingFrames
+      );
+
+      if (mixEffect.transitionPosition.inTransition) {
+        document.getElementById(`me-${i}-auto`).classList.add('atem-red');
+      } else {
+        document.getElementById(`me-${i}-auto`).classList.remove('atem-red');
+      }
+    }
+  } else if (updateType.includes('downstreamKeyers')) {
+    for (let i = 0; i < data.video.downstreamKeyers.length; i++) {
+      const dsk = data.video.downstreamKeyers[i];
+      if (dsk.isAuto) {
+        document.getElementById(`dsk-${i}-auto`).classList.add('atem-red');
+      } else {
+        document.getElementById(`dsk-${i}-auto`).classList.remove('atem-red');
+      }
+
+      if (dsk.onAir) {
+        document.getElementById(`dsk-${i}-onair`).classList.add('atem-red');
+      } else {
+        document.getElementById(`dsk-${i}-onair`).classList.remove('atem-red');
+      }
+
+      if (dsk.properties.tie) {
+        document.getElementById(`dsk-${i}-tie`).classList.add('atem-yellow');
+      } else {
+        document.getElementById(`dsk-${i}-tie`).classList.remove('atem-yellow');
+      }
+
+      document.getElementById(`dsk-${i}-rate`).textContent = framesToTime(dsk.remainingFrames);
+    }
+  } else if (updateType.includes('fadeToBlack')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const fadeToBlack = data.video.mixEffects[i].fadeToBlack;
+      const ftbRateId = `me-${i}-ftb-rate`;
+      const ftbId = `me-${i}-ftb`;
+
+      document.getElementById(ftbRateId).textContent = framesToTime(fadeToBlack.remainingFrames);
+
+      if (fadeToBlack.isFullyBlack) {
+        if (document.getElementById(ftbId).classList.contains('atem-red')) {
+          document.getElementById(ftbId).classList.remove('atem-red');
+        } else {
+          document.getElementById(ftbId).classList.add('atem-red');
+        }
+      } else if (fadeToBlack.inTransition) {
+        document.getElementById(ftbId).classList.add('atem-red');
+      } else {
+        document.getElementById(ftbId).classList.remove('atem-red');
+      }
+    }
+  } else if (
+    updateType.includes('programInput') ||
+    updateType.includes('previewInput') ||
+    updateType.includes('inputs')
+  ) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[0];
+      Object.keys(device.data.inputs)
+        .map((key) => Number(key))
+        .forEach((inputId) => {
+          if (mixEffect.programInput === inputId) {
+            document.getElementById(`me-${i}-program-input-${inputId}`).classList.add('atem-red');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-red');
+          } else {
+            document.getElementById(`me-${i}-program-input-${inputId}`).classList.remove('atem-red');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-red');
+          }
+
+          if (mixEffect.previewInput === inputId) {
+            document.getElementById(`me-${i}-preview-input-${inputId}`).classList.add('atem-green');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-green');
+          } else {
+            document.getElementById(`me-${i}-preview-input-${inputId}`).classList.remove('atem-green');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-green');
+          }
+        });
+    }
+  } else if (updateType.includes('transitionProperties')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const transitionProperties = data.video.mixEffects[i].transitionProperties;
+      Object.keys(TransitionStyle)
+        .filter((key) => !isNaN(Number(key)))
+        .map((key) => Number(key))
+        .forEach((style) => {
+          if (style === transitionProperties.style) {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.remove('atem-yellow');
+          }
+          if (style === transitionProperties.nextStyle) {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.remove('atem-yellow');
+          }
+        });
+
+      Object.keys(TransitionSelection)
+        .filter((key) => !isNaN(Number(key)))
+        .map((key) => Number(key))
+        .forEach((selection) => {
+          if (transitionProperties.selection.includes(selection)) {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.remove('atem-yellow');
+          }
+
+          if (transitionProperties.nextSelection.includes(selection)) {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.remove('atem-yellow');
+          }
+        });
+    }
+  } else if (updateType.includes('upstreamKeyers')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const upstreamKeyers = data.video.mixEffects[i].upstreamKeyers;
+      upstreamKeyers.forEach((upstreamKeyer) => {
+        if (upstreamKeyer.onAir) {
+          document.getElementById(`me-${i}-key-${upstreamKeyer.upstreamKeyerId + 1}-onair`).classList.add('atem-red');
+        } else {
+          document
+            .getElementById(`me-${i}-key-${upstreamKeyer.upstreamKeyerId + 1}-onair`)
+            .classList.remove('atem-red');
+        }
+      });
+    }
+  } else if (updateType.includes('transitionPreview')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[i];
+      if (mixEffect.transitionPreview) {
+        document.getElementById(`me-${i}-transition-preview`).classList.add('atem-red');
+      } else {
+        document.getElementById(`me-${i}-transition-preview`).classList.remove('atem-red');
+      }
+    }
+  } else if (updateType.includes('deviceInfo')) {
+    // videoModes pulled from https://github.com/nrkno/sofie-atem-connection/blob/master/src/enums/index.ts#L238
+    if ([27, 26, 23, 25, 19, 13, 11, 7, 5].includes(data.settings.videoMode)) {
+      timerFrameRate = 30;
+    } else if ([24, 22, 18, 16, 12, 10, 6, 4].includes(data.settings.videoMode)) {
+      timerFrameRate = 25;
+    } else if ([21, 20, 15, 14, 9, 8].includes(data.settings.videoMode)) {
+      timerFrameRate = 24;
+    } else {
+      timerFrameRate = 30;
+    }
+
+    if (!device.displayName) {
+      this.deviceInfoUpdate(device, 'displayName', data.info.productIdentifier);
+    }
+  } else {
+    console.log('unhandled update');
+    console.log(updateType);
+    console.log(device.data);
+  }
+};
+
+exports.data = function data(_device, msg) {
+  const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');
+  device.data = msg.state;
+
+  msg.pathToChange.forEach((path) => {
+    device.update(path, device.data);
+  });
+};
+
+function framesToTime(total) {
+  if (timerFrameRate) {
+    const seconds = Math.floor(total / timerFrameRate);
+    const frames = total - seconds * timerFrameRate;
+    let framesString = String(frames);
+    if (frames < 10) {
+      framesString = `0${framesString}`;
+    } else if (framesString === '0') {
+      framesString = '00';
+    }
+    return `${seconds}:${framesString}`;
+  }
+  return '0:00';
+}
@@ -0,0 +1,203 @@
+body {
+  background-color: #282828;
+}
+h1 {
+  font-family: 'Open Sans', sans-serif;
+}
+h3 {
+  color: #6d6d6d !important;
+  margin: 30px 0px 10px 9px;
+  font-size: 0.9em;
+  font-weight: 400;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.me-label {
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+.atem-input {
+  width: 52px;
+  height: 52px;
+  background-image: url('img/button_white.png');
+}
+
+.source-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #1f1f1f;
+  border: #1a1a1a 2px solid;
+  border-radius: 8px;
+  max-width: 416px;
+  padding: 12px;
+}
+
+.atem-red {
+  background-image: url('img/button_red.png');
+  box-shadow: 0px 0px 10px 1px #ff0000;
+  z-index: 10000;
+}
+
+.atem-green {
+  background-image: url('img/button_green.png');
+  box-shadow: 0px 0px 10px 1px #06c300;
+  z-index: 10000;
+}
+
+.atem-yellow {
+  background-image: url('img/button_yellow.png');
+  box-shadow: 0px 0px 10px 1px #c7ca00;
+  z-index: 10000;
+}
+
+.atem-disabled {
+  background-image: url('img/button_off.png');
+  color: #3a3a3a;
+}
+
+.atem-gray {
+  color: #575757;
+}
+
+.source-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.transition-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.transition-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-right: 30px;
+}
+
+.tbar-container {
+  display: flex;
+  flex-direction: column-reverse;
+  background-color: #1f1f1f;
+  border: 2px solid;
+  border-color: #1a1a1a;
+  border-radius: 6px;
+  width: 88px;
+  height: 429px;
+  position: relative;
+  margin-top: 58px;
+  margin-right: 60px;
+}
+
+.tbar-bg {
+  position: absolute;
+  background-image: url('img/tbar_bg.png');
+  width: 88px;
+  height: 429px;
+}
+.tbar-handle {
+  position: absolute;
+  background-image: url('img/tbar_handle.png');
+  width: 126px;
+  height: 50px;
+  left: -3px;
+}
+.tbar-div {
+  width: 100%;
+  background-color: #7aff58;
+  overflow: hidden;
+}
+
+.dsk {
+  width: 100%;
+}
+
+.dsk .source-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  width: 100%;
+  padding: 5px;
+}
+
+.dsk h3 {
+  text-align: center;
+}
+
+.fade-to-black-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 30px;
+}
+
+.fade-to-black .source-wrapper {
+  display: flex;
+  width: 100%;
+  padding: 5px;
+}
+
+.fade-to-black h3 {
+  text-align: center;
+}
+.rate-heading {
+  text-align: center;
+  font-size: small;
+  margin-bottom: 4px;
+}
+
+.dsk-rate,
+.ftb-rate,
+.transition-rate {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.dsk-rate-label,
+.ftb-rate-label,
+.transition-rate-label {
+  color: rgb(235, 110, 0);
+  background-color: black;
+  border-radius: 3px;
+  padding: 6px 2px;
+  text-align: center;
+}
+
+.clear {
+  background: transparent;
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.hide {
+  display: none;
+}
+
+.no-wrap {
+  flex-wrap: nowrap;
+}
+
+.show-small {
+  display: none;
+}
+
+@media screen and (min-width: 0px) and (max-width: 480px) {
+  .hide-small {
+    display: none;
+  }
+  .show-small {
+    display: block;
+  }
+}
+
+.float-left {
+  float: left;
+}
@@ -0,0 +1,189 @@
+<header>
+	<h1><%= listName  %></h1>
+</header>
+
+<% if (data.video.mixEffects) { %>
+<% Object.entries(data.video.mixEffects).forEach(([meIndex, state])=>{ %>
+    <div class="mixeffect_wrapper" id="me-<%= meIndex %>">
+        <h1 class="atem-gray me-label">ME<%= Number(meIndex) + 1 %></h1>
+        <div class="inputs-container show-small">
+            <h3 class="atem-gray">Preview/Program</h3>
+            <div class="source-wrapper">
+                <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
+                    <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
+                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input">
+                            <div class="source-label"><%= input.shortName %></div>
+                        </div>
+                    <% } else {%>
+                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input atem-disabled">
+                            <div class="source-label"><%= input.shortName %></div>
+                        </div>
+                    <% }%>
+                <% }) %>
+            </div>
+        </div>
+        <div class="float-left" style="margin-right: 30px;">
+            <div class="program-container hide-small">
+                <h3 class="atem-gray">Program</h3>
+                <div class="source-wrapper">
+                    <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
+                        <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
+                            <div id="me-<%= meIndex %>-program-input-<%= input.inputId %>" class="atem-input">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% } else {%>
+                            <div id="me-<%= meIndex %>-program-input-<%= input.inputId %>" class="atem-input atem-disabled">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% }%>
+
+                    <% }) %>
+                </div>
+            </div>
+            <div class="preview hide-small">
+                <h3 class="atem-gray">Preview</h3>
+                <div class="source-wrapper">
+                    <% Object.values(data.inputs).forEach((input)=>{ %>
+                        <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
+                            <div id="me-<%= meIndex %>-preview-input-<%= input.inputId %>" class="atem-input">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% } else {%>
+                            <div id="me-<%= meIndex %>-preview-input-<%= input.inputId %>" class="atem-input atem-disabled">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% }%>
+
+                    <% }) %>
+                </div>
+            </div>
+        </div>
+        <div class="transition-container float-left">
+            <div class="transition-settings">
+                <div class="next-transition">
+                    <h3>Next Transition</h3>
+                    <div class="source-wrapper" style="width: 260px;">
+                            <div class="atem-input clear"></div>
+                            <div id="me-<%= meIndex %>-key-1-onair" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-2-onair" class="atem-input <% if(data.video.downstreamKeyers.length<2){ %> atem-disabled <% } %>">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-3-onair" class="atem-input <% if(data.video.downstreamKeyers.length<3){ %> atem-disabled <% } %>">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-4-onair" class="atem-input <% if(data.video.downstreamKeyers.length<4){ %> atem-disabled <% } %>">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+
+                            <div id="me-<%= meIndex %>-transition-selection-1" class="atem-input">
+                                <div class="source-label">BKGD</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-2" class="atem-input">
+                                <div class="source-label">KEY 1</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-4" class="atem-input <% if(data.video.downstreamKeyers.length<2){ %> atem-disabled <% } %>">
+                                <div class="source-label">KEY 2</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-8" class="atem-input <% if(data.video.downstreamKeyers.length<3){ %> atem-disabled <% } %>">
+                                <div class="source-label">KEY 3</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-16" class="atem-input <% if(data.video.downstreamKeyers.length<4){ %> atem-disabled <% } %>">
+                                <div class="source-label">KEY 4</div>
+                            </div>
+                    </div>
+                </div>
+            
+                <div class="transition-style">
+                    <h3>Transition Style</h3>
+                    <div class="source-wrapper" style="width: 260px;">
+                            <div id="me-<%= meIndex %>-transition-style-0" class="atem-input">
+                                <div class="source-label">MIX</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-1" class="atem-input">
+                                <div class="source-label">DIP</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-2" class="atem-input">
+                                <div class="source-label">WIPE</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-4" class="atem-input">
+                                <div class="source-label">STING</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-3" class="atem-input">
+                                <div class="source-label">DVE</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-preview" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>PREV</div> <div>TRANS</div>
+                                </div>
+                            </div>
+                            <div class="atem-input clear"></div>
+                            <div id="me-<%= meIndex %>-cut" class="atem-input">
+                                <div class="source-label">CUT</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-auto" class="atem-input">
+                                <div class="source-label">AUTO</div>
+                            </div>
+                            <div class="transition-rate atem-input clear">
+                                <div class="atem-gray rate-heading">Rate</div>
+                                <div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">&nbsp;&nbsp;</div>
+                            </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tbar-container">
+                <div class="tbar-bg"></div>
+                <div id="me-<%= meIndex %>-tbar-handle-div" class="tbar-handle"></div>
+                <div id="me-<%= meIndex %>-tbar-div" class="tbar-div" ></div>
+            </div>
+            <div class="fade-to-black-container">
+                <% if (data.video.downstreamKeyers) { %>
+                    <% Object.entries(data.video.downstreamKeyers).forEach(([dskIndex, state])=>{ %>
+                        <div class="dsk">
+                            <h3 class="atem-gray">DSK<%= Number(dskIndex) + 1 %></h3>
+                            <div class="source-wrapper">
+                                <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
+                                    <div class="source-label">TIE</div>
+                                </div>
+                                <div class="dsk-rate atem-input clear">
+                                    <div class="atem-gray rate-heading">Rate</div>
+                                    <div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">&nbsp;&nbsp;</div>
+                                </div>
+                                <div id="dsk-<%= dskIndex %>-onair" class="atem-input">
+                                    <div class="source-label" style="flex-direction: column;">
+                                        <div>ON</div> <div>AIR</div>
+                                    </div>
+                                </div>
+                                <div id="dsk-<%= dskIndex %>-auto" class="atem-input">
+                                    <div class="source-label">AUTO</div>
+                                </div>
+                            </div>
+                        </div>
+                    <% }) %>
+                <% } %>
+                <div class="fade-to-black">
+                    <h3 class="atem-gray">Fade to Black</h3>
+                    <div class="source-wrapper">
+                        <div class="ftb-rate atem-input clear">
+                            <div class="atem-gray rate-heading">Rate</div>
+                            <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">&nbsp;&nbsp;</div>
+                        </div>
+                        <div id="me-<%= meIndex %>-ftb" class="atem-input">
+                            <div class="source-label">FTB</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<% }) %>
+<% } %>
@@ -1,18 +1,24 @@
-<h2>Connection Requirements</h2>
+<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>

+<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 dropdown does not matter.
-  </li>
+  <li>Enable <em>&#10004; TCP OSC</em>. The TCP format should be "TCP Format for OSC 1.1 (SLIP)".</li>
  <li>Enable <em>Third Party OSC</em></li>
 </ul>
-If the "Third Party OSC" option is not available, Eos must be updated to 3.1 or
-newer.
+If the "Third Party OSC" option is not available, Eos must be updated to 3.1 or newer.

-<h4>System Settings &rarr; Show Control &rarr; OSC</h4>
+<h4>Browser: 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>
  <li>All other fields may be left to defaults or blank.</li>
+  <li>If a custom port is desired specify it in under OSC TCP Server Ports.</li>
 </ul>
@@ -6,14 +6,14 @@ const Cue = require('./cue');
 exports.config = {
  defaultName: 'ETC Eos',
  connectionType: 'osc',
-  remotePort: 3032,
-  mayChangePorts: true,
+  defaultPort: 3037,
+  mayChangePort: true,
  heartbeatInterval: 5000,
  heartbeatTimeout: 6000,
  searchOptions: {
    type: 'TCPport',
    searchBuffer: Buffer.from('\xc0/eos/ping\x00\x00\x2c\x00\x00\x00\xc0', 'ascii'),
-    testPort: 3032,
+    testPort: 3037,
    validateResponse(msg, info) {
      return msg.toString().includes('/eos/out');
    },
@@ -23,6 +23,9 @@ exports.config = {
 exports.ready = function ready(_device) {
  const device = _device;
  device.data.EOS = new EOS();
+  device.templates = {
+    cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
+  };
  device.send('/eos/get/cuelist/count');
  device.send('/eos/get/version');
  device.send('/eos/subscribe', [{ type: 'i', value: 1 }]);
@@ -30,6 +33,7 @@ exports.ready = function ready(_device) {

 exports.data = function data(_device, osc) {
  const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');

  const addressParts = osc.address.split('/');
  addressParts.shift();
@@ -50,7 +54,10 @@ exports.data = function data(_device, osc) {
      device.send(`/eos/get/cue/${addressParts[4]}/index/${i}`);
    }
  } else if (match(addressParts, ['eos', 'out', 'get', 'cue', '*', '*', '*', 'list', '*', '*'])) {
-    this.deviceInfoUpdate(device, 'status', 'ok');
+    if (device.data.EOS.cueLists[addressParts[4]] === undefined) {
+      device.data.EOS.cueLists[addressParts[4]] = {};
+      device.send(`/eos/get/cue/${addressParts[4]}/count`);
+    }
    if (device.data.EOS.cueLists[addressParts[4]][addressParts[5]] === undefined) {
      device.data.EOS.cueLists[addressParts[4]][addressParts[5]] = {};
    }
@@ -73,9 +80,12 @@ exports.data = function data(_device, osc) {
  } else if (match(addressParts, ['eos', 'out', 'event', 'cue', '*', '*', 'fire'])) {
    device.data.EOS.activeCue = addressParts[5];
    device.draw();
-    device.update('activeCue', {
-      uid: device.data.EOS.cueLists[addressParts[4]][addressParts[5]][0].uid,
-    });
+    const cues = device.data.EOS.cueLists[addressParts[4]][addressParts[5]];
+    if (cues) {
+      device.update('activeCue', {
+        uid: cues[0].uid,
+      });
+    }
  } else if (match(addressParts, ['eos', 'out', 'notify', 'cue', '*', '*', '*', '*'])) {
    const cueList = addressParts[4];
    const cueNumber = osc.args[1];
@@ -87,14 +97,11 @@ exports.data = function data(_device, osc) {
  }
 };

-const cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`)));
-
 exports.update = function update(device, doc, updateType, data) {
  if (updateType === 'cueData') {
    const $elem = doc.getElementById(data.uid);
-
    if ($elem) {
-      $elem.outerHTML = cueTemplate({
+      $elem.outerHTML = device.templates.cue({
        q: data.cue,
        cueNumber: data.cueNumber,
        isActive: false,
@@ -3,6 +3,7 @@ table {
  border: #404040 1px solid;
  border-radius: 4px;
  color: #a59baa;
+  width: 100%;
 }
 th {
  font-size: 14px;
@@ -62,6 +63,16 @@ tr.active-cue .time {
  border-color: #c78b07;
 }

+.list_name {
+  color: lightgray;
+  margin-left: 5px;
+  margin-bottom: 2px;
+}
+
+.list_container {
+  margin-bottom: 10px;
+}
+
@media screen and (min-width: 0px) and (max-width: 750px) {
  .hide-medium {
    display: none;
@@ -3,45 +3,40 @@
 	<h2>Eos <%= data.version  %></h2>
 </header>

-<%
-  const fs = require('fs');
-  const path = require('path');
-  let cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/eos/cue.ejs`)));
-%>
-
-
 <% for(var i in data.EOS.cueLists){ %>
-	<strong>List <%= i %></strong>
-	<table cellspacing="0">
-		<tr>
-			<th width="70px">Cue</th>
-			<th width="30px">Int Up</th>
-			<th width="30px">Int Down</th>
-			<th width="40px" class="hide-medium">Focus</th>
-			<th width="40px" class="hide-medium">Color</th>
-			<th width="40px" class="hide-medium">Beam</th>
-			<th width="40px" class="hide-small">Dur</th>
-			<th width="20px" class="hide-small">M</th>
-			<th width="20px" class="hide-small">B</th>
-			<th width="20px" class="hide-small">A</th>
-			<th width="70px" class="hide-small">Fw/Hg</th>
-			<th width="150px">Label</th>
-			<th width="10px" class="hide-medium">Ext Links</th>
-		</tr>
+	<div class="list_container">
+		<div class="list_name">List <%= i %></div>
+		<table cellspacing="0">
+			<tr>
+				<th width="70px">Cue</th>
+				<th width="30px">Int Up</th>
+				<th width="30px">Int Down</th>
+				<th width="40px" class="hide-medium">Focus</th>
+				<th width="40px" class="hide-medium">Color</th>
+				<th width="40px" class="hide-medium">Beam</th>
+				<th width="40px" class="hide-small">Dur</th>
+				<th width="20px" class="hide-small">M</th>
+				<th width="20px" class="hide-small">B</th>
+				<th width="20px" class="hide-small">A</th>
+				<th width="70px" class="hide-small">Fw/Hg</th>
+				<th width="150px">Label</th>
+				<th width="10px" class="hide-medium">Ext Links</th>
+			</tr>

-		<% var cues = Object.keys(data.EOS.cueLists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
+			<% var cues = Object.keys(data.EOS.cueLists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>

-		<% for(var j=0; j<cues.length; j++){ %>
-			<% var q = data.EOS.cueLists[i][cues[j]] %>
-			
-			<%= cueTemplate({
-				q: q,
-				cues: cues,
-				cueNumber: cues[j],
-				isActive: (cues[j]==data.EOS.activeCue+"")
-			}) %>
+			<% for(var j=0; j<cues.length; j++){ %>
+				<% var q = data.EOS.cueLists[i][cues[j]] %>
+				
+				<%= templates.cue({
+					q: q,
+					cues: cues,
+					cueNumber: cues[j],
+					isActive: (cues[j]==data.EOS.activeCue+"")
+				}) %>

-		<% } %>
-	</table>
+			<% } %>
+		</table>
+	</div>

 <% } %>
@@ -1,15 +1,17 @@
-<div id="<%= cueList.uniqueID %>">
+<% let cueKeys = allCues[cueList.uniqueID]; %>

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

 <div class="cart">

-<% for(let r=0; r<cueList.cartRows; r++){ %>
-  <% for(let c=0; c<cueList.cartColumns; c++){ %>
+<% for(let r=0; r<cueKeys.cartRows; r++){ %>
+  <% for(let c=0; c<cueKeys.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>
@@ -18,25 +20,27 @@
 <% } %>


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

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

 <% } %>

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

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

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

-  <% }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{ %>
+    <!-- playhead/color indicator -->
+    <td class="playhead"></td> 
    
-  <% } %>
-  </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>
-
-  <% } %>
+    <!-- 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>


-  
-
-  <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 class="gMode-<%= cue.nestedGroupModes[i] %> gBot"></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 -->
-
-
-	<% 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>
+    <!-- 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 id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gRight"><%= cue.listName %></td>
+        <td><img src="./plugins/qlab/img/<%= cueKeys.type.toLowerCase().replace(' ','-') %>.png" height="20px"></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>
-
-  <% } %>


-  <td class="q-time hide-medium"><%= cue.target %></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>
+    
+        <% }else{ %>
+          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gRight"><%= cueKeys.listName %></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>
+    
+    <% } %>
+    



+    <!-- cue target -->
+    <% if(cueKeys.currentCueTarget){ %>
+        <td class="q-target hide-medium"><%= allCues[cueKeys.currentCueTarget].number ||  allCues[cueKeys.currentCueTarget].listName %></td>

-  <% if(cue.preWait){ %>
-    <td class="q-time hide-small"><%= elapsedTime(cue.preWait, cue.preWaitElapsed, "preWait", cue) %></td>
+    <% }else{ %>
+        <td class="q-target 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>
+    <!-- cue preWait -->
+    <% if(cueKeys.preWait){ %>
+        <td class="q-time hide-small"><%= elapsedTime(cueKeys.preWait, cueKeys.preWaitElapsed, "preWait", cueKeys) %></td>

-  <% }else{ %>
-    <td class="hide-medium"></td>
+    <% }else{ %>
+        <td class="q-time q-gray-text hide-small">00:00.00</td>

-  <% } %>
+    <% } %>



-  <% if(cue.postWait){ %>
-    <td class="q-time hide-medium"><%= elapsedTime(cue.postWait, cue.postWaitElapsed, "postWait", cue) %></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="q-time q-gray-text hide-medium">00:00.00</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>
+
+    <% } %>



-  <% if(cue.continueMode==2){ %>
-    <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></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(cue.continueMode==1){ %>
-    <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.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>

-  <% }else{ %>
-    <td class="hide-small"></td>
+    <% }else{ %>
+        <td class="hide-small"></td>

-  <% } %>
+    <% } %>


 </tr>

-<% 
-  function prettyFormatTime(seconds){
+
+    <% }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>
+    <td class="q-time q-gray-text hide-small">00:00.00</td>
+    <td class="hide-medium"></td>
+    <td class="q-time q-gray-text hide-medium">00:00.00</td>
+    <td class="hide-small"></td>
+</tr>
+
+<% } %>
+
+<%
+function prettyFormatTime(seconds){
    if(!seconds){
      return "00:00.00";
    }
@@ -151,14 +212,14 @@
    return string.substring(startIndex, string.length-2)
  }

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

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

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

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

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

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

 <table cellspacing="0">
  <tr>
-    <th width="1px" style="border-left: none; border-right: none;"></th>
+    <th width="3px" 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;">Action</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;">Duration</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(const cue_id in cueList.cues){ %>
-      <%= displayCueRow(cueList.cues[cue_id]) %>
+    <% for(let i=0; i<cueList.cues.length; i++){ %>
+      <%= displayCueRow(cueList.cues[i]) %>
    <% } %>

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


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

  if(q.cues){
-    q.cues.forEach(q =>{
-      html+=displayCueRow(q);
-    })
+    for(let i=0; i<q.cues.length; i++){
+      html += displayCueRow(q.cues[i]);
+    }
  }
  return html;
 }
@@ -28,388 +28,362 @@ 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","currentDuration","colorName","continueMode",' +
+  '"type","children","preWait","postWait","duration","colorName","continueMode",' +
  '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",' +
-  '"actionElapsed","postWaitElapsed","isPaused"]';
+  '"actionElapsed","postWaitElapsed","isPaused","currentCueTarget","isRunning","armed","notes"]';

-const cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`)));
-const tileTemplate = _.template(fs.readFileSync(path.join(__dirname, `tile.ejs`)));
-const cartTemplate = _.template(fs.readFileSync(path.join(__dirname, `cart.ejs`)));
-
-exports.ready = function ready(device) {
+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`))),
+  };
 };

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

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

-  if (match(oscAddressParts, ['reply', 'version'])) {
-    const json = JSON.parse(oscData.args[0]);
-    device.data.version = json.data;
-
-    this.deviceInfoUpdate(device, 'status', 'ok');
-  } else if (match(oscAddressParts, ['reply', 'workspaces'])) {
-    const json = JSON.parse(oscData.args[0]);
-    device.data.workspaces = {};
-
-    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 (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]);
-
-    workspace.cueLists = {};
-    workspace.cues = {};
+  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') {
-      device.data.permission = 'denied';
-      device.draw();
-    } else if (json.data) {
-      device.data.permission = 'ok';
-
-      json.data.forEach((cueList) => {
-        workspace.cueLists[cueList.uniqueID] = cueList;
-        addCueToWorkspace(workspace, cueList);
-      });
-
-      device.draw();
-
-      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 (device.data.workspaces[json.workspace_id]) {
+        device.data.workspaces[json.workspace_id].permission = 'denied';
      }
-
-      nestedGroupPosition.unshift(sum);
-
-      if (obj.cues) {
-        sum += pos;
-        nestedGroupModes.unshift(obj.groupMode);
-      } else {
-        nestedGroupModes.unshift(workspace.cues[obj.parent].groupMode);
-      }
-
-      obj = workspace.cues[obj.parent];
+      return;
    }
-
-    cue.nestedGroupModes = nestedGroupModes;
-    cue.nestedGroupPosition = nestedGroupPosition;
-
-    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) {
+    if (json.status === 'error') {
      device.send('/workspaces');
+      return;
    }
-  } 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 (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 (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';
-    }
+    this.deviceInfoUpdate(device, 'status', 'ok');
    device.draw();
-  } else if (match(oscAddressParts, ['reply', 'thump'])) {
-    // intermittent connection check even if nothing's happening
-  } else {
-    // console.log(address)
+  } 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]];
+
+    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;
+
+    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
+        );
+      }
+      device.draw();
+    }
+
+    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;
+
+    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];
+    }
+
+    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) {
-  if (updateType === 'updateCueData') {
+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.type === 'Cue List') {
-        $elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
-      } else if (data.cue.type === 'Cart') {
-        $elem.outerHTML = cartTemplate({
-          tileTemplate,
-          cueList: data.cue,
-          allCues: data.workspace.cues,
+      if (data.cue.parent.type === 'Cart') {
+        $elem.outerHTML = device.templates.tile({
+          allCues: device.data.cueKeys,
+          cue: data.cue,
+          workspace: data.workspace,
        });
-      } 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 = tileTemplate(data);
-        } else {
-          $elem.outerHTML = cueTemplate(data);
-        }
      } else {
-        $elem.outerHTML = cueTemplate(data);
+        $elem.outerHTML = device.templates.cue({
+          allCues: device.data.cueKeys,
+          cue: data.cue,
+          workspace: data.workspace,
+        });
      }
    }
-  } else if (updateType === 'updatePlaybackPosition') {
-    Array.from(doc.getElementsByClassName('playback-position')).forEach(($elem, index, array) => {
-      $elem.classList.remove('playback-position');
+  } 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');
    });

-    const $elem = doc.getElementById(data.cue.uniqueID);
-    $elem.classList.add('playback-position');
-    $elem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    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');
+    }
  }
 };

-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);
-    });
-  }
-}
-
-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) {
+exports.heartbeat = function heartbeat(_device) {
+  const device = _device;
+  device.data.ticks++;
+  if (device.data.ticks % 10 === 0) {
    device.send(`/thump`);
  }
-
-  if (heartbeatCount % interval === 0 && device.data.workspaces && Object.keys(device.data.workspaces).length > 0) {
+  if (device.data.ticks - device.data.lastElapsedMessage < 5) {
    device.send(`/cue_id/active/preWaitElapsed`);
-    device.send(`/cue_id/active/actionElapsed`);
    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,
+      });
+
+      const freshCue = oldCues[newIndex - 1];
+
+      let keys = device.data.cueKeys[freshCue.uniqueID];
+      if (!keys) {
+        device.data.cueKeys[freshCue.uniqueID] = {};
+        keys = device.data.cueKeys[freshCue.uniqueID];
+      }
+
+      if (freshCue.parent === '[root group of cue lists]') {
+        keys.parentKeys = [];
+      } else {
+        keys.parentKeys = [...device.data.cueKeys[freshCue.parent.uniqueID].parentKeys];
+        keys.parentKeys.push(device.data.cueKeys[freshCue.parent.uniqueID]);
+      }
+
+      device.send(`/cue_id/${newCue.uniqueID}/valuesForKeys`, [{ type: 's', value: valuesForKeysString }]);
+
+      keys.cueInWorkspace = freshCue;
+
+      if (freshCue.type === 'Group' || freshCue.type === 'Cue List' || oldCues[i].type === 'Cart') {
+        freshCue.cues = [];
+        insertChildCues(device, freshCue.cues, newCue.cues, freshCue);
+      }
+    }
+  }
+  oldCues.sort((a, b) => a.sortIndex - b.sortIndex);
+}
@@ -1,3 +1,6 @@
+body {
+  margin-bottom: 200px !important;
+}
 table {
  background-color: #323232;
  border: 0px;
@@ -33,61 +36,60 @@ td img {
 }

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

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

 tr.q-armed-false td {
@@ -96,13 +98,22 @@ tr.q-armed-false td {
 }

 tr.playback-position {
-  background-image: none !important;
-  background: #1557da !important;
-  color: white !important;
+  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 {
  color: white !important;
 }
+tr.selected {
+  background: #1557da !important;
+  color: white !important;
+}

 .gLeft {
  height: 24px;
@@ -140,22 +151,19 @@ tr.playback-position .q-gray-text {
  border-radius: 6px;
 }
 .gMode-1 {
-  border-color: #5a5a87;
+  border-color: #48477f;
 }
 .gMode-2 {
-  border-color: #5a5a87;
+  border-color: #48477f;
 }
 .gMode-3 {
-  border-color: #429242;
+  border-color: #43a424;
 }
 .gMode-4 {
-  border-color: #925fc0;
-}
-.gMode-4 {
-  border-color: #925fc0;
+  border-color: #7f26a5;
 }
 .gMode-6 {
-  border-color: #d05b15;
+  border-color: #ee6a21;
 }
 .gMode-,
 .gMode-0 {
@@ -172,6 +180,12 @@ tr.playback-position .q-gray-text {
  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;
 }
@@ -193,6 +207,10 @@ tr.playback-position .q-gray-text {
  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;
@@ -209,27 +227,27 @@ tr.playback-position .q-gray-text {
  right: 13px;
  top: 13px;
 }
-.cartColor-red {
-  border-color: #ff4242;
-  background-color: #9b3726;
+div.cartColor-red {
+  border-color: #e7443a;
+  background-color: #942f27;
 }
-.cartColor-orange {
-  border-color: #ffa500;
-  background-color: #ad6026;
+div.cartColor-orange {
+  border-color: #f18f28;
+  background-color: #a95023;
 }
-.cartColor-green {
-  border-color: #01d52f;
-  background-color: #397f27;
+div.cartColor-green {
+  border-color: #4ebf32;
+  background-color: #397824;
 }
-.cartColor-blue {
-  border-color: #536de0;
-  background-color: #304893;
+div.cartColor-blue {
+  border-color: #3a54cf;
+  background-color: #25378a;
 }
-.cartColor-purple {
-  border-color: #a601c0;
-  background-color: #592d74;
+div.cartColor-purple {
+  border-color: #7e25a5;
+  background-color: #4c2269;
 }
-.cartColor-none {
+div.cartColor-none {
  border-color: #95929f;
  background-color: #3b3b3b;
 }
@@ -243,6 +261,53 @@ tr.playback-position .q-gray-text {
  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,36 +3,42 @@
  <h2>QLab <%= data.version || "" %></h2>
 </header>

-<% 
-  const fs = require('fs');
-  let _ = require('lodash');
-  const path = require('path');

-  let cueTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/cue.ejs`)));
-  let tileTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/tile.ejs`)));
-  let cartTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/cart.ejs`)));
-  let listTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/qlab/cuelist.ejs`)));
-%>
+
+<% const workspaceKeys = Object.keys(data.workspaces); %>
+
+<% if(workspaceKeys.length==0){ %>
+  <h3>QLab is open but there isn't an open Workspace</h3>
+<% } %>
+
  
-  <% 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"){ %>
-          <%= listTemplate({cueList: ql, allCues: workspace.cues, rowTemplate: cueTemplate, workspace: workspace}) %>
-        <% }else if(ql.type=="Cart"){ %>
-          <%= cartTemplate({cueList: ql, allCues: workspace.cues, tileTemplate: tileTemplate}) %>
-        <% } %>
+<% for(let i=0; i<workspaceKeys.length; i++){ %>
+  <% const workspace = data.workspaces[workspaceKeys[i]]; %>

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

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

-<% }else if(data.permission=="denied"){ %>
+      <% 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}) %>
+      <% } %>

-  <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>
+    <% } %>
+  
+  <% }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>
+  <% } %>

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

-  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;
+    top = (cueKeys.cartPosition[0]-1)*height;
+    left = (cueKeys.cartPosition[1]-1)*width;
  }

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

  <div class="cartCueIcon">
-    <% if(cue.broken){ %>
+    <% if(cueKeys.isBroken){ %>
      <img src="plugins/qlab/img/status_broken_white.png" height="18px">
-    <% }else if(cue.running){ %>
+    <% }else if(cueKeys.isRunning){ %>
      <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-<%= cue.colorName %>">
-    <p><%= cue.number %> &bull;  <%= cue.displayName %></p>
+  <div class="cartCue cartColor-<%= cueKeys.colorName %>">
+    <p>
+      <%= cueKeys.number %>
+      <% if(cueKeys.number){ %> &bull; <% } %>
+      <%= cueKeys.displayName %>
+    </p>
  </div>

 </div>
@@ -55,10 +55,7 @@ exports.data = function data(_device, buf) {
  universe.priority = buf.readUInt8(108);
  universe.cid = buf.toString('hex', 22, 38);
  universe.slots = buf.slice(126);
-
-  if (buf.readUInt8(125) !== 0) {
-    universe.startCode = buf.readUInt8(125);
-  }
+  universe.startCode = buf.readUInt8(125);

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

-    if (universe.priority > 0) {
+    if (universe.priority > 0 && universe.startCode === 0) {
      device.draw();
      device.update('elementCache');
    }
  }
-  if (universe.priority > 0) {
+  if (universe.priority > 0 && universe.startCode === 0) {
    device.update('universeData', {
      universeIndex,
      universe,
@@ -115,7 +112,7 @@ exports.update = function update(_device, doc, updateType, updateData) {
      } else if (data.startCode === 0xcc) {
        $code.textContent = 'RDM';
      }
-    } else {
+    } else if (data.universe.startCode === 0) {
      device.draw();
      device.update('elementCache');
    }
@@ -8,6 +8,7 @@ class Channel {
    this.rx_rf_lvl = 0;
    this.rf_antenna = 0;
    this.tx_type = 0;
+    this.rx_graph_bars = 0;
  }
 }

@@ -21,6 +21,10 @@ 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) {
@@ -31,6 +35,8 @@ exports.data = function data(_device, message) {
    return;
  }

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

@@ -84,23 +90,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';
      }
@@ -108,10 +114,32 @@ 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: greenyellow;
+  background-color: #adff2f;
 }
 .batt-bar {
  height: 26px;
@@ -99,3 +99,25 @@ 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><%= ch.rx_rf_lvl %><br /><small>dBm</small></small>
+      <small><span id="ch-<%= i %>-rf-text"><%= ch.rx_rf_lvl %></span><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.audio_lvl * 2) %>"></div>
+          style="height: <%= 90- (ch.rx_rf_lvl * 2) %>"></div>
      </div>
-      <small><%= ch.audio_lvl %><br /><small>dBFS</small></small>
+      <small><span id="ch-<%= i %>-audio-text"><%= ch.audio_lvl %></span><br /><small>dBFS</small></small>
    </td>
    <td style="width: 40px">
      <div class="rf-indicator-wrapper">&nbsp;</div>
@@ -43,7 +43,12 @@
      <div class="bar-wrapper pink">
        <div class="bar" style="height: <%= 60- (ch.audio_gain * 1.4) %>"></div>
      </div>
-      <small><%= ch.audio_gain %><br /><small>dB</small></small>
+      <small id=""><%= ch.audio_gain %><br /><small>dB</small></small>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="3" id="ch-<%= i %>-graph" class="rf-graph">
+     
    </td>
  </tr>
  <tr>
@@ -11,15 +11,15 @@ exports.config = {
    devicePort: 10023,
    listenPort: 0,
    validateResponse(msg, info) {
-      return msg.toString().includes('/xinfo') === 0;
+      return msg.toString().includes('/xinfo');
    },
  },
 };

-exports.ready = function ready(device) {
-  const d = device;
-  d.data.X32 = new Console();
-  d.send('/xinfo');
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data = new Console();
+  device.send('/xinfo');

  device.send('/batchsubscribe', [
    { type: 's', value: '/ch/meters' },
@@ -44,25 +44,25 @@ function parseAddress(msg) {
  return addr;
 }

-exports.data = function data(device, oscData) {
-  this.deviceInfoUpdate(device, 'status', 'ok');
+exports.data = function data(_device, oscData) {
+  this.deviceInfoUpdate(_device, 'status', 'ok');

-  const d = device;
+  const device = _device;

  if (oscData.address === '/xinfo') {
-    d.data.X32.info.name = oscData.args[1];
-    d.data.X32.info.ip = oscData.args[0];
-    d.data.X32.info.firmware = oscData.args[3];
-    d.data.X32.info.model = oscData.args[2];
+    device.data.info.name = oscData.args[1];
+    device.data.info.ip = oscData.args[0];
+    device.data.info.firmware = oscData.args[3];
+    device.data.info.model = oscData.args[2];

-    this.deviceInfoUpdate(device, 'defaultName', d.data.X32.info.name);
+    this.deviceInfoUpdate(_device, 'defaultName', device.data.info.name);

-    d.send('/main/st/config/name');
+    device.send('/main/st/config/name');

    for (let i = 0; i <= 32; i++) {
-      d.send(`/ch/${i.toString().padStart(2, '0')}/config/name`);
+      device.send(`/ch/${i.toString().padStart(2, '0')}/config/name`);
    }
-    d.draw();
+    device.draw();
  } else if (oscData.address.includes('/ch/meters')) {
    const buf = Buffer.from(oscData.args[0]);

@@ -70,12 +70,12 @@ exports.data = function data(device, oscData) {
    for (let i = 0; i < 70; i++) {
      if (i >= 0 && i < 32) {
        // These are channel meters
-        d.data.X32.inputs.channels[i].meter = Console.getBehringerDB(buf.readFloatLE(offset));
+        device.data.inputs.channels[i].meter = Console.getBehringerDB(buf.readFloatLE(offset));
      }

      offset += 4;
    }
-    d.draw();
+    device.draw();
  } else if (oscData.address.includes('/main/meters')) {
    const buf = Buffer.from(oscData.args[0]);
    let offset = 4; // skip first 4 bytes they are the length bytes
@@ -83,10 +83,10 @@ exports.data = function data(device, oscData) {
    for (let i = 0; i < 49; i++) {
      if (i === 22) {
        // STEREO LEFT METER
-        d.data.X32.main.stereo.meter[0] = Console.getBehringerDB(buf.readFloatLE(offset));
+        device.data.main.stereo.meter[0] = Console.getBehringerDB(buf.readFloatLE(offset));
      } else if (i === 23) {
        // STEREO RIGHT METER
-        d.data.X32.main.stereo.meter[1] = Console.getBehringerDB(buf.readFloatLE(offset));
+        device.data.main.stereo.meter[1] = Console.getBehringerDB(buf.readFloatLE(offset));
      }
      offset += 4;
    }
@@ -95,56 +95,53 @@ exports.data = function data(device, oscData) {

    if (addr[0] === 'ch') {
      const channel = Number(addr[1]);
-      d.data.X32.inputs.channels[channel - 1].fader = oscData.args[0];
-      d.data.X32.inputs.channels[channel - 1].faderDB = Console.getBehringerDB(oscData.args[0]);
+      device.data.inputs.channels[channel - 1].fader = oscData.args[0];
+      device.data.inputs.channels[channel - 1].faderDB = Console.getBehringerDB(oscData.args[0]);
    } else if (addr[0] === 'main') {
-      d.data.X32.main.stereo.fader = oscData.args[0];
-      d.data.X32.main.stereo.faderDB = Console.getBehringerDB(oscData.args[0]);
+      device.data.main.stereo.fader = oscData.args[0];
+      device.data.main.stereo.faderDB = Console.getBehringerDB(oscData.args[0]);
    }

-    d.draw();
+    device.draw();
  } else if (oscData.address.includes('/mix/on')) {
    const addr = parseAddress(oscData.address);
    if (addr[0] === 'ch') {
      const channel = Number(addr[1]);
-      d.data.X32.inputs.channels[channel - 1].mute = oscData.args[0];
-      d.send(`/ch/${addr[1]}/mix/fader`);
+      device.data.inputs.channels[channel - 1].mute = oscData.args[0];
+      device.send(`/ch/${addr[1]}/mix/fader`);
    } else if (addr[0] === 'main') {
-      d.data.X32.main.stereo.mute = oscData.args[0];
-      d.send(`/main/${addr[1]}/mix/fader`);
+      device.data.main.stereo.mute = oscData.args[0];
+      device.send(`/main/${addr[1]}/mix/fader`);
    }
-    d.draw();
+    device.draw();
  } else if (oscData.address.includes('/config/name')) {
    const addr = parseAddress(oscData.address);
    if (addr[0] === 'main') {
      if (addr[1] === 'st') {
-        d.data.X32.main.stereo.name = oscData.args[0];
-        if (d.data.X32.main.stereo.name === '') {
-          d.data.X32.main.stereo.name = 'LR';
+        device.data.main.stereo.name = oscData.args[0];
+        if (device.data.main.stereo.name === '') {
+          device.data.main.stereo.name = 'LR';
        }
-        d.send(`/main/${addr[1]}/config/color`);
+        device.send(`/main/${addr[1]}/config/color`);
      }
    } else if (addr[0] === 'ch') {
      const channel = Number(addr[1]);
-      d.data.X32.inputs.channels[channel - 1].name = oscData.args[0];
-      d.send(`/ch/${addr[1]}/config/color`);
+      device.data.inputs.channels[channel - 1].name = oscData.args[0];
+      device.send(`/ch/${addr[1]}/config/color`);
    }
-    d.draw();
+    device.draw();
  } else if (oscData.address.includes('/config/color')) {
    const addr = parseAddress(oscData.address);
    if (addr[0] === 'main') {
-      d.data.X32.main.stereo.color = oscData.args[0];
-      d.send(`/main/${addr[1]}/mix/on`);
+      device.data.main.stereo.color = oscData.args[0];
+      device.send(`/main/${addr[1]}/mix/on`);
    } else if (addr[0] === 'ch') {
      const channel = Number(addr[1]);
-      d.data.X32.inputs.channels[channel - 1].color = oscData.args[0];
-      d.send(`/ch/${addr[1]}/mix/on`);
+      device.data.inputs.channels[channel - 1].color = oscData.args[0];
+      device.send(`/ch/${addr[1]}/mix/on`);
    }
-    d.draw();
-  } else {
-    // console.log(oscData);
+    device.draw();
  }
-  // console.log(msg)
 };

 exports.heartbeat = function heartbeat(device) {
@@ -30,7 +30,6 @@ tr td:first-child {
  padding: 1px 6px;
  border-radius: 10px;
  color: black;
-  font-family: PlexMono !important;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -136,12 +135,7 @@ input[type='range']::-webkit-slider-runnable-track {

 .meter {
  height: 3px;
-  background: linear-gradient(
-    90deg,
-    rgba(19, 126, 30, 1) 0%,
-    rgba(255, 238, 30, 1) 85%,
-    rgba(255, 0, 0, 1) 100%
-  );
+  background: linear-gradient(90deg, rgba(19, 126, 30, 1) 0%, rgba(255, 238, 30, 1) 85%, rgba(255, 0, 0, 1) 100%);
 }

 /* need to find a way to match the color of this with the table row */
@@ -1,6 +1,6 @@
 <header>
  <h1><%= listName %></h1>
-  <h2><%= data.model %></h2>
+  <h2><%= data.info.model %></h2>
 </header>

 <table class="cv-table">
@@ -13,15 +13,15 @@
  </tr>
  <tr>
    <td width="40px">LR</td>
-    <td width="100px"><div class="color color-<%= data.X32.main.stereo.color %>"><%- data.X32.main.stereo.name%></div></td>
-    <td><div class="fader-mute mute-<%=data.X32.main.stereo.mute%>">M</div></td>
-    <td><%= formatAsDB(data.X32.main.stereo.faderDB) %></td>
+    <td width="100px"><div class="color color-<%= data.main.stereo.color %>"><%- data.main.stereo.name%></div></td>
+    <td><div class="fader-mute mute-<%=data.main.stereo.mute%>">M</div></td>
+    <td><%= formatAsDB(data.main.stereo.faderDB) %></td>
    <td>
-      <% let style = `style=width:${Math.abs(data.X32.main.stereo.meter[0] - 10)}%`; %>
+      <% let style = `style=width:${Math.abs(data.main.stereo.meter[0] - 10)}%`; %>
      <div class="meter">
        <div class="meter-cover" <%= style %>></div>
      </div>
-      <% style = `style=width:${Math.abs(data.X32.main.stereo.meter[1] - 10)}%`; %>
+      <% style = `style=width:${Math.abs(data.main.stereo.meter[1] - 10)}%`; %>
      <div class="meter">
        <div class="meter-cover" <%= style %>></div>
      </div>
@@ -29,22 +29,22 @@
        type="range"
        min="0"
        max="100"
-        value="<%= data.X32.main.stereo.fader*100 %>"
+        value="<%= data.main.stereo.fader*100 %>"
        disabled />
    </td>
  </tr>
-  <% for(var i=0; i<32; i++){ %> <% if(data.X32.inputs.channels[i].name == "end"){break;} %>
+  <% for(var i=0; i<32; i++){ %> <% if(data.inputs.channels[i].name == "end"){break;} %>
  <tr>
    <td><%= i+1 %></td>
    <td>
-      <div class="color color-<%= data.X32.inputs.channels[i].color %>">
-        <%- data.X32.inputs.channels[i].name || i+1 %>
+      <div class="color color-<%= data.inputs.channels[i].color %>">
+        <%- data.inputs.channels[i].name || i+1 %>
      </div>
    </td>
-    <td><div class="fader-mute mute-<%=data.X32.inputs.channels[i].mute%>">M</div></td>
-    <td><%= formatAsDB(data.X32.inputs.channels[i].faderDB) %></td>
+    <td><div class="fader-mute mute-<%=data.inputs.channels[i].mute%>">M</div></td>
+    <td><%= formatAsDB(data.inputs.channels[i].faderDB) %></td>
    <td>
-      <% let style = `style=width:${Math.abs(data.X32.inputs.channels[i].meter - 10)}%`; %>
+      <% let style = `style=width:${Math.abs(data.inputs.channels[i].meter - 10)}%`; %>
      <div class="meter">
        <div class="meter-cover" <%= style %>></div>
      </div>
@@ -52,7 +52,7 @@
        type="range"
        min="0"
        max="100"
-        value="<%= data.X32.inputs.channels[i].fader*100 %>"
+        value="<%= data.inputs.channels[i].fader*100 %>"
        disabled />
    </td>
  </tr>
@@ -96,6 +96,8 @@ window.init = function init() {
    const deviceID = e.srcElement.id;
    if (e.srcElement.id !== 'device-list') {
      VIEW.switchDevice(deviceID);
+    } else {
+      VIEW.switchDevice(undefined);
    }
  };

@@ -130,22 +132,6 @@ 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,7 +78,10 @@ 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;
@@ -183,6 +186,15 @@ a {
 #device-settings #device-settings-rx-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 {
@@ -191,11 +203,20 @@ 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;
@@ -350,3 +371,20 @@ 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;
+}
@@ -2,7 +2,7 @@ const { v4: uuid } = require('uuid');
 const osc = require('osc');
 const net = require('net');
 const udp = require('dgram');
-
+const { Atem } = require('atem-connection');
 const PLUGINS = require('./plugins.js');
 const VIEW = require('./view.js');
 const SAVESLOTS = require('./saveSlots.js');
@@ -49,13 +49,16 @@ function registerDevice(newDevice, discoveryMethod) {
    localPort: newLocalPort,
    addresses: newDevice.addresses,
    data: {},
+    templates: {},
    fields: newDevice.fields || {},
    pinIndex: false,
    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);
    },
@@ -138,10 +141,16 @@ function initDeviceConnection(id) {
      } catch (err) {
        console.error(err);
      }
+      device.trafficSignal(device);
      device.lastMessage = Date.now();
    });
    device.send = (address, args) => {
-      device.connection.send({ address, args });
+      const addr = address;
+      const arg = args;
+      device.sendQueue.push({ address: addr, args: arg });
+    };
+    device.sendNow = (data) => {
+      device.connection.send(data);
    };
  } else if (plugins[type].config.connectionType === 'TCPsocket') {
    device.connection = new net.Socket();
@@ -166,10 +175,14 @@ 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') {
@@ -181,12 +194,16 @@ function initDeviceConnection(id) {
      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.connection.send(Buffer.from(data), device.remotePort, device.addresses[0], (err) => {
+      device.sendQueue.push(data);
+    };
+    device.sendNow = (data) => {
+      device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
        // console.log(err);
      });
    };
@@ -199,11 +216,33 @@ function initDeviceConnection(id) {
      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) => {};
+  } else if (plugins[type].config.connectionType === 'atem') {
+    device.connection = new Atem({
+      // this gets around the no workers nodejs error
+      disableMultithreaded: true,
+    });
+    device.connection.connect(device.addresses[0]);
+
+    device.connection.on('connected', () => {
+      infoUpdate(device, 'status', 'ok');
+      device.trafficSignal(device);
+      plugins[type].ready(device);
+    });
+
+    device.connection.on('stateChanged', (state, pathToChange) => {
+      device.lastMessage = Date.now();
+      plugins[type].data(device, {
+        pathToChange,
+        state,
+      });
+      infoUpdate(device, 'status', 'ok');
+    });
  }

  return true;
@@ -217,8 +256,14 @@ module.exports.deleteActive = function deleteActive() {
  );

  if (choice) {
-    if (device.plugin.connectionType === 'TCPsocket') {
+    if (device.plugin.config.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];
@@ -315,9 +360,27 @@ function heartbeat() {
      }
      d.lastHeartbeat = Date.now();
    }
+
+    if (d.sendQueue.length > 0 && d.sendNow) {
+      d.sendNow(d.sendQueue[0]);
+      d.sendQueue.shift();
+    }
  });
 }
-setInterval(heartbeat, 100);
+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);

 function isDeviceAlreadyAdded(newDevice) {
  let deviceAlreadyAdded = false;
@@ -5,6 +5,7 @@ const net = require('net');
 const os = require('os');
 const ip = require('ip');

+const { Netmask } = require('netmask');
 const DEVICE = require('./device.js');
 const PLUGINS = require('./plugins.js');

@@ -91,6 +92,8 @@ function searchAll() {
        searchUDP(pluginType, plugin.config);
      } else if (searchType === 'multicast') {
        searchMulticast(pluginType, plugin.config);
+      } else if (searchType === 'UDPScan') {
+        searchUDPScan(pluginType, plugin.config);
      }
    } catch (err) {
      console.error(`Unable to search for plugin ${pluginType}`);
@@ -167,6 +170,36 @@ function TCPtest(ipAddr, pluginType, pluginConfig) {
  });
 }

+function searchUDPScan(pluginType, pluginConfig) {
+  for (let i = 0; i < Object.keys(validInterfaces).length; i++) {
+    const interfaceID = Object.keys(validInterfaces)[i];
+    const interfaceObj = validInterfaces[interfaceID];
+    interfaceObj.forEach((netInterface) => {
+      const udpSocket = dgram.createSocket('udp4');
+      udpSocket.bind(pluginConfig.searchOptions.listenPort, netInterface.address);
+
+      udpSocket.on('message', (msg, info) => {
+        if (pluginConfig.searchOptions.validateResponse(msg, info, DEVICE.all)) {
+          udpSocket.close();
+          DEVICE.registerDevice(
+            {
+              type: pluginType,
+              defaultName: pluginConfig.defaultName,
+              port: pluginConfig.defaultPort,
+              addresses: [info.address],
+            },
+            'fromSearch'
+          );
+        }
+      });
+      const interfaceBlock = new Netmask(netInterface.cidr);
+      interfaceBlock.forEach((address, long, index) => {
+        udpSocket.send(pluginConfig.searchOptions.searchBuffer, pluginConfig.searchOptions.devicePort, address);
+      });
+    });
+  }
+}
+
 function searchUDP(pluginType, pluginConfig) {
  for (let i = 0; i < Object.keys(validInterfaces).length; i++) {
    const interfaceID = Object.keys(validInterfaces)[i];
@@ -21,23 +21,26 @@ function drawDeviceFrame(id) {

  const d = DEVICE.all[id];

-  let str = '<html><head>';
-  str += `<link href='./plugins/${d.type}/styles.css' rel='stylesheet' type='text/css'>`;
+  const str = `
+    <html>
+      <head>
+        <link href='./plugins/${d.type}/styles.css' rel='stylesheet' type='text/css'>

-  // scrollbar styles are inline to prevent the styles flickering in
-  str += '<style>';
-  str += '::-webkit-scrollbar {background-color: black;width: 12px;}';
-  str += '::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}';
-  str += '::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}';
-  str += '::-webkit-scrollbar-button {display:none;}';
-  str += 'body{visibility: hidden;}';
-  str += '</style>';
-  str += "<link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>";
-  str += '</head><body>';
-
-  str += generateBodyHTML(d);
-
-  str += '</body></html>';
+        <!--scrollbar styles are inline to prevent the styles flickering in-->
+        <style>
+            ::-webkit-scrollbar {background-color: black;width: 12px;}
+            ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}
+            ::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}
+            ::-webkit-scrollbar-button {display:none;}
+            body{visibility: hidden;}
+        </style>
+        <link href='src/assets/css/plugin_default.css' rel='stylesheet' type='text/css'>
+      </head>
+      <body>
+        ${generateBodyHTML(d)}
+      </body>
+    </html>
+  `;

  $deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
  $deviceDrawArea.contentWindow.document.open();
@@ -57,29 +60,34 @@ function drawDeviceFrame(id) {
 }

 function generateBodyHTML(d) {
-  let str = '';
-
  if (d.status === 'ok') {
    try {
-      str += PLUGINS.all[d.type].template({
+      return PLUGINS.all[d.type].template({
+        templates: d.templates,
        data: d.data,
        listName: d.displayName || d.defaultName,
      });
    } catch (err) {
      console.log(err);
-      str += '<h3>Plugin Template Error</h3>';
+      return '<h3>Plugin Template Error</h3>';
    }
  } else {
-    str += `<header><h1>${d.displayName || d.defaultName}</h1></header>`;
-    str += "<div class='not-responding'>";
-    str += `<h2><em>${d.type}</em> is not responding to requests for data.</h2>`;
-    str += `<h3>IP <em>${d.addresses[0]}</em></h3>`;
-    str += `<h3>Port <em>${d.remotePort}</em></h3>`;
-    str += '<hr></div>';
-    str += `<div class="device-info">${PLUGINS.all[d.type].info()}<div>`;
-  }
+    return `
+      <header>
+        <h1>${d.displayName || d.defaultName}</h1>
+      </header>

-  return str;
+      <div class='not-responding'>
+        <h2><em>${d.type}</em> is not responding to requests for data.</h2>
+        <h3>IP <em>${d.addresses[0]}</em></h3>
+        <h3>Port <em>${d.port}</em></h3>
+        <hr>
+      </div>
+      <div class="device-info">
+        ${PLUGINS.all[d.type].info()}
+      </div>
+    `;
+  }
 }

 module.exports.draw = function draw(device) {
@@ -114,8 +122,10 @@ module.exports.addDeviceToList = function addDeviceToList(device) {
    html += "<div class='status material-icons red'>clear</div>";
  }

-  html += `<div class='type'><img height='18px' src='plugins/${d.type}/icon.png'></div>`;
-  html += `<div class='name'>${d.displayName || d.defaultName}</div>`;
+  html += `
+    <div class='type'><img height='18px' src='plugins/${d.type}/icon.png'></div>
+    <div class='name'>${d.displayName || d.defaultName}</div>
+  `;

  const elem = document.getElementById(d.id);
  if (elem == null) {
@@ -152,6 +162,10 @@ 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;
  }

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

  if (!$deviceWrapper) {
-    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>`;
+    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>`;
    document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html);
  }

@@ -213,8 +230,8 @@ function updateFields() {
    const fields = activeDevice.plugin.config.fields;

    fields.forEach((field) => {
+      // generic input setup
      const $elem = document.createElement('input');
-      $elem.type = 'text';
      $elem.value = activeDevice.fields[field.key];
      $elem.name = field.key;
      $elem.onchange = function onchange(e) {
@@ -223,7 +240,9 @@ function updateFields() {
        saveAll();
      };

+      // type specific setup
      if (field.type === 'textinput') {
+        $elem.type = 'text';
        const rowHTML = `<tr><th>${field.label}:</th><td colspan="3" id="${field.key}"></td></tr>`;
        document.getElementById('device-settings-fields').insertAdjacentHTML('beforeend', rowHTML);
        document.getElementById(field.key).appendChild($elem);
@@ -310,6 +329,16 @@ 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>';