bad version num

version bump
correct a ton of path syntax
2026-07-26 09:18:39 +00:00 · 2022-05-07 01:28:14 -04:00 · 2022-05-07 01:27:46 -04:00 · 2022-05-07 01:27:37 -04:00 · 2022-05-06 23:28:53 -04:00 · 2022-03-01 23:27:54 -06:00
82 changed files with 6343 additions and 13395 deletions
@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['airbnb-base', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 13,
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 0,
+    'no-unused-vars': ['error', { args: 'none' }],
+    'no-console': 'off',
+    'no-alert': 'off',
+    'no-plusplus': 'off',
+    'import/extensions': 'off',
+    'prefer-destructuring': 'off',
+    'no-use-before-define': 'off',
+    'space-infix-ops': 'warn',
+    'no-bitwise': 'off',
+    'no-restricted-globals': 'off'
+  },
+};
@@ -1,4 +1,7 @@

 .DS_Store
 node_modules
-out/Cue View-darwin-x64
+.vscode
+/dist
+package-lock.json
+package-lock.json
@@ -0,0 +1,2 @@
+node_modules
+out
@@ -0,0 +1,7 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  bracketSameLine: true,
+};
@@ -1,35 +1,88 @@
 # 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)

-
-
-
 ## Features
+
 - Tons of supported equipment
 - Auto discover devices on the network
 - Live updating
 - Configurable layout

-
 ## Supported Devices
+
 - QLab 4
 - ETC Eos Consoles
 - Watchout
 - PJLink Projectors
 - X32 Audio Consoles
 - XAir Audio Consoles
-
+- Art-Net Universes
+- sACN Universes

 #### Future Devices
- Spikemark
+
+- Spikemark (not possible until additional OSC methods are added)
 - ATEM Video Mixers
- Art-Net, sACN Universes
 - Epson Pro series Projectors
 - DiGiCo Consoles
 - d&b DS100, amps
+- Hog

+# Plugins

-## Known Issues
- QLab Cue Carts are not supported yet.
+A Cue View "plugin" is a system for communicating with a type of device, for example QLab or Watchout. It consists of a JS file that describes how to communicate with the device, an HTML template for displaying the device's data, and a CSS file to style the HTML.
+
+### plugin.js
+
+```js
+exports.defaultName = 'Example Plugin';
+exports.connectionType = 'osc' or 'TCPsocket' or 'UDPsocket'
+exports.searchOptions = {
+	type: 'Bonjour',
+	bonjourNane: 'device'
+}
+exports.searchOptions = {
+	type: 'UDPsocket',
+	searchBuffer: Buffer.from([0x00, 0x01, 0x02]),
+	devicePort: 1234, // port the device receives messages on
+	listenPort: 2345, // port Cue View should listen for responses on
+	validateResponse: function(msg, info){
+		// if this function returns true, Cue View adds the responding IP address to the list
+	}
+}
+exports.searchOptions = {
+	type: 'TCPport',
+	searchBuffer: Buffer.from('are you there'),
+	testPort: 1234, // port the device receives messages on
+	validateResponse: function(msg, info){
+		// if this function returns true, Cue View adds the responding IP address to the list
+	}
+}
+exports.defaultPort = 1234; // only available for TCPsocket and UDPsocket devices
+exports.heartbeatInterval = 5000; // how frequently, in ms, to send the heartbeat message
+
+exports.ready = function (device){
+	// runs when Cue View identifies a new device. send all data requests here
+	device.send(); // method for sending a message to the device requesting more info. arguments change based on connectionType
+
+	device.send(`/this/is/osc`); // osc
+	device.send(`/this/is/osc`, [{ type: 'i', value: 20 }, { type: 's', value: 'foo' }]); // osc with arguments
+
+	device.send(`hello`); // UDPsocket and TCPsocket
+
+}
+
+exports.data = function (device, buf){
+	// runs when Cue View receives a message from the device.
+	device.draw(); // flag for QLab to update the device's view
+	device.send();
+}
+
+exports.heartbeat = function (device){
+	// runs every n milliseconds, defined by exports.heartbeatInterval
+	devide.send();
+}
+```
@@ -1,73 +1,101 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
    <title>Cue View</title>
-    <link rel="stylesheet" href="src/index.css">
-
+    <link rel="stylesheet" href="src/index.css" />
  </head>
  <body>
-
-
    <div id="main">
-
-        <div class="col" id="device-list-col">
-
-            <div id="view-buttons-bar">
-                <button id="save-slot-1" class="save-slot" title="Window arrangement 1">1</button>
-                <button id="save-slot-2" class="save-slot" title="Window arrangement 2">2</button>
-                <button id="save-slot-3" class="save-slot" title="Window arrangement 3">3</button>
-                
-            </div>
-
-            <div id="device-list">
-              <h3 class="init">Click the Search button to find devices on the network.</h3>
-            </div>
-
-            <div id="device-tools">
-                <select class="left button" id="add-device-button" title="Add Device..."></select>
-                <button class="left" id="search-button" title="Search network for devices"><img src="src/img/outline_search_white_18dp.png"></button>
-                <button class="left" id="refresh-device-button" title="Refresh Device" disabled><img src="src/img/outline_refresh_white_18dp.png"></button>
-            </div>
-
-
-
-            <div id="device-settings">
-                <table id="device-settings-table">
-                    <tr>
-                        <th>Name:</th>
-                        <td colspan="3"><input id="device-settings-name" type="text" maxlength="30"></td>
-                    </tr>
-                    <tr>
-                        <th>Type:</th>
-                        <td colspan="3"><select id="device-settings-plugin-dropdown"></select></td>
-                    </tr>
-                    <tr>
-                        <th>Addr:</th>
-                        <td colspan="3"><input id="device-settings-ip" type="text" maxlength="30"></td>
-                    </tr>
-                    <tr>
-                        <th>Port:</th>
-                        <td><input id="device-settings-port" type="number" value="53000" maxlength="5"></td>
-                        <th>Pin:</th>
-                        <td><input id="device-settings-pin" type="checkbox"></td>
-                </table>
-                <h3>No Device Selected</h3>
-
-            </div>
-
-
+      <div class="col" id="device-list-col">
+        <div id="view-buttons-bar">
+          <button
+            id="save-slot-1"
+            class="save-slot"
+            title="Window arrangement 1">
+            1
+          </button>
+          <button
+            id="save-slot-2"
+            class="save-slot"
+            title="Window arrangement 2">
+            2
+          </button>
+          <button
+            id="save-slot-3"
+            class="save-slot"
+            title="Window arrangement 3">
+            3
+          </button>
        </div>

-        <div id="all-devices">
-
-            
-
+        <div id="device-list">
+          <h3 class="init">
+            Click the Search button to find devices on the network.
+          </h3>
        </div>

+        <div id="device-tools">
+          <select
+            class="left button"
+            id="add-device-button"
+            title="Add Device..."></select>
+          <button
+            class="left"
+            id="search-button"
+            title="Search network for devices">
+            <img src="src/img/outline_search_white_18dp.png" />
+          </button>
+          <button
+            class="left"
+            id="refresh-device-button"
+            title="Refresh Device"
+            disabled>
+            <img src="src/img/outline_refresh_white_18dp.png" />
+          </button>
+        </div>
+
+        <div id="device-settings">
+          <table id="device-settings-table">
+            <tr>
+              <th>Name:</th>
+              <td colspan="3">
+                <input id="device-settings-name" type="text" maxlength="30" />
+              </td>
+            </tr>
+            <tr>
+              <th>Type:</th>
+              <td colspan="3">
+                <select id="device-settings-plugin-dropdown"></select>
+              </td>
+            </tr>
+            <tr>
+              <th>Addr:</th>
+              <td colspan="3">
+                <input id="device-settings-ip" type="text" maxlength="30" />
+              </td>
+            </tr>
+            <tr>
+              <th>Port:</th>
+              <td>
+                <input
+                  id="device-settings-port"
+                  type="number"
+                  value="53000"
+                  maxlength="5" />
+              </td>
+              <th>Pin:</th>
+              <td><input id="device-settings-pin" type="checkbox" /></td>
+            </tr>
+          </table>
+
+          <h3>No Device Selected</h3>
+        </div>
+      </div>
+
+      <div id="all-devices"></div>
    </div>

    <script src="src/index.js"></script>
-
  </body>
 </html>
@@ -1,154 +1,61 @@
-const { app, BrowserWindow, Menu } = require('electron');
+const { app, BrowserWindow, Menu, ipcMain, nativeTheme } = require('electron');
 const path = require('path');

-// Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
-  app.quit();
-}
-
-if (require('electron-squirrel-startup')) {
-  app.quit();
-}
-
-
-var menu;
+const isMac = process.platform === 'darwin';
+let menuObj;
 let mainWindow;

-const createWindow = () => {
-  
-  mainWindow = new BrowserWindow({
-    width: 1500,
-    height: 900,
-    titleBarStyle: 'hiddenInset',
-    transparent: true,
-    frame: false,
-    show: false,
-    //backgroundColor: "#333333",
-    vibrancy: "window",
-    visualEffectState: "followWindow",
-    webPreferences: {
-      //enableRemoteModule: true,
-      contextIsolation: false,
-      nodeIntegration: true,
-      preload: path.join(__dirname, 'preload.js')
-    }
-  });
-
-  mainWindow.loadFile('index.html');
-
-  mainWindow.on('ready-to-show', () => {
-      mainWindow.show();
-  });
-
-  if(process.defaultApp){
-    mainWindow.webContents.openDevTools();
-  }
-
-
-  menu = Menu.buildFromTemplate(menuTemplate);
-  Menu.setApplicationMenu(menu);
-
-};
-
-
-
-app.whenReady().then(() => {
-  createWindow()
-
-  app.on('activate', function () {
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
-})
-
-
-
-
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
-
-
-
-const { ipcMain } = require('electron')
-ipcMain.on('enableDeviceDropdown', (event, arg) => {
-  menu.getMenuItemById('devicePin').enabled = true;
-  menu.getMenuItemById('deviceDelete').enabled = true;
-});
-ipcMain.on('disableDeviceDropdown', (event, arg) => {
-  menu.getMenuItemById('devicePin').enabled = false;
-  menu.getMenuItemById('deviceDelete').enabled = false;
-});
-
-ipcMain.on('enableSearchAll', (event, arg) => {
-  menu.getMenuItemById('deviceSearch').enabled = true;
-});
-ipcMain.on('disableSearchAll', (event, arg) => {
-  menu.getMenuItemById('deviceSearch').enabled = false;
-});
-
-ipcMain.on('setDevicePin', function(event, arg){
-  menu.getMenuItemById('devicePin').checked = arg;
-})
-
-const isMac = process.platform === 'darwin'
-
 const menuTemplate = [
-  { role: 'appMenu' },
+  ...(isMac ? [{ role: 'appMenu' }] : []),
  {
-    label: "File",
+    label: 'File',
    submenu: [
      {
-        label: "Clear Saved Data",
-        id: "resetViews",
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("resetViews");
-          
+        label: 'Clear Saved Data',
+        id: 'resetViews',
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('resetViews');
        }
      },
      {
-        label: "Reload App",
-        role: "reload"
+        label: 'Reload App',
+        role: 'reload'
      },
-      {
-        type: "separator"
-      },
-      isMac ? { role: 'close' } : { role: 'quit' },
+      { type: 'separator' },
+      ...(isMac ? [{ role: 'close' }] : [{ role: 'quit' }])
    ]
  },
  { role: 'editMenu' },
  {
-    label: "View",
+    label: 'View',
    submenu: [
      { role: 'togglefullscreen' },
      { type: 'separator' },
      {
-        label: "Arrangement 1",
-        accelerator: "CommandOrControl+1",
-        id: "window1",
+        label: 'Arrangement 1',
+        accelerator: 'CommandOrControl+1',
+        id: 'window1',
        enabled: true,
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("doSlots1");
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSlots1');
        }
      },
      {
-        label: "Arrangement 2",
-        accelerator: "CommandOrControl+2",
-        id: "window2",
+        label: 'Arrangement 2',
+        accelerator: 'CommandOrControl+2',
+        id: 'window2',
        enabled: true,
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("doSlots2");
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSlots2');
        }
      },
      {
-        label: "Arrangement 3",
-        accelerator: "CommandOrControl+3",
-        id: "window3",
+        label: 'Arrangement 3',
+        accelerator: 'CommandOrControl+3',
+        id: 'window3',
        enabled: true,
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("doSlots3");
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSlots3');
        }
      },
      { type: 'separator' },
@@ -156,40 +63,128 @@ const menuTemplate = [
    ]
  },
  {
-    label: "Device",
+    label: 'Device',
    submenu: [
      {
-        label: "Search for Devices",
-        accelerator: "CommandOrControl+F",
-        id: "deviceSearch",
+        label: 'Search for Devices',
+        accelerator: 'CommandOrControl+F',
+        id: 'deviceSearch',
        enabled: true,
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("doSearch");
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSearch');
        }
      },
+      { type: 'separator' },
      {
-        type: "separator"
-      },
-      {
-        label: "Pinned",
-        type: "checkbox",
+        label: 'Pinned',
+        type: 'checkbox',
        checked: true,
-        accelerator: "CommandOrControl+P",
-        id: "devicePin",
+        accelerator: 'CommandOrControl+P',
+        id: 'devicePin',
        enabled: false,
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("setActiveDevicePinned", menuItem.checked);
+        click (menuItem, window, event) {
+          mainWindow.webContents.send(
+            'setActiveDevicePinned',
+            menuItem.checked
+          );
        }
      },
      {
-        label: "Delete",
-        accelerator: "CommandOrControl+Backspace",
-        id: "deviceDelete",
+        label: 'Delete',
+        accelerator: 'CommandOrControl+Backspace',
+        id: 'deviceDelete',
        enabled: false,
-        click: function(menuItem, window, event){
-          mainWindow.webContents.send("doDelete");
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doDelete');
        }
      }
    ]
  }
-]
+];
+
+const windowMac = {
+  width: 1500,
+    height: 900,
+    titleBarStyle: 'hiddenInset',
+    transparent: true,
+    frame: false,
+    show: false,
+    // backgroundColor: "#333333",
+    vibrancy: 'window',
+    visualEffectState: 'followWindow',
+    webPreferences: {
+      contextIsolation: false,
+      nodeIntegration: true,
+      preload: path.join(__dirname, 'preload.js'),
+    },
+}
+
+const windowWin = {
+  width: 1500,
+  height: 900,
+  backgroundColor: "#333333",
+  webPreferences: {
+    contextIsolation: false,
+    nodeIntegration: true,
+    preload: path.join(__dirname, 'preload.js'),
+  },
+}
+
+const createWindow = () => {
+
+  nativeTheme.themeSource = 'dark';
+  
+  if(isMac){
+    mainWindow = new BrowserWindow(windowMac);
+  }else{
+    mainWindow = new BrowserWindow(windowWin);
+  }
+
+  mainWindow.loadFile('index.html');
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show();
+  });
+
+  if (process.defaultApp) {
+    mainWindow.webContents.openDevTools();
+  }
+
+  menuObj = Menu.buildFromTemplate(menuTemplate);
+  Menu.setApplicationMenu(menuObj);
+  
+};
+
+app.whenReady().then(() => {
+  createWindow();
+  
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+ipcMain.on('enableDeviceDropdown', (event, arg) => {
+  menuObj.getMenuItemById('devicePin').enabled = true;
+  menuObj.getMenuItemById('deviceDelete').enabled = true;
+});
+ipcMain.on('disableDeviceDropdown', (event, arg) => {
+  menuObj.getMenuItemById('devicePin').enabled = false;
+  menuObj.getMenuItemById('deviceDelete').enabled = false;
+});
+
+ipcMain.on('enableSearchAll', (event, arg) => {
+  menuObj.getMenuItemById('deviceSearch').enabled = true;
+});
+ipcMain.on('disableSearchAll', (event, arg) => {
+  menuObj.getMenuItemById('deviceSearch').enabled = false;
+});
+
+ipcMain.on('setDevicePin', (event, arg) => {
+  menuObj.getMenuItemById('devicePin').checked = arg;
+});
@@ -1,63 +1,53 @@
 {
-  "name": "Cue View",
-  "version": "0.9.2",
+  "name": "cue-view",
+  "productName": "Cue View",
+  "version": "0.9.6-pre",
  "description": "A dashboard for everything in your show",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make"
+    "start": "electron .",
+    "build": "electron-builder -m -w -l",
+    "buildARM": "electron-builder -l --arm64"
  },
-  "author": "Stage Hacks LLC",
+  "author": "alec@stagehacks.com",
  "license": "CC BY-SA 4.0",
+  "homepage": "https://github.com/stagehacks/Cue-View",
+  "repository": "https://github.com/stagehacks/Cue-View",
  "devDependencies": {
-    "@electron-forge/cli": "^6.0.0-beta.61",
-    "@electron-forge/maker-deb": "^6.0.0-beta.61",
-    "@electron-forge/maker-rpm": "^6.0.0-beta.61",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.61",
-    "@electron-forge/maker-zip": "^6.0.0-beta.61",
-    "electron": "^15.2.0"
+    "electron": "^15.2.0",
+    "eslint": "^8.9.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.4",
+    "prettier": "^2.5.1"
  },
  "dependencies": {
    "bonjour": "^3.5.0",
-    "ejs": "^3.1.5",
-    "electron-reload": "^1.5.0",
-    "electron-squirrel-startup": "^1.0.0",
    "lodash": "^4.17.20",
    "md5": "^2.3.0",
-    "netmask": "^1.0.6",
+    "netmask": "^2.0.2",
    "osc": "^2.4.1",
    "uuid": "^8.3.2"
  },
-  "config": {
-    "forge": {
-      "packagerConfig": {
-        "icon": "./src/img/icon.icns"
-      },
-      "makers": [
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "name": "Cue View",
-            "iconUrl": "./src/img/win-icon.ico"
-          }
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
-        }
-      ]
+  "build": {
+    "appId": "com.electron.cueview",
+    "icon": "./src/img/",
+    "artifactName": "${productName} ${os} v${version}.${ext}",
+    "mac": {
+      "target": "zip",
+      "category": "Utilities",
+      "icon": "./src/img/icon.icns",
+      "electronLanguages": ["en"]
+    },
+    "win": {
+      "target": "portable",
+      "icon": "./src/img/icon.ico"
+    },
+    "linux": {
+      "target": "deb",
+      "maintainer": "alec@stagehacks.com",
+      "category": "Utility"
    }
  }
 }
@@ -0,0 +1,2 @@
+<p><em>Art-Net</em> requires no configuration.</p>
+<p>Art-Net™ Designed by and Copyright Artistic Licence Holdings Ltd</p>
@@ -0,0 +1,119 @@
+const _ = require('lodash');
+
+exports.defaultName = "Art-Net";
+exports.connectionType = 'UDPsocket';
+exports.heartbeatInterval = 10000;
+exports.searchOptions = {
+  type: 'UDPsocket',
+  searchBuffer: Buffer.from([0x00]),
+  devicePort: 6454,
+  listenPort: 6454,
+  validateResponse (msg, info, devices) {
+    return msg.toString('utf8', 0, 7) === "Art-Net";
+  }
+};
+exports.defaultPort = 6454;
+
+exports.ready = function ready(device) {
+  const d = device;
+  d.data.universes = {};
+  d.data.orderedUniverses = [];
+
+};
+
+exports.data = function data(device, buf) {
+  if(buf.length < 18){
+    return
+  }
+  const univ = buf.readUInt8(14);
+  const d = device;
+  let u = d.data.universes[univ];
+
+  if(!u){
+    d.data.universes[univ] = {};
+    u = d.data.universes[univ];
+  }
+
+  u.sequence = buf.readUInt8(12);
+  u.net = buf.readUInt8(15);
+  u.opCode = buf.readUInt8(9);
+  u.version = buf.readUInt16BE(10);
+  u.slots = Array.prototype.slice.call(buf, 18);
+  d.data.ip = d.addresses[0];
+
+  if(!_.includes(d.data.orderedUniverses, univ)){
+    d.data.orderedUniverses.push(univ);
+    d.data.orderedUniverses.sort();
+    u.slotElems = [];
+    u.slotElemsSet = false;
+
+    d.draw();
+    updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+
+  }
+
+  device.update("universeData", {
+    u: univ,
+    universe: u
+  });
+
+
+};
+
+
+exports.heartbeat = function heartbeat(device) {
+  
+};
+
+
+
+let lastUpdate = Date.now();
+exports.update = function update(device, document, updateType, updateData){
+
+  const data = updateData;
+  const doc = document;
+
+  if(updateType === "universeData" && data.universe){
+
+    if(Date.now() - lastUpdate > 1000){
+      lastUpdate = Date.now();
+      updateElementsCache(device, device.data.universes, device.data.orderedUniverses);
+    }
+
+    const $elem = doc.getElementById(`universe-${data.u}`);
+
+    if($elem && data.universe.slotElemsSet){
+
+      for(let i = 0; i < 512; i++){
+        data.universe.slotElems[i].innerText = data.universe.slots[i];
+      }
+
+      doc.getElementById(`universe-${data.u}-sequence`).innerText = data.universe.sequence;
+
+
+    }else{
+      device.draw();
+      updateElementsCache(device, device.data.universes, device.data.orderedUniverses);
+    }
+
+  }else if(updateType === "elementCache"){
+
+    data.orderedUniverses.forEach(univ => { 
+      for(let i = 0; i < 512; i++){
+        data.universes[univ].slotElems[i] = doc.getElementById(`${univ}-${i}`);
+      }
+      data.universes[univ].slotElemsSet = true;
+    });
+
+  }
+  
+
+}
+
+function updateElementsCache(device, univ, ordered){
+  device.update("elementCache", {
+    universes: univ,
+    orderedUniverses: ordered
+  });
+}
+
@@ -0,0 +1,29 @@
+table {
+  margin-bottom: 50px;
+  background-color: #333;
+}
+td,
+th {
+  width: 35px;
+}
+td {
+  background-color: black;
+  text-align: center;
+  border-radius: 3px;
+  color: white;
+  font-size: 13px;
+}
+th {
+  background-color: #222;
+  color: #ccc;
+  font-size: 11px;
+}
+td.data {
+  padding: 7px;
+  font-size: 12px;
+  text-align: left;
+}
+td.data em {
+  font-size: 14px;
+  color: #008bd2;
+}
@@ -0,0 +1,64 @@
+<header>
+  <h1><%= data.source %> Art-Net</h1>
+</header>
+
+
+<div id="universes">
+<% data.orderedUniverses.forEach(univ => { 
+  let universe = data.universes[univ];
+%>
+
+  <table id="universe-<%= univ %>">
+  <tr>
+    <td class="data" colspan="2">
+      Universe
+      <br><em><%= univ %></em>
+    </td>
+    <td class="data" colspan="2">
+      Sub-Net
+      <br><em><%= universe.net %></em>
+    </td>
+    <td class="data" colspan="2">
+      Sequence
+      <br><em id="universe-<%= univ %>-sequence"><%= universe.sequence %></em>
+    </td>
+    <td class="data" colspan="2">
+      OpCode
+      <br><em><%= universe.opCode %></em>
+    </td>
+    <td class="data" colspan="2">
+      Version
+      <br><em><%= universe.version %></em>
+    </td>
+    <td class="data" colspan="4">
+      IP
+      <br><em><%= data.ip %></em>
+    </td>
+    <td class="data" colspan="3"></td>
+
+  </tr>
+
+  <tr>
+    <th></th>
+    <% for(col=1; col<=16; col++){ %>
+      <th><%= col %></th>
+    <% } %>
+  </tr>
+
+  <% let slot = 0; %>
+  <% for(row=0; row<32; row++){ %>
+    <tr>
+      <th><%= row*16+1 %></th>
+    <% for(col=0; col<16; col++){ %>
+      <% slot++%>
+      <td id="<%= univ %>-<%= row*16+col %>" title="<%= univ %>/<%= slot %>"><%= universe.slots[slot-1] %></td>
+    <% } %>
+    </tr>
+  <% } %>
+
+  
+</table>
+
+<% }); %>
+
+</div>
@@ -0,0 +1,83 @@
+<tbody id="<%= q[0].uid %>">
+
+<% for(var partNumber in q){ %>
+
+	<% var part = q[partNumber] %>
+
+
+	<% if(part.scene.length>0 && partNumber==0){ %>
+	<tr>
+		<td></td>
+		<td colspan="12" class="scene"><hr><span><%= part.scene %></span></td>
+	</tr>
+	<% } %>
+
+	<% if(isActive){ %>
+	<tr class="active-cue scroll-position">
+<% }else{ %>
+	<tr >
+<% } %>
+
+	<% if(partNumber!=0){ %>
+		<td class="num" style="padding-left: 20px;"><div>P<%= partNumber %></div></td>
+	<% }else{ %>
+		<td class="num"><div><%= cueNumber %></div></td>
+	<% } %>
+
+	<% if(partNumber!=0 || part.partcount==0){ %>
+
+		<!-- Int Up/Int Down -->
+		<% if(part.uptimeduration == part.downtimeduration || part.downtimeduration==-1){ %>
+			<td class="black" colspan="2"><%= prettyDuration(part.uptimedelay) || "" %><%= prettyDuration(part.uptimeduration, true) %></td>
+		<% }else{ %>
+			<td class="black"><%= prettyDuration(part.uptimedelay) || "" %><%= prettyDuration(part.uptimeduration, true) %></td>
+			<td class="black "><%= prettyDuration(part.downtimeduration, true) %></td>
+		<% } %>
+
+		<td class="black hide-medium"><%= prettyDuration(part.focustimeduration, true) %></td>
+		<td class="black hide-medium"><%= prettyDuration(part.colortimeduration, true) %></td>
+		<td class="black hide-medium"><%= prettyDuration(part.beamtimeduration, true) %></td>
+		<td class="hide-small"><%= prettyDuration(part.duration) %></td>
+
+	<% }else{ %>
+		<td class="black" colspan="2"></td>
+		<td class="black hide-medium"></td>
+		<td class="black hide-medium"></td>
+		<td class="black hide-medium"></td>
+		<td class="hide-small"></td>
+
+	<% } %>
+
+	<td class="black hide-small"><%= part.mark %></td>
+	<td class="black hide-small"><%= part.block %></td>
+	<td class="black hide-small"><%= part.assert %></td>
+	<td class="black hide-small">
+		<%= (part.follow>=0)? "F"+prettyDuration(part.follow) : "" %>
+		<%= (part.hang>=0)? "H"+prettyDuration(part.hang) : "" %>
+	</td>
+	<td class="black" style="text-align: left">
+		<%= (partNumber==0 ? "": "&nbsp;&nbsp;&nbsp;") %>
+		<%= part.label %>
+	</td>
+	<td class="black hide-medium"><%= part.extlinks %></td>
+
+</tr>
+
+
+<% } %>
+
+</tbody>
+
+<%
+function prettyDuration(milliseconds, box){
+	if(milliseconds==-1){
+		return "";
+	}
+	var num = Math.round(milliseconds/100)/10;
+	if(box){
+		return "<div class='time'>"+num+"</div>";
+	}
+	return num;
+	
+}
+%>
@@ -1,69 +0,0 @@
-table{
-	background-color: #141414;
-	border: #404040 1px solid;
-	border-radius: 4px;
-	color: #a59baa;
-}
-th{
-	font-size: 14px;
-	font-weight: normal;
-	padding: 5px;
-}
-td{
-	text-align: center;
-	padding: 6px;
-}
-td:first-child{
-	text-align: left;
-}
-td.black{
-	background-color: black;
-	border-right: #212021 1px solid;
-}
-td.num{
-	color: white;
-	font-weight: 600;
-	font-size: 16px;
-}
-.scene{
-	background-color: black;
-	border-top: #141414 2px solid;
-	border-bottom: #141414 2px solid;
-}
-.scene hr{
-	border: #001f10 4px solid;
-}
-.scene span{
-	display: table;
-	margin: 0px auto;
-	margin-top: -25px;
-	padding: 4px;
-	background-color: black;
-	font-weight: bold;
-	font-size: 14px;
-}
-.time{
-	border: #2f2b35 2px solid;
-	border-radius: 5px;
-}
-tr.active-cue{
-	color: #d49800;
-}
-	tr.active-cue td.num{
-		color: #d49800;
-	}
-	tr.active-cue .time{
-		border-color: #d49800;
-	}
-
-	
-@media screen and (min-width: 0px) and (max-width: 750px) {
-	.hide-medium{
-		display: none;
-	}
-}
-@media screen and (min-width: 0px) and (max-width: 550px) {
-	.hide-small{
-		display: none;
-	}
-}
@@ -1,119 +0,0 @@
-<header>
-	<h1><%= listName  %></h1>
-	<h2><%= data.version  %></h2>
-</header>
-
-
-<% for(var i in data.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>
-
-		<% var cues = Object.keys(data.cuelists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
-
-		<% for(var j=0; j<cues.length; j++){ %>
-			<% var q = data.cuelists[i][cues[j]] %>
-			
-			<% for(var partNumber in q){ %>
-
-				<% var p = q[partNumber] %>
-
-
-				<% if(p.scene.length>0 && partNumber==0){ %>
-				<tr>
-					<td></td>
-					<td colspan="12" class="scene"><hr><span><%= p.scene %></span></td>
-				</tr>
-				<% } %>
-
-				<% if(cues[j]==data.activeCue+""){ %>
-					<tr class="active-cue">
-				<% }else{ %>
-					<tr>
-				<% } %>
-
-					<% if(partNumber!=0){ %>
-						<td class="num">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;P<%= partNumber %></td>
-					<% }else{ %>
-						<td class="num">&nbsp;<%= cues[j] %></td>
-					<% } %>
-
-					<% if(partNumber!=0 || p.partcount==0){ %>
-
-						<!-- Int Up/Int Down -->
-						<% if(p.uptimeduration == p.downtimeduration || p.downtimeduration==-1){ %>
-							<td class="black" colspan="2"><%- prettyDuration(p.uptimedelay) || "" %><%- prettyDuration(p.uptimeduration, true) %></td>
-						<% }else{ %>
-							<td class="black"><%- prettyDuration(p.uptimedelay) || "" %><%- prettyDuration(p.uptimeduration, true) %></td>
-							<td class="black "><%- prettyDuration(p.downtimeduration, true) %></td>
-						<% } %>
-
-						<td class="black hide-medium"><%- prettyDuration(p.focustimeduration, true) %></td>
-						<td class="black hide-medium"><%- prettyDuration(p.colortimeduration, true) %></td>
-						<td class="black hide-medium"><%- prettyDuration(p.beamtimeduration, true) %></td>
-						<td class="hide-small"><%= prettyDuration(p.duration) %></td>
-
-					<% }else{ %>
-						<td class="black" colspan="2"></td>
-						<td class="black hide-medium"></td>
-						<td class="black hide-medium"></td>
-						<td class="black hide-medium"></td>
-						<td class="hide-small"></td>
-
-					<% } %>
-
-					<td class="black hide-small"><%= p.mark %></td>
-					<td class="black hide-small"><%= p.block %></td>
-					<td class="black hide-small"><%= p.assert %></td>
-					<td class="black hide-small">
-						<%= (p.follow>=0)? "F"+prettyDuration(p.follow) : "" %>
-						<%= (p.hang>=0)? "H"+prettyDuration(p.hang) : "" %>
-					</td>
-					<td class="black" style="text-align: left">
-						<%- (partNumber==0 ? "": "&nbsp;&nbsp;&nbsp;") %>
-						<%= p.label %>
-					</td>
-					<td class="black hide-medium"><%= p.extlinks %></td>
-				</tr>
-
-			<% } %>
-
-		<% } %>
-	</table>
-
-<% } %>
-
-<script>
-	var $scrollTo = document.getElementsByClassName("active-cue");
-	if($scrollTo.length==1){
-		window.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
-	}
-</script>
-
-<%
-	function prettyDuration(milliseconds, box){
-		if(milliseconds==-1){
-			return "";
-		}
-		var num = Math.round(milliseconds/100)/10;
-		if(box){
-			return "<div class='time'>"+num+"</div>";
-		}
-		return num;
-		
-	}
-%>
@@ -1,115 +0,0 @@
-exports.defaultName = "ETC Eos";
-exports.connectionType = "osc";
-exports.searchOptions = {
-	type: "TCPport",
-	searchBuffer: Buffer.from("\xc0/eos/ping\x00\x00\x2c\x00\x00\x00\xc0", 'ascii'),
-	testPort: 3032,
-	validateResponse: function(msg, info){
-		return (msg.toString().indexOf("/eos/out"));
-	}
-}
-exports.defaultPort = 3032;
-
-//"\xc0/eos/ping\x00\x00\x2c\x00\x00\x00\xc0"
-
-
-exports.ready = function(device){
-	device.send("/eos/get/cuelist/count");
-	device.send("/eos/get/version");
-	device.send("/eos/subscribe", [{type: "i", value: 1}]);
-}
-
-exports.data = function(device, osc){
-	var address = osc.address;
-	var p = osc.address.split("/");
-	p.shift();
-
-	if(p[1]=="out" && p[2]=="show" && p[3]=="name"){
-		device.data.showName = osc.args[0];
-		device.data.cuelists = {};
-		this.deviceInfoUpdate(device, "defaultName", osc.args[0]);
-	}else if(osc.address=="/eos/out/get/cuelist/count"){
-		for(var i=0; i<osc.args[0]; i++){
-			device.send("/eos/get/cuelist/index/"+i);
-		}
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cuelist" && p[5]=="list"){
-		device.data.cuelists[p[4]] = {};
-		device.send("/eos/get/cue/"+p[4]+"/count");
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p[5]=="count"){
-		for(var i=0; i<osc.args[0]; i++){
-			device.send("/eos/get/cue/"+p[4]+"/index/"+i);
-		}
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p[7]=="list"){
-		this.deviceInfoUpdate(device, "status", "ok");
-		if(device.data.cuelists[p[4]][p[5]]==undefined){
-			device.data.cuelists[p[4]][p[5]] = {};
-		}
-		device.data.cuelists[p[4]][p[5]][p[6]] = {
-			uid: osc.args[1],
-			label: osc.args[2],
-			uptimeduration: osc.args[3],
-			uptimedelay: osc.args[4],
-			downtimeduration: osc.args[5],
-			downtimedelay: osc.args[6],
-			focustimeduration: osc.args[7],
-			focustimedelay: osc.args[8],
-			colortimeduration: osc.args[9],
-			colortimedelay: osc.args[10],
-			beamtimeduration: osc.args[11],
-			beamtimedelay: osc.args[12],
-			mark: osc.args[16],
-			block: osc.args[17],
-			assert: osc.args[18],
-			follow: osc.args[20],
-			hang: osc.args[21],
-			partcount: osc.args[26],
-			scene: osc.args[28],
-			duration: Math.max(osc.args[3], osc.args[5], osc.args[7], osc.args[9], osc.args[11])
-		};
-
-		//console.log(p[4]+" "+p[5]+" "+p[6]+" updated")
-		device.draw();
-
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p.length==6){
-
-		//console.log("cue "+p[4]+" "+p[5]+" deleted")
-
-
-		// There's no OSC notification of the deletion of a part. It just tells you to update the parent cue and remaining children.
-		// So: we should fetch all the parts of a cue somehow every time there's an update to a cue.
-
-
-
-		delete device.data.cuelists[p[4]][p[5]];
-		device.draw();
-
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p[7]=="actions"){
-		if(osc.args.length==3){
-			device.data.cuelists[p[4]][p[5]][0].extlinks = osc.args[2];
-		}
-	}else if(p[1]=="out" && p[2]=="event" && p[3]=="cue" && p[6]=="fire"){
-		// explore replacing this with /eos/out/active/cue
-		device.data.activeCue = p[5];
-		device.draw();
-	}else if(p[1]=="out" && p[2]=="notify" && p[3]=="cue"){
-		var cueList = p[4];
-		var listIndex = p[6];
-		var listCount = p[7];
-		var cueNumber = osc.args[1];
-		
-		device.send("/eos/get/cue/"+cueList+"/"+cueNumber);
-		//console.log("SENT /eos/get/cue/"+cueList+"/"+cueNumber);
-	}else if(p[2]=="cmd" || p[2]=="ping" || p[2]=="user" || p[2]=="softkey"){
-
-	}else if(p[3]=="version"){
-		device.data.version = osc.args[0];
-
-	}else{
-		//console.log(osc);
-	}
-	//console.log(p)
-}
-exports.heartbeat = function(device){
-	device.send("/eos/ping");
-}
-
@@ -0,0 +1,15 @@
+<h2>Connection Requirements</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>Third Party OSC</em></li>
+</ul>
+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>
+<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>
+</ul>
@@ -0,0 +1,181 @@
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+
+exports.defaultName = 'ETC Eos';
+exports.connectionType = 'osc';
+exports.searchOptions = {
+  type: 'TCPport',
+  searchBuffer: Buffer.from(
+    '\xc0/eos/ping\x00\x00\x2c\x00\x00\x00\xc0',
+    'ascii'
+  ),
+  testPort: 3032,
+  validateResponse (msg, info) {
+    return msg.toString().indexOf('/eos/out');
+  },
+};
+exports.defaultPort = 3037;
+
+
+exports.ready = function ready(device) {
+  device.send('/eos/get/cuelist/count');
+  device.send('/eos/get/version');
+  device.send('/eos/subscribe', [{ type: 'i', value: 1 }]);
+};
+
+exports.data = function data(device, osc) {
+  const p = osc.address.split('/');
+  const d = device;
+  p.shift();
+
+  // console.log(osc.address)
+
+  if (match(p, ['eos','out','show','name'])) {
+    d.data.showName = osc.args[0];
+    d.data.cuelists = {};
+    this.deviceInfoUpdate(device, 'defaultName', osc.args[0]);
+
+
+  } else if (match(p, ['eos','out','get','cuelist','count'])) {
+    for (let i = 0; i < osc.args[0]; i++) {
+      d.send(`/eos/get/cuelist/index/${i}`);
+    }
+
+
+  } else if (match(p, ['eos','out','get','cuelist','*','list','*','*'])) {
+    d.data.cuelists[p[4]] = {};
+    d.send(`/eos/get/cue/${p[4]}/count`);
+
+
+  } else if (match(p, ['eos','out','get','cue','*','count'])) {
+    for (let i = 0; i < osc.args[0]; i++) {
+      device.send(`/eos/get/cue/${p[4]}/index/${i}`);
+    }
+
+
+  } else if (match(p, ['eos','out','get','cue','*','*','*','list','*','*'])) {
+    this.deviceInfoUpdate(device, 'status', 'ok');
+    if (d.data.cuelists[p[4]][p[5]] === undefined) {
+      d.data.cuelists[p[4]][p[5]] = {};
+    }
+    d.data.cuelists[p[4]][p[5]][p[6]] = {
+      uid: osc.args[1],
+      label: osc.args[2],
+      uptimeduration: osc.args[3],
+      uptimedelay: osc.args[4],
+      downtimeduration: osc.args[5],
+      downtimedelay: osc.args[6],
+      focustimeduration: osc.args[7],
+      focustimedelay: osc.args[8],
+      colortimeduration: osc.args[9],
+      colortimedelay: osc.args[10],
+      beamtimeduration: osc.args[11],
+      beamtimedelay: osc.args[12],
+      mark: osc.args[16],
+      block: osc.args[17],
+      assert: osc.args[18],
+      follow: osc.args[20],
+      hang: osc.args[21],
+      partcount: osc.args[26],
+      scene: osc.args[28],
+      duration: Math.max(
+        osc.args[3],
+        osc.args[5],
+        osc.args[7],
+        osc.args[9],
+        osc.args[11]
+      ),
+    };
+
+    device.update("cueData", {
+      cue: device.data.cuelists[p[4]][p[5]],
+      cueNumber: p[5],
+      uid: osc.args[1]
+    });
+
+
+  } else if (match(p, ['eos','out','get','cue','*','*'])) {
+    // There's no OSC notification of the deletion of a part. It just tells you to update the parent cue and remaining children.
+    // So: we should fetch all the parts of a cue somehow every time there's an update to a cue.
+    delete d.data.cuelists[p[4]][p[5]];
+    d.draw();
+
+
+  } else if (match(p, ['eos','out','get','cue','*','*','*','actions','list','*','*'])) {
+    if (osc.args.length === 3) {
+      d.data.cuelists[p[4]][p[5]][0].extlinks = osc.args[2];
+    }
+
+
+  } else if (match(p, ['eos','out','event','cue','*','*','fire'])) {
+    d.data.activeCue = p[5];
+    d.draw();
+    d.update("activeCue", {uid: device.data.cuelists[p[4]][p[5]][0].uid});
+
+
+  } else if (match(p, ['eos','out','notify','cue','*','*','*','*'])) {
+    const cueList = p[4];
+    const cueNumber = osc.args[1];
+
+    d.send(`/eos/get/cue/${cueList}/${cueNumber}`);
+    
+
+  } else if (match(p, ['eos','out','get','version'])) {
+    d.data.version = osc.args[0];
+
+
+  } else {
+    // console.log(osc);
+
+  }
+  // console.log(p)
+};
+
+
+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({
+        q: data.cue,
+        cueNumber: data.cueNumber,
+        isActive: false
+      });
+
+    }else{
+      device.draw();
+
+    }
+
+  }else if(updateType === "activeCue"){
+    const $elem = doc.getElementById(data.uid);
+    $elem.scrollIntoView({behavior: "smooth", block: "center"});
+
+  }
+
+
+}
+
+
+exports.heartbeat = function heartbeat(device) {
+  device.send('/eos/ping');
+};
+
+
+function match(osc, array){
+  let out = true;
+  if(osc.length !== array.length){
+    return false;
+  }
+  array.forEach((m, i)=> {
+    if(osc[i] !== m && m !== "*"){
+      out = false;
+    }
+  });
+  return out;
+}
@@ -0,0 +1,74 @@
+table {
+  background-color: #141414;
+  border: #404040 1px solid;
+  border-radius: 4px;
+  color: #a59baa;
+}
+th {
+  font-size: 14px;
+  font-weight: normal;
+  padding: 5px;
+}
+td {
+  text-align: center;
+  padding: 4px 6px;
+}
+td:first-child {
+  text-align: left;
+}
+td.black {
+  background-color: black;
+  border-right: #212021 1px solid;
+}
+td.num {
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.scene {
+  background-color: black;
+  border-top: #141414 2px solid;
+  border-bottom: #141414 2px solid;
+}
+.scene hr {
+  border: #001f10 4px solid;
+}
+.scene span {
+  display: table;
+  margin: 0px auto;
+  margin-top: -25px;
+  padding: 4px;
+  background-color: black;
+  font-weight: bold;
+  font-size: 14px;
+}
+.time {
+  border: #2f2b35 2px solid;
+  border-radius: 5px;
+}
+
+tr.active-cue {
+  color: #c78b07;
+}
+tr.active-cue td.num div {
+  margin: 0px;
+  padding: 1px 6px;
+  background-color: #c78b07;
+  border-radius: 4px;
+  color: black;
+}
+tr.active-cue .time {
+  border-color: #c78b07;
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+  .hide-medium {
+    display: none;
+  }
+}
+@media screen and (min-width: 0px) and (max-width: 550px) {
+  .hide-small {
+    display: none;
+  }
+}
@@ -0,0 +1,47 @@
+<header>
+	<h1><%= listName  %></h1>
+	<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.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>
+
+		<% var cues = Object.keys(data.cuelists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
+
+		<% for(var j=0; j<cues.length; j++){ %>
+			<% var q = data.cuelists[i][cues[j]] %>
+			
+			<%= cueTemplate({
+				q: q,
+				cues: cues,
+				cueNumber: cues[j],
+				isActive: (cues[j]==data.activeCue+"")
+			}) %>
+
+		<% } %>
+	</table>
+
+<% } %>
@@ -0,0 +1,4 @@
+<h3>Connection Requirements</h3>
+<ul>
+	<li>Requires no password on the projector</li>
+</ul>
@@ -0,0 +1,126 @@
+const md5 = require('md5');
+
+exports.defaultName = 'PJLink Projector';
+exports.connectionType = 'TCPsocket';
+exports.heartbeatInterval = 5000;
+exports.heartbeatTimeout = 15000;
+exports.searchOptions = {
+  type: 'UDPsocket',
+  searchBuffer: Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]),
+  devicePort: 4352,
+  listenPort: 4352,
+  validateResponse (msg, info) {
+    return msg.toString().indexOf('%2ACKN=') >= 0;
+  },
+};
+exports.defaultPort = 4352;
+
+exports.ready = function ready(device) {
+  // Power status query
+  // device.send("%1POWR ?\r");
+};
+let password = false;
+
+function processPJLink(device, str, that) {
+  const arr = str.split('%');
+  arr.shift();
+  const d = device;
+
+  arr.forEach((s) => {
+    const split = s.split('=');
+    const key = split[0];
+    const value = split[1];
+
+    if(key === '1POWR'){
+      d.data.power = value;
+
+    }else if(key === '1INPT'){
+      d.data.input = value;
+      
+    }else if(key === '1AVMT'){
+      d.data.avmute = value;
+      
+    }else if(key === '1ERST'){
+      d.data.fanError = value[0];
+      d.data.lampError = value[1];
+      d.data.tempError = value[2];
+      d.data.coverError = value[3];
+      d.data.filterError = value[4];
+      d.data.otherError = value[5];
+      
+    }else if(key === '1LAMP'){
+      d.data.lamp = value.split(' ');
+      
+    }else if(key === '1NAME'){
+      d.data.name = value;
+      that.deviceInfoUpdate(d, 'defaultName', d.data.name);
+      
+    }else if(key === '1INF1'){
+      d.data.info1 = value;
+      
+    }else if(key === '1INF2'){
+      d.data.info2 = value;
+      
+    }else if(key === '2SNUM'){
+      d.data.serial = value;
+      
+    }else if(key === '2SVER'){
+      d.data.version = value;
+      
+    }
+  });
+
+  d.draw();
+
+}
+
+exports.data = function data(device, message) {
+  this.deviceInfoUpdate(device, 'status', 'ok');
+  const msg = message.toString();
+
+  if (msg.substring(0, 8) === 'PJLINK 1') {
+    password = md5(`${msg.substring(9, 17)}JBMIAProjectorLink`);
+    device.send(
+      `${password}%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`
+    );
+  }
+  if (msg.substring(0, 7) === '%1POWR=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1INPT=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1AVMT=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1ERST=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1LAMP=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1NAME=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1INF1=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%1INF2=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%2SNUM=') {
+    processPJLink(device, msg, this);
+  }
+  if (msg.substring(0, 7) === '%2SVER=') {
+    processPJLink(device, msg, this);
+  }
+};
+
+exports.heartbeat = function heartbeat(device) {
+  if (password) {
+    device.send(
+      `${password}%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`
+    );
+  }
+  device.draw();
+};
@@ -1,10 +0,0 @@
-
-.warning{
-	color: #e9873a;
-}
-.error{
-	color: #ed5f5d;
-}
-.ok{
-	color: #79b757;
-}
@@ -1,116 +0,0 @@
-exports.defaultName = "PJLink Projector";
-exports.connectionType = "TCPsocket";
-exports.heartbeatInterval = 5000;
-exports.searchOptions = {
-	type: "UDPsocket",
-	searchBuffer: Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]),
-	devicePort: 4352,
-	listenPort: 4352,
-	validateResponse: function(msg, info){
-		return (msg.toString().indexOf("%2ACKN=")>=0);
-	}
-}
-exports.defaultPort = 4352;
-
-exports.ready = function(device){
-	//Power status query
-	//device.send("%1POWR ?\r");
-}
-var password = false;
-
-exports.data = function(device, message){
-	this.deviceInfoUpdate(device, "status", "ok");
-	var msg =  message.toString();
-
-	const md5 = require("md5");
-
-	if(msg.substring(0, 8)=="PJLINK 1"){
-		password = md5(msg.substring(9, 17)+"JBMIAProjectorLink")
-		device.send(password+"%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r");
-	}
-	if(msg.substring(0, 7)=="%1POWR="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1INPT="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1AVMT="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1ERST="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1LAMP="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1NAME="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1INF1="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1INF2="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%2SNUM="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%2SVER="){
-		processPJLink(device, msg, this);
-	}
-}
-
-function processPJLink(device, str, that){
-	var arr = str.split("%");
-	for(var key in arr){
-		var split = arr[key].split("=");
-		var key = split[0];
-		var value = split[1];
-		
-		switch(key){
-			case "1POWR":
-				device.data.power = value;
-				break;
-			case "1INPT":
-				device.data.input = value;
-				break;
-			case "1AVMT":
-				device.data.avmute = value;
-				break;
-			case "1ERST":
-				device.data.fanError = value[0];
-				device.data.lampError = value[1];
-				device.data.tempError = value[2];
-				device.data.coverError = value[3];
-				device.data.filterError = value[4];
-				device.data.otherError = value[5];
-				break;
-			case "1LAMP":
-				device.data.lamp = value.split(" ");
-				break;
-			case "1NAME":
-				device.data.name = value;
-				that.deviceInfoUpdate(device, "defaultName", device.data.name);
-				break;
-			case "1INF1":
-				device.data.info1 = value;
-				break;
-			case "1INF2":
-				device.data.info2 = value;
-				break;
-			case "2SNUM":
-				device.data.serial = value;
-				break;
-			case "2SVER":
-				device.data.version = value;
-				break;
-		}
-	}
-	device.draw();
-}
-
-exports.heartbeat = function(device){
-	if(password){
-		device.send(password+"%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r");
-	}
-}
@@ -0,0 +1,9 @@
+.warning {
+  color: #e9873a;
+}
+.error {
+  color: #ed5f5d;
+}
+.ok {
+  color: #79b757;
+}
@@ -0,0 +1,45 @@
+<div id="<%= cueList.uniqueID %>">
+
+<h3><%= cueList.displayName %></h3>
+<%
+  let width = 100/cueList.cartColumns;
+  let height = 600/(cueList.cartRows);
+%>
+
+<div class="cart">
+
+<% for(let r=0; r<cueList.cartRows; r++){ %>
+  <% for(let c=0; c<cueList.cartColumns; c++){ %>
+    <% let style = `style="left:${width*c}%; top:${height*r}px; width:${width }%; height:${height}px;"`; %>
+
+    <div class="cartCueWrapper" <%= style %>><div class="cartCue cartBlank"></div></div>
+    
+  <% } %>
+<% } %>
+
+
+<% for(var c in cueList.cues){ 
+  let cue = cueList.cues[c];
+
+  if(!cue.cartPosition){
+    cue.cartPosition = [0, 0];
+  }
+
+  let row = cue.cartPosition[0]-1;
+  let col = cue.cartPosition[1]-1;
+
+  let colPos = width*col;
+  let rowPos = height*row;
+
+  if(col>=cueList.cartColumns || row>=cueList.cartRows){
+    continue;
+  } 
+%>
+ 
+<%= tileTemplate({cue: allCues[cue.uniqueID], allCues: allCues}) %>
+
+<% } %>
+
+</div>
+
+</div>
@@ -0,0 +1,178 @@
+<% let playbackPosition = workspace.playbackPosition==cue.uniqueID ? "playback-position" : "" %>
+<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%= playbackPosition %>" id="<%= cue.uniqueID %>">
+
+  <td></td> <!-- playhead/color indicator -->
+
+  <td><center>
+  <% if(cue.broken){ %>
+    <img src="./plugins/qlab/img/status_broken.png" height="18px">
+
+  <% }else if(cue.running){ %>
+    <img src="./plugins/qlab/img/status_running.png" height="18px">
+
+  <% }else if(cue.paused){ %>
+    <img src="./plugins/qlab/img/status_paused.png" height="18px">
+
+  <% }else if(cue.loaded){ %>
+    <img src="./plugins/qlab/img/status_loaded.png" height="18px">
+
+  <% }else if(cue.flagged){ %>
+    <img src="./plugins/qlab/img/status_flagged.png" height="20px">
+
+  <% }else{ %>
+    
+  <% } %>
+  </center></td>
+
+
+  <td><img src="./plugins/qlab/img/<%= cue.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>
+  <td><center><%= cue.number || "&nbsp;" %></center></td>
+
+
+
+
+  <% for(let i=cue.nestedGroupModes.length; i>0; i--){ %>
+
+    <% let test = "" %>
+
+    <% if(cue.type=="Group" && i==1 && cue.cues.length==0){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gTop gBot group-arrow"><%= test %></td>
+
+    <% }else if(cue.type=="Group" && i==1){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gTop group-arrow"><%= test %></td>
+
+    <% }else if(cue.nestedGroupPosition[i-1]==0 && cue.nestedGroupPosition[i-2]==0){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gBot"><%= test %></td>
+
+    <% }else if(i==1 && cue.nestedGroupPosition[i]==0){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i] %> gBot"><%= test %></td>
+
+    <% }else{ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft"><%= test %></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>
+
+    <% }else{ %>
+      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gRight"><%= cue.listName %></td>
+
+    <% } %>
+
+  <% }else if(cue.nestedGroupPosition[1]==0){ %>
+    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[1] %> gBot gRight"><%= cue.listName %></td>
+
+  <% }else{ %>
+    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[1] %> gRight"><%= cue.listName %></td>
+
+  <% } %>
+
+
+  <td class="q-time hide-medium"><%= cue.target %></td>
+
+
+
+
+  <% if(cue.preWait){ %>
+    <td class="q-time hide-medium"><%= elapsedTime(cue.preWait, cue.preWaitElapsed, "preWait", cue) %></td>
+
+  <% }else{ %>
+    <td class="q-time q-gray-text hide-small">00:00.00</td>
+
+  <% } %>
+
+
+  <% let cueTypesWithAction = ["Audio", "Mic", "Video", "Camera", "Text", "Light", "Fade", "Network", "MIDI File", "Timecode", "Wait"]; %>
+  <% if((cue.type=="Group" && cue.groupMode==3) || cueTypesWithAction.indexOf(cue.type)>=0){ %>
+    <td class="q-time hide-medium"><%= elapsedTime(cue.duration, cue.actionElapsed, "action", cue) %></td>
+
+  <% }else{ %>
+    <td class="hide-medium"></td>
+
+  <% } %>
+
+
+
+  <% if(cue.postWait){ %>
+    <td class="q-time hide-medium"><%= elapsedTime(cue.postWait, cue.postWaitElapsed, "postWait", cue) %></td>
+
+  <% }else{ %>
+    <td class="q-time q-gray-text hide-medium">00:00.00</td>
+
+  <% } %>
+
+
+
+  <% if(cue.continueMode==2){ %>
+    <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>
+
+  <% }else if(cue.continueMode==1){ %>
+    <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>
+
+  <% }else{ %>
+    <td class="hide-small"></td>
+
+  <% } %>
+
+
+</tr>
+
+<% 
+  function prettyFormatTime(seconds){
+    if(!seconds){
+      return "00:00.00";
+    }
+    var startIndex = 14;
+    if(seconds>=3600){
+      startIndex = 11;
+    }
+    var string = new Date(seconds * 1000).toISOString()
+    return string.substring(startIndex, string.length-2)
+  }
+
+  function elapsedTime(def, value, type, cue){
+
+    if(type=="action" && cue.paused){
+      value-=cue.preWait;
+    }
+
+    let border, fill;
+    if(cue.paused){
+      border = "#f6e737";
+      fill = "rgba(255, 240, 60, 0.7)";
+    }else{
+      border = "#48ba41";
+      fill = "rgba(0, 200, 50, 0.5)";
+    }
+
+
+    if(value>0){
+      let percent = value/def*100;
+      let bg = `style='background: black; background: linear-gradient(90deg, ${fill} ${percent}%, transparent ${percent}%);`;
+
+      if(cue.paused){
+        bg+= "outline-color: "+border+";";
+        bg+= "color: white;";
+      }
+      bg+="'";
+      
+      return `<div class='q-time-elapsed' ${bg}>${prettyFormatTime(Math.min(def, value))}</span>`;
+
+    }else if(type=="postWait" || type=="action"){
+      return `<span class='q-gray-text'>${prettyFormatTime(def)}</span>`;
+
+    }else{
+      return prettyFormatTime(def);
+
+    }
+  }
+%>
@@ -0,0 +1,54 @@
+<h3 id="<%= cueList.uniqueID %>"><%= workspace.displayName %> &mdash; <%= cueList.displayName %></h3>
+
+<table cellspacing="0">
+  <tr>
+    <th width="1px" style="border-left: none; border-right: none;"></th>
+    <th width="20px" style="border-left: none; border-right: none;"></th>
+    <th width="20px" style="border-left: none;"></th>
+    <th width="55px">Number</th>
+    <th width="25px" 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>
+    <th width="25px" class="no-border"></th>
+    <th width="25px" class="no-border"></th>
+    <th width="25px" class="no-border"></th>
+    <th width="25px" class="no-border"></th>
+    <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="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]) %>
+    <% } %>
+
+  </tbody>
+</table>
+
+
+<% 
+
+
+
+function displayCueRow(q){
+  let html = "";
+
+  html+= rowTemplate({cue: allCues[q.uniqueID], allCues: allCues, workspace: workspace});
+
+  if(q.cues){
+    q.cues.forEach(q =>{
+      html+=displayCueRow(q);
+    })
+  }
+  return html;
+}
+%>
@@ -0,0 +1,4 @@
+<h3>Connection Requirements</h3>
+<ul>
+	<li>No Passcode</li>
+</ul>
@@ -0,0 +1,382 @@
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+
+let lastElapsedUpdate = Date.now();
+
+exports.defaultName = 'QLab 4';
+exports.connectionType = 'osc';
+exports.heartbeatInterval = 50;
+exports.heartbeatTimeout = 2000;
+exports.searchOptions = {
+  type: 'Bonjour',
+  bonjourName: 'qlab',
+};
+
+exports.ready = function ready(device) {
+  device.send(`/version`);
+  device.send('/workspaces');
+};
+
+exports.data = function data(device, oscData) {
+  const osc = oscData.address.split('/');
+  osc.shift();
+  const d = device;
+  
+  // console.log(oscData.address)
+
+  if(match(osc, ["reply", "version"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    d.data.version = json.data;
+
+    this.deviceInfoUpdate(d, 'status', 'ok');
+
+
+  }else if(match(osc, ["reply", "workspaces"])){
+    
+    const json = JSON.parse(oscData.args[0]);
+    d.data.workspaces = {};
+
+    json.data.forEach(wksp => {
+    
+      d.data.workspaces[wksp.uniqueID] = {
+        uniqueID: wksp.uniqueID,
+        displayName: wksp.displayName,
+        cueLists: {},
+        cues: {}
+      }
+
+      d.send(`/workspace/${wksp.uniqueID}/connect`);
+
+    });
+
+
+  }else if(match(osc, ["reply", "workspace", "*", "connect"])){
+
+    d.send(`/workspace/${osc[2]}/updates`, [
+      { type: 'i', value: 1 },
+    ]);
+
+    d.send(`/workspace/${osc[2]}/cueLists`);
+
+
+
+  }else if(match(osc, ["reply", "workspace", "*", "cueLists"])){
+
+    this.deviceInfoUpdate(d, 'status', 'ok');
+
+
+    const workspace = d.data.workspaces[osc[2]];
+    const json = JSON.parse(oscData.args[0]);
+
+    workspace.cueLists = {};
+    workspace.cues = {};
+
+
+    json.data.forEach(ql => {
+      workspace.cueLists[ql.uniqueID] = ql;
+      addChildrenToWorkspace(workspace, ql);
+    });
+
+    d.draw();
+    
+
+    setTimeout(() => {
+      json.data.forEach(ql => {
+        workspace.cueLists[ql.uniqueID] = ql;
+        getValuesForKeys(d, json.workspace_id, ql);
+      });
+    }, 0);
+
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "children"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = d.data.workspaces[json.workspace_id];
+    const cueID = osc[2];
+    const cue = workspace.cues[cueID];
+
+    if(!_.isEqual(cue.cues, json.data)){
+      workspace.cueLists[cueID].cues = json.data;
+      addChildrenToWorkspace(workspace, workspace.cueLists[cueID]);
+
+      d.draw();
+
+      getValuesForKeys(d, json.workspace_id, cue);
+    }
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "valuesForKeys"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const cueValues = json.data;
+
+    const workspace = d.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;
+
+    const nestedGroupModes = [];
+    const nestedGroupPosition = [0];
+    let obj = cue;
+
+    while(obj.parent !== "[root group of cue lists]"){
+      nestedGroupModes.push(obj.groupMode);
+
+      let pos = _.findIndex(workspace.cues[obj.parent].cues, {uniqueID: obj.uniqueID});
+      pos = Math.abs(pos - workspace.cues[obj.parent].cues.length) - 1;
+      nestedGroupPosition.push(pos)
+
+      obj = workspace.cues[obj.parent];
+    }
+    cue.nestedGroupModes = nestedGroupModes;
+    cue.nestedGroupPosition = nestedGroupPosition;
+
+    // console.log("draw "+cue.number)
+
+    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "preWaitElapsed"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = d.data.workspaces[json.workspace_id];
+    const cue = workspace.cues[osc[2]];
+
+    cue.preWaitElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "actionElapsed"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = d.data.workspaces[json.workspace_id];
+    const cue = workspace.cues[osc[2]];
+
+    cue.actionElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "postWaitElapsed"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = device.data.workspaces[json.workspace_id];
+    const cue = workspace.cues[osc[2]];
+
+    cue.postWaitElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+
+  }else if(match(osc, ["update", "workspace", "*", "cue_id", "*"])){
+
+    const workspace = d.data.workspaces[osc[2]];
+    
+    if(workspace){
+      const cueLists = Object.keys(workspace.cueLists);
+      const cueID = osc[4];
+
+      if(cueID !== "[root group of cue lists"){
+        if(cueLists.includes(cueID)){
+          d.send(`/workspace/${workspace.uniqueID}/cue_id/${cueID}/children`);
+        }
+
+        d.send(`/workspace/${osc[2]}/cue_id/${cueID}/valuesForKeys`, [
+          {type: 's', value: valuesForKeysString}
+        ]);
+
+      }
+    }
+
+  
+  }else if(match(osc, ["update", "workspace", "*"])){
+    // occurs when cue lists are reordered or a list is deleted
+    d.send(`/workspace/${osc[2]}/cueLists`);
+
+
+  }else if(match(osc, ["update", "workspace", "*", "dashboard"])){
+    // this workspace might be new, let's check
+
+    if(d.data.workspaces[osc[2]]){
+      //
+    }else{
+      console.log("new workspace!");
+      d.send('/workspaces');
+    }
+
+
+  }else if(match(osc, ["update", "workspace", "*", "cueList", "*", "playbackPosition"])){
+
+    const workspace = d.data.workspaces[osc[2]];
+
+    if(workspace){
+      const cue = workspace.cues[oscData.args[0]];
+      
+      if(cue){
+        workspace.playbackPosition = oscData.args[0] ? cue.uniqueID : "";
+        d.update("updatePlaybackPosition", {'cue': cue});
+      }
+    }
+
+  }else if(match(osc, ["update", "workspace", "*", "disconnect"])){
+
+    delete d.data.workspaces[osc[2]];
+    d.draw();
+
+  }else{
+    // console.log(address)
+  }
+
+
+  
+};
+
+
+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.update = function update(device, doc, updateType, data){
+
+  if(updateType === "updateCueData"){
+    const $elem = doc.getElementById(data.cue.uniqueID);
+
+    if($elem){
+
+      if(data.cue.type === "Cue List"){
+        $elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
+
+      }else if(data.cue.type === "Cart"){
+        $elem.outerHTML = cartTemplate({'tileTemplate': tileTemplate, 'cueList': data.cue, 'allCues': data.workspace.cues});
+        
+      }else if(data.cue.cartPosition && data.cue.cartPosition[0] !== 0){
+        $elem.outerHTML = tileTemplate(data);
+        
+      }else{
+        $elem.outerHTML = cueTemplate(data);
+      }
+    }
+
+  }else if(updateType === "updatePlaybackPosition"){
+    Array.from(doc.getElementsByClassName("playback-position")).forEach(
+    ($elem, index, array) => {
+        $elem.classList.remove("playback-position");
+    });
+
+    const $elem = doc.getElementById(data.cue.uniqueID);
+    $elem.classList.add("playback-position");
+    $elem.scrollIntoView({behavior: "smooth", block: "center"});
+
+  }
+}
+
+
+
+
+
+
+
+
+
+const valuesForKeysString = 
+'["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",'
+ '"type","children","preWait","postWait","currentDuration","colorName","continueMode",'
+ '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",'
+ '"actionElapsed","postWaitElapsed","isPaused"]';
+
+function addChildrenToWorkspace(workspace, q){
+  const w = workspace;
+  w.cues[q.uniqueID] = q;
+  w.cues[q.uniqueID].nestedGroupModes = [];
+  w.cues[q.uniqueID].nestedGroupPosition = [];
+
+  if(q.cues){
+    q.cues.forEach(cue => {
+      addChildrenToWorkspace(w, cue);
+    });
+  }
+}
+
+
+function getValuesForKeys(device, workspaceID, q){
+  device.send(`/workspace/${workspaceID}/cue_id/${q.uniqueID}/valuesForKeys`, [
+    {type: 's', value: valuesForKeysString}
+  ]);
+  if(q.cues){
+    q.cues.forEach(cue => {
+      getValuesForKeys(device, workspaceID, cue);
+    });
+  }
+}
+
+
+function match(osc, array){
+  let out = true;
+  if(osc.length !== array.length){
+    return false;
+  }
+  array.forEach((m, i)=> {
+    if(osc[i] !== m && m !== "*"){
+      out = false;
+    }
+  });
+  return out;
+}
+
+let interval = 5;
+let heartbeatCount = 0;
+exports.heartbeat = function heartbeat(device) {
+  heartbeatCount++;
+
+  if(Date.now() - lastElapsedUpdate > 300){
+    interval = 5;
+  }else{
+    interval = 1;
+  }
+
+  if(heartbeatCount % interval === 0){
+    device.send(`/cue/active/preWaitElapsed`);
+    device.send(`/cue/active/actionElapsed`);
+    device.send(`/cue/active/postWaitElapsed`);
+  }
+
+};
+
+
+
@@ -1,189 +0,0 @@
-table{
-	background-color: #323232;
-	border: 0px;
-	color: #b8b8b8;
-	font-family: sans-serif;
-	width: 100%;
-	table-layout:fixed;
-	margin-bottom: 30px;
-}
-th{
-	font-size: 12px;
-	font-weight: normal;
-	padding: 0px 4px;
-	background-color: #2d2c2d;
-	border: #545454 1px solid;
-	border-right: none;
-}
-	th.no-border{
-		border-left: none;
-		border-right: none;
-		padding: 0px;
-	}
-
-td{
-	padding: 0px;
-	height: 25px;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-	td img{
-		padding-top: 4px;
-	}
-
-
-
-tr:nth-child(even) {
-	background: #2c2c2c;
-}
-tr:nth-child(odd) {
-	background: #323232;
-}
-
-
-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);
-}
-	.q-red td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #ff4242 solid;
-	}
-tr:nth-child(even).q-orange{
-	background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
-}
-tr:nth-child(odd).q-orange{
-	background: linear-gradient(to top, #323232, #514330 1px);
-}
-	.q-orange td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #ffa500 solid;
-	}
-tr:nth-child(even).q-green{
-	background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
-}
-tr:nth-child(odd).q-green{
-	background: linear-gradient(to top, #323232, #324b33 1px);
-}
-	.q-green td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #01d52f solid;
-	}
-tr:nth-child(even).q-blue{
-	background: linear-gradient(to top, #2c2c2c, #323647 1px);
-}
-tr:nth-child(odd).q-blue{
-	background: linear-gradient(to top, #323232, #363b4b 1px);
-}
-	.q-blue td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #536de0 solid;
-	}
-tr:nth-child(even).q-purple{
-	background: linear-gradient(to top, #2c2c2c, #39273d 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;
-	}
-
-tr.q-armed-false td{
-	background: url("img/disarmed-pattern-light.png");
-	background-attachment: fixed;
-}
-
-
-tr.playback-position{
-	background-image: none !important;
-	background: #1557da !important;
-	color: white !important;
-}
-tr.playback-position .q-gray-text{
-	color: white !important;
-}
-
-
-.gLeft{
-	height: 24px;
-	width: 12px;
-	border-left: 2px solid;
-}
-.gTop{
-	border-top: 2px solid;
-}
-.gBot{
-	border-bottom: 2px solid;
-}
-.gRight{
-	border-right: 2px solid;
-}
-.gMode-1.gLeft.gTop{
-	border-radius: 6px 0px 0px 0px;
-}
-.gMode-1.gLeft.gBot{
-	border-radius: 0px 0px 0px 6px;
-}
-.gMode-1.gRight.gBot{
-	border-radius: 0px 0px 6px 0px;
-}
-.gMode-1.gLeft.gTop.gBot{
-	border-radius: 6px 0px 0px 6px;
-}
-.gMode-1.gLeft.gTop.gRight{
-	border-radius: 6px 6px 0px 0px;
-}
-.gMode-1.gTop.gRight.gBot{
-	border-radius: 0px 6px 6px 0px;
-}
-.gMode-1.gLeft.gTop.gRight.gBot{
-	border-radius: 6px;
-}
-.gMode-1{
-	border-color: #5a5a87;
-}
-.gMode-2{
-	border-color: #5a5a87;
-}
-.gMode-3{
-	border-color: #429242;
-}
-.gMode-4{
-	border-color: #925fc0;
-}
-.gMode-, .gMode-0{
-	border-color: rgba(0, 0, 0, 0);
-}
-.group-arrow{
-	width: 13px;
-	background-image: url("img/arrow-down.png");
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-.q-time{
-	font-size: 14px;
-	text-align: center;
-}
-.q-gray-text{
-	color: #424242;
-}
-
-
-
-@media screen and (min-width: 0px) and (max-width: 750px) {
-	.hide-medium{
-		display: none;
-	}
-}
-@media screen and (min-width: 0px) and (max-width: 550px) {
-	.hide-small{
-		display: none;
-	}
-}
-
@@ -1,196 +0,0 @@
-<% function cueTemplate(cueList, groupModes, depth, workspace){ %>
-
-	<% depth++ %>
-
-	<% for(var c in cueList.cues){ %>
-
-		<% var cue = cueList.cues[c] %>
-			<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%if(data.playbackPosition==cue.uniqueID){ %>playback-position scroll-position<% } %>" id="<%= cue.uniqueID %>">
-
-				<td></td> <!-- playhead/color indicator -->
-
-				<% if(cue.broken){ %>
-					<td><center><img src="plugins/qlab/img/status_broken.png" height="18px"></center></td>
-				<% }else if(cue.running){ %>
-					<td><center><img src="plugins/qlab/img/status_running.png" height="18px"></center></td>
-				<% }else if(cue.loaded){ %>
-					<td><center><img src="plugins/qlab/img/status_loaded.png" height="18px"></center></td>
-				<% }else if(cue.flagged){ %>
-					<td><center><img src="plugins/qlab/img/status_flagged.png" height="20px"></center></td>
-				<% }else{ %>
-					<td></td>
-				<% } %>
-
-
-				<td><img src="plugins/qlab/img/<%= cue.type.toLowerCase() %>.png" height="20px"></td>
-				<td><center><%- cue.number || "&nbsp;" %></center></td>
-
-				<%
-				var nextCueDepth = 0;
-				if(workspace.allCuesOrdered[cue.index+1]!=undefined){
-					nextCueDepth = workspace.allCuesOrdered[cue.index+1].groups.length-1;
-				}
-
-				%>
-				
-				
-
-				<!-- spacer cells before cue name --> 
-				<% for(var i=0; i<depth; i++){ %>
-
-					<% if(i==depth-1 && cue.type=="Group"){ %>
-
-						<% if(cue.cues.length==0){ %>
-							<td width="15px" class="group-arrow gMode-<%= cue.mode %> gLeft gTop gBot"></td>
-
-						<% }else{ %>
-							<td width="15px" class="group-arrow gMode-<%= cue.mode %> gLeft gTop"></td>
-
-						<% } %>
-
-					<% }else if(i<nextCueDepth){ %>
-						<td width="15px" class="gMode-<%= groupModes[i] %> gLeft"></td>
-
-					<% }else if(i>=nextCueDepth && i<depth-1 ){ %>
-						<td width="15px" class="gMode-<%= groupModes[i] %> gLeft gBot"></td>
-
-					<% }else if(i==depth-1 && i>nextCueDepth){ %>
-						<td width="15px" class="gMode-<%= groupModes[groupModes.length-1] %> gBot"></td>
-
-					<% }else{ %>
-						<td width="15px" ></td>
-
-					<% } %>
-
-				<% } %>
-
-				
-
-				<!-- cue name -->
-				<% if(cue.type=="Group"){ %>
-					<% if(cue.cues.length==0){ %>
-						<td colspan="<%= 11-depth %>" class="gMode-<%= cue.mode %> gTop gBot gRight"><%= cue.listName %></td>
-
-					<% }else{ %>
-						<td colspan="<%= 11-depth %>" class="gMode-<%= cue.mode %> gTop gRight"><%= cue.listName %></td>
-
-					<% } %>
-				<% }else if(depth>nextCueDepth+1){ %>
-					<td colspan="<%= 11-depth %>" class="gMode-<%= groupModes[groupModes.length-1] %> gBot gRight"><%= cue.listName %></td>
-
-				<% }else if(depth>1){ %>
-					<td colspan="<%= 11-depth %>" class="gMode-<%= groupModes[groupModes.length-1] %> gRight"><%= cue.listName %></td>
-
-				<% }else{ %>
-					<td colspan="<%= 11-depth %>"><%= cue.listName %></td>
-
-				<% } %>
-
-				<td class="q-time hide-medium"><%= cue.target %></td>
-
-				<% if(cue.preWait){ %>
-					<td class="q-time hide-small"><%= prettyFormatTime(cue.preWait) %></td>
-				<% }else{ %>
-					<td class="q-time q-gray-text hide-small">00:00.00</td>
-				<% } %>
-
-				<% if(cue.duration || (cue.type=="Group" && cue.mode==3)){ %>
-					<% %>
-					<td class="q-time hide-medium"><%= prettyFormatTime(cue.duration) %></td>
-				<% }else{ %>
-					<td class="hide-medium"></td>
-				<% } %>
-
-				<% if(cue.postWait){ %>
-					<td class="q-time q-gray-text hide-medium"><%= prettyFormatTime(cue.postWait) %></td>
-				<% }else{ %>
-					<td class="q-time q-gray-text hide-medium">00:00.00</td>
-				<% } %>
-
-				<% if(cue.continueMode==2){ %>
-					<td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>
-				<% }else if(cue.continueMode==1){ %>
-					<td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>
-				<% }else{ %>
-					<td class="hide-small"></td>
-				<% } %>
-
-				
-
-				
-				
-			
-
-
-			</tr>
-		<% if(cue.cues){ %>
-			<% groupModes.push(cue.mode) %>
-			<% cueTemplate(cue, groupModes, depth, workspace) %>
-		<% } %>
-
-	<% } %>
-	<% groupModes.pop(); %>
-<% } %>
-
-<header>
-	<h1><%= listName %></h1>
-	<h2><%= data.version || "" %></h2>
-</header>
-
-
-<% for(var i in data.workspaces){ %>
-	<% for(var j in data.workspaces[i].cueLists){ %>
-		<% let cueList = data.workspaces[i].cueLists[j] %>
-		<h3><%= cueList.listName %> - <%= data.workspaces[i].displayName %></h3>
-
-		<% cueListOffset = 0 %>
-		<table cellspacing="0">
-			<tr>
-				<th width="1px" style="border-left: none; border-right: none;"></th>
-				<th width="20px" style="border-left: none; border-right: none;"></th>
-				<th width="20px" style="border-left: none;"></th>
-				<th width="55px">Number</th>
-				<th width="25px" 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>
-				<th width="25px" class="no-border"></th>
-				<th width="25px" class="no-border"></th>
-				<th width="25px" class="no-border"></th>
-				<th width="25px" class="no-border"></th>
-				<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="20px" class="hide-small" style="border-left: none; border-right: none;">
-					<img src="plugins/qlab/img/auto_continue_stubby.png" height="20px">
-				</th>
-			</tr>
-			<% cueTemplate(cueList, [], [], data.workspaces[i]) %>
-		</table>
-	<% } %>
-
-<% } %>
-
-<script>
-	var $scrollTo = document.getElementsByClassName("scroll-position");
-	if($scrollTo.length==1){
-		window.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
-	}
-</script>
-
-<%
-	function prettyFormatTime(seconds){
-		var startIndex = 14;
-		if(seconds>=3600){
-			startIndex = 11;
-		}
-		var string = new Date(seconds * 1000).toISOString()
-		return string.substring(startIndex, string.length-2)
-	}
-
-
-%>
@@ -1,133 +0,0 @@
-exports.defaultName = "QLab 4";
-exports.connectionType = "osc";
-exports.searchOptions = {
-	type: "Bonjour",
-	bonjourName: "qlab"
-}
-
-
-
-exports.ready = function(device){
-	device.send("/workspaces");
-}
-
-exports.data = function(device, osc){
-	var address = osc.address;
-	var p = osc.address.split("/");
-	p.shift();
-
-	//console.log(address)
-
-	if(osc.address=="/reply/workspaces"){
-		const d = JSON.parse(osc.args[0]).data;
-		device.data.workspaces = {};
-		for(var i=0; i<d.length; i++){
-			device.data.workspaces[d[i].uniqueID] = {
-				"displayName": d[i].displayName,
-				"selectionIsPlayhead": true,
-			}
-			device.data.version = d[i].version;
-			device.send("/workspace/"+d[i].uniqueID+"/cueLists");
-			device.send("/workspace/"+d[i].uniqueID+"/updates", [{type: "i", value: 1}]);
-			device.send("/cue/playbackPosition/uniqueID");
-			device.send("/workspace/"+d[i].uniqueID+"/selectionIsPlayhead");
-		}
-
-	}else if(p[1]=="workspace" && p[3]=="cueLists"){
-		var workspace = p[2];
-		var d = JSON.parse(osc.args[0]).data;
-		device.data.workspaces[workspace].cueLists = {};
-		device.data.workspaces[workspace].allCues = {};
-		device.data.workspaces[workspace].allCuesOrdered = [];
-		device.data.lastCueInGroup = {};
-
-		for(var i in d){
-
-			device.data.workspaces[workspace].cueLists[d[i].uniqueID]=d[i];
-			device.data.workspaces[workspace].cueLists[d[i].uniqueID].cues = d[i].cues;
-
-			getMoreCueInfo(d[i], []);
-
-			function getMoreCueInfo(group, groups_arg){
-				var groups = JSON.parse(JSON.stringify(groups_arg))
-				groups.push(group.uniqueID);
-
-				for(var cueIndex in group.cues){
-					var cue = group.cues[cueIndex];
-					//console.log(cue)
-
-					device.data.lastCueInGroup[group.uniqueID] = cue;
-
-					cue.groups = groups;
-					device.send("/workspace/"+workspace+"/cue_id/"+cue.uniqueID+"/valuesForKeys", [{type: "s", value: "[\"mode\", \"parent\", \"isBroken\", \"preWait\", \"duration\", \"postWait\", \"continueMode\", \"cueTargetNumber\", \"isLoaded\", \"isRunning\"]"}]);
-					cue.index = device.data.workspaces[workspace].allCuesOrdered.push(cue)-1;
-
-					if(cue.cues){
-						cue.mode = 0;
-						getMoreCueInfo(cue, groups);
-					}
-
-					device.data.workspaces[workspace].allCues[cue.uniqueID] = cue;
-
-				}
-			}
-
-		}
-
-		//console.log(device.data.lastCueInGroup)
-
-		
-		device.draw();
-	}else if(p[0]=="update" && p[1]=="workspace" && p[3]=="cue_id"){
-		device.send("/workspace/"+p[2]+"/cueLists");
-	}else if(p[0]=="update" && p[1]=="workspace" && p[5]=="playbackPosition"){
-		console.log('pb move')
-		device.data.playbackPosition = osc.args[0];
-		device.draw();
-	}else if(p[0]=="reply" && p[1]=="cue_id"){
-
-		if(p[3] == "uniqueID"){
-			// response to /cue/playbackPosition/uniqueID
-			device.data.playbackPosition = JSON.parse(osc.args[0]).data;
-		}else if(p[3]=="mode"){
-			var cueID = p[2];
-			var mode = JSON.parse(osc.args[0]).data;
-			var workspaceID = JSON.parse(osc.args[0]).workspace_id;
-
-			device.data.workspaces[workspaceID].allCues[cueID].mode = mode;
-
-		}else if(p[3]=="valuesForKeys"){
-			this.deviceInfoUpdate(device, "status", "ok");
-
-			var d = JSON.parse(osc.args[0]);
-
-			var cueID = p[2];
-			var workspace = d.workspace_id;
-			var cueList = d.data.parent;
-
-			device.data.workspaces[workspace].allCues[cueID].mode = d.data.mode;
-			device.data.workspaces[workspace].allCues[cueID].preWait = d.data.preWait;
-			device.data.workspaces[workspace].allCues[cueID].duration = d.data.duration;
-			device.data.workspaces[workspace].allCues[cueID].postWait = d.data.postWait;
-			device.data.workspaces[workspace].allCues[cueID].continueMode = d.data.continueMode;
-			device.data.workspaces[workspace].allCues[cueID].target = d.data.cueTargetNumber;
-			device.data.workspaces[workspace].allCues[cueID].loaded = d.data.isLoaded;
-			device.data.workspaces[workspace].allCues[cueID].broken = d.data.isBroken;
-			device.data.workspaces[workspace].allCues[cueID].running = d.data.isRunning;
-		}
-		device.draw();
-
-	}else if(p[1]=="workspace" && p[3]=="selectionIsPlayhead"){
-
-		device.data.workspaces[p[2]].selectionIsPlayhead = JSON.parse(osc.args[0]).data;
-
-	}else{
-		
-	}
-}
-
-exports.heartbeat = function(device){
-	try{
-		device.send("/workspace/"+(Object.keys(device.data.workspaces)[0])+"/thump");
-	}catch(err){}
-}
@@ -0,0 +1,249 @@
+table {
+  background-color: #323232;
+  border: 0px;
+  color: #b8b8b8;
+  font-family: sans-serif;
+  width: 100%;
+  table-layout: fixed;
+  margin-bottom: 30px;
+}
+th {
+  font-size: 12px;
+  font-weight: normal;
+  padding: 0px 4px;
+  background-color: #2d2c2d;
+  border: #545454 1px solid;
+  border-right: none;
+}
+th.no-border {
+  border-left: none;
+  border-right: none;
+  padding: 0px;
+}
+
+td {
+  padding: -1px;
+  height: 25px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+td img {
+  padding-top: 2px;
+}
+
+tr:nth-child(even) {
+  background: #323232;
+}
+tr:nth-child(odd) {
+  background: #2c2c2c;
+}
+
+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);
+}
+.q-red td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #ff4242 solid;
+}
+tr:nth-child(even).q-orange {
+  background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
+}
+tr:nth-child(odd).q-orange {
+  background: linear-gradient(to top, #323232, #514330 1px);
+}
+.q-orange td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #ffa500 solid;
+}
+tr:nth-child(even).q-green {
+  background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
+}
+tr:nth-child(odd).q-green {
+  background: linear-gradient(to top, #323232, #324b33 1px);
+}
+.q-green td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #01d52f solid;
+}
+tr:nth-child(even).q-blue {
+  background: linear-gradient(to top, #2c2c2c, #323647 1px);
+}
+tr:nth-child(odd).q-blue {
+  background: linear-gradient(to top, #323232, #363b4b 1px);
+}
+.q-blue td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #536de0 solid;
+}
+tr:nth-child(even).q-purple {
+  background: linear-gradient(to top, #2c2c2c, #39273d 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;
+}
+
+tr.q-armed-false td {
+  background: url('img/disarmed-pattern-light.png');
+  background-attachment: fixed;
+}
+
+tr.playback-position {
+  background-image: none !important;
+  background: #1557da !important;
+  color: white !important;
+}
+tr.playback-position .q-gray-text {
+  color: white !important;
+}
+
+.gLeft {
+  height: 24px;
+  width: 12px;
+  border-left: 2px solid;
+}
+.gTop {
+  border-top: 2px solid;
+}
+.gBot {
+  border-bottom: 2px solid;
+}
+.gRight {
+  border-right: 2px solid;
+}
+.gMode-1.gLeft.gTop {
+  border-radius: 6px 0px 0px 0px;
+}
+.gMode-1.gLeft.gBot {
+  border-radius: 0px 0px 0px 6px;
+}
+.gMode-1.gRight.gBot {
+  border-radius: 0px 0px 6px 0px;
+}
+.gMode-1.gLeft.gTop.gBot {
+  border-radius: 6px 0px 0px 6px;
+}
+.gMode-1.gLeft.gTop.gRight {
+  border-radius: 6px 6px 0px 0px;
+}
+.gMode-1.gTop.gRight.gBot {
+  border-radius: 0px 6px 6px 0px;
+}
+.gMode-1.gLeft.gTop.gRight.gBot {
+  border-radius: 6px;
+}
+.gMode-1 {
+  border-color: #5a5a87;
+}
+.gMode-2 {
+  border-color: #5a5a87;
+}
+.gMode-3 {
+  border-color: #429242;
+}
+.gMode-4 {
+  border-color: #925fc0;
+}
+.gMode-,
+.gMode-0 {
+  border-color: rgba(0, 0, 0, 0);
+}
+.group-arrow {
+  width: 13px;
+  background-image: url('img/arrow-down.png');
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.q-time {
+  font-size: 14px;
+  text-align: center;
+}
+.q-gray-text {
+  color: #424242;
+}
+.q-time-elapsed {
+  margin: 0px 2px;
+  outline: #49c042 1px solid;
+  line-height: 18px;
+}
+
+.cart {
+  position: relative;
+  height: 600px;
+  width: 100%;
+  background-color: #2c2b2a;
+}
+.cartCueWrapper {
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  padding: 3px;
+}
+.cartCue {
+  height: 100%;
+  box-sizing: border-box;
+
+  border: 3px solid;
+  border-radius: 6px;
+  color: white;
+}
+.cartCue p {
+  margin: 10px;
+}
+.cartCueIcon {
+  position: absolute;
+  right: 13px;
+  top: 13px;
+}
+.cartColor-red {
+  border-color: #ff4242;
+  background-color: #9b3726;
+}
+.cartColor-orange {
+  border-color: #ffa500;
+  background-color: #ad6026;
+}
+.cartColor-green {
+  border-color: #01d52f;
+  background-color: #397f27;
+}
+.cartColor-blue {
+  border-color: #536de0;
+  background-color: #304893;
+}
+.cartColor-purple {
+  border-color: #a601c0;
+  background-color: #592d74;
+}
+.cartColor-none {
+  border-color: #95929f;
+  background-color: #3b3b3b;
+}
+.cartBlank {
+  border-color: #1f1f1f;
+  background-color: #1f1f1f;
+}
+.cartCueWrapper.playback-position .cartCue {
+  border-color: #88b3db;
+  outline: #88b3db 1px solid;
+  box-shadow: 0px 0px 3px 3px #88b3db, inset 0px 0px 5px #88b3db;
+}
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+  .hide-medium {
+    display: none;
+  }
+}
+@media screen and (min-width: 0px) and (max-width: 550px) {
+  .hide-small {
+    display: none;
+  }
+}
@@ -0,0 +1,46 @@
+<header>
+  <h1><%= listName %></h1>
+  <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`)));
+
+%>
+
+
+
+<%
+  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}) %>
+
+
+  <% } %>
+
+
+
+<% }} %>
+
+
+
@@ -0,0 +1,37 @@
+<%
+
+  let height = 0;
+  let width = 0;
+  let left = 0;
+  let top = 0;
+
+
+  if(cue.parent){
+    width = 100/allCues[cue.parent].cartColumns;
+    height = 600/allCues[cue.parent].cartRows;
+
+    top = (cue.cartPosition[0]-1)*height;
+    left = (cue.cartPosition[1]-1)*width;
+  }
+
+  let style = `style="left:${left}%; top:${top}px; width:${width }%; height:${height}px;"`;
+
+%>
+
+<div id="<%= cue.uniqueID %>" class="cartCueWrapper" <%= style %> > 
+
+  <div class="cartCueIcon">
+    <% if(cue.broken){ %>
+      <img src="plugins/qlab/img/status_broken_white.png" height="18px">
+    <% }else if(cue.running){ %>
+      <img src="plugins/qlab/img/pause_circled.png" height="24px">
+    <% }else{ %>
+      <img src="plugins/qlab/img/play_circled.png" height="24px">
+    <% } %>
+  </div>
+
+  <div class="cartCue cartColor-<%= cue.colorName %>">
+    <p><%= cue.number %> &bull;  <%= cue.displayName %></p>
+  </div>
+
+</div>
@@ -0,0 +1 @@
+<p><em>sACN</em> requires no configuration.</p>
@@ -0,0 +1,158 @@
+const _ = require('lodash');
+
+exports.defaultName = 'sACN';
+exports.connectionType = 'multicast';
+exports.defaultPort = 5568;
+exports.heartbeatInterval = 5000;
+exports.searchOptions = {
+  type: "multicast",
+  address: getMulticastGroup(1),
+  port: 5568,
+  validateResponse (msg, info) {
+    return msg.toString('utf8', 4, 13) === "ASC-E1.17";
+  },
+};
+exports.defaultPort = 5568;
+
+exports.ready = function ready(device) {
+
+  const d = device;
+  d.data.universes = {};
+  d.data.source = "Unknown Source";
+  d.data.orderedUniverses = [];
+
+  // device.draw();
+  for(let i = 1; i <= 16; i++){
+    d.connection.addMembership(getMulticastGroup(i));
+  }
+  
+};
+
+
+exports.data = function data(device, buf) {
+
+  const univ = buf.readUInt16BE(113);
+  const d = device;
+
+  let u = d.data.universes[univ];
+
+  if(!u){
+    d.data.universes[univ] = {};
+    u = d.data.universes[univ];
+  }
+
+  u.sequence = buf.readUInt8(111);
+  u.priority = buf.readUInt8(108);
+  u.cid = buf.toString('hex', 22, 38);
+  u.slots = Array.prototype.slice.call(buf, 126);
+  if(buf.readUInt8(125) !== 0){
+    u.startCode = buf.readUInt8(125);
+  }
+
+
+  d.data.source = buf.toString('utf8', 44, 108);
+  d.displayName = `${d.data.source} sACN`;
+  d.data.ip = d.addresses[0];
+
+  if(!_.includes(d.data.orderedUniverses, univ)){
+    d.data.orderedUniverses.push(univ);
+    d.data.orderedUniverses.sort();
+    u.slotElems = [];
+    u.slotElemsSet = false;
+
+    d.draw();
+    updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+
+  }
+
+  d.update("universeData", {
+    u: univ,
+    universe: u,
+    startCode: u.startCode
+  });
+
+};
+
+
+exports.heartbeat = function heartbeat(device) {
+ 
+};
+
+
+
+let lastUpdate = Date.now();
+exports.update = function update(device, doc, updateType, updateData){
+
+  const d = device;
+  const data = updateData;
+
+  if(updateType === "universeData" && data.universe){
+
+    if(Date.now() - lastUpdate > 1000){
+      lastUpdate = Date.now();
+      updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+    }
+
+    const $elem = doc.getElementById(`universe-${data.u}`);
+
+    if($elem && data.universe.slotElemsSet){
+
+      if(data.universe.priority > 0){
+        for(let i = 0; i < 512; i++){
+          data.universe.slotElems[i].innerText = data.universe.slots[i];
+        }
+
+        const $code = doc.getElementById(`universe-${data.u}-code`);
+        if(data.startCode === 0xDD){
+          $code.innerText = "Net3"
+        }else if(data.startCode === 0x17){
+          $code.innerText = "Text"
+        }else if(data.startCode === 0xCF){
+          $code.innerText = "SIP"
+        }else if(data.startCode === 0xCC){
+          $code.innerText = "RDM"
+        }
+
+      }
+
+    }else{
+      d.draw();
+      updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+    }
+
+  }else if(updateType === "elementCache"){
+
+    data.orderedUniverses.forEach(univ => { 
+      for(let i = 0; i < 512; i++){
+        data.universes[univ].slotElems[i] = doc.getElementById(`${univ}-${i}`);
+      }
+      data.universes[univ].slotElemsSet = true;
+    });
+
+  }
+  
+
+}
+
+
+function updateElementsCache(device, univ, ordered){
+  device.update("elementCache", {
+    universes: univ,
+    orderedUniverses: ordered
+  });
+}
+
+
+
+
+
+
+
+// From https://github.com/hhromic/e131-node/blob/master/lib/e131.js
+function getMulticastGroup(universe) {
+  if (universe < 1 || universe > 63999) {
+    throw new RangeError('universe should be in the range [1-63999]');
+  }
+  return `239.255.${universe >> 8}.${universe & 0xff}`;
+  
+}
@@ -0,0 +1,29 @@
+table {
+  margin-bottom: 50px;
+  background-color: #333;
+}
+td,
+th {
+  width: 35px;
+}
+td {
+  background-color: black;
+  text-align: center;
+  border-radius: 3px;
+  color: white;
+  font-size: 13px;
+}
+th {
+  background-color: #222;
+  color: #ccc;
+  font-size: 11px;
+}
+td.data {
+  padding: 7px;
+  font-size: 12px;
+  text-align: left;
+}
+td.data em {
+  font-size: 14px;
+  color: #ff0033;
+}
@@ -0,0 +1,58 @@
+<header>
+  <h1><%= data.source %> sACN (E1.31)</h1>
+</header>
+
+
+<div id="universes">
+<% data.orderedUniverses.forEach(univ => { 
+  let universe = data.universes[univ];
+%>
+
+  <table id="universe-<%= univ %>">
+  <tr>
+    <td class="data" colspan="2">
+      Universe
+      <br><em><%= univ %></em>
+    </td>
+    <td class="data" colspan="2">
+      Priority
+      <br><em><%= universe.priority %></em>
+    </td>
+    <td class="data" colspan="7">
+      CID
+      <br><em><%= universe.cid %></em>
+    </td>
+    <td class="data" colspan="4">
+      IP
+      <br><em><%= data.ip %></em>
+    </td>
+    <td class="data" colspan="2">
+      Flavor
+      <br><em id="universe-<%= univ %>-code">0</em>
+    </td>
+  </tr>
+
+  <tr>
+    <th></th>
+    <% for(col=1; col<=16; col++){ %>
+      <th><%= col %></th>
+    <% } %>
+  </tr>
+
+  <% let slot = 0; %>
+  <% for(row=0; row<32; row++){ %>
+    <tr>
+      <th><%= row*16+1 %></th>
+    <% for(col=0; col<16; col++){ %>
+      <% slot++%>
+      <td id="<%= univ %>-<%= row*16+col %>" title="<%= univ %>/<%= slot %>"><%= universe.slots[slot-1] %></td>
+    <% } %>
+    </tr>
+  <% } %>
+
+  
+</table>
+
+<% }); %>
+
+</div>
@@ -0,0 +1,60 @@
+exports.defaultName = 'Dataton Watchout';
+exports.connectionType = 'TCPsocket';
+exports.heartbeatInterval = 500;
+exports.searchOptions = {
+  type: 'TCPport',
+  searchBuffer: Buffer.from('authenticate 1\n', 'ascii'),
+  testPort: 3040,
+  validateResponse (msg, info) {
+    return msg.toString().substring(0, 5) === 'Ready';
+  },
+};
+exports.defaultPort = 3040;
+
+exports.ready = function ready(device) {
+  device.send('authenticate 1\n');
+};
+
+exports.data = function data(device, message) {
+  const msg = message.toString();
+  const d = device;
+
+  if (msg.substring(0, 5) === 'Ready') {
+    d.send('getStatus\n');
+
+  }else if (msg.substring(0, 5) === 'Reply') {
+    const arr = msg.split(' ');
+
+    d.data.showName = '';
+    let i = 0;
+    while (arr[i][arr[i].length - 1] !== '"') {
+      i++;
+      d.data.showName += `${arr[i]} `;
+    }
+    d.data.showName = d.data.showName.substring(
+      1,
+      d.data.showName.length - 2
+    );
+
+    i--;
+    d.data.busy = arr[i + 2];
+    d.data.health = arr[i + 3];
+    d.data.displayOpen = arr[i + 4];
+    d.data.showActive = arr[i + 5];
+    d.data.programmerOnline = arr[i + 6];
+    d.data.position = Number(arr[i + 7]).toFixed(2);
+    d.data.rate = arr[i + 8];
+    d.data.standby = arr[i + 9];
+
+    this.deviceInfoUpdate(d, 'defaultName', d.data.showName);
+    d.draw();
+  }
+  // if(msg.substring(0, 5)=="Error"){
+  // 	device.data.error = msg.substring(6, 7);
+  // }
+  // console.log(msg)
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send('getStatus\n');
+};
@@ -0,0 +1,9 @@
+.warning {
+  color: #e9873a;
+}
+.error {
+  color: #ed5f5d;
+}
+.ok {
+  color: #79b757;
+}
@@ -1,16 +0,0 @@
-table{
-	font-family: PlexMono !important;
-}
-
-
-
-
-.warning{
-	color: #e9873a;
-}
-.error{
-	color: #ed5f5d;
-}
-.ok{
-	color: #79b757;
-}
@@ -1,56 +0,0 @@
-exports.defaultName = "Dataton Watchout";
-exports.connectionType = "TCPsocket";
-exports.heartbeatInterval = 500;
-exports.searchOptions = {
-	type: "TCPport",
-	searchBuffer: Buffer.from("authenticate 1\n", 'ascii'),
-	testPort: 3040,
-	validateResponse: function(msg, info){
-		return (msg.toString().substring(0, 5)=="Ready");
-	}
-}
-exports.defaultPort = 3040;
-
-exports.ready = function(device){
-	device.send("authenticate 1\n");
-}
-
-exports.data = function(device, message){
-	var msg = message.toString();
-	if(msg.substring(0, 5)=="Ready"){
-		device.send("getStatus\n");
-	}
-	if(msg.substring(0, 5)=="Reply"){
-		var arr = msg.split(" ");
-
-
-		device.data.showName = "";
-		var i = 0;
-		while(arr[i][arr[i].length-1]!='"'){
-			i++;
-			device.data.showName+=arr[i]+" ";
-		}
-		device.data.showName = device.data.showName.substring(1, device.data.showName.length-2);
-
-		i--;
-		device.data.busy = arr[i+2];
-		device.data.health = arr[i+3];
-		device.data.displayOpen = arr[i+4];
-		device.data.showActive = arr[i+5];
-		device.data.programmerOnline = arr[i+6];
-		device.data.position = Number(arr[i+7]).toFixed(2);
-		device.data.rate = arr[i+8];
-		device.data.standby = arr[i+9];
-
-		this.deviceInfoUpdate(device, "defaultName", device.data.showName);
-		device.draw();
-	}
-	// if(msg.substring(0, 5)=="Error"){
-	// 	device.data.error = msg.substring(6, 7);
-	// }
-	//console.log(msg)
-}
-
-exports.heartbeat = function(device){
-	device.send("getStatus\n");
-}
@@ -0,0 +1,206 @@
+exports.defaultName = 'X32 Mixer';
+exports.connectionType = 'osc-udp';
+exports.heartbeatInterval = 9000;
+exports.searchOptions = {
+  type: 'UDPsocket',
+  searchBuffer: Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]),
+  devicePort: 10023,
+  listenPort: 0,
+  validateResponse(msg, info) {
+    return msg.toString().indexOf('/xinfo') === 0;
+  },
+};
+exports.defaultPort = 10023;
+
+exports.ready = function ready(device) {
+  const d = device;
+  d.data.X32 = new Console();
+  d.send('/xinfo');
+
+  device.send('/batchsubscribe', [
+    { type: 's', value: '/ch/meters' },
+    { type: 's', value: '/meters/0' },
+    { type: 'i', value: 0 },
+    { type: 'i', value: 0 },
+    { type: 'i', value: 1 },
+  ]);
+
+  device.send('/batchsubscribe', [
+    { type: 's', value: '/main/meters' },
+    { type: 's', value: '/meters/2' },
+    { type: 'i', value: 0 },
+    { type: 'i', value: 0 },
+    { type: 'i', value: 1 },
+  ]);
+};
+
+function parseAddress(msg) {
+  const addr = msg.split('/');
+  addr.shift();
+  return addr;
+}
+
+exports.data = function data(device, oscData) {
+  this.deviceInfoUpdate(device, 'status', 'ok');
+
+  const d = 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];
+
+    this.deviceInfoUpdate(device, 'defaultName', d.data.X32.info.name);
+
+    d.send('/main/st/config/name');
+
+    for (let i = 0; i <= 32; i++) {
+      d.send(`/ch/${i.toString().padStart(2, '0')}/config/name`);
+    }
+    d.draw();
+  } else if (oscData.address.includes('/ch/meters')) {
+    const buf = Buffer.from(oscData.args[0]);
+
+    let offset = 4; // skip first 4 bytes they are the length bytes
+    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)
+        );
+      }
+
+      offset += 4;
+    }
+    d.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
+
+    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)
+        );
+      } else if (i === 23) {
+        // STEREO RIGHT METER
+        d.data.X32.main.stereo.meter[1] = Console.getBehringerDB(
+          buf.readFloatLE(offset)
+        );
+      }
+      offset += 4;
+    }
+  } else if (oscData.address.includes('/mix/fader')) {
+    const addr = parseAddress(oscData.address);
+
+    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]
+      );
+    } 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]);
+    }
+
+    d.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`);
+    } else if (addr[0] === 'main') {
+      d.data.X32.main.stereo.mute = oscData.args[0];
+      d.send(`/main/${addr[1]}/mix/fader`);
+    }
+    d.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';
+        }
+        d.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`);
+    }
+    d.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`);
+    } 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`);
+    }
+    d.draw();
+  } else {
+    // console.log(oscData);
+  }
+  // console.log(msg)
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send('/xremote');
+
+  device.send('/renew', [{ type: 's', value: '/ch/meters' }]);
+  device.send('/renew', [{ type: 's', value: '/main/meters' }]);
+};
+
+class Console {
+  constructor() {
+    this.inputs = {
+      channels: new Array(32).fill(0).map(() => ({
+        fader: 0,
+        faderDB: 0,
+        mute: 0,
+        name: 'end',
+        color: undefined,
+        meter: -90,
+      })),
+    };
+
+    this.main = {
+      stereo: {
+        fader: 0,
+        faderDB: 0,
+        mute: 0,
+        name: 'LR',
+        color: 7,
+        meter: new Array(2).fill(-90),
+      },
+    };
+
+    this.info = {
+      name: '',
+      ip: '',
+      firmware: '',
+      model: '',
+    };
+  }
+
+  static getBehringerDB(level) {
+    const f = level;
+    if (f >= 0.5) {
+      return f * 40 - 30;
+    }
+    if (f >= 0.25) {
+      return f * 80 - 50;
+    }
+    if (f >= 0.0625) {
+      return f * 160 - 70;
+    }
+    return f * 480 - 90;
+  }
+}
@@ -0,0 +1,156 @@
+td {
+  padding: 3px 16px !important;
+}
+tr td:first-child {
+  text-align: center;
+}
+
+.mute-0,
+.mute-1 {
+  width: 30px;
+  padding: 4px;
+  font-size: 14px;
+  border: black 2px solid;
+  text-align: center;
+  border-radius: 10px;
+}
+.mute-1 {
+  border-color: gray;
+  color: gray;
+}
+.mute-0 {
+  border-color: #fc3344;
+  color: #fc3344;
+}
+.white {
+  color: white;
+}
+
+.color {
+  padding: 1px 6px;
+  border-radius: 10px;
+  color: black;
+  font-family: PlexMono !important;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.color-0 {
+  /*Black*/
+  background-color: #212121;
+  color: white;
+}
+.color-1 {
+  /*Red*/
+  background-color: #fc545b;
+}
+.color-2 {
+  /*Green*/
+  background-color: #65b84d;
+}
+.color-3 {
+  /*Yellow*/
+  background-color: #fec52e;
+}
+.color-4 {
+  /*Blue*/
+  background-color: #157efb;
+}
+.color-5 {
+  /*Purple*/
+  background-color: #a453a5;
+}
+.color-6 {
+  /*Teal*/
+  background-color: #00dae3;
+}
+.color-7 {
+  /*White*/
+  background-color: #e0e0e0;
+}
+.color-8 {
+  /*Gray*/
+  background-color: #8c8c8c;
+}
+.color-9 {
+  /*Red*/
+  color: #fc545b;
+  border: #fc545b 1px solid;
+}
+.color-10 {
+  /*Green*/
+  color: #65b84d;
+  border: #65b84d 1px solid;
+}
+.color-11 {
+  /*Yellow*/
+  color: #fec52e;
+  border: #fec52e 1px solid;
+}
+.color-12 {
+  /*Blue*/
+  color: #157efb;
+  border: #157efb 1px solid;
+}
+.color-13 {
+  /*Purple*/
+  color: #a453a5;
+  border: #a453a5 1px solid;
+}
+.color-14 {
+  /*Teal*/
+  color: #00dae3;
+  border: #00dae3 1px solid;
+}
+.color-15 {
+  /*White*/
+  color: #e0e0e0;
+  border: #e0e0e0 1px solid;
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  margin: 0px;
+  width: 100%;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  margin-top: -9px;
+  height: 26px;
+  width: 8px;
+  border-radius: 4px;
+  background: #929292;
+}
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  background: #3b3b3b;
+  border-radius: 4px;
+}
+
+.infin {
+  font-size: 20px;
+  vertical-align: middle;
+}
+
+.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%
+  );
+}
+
+/* need to find a way to match the color of this with the table row */
+.meter-cover {
+  height: 100%;
+  background-color: rgb(22, 23, 25);
+  float: right;
+}
+
+table.cv-table tr:nth-child(odd) td div.meter div.meter-cover {
+  background-color: #292929;
+}
@@ -0,0 +1,63 @@
+<header>
+  <h1><%= listName %></h1>
+  <h2><%= data.model %></h2>
+</header>
+
+<table class="cv-table">
+  <tr>
+    <th width="40px"></th>
+    <th width="100px">Channel</th>
+    <th width="55px">Mute</th>
+    <th width="45px">dB</th>
+    <th width="160px">Fader</th>
+  </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>
+      <% let style = `style=width:${Math.abs(data.X32.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)}%`; %>
+      <div class="meter">
+        <div class="meter-cover" <%= style %>></div>
+      </div>
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value="<%= data.X32.main.stereo.fader*100 %>"
+        disabled />
+    </td>
+  </tr>
+  <% for(var i=0; i<32; i++){ %> <% if(data.X32.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>
+    </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>
+      <% let style = `style=width:${Math.abs(data.X32.inputs.channels[i].meter - 10)}%`; %>
+      <div class="meter">
+        <div class="meter-cover" <%= style %>></div>
+      </div>
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value="<%= data.X32.inputs.channels[i].fader*100 %>"
+        disabled />
+    </td>
+  </tr>
+  <% } %>
+</table>
+
+<% function formatAsDB(val){ if(val==-90){ return '-<span class="infin">&infin;</span>'; } if(val>0){
+return "+"+val.toFixed(1); } return val.toFixed(1); } %>
@@ -1,113 +0,0 @@
-td{
-	padding: 3px 16px !important;
-}
-tr td:first-child{
-	text-align: center;
-}
-
-.mute-0, .mute-1{
-	width: 30px;
-	padding: 4px;
-	font-size: 14px;
-	border: black 2px solid;
-	text-align: center;
-	border-radius: 10px;
-}
-.mute-1{
-	border-color: gray;
-	color: gray;
-}
-.mute-0{
-	border-color: #fc3344;
-	color: #fc3344;
-}
-.white{
-	color: white;
-}
-
-.color{
-	padding: 1px 6px;
-	border-radius: 10px;
-	color: black;
-	font-family: PlexMono !important;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap; 
-	overflow: hidden;
-}
-.color-0{ /*Black*/
-	background-color: #212121;
-	color: white;
-}
-.color-1{ /*Red*/
-	background-color: #fc545b;
-}
-.color-2{ /*Green*/
-	background-color: #65b84d;
-}
-.color-3{ /*Yellow*/
-	background-color: #fec52e;
-}
-.color-4{ /*Blue*/
-	background-color: #157efb;
-}
-.color-5{ /*Purple*/
-	background-color: #a453a5;
-}
-.color-6{ /*Teal*/
-	background-color: #00dae3;
-}
-.color-7{ /*White*/
-	background-color: #e0e0e0;
-}
-.color-8{ /*Gray*/
-	background-color: #8c8c8c;
-}
-.color-9{ /*Red*/
-	color: #fc545b;
-	border: #fc545b 1px solid;
-}
-.color-10{ /*Green*/
-	color: #65b84d;
-	border: #65b84d 1px solid;
-}
-.color-11{ /*Yellow*/
-	color: #fec52e;
-	border: #fec52e 1px solid;
-}
-.color-12{ /*Blue*/
-	color: #157efb;
-	border: #157efb 1px solid;
-}
-.color-13{ /*Purple*/
-	color: #a453a5;
-	border: #a453a5 1px solid;
-}
-.color-14{ /*Teal*/
-	color: #00dae3;
-	border: #00dae3 1px solid;
-}
-.color-15{ /*White*/
-	color: #e0e0e0;
-	border: #e0e0e0 1px solid;
-}
-
-input[type=range] {
-  -webkit-appearance: none;
-  margin: 0px;
-  width: 100%;
-}
-input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  margin-top: -9px;
-  height: 26px;
-  width: 8px;
-  border-radius: 4px;
-  background: #929292;
-}
-input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 8px;
-  background: #3b3b3b;
-  border-radius: 4px;
-}
@@ -1,47 +0,0 @@
-<header>
-	<h1><%= listName %></h1>
-	<h2><%= data.model %></h2>
-</header>
-
-<table class="cv-table">
-	<tr>
-		<th width="40px"></th>
-		<th width="100px">Channel</th>
-		<th width="55px">Mute</th>
-		<th width="45px">dB</th>
-		<th width="160px">Fader</th>
-	</tr>
-	<tr>
-		<td width="40px">LR</td>
-		<td width="100px"><div class="color color-8">MAIN OUT</div></td>
-		<td><div class="fader-mute mute-<%=data.stereoMute%>">M</div></td>
-		<td><%- formatAsDB(data.stereoFaderDB) %></td>
-		<td><input type="range" min="0" max="100" value="<%= data.stereoFader*100 %>" disabled></td>
-	</tr>
-	<% for(var i=0; i<32; i++){ %>
-		<% if(data.channelNames[i]=="end"){break;} %>
-		<tr>
-			<td><%= i+1 %></td>
-			<td><div class="color color-<%= data.channelColors[i] %>"><%- data.channelNames[i] || i+1 %></div></td>
-			<td><div class="fader-mute mute-<%=data.channelMutes[i]%>">M</div></td>
-			<td><%- formatAsDB(data.channelFadersDB[i]) %></td>
-			<td><input type="range" min="0" max="100" value="<%= data.channelFaders[i]*100 %>" disabled></td>
-		</tr>
-	<% } %>
-
-</table>
-
-
-
-<%
-function formatAsDB(val){
-	if(val==-90){
-		return "-&infin;";
-	}
-	if(val>0){
-		return "+"+val.toFixed(1);
-	}
-	return val.toFixed(1);
-}
-
-%>
@@ -1,129 +0,0 @@
-exports.defaultName = "X32 Mixer";
-exports.connectionType = "UDPsocket";
-exports.heartbeatInterval = 10000;
-exports.searchOptions = {
-	type: "UDPsocket",
-	searchBuffer: Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]),
-	devicePort: 10023,
-	listenPort: 0,
-	validateResponse: function(msg, info){
-		return (msg.toString().indexOf("/xinfo")==0);
-	}
-}
-exports.defaultPort = 10023;
-
-exports.ready = function(device){
-
-	device.data.channelFaders = new Array(32).fill(0);
-	device.data.channelFadersDB = new Array(32).fill(0);
-	device.data.channelMutes = new Array(32).fill(0);
-	device.data.channelNames = new Array(32).fill("end");
-	device.data.channelColors = new Array(32);
-
-	device.data.stereoFader = 0;
-	device.data.stereoFaderDB = 0;
-	device.data.stereoMute = 0;
-
-	device.send(Buffer.from("/xinfo"));
-
-
-	//device.send(Buffer.from("\x2f\x62\x61\x74\x63\x68\x73\x75\x62\x73\x63\x72\x69\x62\x65\x00\x2c\x73\x73\x69\x69\x69\x00\x00\x6d\x65\x74\x65\x72\x73\x2f\x30\x00\x00\x00\x00\x2f\x6d\x65\x74\x65\x72\x73\x2f\x30\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01"));
-	//device.send(Buffer.from("/batchsubscribe\x00,ssiii\x00\x00meters/0\x00\x00\x00\x00/meters/0\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01"));
-
-	//device.send(Buffer.from("/subscribe\x00,si\x00/-stat/solosw/01\x001"));
-
-}
-
-exports.data = function(device, buf){
-	this.deviceInfoUpdate(device, "status", "ok");
-	var msg = buf.toString().split('\u0000\u0000')
-
-	if(msg[0]=="/xinfo"){
-		this.deviceInfoUpdate(device, "defaultName", msg[4]);
-		device.data.name = msg[4];
-		device.data.ip = msg[2];
-		device.data.firmware = msg[7];
-		device.data.model = msg[5];
-
-
-		device.send(Buffer.from("/lr/mix/fader\u0000\u0000\u0000\u0000"));
-		device.send(Buffer.from("/lr/mix/on\u0000\u0000\u0000\u0000"));
-
-		for(var i=0; i<=32; i++){
-			device.send(Buffer.from("/ch/"+i.toString().padStart(2, "0")+"/config/name\u0000\u0000\u0000\u0000"));
-		}
-		device.draw();
-
-
-	}else if(msg[0]=="/meters/0"){
-		//console.log(msg)
-	}else if(msg[0].indexOf("/mix/fader")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelFaders[channel-1] = buf.readFloatBE(24);
-			device.data.channelFadersDB[channel-1] = convertToDBTheBehringerWay(buf.readFloatBE(24));
-		}else if(addr[0]=="lr"){
-			device.data.stereoFader = buf.readFloatBE(20);
-			device.data.stereoFaderDB = convertToDBTheBehringerWay(buf.readFloatBE(20));
-		}
-
-		device.draw();
-
-	}else if(msg[0].indexOf("/mix/on")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelMutes[channel-1] = buf[23];
-		}else if(addr[0]=="lr"){
-			device.data.stereoMute = buf[19];
-		}
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/fader\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/name")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelNames[channel-1] = msg[2];
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/config/color\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/color")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelColors[channel-1] = buf.readInt8(27);
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/on\u0000\u0000\u0000\u0000"));
-
-	}else{
-		//console.log(msg)
-	}
-	//console.log(msg)
-
-}
-
-exports.heartbeat = function(device){
-	device.send(Buffer.from("/xremote"));
-}
-
-
-function parseAddress(msg){
-	var addr = msg.split("/");
-	addr.shift();
-	return addr;
-}
-
-function convertToDBTheBehringerWay(f){
-	if(f>=0.5){
-		return f*40-30;
-	}else if(f>=0.25){
-		return f*80-50;
-	}else if(f>=0.0625){
-		return f*160-70;
-	}else{
-		return f*480-90;
-	}
-}
-
@@ -0,0 +1,129 @@
+exports.defaultName = 'X Air Mixer';
+exports.connectionType = 'UDPsocket';
+exports.heartbeatInterval = 10000;
+exports.searchOptions = {
+  type: 'UDPsocket',
+  searchBuffer: Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]),
+  devicePort: 10024,
+  listenPort: 0,
+  validateResponse(msg, info) {
+    return msg.toString().indexOf('/xinfo') === 0;
+  },
+};
+exports.defaultPort = 10024;
+
+exports.ready = function ready(device) {
+  const d = device;
+  d.data.channelFaders = new Array(32).fill(0);
+  d.data.channelFadersDB = new Array(32).fill(0);
+  d.data.channelMutes = new Array(32).fill(0);
+  d.data.channelNames = new Array(32).fill('end');
+  d.data.channelColors = new Array(32);
+
+  d.data.stereoFader = 0;
+  d.data.stereoFaderDB = 0;
+  d.data.stereoMute = 0;
+
+  d.send('/xinfo');
+
+  // device.send(Buffer.from("\x2f\x62\x61\x74\x63\x68\x73\x75\x62\x73\x63\x72\x69\x62\x65\x00\x2c\x73\x73\x69\x69\x69\x00\x00\x6d\x65\x74\x65\x72\x73\x2f\x30\x00\x00\x00\x00\x2f\x6d\x65\x74\x65\x72\x73\x2f\x30\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01"));
+  // device.send(Buffer.from("/batchsubscribe\x00,ssiii\x00\x00meters/0\x00\x00\x00\x00/meters/0\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01"));
+  // device.send(Buffer.from("/subscribe\x00,si\x00/-stat/solosw/01\x001"));
+};
+
+function parseAddress(msg) {
+  const addr = msg.split('/');
+  addr.shift();
+  return addr;
+}
+
+function convertToDBTheBehringerWay(f) {
+  if (f >= 0.5) {
+    return f * 40 - 30;
+  }
+  if (f >= 0.25) {
+    return f * 80 - 50;
+  }
+  if (f >= 0.0625) {
+    return f * 160 - 70;
+  }
+  return f * 480 - 90;
+}
+
+exports.data = function data(device, buf) {
+  this.deviceInfoUpdate(device, 'status', 'ok');
+  const msg = buf.toString().split('\x00');
+  const d = device;
+
+  if (msg[0] === '/xinfo') {
+    if (msg[7].length > 0) {
+      d.data.name = msg[7];
+    } else {
+      d.data.name = msg[6];
+    }
+
+    d.data.ip = msg[5];
+    d.data.firmware = msg[13];
+    d.data.model = msg[9];
+    this.deviceInfoUpdate(d, 'defaultName', d.data.name);
+
+    d.send('/lr/mix/fader\x00\x00\x00\x00');
+    d.send('/lr/mix/on\x00\x00\x00\x00');
+
+    for (let i = 0; i <= 32; i++) {
+      d.send(
+        Buffer.from(
+          `/ch/${i.toString().padStart(2, '0')}/config/name\x00\x00\x00\x00`
+        )
+      );
+    }
+    d.draw();
+  } else if (msg[0] === '/meters/0') {
+    // console.log(msg)
+  } else if (msg[0].indexOf('/mix/fader') >= 0) {
+    const addr = parseAddress(msg[0]);
+    const channel = Number(addr[1]);
+
+    if (addr[0] === 'ch') {
+      d.data.channelFaders[channel - 1] = buf.readFloatBE(24);
+      d.data.channelFadersDB[channel - 1] = convertToDBTheBehringerWay(
+        buf.readFloatBE(24)
+      );
+    } else if (addr[0] === 'lr') {
+      d.data.stereoFader = buf.readFloatBE(20);
+      d.data.stereoFaderDB = convertToDBTheBehringerWay(buf.readFloatBE(20));
+    }
+
+    d.draw();
+  } else if (msg[0].indexOf('/mix/on') >= 0) {
+    const addr = parseAddress(msg[0]);
+    const channel = Number(addr[1]);
+
+    if (addr[0] === 'ch') {
+      d.data.channelMutes[channel - 1] = buf[23];
+    } else if (addr[0] === 'lr') {
+      d.data.stereoMute = buf[19];
+    }
+    device.draw();
+    device.send(`/ch/${addr[1]}/mix/fader\x00\x00\x00\x00`);
+  } else if (msg[0].indexOf('/config/name') > 0) {
+    const addr = parseAddress(msg[0]);
+    const channel = Number(addr[1]);
+    d.data.channelNames[channel - 1] = msg[4];
+    d.draw();
+    d.send(`/ch/${addr[1]}/config/color\x00\x00\x00\x00`);
+  } else if (msg[0].indexOf('/config/color') > 0) {
+    const addr = parseAddress(msg[0]);
+    const channel = Number(addr[1]);
+    d.data.channelColors[channel - 1] = buf.readInt8(27);
+    d.draw();
+    d.send(`/ch/${addr[1]}/mix/on\x00\x00\x00\x00`);
+  } else {
+    // console.log(msg)
+  }
+  // console.log(msg)
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send('/xremote');
+};
@@ -0,0 +1,134 @@
+td {
+  padding: 3px 16px !important;
+}
+tr td:first-child {
+  text-align: center;
+}
+
+.mute-0,
+.mute-1 {
+  width: 30px;
+  padding: 4px;
+  font-size: 14px;
+  border: black 2px solid;
+  text-align: center;
+  border-radius: 10px;
+}
+.mute-1 {
+  border-color: gray;
+  color: gray;
+}
+.mute-0 {
+  border-color: #fc3344;
+  color: #fc3344;
+}
+.white {
+  color: white;
+}
+
+.color {
+  padding: 1px 6px;
+  border-radius: 10px;
+  color: black;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.color-0 {
+  /*Black*/
+  background-color: #212121;
+  color: white;
+}
+.color-1 {
+  /*Red*/
+  background-color: #fc545b;
+}
+.color-2 {
+  /*Green*/
+  background-color: #65b84d;
+}
+.color-3 {
+  /*Yellow*/
+  background-color: #fec52e;
+}
+.color-4 {
+  /*Blue*/
+  background-color: #157efb;
+}
+.color-5 {
+  /*Purple*/
+  background-color: #a453a5;
+}
+.color-6 {
+  /*Teal*/
+  background-color: #00dae3;
+}
+.color-7 {
+  /*White*/
+  background-color: #e0e0e0;
+}
+.color-8 {
+  /*Gray*/
+  background-color: #8c8c8c;
+}
+.color-9 {
+  /*Red*/
+  color: #fc545b;
+  border: #fc545b 1px solid;
+}
+.color-10 {
+  /*Green*/
+  color: #65b84d;
+  border: #65b84d 1px solid;
+}
+.color-11 {
+  /*Yellow*/
+  color: #fec52e;
+  border: #fec52e 1px solid;
+}
+.color-12 {
+  /*Blue*/
+  color: #157efb;
+  border: #157efb 1px solid;
+}
+.color-13 {
+  /*Purple*/
+  color: #a453a5;
+  border: #a453a5 1px solid;
+}
+.color-14 {
+  /*Teal*/
+  color: #00dae3;
+  border: #00dae3 1px solid;
+}
+.color-15 {
+  /*White*/
+  color: #e0e0e0;
+  border: #e0e0e0 1px solid;
+}
+
+input[type='range'] {
+  -webkit-appearance: none;
+  margin: 0px;
+  width: 100%;
+}
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  margin-top: -9px;
+  height: 26px;
+  width: 8px;
+  border-radius: 4px;
+  background: #929292;
+}
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  background: #3b3b3b;
+  border-radius: 4px;
+}
+
+.infin{
+  font-size: 20px;
+  vertical-align: middle;
+}
@@ -0,0 +1,51 @@
+<header>
+  <h1><%= listName %></h1>
+  <h2><%= data.model %></h2>
+</header>
+
+<table class="cv-table">
+  <tr>
+    <th width="40px"></th>
+    <th width="100px">Channel</th>
+    <th width="55px">Mute</th>
+    <th width="45px">dB</th>
+    <th width="160px">Fader</th>
+  </tr>
+  <tr>
+    <td width="40px">LR</td>
+    <td width="100px"><div class="color color-8">MAIN OUT</div></td>
+    <td><div class="fader-mute mute-<%=data.stereoMute%>">M</div></td>
+    <td><%= formatAsDB(data.stereoFaderDB) %></td>
+    <td>
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value="<%= data.stereoFader*100 %>"
+        disabled />
+    </td>
+  </tr>
+  <% for(var i=0; i<32; i++){ %> <% if(data.channelNames[i]=="end"){break;} %>
+  <tr>
+    <td><%= i+1 %></td>
+    <td>
+      <div class="color color-<%= data.channelColors[i] %>">
+        <%- data.channelNames[i] || i+1 %>
+      </div>
+    </td>
+    <td><div class="fader-mute mute-<%=data.channelMutes[i]%>">M</div></td>
+    <td><%= formatAsDB(data.channelFadersDB[i]) %></td>
+    <td>
+      <input
+        type="range"
+        min="0"
+        max="100"
+        value="<%= data.channelFaders[i]*100 %>"
+        disabled />
+    </td>
+  </tr>
+  <% } %>
+</table>
+
+<% function formatAsDB(val){ if(val==-90){ return '-<span class="infin">&infin;</span>'; } if(val>0){
+return "+"+val.toFixed(1); } return val.toFixed(1); } %>
@@ -1,113 +0,0 @@
-td{
-	padding: 3px 16px !important;
-}
-tr td:first-child{
-	text-align: center;
-}
-
-.mute-0, .mute-1{
-	width: 30px;
-	padding: 4px;
-	font-size: 14px;
-	border: black 2px solid;
-	text-align: center;
-	border-radius: 10px;
-}
-.mute-1{
-	border-color: gray;
-	color: gray;
-}
-.mute-0{
-	border-color: #fc3344;
-	color: #fc3344;
-}
-.white{
-	color: white;
-}
-
-.color{
-	padding: 1px 6px;
-	border-radius: 10px;
-	color: black;
-	font-family: PlexMono !important;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap; 
-	overflow: hidden;
-}
-.color-0{ /*Black*/
-	background-color: #212121;
-	color: white;
-}
-.color-1{ /*Red*/
-	background-color: #fc545b;
-}
-.color-2{ /*Green*/
-	background-color: #65b84d;
-}
-.color-3{ /*Yellow*/
-	background-color: #fec52e;
-}
-.color-4{ /*Blue*/
-	background-color: #157efb;
-}
-.color-5{ /*Purple*/
-	background-color: #a453a5;
-}
-.color-6{ /*Teal*/
-	background-color: #00dae3;
-}
-.color-7{ /*White*/
-	background-color: #e0e0e0;
-}
-.color-8{ /*Gray*/
-	background-color: #8c8c8c;
-}
-.color-9{ /*Red*/
-	color: #fc545b;
-	border: #fc545b 1px solid;
-}
-.color-10{ /*Green*/
-	color: #65b84d;
-	border: #65b84d 1px solid;
-}
-.color-11{ /*Yellow*/
-	color: #fec52e;
-	border: #fec52e 1px solid;
-}
-.color-12{ /*Blue*/
-	color: #157efb;
-	border: #157efb 1px solid;
-}
-.color-13{ /*Purple*/
-	color: #a453a5;
-	border: #a453a5 1px solid;
-}
-.color-14{ /*Teal*/
-	color: #00dae3;
-	border: #00dae3 1px solid;
-}
-.color-15{ /*White*/
-	color: #e0e0e0;
-	border: #e0e0e0 1px solid;
-}
-
-input[type=range] {
-  -webkit-appearance: none;
-  margin: 0px;
-  width: 100%;
-}
-input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  margin-top: -9px;
-  height: 26px;
-  width: 8px;
-  border-radius: 4px;
-  background: #929292;
-}
-input[type=range]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 8px;
-  background: #3b3b3b;
-  border-radius: 4px;
-}
@@ -1,47 +0,0 @@
-<header>
-	<h1><%= listName %></h1>
-	<h2><%= data.model %></h2>
-</header>
-
-<table class="cv-table">
-	<tr>
-		<th width="40px"></th>
-		<th width="100px">Channel</th>
-		<th width="55px">Mute</th>
-		<th width="45px">dB</th>
-		<th width="160px">Fader</th>
-	</tr>
-	<tr>
-		<td width="40px">LR</td>
-		<td width="100px"><div class="color color-8">MAIN OUT</div></td>
-		<td><div class="fader-mute mute-<%=data.stereoMute%>">M</div></td>
-		<td><%- formatAsDB(data.stereoFaderDB) %></td>
-		<td><input type="range" min="0" max="100" value="<%= data.stereoFader*100 %>" disabled></td>
-	</tr>
-	<% for(var i=0; i<32; i++){ %>
-		<% if(data.channelNames[i]=="end"){break;} %>
-		<tr>
-			<td><%= i+1 %></td>
-			<td><div class="color color-<%= data.channelColors[i] %>"><%- data.channelNames[i] || i+1 %></div></td>
-			<td><div class="fader-mute mute-<%=data.channelMutes[i]%>">M</div></td>
-			<td><%- formatAsDB(data.channelFadersDB[i]) %></td>
-			<td><input type="range" min="0" max="100" value="<%= data.channelFaders[i]*100 %>" disabled></td>
-		</tr>
-	<% } %>
-
-</table>
-
-
-
-<%
-function formatAsDB(val){
-	if(val==-90){
-		return "-&infin;";
-	}
-	if(val>0){
-		return "+"+val.toFixed(1);
-	}
-	return val.toFixed(1);
-}
-
-%>
@@ -1,129 +0,0 @@
-exports.defaultName = "X Air Mixer";
-exports.connectionType = "UDPsocket";
-exports.heartbeatInterval = 10000;
-exports.searchOptions = {
-	type: "UDPsocket",
-	searchBuffer: Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]),
-	devicePort: 10024,
-	listenPort: 0,
-	validateResponse: function(msg, info){
-		return (msg.toString().indexOf("/xinfo")==0);
-	}
-}
-exports.defaultPort = 10024;
-
-exports.ready = function(device){
-
-	device.data.channelFaders = new Array(32).fill(0);
-	device.data.channelFadersDB = new Array(32).fill(0);
-	device.data.channelMutes = new Array(32).fill(0);
-	device.data.channelNames = new Array(32).fill("end");
-	device.data.channelColors = new Array(32);
-
-	device.data.stereoFader = 0;
-	device.data.stereoFaderDB = 0;
-	device.data.stereoMute = 0;
-
-	device.send(Buffer.from("/xinfo"));
-
-
-	//device.send(Buffer.from("\x2f\x62\x61\x74\x63\x68\x73\x75\x62\x73\x63\x72\x69\x62\x65\x00\x2c\x73\x73\x69\x69\x69\x00\x00\x6d\x65\x74\x65\x72\x73\x2f\x30\x00\x00\x00\x00\x2f\x6d\x65\x74\x65\x72\x73\x2f\x30\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01"));
-	//device.send(Buffer.from("/batchsubscribe\x00,ssiii\x00\x00meters/0\x00\x00\x00\x00/meters/0\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x00\x01"));
-
-	//device.send(Buffer.from("/subscribe\x00,si\x00/-stat/solosw/01\x001"));
-
-}
-
-exports.data = function(device, buf){
-	this.deviceInfoUpdate(device, "status", "ok");
-	var msg = buf.toString().split('\u0000\u0000')
-
-	if(msg[0]=="/xinfo"){
-		this.deviceInfoUpdate(device, "defaultName", msg[4]);
-		device.data.name = msg[4];
-		device.data.ip = msg[2];
-		device.data.firmware = msg[7];
-		device.data.model = msg[5];
-
-
-		device.send(Buffer.from("/lr/mix/fader\u0000\u0000\u0000\u0000"));
-		device.send(Buffer.from("/lr/mix/on\u0000\u0000\u0000\u0000"));
-
-		for(var i=0; i<=32; i++){
-			device.send(Buffer.from("/ch/"+i.toString().padStart(2, "0")+"/config/name\u0000\u0000\u0000\u0000"));
-		}
-		device.draw();
-
-
-	}else if(msg[0]=="/meters/0"){
-		//console.log(msg)
-	}else if(msg[0].indexOf("/mix/fader")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelFaders[channel-1] = buf.readFloatBE(24);
-			device.data.channelFadersDB[channel-1] = convertToDBTheBehringerWay(buf.readFloatBE(24));
-		}else if(addr[0]=="lr"){
-			device.data.stereoFader = buf.readFloatBE(20);
-			device.data.stereoFaderDB = convertToDBTheBehringerWay(buf.readFloatBE(20));
-		}
-
-		device.draw();
-
-	}else if(msg[0].indexOf("/mix/on")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelMutes[channel-1] = buf[23];
-		}else if(addr[0]=="lr"){
-			device.data.stereoMute = buf[19];
-		}
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/fader\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/name")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelNames[channel-1] = msg[2];
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/config/color\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/color")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelColors[channel-1] = buf.readInt8(27);
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/on\u0000\u0000\u0000\u0000"));
-
-	}else{
-		//console.log(msg)
-	}
-	//console.log(msg)
-
-}
-
-exports.heartbeat = function(device){
-	device.send(Buffer.from("/xremote"));
-}
-
-
-function parseAddress(msg){
-	var addr = msg.split("/");
-	addr.shift();
-	return addr;
-}
-
-function convertToDBTheBehringerWay(f){
-	if(f>=0.5){
-		return f*40-30;
-	}else if(f>=0.25){
-		return f*80-50;
-	}else if(f>=0.0625){
-		return f*160-70;
-	}else{
-		return f*480-90;
-	}
-}
-
@@ -1,215 +1,180 @@
-
-const { remote } = require('electron');
 const { ipcRenderer } = require('electron');
-//let currWindow = remote.BrowserWindow.getFocusedWindow();
-const { v4: uuid } = require('uuid');
-let ejs = require('ejs');

-let net = require("net");
-
-
-
-let DEVICE = require("./src/device.js");
-let PLUGINS = require("./src/plugins.js");
-let SEARCH = require("./src/search.js");
-let VIEW = require("./src/view.js");
-let SAVESLOTS = require("./src/saveSlots.js");
+const DEVICE = require('./src/device.js');
+const PLUGINS = require('./src/plugins.js');
+const SEARCH = require('./src/search.js');
+const VIEW = require('./src/view.js');
+const SAVESLOTS = require('./src/saveSlots.js');

 window.addDevice = DEVICE.addDevice;
+window.searchAll = SEARCH.searchAll;

+window.init = function init() {
+  console.log('init!');

+  ipcRenderer.send('enableDeviceDropdown');
+  ipcRenderer.send('enableSearchAll');

-window.init = function(){
-
-  console.log("init!")
-
-  ipcRenderer.send("enableDeviceDropdown");
-  ipcRenderer.send("enableSearchAll");
-  
-  PLUGINS.init(function(){
+  PLUGINS.init(() => {
    VIEW.init();
    SAVESLOTS.loadDevices();
    SAVESLOTS.loadSlot(1);
  });

-  document.getElementById("device-settings-table").onclick = function(e){
+  document.getElementById('search-button').onclick = (e) => {
+    SEARCH.searchAll();
+  };
+
+  document.getElementById('device-settings-table').onclick = function settingsClick(e) {
    e.stopPropagation();
-  }
-  document.getElementById("device-settings-name").onchange = function(e){
+  };
+  
+  document.getElementById('device-settings-name').onchange = function nameChange(e) {
    e.stopPropagation();
-    DEVICE.changeActiveName(e.target.value)
-  }
-  document.getElementById("device-settings-plugin-dropdown").onchange = function(e){
+    DEVICE.changeActiveName(e.target.value);
+  };
+  
+  document.getElementById('device-settings-plugin-dropdown').onchange = function dropdownChange(e) {
    e.stopPropagation();
-    DEVICE.changeActiveType(e.target.value)
-  }
-  document.getElementById("device-settings-ip").onchange = function(e){
+    DEVICE.changeActiveType(e.target.value);
+  };
+
+  document.getElementById('device-settings-ip').onchange = function ipChange(e) {
    e.stopPropagation();
-    DEVICE.changeActiveIP(e.target.value)
-  }
-  document.getElementById("device-settings-port").onchange = function(e){
+    DEVICE.changeActiveIP(e.target.value);
+  };
+
+  document.getElementById('device-settings-port').onchange = function portChange(e) {
    e.stopPropagation();
-    DEVICE.changeActivePort(e.target.value)
-  }
-  document.getElementById("device-settings-pin").onchange = function(e){
+    DEVICE.changeActivePort(e.target.value);
+  };
+
+  document.getElementById('device-settings-pin').onchange = function pinChange(e) {
    e.stopPropagation();
-    if(e.target.checked){
+    if (e.target.checked) {
      VIEW.pinActiveDevice();
-    }else{
+    } else {
      VIEW.unpinActiveDevice();
    }
-  }
+  };

-  document.getElementById("save-slot-1").onclick = function(e){
-      e.stopPropagation();
-      SAVESLOTS.loadSlot(1);
-  }
-  document.getElementById("save-slot-2").onclick = function(e){
-      e.stopPropagation();
-      SAVESLOTS.loadSlot(2);
-  }
-  document.getElementById("save-slot-3").onclick = function(e){
-      e.stopPropagation();
-      SAVESLOTS.loadSlot(3);
-  }
-
-  document.getElementById("refresh-device-button").onclick = function(e){
+  document.getElementById('save-slot-1').onclick = function slot1click(e) {
    e.stopPropagation();
-      DEVICE.refreshActive()
-  }
+    SAVESLOTS.loadSlot(1);
+  };

-  document.getElementById("device-list").onclick = function(e){
-      e.stopPropagation();
-      var deviceID = e.srcElement.id;
-      if(e.srcElement.id != "device-list"){
-          VIEW.switchDevice(deviceID);
-      }
-  }
+  document.getElementById('save-slot-2').onclick = function slot2click(e) {
+    e.stopPropagation();
+    SAVESLOTS.loadSlot(2);
+  };

-  document.getElementById("add-device-button").onchange = function(e){
+  document.getElementById('save-slot-3').onclick = function slot3click(e) {
+    e.stopPropagation();
+    SAVESLOTS.loadSlot(3);
+  };

-      DEVICE.registerDevice({
+  document.getElementById('refresh-device-button').onclick = function refreshClick(e) {
+    e.stopPropagation();
+    DEVICE.refreshActive();
+  };
+
+  document.getElementById('device-list').onclick = function listClick(e) {
+    e.stopPropagation();
+    const deviceID = e.srcElement.id;
+    if (e.srcElement.id !== 'device-list') {
+      VIEW.switchDevice(deviceID);
+    }
+  };
+
+  document.getElementById('add-device-button').onchange = function addDeviceClick(e) {
+    DEVICE.registerDevice({
      type: e.target.value,
-      defaultName: "New Device",
+      defaultName: 'New Device',
      port: undefined,
-      addresses: []
+      addresses: [],
    });
    e.target.selectedIndex = 0;

    SAVESLOTS.saveAll();
+  };

-  }
-
-
-
-  document.onkeyup = function(e){
-    switch(e.key){
-      case "ArrowUp":
-        VIEW.selectPreviousDevice();
-        break;
-      case "ArrowDown":
-        VIEW.selectNextDevice();
-        break;
-      case "Tab":
-        if(document.activeElement.tagName!="INPUT" && document.activeElement.tagName!="SELECT"){
-          document.getElementById("device-settings-name").select();
-        }
-        break;
-    }
-  }
-
-
-  // document.getElementById("device-settings-delete").onclick = function(e){
-  //  e.stopPropagation();
-  //  confirm("Are you sure you want to delete device \n\""+VIEW.getActiveDevice().name+"\"?")
-  // }
-
-
-
-  document.getElementById("device-list-col").onclick = function(e){
+  document.onkeyup = function keyUp(e) {
+    if(e.key === 'ArrowUp'){
+      VIEW.selectPreviousDevice();
    
-      try{
-          document.querySelector("#device-list .active-device").classList.remove("active-device");
-          ipcRenderer.send("disableDeviceDropdown", "");
-      }catch(err){
-        //console.log(err)
+    }else if(e.key === 'ArrowDown'){
+      VIEW.selectNextDevice();
+
+    }else if(e.key === 'Tab'){
+      if (
+        document.activeElement.tagName !== 'INPUT' &&
+        document.activeElement.tagName !== 'SELECT'
+      ) {
+        document.getElementById('device-settings-name').select();
      }
-      try{
-          document.getElementsByClassName("active-device-outline")[0].classList.remove("active-device-outline");
-      }catch(err){
-        //console.log(err)
-      }
-        
+    }
+
+  };
+
+  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", function(event, message){
-  if(!message){
+ipcRenderer.on('setActiveDevicePinned', (event, message) => {
+  if (!message) {
    VIEW.unpinActiveDevice();
-  }else{
+  } else {
    VIEW.pinActiveDevice();
  }
 });

-ipcRenderer.on("doSearch", function(event, message){
+ipcRenderer.on('doSearch', (event, message) => {
  window.searchAll();
 });

-ipcRenderer.on("doDelete", function(event, message){
+ipcRenderer.on('doDelete', (event, message) => {
  DEVICE.deleteActive();
 });

-ipcRenderer.on("resetViews", function(event, message){
+ipcRenderer.on('resetViews', (event, message) => {
  SAVESLOTS.resetSlots();
 });

-ipcRenderer.on("doSlots1", function(event, message){
+ipcRenderer.on('doSlots1', (event, message) => {
  SAVESLOTS.loadSlot(1);
 });
-ipcRenderer.on("doSlots2", function(event, message){
+
+ipcRenderer.on('doSlots2', (event, message) => {
  SAVESLOTS.loadSlot(2);
 });
-ipcRenderer.on("doSlots3", function(event, message){
+
+ipcRenderer.on('doSlots3', (event, message) => {
  SAVESLOTS.loadSlot(3);
 });

-
-
-
-
-
-
-function log(type, message){
-  
-}
-
-function switchClass(element, className){
-  try{
+function switchClass(element, className) {
+  try {
    document.getElementsByClassName(className)[0].classList.remove(className);
-  }catch(err){
-    //console.log(err)
+  } catch (err) {
+    // console.log(err)
  }
  element.classList.add(className);
 }
-window.switchClass = function(element, className){
-  switchClass(element, className);
-}
-
-
-
+window.switchClass = switchClass;
@@ -1,96 +1,106 @@
-body{
-	color: #6e6c6f;
-	font-family: sans-serif;
-	margin: 0px;
-	margin-top: 40px;
-	user-select: none;
-	/*overflow-x: hidden;*/
-	visibility: visible !important;
-	max-width: 100%;
-    padding: 10px;
-    
+body {
+  font-family: sans-serif;
+  margin: 0px;
+  margin-top: 40px;
+  user-select: none;
+  visibility: visible !important;
+  max-width: 100%;
+  padding: 10px;
 }
-header{
-	position: fixed;
-	top: 0px;
-	left: 0px;
-	height: 36px;
-	width: 100%;
-	box-sizing:content-box;
+header {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 36px;
+  width: 100%;
+  box-sizing: content-box;
+  white-space: nowrap;
+  overflow: hidden;

-	background-color: rgba(0, 0, 0, 0.2);
-	border-bottom: black 1px solid;
-	-webkit-app-region: drag;
+  background-color: #111111;
+  border-bottom: black 1px solid;
+  -webkit-app-region: drag;
 }
-h1, h2, h3, h4, h5, h6{
-	color: white;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: white;
 }

-header h1, header h2{
-	margin: 8px;
-	margin-left: 20px;
-	font-weight: normal;
-	font-size: 18px;
-	float: left;
+header h1,
+header h2 {
+  margin: 8px;
+  margin-left: 20px;
+  font-weight: normal;
+  font-size: 18px;
+  float: left;
 }
-header h2{
-	color: #b6b6b6;
+header h2 {
+  color: #b6b6b6;
 }

-
-table.cv-table{
-	border: none;
-	table-layout: fixed;
-	border-collapse: collapse;
-	color: #dddddd;
-	font-size: 15px;
+table.cv-table {
+  border: none;
+  table-layout: fixed;
+  border-collapse: collapse;
+  color: #dddddd;
+  font-size: 15px;
 }
-	table.cv-table th{
-		padding: 6px 16px;
-		color: #969696;
-		text-align: left;
-		border-bottom: #555 1px solid;
-		border-bottom: #555 1px solid;
-		font-weight: normal;
-		background-color: #1e1e1e;
-	}
-	table.cv-table tr:nth-child(odd){
-		background-color: #292929;
-	}
-	table.cv-table tr td:first-child{
-		padding-left: 10px;
-		-webkit-border-top-left-radius: 10px;
-	    -webkit-border-bottom-left-radius: 10px;
-	}
-	table.cv-table tr td:last-child{
-		padding-right: 10px;
-		-webkit-border-top-right-radius: 10px;
-	    -webkit-border-bottom-right-radius: 10px;
-	}
-	table.cv-table td{
-		padding: 7px 16px;
-	}
-
-
-
-
-
-.not-responding{
+table.cv-table th {
+  padding: 6px 16px;
+  color: #969696;
+  text-align: left;
+  border-bottom: #555 1px solid;
+  border-bottom: #555 1px solid;
+  font-weight: normal;
+  background-color: #1e1e1e;
 }
-.not-responding em{
-	background-color: #3f3f3f;
-	color: white;
-	padding: 2px 10px;
-	display: inline-block;
-	border-radius: 5px;
+table.cv-table tr:nth-child(odd) {
+  background-color: #292929;
+}
+table.cv-table tr td:first-child {
+  padding-left: 10px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+table.cv-table tr td:last-child {
+  padding-right: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+table.cv-table td {
+  padding: 7px 16px;
 }

-@font-face {
-    font-family: PlexMono;
-    src: url("media/IBMPlexMono-Text.otf") format("opentype");
+.not-responding {
+  color: white;
+}
+.not-responding em {
+  background-color: #3f3f3f;
+  padding: 2px 10px;
+  display: inline-block;
+  border-radius: 5px;
+}
+.not-responding hr {
+  margin-top: 100px;
+  border-color: #333;
 }

-@font-face {
-    font-family: PlexSans;
-    src: url("media/IBMPlexSans-Light.otf") format("opentype");
+.device-info {
+  color: #aaa;
+}
+.device-info h4,
+.device-info h2 {
+  color: #bbb;
+}
+.device-info em {
+  background-color: #3f3f3f;
+  padding: 2px 5px;
+  display: inline-block;
+  border-radius: 5px;
+  color: #fdea08;
+  margin: 1px;
 }
@@ -1,274 +1,317 @@
 const { v4: uuid } = require('uuid');
-let osc = require("osc");
-let net = require("net");
-let udp = require('dgram');
-var _ = require('lodash/function');
+const osc = require('osc');
+const net = require('net');
+const udp = require('dgram');
+const _ = require('lodash');

+const PLUGINS = require('./plugins.js');
+const VIEW = require('./view.js');
+const SAVESLOTS = require('./saveSlots.js');

-let PLUGINS = require("./plugins.js");
-let VIEW = require("./view.js");
-let SAVESLOTS = require("./saveSlots.js");
-
-
-var devices = {};
+const devices = {};
 module.exports.all = devices;

+function registerDevice(newDevice) {
+  if (PLUGINS.all[newDevice.type] === undefined) {
+    console.error(`Plugin for device ${newDevice.type} does not exist.`);
+    return true;
+  }

-registerDevice = function(newDevice){
+  const initElements = document.getElementsByClassName('init');
+  for (let i = 0; i < initElements.length; i++) {
+    initElements[i].style.display = 'none';
+  }

-	console.log(PLUGINS.all)
+  // only register device if it hasn't already been added
+  if (newDevice.addresses.length > 0) {
+    const existing = _.find(devices, (e) => {
+      const typeMatch = e.type === newDevice.type;
+      const addressMatch =
+        JSON.stringify(e.addresses) === JSON.stringify(newDevice.addresses);
+      return typeMatch && addressMatch;
+    });

-	if(PLUGINS.all[newDevice.type]==undefined){
-		console.error("Plugin for device "+newDevice.type+" does not exist.");
-		return true;
-	}
+    if (existing) {
+      return false;
+    }
+  }

-	var initElements = document.getElementsByClassName('init');
-	for(var i=0; i<initElements.length; i++){
-		initElements[i].style.display="none";
-	}
+  // console.log("Registered new "+newDevice.type)

-	// only register device if it hasn't already been added
-	if(newDevice.addresses.length>0){
-		for(var i in devices){
-			if(devices[i].type==newDevice.type && JSON.stringify(devices[i].addresses) == JSON.stringify(newDevice.addresses)){
-				// This device has already been added
-				infoUpdate(devices[i], "status", "ok");
-				return false;
-			}
-		}
-	}
-
-	//console.log("Registered new "+newDevice.type)
-
-	var id = newDevice.id || uuid();
-	devices[id] = {
-		id: id,
-		status: "new",
-		type: newDevice.type,
-		displayName: newDevice.displayName,
-		defaultName: newDevice.defaultName,
-		port: newDevice.port,
-		addresses: newDevice.addresses,
-		data: {},
-		pinIndex: false,
-		lastDrawn: 0,
-		lastHeartbeat: 0,
-		heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
-		draw: _.debounce(function(){ VIEW.draw(this); }, 30, { leading: true, trailing: true})
-	}
-	
-	VIEW.addDeviceToList(devices[id]);
-	initDeviceConnection(id);
+  const id = newDevice.id || uuid();
+  devices[id] = {
+    id,
+    status: 'new',
+    drawn: false,
+    type: newDevice.type,
+    displayName: newDevice.displayName,
+    defaultName: newDevice.defaultName,
+    port: newDevice.port,
+    addresses: newDevice.addresses,
+    data: {},
+    pinIndex: false,
+    lastDrawn: 0,
+    lastHeartbeat: 0,
+    heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
+    draw() {
+      VIEW.draw(this);
+    },
+    update(type, data) {
+      if (this.drawn) {
+        VIEW.update(this, type, data);
+      } else {
+        this.draw();
+      }
+    },
+  };

+  VIEW.addDeviceToList(devices[id]);
+  initDeviceConnection(id);
+  return true;
 }
 module.exports.registerDevice = registerDevice;

+function initDeviceConnection(id) {
+  const device = devices[id];

-initDeviceConnection = function(id){
+  infoUpdate(device, 'status', 'new');

+  if (device.port === undefined || device.addresses.length === 0) {
+    return true;
+  }
+  try {
+    // mostly only useful for UDP
+    device.connection.close();
+  } catch (err) {
+    //
+  }

-	var device = devices[id];
+  const { type } = devices[id];
+  const plugins = PLUGINS.all;

-	infoUpdate(device, "status", "new");
+  if (plugins[type].connectionType.includes('osc')) {
+    if (plugins[type].connectionType.includes('udp')) {
+      device.connection = new osc.UDPPort({
+        localAddress: '0.0.0.0',
+        remoteAddress: device.addresses[0],
+        remotePort: device.port,
+      });
+    } else {
+      device.connection = new osc.TCPSocketPort({
+        address: device.addresses[0],
+        port: device.port,
+      });
+    }
+    device.connection.open();
+    device.connection.on('error', (error) => {
+      // console.error(error)
+      device.connection.close();
+    });
+    device.connection.on('ready', () => {
+      plugins[type].ready(device);
+      if (Object.keys(devices).length === 1) {
+        VIEW.switchDevice(device.id);
+      }
+    });
+    device.connection.on('message', (message) => {
+      try {
+        plugins[type].data(device, message);
+      } catch (err) {
+        console.error(err);
+      }
+      device.lastMessage = Date.now();
+    });
+    device.send = (address, args) => {
+      device.connection.send({ address, args });
+    };
+    device.plugin = plugins[type];
+  } else if (plugins[type].connectionType === 'TCPsocket') {
+    device.connection = new net.Socket();

-	if(device.port==undefined || device.addresses.length==0){
-		return true;
-	}
-	try{
-		// mostly only useful for UDP
-		device.connection.close();
-	}catch(err){}
- 
-	const type = devices[id].type;
-	var plugins = PLUGINS.all;
+    device.connection.connect(
+      {
+        port: device.port,
+        host: device.addresses[0],
+      },
+      () => {}
+    );

-	if(plugins[type].connectionType == "osc"){
-		device.connection = new osc.TCPSocketPort({
-			address: device.addresses[0],
-			port: device.port
-		});
-		device.connection.open();
-		device.connection.on("error", function (error) {
-			//console.error(error)
-			device.connection.close();
-		});
-		device.connection.on("ready", function () {
-			plugins[type].ready(device);
-			if(Object.keys(devices).length==1){
-				VIEW.switchDevice(device.id);
-			}
-		});
-		device.connection.on("message", function(message){
-			//log("OSC IN", message.address);
-			plugins[type].data(device, message);
-			device.lastMessage = Date.now();
-		});
-		device.send = function(address, args){
-			device.connection.send({address: address, args: args});
-		}
-		device.plugin = plugins[type];
+    device.connection.on('error', (error) => {
+      // console.error(error)
+    });
+    device.connection.on('ready', () => {
+      plugins[type].ready(device);
+      if (Object.keys(devices).length === 1) {
+        VIEW.switchDevice(device.id);
+      }
+    });
+    device.connection.on('data', (message) => {
+      // log("SOCK IN", message);
+      plugins[type].data(device, message);
+      device.lastMessage = Date.now();
+      infoUpdate(device, 'status', 'ok');
+    });
+    device.send = (data) => {
+      // log("SOCK OUT", data);
+      device.connection.write(data);
+    };
+  } else if (plugins[type].connectionType === 'UDPsocket') {
+    device.connection = udp.createSocket('udp4');

-	}else if(plugins[type].connectionType == "TCPsocket"){
-		device.connection = new net.Socket();
+    device.connection.bind({ port: plugins[type].defaultPort }, () => {
+      plugins[type].ready(device);

-		device.connection.connect({port: device.port, host: device.addresses[0]}, function() {
-			
-		});
-		
-		device.connection.on("error", function (error) {
-			//console.error(error)
-		});
-		device.connection.on("ready", function () {
-			plugins[type].ready(device);
-			if(Object.keys(devices).length==1){
-				VIEW.switchDevice(device.id);
-			}
-		});
-		device.connection.on("data", function(message){
-			//log("SOCK IN", message);
-			plugins[type].data(device, message);
-			device.lastMessage = Date.now();
-			infoUpdate(device, "status", "ok");
-		});
-		device.send = function(data){
-			//log("SOCK OUT", data);
-			device.connection.write(data);
-		}
+      device.connection.on('message', (msg, info) => {
+        plugins[type].data(device, msg);
+        infoUpdate(device, 'status', 'ok');
+      });
+    });

-	}else if(plugins[type].connectionType == "UDPsocket"){
+    device.send = (data) => {
+      device.connection.send(
+        Buffer.from(data),
+        device.port,
+        device.addresses[0],
+        (err) => {
+          // console.log(err);
+        }
+      );
+    };
+  } else if (plugins[type].connectionType === 'multicast') {
+    device.connection = udp.createSocket('udp4');

-		device.connection = udp.createSocket('udp4');
+    device.connection.bind(device.port, () => {
+      plugins[type].ready(device);

-		device.connection.bind(function(){
+      device.connection.on('message', (msg, info) => {
+        plugins[type].data(device, msg);
+        infoUpdate(device, 'status', 'ok');
+      });
+    });

-			plugins[type].ready(device);
-
-			device.connection.on('message',function(msg,info){
-				plugins[type].data(device, msg);
-				infoUpdate(device, "status", "ok");
-			});
-		});
-
-		device.send = function(data){
-			device.connection.send(data, device.port, device.addresses[0], function(err){
-				//console.log(err);
-			});
-		}
-
-
-	}
+    device.send = (data) => {};
+  }

+  return true;
 }
 module.exports.initDeviceConnection = initDeviceConnection;

+module.exports.deleteActive = function deleteActive() {
+  const device = VIEW.getActiveDevice();
+  const choice = confirm(
+    `Are you sure you want to delete ${device.type} device "${
+      device.displayName || device.defaultName
+    }"?`
+  );

-module.exports.deleteActive = function(){
-	var device = VIEW.getActiveDevice();
-	var choice = confirm("Are you sure you want to delete "+device.type+" device \""+(device.displayName || device.defaultName)+"\"?");
+  if (choice) {
+    VIEW.removeDeviceFromList(device);
+    delete devices[device.id];
+    SAVESLOTS.deleteFromSlots(device);
+    SAVESLOTS.saveAll();
+    SAVESLOTS.reloadActiveSlot();
+  }
+};

-	if(choice){
-		VIEW.removeDeviceFromList(device);
-		delete devices[device.id];
-		SAVESLOTS.deleteFromSlots(device);
-		SAVESLOTS.saveAll();
-		SAVESLOTS.reloadActiveSlot();
-	}
+module.exports.changeActiveType = function changeActiveType(newType) {
+  const device = VIEW.getActiveDevice();
+  device.type = newType;

-}
+  initDeviceConnection(device.id);
+  VIEW.draw(device);
+  // SAVESLOTS.saveAll();
+};

-module.exports.changeActiveType = function(newType){
-	var device = VIEW.getActiveDevice();
-	device.type = newType;
+module.exports.changeActiveIP = function changeActiveIP(newIP) {
+  const device = VIEW.getActiveDevice();
+  device.addresses[0] = newIP;
+  initDeviceConnection(device.id);
+  VIEW.draw(device);
+  SAVESLOTS.saveAll();
+};

-	initDeviceConnection(device.id);
-	VIEW.draw(device);
-	//SAVESLOTS.saveAll();
-}
+module.exports.changeActivePort = function changeActivePort(newPort) {
+  const device = VIEW.getActiveDevice();
+  device.port = newPort;

-module.exports.changeActiveIP = function(newIP){
-	var device = VIEW.getActiveDevice();
-	device.addresses[0] = newIP;
-	initDeviceConnection(device.id);
-	VIEW.draw(device);
-	SAVESLOTS.saveAll();
-}
+  initDeviceConnection(device.id);
+  VIEW.draw(device);
+  SAVESLOTS.saveAll();
+};

-module.exports.changeActivePort = function(newPort){
-	var device = VIEW.getActiveDevice();
-	device.port = newPort;
+module.exports.changeActiveName = function changeActiveName(newName) {
+  const device = VIEW.getActiveDevice();
+  device.displayName = newName;
+  infoUpdate(device, 'displayName', newName);
+  VIEW.draw(device);
+  SAVESLOTS.saveAll();
+};
+module.exports.changeActivePinIndex = function changeActivePinIndex(newPin) {
+  const device = VIEW.getActiveDevice();
+  device.pinIndex = newPin;
+  VIEW.draw(device);
+  SAVESLOTS.saveAll();
+};
+module.exports.changePinIndex = function changePinIndex(device, newPin) {
+  const d = device;
+  d.pinIndex = newPin;
+  // SAVESLOTS.saveAll();
+};
+module.exports.refreshActive = function refreshActive() {
+  const device = VIEW.getActiveDevice();
+  if (device === undefined) {
+    return true;
+  }
+  initDeviceConnection(device.id);
+  VIEW.draw(device);
+  return true;
+};

-	initDeviceConnection(device.id);
-	VIEW.draw(device);
-	SAVESLOTS.saveAll();
-}
-
-module.exports.changeActiveName = function(newName){
-	var device = VIEW.getActiveDevice();
-	device.displayName = newName;
-	infoUpdate(device, "displayName", newName);
-	VIEW.draw(device);
-	SAVESLOTS.saveAll();
-}
-module.exports.changeActivePinIndex = function(newPin){
-	var device = VIEW.getActiveDevice();
-	device.pinIndex = newPin;
-	VIEW.draw(device);
-	SAVESLOTS.saveAll();
-}
-module.exports.changePinIndex = function(device, newPin){
-	device.pinIndex = newPin;
-	//SAVESLOTS.saveAll();
-}
-module.exports.refreshActive = function(){
-	var device = VIEW.getActiveDevice();
-	if(device==undefined){
-		return true;
-	}
-	initDeviceConnection(device.id);
-	VIEW.draw(device);
-}
-
-
-
-
-infoUpdate = function(device, param, value){
-	if(param=="addresses"){
-		device.addresses = value.replace(/\s+/g, '').split(",");
-	}else{
-		device[param] = value;
-	}
-	VIEW.addDeviceToList(device);
+function infoUpdate(device, param, value) {
+  const d = device;
+  if (param === 'addresses') {
+    d.addresses = value.replace(/\s+/g, '').split(',');
+  } else {
+    d[param] = value;
+  }
+  VIEW.addDeviceToList(device);
 }
 module.exports.infoUpdate = infoUpdate;

+function heartbeat() {
+  Object.keys(devices).forEach((deviceID) => {
+    const d = devices[deviceID];

-setInterval(heartbeat, 100);
-function heartbeat(){
-	for(var i in devices){
-		var device = devices[i];
-		if(Date.now()>=device.lastHeartbeat+device.heartbeatInterval){
-			
-			if(device.status=="broken"){
-				initDeviceConnection(i);
-			}else if(Date.now()-device.lastMessage>10000){
-				infoUpdate(device, "status", "broken");
-			}else{
-				if(device.port!=undefined && device.addresses.length>0){
-					PLUGINS.all[device.type].heartbeat(device);
-				}else{
-					//console.error("Invalid IP/Port on device "+device.name)
-				}
-			}
-			device.lastHeartbeat = Date.now();
-		}
-		
-	}
+    if (Date.now() >= d.lastHeartbeat + d.heartbeatInterval) {
+      if (d.status === 'broken') {
+        initDeviceConnection(deviceID);
+      } else if (Date.now() - d.lastMessage > d.heartbeatTimeout) {
+        infoUpdate(d, 'status', 'broken');
+      } else if (d.port !== undefined && d.addresses.length > 0) {
+        PLUGINS.all[d.type].heartbeat(d);
+      } else {
+        //
+      }
+      d.lastHeartbeat = Date.now();
+    }
+  });
+
+  // for (let i in devices) {
+  //   const device = devices[i];
+  //   if (Date.now() >= device.lastHeartbeat + device.heartbeatInterval) {
+  //     if (device.status == 'broken') {
+  //       initDeviceConnection(i);
+  //     } else if (Date.now() - device.lastMessage > device.heartbeatTimeout) {
+  //       infoUpdate(device, 'status', 'broken');
+  //     } else {
+  //       if (device.port != undefined && device.addresses.length > 0) {
+  //         PLUGINS.all[device.type].heartbeat(device);
+  //       } else {
+  //         // console.error("Invalid IP/Port on device "+device.name)
+  //       }
+  //     }
+  //     device.lastHeartbeat = Date.now();
+  //   }
+  // }
 }
-
-
-
-
-
-
-
+setInterval(heartbeat, 100);
@@ -2,343 +2,322 @@ html {
  font-size: 1rem;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
 }
-*, a, button {
-    cursor: default;
-    user-select: none;
+*,
+a,
+button {
+  cursor: default;
+  user-select: none;
 }

-
-
-body{
-	color: #6e6c6f;
-	margin: 0px;
-	user-select: none;
-	overflow-x: hidden;
+body {
+  color: #6e6c6f;
+  margin: 0px;
+  user-select: none;
+  overflow-x: hidden;
 }
-a{
-	text-decoration: none;
+a {
+  text-decoration: none;
 }
-.red{
-	color: #eb6b5e;
+.red {
+  color: #eb6b5e;
 }
-.green{
-	color: #61c650;
+.green {
+  color: #61c650;
 }
-.left{
-	float: left;
+.left {
+  float: left;
 }

-
-#main{
-	box-sizing: border-box;
-	display: grid;
-	width: 100%;
-	height: 100vh;
-	grid-template-columns: 270px 1fr;
+#main {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  height: 100vh;
+  grid-template-columns: 270px 1fr;
 }
-.col{
-	border-right: rgba(0, 0, 0, 0.5) 1px solid;
-	height: 100vh !important;
-	overflow: hidden;
-	box-sizing: border-box;
-	position: relative;
+.col {
+  border-right: rgba(0, 0, 0, 0.5) 1px solid;
+  height: 100vh !important;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
 }

 /* FIRST COL */
-#device-list-col{
-	background-color: transparent;
-	color: #707070;
+#device-list-col {
+  background-color: transparent;
+  color: #707070;
 }
-#view-buttons-bar{
-	box-sizing: border-box;
-	text-align: right;
-	padding-left: 100px;
-	padding-right: 7px;
-	user-select: text;
-	-webkit-app-region: drag;
-	z-index: 1000;
-	/*border-bottom: black 1px solid;*/
-	/*background: linear-gradient(#3f3f3f 0%, #343434 100%);*/
-	/*background-color: #363636;*/
-	/*background-color: rgba(0, 0, 0, 0.4);*/
+#view-buttons-bar {
+  box-sizing: border-box;
+  text-align: right;
+  padding-left: 100px;
+  padding-right: 7px;
+  user-select: text;
+  -webkit-app-region: drag;
+  z-index: 1000;
+  /*border-bottom: black 1px solid;*/
+  /*background: linear-gradient(#3f3f3f 0%, #343434 100%);*/
+  /*background-color: #363636;*/
+  /*background-color: rgba(0, 0, 0, 0.4);*/
 }
-#view-buttons-bar button{
-	background-color: rgba(255, 255, 255, 0.07);
-	width: 26px;
-	border-radius: 10px;
-	font-size:  0.8rem;
+#view-buttons-bar button {
+  background-color: rgba(255, 255, 255, 0.07);
+  width: 26px;
+  border-radius: 10px;
+  font-size: 0.8rem;
 }
-#view-buttons-bar button:hover{
-	background-color: rgba(255, 255, 255, 0.25);
+#view-buttons-bar button:hover {
+  background-color: rgba(255, 255, 255, 0.25);
 }

-
-
-
-#device-list{
-	box-sizing: border-box;
-	width: 100%;
-	padding: 0px 10px;
+#device-list {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0px 10px;
 }
-	#device-list div{
-		pointer-events: none;
-	}
-	#device-list .device{
-		box-sizing: border-box;
-		clear: both;
-		display: block;
-		width: 100%;
-		height: 40px;
-		padding: 10px 5px;
-		overflow: hidden;
-		border-radius: 5px;
-	}
-	#device-list .device.active-device{
-		/*background-color: #0e5ccd;*/
-		/*background-color: #c9961f;*/
-		background-color: rgba(255, 255, 255, 0.2);
-	}
-	#device-list .status{
-		float: left;
-		width: 25px;
-		font-size: 18px;
-	}
-	#device-list .type{
-		float: left;
-		width: 30px;
-		color: #f6bd26;
-	}
-	#device-list .name{
-		position: relative;
-		left: 0px;
-		color: white;
-		font-weight: 600;
-
-		text-overflow: ellipsis;
-		white-space: nowrap; 
-		overflow: hidden;
-	}
-	#device-list h3.init{
-		margin: 0px auto;
-		padding-top: 200px;
-		text-align: center;
-		font-weight: 300;
-		font-size: 16px;
-		width: 210px;
-		pointer-events: none;
-	}
-
-
-
-	
-#device-tools{
-	position: absolute;
-	bottom: 210px;
-	left: 0px;
-	width: 100%;
-	height: 30px;
-	padding-right: 10px;
-	/*background: linear-gradient(#2f2f2f 0%, #2c2c2c 100%);*/
-	background-color: rgba(0, 0, 0, 0.2);
-	text-align: center;
-	border-top: rgba(0, 0, 0, 0.3) 1px solid;
-	/*border-bottom: #3a3a3a 1px solid;*/
+#device-list div {
+  pointer-events: none;
 }
-#device-tools select{
-	text-align: center;
+#device-list .device {
+  box-sizing: border-box;
+  clear: both;
+  display: block;
+  width: 100%;
+  height: 40px;
+  padding: 10px 5px;
+  overflow: hidden;
+  border-radius: 5px;
+}
+#device-list .device.active-device {
+  /*background-color: #0e5ccd;*/
+  /*background-color: #c9961f;*/
+  background-color: rgba(255, 255, 255, 0.2);
+}
+#device-list .status {
+  float: left;
+  width: 25px;
+  font-size: 18px;
+}
+#device-list .type {
+  float: left;
+  width: 30px;
+  color: #f6bd26;
+}
+#device-list .name {
+  position: relative;
+  left: 0px;
+  color: white;
+  font-weight: 600;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#device-list h3.init {
+  margin: 0px auto;
+  padding-top: 200px;
+  text-align: center;
+  font-weight: 300;
+  font-size: 16px;
+  width: 210px;
+  pointer-events: none;
 }

-
-
-#device-settings{
-	position: absolute;
-	left: 0px;
-	bottom: 0px;
-	height: 200px;
-	padding: 5px;
-	color: white;
-	font-weight: 300;
-	width: 100%;
-	background-color: rgba(0, 0, 0, 0.2);
+#device-tools {
+  position: absolute;
+  bottom: 210px;
+  left: 0px;
+  width: 100%;
+  height: 30px;
+  padding-right: 10px;
+  /*background: linear-gradient(#2f2f2f 0%, #2c2c2c 100%);*/
+  background-color: rgba(0, 0, 0, 0.2);
+  text-align: center;
+  border-top: rgba(0, 0, 0, 0.3) 1px solid;
+  /*border-bottom: #3a3a3a 1px solid;*/
+}
+#device-tools select {
+  text-align: center;
 }
-	#device-settings th{
-		text-align: right;
-		padding-right: 3px;
-		color: white;
-		font-weight: normal;
-	}
-	#device-settings td{
-		padding: 6px;
-	}
-	#device-settings-table{
-		display: none;
-	}
-	#device-settings h3{
-		padding-top: 20px;
-		text-align: center;
-		font-weight: 300;
-	}
-	#device-settings #device-settings-name,
-	#device-settings #device-settings-ip,
-	#device-settings #device-settings-plugin-dropdown{
-		width: 170px;
-	}
-	#device-settings #device-settings-port{
-		width: 70px;
-	}
-

+#device-settings {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  height: 200px;
+  padding: 5px;
+  color: white;
+  font-weight: 300;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+#device-settings th {
+  text-align: right;
+  padding-right: 3px;
+  color: white;
+  font-weight: normal;
+}
+#device-settings td {
+  padding: 6px;
+}
+#device-settings-table {
+  display: none;
+}
+#device-settings h3 {
+  padding-top: 20px;
+  text-align: center;
+  font-weight: 300;
+}
+#device-settings #device-settings-name,
+#device-settings #device-settings-ip,
+#device-settings #device-settings-plugin-dropdown {
+  width: 170px;
+}
+#device-settings #device-settings-port {
+  width: 70px;
+}

 /* SECOND COL */
-#all-devices{
-	display: grid;
-	grid-template-columns: repeat(4, 1fr);
-	background-color: rgba(0, 0, 0, 0.3);
+#all-devices {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  background-color: rgba(0, 0, 0, 0.3);
 }
-.device-pin{
-	position:absolute;
-	right: 15px;
-	top: 8px;
-	height: 20px;
+.device-pin {
+  position: absolute;
+  right: 15px;
+  top: 8px;
+  height: 20px;
+  padding: inherit;
 }
-.device-wrapper{
-	box-sizing: border-box;
-	border-top: rgba(0, 0, 0, 0) 2px solid;
-	border-bottom: rgba(0, 0, 0, 0) 2px solid;
+.device-wrapper {
+  box-sizing: border-box;
+  border: black 1px solid;
+  padding: 2px;
 }
-.draw-area{
-	height: 100%;
-	overflow-y: scroll;
-	width: 100%;
-	height: 100%;
-	border: 0;
-
+.draw-area {
+  height: 100%;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  border: 0;
 }
-.active-device-outline{
-	outline: #fdea08 2px solid;
-	border-top: #fdea08 2px solid;
-	border-bottom: #fdea08 2px solid;
+.active-device-outline {
+  padding: 0px;
+  border: #fdea08 3px solid;
 }

-
-
-
-
-
-input{
-	display: block;
-	box-sizing:content-box;
-	background-color: rgba(0, 0, 0, 0.2);
-	height: 28px;
-	padding: 2px 6px;
-	margin: 0px;
-	border: rgba(255, 255, 255, 0.1) 1px solid;
-	border-radius: 4px;
-	color: #fff;
-	font-size: 16px;
-	font-weight: 500;
+input {
+  display: block;
+  box-sizing: content-box;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: 28px;
+  padding: 2px 6px;
+  margin: 0px;
+  border: rgba(255, 255, 255, 0.1) 1px solid;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
 }
-select{
-	display: block;
-	box-sizing:content-box;
-	background-color: rgba(255, 255, 255, 0.15);
-	height: 28px;
-	padding: 2px 6px;
-	margin: 0px;
-	border: rgba(255, 255, 255, 0.1) 1px solid;
-	border-radius: 4px;
-	color: #fff;
-	font-size: 16px;
-	font-weight: 500;
+select {
+  display: block;
+  box-sizing: content-box;
+  background-color: rgba(255, 255, 255, 0.15);
+  height: 28px;
+  padding: 2px 6px;
+  margin: 0px;
+  border: rgba(255, 255, 255, 0.1) 1px solid;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
 }
-input:focus, select:focus{
-	outline: #fdea08 2px solid;
-	color: white;
+select option {
+  /* these styles don't affect macOS but are important for Windows! */
+  text-align: left;
+  background-color: #333333;
 }
-input[type='checkbox']{
-	position: relative;
-	height: 14px;
-	width: 14px;
-	padding: 2px;
-	-webkit-appearance: none;
+input:focus,
+select:focus {
+  outline: #fdea08 2px solid;
+  color: white;
 }
-input[type='checkbox']:checked{
-	background-color: #616064;
+input[type='checkbox'] {
+  position: relative;
+  height: 14px;
+  width: 14px;
+  padding: 2px;
+  -webkit-appearance: none;
+}
+input[type='checkbox']:checked {
+  background-color: #616064;
 }
 input[type='checkbox']:checked:after {
-	content: '\2713';
-	font-size: 18px;
-	position: absolute;
-	top: -1px;
-	left: 1px;
-	color: white;
+  content: '\2713';
+  font-size: 18px;
+  position: absolute;
+  top: -1px;
+  left: 1px;
+  color: white;
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
-button, select.button{
-	box-sizing:content-box;
-	width:  40px;
-	height: 25px;
-	margin-top: 7px;
-	margin-bottom: 7px;
-	margin-left: 4px;
-	border: none;
-	outline: none;
-	padding: 0px;
+button,
+select.button {
+  box-sizing: content-box;
+  width: 40px;
+  height: 25px;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  margin-left: 4px;
+  border: none;
+  outline: none;
+  padding: 0px;

-	color: white;
-	background: rgba(255, 255, 255, 0.15);
-	border-radius: 4px;
-	font-size: 1rem;
-	user-select: none;
+  color: white;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  font-size: 1rem;
+  user-select: none;
 }
-	button:hover{
-		background-color: rgba(255, 255, 255, 0.2);
-	}
-	button:focus{
-		outline: none;
-	}
-	button.active{
-		background-color: rgba(255, 255, 255, 0.3);
-		color: white;
-	}
-	button:disabled{
-		background: rgba(255, 255, 255, 0.03);
-	}
-	button img{
-		height: 18px;
-	}
-
-select.button:focus{
-	outline: none;
+button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+button:focus {
+  outline: none;
+}
+button.active {
+  background-color: rgba(255, 255, 255, 0.3);
+  color: white;
+}
+button:disabled {
+  background: rgba(255, 255, 255, 0.03);
+}
+button img {
+  height: 18px;
 }

-
-
-
-
-
-
-
-
-
+select.button:focus {
+  outline: none;
+}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
-  src: local('img/Material Icons'),
-    local('img/MaterialIcons-Regular'),
+  src: local('img/Material Icons'), local('img/MaterialIcons-Regular'),
    url(img/MaterialIcons-Regular.ttf) format('truetype');
 }
 .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
+  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
@@ -1,23 +1 @@
-document.onclick = function(e){
-	window.closePopovers();
-}
-
-window.init();
-
-
-document.getElementById("search-button").onclick = function(e){
-    window.searchAll();
-}
-document.getElementById("add-device-button").onclick = function(e){
-	//e.stopPropagation();
-    //document.getElementById("add-device-popover").style.display = "block";
-}
-
-
-
-window.closePopovers = function(){
-	//document.getElementById("add-device-popover").style.display = "none";
-}
-
-
-
+window.init();
@@ -1,38 +1,68 @@
-let fs = require('fs');
-let DEVICE = require("./device.js");
-let VIEW = require("./view.js");
+/* eslint-disable global-require */
+const fs = require('fs');
+const _ = require('lodash');
+const path = require('path');

+const DEVICE = require('./device.js');
+const VIEW = require('./view.js');

-var allPlugins = {};
+const allPlugins = {};
 module.exports.all = allPlugins;

-module.exports.init = function(callback){
+module.exports.init = function init(callback) {

-	console.log("Loading plugin files... "+__dirname+"/../plugins")
+  let pluginDirectoryPath = path.normalize(path.join(__dirname, `../plugins`));

-	fs.readdir(__dirname+"/../plugins", function(err, files){
-		for(var i in files){
-			var plugin = files[i];
+  console.log(`Loading plugin files... ${pluginDirectoryPath}`);
+
+  fs.readdir(pluginDirectoryPath, (err, files) => {
+    
+    files.forEach((plugin)=>{
+      if (plugin[0] !== '.') {
+        
+        console.log(`${plugin} started`);
+
+        // eslint-disable-next-line import/no-dynamic-require
+        allPlugins[plugin] = require(path.join(pluginDirectoryPath, `/${plugin}/main.js`));
+
+        const p = allPlugins[plugin];
+
+        p.deviceInfoUpdate = function deviceInfoUpdate(device, param, value) {
+          DEVICE.infoUpdate(device, param, value);
+        };
+        p.draw = (device) => {
+          VIEW.draw(device);
+        };
+
+        p.template = _.template(
+          fs.readFileSync(path.join(pluginDirectoryPath, `/${plugin}/template.ejs`),
+            'utf8'
+          )
+        );
+
+        p.info = _.template(
+          fs.readFileSync(path.join(pluginDirectoryPath, `/${plugin}/info.html`),
+            'utf8'
+          )
+        );


-			if(plugin[0]!="."){
-				console.log(i+" "+plugin);
-				allPlugins[plugin] = require(__dirname+"/../plugins/"+plugin+"/"+plugin+".js");
+        if (p.heartbeatTimeout === undefined || p.heartbeatTimeout < 50) {
+          if(p.heartbeatInterval){
+            p.heartbeatTimeout = p.heartbeatInterval * 1.5;
+          }else{
+            p.heartbeatTimeout = 10000;
+          }
+        }

-				allPlugins[plugin].deviceInfoUpdate = function(device, param, value){
-					DEVICE.infoUpdate(device, param, value)
-				}
-				allPlugins[plugin].draw = function(device){
-					VIEW.draw(device);
-				}
+        if (p.heartbeatInterval === undefined || p.heartbeatInterval < 50) {
+          p.heartbeatInterval = 5000;
+        }

-				allPlugins[plugin].template = ejs.compile(fs.readFileSync(__dirname+"/../plugins/"+plugin+"/"+plugin+".html", 'utf8'));
-				
-				if(allPlugins[plugin].heartbeatInterval==undefined || allPlugins[plugin].heartbeatInterval<50){
-					allPlugins[plugin].heartbeatInterval = 5000;
-				}
-			}
-		}
-		callback();
-	});
-}
+      }
+    });
+
+    callback();
+
+  });
+};
@@ -1,118 +1,123 @@
-let VIEW = require("./view.js");
-let DEVICE = require("./device.js");
+const VIEW = require('./view.js');
+const DEVICE = require('./device.js');

+let activeSlot = false;
+let savedSlots = [[], [], [], []];
+let savedDevices = [];

-var activeSlot = false;
-var savedSlots = [[], [], [], []];
-var savedDevices = [];
-
-var storedSlots = localStorage.getItem('savedSlots');;
-if(storedSlots){
-	savedSlots = JSON.parse(storedSlots);
+const storedSlots = localStorage.getItem('savedSlots');
+if (storedSlots) {
+  savedSlots = JSON.parse(storedSlots);
 }

-var storedDevices = localStorage.getItem('savedDevices');;
-if(storedDevices){
-	savedDevices = JSON.parse(storedDevices);
+const storedDevices = localStorage.getItem('savedDevices');
+if (storedDevices) {
+  savedDevices = JSON.parse(storedDevices);
 }

-loadSlot = function(slotIndex){
-	
-	VIEW.toggleSlotButtons(slotIndex);
-	activeSlot = slotIndex;
+function loadSlot(slotIndex) {
+  VIEW.toggleSlotButtons(slotIndex);
+  activeSlot = slotIndex;

-	for(var d in DEVICE.all){
-		DEVICE.changePinIndex(DEVICE.all[d], false);
-	}
-	VIEW.resetPinned();
+  Object.keys(DEVICE.all).forEach((d)=>{
+    DEVICE.changePinIndex(DEVICE.all[d], false);
+  });
+  VIEW.resetPinned();

-	for(var d in savedSlots[slotIndex]){
-		var savedDevice = savedSlots[slotIndex][d];
-		for(var d in DEVICE.all){
-			var device = DEVICE.all[d];
-			//if(device.addresses[0] == savedDevice.addresses[0] && device.type == savedDevice.type){
-			if(device.id == savedDevice.id){
-				VIEW.pinDevice(device);
-				VIEW.switchDevice(device.id)
-			}else if(device.addresses[0] == savedDevice.addresses[0] && device.type == savedDevice.type && savedDevice.addresses[0]!=undefined ){
-				VIEW.pinDevice(device);
-				VIEW.switchDevice(device.id)
-			}
-		}
-	}	
-}
+  Object.keys(savedSlots[slotIndex]).forEach((slot) => {
+    const savedDevice = savedSlots[slotIndex][slot];
+
+    Object.keys(DEVICE.all).forEach((d) => {
+      const device = DEVICE.all[d];
+
+      if (device.id === savedDevice.id) {
+        VIEW.pinDevice(device);
+        VIEW.switchDevice(device.id);
+
+      } else if (
+        device.addresses[0] === savedDevice.addresses[0] &&
+        device.type === savedDevice.type &&
+        savedDevice.addresses[0] !== undefined
+      ) {
+        VIEW.pinDevice(device);
+        VIEW.switchDevice(device.id);
+      }
+    });
+
+  });
+};
 module.exports.loadSlot = loadSlot;

-module.exports.loadDevices = function(){
-	console.log("Loading "+savedDevices.length+" saved devices...")
-	console.log(savedDevices)

-	for(var i=0; i<savedDevices.length; i++){
-		DEVICE.registerDevice({
-			type: savedDevices[i].type,
-			displayName: savedDevices[i].displayName,
-			defaultName: savedDevices[i].defaultName,
-			port: savedDevices[i].port,
-			addresses: savedDevices[i].addresses,
-			id: savedDevices[i].id
-		})
-	}
+module.exports.loadDevices = function loadDevices() {
+  console.log(`Loading ${savedDevices.length} saved devices...`);
+
+  for (let i = 0; i < savedDevices.length; i++) {
+    DEVICE.registerDevice({
+      type: savedDevices[i].type,
+      displayName: savedDevices[i].displayName,
+      defaultName: savedDevices[i].defaultName,
+      port: savedDevices[i].port,
+      addresses: savedDevices[i].addresses,
+      id: savedDevices[i].id,
+    });
+  }
+};


-}
+module.exports.saveAll = function saveAll() {
+  console.log('Saving...');
+  const currentPins = VIEW.getPinnedDevices();

-module.exports.saveAll = function(){
-	console.log("Saving...")
-	var currentPins = VIEW.getPinnedDevices();
+  savedSlots[activeSlot] = [];
+  for (let i = 0; i < currentPins.length; i++) {
+    savedSlots[activeSlot][i] = {
+      addresses: currentPins[i].addresses,
+      type: currentPins[i].type,
+      id: currentPins[i].id,
+    };
+  }
+  localStorage.setItem('savedSlots', JSON.stringify(savedSlots));
+  console.log(
+    `Saved ${currentPins.length} pinned devices to slot ${activeSlot}!`
+  );

-	savedSlots[activeSlot] = [];
-	for(var i=0; i<currentPins.length; i++){
-		savedSlots[activeSlot][i] = {
-			addresses: currentPins[i].addresses,
-			type: currentPins[i].type,
-			id: currentPins[i].id
-		}
-	}
-	localStorage.setItem('savedSlots', JSON.stringify(savedSlots));
-	console.log("Saved "+currentPins.length+" pinned devices to slot "+activeSlot+"!")
+  savedDevices = [];
+  let i = 0;
+  Object.keys(DEVICE.all).forEach((d) => {
+    const device = DEVICE.all[d];
+    savedDevices[i] = {
+      addresses: device.addresses,
+      type: device.type,
+      displayName: device.displayName,
+      defaultName: device.defaultName,
+      port: device.port,
+      id: device.id,
+    };
+    i++;
+  });
+  localStorage.setItem('savedDevices', JSON.stringify(savedDevices));

-	savedDevices = []
-	var i = 0;
-	for(var d in DEVICE.all){
-		var device = DEVICE.all[d];
-		savedDevices[i] = {
-			addresses: device.addresses,
-			type: device.type,
-			displayName: device.displayName,
-			defaultName: device.defaultName,
-			port: device.port,
-			id: device.id
-		}
-		i++;
-	}
-	localStorage.setItem('savedDevices', JSON.stringify(savedDevices));
-
-}
-
-module.exports.deleteFromSlots = function(device){
-	for(var i = 1; i<=3; i++){
-		console.log(savedSlots);
-		for(var j=0; j<savedSlots[i].length; j++){
-			if(savedSlots[i][j].id == device.id){
-				delete savedSlots[i][j];
-			}
-		}
-
-	}
-}
-
-module.exports.reloadActiveSlot = function(){
-	loadSlot(activeSlot)
-}
-
-module.exports.resetSlots = function(){
-	localStorage.clear();
-}
+};


+module.exports.deleteFromSlots = function deleteFromSlots(device) {
+  for (let i = 1; i <= 3; i++) {
+    console.log(savedSlots);
+    for (let j = 0; j < savedSlots[i].length; j++) {
+      if (savedSlots[i][j].id === device.id) {
+        delete savedSlots[i][j];
+      }
+    }
+  }
+};

+
+module.exports.reloadActiveSlot = function reloadActiveSlot() {
+  loadSlot(activeSlot);
+};
+
+
+module.exports.resetSlots = function resetSlots() {
+  localStorage.clear();
+};
@@ -1,399 +1,230 @@
 const { ipcRenderer } = require('electron');
-let netmask = require('netmask').Netmask;
-let dgram = require('dgram');
-let bonjour = require('bonjour')();
-let net = require("net");
-let os = require("os");
-let ip = require("ip");
+const dgram = require('dgram');
+const bonjour = require('bonjour')();
+const net = require('net');
+const os = require('os');
+const ip = require('ip');

+const DEVICE = require('./device.js');
+// const SEARCH = require('./search.js');
+const PLUGINS = require('./plugins.js');

-let DEVICE = require("./device.js");
-let SEARCH = require("./search.js");
-let PLUGINS = require("./plugins.js");
+let searching = false;
+let allServers = false;

+function getServers() {
+  const interfaces = os.networkInterfaces();
+  const result = [];
+  
+  Object.keys(interfaces).forEach((key) => {
+    const addresses = interfaces[key];
+    for (let i = addresses.length; i--; ) {
+      const address = addresses[i];
+      if (address.family === 'IPv4' && !address.internal) {
+        const subnet = ip.subnet(address.address, address.netmask);
+        let current = ip.toLong(subnet.firstAddress);
+        const last = ip.toLong(subnet.lastAddress) - 1;
+        while (current++ < last) result.push(ip.fromLong(current));
+      }
+    }
+  });
+  return result;

-var searching = false;
-var allServers = false;
-
-searchAll = function(){
-	if(searching){
-		return true;
-	}
-	searching = true;
-	ipcRenderer.send("disableSearchAll", "");
-	document.getElementById("search-button").style.opacity = 0.2;
-	//console.clear();
-
-	for(var i in DEVICE.all){
-		DEVICE.infoUpdate(DEVICE.all[i], "status", "refresh");
-	}
-
-	console.log("Searching...")
-
-
-	//findOnlineDevices();
-	allServers = getServers();
-	var TCPFlag = true;
-	if(allServers.length>2046){
-		alert("Unable to search for TCP devices - subnet too large!\n\nCue View requires subnet 255.255.248.0 (/21) or smaller.")
-		TCPFlag = false;
-	}
-
-	console.log(PLUGINS)
-
-	for(var p in PLUGINS.all){
-		var plugin = PLUGINS.all[p];
-		console.log(p)
-		try{
-			switch(plugin.searchOptions.type){
-				case "TCPport":
-					if(TCPFlag){
-						newSearchTCP(p, plugin);
-					}
-				break;
-				case "Bonjour":
-					newSearchBonjour(p, plugin)
-				break;
-				case "UDPsocket":
-					newSearchUDP(p, plugin)
-				break;
-			}
-		}catch(err){
-			console.error("Unable to search for plugin "+p)
-		}
-	}
-
-	//searchBonjour();
-	//searchTCP();
-	//searchUDP();
-
-	setTimeout(function(){
-		searching = false;
-		document.getElementById("search-button").style.opacity = "";
-
-		for(var i=0; i<searchSockets.length; i++){
-			try{searchSockets[i].close();}catch(err){}
-		}
-
-		ipcRenderer.send("enableSearchAll", "");
-
-	}, 5000)
 }
+
+const searchSockets = [];
+function searchAll() {
+  if (searching) {
+    return;
+  }
+  searching = true;
+  ipcRenderer.send('disableSearchAll', '');
+  document.getElementById('search-button').style.opacity = 0.2;
+
+  Object.keys(DEVICE.all).forEach((i) => {
+    DEVICE.infoUpdate(DEVICE.all[i], 'status', 'refresh');
+  });
+
+  console.log('Searching...');
+
+  allServers = getServers();
+  let TCPFlag = true;
+  if (allServers.length > 2046) {
+    alert(
+      'Unable to search for TCP devices - subnet too large!\n\nCue View requires subnet 255.255.248.0 (/21) or smaller.'
+    );
+    TCPFlag = false;
+  }
+
+  Object.keys(PLUGINS.all).forEach((p) => {
+    const plugin = PLUGINS.all[p];
+    
+    try {
+      const t = plugin.searchOptions.type;
+
+      if(t === 'TCPport'){
+        if (TCPFlag) {
+          searchTCP(p, plugin);
+        }
+
+      }else if(t === 'Bonjour'){
+        searchBonjour(p, plugin);
+
+      }else if(t === 'UDPsocket'){
+        searchUDP(p, plugin);
+
+      }else if(t === 'multicast'){
+        searchMulticast(p, plugin);
+
+      }
+
+    } catch (err) {
+      console.error(`Unable to search for plugin ${p}`);
+    }
+  });
+
+  setTimeout(() => {
+    searching = false;
+    document.getElementById('search-button').style.opacity = '';
+
+    for (let i = 0; i < searchSockets.length; i++) {
+      try {
+        searchSockets[i].close();
+      } catch (err) {
+        //
+      }
+    }
+
+    ipcRenderer.send('enableSearchAll', '');
+  }, 5000);
+};
 module.exports.searchAll = searchAll;



+function searchBonjour(pluginType, plugin) {
+  bonjour.find({ type: plugin.searchOptions.bonjourName }, (e) => {

- //  ____              _                  
- // |  _ \            (_)                 
- // | |_) | ___  _ __  _  ___  _   _ _ __ 
- // |  _ < / _ \| '_ \| |/ _ \| | | | '__|
- // | |_) | (_) | | | | | (_) | |_| | |   
- // |____/ \___/|_| |_| |\___/ \__,_|_|   
- //                  _/ |                 
- //                 |__/                  
-
-newSearchBonjour = function(pluginType, plugin){
-	bonjour.find({type: plugin.searchOptions.bonjourName}, function(e){
-		console.log(pluginType)
-		
-		var validAddresses = [];
-		for(var i in e.addresses){
-			if(e.addresses[i].indexOf(":")==-1){
-				validAddresses.push(e.addresses[i])
-			}
-		}
-		
-		DEVICE.registerDevice({
-			type: pluginType,
-			defaultName: e.name,
-			port: e.port,
-			addresses: validAddresses
-		})
-	});
-}
-
-
-// searchBonjour = function(){
-// 	bonjour.find({type: "qlab"}, function(e){
-// 		for(var i in e.addresses){
-// 			if(e.addresses[i].indexOf(":")){
-// 				e.addresses.splice(i, 1);
-// 			}
-// 		}
-// 		DEVICE.registerDevice({
-// 			type: "qlab",
-// 			name: e.name,
-// 			port: e.port,
-// 			addresses: e.addresses
-// 		})
-// 	});
-
-
-// }
-
-
-
- //  _______ _____ _____  
- // |__   __/ ____|  __ \ 
- //    | | | |    | |__) |
- //    | | | |    |  ___/ 
- //    | | | |____| |     
- //    |_|  \_____|_|     
-                                          
-
-
-newSearchTCP = function(pluginType, plugin){
-	for(var i=0; i<allServers.length; i++){
-		TCPtest(allServers[i], pluginType, plugin);
-	}
-}
-
-TCPtest = function(ip, pluginType, plugin){
-	var client = net.createConnection(plugin.searchOptions.testPort, ip, function(){
-		client.write(plugin.searchOptions.searchBuffer);
-		// DEVICE.registerDevice({
-		// 	type: pluginType,
-		// 	defaultName: plugin.defaultName,
-		// 	port: plugin.defaultPort,
-		// 	addresses: [ip]
-		// })
-	});
-	client.on('data', (data) => {
-		if(plugin.searchOptions.validateResponse(data)){
-			DEVICE.registerDevice({
-				type: pluginType,
-				defaultName: plugin.defaultName,
-				port: plugin.defaultPort,
-				addresses: [ip]
-			})
-		}
-		client.end();
-	});
-	client.on("error", function(err){
-	 	//no device here
-	});
-} 
-
-
-
-// from local-devices library
-function getServers () {
-  var interfaces = os.networkInterfaces()
-  var result = []
-
-  for (var key in interfaces) {
-    var addresses = interfaces[key]
-    for (var i = addresses.length; i--;) {
-      var address = addresses[i]
-      if (address.family === 'IPv4' && !address.internal) {
-        var subnet = ip.subnet(address.address, address.netmask)
-        var current = ip.toLong(subnet.firstAddress)
-        var last = ip.toLong(subnet.lastAddress) - 1
-        while (current++ < last) result.push(ip.fromLong(current))
+    const validAddresses = [];
+    e.addresses.forEach((address) => {
+      if (address.indexOf(':') === -1) {
+        validAddresses.push(address);
      }
-    }
+    });
+
+    DEVICE.registerDevice({
+      type: pluginType,
+      defaultName: e.name,
+      port: e.port,
+      addresses: validAddresses,
+    });
+  });
+
+};
+
+
+function searchTCP(pluginType, plugin) {
+  for (let i = 0; i < allServers.length; i++) {
+    TCPtest(allServers[i], pluginType, plugin);
  }
+};

-  return result;
+function TCPtest(ipAddr, pluginType, plugin) {
+  const client = net.createConnection(plugin.searchOptions.testPort, ipAddr, () => {
+    client.write(plugin.searchOptions.searchBuffer);
+  });
+  client.on('data', (data) => {
+    if (plugin.searchOptions.validateResponse(data)) {
+      DEVICE.registerDevice({
+        type: pluginType,
+        defaultName: plugin.defaultName,
+        port: plugin.defaultPort,
+        addresses: [ipAddr],
+      });
+    }
+    client.end();
+  });
+  client.on('error', (err) => {
+    // no device here
+  });
+};
+
+
+function searchUDP(pluginType, plugin) {
+  const i = searchSockets.push(dgram.createSocket('udp4')) - 1;
+
+  searchSockets[i].bind(plugin.searchOptions.listenPort, () => {
+    
+    // searchSockets[i].send(
+    //   plugin.searchOptions.searchBuffer,
+    //   plugin.searchOptions.devicePort,
+    //   '255.255.255.255',
+    //   (err) => {
+    //     // console.log(err)
+    //   }
+    // );
+    // setTimeout(() => {
+    //   searchSockets[i].send(
+    //     plugin.searchOptions.searchBuffer,
+    //     plugin.searchOptions.devicePort,
+    //     '255.255.255.255',
+    //     (err) => {
+    //       // console.log(err)
+    //     }
+    //   );
+    // }, 100);
+    // setTimeout(() => {
+    //   console.log('send')
+    //   searchSockets[i].send(
+    //     plugin.searchOptions.searchBuffer,
+    //     plugin.searchOptions.devicePort,
+    //     '255.255.255.255',
+    //     (err) => {
+    //       // console.log(err)
+    //     }
+    //   );
+    // }, 400);
+
+    searchSockets[i].on('message', (msg, info) => {
+      if (plugin.searchOptions.validateResponse(msg, info, DEVICE.all)) {
+        searchSockets[i].close();
+        DEVICE.registerDevice({
+          type: pluginType,
+          defaultName: plugin.defaultName,
+          port: plugin.defaultPort,
+          addresses: [info.address],
+        });
+      }
+    });
+  });
+  searchSockets[i].on('listening', () => {
+    searchSockets[i].setBroadcast(true);
+    searchSockets[i].send(
+        plugin.searchOptions.searchBuffer,
+        plugin.searchOptions.devicePort,
+        '255.255.255.255',
+        (err) => {
+          // console.log(err)
+        }
+      );
+  });
+};
+
+
+function searchMulticast(pluginType, plugin) {
+  const socket = dgram.createSocket('udp4');
+  socket.on('message', (msg, info) => {
+    if (plugin.searchOptions.validateResponse(msg, info)) {
+      socket.close();
+      DEVICE.registerDevice({
+        type: pluginType,
+        defaultName: plugin.defaultName,
+        port: plugin.defaultPort,
+        addresses: [info.address],
+      });
+    }
+  });
+  socket.bind(plugin.searchOptions.port, () => {
+    socket.addMembership(plugin.searchOptions.address);
+  });
 }
-
-
-
-findOnlineDevices = function(){
-	var allInterfaces = require('os').networkInterfaces();
-	var validInterfaces = [];
-	for(var i in allInterfaces){
-		for(var j=0; j<allInterfaces[i].length; j++){
-			var iface = allInterfaces[i][j];
-
-			if(iface.family=="IPv4" && iface.internal==false && iface.address.split(".")[0]!="169"){
-				validInterfaces.push(iface);
-			}
-		}
-	}
-
-	for(var i=0; i<validInterfaces.length; i++){
-		var block = new netmask(validInterfaces[i].cidr);
-		var f = block.first.split(".");
-		var l = block.last.split(".");
-		var cur = [f[0], f[1], f[2], f[3]];
-
-		for(var j=Number(f[2]); j<=Number(l[2]); j++){
-			cur[2] = j;
-			for(var k = Number(f[3]); k<Number(l[3]); k++){
-				cur[3] = k;
-				allIPs.push(cur[0]+"."+cur[1]+"."+cur[2]+"."+cur[3]);
-			}
-		}
-	}
-}
-
-
-
-
-// window.searchTCP = function(){
-// 	var allInterfaces = require('os').networkInterfaces();
-// 	var validInterfaces = [];
-// 	for(var i in allInterfaces){
-// 		for(var j=0; j<allInterfaces[i].length; j++){
-// 			var iface = allInterfaces[i][j];
-
-// 			if(iface.family=="IPv4" && iface.internal==false && iface.address.split(".")[0]!="169"){
-// 				validInterfaces.push(iface);
-// 			}
-// 		}
-// 	}
-
-// 	for(var i=0; i<validInterfaces.length; i++){
-// 		var block = new netmask(validInterfaces[i].cidr);
-// 		var f = block.first.split(".");
-// 		var l = block.last.split(".");
-// 		var cur = [f[0], f[1], f[2], f[3]];
-
-// 		for(var j=Number(f[2]); j<=Number(l[2]); j++){
-// 			cur[2] = j;
-// 			for(var k = Number(f[3]); k<Number(l[3]); k++){
-// 				cur[3] = k;
-// 				var ip = cur[0]+"."+cur[1]+"."+cur[2]+"."+cur[3];
-
-// 				TCPtest(ip, 3033);
-// 				TCPtest(ip, 3039);
-// 				TCPtest(ip, 3040);
-// 			}
-// 		}
-// 	}
-// }
-// TCPtest = function(address, port){
-// 	var client = net.createConnection(port, address, function(){
-// 		if(port==3033){
-// 			DEVICE.registerDevice({
-// 				type: "eos",
-// 				name: "ETC Eos Console",
-// 				port: 3032,
-// 				addresses: [address]
-// 			});
-// 		}else if(port==3040){
-// 			DEVICE.registerDevice({
-// 				type: "watchout",
-// 				name: "Watchout",
-// 				port: 3040,
-// 				addresses: [address]
-// 			});
-// 		}
-// 	});
-// 	client.on("error", function(err){
-// 	 	//no EOS here
-// 	});
-// }
-
-
-
- //  _    _ _____  _____  
- // | |  | |  __ \|  __ \ 
- // | |  | | |  | | |__) |
- // | |  | | |  | |  ___/ 
- // | |__| | |__| | |     
- //  \____/|_____/|_|     
-                       
-const pjLinkMessage = Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]);
-const xAirMessage = Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]);
-var serverUDP = dgram.createSocket('udp4');
-var serverUDP2 = dgram.createSocket('udp4');
-
-var searchSockets = [];
-
-
-newSearchUDP = function(pluginType, plugin){
-	var i = searchSockets.push(dgram.createSocket('udp4'))-1;
-	searchSockets[i].bind(plugin.searchOptions.listenPort, function(){
-		searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
-			//console.log(err)
-		});
-		setTimeout(function(){
-			searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
-				//console.log(err)
-			});
-		}, 100);
-		setTimeout(function(){
-			searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
-				//console.log(err)
-			});
-		}, 400);
-
-		searchSockets[i].on('message',function(msg,info){
-			if(plugin.searchOptions.validateResponse(msg, info)){
-				DEVICE.registerDevice({
-					type: pluginType,
-					defaultName: plugin.defaultName,
-					port: plugin.defaultPort,
-					addresses: [info.address]
-				})
-			}
-		});
-
-	});
-	searchSockets[i].on('listening', function(){
-	    searchSockets[i].setBroadcast(true);
-	});
-}
-
-
-// searchUDP = function(){
-
-// 	dgramPJLink = dgram.createSocket('udp4');
-// 	dgramPJLink.bind(function(){
-// 		dgramPJLink.send(pjLinkMessage, 4352, '255.255.255.255', (err) => {
-// 			//console.log(err)
-// 		});
-// 		dgramPJLink.on('message',function(msg,info){
-// 			if(msg.toString().indexOf("%2ACKN")==0){
-// 				DEVICE.registerDevice({
-// 					type: "pjlink",
-// 					name: "PJLink Projector",
-// 					port: 4352,
-// 					addresses: [info.address]
-// 				})
-// 			}
-// 		});
-
-// 	});
-// 	dgramPJLink.on('listening', function(){
-// 	    dgramPJLink.setBroadcast(true);
-// 	});
-
-
-// 	dgramXAir = dgram.createSocket('udp4');
-// 	dgramXAir.bind(function(){
-// 		dgramXAir.send(xAirMessage, 10024, '255.255.255.255', (err) => {
-// 			//console.log(err)
-// 		});
-// 		setTimeout(function(){
-// 			dgramXAir.send(xAirMessage, 10024, '255.255.255.255', (err) => {
-// 				//console.log(err)
-// 			});
-// 		}, 100);
-
-// 		dgramXAir.on('message',function(msg,info){
-// 			if(msg.toString().indexOf("/xinfo,ssss")){
-// 				DEVICE.registerDevice({
-// 					type: "xair",
-// 					name: "X Air Mixer",
-// 					port: 10024,
-// 					addresses: [info.address]
-// 				})
-// 			}
-// 		});
-
-// 	});
-// 	dgramXAir.on('listening', function(){
-// 	    dgramXAir.setBroadcast(true);
-// 	});
-	
-
-// }
-
-
-
-
-
@@ -1,293 +1,312 @@
 const { ipcRenderer } = require('electron');
-let DEVICE = require("./device.js");
-let PLUGINS = require("./plugins.js");
-var _ = require('lodash/function');
+const DEVICE = require('./device.js');
+const PLUGINS = require('./plugins.js');
+// const _ = require('lodash/function');

-var pinnedDevices = [];
+const pinnedDevices = [];
 module.exports.pinnedDevices = pinnedDevices;
 let activeDevice = false;

+module.exports.init = function init() {
+  populatePluginLists();
+};


-module.exports.init = function(){
-	populatePluginLists();
+function drawDeviceFrame(id) {
+
+  const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`);
+  const $devicePinned = document.getElementById(`device-${id}-pinned`);
+
+  if ($deviceDrawArea == null) {
+    return true;
+  }
+
+  const d = DEVICE.all[id];
+
+  let str = '<html><head>';
+  str += `<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/defaultPlugin.css' rel='stylesheet' type='text/css'>";
+  str += '</head><body>';
+
+  str += generateBodyHTML(d);
+
+  // str += "<script src='node_modules/lodash/core.min.js'></script>";
+  // str += "<script src='./plugins/" +d.type +"/update.js'></script>";
+
+  str += '</body></html>';
+
+  $deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
+  $deviceDrawArea.contentWindow.document.open();
+  $deviceDrawArea.contentWindow.document.write(str);
+  $deviceDrawArea.contentWindow.document.close();
+
+
+  if (d.pinIndex) {
+    $devicePinned.style.display = 'block';
+  } else {
+    $devicePinned.style.display = 'none';
+  }
+
+  return true;
+
+};
+
+
+function generateBodyHTML(d){
+  let str = "";
+
+  if (d.status === 'ok') {
+
+    try {
+      str += PLUGINS.all[d.type].template({
+        data: d.data,
+        listName: (d.displayName || d.defaultName)
+      });
+    } catch (err) {
+      console.log(err);
+      str += '<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.port}</em></h3>`;
+    str += '<hr></div>';
+    str += `<div class="device-info">${PLUGINS.all[d.type].info()}<div>`;
+    
+  }
+  
+  return str;
 }


+module.exports.draw = function draw(device) {

-drawDeviceInterface = function(id){
+  const d = device;
+  const $deviceDrawArea = document.getElementById(`device-${d.id}-draw-area`);

-	// console.log("DRAW")
+  if($deviceDrawArea){
+    const scriptEl = $deviceDrawArea.contentWindow.document.createRange().createContextualFragment(generateBodyHTML(d));
+    $deviceDrawArea.contentWindow.document.body.replaceChildren(scriptEl);

-	var $deviceDrawArea = document.getElementById("device-"+id+"-draw-area");
-	var $devicePinned = document.getElementById("device-"+id+"-pinned");
+  }else{
+    drawDeviceFrame(d.id);

-	if($deviceDrawArea==null){
-		return true;
-	}
+  }
+  d.drawn = true;
+};

-	d = DEVICE.all[id];
+module.exports.update = function update(device, type, data){
+  const doc = document.getElementById(`device-${device.id}-draw-area`);
+  if(doc){
+    PLUGINS.all[device.type].update(device, doc.contentWindow.document, type, data);
+  }

-	var str = "<html><head>";
-	if(d.status=="ok"){
-		str+="<link href='./plugins/"+d.type+"/"+d.type+".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 {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/defaultPlugin.css' rel='stylesheet' type='text/css'>";
-	str+="</head><body>";
-
-	if(d.status=="ok"){
-		try{
-			str += PLUGINS.all[d.type].template({data: d.data, listName: d.displayName || d.defaultName});
-		}catch(err){
-			console.log(err)
-			str += "<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.port+"</em></h3></div>";
-	}
-	
-	str+="</body></html>";
-
-		
-	$deviceDrawArea.setAttribute("class", d.type+" draw-area");
-	$deviceDrawArea.contentWindow.document.open();
-	$deviceDrawArea.contentWindow.document.write(str);
-
-
-	if(d.pinIndex){
-		$devicePinned.style.display = "block";
-	}else{
-		$devicePinned.style.display = "none";
-	}
 }

-module.exports.draw = function(device){
-	if(device==undefined){
-		return true;
-	}
-	drawDeviceInterface(device.id)
-}
+module.exports.addDeviceToList = function addDeviceToList(device) {
+  const d = device;
+  let html = '';
+
+  if (d.status === 'ok') {
+    html += "<div class='status material-icons green'>done</div>";
+  } else if (d.status === 'refresh') {
+    html += "<div class='status material-icons'>refresh</div>";
+  } else {
+    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>`;
+
+  const elem = document.getElementById(d.id);
+  if (elem == null) {
+    document
+      .getElementById('device-list')
+      .insertAdjacentHTML('beforeend', `<a class='device' id='${d.id}'>${html}</a>`);
+  } else {
+    elem.innerHTML = html;
+  }
+
+};


+module.exports.removeDeviceFromList = function removeDeviceFromList(device) {
+  const d = device;
+  document.getElementById(d.id).remove();
+
+};


-module.exports.addDeviceToList = function(device){
-	var d = device;
-	var addressStr = d.addresses[0] || "";
-	for(var i=1; i<d.addresses.length; i++){
-		addressStr+=", "+d.addresses[i];
-	}
-	var html = "";
-	if(d.status=="ok"){
-		html += "<div class='status material-icons green'>done</div>";
-	}else if(d.status=="refresh"){
-		html += "<div class='status material-icons'>refresh</div>";
-	}else{
-		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>";
+function switchDevice(id) {
+  if (activeDevice && activeDevice.pinIndex === false) {
+    document.getElementById(`device-${activeDevice.id}`).remove();
+    activeDevice = false;
+  }
+  activeDevice = DEVICE.all[id];

-	let elem = document.getElementById(d.id);
-	if(elem==null){
-		document.getElementById("device-list").insertAdjacentHTML("beforeend", "<a class='device' id='"+d.id+"'>"+html+"</a>");
-	}else{
-		elem.innerHTML = html;
-	}
-}
-module.exports.removeDeviceFromList = function(device){
-	var d = device;
-	document.getElementById(device.id).remove();
-}
+  let cols = 1;
+  if (pinnedDevices.length > 0) {
+    cols += pinnedDevices.length;
+  }
+  if (pinnedDevices.indexOf(activeDevice) >= 0 || id === undefined) {
+    cols--;
+  }

+  document.getElementById('all-devices').style.gridTemplateColumns = `repeat(${cols}, 1fr)`;

+  if (id === undefined) {
+    // document.getElementById('refresh-device-button').style.opacity = 0.2;
+    document.getElementById('refresh-device-button').disabled = true;
+    document.getElementById('device-settings-table').style.display = 'none';
+    return;
+  }

-switchDevice = function(id){
+  document.getElementById('refresh-device-button').disabled = false;
+  // document.getElementById('refresh-device-button').style.opacity = 1;

-	if(activeDevice && activeDevice.pinIndex==false){
-		document.getElementById("device-"+activeDevice.id).remove();
-		activeDevice = false;
-	}
-	activeDevice = DEVICE.all[id];
+  const i = DEVICE.all[id].id;
+  let $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/img/outline_push_pin_white_18dp.png"><iframe id="device-${i}-draw-area" class="draw-area"></iframe></div>`;
+    document.getElementById('all-devices').insertAdjacentHTML('afterbegin', html);

-	var cols = 1;
-	if(pinnedDevices.length>0){
-		cols+=pinnedDevices.length;
-	}
-	if(pinnedDevices.indexOf(activeDevice)>=0 || id==undefined){
-		cols--;
-	}
+    $deviceWrapper = document.getElementById(`device-${i}`);
+  }

-	document.getElementById("all-devices").style.gridTemplateColumns = "repeat("+(cols)+", 1fr)";
+  window.switchClass(document.getElementById(id), 'active-device');
+  drawDeviceFrame(id);
+  window.switchClass(document.getElementById(`device-${id}`), 'active-device-outline');

-	if(id==undefined){
-		//document.getElementById('refresh-device-button').style.opacity = 0.2;
-		document.getElementById('refresh-device-button').disabled = true;
-		document.getElementById('device-settings-table').style.display = "none";
-		return true;
-	}else{
-		document.getElementById('refresh-device-button').disabled = false;
-		//document.getElementById('refresh-device-button').style.opacity = 1;
-	}
+  document.getElementById('device-settings-table').style.display = 'block';
+  document.getElementById('device-settings-plugin-dropdown').value = activeDevice.type;
+  document.getElementById('device-settings-name').value = activeDevice.displayName || activeDevice.defaultName || '';
+  document.getElementById('device-settings-ip').value = activeDevice.addresses[0] || '';
+  document.getElementById('device-settings-port').value = activeDevice.port || '';
+  document.getElementById('device-settings-pin').checked = activeDevice.pinIndex;

-
-	var i = DEVICE.all[id].id;
-
-	var $deviceWrapper = document.getElementById("device-"+i);
-	if(!$deviceWrapper){
-		var html = '<div class="col device-wrapper" id="device-'+i+'">'
-		+'<img id="device-'+i+'-pinned" class="device-pin" src="src/img/outline_push_pin_white_18dp.png">'
-		+'<iframe id="device-'+i+'-draw-area" class="draw-area"></iframe>'
-		+'<div id="device-'+i+'-settings"></div></div>';
-		document.getElementById("all-devices").insertAdjacentHTML("afterbegin", html);
-
-		$deviceWrapper = document.getElementById("device-"+i);
-	}
-
-    switchClass(document.getElementById(id), "active-device");
-    drawDeviceInterface(id);
-    switchClass(document.getElementById("device-"+id), "active-device-outline");
-
-
-
-    document.getElementById('device-settings-table').style.display = "block";
-    document.getElementById('device-settings-plugin-dropdown').value=activeDevice.type;
-    document.getElementById("device-settings-name").value = activeDevice.displayName || activeDevice.defaultName || "";
-    document.getElementById("device-settings-ip").value = activeDevice.addresses[0] || "";
-    document.getElementById("device-settings-port").value = activeDevice.port || "";
-    document.getElementById("device-settings-pin").checked = activeDevice.pinIndex;
-
-
-    ipcRenderer.send("enableDeviceDropdown", "");
-    ipcRenderer.send("setDevicePin", !DEVICE.all[id].pinIndex==false);
-   
-}
+  ipcRenderer.send('enableDeviceDropdown', '');
+  ipcRenderer.send('setDevicePin', !DEVICE.all[id].pinIndex === false);
+};
 module.exports.switchDevice = switchDevice;


-module.exports.getActiveDevice = function(){
-	return activeDevice;
-}
-
-module.exports.pinActiveDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	if(pinnedDevices.indexOf(DEVICE.all[activeDevice.id])==-1){
-		pinnedDevices.push(DEVICE.all[activeDevice.id]);
-	}
-	DEVICE.changeActivePinIndex(true);
-}
-
-module.exports.unpinActiveDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	pinnedDevices.splice(pinnedDevices.indexOf(DEVICE.all[activeDevice.id]), 1);
-	DEVICE.changeActivePinIndex(false);
-}
-
-module.exports.pinDevice = function(device){
-	pinnedDevices.push(device)
-	DEVICE.changePinIndex(device, true);
-}
-module.exports.unpinDevice = function(device){
-	pinnedDevices.push(device)
-	DEVICE.changePinIndex(device, false);
-}
-
-module.exports.resetPinned = function(){
-	pinnedDevices.length = 0;
-	activeDevice = false;
-	//switchDevice();
-	try{
-		document.querySelector("#device-list .active-device").classList.remove("active-device");
-	}catch(err){}
-	document.getElementById("all-devices").innerHTML = "";
-}
-
-module.exports.getPinnedDevices = function(){
-	return pinnedDevices;
-}
-
-
-module.exports.toggleSlotButtons = function(slotIndex){
-	if(slotIndex==1){
-		document.getElementById("save-slot-1").classList.add("active");
-		document.getElementById("save-slot-2").classList.remove("active");
-		document.getElementById("save-slot-3").classList.remove("active");
-	}else if(slotIndex==2){
-		document.getElementById("save-slot-1").classList.remove("active");
-		document.getElementById("save-slot-2").classList.add("active");
-		document.getElementById("save-slot-3").classList.remove("active");
-	}else if(slotIndex==3){
-		document.getElementById("save-slot-1").classList.remove("active");
-		document.getElementById("save-slot-2").classList.remove("active");
-		document.getElementById("save-slot-3").classList.add("active");
-	}
-}
-
-module.exports.selectPreviousDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	var keys = Object.keys(DEVICE.all);
-	var prevIndex = Math.max(0, keys.indexOf(activeDevice.id)-1);
-	switchDevice(keys[prevIndex])
-}
-module.exports.selectNextDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	var keys = Object.keys(DEVICE.all);
-	var prevIndex = Math.min(keys.length-1, keys.indexOf(activeDevice.id)+1);
-	switchDevice(keys[prevIndex])
-}
-
-
-
-populatePluginLists = function(){
-
-	var typeSelect = "";
-	var addSelect = '<option value="" disabled selected hidden>+</option>';
-
-	for(const pluginType in PLUGINS.all){
-		var plugin = PLUGINS.all[pluginType];
-
-		addSelect+="<option value='"+pluginType+"'>"+plugin.defaultName+"</option>";
-		typeSelect+="<option value='"+pluginType+"'>"+plugin.defaultName+"</option>";
-	}
-
-	document.getElementById("device-settings-plugin-dropdown").innerHTML = typeSelect;
-	document.getElementById("add-device-button").innerHTML = addSelect;
-}
-
-function debounce(func, wait, immediate) {
-	var timeout;
-	return function() {
-		var context = this, args = arguments;
-		var later = function() {
-			timeout = null;
-			if (!immediate) func.apply(context, args);
-		};
-		var callNow = immediate && !timeout;
-		clearTimeout(timeout);
-		timeout = setTimeout(later, wait);
-		if (callNow) func.apply(context, args);
-	};
+module.exports.getActiveDevice = function getActiveDevice() {
+  return activeDevice;
+};
+
+
+module.exports.pinActiveDevice = function pinActiveDevice() {
+  if (activeDevice === undefined) {
+    return;
+  }
+  if (pinnedDevices.indexOf(DEVICE.all[activeDevice.id]) === -1) {
+    pinnedDevices.push(DEVICE.all[activeDevice.id]);
+  }
+  DEVICE.changeActivePinIndex(true);
+};
+
+
+module.exports.unpinActiveDevice = function unpinActiveDevice() {
+  if (activeDevice === undefined) {
+    return;
+  }
+  pinnedDevices.splice(pinnedDevices.indexOf(DEVICE.all[activeDevice.id]), 1);
+  DEVICE.changeActivePinIndex(false);
+};
+
+
+module.exports.pinDevice = function pinDevice(device) {
+  pinnedDevices.push(device);
+  DEVICE.changePinIndex(device, true);
+};
+
+
+module.exports.unpinDevice = function unpinDevice(device) {
+  pinnedDevices.push(device);
+  DEVICE.changePinIndex(device, false);
+};
+
+
+module.exports.resetPinned = function resetPinned() {
+  pinnedDevices.length = 0;
+  activeDevice = false;
+
+  try {
+    document
+      .querySelector('#device-list .active-device')
+      .classList.remove('active-device');
+  } catch (err) {
+    //
+  }
+  document.getElementById('all-devices').innerHTML = '';
+};
+
+
+module.exports.getPinnedDevices = function getPinnedDevices() {
+  return pinnedDevices;
+};
+
+
+module.exports.toggleSlotButtons = function toggleSlotButtons(slotIndex) {
+  if (slotIndex === 1) {
+    document.getElementById('save-slot-1').classList.add('active');
+    document.getElementById('save-slot-2').classList.remove('active');
+    document.getElementById('save-slot-3').classList.remove('active');
+  } else if (slotIndex === 2) {
+    document.getElementById('save-slot-1').classList.remove('active');
+    document.getElementById('save-slot-2').classList.add('active');
+    document.getElementById('save-slot-3').classList.remove('active');
+  } else if (slotIndex === 3) {
+    document.getElementById('save-slot-1').classList.remove('active');
+    document.getElementById('save-slot-2').classList.remove('active');
+    document.getElementById('save-slot-3').classList.add('active');
+  }
+};
+
+
+module.exports.selectPreviousDevice = function selectPreviousDevice() {
+  if (activeDevice === undefined) {
+    return;
+  }
+  const keys = Object.keys(DEVICE.all);
+  const prevIndex = Math.max(0, keys.indexOf(activeDevice.id) - 1);
+  switchDevice(keys[prevIndex]);
+};
+
+
+module.exports.selectNextDevice = function selectNextDevice() {
+  if (activeDevice === undefined) {
+    return;
+  }
+  const keys = Object.keys(DEVICE.all);
+  const prevIndex = Math.min(keys.length - 1, keys.indexOf(activeDevice.id) + 1);
+  switchDevice(keys[prevIndex]);
+};
+
+
+function populatePluginLists() {
+  let typeSelect = '';
+  let addSelect = '<option value="" disabled selected hidden>+</option>';
+
+  Object.keys(PLUGINS.all).forEach((pluginType) => {
+    const plugin = PLUGINS.all[pluginType];
+    addSelect += `<option value='${pluginType}'>${plugin.defaultName}</option>`;
+    typeSelect += `<option value='${pluginType}'>${plugin.defaultName}</option>`;
+  });
+
+  document.getElementById('device-settings-plugin-dropdown').innerHTML = typeSelect;
+  document.getElementById('add-device-button').innerHTML = addSelect;
 };
Author	SHA1	Message	Date
sparks-alec	6cbb1c1f76	bad version num	2022-05-07 01:28:14 -04:00
sparks-alec	a4c71e9313	version bump	2022-05-07 01:27:46 -04:00
sparks-alec	d40f2ac7ee	correct a ton of path syntax	2022-05-07 01:27:37 -04:00
sparks-alec	2b7db257ed	Merge pull request #4 from jwetzell/x32-use-osc convert x32 to use actual osc	2022-05-06 23:28:53 -04:00
jwetzell	5ae4f71a78	convert x32 to use actual osc	2022-03-01 23:27:54 -06:00
sparks-alec	85af9a796c	add Art-Net and sACN to list of supported devices	2022-02-27 19:48:01 -05:00
sparks-alec	7734406107	update to 0.9.5	2022-02-27 19:25:19 -05:00
sparks-alec	073ee5adcc	make it so Cue View doesn't discover itself!	2022-02-27 19:10:51 -05:00
sparks-alec	70da3ef636	fix string format issue with elapsed time display	2022-02-27 19:10:36 -05:00
sparks-alec	017fa6b6d3	Merge pull request #3 from jwetzell/x32-cleanup Mega Awesome X32 Improvements	2022-02-19 19:51:54 -05:00
jwetzell	b1bb0da2a1	Clean up data layout and add stereo LR meters	2022-02-19 13:04:41 -06:00
jwetzell	c0f179a018	add color gradient to meters	2022-02-17 20:36:35 -06:00
jwetzell	d8847c87b8	X32 basic meters	2022-02-17 19:38:21 -06:00
jwetzell	5f4c544e99	clean up null characters	2022-02-17 19:37:58 -06:00
jwetzell	13d7cbd718	apply eslint	2022-02-17 09:34:13 -06:00
jwetzell	45b9c600df	apply prettier	2022-02-17 09:31:46 -06:00
jwetzell	9a97a92d97	Fix up X32 displaying and Main LR info	2022-02-17 09:13:18 -06:00
jwetzell	e6afd15db5	Fix infin symbol look	2022-02-17 09:11:41 -06:00
sparks-alec	a3e66591ce	remove debugging console.logs	2022-02-17 01:40:06 -05:00
sparks-alec	9c60b9dd8a	linting	2022-02-17 01:38:23 -05:00
sparks-alec	d1f31e5095	rename plugin	2022-02-17 01:38:12 -05:00
sparks-alec	a8def92103	fix UI not being updated with new info	2022-02-17 01:37:47 -05:00
sparks-alec	722e8fdada	add plugin info field to help users connect their devices	2022-02-14 03:39:53 -05:00
sparks-alec	617ede46e0	add search type Multicast	2022-02-14 03:39:28 -05:00
sparks-alec	e17e9d3d50	add info field to templates to help users connect their devices	2022-02-14 03:39:05 -05:00
sparks-alec	1701e16dc0	more efficient UDP connections	2022-02-14 03:38:36 -05:00
sparks-alec	ad099f909d	remove debug log	2022-02-14 03:38:03 -05:00
sparks-alec	609292668f	fix bug when processing projector data	2022-02-14 03:36:42 -05:00
sparks-alec	c56d8d39b7	remove caps from package name	2022-02-14 03:28:12 -05:00
sparks-alec	454b134745	lint all the things	2022-02-14 03:25:37 -05:00
sparks-alec	e5c8f242ab	additional formatting for troubleshooting text	2022-02-14 03:24:19 -05:00
sparks-alec	cb724b97cd	eslint stuff	2022-02-14 03:23:58 -05:00
sparks-alec	60664a5f78	additional linting rules Mostly related to how Cue View involves dealing with byte data more frequently than ~~real apps~~ apparently	2022-02-14 03:22:29 -05:00
sparks-alec	cdad432e30	lil whitespace, improve legibility	2022-02-08 22:57:21 -05:00
sparks-alec	d56fb07082	add support for multiple workspaces	2022-02-07 23:11:24 -05:00
sparks-alec	fd2b3c3980	formatting tweaks to cue carts	2022-02-07 23:11:12 -05:00
sparks-alec	b8237423d6	formatting tweaks	2022-02-07 23:10:51 -05:00
sparks-alec	46de005b30	scroll playbackPosition into view when changed	2022-02-07 02:13:13 -05:00
sparks-alec	4d0536b1a4	Update view.js	2022-02-07 02:12:52 -05:00
sparks-alec	9b7a4d9166	Update main.js	2022-02-07 02:12:41 -05:00
sparks-alec	fae4775c8a	fasted data updates/draws	2022-02-07 02:05:29 -05:00
sparks-alec	557c051871	change plugin filenames	2022-02-06 23:16:33 -05:00
sparks-alec	72fc8642f6	Update plugins.js	2022-02-06 23:16:11 -05:00
sparks-alec	c703609829	Update view.js	2022-02-06 23:16:04 -05:00
sparks-alec	e08a4f71dd	Update device.js	2022-02-06 23:15:25 -05:00
sparks-alec	2878c65e16	Update cuelist.ejs	2022-02-06 02:12:37 -05:00
sparks-alec	6dcfc266a9	fix for extremely long text in headers	2022-02-06 02:09:10 -05:00
sparks-alec	3fc0457ec9	Update qlab.html	2022-02-06 02:05:59 -05:00
sparks-alec	c5eef2b2c9	Update defaultPlugin.css	2022-02-06 02:05:53 -05:00
sparks-alec	bc7905a509	tweak active device highlight	2022-02-06 02:05:45 -05:00
sparks-alec	02a78871bc	Update .gitignore	2022-02-06 01:32:27 -05:00
sparks-alec	09d807b0c1	Update .gitignore	2022-02-06 01:32:07 -05:00
sparks-alec	04c109b014	Merge branch 'main' of https://github.com/stagehacks/Cue-View	2022-02-06 01:31:38 -05:00
sparks-alec	0014da18b3	Update .gitignore	2022-02-06 01:31:18 -05:00
sparks-alec	59dfec67bc	change template to lodash	2022-02-06 01:31:12 -05:00
sparks-alec	16dfa05349	add heartbeatTimeout for slow-to-respond Projectors	2022-02-06 01:30:05 -05:00
sparks-alec	2a539ebfc5	add Cue Carts	2022-02-06 01:29:41 -05:00
sparks-alec	ba19f71d67	change templates to ejs	2022-02-06 01:29:33 -05:00
sparks-alec	cbf212fbd6	remove ejs	2022-02-06 01:28:56 -05:00
sparks-alec	849bce75f6	remove missing font	2022-02-06 01:28:49 -05:00
sparks-alec	453b5d064e	add Cue Carts	2022-02-06 01:28:39 -05:00
sparks-alec	7dd1d1d459	update netmask, remove ejs	2022-02-06 01:27:13 -05:00
sparks-alec	6822b0a131	Update README.md	2022-02-06 01:18:35 -05:00
sparks-alec	bec3ff1ffe	bye	2022-01-15 18:47:27 -05:00
sparks-alec	4c94f3981b	build settings tweaks	2022-01-15 18:47:15 -05:00
sparks-alec	fa143fb8fd	put menu template back	2022-01-15 18:46:59 -05:00
sparks-alec	d2edcf81fa	style fix for dropdowns on Windows	2022-01-15 16:10:49 -05:00
sparks-alec	127dba77b6	Update package-lock.json	2022-01-15 16:10:34 -05:00
sparks-alec	98e2d0928c	Update .gitignore	2022-01-15 16:10:06 -05:00
sparks-alec	8aa8021272	fix menus to work on all platforms	2022-01-15 16:10:02 -05:00
sparks-alec	b31e0af2b7	switch to electron-builder removing electron-forge	2022-01-15 16:09:34 -05:00
sparks-alec	3100ed53c9	cross-platform icons	2022-01-15 16:08:18 -05:00
sparks-alec	15e419e633	Delete out directory	2022-01-15 15:56:51 -05:00
sparks-alec	7ce39a1e37	Delete .vscode directory	2022-01-15 10:30:21 -05:00
sparks-alec	c2c25125ae	Update .gitignore	2022-01-15 10:30:04 -05:00
sparks-alec	c1e07cde2a	Merge branch 'main' of https://github.com/stagehacks/Cue-View	2022-01-15 10:29:53 -05:00
sparks-alec	9d9c1d1e6f	this is not supposed to be here oops	2022-01-15 10:29:41 -05:00
sparks-alec	91ae8da9a2	fix quotes	2022-01-15 10:23:49 -05:00
sparks-alec	22ad1c3f71	make device header background not transparent looks like butt, honestly	2022-01-15 10:23:39 -05:00
sparks-alec	0744e9e3c4	add scrollbar-corner background color game-changing style fix for about 6 pixels in the corner of very narrow views	2022-01-15 10:22:48 -05:00
sparks-alec	4b83430bb9	Update main.js make pretty on Windows	2022-01-15 10:11:31 -05:00
sparks-alec	dd8e15cadc	new UDPsocket send syntax	2022-01-15 10:11:16 -05:00
sparks-alec	245ae98a4e	fix code block	2022-01-15 10:08:56 -05:00
sparks-alec	cdb9b64af0	first stab at documenting plugins	2022-01-15 10:07:52 -05:00
sparks-alec	cfa47f0064	autoscroll now lives in view.js instead of in the plugin itself	2022-01-15 00:26:42 -05:00
sparks-alec	6be6b8d944	add Cue Carts, finally	2022-01-15 00:25:58 -05:00
sparks-alec	0ba876384a	make device rendering faster!	2022-01-15 00:25:27 -05:00
sparks-alec	f1b4d2a49a	remove unnecessary debug info	2022-01-09 11:27:33 -05:00
sparks-alec	f0e0c1c30e	remove unnecessary debug info	2022-01-09 11:27:23 -05:00
sparks-alec	b3ba244bf7	remove extra quote that broke Eos plugin computers are the worst	2022-01-09 11:27:10 -05:00
sparks-alec	580aa96886	add ignore for .vscode	2022-01-09 11:19:08 -05:00
sparks-alec	ad9a21c2e8	add require for search.js UI search buttons don't work without it!	2022-01-09 11:13:05 -05:00
sparks-alec	27f8f79d6f	Merge branch 'main' of https://github.com/stagehacks/Cue-View	2022-01-09 10:48:44 -05:00
sparks-alec	e394b4cec8	add win32 build	2022-01-09 10:48:40 -05:00
sparks-alec	173f5466ff	add ignore for win32	2022-01-09 10:47:46 -05:00
sparks-alec	1dbd0e1a25	add win32 makers	2022-01-09 10:46:38 -05:00
sparks-alec	711b51829c	Merge pull request #1 from samschloegel/main Add linting and formatting to improve open source contributability	2022-01-09 10:43:46 -05:00
Sam Schloegel	c2fdf0e5c6	Fix missing ejs requirement	2022-01-05 21:35:44 -05:00
Sam Schloegel	0e97bd6abc	Define variables before use	2022-01-05 21:27:38 -05:00
Sam Schloegel	9c16c9c220	Reduce variable scope pollution with const/let	2022-01-05 21:20:35 -05:00
Sam Schloegel	35340b86db	Consolidate requires	2022-01-05 20:25:42 -05:00
Sam Schloegel	221341672a	Remove unused requires	2022-01-05 20:14:44 -05:00
Sam Schloegel	bf2f24f924	Use const for require statements	2022-01-03 15:20:51 -05:00
Sam Schloegel	22be9dbccf	Disable import/extensions rule to match convention	2022-01-03 15:20:00 -05:00
Sam Schloegel	1bbc28f817	Fix global-require next-line exception	2022-01-03 15:18:45 -05:00
Sam Schloegel	d0dc2380ea	eslint fix prefer-arrow-callback errors	2022-01-03 14:48:13 -05:00
Sam Schloegel	83c46db661	eslint fix spaced-comment errors	2022-01-03 14:40:10 -05:00
Sam Schloegel	aec191e178	Change string concats to template literals	2022-01-03 14:31:13 -05:00
Sam Schloegel	c5691b56c9	Initial prettify	2022-01-03 10:51:25 -05:00
Sam Schloegel	551d29da60	Add bracketSameLine for html	2022-01-03 10:42:39 -05:00
Sam Schloegel	a4bff71dbe	Adjust to better match existing conventions	2022-01-03 00:28:11 -05:00
Sam Schloegel	d642c01b8c	Add airbnb to eslint	2022-01-02 23:04:14 -05:00
Sam Schloegel	f9cf6ecc52	Initialize eslint, prettier, format on save	2022-01-02 22:41:15 -05:00
sparks-alec	9a6d8875e8	remove unused font	2021-11-13 17:32:27 -05:00
sparks-alec	65cb11c0cc	remove debug console log	2021-11-13 17:22:39 -05:00
sparks-alec	d2a52f079e	remove unused font link	2021-11-13 17:21:57 -05:00
sparks-alec	949b78ec96	fix issues processing info from XAir	2021-11-13 15:59:52 -05:00
sparks-alec	9255cfcdfe	Update package-lock.json	2021-11-13 15:59:09 -05:00
sparks-alec	329e55ec25	Update README.md	2021-11-03 14:18:01 -04:00
				`@@ -0,0 +1 @@`
				`<p><em>sACN</em> requires no configuration.</p>`