bump version to test autoUpdater

Qlab cleanup

.eslintrc.js

@@ -16,5 +16,10 @@ module.exports = {
     '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'
   },
 };

.github/workflows/publish.yaml

@@ -0,0 +1,37 @@
+on:
+  push:
+    branches:
+      - github-actions
+
+env:
+  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}  
+
+jobs:
+  build-linux:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run release
+  build-windows:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run release
+  build-macos:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run release
+      

.gitignore

@@ -2,4 +2,6 @@
 .DS_Store
 node_modules
 .vscode
-/dist
+/dist
+package-lock.json
+package-lock.json

.nvmrc

@@ -0,0 +1 @@
+v18.12.1

README.md

@@ -19,23 +19,24 @@ A dashboard for everything in your show.
 - 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
+
 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'
@@ -84,4 +85,4 @@ exports.heartbeat = function (device){
 	// runs every n milliseconds, defined by exports.heartbeatInterval
 	devide.send();
 }
-```
+```

main.js

@@ -1,11 +1,127 @@
-const { app, BrowserWindow, Menu, ipcMain, nativeTheme } = require('electron');
+const { app, BrowserWindow, Menu, ipcMain, nativeTheme, dialog, shell } = require('electron');
+const { autoUpdater } = require('electron-updater');
 const path = require('path');
 
 const isMac = process.platform === 'darwin';
+const isWin = process.platform === 'win32';
+
 let menuObj;
 let mainWindow;
 
-const menuTemplate = require('./src/menu');
+
+const menuTemplate = [
+  ...(isMac ? [{ role: 'appMenu' }] : []),
+  {
+    label: 'File',
+    submenu: [
+      {
+        label: 'Clear Saved Data',
+        id: 'resetViews',
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('resetViews');
+        }
+      },
+      {
+        label: 'Reload App',
+        role: 'reload'
+      },
+      { type: 'separator' },
+      ...(isMac ? [{ role: 'close' }] : [{ role: 'quit' }])
+    ]
+  },
+  { role: 'editMenu' },
+  {
+    label: 'View',
+    submenu: [
+      { role: 'togglefullscreen' },
+      { type: 'separator' },
+      {
+        label: 'Arrangement 1',
+        accelerator: 'CommandOrControl+1',
+        id: 'window1',
+        enabled: true,
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSlots1');
+        }
+      },
+      {
+        label: 'Arrangement 2',
+        accelerator: 'CommandOrControl+2',
+        id: 'window2',
+        enabled: true,
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSlots2');
+        }
+      },
+      {
+        label: 'Arrangement 3',
+        accelerator: 'CommandOrControl+3',
+        id: 'window3',
+        enabled: true,
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSlots3');
+        }
+      },
+      { type: 'separator' },
+      { role: 'toggleDevTools' }
+    ]
+  },
+  {
+    label: 'Device',
+    submenu: [
+      {
+        label: 'Search for Devices',
+        accelerator: 'CommandOrControl+F',
+        id: 'deviceSearch',
+        enabled: true,
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doSearch');
+        }
+      },
+      { type: 'separator' },
+      {
+        label: 'Pinned',
+        type: 'checkbox',
+        checked: true,
+        accelerator: 'CommandOrControl+P',
+        id: 'devicePin',
+        enabled: false,
+        click (menuItem, window, event) {
+          mainWindow.webContents.send(
+            'setActiveDevicePinned',
+            menuItem.checked
+          );
+        }
+      },
+      {
+        label: 'Delete',
+        accelerator: 'CommandOrControl+Backspace',
+        id: 'deviceDelete',
+        enabled: false,
+        click (menuItem, window, event) {
+          mainWindow.webContents.send('doDelete');
+        }
+      }
+    ]
+  },
+  {
+    label: 'Help',
+    role: 'help',
+    submenu: [
+      {
+        label: 'About',
+        role: 'about'
+      },
+      {
+        label: 'Check for Updates',
+        click: ()=>{
+          autoUpdater.checkForUpdates();
+        }
+      }
+    ]
+  },
+];
+
 
 const windowMac = {
   width: 1500,
@@ -35,6 +151,11 @@ const windowWin = {
   },
 }
 
+if (isWin)
+{
+    app.setAppUserModelId(app.name);
+}
+
 const createWindow = () => {
 
   nativeTheme.themeSource = 'dark';
@@ -57,7 +178,6 @@ const createWindow = () => {
 
   menuObj = Menu.buildFromTemplate(menuTemplate);
   Menu.setApplicationMenu(menuObj);
-  
 };
 
 app.whenReady().then(() => {
@@ -93,3 +213,127 @@ ipcMain.on('disableSearchAll', (event, arg) => {
 ipcMain.on('setDevicePin', (event, arg) => {
   menuObj.getMenuItemById('devicePin').checked = arg;
 });
+
+
+// Autoupdate logic
+
+// this can be set to true to bypass the download update dialog and skip straight to install prompt
+autoUpdater.autoDownload = false;
+
+autoUpdater.on('update-available', (updateInfo)=>{
+
+  // skip prompting to download if autoDownload is set
+  if(autoUpdater.autoDownload){
+    return;
+  }
+
+  const msg = `Version ${updateInfo.version} is available:  Would you like to download?`
+  const title = 'Update Available';
+
+  let dialogOpts = {}
+
+  if(isMac){
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Download', 'Cancel'],
+      title: 'Update Available',
+      message: title,
+      detail: `Auto updating is not yet automatic on MacOS. Please manually download and install version ${updateInfo.version}.`
+    }
+  }else{
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Download', 'Cancel'],
+      title: 'Update Available',
+      message: msg
+    }
+  }
+  
+  dialog.showMessageBox(mainWindow,dialogOpts).then((returnValue) => {
+    // download was clicked
+    if (returnValue.response === 0){ 
+      if(!isMac){
+        autoUpdater.downloadUpdate();
+      }else{
+        // TODO: get code signing working
+        // temp solution to direct user to download
+        shell.openExternal("https://github.com/stagehacks/Cue-View/releases/")
+      }
+
+    }
+  })
+})
+
+autoUpdater.on('update-downloaded',(event)=>{
+  const title = 'Update Downloaded';
+  const msg = `Version ${event.version} has been downloaded. Would you like to install this update now?`
+
+  let dialogOpts = {}
+  
+  if(isMac){
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Install', 'Later'],
+      title: 'Update Available',
+      message: title,
+      detail: msg
+    }
+  }else{
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Install', 'Later'],
+      title: 'Update Available',
+      message: msg
+    }
+  }
+  
+  dialog.showMessageBox(mainWindow,dialogOpts).then((returnValue) => {
+    if (returnValue.response === 0) autoUpdater.quitAndInstall()
+  })
+})
+
+autoUpdater.on('update-not-available',(updateInfo)=>{
+  let dialogOpts = {}
+  const msg = `There is no update available at this time. Latest version is v${updateInfo.version}`
+  if(isMac){
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Ok'],
+      title: 'No Update Available',
+      message: 'No Update Available',
+      detail: msg
+    }
+  }else{
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Ok'],
+      title: 'No Update Available',
+      message: msg
+    }
+  }
+
+  dialog.showMessageBox(mainWindow,dialogOpts)
+})
+
+autoUpdater.on('error',(error,message)=>{
+  let dialogOpts = {}
+  
+  if(isMac){
+    dialogOpts = {
+      type: 'error',
+      buttons: ['Ok'],
+      title: 'Update Error',
+      message: 'Update Error',
+      detail: error.message
+    }
+  }else{
+    dialogOpts = {
+      type: 'error',
+      buttons: ['Ok'],
+      title: 'Update Error',
+      message: error.message
+    }
+  }
+
+  dialog.showMessageBox(mainWindow,dialogOpts)
+})

package.json

@@ -1,48 +1,72 @@
 {
-  "name": "Cue-View",
+  "name": "cue-view",
   "productName": "Cue View",
-  "version": "0.9.4-pre",
+  "version": "0.9.7-pre",
   "description": "A dashboard for everything in your show",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "electron .",
-    "buildAll": "electron-builder -m -w -l"
+    "build": "electron-builder -m -w -l",
+    "build:mac": "electron-builder -m",
+    "build:windows": "electron-builder -w",
+    "build:linux": "electron-builder -l",
+    "build:arm": "electron-builder -l --arm64",
+    "release": "electron-builder"
   },
-  "author": "Cue View",
+  "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": "^15.2.0",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.3.0",
-    "prettier": "^2.5.1"
+    "electron": "^21.3.0",
+    "electron-builder": "^23.6.0",
+    "eslint": "^8.27.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "prettier": "^2.7.1"
   },
   "dependencies": {
     "bonjour": "^3.5.0",
-    "ejs": "^3.1.5",
+    "electron-updater": "^5.3.0",
     "lodash": "^4.17.20",
     "md5": "^2.3.0",
-    "netmask": "^1.0.6",
-    "osc": "^2.4.1",
-    "uuid": "^8.3.2"
+    "netmask": "^2.0.2",
+    "osc": "^2.4.3",
+    "uuid": "^9.0.0"
   },
   "build": {
-    "appId": "com.electron.cueview",
+    "appId": "com.stagehacks.cueview",
     "icon": "./src/img/",
-    "artifactName": "${productName} ${os} v${version}.${ext}",
+    "artifactName": "${name}.${os}.v${version}.${ext}",
     "mac": {
-      "target": "zip",
-      "category": "utility",
-      "icon": "./src/img/icon.icns"
+      "category": "Utilities",
+      "icon": "./src/img/icon.icns",
+      "electronLanguages": [
+        "en"
+      ],
+      "publish": [
+        "github"
+      ]
     },
     "win": {
-      "target": "zip",
-      "icon": "./src/img/icon.ico"
+      "target": "NSIS",
+      "icon": "./src/img/icon.ico",
+      "publish": [
+        "github"
+      ]
+    },
+    "nsis": {
+      "oneClick": false
     },
     "linux": {
-      "target": "zip"
+      "target": "AppImage",
+      "maintainer": "alec@stagehacks.com",
+      "category": "Utility",
+      "publish": [
+        "github"
+      ]
     }
   }
 }

plugins/artnet/info.html

@@ -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>

plugins/artnet/main.js

@@ -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
+  });
+}
+

plugins/artnet/styles.css

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

plugins/artnet/template.ejs

@@ -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>

plugins/eos/cue.ejs

@@ -0,0 +1,80 @@
+<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>
+      <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">
+          <%= part.prettyDuration(part.uptimeDelay) || "" %>
+          <%= part.prettyDuration(part.uptimeDuration, true) %>
+        </td>
+      <% }else{ %>
+        <td class="black">
+          <%= part.prettyDuration(part.uptimeDelay) || "" %>
+          <%= part.prettyDuration(part.uptimeDuration, true) %>
+        </td>
+        <td class="black">
+          <%= part.prettyDuration(part.downtimeDuration, true) %>
+        </td>
+      <% } %>
+
+      <td class="black hide-medium">
+        <%= part.prettyDuration(part.focusDimeDuration, true) %>
+      </td>
+      <td class="black hide-medium">
+        <%= part.prettyDuration(part.colorDimeDuration, true) %>
+      </td>
+      <td class="black hide-medium">
+        <%= part.prettyDuration(part.beamDimeDuration, true) %>
+      </td>
+      <td class="hide-small"><%= part.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"+part.prettyDuration(part.follow) : "" %> 
+      <%= (part.hang>=0)? "H"+part.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>

plugins/eos/cue.js

@@ -0,0 +1,40 @@
+/* eslint-disable class-methods-use-this */
+class Cue {
+  constructor(args) {
+    this.uid = args[1];
+    this.label = args[2];
+    this.uptimeDuration = args[3];
+    this.uptimeDelay = args[4];
+    this.downtimeDuration = args[5];
+    this.downtimeDelay = args[6];
+    this.focusTimeDuration = args[7];
+    this.focusTimeDelay = args[8];
+    this.colorTimeDuration = args[9];
+    this.colorTimeDelay = args[10];
+    this.beamTimeDuration = args[11];
+    this.beamTimeDelay = args[12];
+    this.mark = args[16];
+    this.block = args[17];
+    this.assert = args[18];
+    this.follow = args[20];
+    this.hang = args[21];
+    this.partCount = args[26];
+    this.scene = args[28];
+    this.duration = Math.max(args[3], args[5], args[7], args[9], args[11]);
+  }
+
+  prettyDuration(milliseconds, box) {
+    if (milliseconds === -1) {
+      return '';
+    }
+
+    const num = Math.round(milliseconds / 100) / 10;
+    if (box) {
+      return `<div class="time">"${num}"</div>`;
+    }
+
+    return num;
+  }
+}
+
+module.exports = Cue;

plugins/eos/eos.html

@@ -1,113 +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 scroll-position">
-				<% }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>
-
-<% } %>
-
-
-<%
-	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;
-		
-	}
-%>

plugins/eos/eos.js

@@ -1,144 +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) {
-  const address = osc.address;
-  const 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 (let 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 (let 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') {
-    const cueList = p[4];
-    const listIndex = p[6];
-    const listCount = p[7];
-    const 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');
-};

plugins/eos/info.html

@@ -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>

plugins/eos/main.js

@@ -0,0 +1,147 @@
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+const Cue = require('./cue');
+
+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 = 3032;
+
+exports.ready = function ready(device) {
+  device.data.EOS = new EOS();
+  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 addressParts = osc.address.split('/');
+  addressParts.shift();
+
+  if (match(addressParts, ['eos', 'out', 'show', 'name'])) {
+    device.data.EOS.showName = osc.args[0];
+    device.data.EOS.cueLists = {};
+    this.deviceInfoUpdate(device, 'defaultName', osc.args[0]);
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cuelist', 'count'])) {
+    for (let i = 0; i < osc.args[0]; i++) {
+      device.send(`/eos/get/cuelist/index/${i}`);
+    }
+  } else if (
+    match(addressParts, ['eos', 'out', 'get', 'cuelist', '*', 'list', '*', '*'])
+  ) {
+    device.data.EOS.cueLists[addressParts[4]] = {};
+    device.send(`/eos/get/cue/${addressParts[4]}/count`);
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cue', '*', 'count'])) {
+    for (let i = 0; i < osc.args[0]; i++) {
+      device.send(`/eos/get/cue/${addressParts[4]}/index/${i}`);
+    }
+  } else if (
+    match(addressParts, ['eos', 'out', 'get', 'cue', '*', '*', '*', 'list', '*', '*'])
+  ) {
+    this.deviceInfoUpdate(device, 'status', 'ok');
+    if (device.data.EOS.cueLists[addressParts[4]][addressParts[5]] === undefined) {
+      device.data.EOS.cueLists[addressParts[4]][addressParts[5]] = {};
+    }
+    device.data.EOS.cueLists[addressParts[4]][addressParts[5]][addressParts[6]] = new Cue(osc.args);
+
+    device.update('cueData', {
+      cue: device.data.EOS.cueLists[addressParts[4]][addressParts[5]],
+      cueNumber: addressParts[5],
+      uid: osc.args[1],
+    });
+  } else if (match(addressParts, ['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 device.data.EOS.cueLists[addressParts[4]][addressParts[5]];
+    device.draw();
+  } else if (
+    match(addressParts, [
+      'eos',
+      'out',
+      'get',
+      'cue',
+      '*',
+      '*',
+      '*',
+      'actions',
+      'list',
+      '*',
+      '*',
+    ])
+  ) {
+    if (osc.args.length === 3) {
+      device.data.EOS.cueLists[addressParts[4]][addressParts[5]][0].extLinks = osc.args[2];
+    }
+  } else if (match(addressParts, ['eos', 'out', 'event', 'cue', '*', '*', 'fire'])) {
+    device.data.EOS.activeCue = addressParts[5];
+    device.draw();
+    device.update('activeCue', { uid: device.data.EOS.cueLists[addressParts[4]][addressParts[5]][0].uid });
+  } else if (match(addressParts, ['eos', 'out', 'notify', 'cue', '*', '*', '*', '*'])) {
+    const cueList = addressParts[4];
+    const cueNumber = osc.args[1];
+    device.send(`/eos/get/cue/${cueList}/${cueNumber}`);
+  } else if (match(addressParts, ['eos', 'out', 'get', 'version'])) {
+    device.data.EOS.version = osc.args[0];
+  } else {
+    // console.log(osc);
+  }
+};
+
+const cueTemplate = _.template(
+  fs.readFileSync(path.join(__dirname, `cue.ejs`))
+);
+
+exports.update = function update(device, doc, updateType, data) {
+  if (updateType === 'cueData') {
+    const $elem = doc.getElementById(data.uid);
+
+    if ($elem) {
+      $elem.outerHTML = cueTemplate({
+        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(addressParts, array) {
+  if (addressParts.length !== array.length) {
+    return false;
+  }
+  array.forEach((m, i) => {
+    if (addressParts[i] !== m && m !== '*') {
+      return false;
+    }
+  });
+  return true;
+}
+
+class EOS {
+  constructor() {
+    this.version = '';
+    this.showName = '';
+    this.cueLists = {};
+    this.activeCue = undefined;
+  }
+}

plugins/eos/styles.css

@@ -11,7 +11,7 @@ th {
 }
 td {
   text-align: center;
-  padding: 6px;
+  padding: 4px 6px;
 }
 td:first-child {
   text-align: left;
@@ -25,6 +25,7 @@ td.num {
   font-weight: 600;
   font-size: 16px;
 }
+
 .scene {
   background-color: black;
   border-top: #141414 2px solid;
@@ -46,14 +47,19 @@ td.num {
   border: #2f2b35 2px solid;
   border-radius: 5px;
 }
+
 tr.active-cue {
-  color: #d49800;
+  color: #c78b07;
 }
-tr.active-cue td.num {
-  color: #d49800;
+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: #d49800;
+  border-color: #c78b07;
 }
 
 @media screen and (min-width: 0px) and (max-width: 750px) {

plugins/eos/template.ejs

@@ -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.EOS.cueLists){ %>
+	<strong>List <%= i %></strong>
+	<table cellspacing="0">
+		<tr>
+			<th width="70px">Cue</th>
+			<th width="30px">Int Up</th>
+			<th width="30px">Int Down</th>
+			<th width="40px" class="hide-medium">Focus</th>
+			<th width="40px" class="hide-medium">Color</th>
+			<th width="40px" class="hide-medium">Beam</th>
+			<th width="40px" class="hide-small">Dur</th>
+			<th width="20px" class="hide-small">M</th>
+			<th width="20px" class="hide-small">B</th>
+			<th width="20px" class="hide-small">A</th>
+			<th width="70px" class="hide-small">Fw/Hg</th>
+			<th width="150px">Label</th>
+			<th width="10px" class="hide-medium">Ext Links</th>
+		</tr>
+
+		<% var cues = Object.keys(data.EOS.cueLists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
+
+		<% for(var j=0; j<cues.length; j++){ %>
+			<% var q = data.EOS.cueLists[i][cues[j]] %>
+			
+			<%= cueTemplate({
+				q: q,
+				cues: cues,
+				cueNumber: cues[j],
+				isActive: (cues[j]==data.EOS.activeCue+"")
+			}) %>
+
+		<% } %>
+	</table>
+
+<% } %>

plugins/pjlink/info.html

@@ -0,0 +1,4 @@
+<h3>Connection Requirements</h3>
+<ul>
+	<li>Requires no password on the projector</li>
+</ul>

plugins/pjlink/main.js

@@ -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();
+};

plugins/pjlink/pjlink.js

@@ -1,120 +0,0 @@
-const md5 = require('md5');
-
-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");
-};
-let password = false;
-
-function processPJLink(device, str, that) {
-  const 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.data = function (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 (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`
-    );
-  }
-};

plugins/qlab/cart.ejs

@@ -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>

plugins/qlab/cue.ejs

@@ -0,0 +1,176 @@
+<% 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--){ %>
+
+    <% if(cue.type=="Group" && i==1 && cue.cues.length==0){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gTop gBot group-arrow"></td>
+
+    <% }else if(cue.type=="Group" && i==1){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gTop group-arrow"></td>
+
+    <% }else if(cue.nestedGroupPosition[i-1]==0 && cue.nestedGroupPosition[i-2]==0){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gBot"></td>
+
+    <% }else if(i==1 && cue.nestedGroupPosition[i]==0){ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i] %> gBot"></td>
+
+    <% }else{ %>
+      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft"></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);
+
+    }
+  }
+%>

plugins/qlab/cuelist.ejs

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

plugins/qlab/info.html

@@ -0,0 +1,4 @@
+<h3>Connection Requirements</h3>
+<ul>
+	<li>No Passcode</li>
+</ul>

plugins/qlab/main.js

@@ -0,0 +1,346 @@
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+
+let lastElapsedUpdate = Date.now();
+let interval = 5;
+let heartbeatCount = 0;
+
+const valuesForKeysString = 
+'["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",'
++ '"type","children","preWait","postWait","currentDuration","colorName","continueMode",'
++ '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",'
++ '"actionElapsed","postWaitElapsed","isPaused"]';
+
+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.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 device = _device;
+
+  const oscAddressParts = oscData.address.split('/');
+  oscAddressParts.shift();
+
+  if(match(oscAddressParts, ["reply", "version"])){
+    const json = JSON.parse(oscData.args[0]);
+    device.data.version = json.data;
+
+    this.deviceInfoUpdate(device, 'status', 'ok');
+  }else if(match(oscAddressParts, ["reply", "workspaces"])){
+    
+    const json = JSON.parse(oscData.args[0]);
+    device.data.workspaces = {};
+
+    json.data.forEach(wksp => {
+    
+      device.data.workspaces[wksp.uniqueID] = {
+        uniqueID: wksp.uniqueID,
+        displayName: wksp.displayName,
+        cueLists: {},
+        cues: {}
+      }
+      device.send(`/workspace/${wksp.uniqueID}/connect`);
+    });
+  }else if(match(oscAddressParts, ["reply", "workspace", "*", "connect"])){
+
+    device.send(`/workspace/${oscAddressParts[2]}/updates`, [
+      { type: 'i', value: 1 },
+    ]);
+
+    device.send(`/workspace/${oscAddressParts[2]}/cueLists`);
+
+  }else if(match(oscAddressParts, ["reply", "workspace", "*", "cueLists"])){
+
+    this.deviceInfoUpdate(device, 'status', 'ok');
+    const workspace = device.data.workspaces[oscAddressParts[2]];
+    const json = JSON.parse(oscData.args[0]);
+
+    workspace.cueLists = {};
+    workspace.cues = {};
+
+    json.data.forEach(cueList => {
+      workspace.cueLists[cueList.uniqueID] = cueList;
+      addCueToWorkspace(workspace, cueList);
+    });
+
+    device.draw();
+
+    setTimeout(() => {
+      json.data.forEach(ql => {
+        workspace.cueLists[ql.uniqueID] = ql;
+        getValuesForKeys(device, json.workspace_id, ql);
+      });
+    }, 0);
+
+  }else if(match(oscAddressParts, ["reply", "cue_id", "*", "children"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = device.data.workspaces[json.workspace_id];
+    const cueID = oscAddressParts[2];
+    const cue = workspace.cues[cueID];
+
+    if(!_.isEqual(cue.cues, json.data)){
+      workspace.cueLists[cueID].cues = json.data;
+      addCueToWorkspace(workspace, workspace.cueLists[cueID]);
+      device.draw();
+      getValuesForKeys(device, json.workspace_id, cue);
+    }
+
+  }else if(match(oscAddressParts, ["reply", "cue_id", "*", "valuesForKeys"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const cueValues = json.data;
+    const workspace = device.data.workspaces[json.workspace_id];
+    let cue = workspace.cues[cueValues.uniqueID];
+
+    if(!cue){
+      workspace.cues[cueValues.uniqueID] = {};
+      cue = workspace.cues[cueValues.uniqueID];
+    }
+
+    cue.uniqueID = cueValues.uniqueID;
+    cue.number = cueValues.number;
+    cue.name = cueValues.name;
+    cue.listName = cueValues.listName;
+    cue.displayName = cueValues.displayName;
+    cue.broken = cueValues.isBroken;
+    cue.running = cueValues.isRunning;
+    cue.loaded = cueValues.isLoaded;
+    cue.flagged = cueValues.isFlagged;
+    cue.paused = cueValues.isPaused;
+    cue.type = cueValues.type;
+    cue.cues = cueValues.children;
+    cue.preWait = cueValues.preWait;
+    cue.postWait = cueValues.postWait;
+    cue.duration = cueValues.currentDuration;
+    cue.colorName = cueValues.colorName;
+    cue.continueMode = cueValues.continueMode;
+    cue.groupMode = cueValues.mode;
+    cue.parent = cueValues.parent;
+    cue.cartRows = cueValues.cartRows;
+    cue.cartColumns = cueValues.cartColumns;
+    cue.cartPosition = cueValues.cartPosition;
+    cue.preWaitElapsed = cueValues.preWaitElapsed;
+    cue.actionElapsed = cueValues.actionElapsed;
+    cue.postWaitElapsed = cueValues.postWaitElapsed;
+
+    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;
+
+    device.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+  }else if(match(oscAddressParts, ["reply", "cue_id", "*", "preWaitElapsed"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = device.data.workspaces[json.workspace_id];
+    const cue = workspace.cues[oscAddressParts[2]];
+
+    cue.preWaitElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    device.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+  }else if(match(oscAddressParts, ["reply", "cue_id", "*", "actionElapsed"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = device.data.workspaces[json.workspace_id];
+    const cue = workspace.cues[oscAddressParts[2]];
+
+    cue.actionElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    device.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+  }else if(match(oscAddressParts, ["reply", "cue_id", "*", "postWaitElapsed"])){
+
+    const json = JSON.parse(oscData.args[0]);
+    const workspace = device.data.workspaces[json.workspace_id];
+    const cue = workspace.cues[oscAddressParts[2]];
+
+    cue.postWaitElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    device.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+
+  }else if(match(oscAddressParts, ["update", "workspace", "*", "cue_id", "*"])){
+
+    const workspace = device.data.workspaces[oscAddressParts[2]];
+    
+    if(workspace){
+      const cueLists = Object.keys(workspace.cueLists);
+      const cueID = oscAddressParts[4];
+
+      if(cueID !== "[root group of cue lists"){
+        if(cueLists.includes(cueID)){
+          device.send(`/workspace/${workspace.uniqueID}/cue_id/${cueID}/children`);
+        }
+
+        device.send(`/workspace/${oscAddressParts[2]}/cue_id/${cueID}/valuesForKeys`, [
+          {type: 's', value: valuesForKeysString}
+        ]);
+      }
+    }
+  
+  }else if(match(oscAddressParts, ["update", "workspace", "*"])){
+    // occurs when cue lists are reordered or a list is deleted
+    device.send(`/workspace/${oscAddressParts[2]}/cueLists`);
+
+  }else if(match(oscAddressParts, ["update", "workspace", "*", "dashboard"])){
+    // this workspace might be new, let's check
+    if(device.data.workspaces[oscAddressParts[2]] === undefined){
+      console.log("new workspace!");
+      device.send('/workspaces');
+    }
+
+  }else if(match(oscAddressParts, ["update", "workspace", "*", "cueList", "*", "playbackPosition"])){
+
+    const workspace = device.data.workspaces[oscAddressParts[2]];
+
+    if(workspace){
+      const cue = workspace.cues[oscData.args[0]];
+      
+      if(cue){
+        workspace.playbackPosition = oscData.args[0] ? cue.uniqueID : "";
+        device.update("updatePlaybackPosition", {'cue': cue});
+      }
+    }
+
+  }else if(match(oscAddressParts, ["update", "workspace", "*", "disconnect"])){
+
+    delete device.data.workspaces[oscAddressParts[2]];
+    device.draw();
+
+  }else{
+    // console.log(address)
+  }
+  
+};
+
+
+
+
+exports.update = function update(device, doc, updateType, data){
+
+  if(updateType === "updateCueData"){
+    const $elem = doc.getElementById(data.cue.uniqueID);
+
+    if($elem){
+
+      if(data.cue.type === "Cue List"){
+        $elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
+
+      }else if(data.cue.type === "Cart"){
+        $elem.outerHTML = cartTemplate({'tileTemplate': tileTemplate, 'cueList': data.cue, 'allCues': data.workspace.cues});
+        
+      }else if(data.cue.cartPosition && data.cue.cartPosition[0] !== 0){
+        // checking that the parent cue is a cart cue
+        const parentCue = data.workspace.cues[data.cue.parent];
+        if(parentCue && parentCue.type === "Cart"){
+          $elem.outerHTML = tileTemplate(data);
+        }else{
+          $elem.outerHTML = cueTemplate(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"});
+
+  }
+}
+
+
+
+function addCueToWorkspace(_workspace, cue){
+  const workspace = _workspace;
+  workspace.cues[cue.uniqueID] = cue;
+  workspace.cues[cue.uniqueID].nestedGroupModes = [];
+  workspace.cues[cue.uniqueID].nestedGroupPosition = [];
+
+  if(cue.cues){
+    // this cue has children so add them as well
+    cue.cues.forEach(childCue => {
+      addCueToWorkspace(workspace, childCue);
+    });
+  }
+}
+
+function getValuesForKeys(device, workspaceID, cue){
+  device.send(`/workspace/${workspaceID}/cue_id/${cue.uniqueID}/valuesForKeys`, [
+    {type: 's', value: valuesForKeysString}
+  ]);
+  if(cue.cues){
+    cue.cues.forEach(childCue => {
+      getValuesForKeys(device, workspaceID, childCue);
+    });
+  }
+}
+
+function match(testArray, patternArray){
+  let out = true;
+  if(testArray.length !== patternArray.length){
+    return false;
+  }
+  patternArray.forEach((patternPart, i)=> {
+    if(testArray[i] !== patternPart && patternPart !== "*"){
+      out = false;
+    }
+  });
+  return out;
+}
+
+
+exports.heartbeat = function heartbeat(device) {
+  heartbeatCount++;
+
+  if(Date.now() - lastElapsedUpdate > 300){
+    interval = 5;
+  }else{
+    interval = 1;
+  }
+
+  if(heartbeatCount % interval === 0){
+    device.send(`/cue/active/preWaitElapsed`);
+    device.send(`/cue/active/actionElapsed`);
+    device.send(`/cue/active/postWaitElapsed`);
+  }
+};

plugins/qlab/qlab.html

@@ -1,269 +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 -->
-
-				<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.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() %>.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(); %>
-<% } %>
-
-<% function cartTemplate(cueList, groupModes, depth, workspace){ %>
-
-<% } %>
-
-<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];
-			let width = 100/cueList.cartRows;
-			let height = 600/(cueList.cartColumns+1);
-		%>
-
-		<h3><%= cueList.listName %> - <%= data.workspaces[i].displayName %></h3>
-
-		
-
-		<% if(cueList.type=="Cart"){ %>
-
-			<div class="cart">
-
-			<% for(let r=0; r<cueList.cartRows; r++){ %>
-				<% for(let c=0; c<cueList.cartColumns; c++){ %>
-					<div class="cartCueWrapper" style="
-						left: <%= width*c %>%;
-						top: <%=height*r%>px;
-						width: <%=width%>%;
-						height: <%=height%>px;
-					"><div class="cartCue cartBlank"></div></div>
-				<% } %>
-			<% } %>
-
-
-			<% for(var c in cueList.cues){ 
-				let cue = cueList.cues[c];
-
-				if(!cue.cartPosition){
-					continue;
-				}
-
-				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;
-				}
-			%>
-
-			<div class="cartCueWrapper " style="
-				left: <%=colPos%>%;
-				top: <%=rowPos%>px;
-				width: <%=width%>%;
-				height: <%=height%>px;
-			">
-
-				<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>
-
-			<% } %>
-
-			</div>
-				
-
-			
-		<% }else{ %>
-
-		<% 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>
-
-		<% } %>
-	<% } %>
-
-<% } %>
-
-
-<%
-	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)
-	}
-
-
-%>

plugins/qlab/qlab.js

@@ -1,161 +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) {
-  const address = osc.address;
-  const 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 (let 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') {
-    const workspace = p[2];
-    const 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 (let 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;
-
-      device.data.workspaces[workspace].allCues[d[i].uniqueID] = d[i];
-
-      if(d[i].type=="Cart"){
-        device.send(`/cue_id/${d[i].uniqueID}/cartColumns`);
-        device.send(`/cue_id/${d[i].uniqueID}/cartRows`);
-      }
-
-      function getMoreCueInfo(group, groups_arg) {
-        const groups = JSON.parse(JSON.stringify(groups_arg));
-        groups.push(group.uniqueID);
-
-        for (let cueIndex in group.cues) {
-          const 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", "cartPosition", "displayName"]',
-              },
-            ]
-          );
-          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;
-
-          
-        }
-      }
-
-      getMoreCueInfo(d[i], []);
-
-
-    }
-
-    // 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') {
-
-    const d = JSON.parse(osc.args[0]);
-    const cueID = p[2];
-    const workspace = d.workspace_id;
-    const cueList = d.data.parent;
-
-    if (p[3] == 'uniqueID') {
-      // response to /cue/playbackPosition/uniqueID
-      device.data.playbackPosition = d.data;
-
-    } else if (p[3] == 'mode') {
-      device.data.workspaces[workspace].allCues[cueID].mode = d.data;
-
-    } else if (p[3] == 'valuesForKeys') {
-      this.deviceInfoUpdate(device, 'status', 'ok');
-
-      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.data.workspaces[workspace].allCues[cueID].cartPosition =
-        d.data.cartPosition;
-      device.data.workspaces[workspace].allCues[cueID].displayName =
-        d.data.displayName;
-    }else if(p[3] == 'cartColumns'){
-      device.data.workspaces[workspace].allCues[cueID].cartColumns = d.data;
-    }else if(p[3] == 'cartRows'){
-      device.data.workspaces[workspace].allCues[cueID].cartRows = d.data;
-    }
-    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) {}
-};

plugins/qlab/styles.css

@@ -22,21 +22,21 @@ th.no-border {
 }
 
 td {
-  padding: 0px;
+  padding: -1px;
   height: 25px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 td img {
-  padding-top: 4px;
+  padding-top: 2px;
 }
 
 tr:nth-child(even) {
-  background: #2c2c2c;
+  background: #323232;
 }
 tr:nth-child(odd) {
-  background: #323232;
+  background: #2c2c2c;
 }
 
 tr:nth-child(even).q-red {
@@ -169,61 +169,73 @@ tr.playback-position .q-gray-text {
 .q-gray-text {
   color: #424242;
 }
+.q-time-elapsed {
+  margin: 0px 2px;
+  outline: #49c042 1px solid;
+  line-height: 18px;
+}
 
-.cart{
+.cart {
   position: relative;
-  height:  600px;
-  width:  100%;
+  height: 600px;
+  width: 100%;
   background-color: #2c2b2a;
 }
-.cartCueWrapper{
-  display:  block;
+.cartCueWrapper {
+  display: block;
   position: absolute;
   box-sizing: border-box;
-  padding:  3px;
+  padding: 3px;
 }
-.cartCue{
-  height:  100%;
+.cartCue {
+  height: 100%;
   box-sizing: border-box;
 
-  border:  3px solid;
-  border-radius:  6px;
-  color:  white;
-  font-size:  1.2em;
+  border: 3px solid;
+  border-radius: 6px;
+  color: white;
 }
-.cartCue p{
-  margin:  10px;
+.cartCue p {
+  margin: 10px;
 }
-.cartCueIcon{
+.cartCueIcon {
   position: absolute;
-  right:  13px;
-  top:  13px;
+  right: 13px;
+  top: 13px;
 }
-.cartColor-red{
-  border-color:  #ff4242;
-  background-color:  #9b3726;
+.cartColor-red {
+  border-color: #ff4242;
+  background-color: #9b3726;
 }
-.cartColor-orange{
-  border-color:  #ffa500;
+.cartColor-orange {
+  border-color: #ffa500;
   background-color: #ad6026;
 }
-.cartColor-green{
-  border-color:  #01d52f;
+.cartColor-green {
+  border-color: #01d52f;
   background-color: #397f27;
 }
-.cartColor-blue{
-  border-color:  #536de0;
+.cartColor-blue {
+  border-color: #536de0;
   background-color: #304893;
 }
-.cartColor-purple{
-  border-color:  #a601c0;
+.cartColor-purple {
+  border-color: #a601c0;
   background-color: #592d74;
 }
-.cartBlank{
-  border-color:  #1f1f1f;
+.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 {

plugins/qlab/template.ejs

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

plugins/qlab/tile.ejs

@@ -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>

plugins/sacn/info.html

@@ -0,0 +1 @@
+<p><em>sACN</em> requires no configuration.</p>

plugins/sacn/main.js

@@ -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}`;
+  
+}

plugins/sacn/styles.css

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

plugins/sacn/template.ejs

@@ -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>

plugins/watchout/main.js

@@ -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');
+};

plugins/watchout/styles.css

@@ -1,7 +1,3 @@
-table {
-  font-family: PlexMono !important;
-}
-
 .warning {
   color: #e9873a;
 }

plugins/watchout/watchout.js

@@ -1,58 +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) {
-  const msg = message.toString();
-  if (msg.substring(0, 5) == 'Ready') {
-    device.send('getStatus\n');
-  }
-  if (msg.substring(0, 5) == 'Reply') {
-    const arr = msg.split(' ');
-
-    device.data.showName = '';
-    let 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');
-};

plugins/x32/main.js

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

plugins/x32/styles.css

@@ -30,6 +30,7 @@ tr td:first-child {
   padding: 1px 6px;
   border-radius: 10px;
   color: black;
+  font-family: PlexMono !important;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -127,3 +128,29 @@ input[type='range']::-webkit-slider-runnable-track {
   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;
+}

plugins/x32/template.ejs

@@ -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); } %>

plugins/x32/x32.html

@@ -1,51 +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); } %>

plugins/x32/x32.js

@@ -1,130 +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"));
-};
-
-function parseAddress(msg) {
-  const 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;
-  }
-}
-
-exports.data = function (device, buf) {
-  this.deviceInfoUpdate(device, 'status', 'ok');
-  const 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 (let 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) {
-    const addr = parseAddress(msg[0]);
-    const 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) {
-    const addr = parseAddress(msg[0]);
-    const 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) {
-    const addr = parseAddress(msg[0]);
-    const 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) {
-    const addr = parseAddress(msg[0]);
-    const 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'));
-};

plugins/xair/main.js

@@ -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');
+};

plugins/xair/styles.css

@@ -30,7 +30,6 @@ tr td:first-child {
   padding: 1px 6px;
   border-radius: 10px;
   color: black;
-  font-family: PlexMono !important;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -128,3 +127,8 @@ input[type='range']::-webkit-slider-runnable-track {
   background: #3b3b3b;
   border-radius: 4px;
 }
+
+.infin{
+  font-size: 20px;
+  vertical-align: middle;
+}

plugins/xair/template.ejs

@@ -15,7 +15,7 @@
     <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><%= formatAsDB(data.stereoFaderDB) %></td>
     <td>
       <input
         type="range"
@@ -34,7 +34,7 @@
       </div>
     </td>
     <td><div class="fader-mute mute-<%=data.channelMutes[i]%>">M</div></td>
-    <td><%- formatAsDB(data.channelFadersDB[i]) %></td>
+    <td><%= formatAsDB(data.channelFadersDB[i]) %></td>
     <td>
       <input
         type="range"
@@ -47,5 +47,5 @@
   <% } %>
 </table>
 
-<% function formatAsDB(val){ if(val==-90){ return "-&infin;"; } if(val>0){
+<% function formatAsDB(val){ if(val==-90){ return '-<span class="infin">&infin;</span>'; } if(val>0){
 return "+"+val.toFixed(1); } return val.toFixed(1); } %>

plugins/xair/xair.js

@@ -1,131 +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('/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;
-  } else if (f >= 0.25) {
-    return f * 80 - 50;
-  } else if (f >= 0.0625) {
-    return f * 160 - 70;
-  } else {
-    return f * 480 - 90;
-  }
-}
-
-exports.data = function (device, buf) {
-  this.deviceInfoUpdate(device, 'status', 'ok');
-  const msg = buf.toString().split('\u0000');
-
-  if (msg[0] == '/xinfo') {
-    if (msg[7].length > 0) {
-      device.data.name = msg[7];
-    } else {
-      device.data.name = msg[6];
-    }
-
-    device.data.ip = msg[5];
-    device.data.firmware = msg[13];
-    device.data.model = msg[9];
-    this.deviceInfoUpdate(device, 'defaultName', device.data.name);
-
-    device.send('/lr/mix/fader\u0000\u0000\u0000\u0000');
-    device.send('/lr/mix/on\u0000\u0000\u0000\u0000');
-
-    for (let 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) {
-    const addr = parseAddress(msg[0]);
-    const 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) {
-    const addr = parseAddress(msg[0]);
-    const 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(`/ch/${addr[1]}/mix/fader\u0000\u0000\u0000\u0000`);
-  } else if (msg[0].indexOf('/config/name') > 0) {
-    const addr = parseAddress(msg[0]);
-    const channel = Number(addr[1]);
-    device.data.channelNames[channel - 1] = msg[4];
-    device.draw();
-    device.send(`/ch/${addr[1]}/config/color\u0000\u0000\u0000\u0000`);
-  } else if (msg[0].indexOf('/config/color') > 0) {
-    const addr = parseAddress(msg[0]);
-    const channel = Number(addr[1]);
-    device.data.channelColors[channel - 1] = buf.readInt8(27);
-    device.draw();
-    device.send(`/ch/${addr[1]}/mix/on\u0000\u0000\u0000\u0000`);
-  } else {
-    // console.log(msg)
-  }
-  // console.log(msg)
-};
-
-exports.heartbeat = function (device) {
-  device.send('/xremote');
-};

preload.js

@@ -1,10 +1,4 @@
-// const { remote } = require('electron');
 const { ipcRenderer } = require('electron');
-// let currWindow = remote.BrowserWindow.getFocusedWindow();
-// const { v4: uuid } = require('uuid');
-// const ejs = require('ejs');
-
-//const net = require('net');
 
 const DEVICE = require('./src/device.js');
 const PLUGINS = require('./src/plugins.js');
@@ -13,8 +7,9 @@ const VIEW = require('./src/view.js');
 const SAVESLOTS = require('./src/saveSlots.js');
 
 window.addDevice = DEVICE.addDevice;
+window.searchAll = SEARCH.searchAll;
 
-window.init = function () {
+window.init = function init() {
   console.log('init!');
 
   ipcRenderer.send('enableDeviceDropdown');
@@ -26,27 +21,35 @@ window.init = function () {
     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) {
-      e.stopPropagation();
-      DEVICE.changeActiveType(e.target.value);
-    };
-  document.getElementById('device-settings-ip').onchange = function (e) {
+  
+  document.getElementById('device-settings-plugin-dropdown').onchange = function dropdownChange(e) {
+    e.stopPropagation();
+    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) {
+
+  document.getElementById('device-settings-port').onchange = function portChange(e) {
     e.stopPropagation();
     DEVICE.changeActivePort(e.target.value);
   };
-  document.getElementById('device-settings-pin').onchange = function (e) {
+
+  document.getElementById('device-settings-pin').onchange = function pinChange(e) {
     e.stopPropagation();
     if (e.target.checked) {
       VIEW.pinActiveDevice();
@@ -55,33 +58,35 @@ window.init = function () {
     }
   };
 
-  document.getElementById('save-slot-1').onclick = function (e) {
+  document.getElementById('save-slot-1').onclick = function slot1click(e) {
     e.stopPropagation();
     SAVESLOTS.loadSlot(1);
   };
-  document.getElementById('save-slot-2').onclick = function (e) {
+
+  document.getElementById('save-slot-2').onclick = function slot2click(e) {
     e.stopPropagation();
     SAVESLOTS.loadSlot(2);
   };
-  document.getElementById('save-slot-3').onclick = function (e) {
+
+  document.getElementById('save-slot-3').onclick = function slot3click(e) {
     e.stopPropagation();
     SAVESLOTS.loadSlot(3);
   };
 
-  document.getElementById('refresh-device-button').onclick = function (e) {
+  document.getElementById('refresh-device-button').onclick = function refreshClick(e) {
     e.stopPropagation();
     DEVICE.refreshActive();
   };
 
-  document.getElementById('device-list').onclick = function (e) {
+  document.getElementById('device-list').onclick = function listClick(e) {
     e.stopPropagation();
     const deviceID = e.srcElement.id;
-    if (e.srcElement.id != 'device-list') {
+    if (e.srcElement.id !== 'device-list') {
       VIEW.switchDevice(deviceID);
     }
   };
 
-  document.getElementById('add-device-button').onchange = function (e) {
+  document.getElementById('add-device-button').onchange = function addDeviceClick(e) {
     DEVICE.registerDevice({
       type: e.target.value,
       defaultName: 'New Device',
@@ -93,31 +98,25 @@ window.init = function () {
     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.onkeyup = function keyUp(e) {
+    if(e.key === 'ArrowUp'){
+      VIEW.selectPreviousDevice();
+    
+    }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();
+      }
     }
+
   };
 
-  // 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.getElementById('device-list-col').onclick = function deviceListClick(e) {
     try {
       document
         .querySelector('#device-list .active-device')
@@ -161,9 +160,11 @@ ipcRenderer.on('resetViews', (event, message) => {
 ipcRenderer.on('doSlots1', (event, message) => {
   SAVESLOTS.loadSlot(1);
 });
+
 ipcRenderer.on('doSlots2', (event, message) => {
   SAVESLOTS.loadSlot(2);
 });
+
 ipcRenderer.on('doSlots3', (event, message) => {
   SAVESLOTS.loadSlot(3);
 });
@@ -176,6 +177,4 @@ function switchClass(element, className) {
   }
   element.classList.add(className);
 }
-window.switchClass = function (element, className) {
-  switchClass(element, className);
-};
+window.switchClass = switchClass;

src/defaultPlugin.css

@@ -1,10 +1,8 @@
 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;
@@ -16,6 +14,8 @@ header {
   height: 36px;
   width: 100%;
   box-sizing: content-box;
+  white-space: nowrap;
+  overflow: hidden;
 
   background-color: #111111;
   border-bottom: black 1px solid;
@@ -63,24 +63,44 @@ table.cv-table tr:nth-child(odd) {
 }
 table.cv-table tr td:first-child {
   padding-left: 10px;
-  -webkit-border-top-left-radius: 10px;
-  -webkit-border-bottom-left-radius: 10px;
+  border-top-left-radius: 10px;
+  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;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 table.cv-table td {
   padding: 7px 16px;
 }
 
 .not-responding {
+  color: white;
 }
 .not-responding em {
   background-color: #3f3f3f;
-  color: white;
   padding: 2px 10px;
   display: inline-block;
   border-radius: 5px;
 }
+.not-responding hr {
+  margin-top: 100px;
+  border-color: #333;
+}
+
+.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;
+}

src/device.js

@@ -2,7 +2,7 @@ const { v4: uuid } = require('uuid');
 const osc = require('osc');
 const net = require('net');
 const udp = require('dgram');
-const { debounce } = require('lodash/function');
+const _ = require('lodash');
 
 const PLUGINS = require('./plugins.js');
 const VIEW = require('./view.js');
@@ -11,9 +11,8 @@ const SAVESLOTS = require('./saveSlots.js');
 const devices = {};
 module.exports.all = devices;
 
-registerDevice = function (newDevice) {
-
-  if (PLUGINS.all[newDevice.type] == undefined) {
+function registerDevice(newDevice) {
+  if (PLUGINS.all[newDevice.type] === undefined) {
     console.error(`Plugin for device ${newDevice.type} does not exist.`);
     return true;
   }
@@ -25,16 +24,15 @@ registerDevice = function (newDevice) {
 
   // only register device if it hasn't already been added
   if (newDevice.addresses.length > 0) {
-    for (let 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;
-      }
+    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 (existing) {
+      return false;
     }
   }
 
@@ -44,6 +42,7 @@ registerDevice = function (newDevice) {
   devices[id] = {
     id,
     status: 'new',
+    drawn: false,
     type: newDevice.type,
     displayName: newDevice.displayName,
     defaultName: newDevice.defaultName,
@@ -54,41 +53,55 @@ registerDevice = function (newDevice) {
     lastDrawn: 0,
     lastHeartbeat: 0,
     heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
-    draw: debounce(
-      function () {
-        VIEW.draw(this);
-      },
-      30,
-      { leading: true, trailing: true }
-    ),
+    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;
 
-initDeviceConnection = function (id) {
+function initDeviceConnection(id) {
   const device = devices[id];
 
   infoUpdate(device, 'status', 'new');
 
-  if (device.port == undefined || device.addresses.length == 0) {
+  if (device.port === undefined || device.addresses.length === 0) {
     return true;
   }
   try {
     // mostly only useful for UDP
     device.connection.close();
-  } catch (err) {}
+  } catch (err) {
+    //
+  }
 
   const { type } = devices[id];
   const plugins = PLUGINS.all;
 
-  if (plugins[type].connectionType == 'osc') {
-    device.connection = new osc.TCPSocketPort({
-      address: device.addresses[0],
-      port: device.port,
-    });
+  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)
@@ -96,24 +109,30 @@ initDeviceConnection = function (id) {
     });
     device.connection.on('ready', () => {
       plugins[type].ready(device);
-      if (Object.keys(devices).length == 1) {
+      if (Object.keys(devices).length === 1) {
         VIEW.switchDevice(device.id);
       }
     });
     device.connection.on('message', (message) => {
-      // log("OSC IN", message.address);
-      plugins[type].data(device, message);
+      try {
+        plugins[type].data(device, message);
+      } catch (err) {
+        console.error(err);
+      }
       device.lastMessage = Date.now();
     });
-    device.send = function (address, args) {
-      device.connection.send({ address: address, args: args });
+    device.send = (address, args) => {
+      device.connection.send({ address, args });
     };
     device.plugin = plugins[type];
-  } else if (plugins[type].connectionType == 'TCPsocket') {
+  } else if (plugins[type].connectionType === 'TCPsocket') {
     device.connection = new net.Socket();
 
     device.connection.connect(
-      { port: device.port, host: device.addresses[0] },
+      {
+        port: device.port,
+        host: device.addresses[0],
+      },
       () => {}
     );
 
@@ -122,7 +141,7 @@ initDeviceConnection = function (id) {
     });
     device.connection.on('ready', () => {
       plugins[type].ready(device);
-      if (Object.keys(devices).length == 1) {
+      if (Object.keys(devices).length === 1) {
         VIEW.switchDevice(device.id);
       }
     });
@@ -132,14 +151,14 @@ initDeviceConnection = function (id) {
       device.lastMessage = Date.now();
       infoUpdate(device, 'status', 'ok');
     });
-    device.send = function (data) {
+    device.send = (data) => {
       // log("SOCK OUT", data);
       device.connection.write(data);
     };
-  } else if (plugins[type].connectionType == 'UDPsocket') {
+  } else if (plugins[type].connectionType === 'UDPsocket') {
     device.connection = udp.createSocket('udp4');
 
-    device.connection.bind(() => {
+    device.connection.bind({ port: plugins[type].defaultPort }, () => {
       plugins[type].ready(device);
 
       device.connection.on('message', (msg, info) => {
@@ -148,16 +167,36 @@ initDeviceConnection = function (id) {
       });
     });
 
-    device.send = function (data) {
-      device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
-        // console.log(err);
-      });
+    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.bind(device.port, () => {
+      plugins[type].ready(device);
+
+      device.connection.on('message', (msg, info) => {
+        plugins[type].data(device, msg);
+        infoUpdate(device, 'status', 'ok');
+      });
+    });
+
+    device.send = (data) => {};
   }
-};
+
+  return true;
+}
 module.exports.initDeviceConnection = initDeviceConnection;
 
-module.exports.deleteActive = function () {
+module.exports.deleteActive = function deleteActive() {
   const device = VIEW.getActiveDevice();
   const choice = confirm(
     `Are you sure you want to delete ${device.type} device "${
@@ -174,7 +213,7 @@ module.exports.deleteActive = function () {
   }
 };
 
-module.exports.changeActiveType = function (newType) {
+module.exports.changeActiveType = function changeActiveType(newType) {
   const device = VIEW.getActiveDevice();
   device.type = newType;
 
@@ -183,7 +222,7 @@ module.exports.changeActiveType = function (newType) {
   // SAVESLOTS.saveAll();
 };
 
-module.exports.changeActiveIP = function (newIP) {
+module.exports.changeActiveIP = function changeActiveIP(newIP) {
   const device = VIEW.getActiveDevice();
   device.addresses[0] = newIP;
   initDeviceConnection(device.id);
@@ -191,7 +230,7 @@ module.exports.changeActiveIP = function (newIP) {
   SAVESLOTS.saveAll();
 };
 
-module.exports.changeActivePort = function (newPort) {
+module.exports.changeActivePort = function changeActivePort(newPort) {
   const device = VIEW.getActiveDevice();
   device.port = newPort;
 
@@ -200,59 +239,79 @@ module.exports.changeActivePort = function (newPort) {
   SAVESLOTS.saveAll();
 };
 
-module.exports.changeActiveName = function (newName) {
+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 (newPin) {
+module.exports.changeActivePinIndex = function changeActivePinIndex(newPin) {
   const device = VIEW.getActiveDevice();
   device.pinIndex = newPin;
   VIEW.draw(device);
   SAVESLOTS.saveAll();
 };
-module.exports.changePinIndex = function (device, newPin) {
-  device.pinIndex = newPin;
+module.exports.changePinIndex = function changePinIndex(device, newPin) {
+  const d = device;
+  d.pinIndex = newPin;
   // SAVESLOTS.saveAll();
 };
-module.exports.refreshActive = function () {
+module.exports.refreshActive = function refreshActive() {
   const device = VIEW.getActiveDevice();
-  if (device == undefined) {
+  if (device === undefined) {
     return true;
   }
   initDeviceConnection(device.id);
   VIEW.draw(device);
+  return true;
 };
 
-infoUpdate = function (device, param, value) {
-  if (param == 'addresses') {
-    device.addresses = value.replace(/\s+/g, '').split(',');
+function infoUpdate(device, param, value) {
+  const d = device;
+  if (param === 'addresses') {
+    d.addresses = value.replace(/\s+/g, '').split(',');
   } else {
-    device[param] = value;
+    d[param] = value;
   }
   VIEW.addDeviceToList(device);
-};
+}
 module.exports.infoUpdate = infoUpdate;
 
 function heartbeat() {
-  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 > 10000) {
-        infoUpdate(device, 'status', 'broken');
+  Object.keys(devices).forEach((deviceID) => {
+    const d = devices[deviceID];
+
+    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 {
-        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();
+      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);

src/index.css

@@ -189,11 +189,12 @@ a {
   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;
+  border: black 1px solid;
+  padding: 2px;
 }
 .draw-area {
   height: 100%;
@@ -203,9 +204,8 @@ a {
   border: 0;
 }
 .active-device-outline {
-  outline: #fdea08 2px solid;
-  border-top: #fdea08 2px solid;
-  border-bottom: #fdea08 2px solid;
+  padding: 0px;
+  border: #fdea08 3px solid;
 }
 
 input {
@@ -234,10 +234,10 @@ select {
   font-size: 16px;
   font-weight: 500;
 }
-select option{
+select option {
   /* these styles don't affect macOS but are important for Windows! */
   text-align: left;
-  background-color: #333333; 
+  background-color: #333333;
 }
 input:focus,
 select:focus {

src/index.js

@@ -1,17 +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();

src/menu.js

@@ -1,99 +0,0 @@
-const isMac = process.platform === 'darwin';
-//isMac && { role: 'appMenu' },
-//isMac ? { role: 'close' } : { role: 'quit' }
-module.exports = [
-  ...(isMac ? [{ role: 'appMenu' }] : []),
-  {
-    label: 'File',
-    submenu: [
-      {
-        label: 'Clear Saved Data',
-        id: 'resetViews',
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send('resetViews');
-        }
-      },
-      {
-        label: 'Reload App',
-        role: 'reload'
-      },
-      { type: 'separator' },
-      ...(isMac ? [{ role: 'close' }] : [{ role: 'quit' }])
-    ]
-  },
-  { role: 'editMenu' },
-  {
-    label: 'View',
-    submenu: [
-      { role: 'togglefullscreen' },
-      { type: 'separator' },
-      {
-        label: 'Arrangement 1',
-        accelerator: 'CommandOrControl+1',
-        id: 'window1',
-        enabled: true,
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send('doSlots1');
-        }
-      },
-      {
-        label: 'Arrangement 2',
-        accelerator: 'CommandOrControl+2',
-        id: 'window2',
-        enabled: true,
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send('doSlots2');
-        }
-      },
-      {
-        label: 'Arrangement 3',
-        accelerator: 'CommandOrControl+3',
-        id: 'window3',
-        enabled: true,
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send('doSlots3');
-        }
-      },
-      { type: 'separator' },
-      { role: 'toggleDevTools' }
-    ]
-  },
-  {
-    label: 'Device',
-    submenu: [
-      {
-        label: 'Search for Devices',
-        accelerator: 'CommandOrControl+F',
-        id: 'deviceSearch',
-        enabled: true,
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send('doSearch');
-        }
-      },
-      { type: 'separator' },
-      {
-        label: 'Pinned',
-        type: 'checkbox',
-        checked: true,
-        accelerator: 'CommandOrControl+P',
-        id: 'devicePin',
-        enabled: false,
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send(
-            'setActiveDevicePinned',
-            menuItem.checked
-          );
-        }
-      },
-      {
-        label: 'Delete',
-        accelerator: 'CommandOrControl+Backspace',
-        id: 'deviceDelete',
-        enabled: false,
-        click: function (menuItem, window, event) {
-          mainWindow.webContents.send('doDelete');
-        }
-      }
-    ]
-  }
-];

src/plugins.js

@@ -1,46 +1,68 @@
+/* eslint-disable global-require */
 const fs = require('fs');
-const ejs = require('ejs');
+const _ = require('lodash');
+const path = require('path');
+
 const DEVICE = require('./device.js');
 const VIEW = require('./view.js');
 
 const allPlugins = {};
 module.exports.all = allPlugins;
 
-module.exports.init = function (callback) {
-  console.log(`Loading plugin files... ${__dirname}/../plugins`);
+module.exports.init = function init(callback) {
 
-  fs.readdir(`${__dirname}/../plugins`, (err, files) => {
-    for (let i in files) {
-      const plugin = files[i];
+  let pluginDirectoryPath = path.normalize(path.join(__dirname, `../plugins`));
 
-      if (plugin[0] != '.') {
-        console.log(`${i} ${plugin}`);
-        allPlugins[
-          plugin
-        ] = require(`${__dirname}/../plugins/${plugin}/${plugin}.js`);
+  console.log(`Loading plugin files... ${pluginDirectoryPath}`);
 
-        allPlugins[plugin].deviceInfoUpdate = function (device, param, value) {
+  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);
         };
-        allPlugins[plugin].draw = function (device) {
+        p.draw = (device) => {
           VIEW.draw(device);
         };
 
-        allPlugins[plugin].template = ejs.compile(
-          fs.readFileSync(
-            `${__dirname}/../plugins/${plugin}/${plugin}.html`,
+        p.template = _.template(
+          fs.readFileSync(path.join(pluginDirectoryPath, `/${plugin}/template.ejs`),
             'utf8'
           )
         );
 
-        if (
-          allPlugins[plugin].heartbeatInterval == undefined ||
-          allPlugins[plugin].heartbeatInterval < 50
-        ) {
-          allPlugins[plugin].heartbeatInterval = 5000;
+        p.info = _.template(
+          fs.readFileSync(path.join(pluginDirectoryPath, `/${plugin}/info.html`),
+            'utf8'
+          )
+        );
+
+
+        if (p.heartbeatTimeout === undefined || p.heartbeatTimeout < 50) {
+          if(p.heartbeatInterval){
+            p.heartbeatTimeout = p.heartbeatInterval * 1.5;
+          }else{
+            p.heartbeatTimeout = 10000;
+          }
         }
+
+        if (p.heartbeatInterval === undefined || p.heartbeatInterval < 50) {
+          p.heartbeatInterval = 5000;
+        }
+
       }
-    }
+    });
+
     callback();
+
   });
 };

src/saveSlots.js

@@ -15,39 +15,42 @@ if (storedDevices) {
   savedDevices = JSON.parse(storedDevices);
 }
 
-loadSlot = function (slotIndex) {
+function loadSlot(slotIndex) {
   VIEW.toggleSlotButtons(slotIndex);
   activeSlot = slotIndex;
 
-  for (var d in DEVICE.all) {
+  Object.keys(DEVICE.all).forEach((d)=>{
     DEVICE.changePinIndex(DEVICE.all[d], false);
-  }
+  });
   VIEW.resetPinned();
 
-  for (var d in savedSlots[slotIndex]) {
-    const savedDevice = savedSlots[slotIndex][d];
-    for (var d in DEVICE.all) {
+  Object.keys(savedSlots[slotIndex]).forEach((slot) => {
+    const savedDevice = savedSlots[slotIndex][slot];
+
+    Object.keys(DEVICE.all).forEach((d) => {
       const device = DEVICE.all[d];
-      // if(device.addresses[0] == savedDevice.addresses[0] && device.type == savedDevice.type){
-      if (device.id == savedDevice.id) {
+
+      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
+        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 () {
+
+module.exports.loadDevices = function loadDevices() {
   console.log(`Loading ${savedDevices.length} saved devices...`);
-  console.log(savedDevices);
 
   for (let i = 0; i < savedDevices.length; i++) {
     DEVICE.registerDevice({
@@ -61,7 +64,8 @@ module.exports.loadDevices = function () {
   }
 };
 
-module.exports.saveAll = function () {
+
+module.exports.saveAll = function saveAll() {
   console.log('Saving...');
   const currentPins = VIEW.getPinnedDevices();
 
@@ -79,9 +83,9 @@ module.exports.saveAll = function () {
   );
 
   savedDevices = [];
-  var i = 0;
-  for (var d in DEVICE.all) {
-    var device = DEVICE.all[d];
+  let i = 0;
+  Object.keys(DEVICE.all).forEach((d) => {
+    const device = DEVICE.all[d];
     savedDevices[i] = {
       addresses: device.addresses,
       type: device.type,
@@ -91,25 +95,29 @@ module.exports.saveAll = function () {
       id: device.id,
     };
     i++;
-  }
+  });
   localStorage.setItem('savedDevices', JSON.stringify(savedDevices));
+
 };
 
-module.exports.deleteFromSlots = function (device) {
+
+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) {
+      if (savedSlots[i][j].id === device.id) {
         delete savedSlots[i][j];
       }
     }
   }
 };
 
-module.exports.reloadActiveSlot = function () {
+
+module.exports.reloadActiveSlot = function reloadActiveSlot() {
   loadSlot(activeSlot);
 };
 
-module.exports.resetSlots = function () {
+
+module.exports.resetSlots = function resetSlots() {
   localStorage.clear();
 };

src/search.js

@@ -1,5 +1,4 @@
 const { ipcRenderer } = require('electron');
-const { Netmask } = require('netmask');
 const dgram = require('dgram');
 const bonjour = require('bonjour')();
 const net = require('net');
@@ -13,12 +12,11 @@ const PLUGINS = require('./plugins.js');
 let searching = false;
 let allServers = false;
 
-// from local-devices library
 function getServers() {
   const interfaces = os.networkInterfaces();
   const result = [];
-
-  for (const key in interfaces) {
+  
+  Object.keys(interfaces).forEach((key) => {
     const addresses = interfaces[key];
     for (let i = addresses.length; i--; ) {
       const address = addresses[i];
@@ -29,29 +27,26 @@ function getServers() {
         while (current++ < last) result.push(ip.fromLong(current));
       }
     }
-  }
-
+  });
   return result;
+
 }
 
 const searchSockets = [];
-
-searchAll = function () {
+function searchAll() {
   if (searching) {
-    return true;
+    return;
   }
   searching = true;
   ipcRenderer.send('disableSearchAll', '');
   document.getElementById('search-button').style.opacity = 0.2;
-  // console.clear();
 
-  for (let i in DEVICE.all) {
+  Object.keys(DEVICE.all).forEach((i) => {
     DEVICE.infoUpdate(DEVICE.all[i], 'status', 'refresh');
-  }
+  });
 
   console.log('Searching...');
 
-  // findOnlineDevices();
   allServers = getServers();
   let TCPFlag = true;
   if (allServers.length > 2046) {
@@ -61,31 +56,32 @@ searchAll = function () {
     TCPFlag = false;
   }
 
-  for (let p in PLUGINS.all) {
+  Object.keys(PLUGINS.all).forEach((p) => {
     const plugin = PLUGINS.all[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;
+      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}`);
     }
-  }
-
-  // searchBonjour();
-  // searchTCP();
-  // searchUDP();
+  });
 
   setTimeout(() => {
     searching = false;
@@ -94,7 +90,9 @@ searchAll = function () {
     for (let i = 0; i < searchSockets.length; i++) {
       try {
         searchSockets[i].close();
-      } catch (err) {}
+      } catch (err) {
+        //
+      }
     }
 
     ipcRenderer.send('enableSearchAll', '');
@@ -102,25 +100,17 @@ searchAll = function () {
 };
 module.exports.searchAll = searchAll;
 
-//  ____              _
-// |  _ \            (_)
-// | |_) | ___  _ __  _  ___  _   _ _ __
-// |  _ < / _ \| '_ \| |/ _ \| | | | '__|
-// | |_) | (_) | | | | | (_) | |_| | |
-// |____/ \___/|_| |_| |\___/ \__,_|_|
-//                  _/ |
-//                 |__/
 
-newSearchBonjour = function (pluginType, plugin) {
+
+function searchBonjour(pluginType, plugin) {
   bonjour.find({ type: plugin.searchOptions.bonjourName }, (e) => {
-    console.log(pluginType);
 
     const validAddresses = [];
-    for (let i in e.addresses) {
-      if (e.addresses[i].indexOf(':') == -1) {
-        validAddresses.push(e.addresses[i]);
+    e.addresses.forEach((address) => {
+      if (address.indexOf(':') === -1) {
+        validAddresses.push(address);
       }
-    }
+    });
 
     DEVICE.registerDevice({
       type: pluginType,
@@ -129,47 +119,19 @@ newSearchBonjour = function (pluginType, plugin) {
       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) {
+function searchTCP(pluginType, plugin) {
   for (let i = 0; i < allServers.length; i++) {
     TCPtest(allServers[i], pluginType, plugin);
   }
 };
 
-TCPtest = function (ip, pluginType, plugin) {
-  const client = net.createConnection(plugin.searchOptions.testPort, ip, () => {
+function TCPtest(ipAddr, pluginType, plugin) {
+  const client = net.createConnection(plugin.searchOptions.testPort, ipAddr, () => {
     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)) {
@@ -177,7 +139,7 @@ TCPtest = function (ip, pluginType, plugin) {
         type: pluginType,
         defaultName: plugin.defaultName,
         port: plugin.defaultPort,
-        addresses: [ip],
+        addresses: [ipAddr],
       });
     }
     client.end();
@@ -187,140 +149,45 @@ TCPtest = function (ip, pluginType, plugin) {
   });
 };
 
-findOnlineDevices = function () {
-  const allInterfaces = os.networkInterfaces();
-  const validInterfaces = [];
-  for (let i in allInterfaces) {
-    for (let j = 0; j < allInterfaces[i].length; j++) {
-      const iface = allInterfaces[i][j];
 
-      if (
-        iface.family == 'IPv4' &&
-        iface.internal == false &&
-        iface.address.split('.')[0] != '169'
-      ) {
-        validInterfaces.push(iface);
-      }
-    }
-  }
-
-  for (let i = 0; i < validInterfaces.length; i++) {
-    const block = new Netmask(validInterfaces[i].cidr);
-    const f = block.first.split('.');
-    const l = block.last.split('.');
-    const cur = [f[0], f[1], f[2], f[3]];
-
-    for (let j = Number(f[2]); j <= Number(l[2]); j++) {
-      cur[2] = j;
-      for (let 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]);
-const serverUDP = dgram.createSocket('udp4');
-const serverUDP2 = dgram.createSocket('udp4');
-
-newSearchUDP = function (pluginType, plugin) {
+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(() => {
-      searchSockets[i].send(
-        plugin.searchOptions.searchBuffer,
-        plugin.searchOptions.devicePort,
-        '255.255.255.255',
-        (err) => {
-          // console.log(err)
-        }
-      );
-    }, 400);
+    
+    // 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)) {
+      if (plugin.searchOptions.validateResponse(msg, info, DEVICE.all)) {
+        searchSockets[i].close();
         DEVICE.registerDevice({
           type: pluginType,
           defaultName: plugin.defaultName,
@@ -332,57 +199,32 @@ newSearchUDP = function (pluginType, plugin) {
   });
   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)
+        }
+      );
   });
 };
 
-// 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);
-// 	});
-
-// }
+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);
+  });
+}

src/view.js

@@ -6,14 +6,13 @@ const PLUGINS = require('./plugins.js');
 const pinnedDevices = [];
 module.exports.pinnedDevices = pinnedDevices;
 let activeDevice = false;
-let drawCount = 0;
 
-module.exports.init = function () {
+module.exports.init = function init() {
   populatePluginLists();
 };
 
-drawDeviceFrame = function (id) {
-  // console.log("DRAW")
+
+function drawDeviceFrame(id) {
 
   const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`);
   const $devicePinned = document.getElementById(`device-${id}-pinned`);
@@ -22,17 +21,10 @@ drawDeviceFrame = function (id) {
     return true;
   }
 
-  d = DEVICE.all[id];
+  const d = DEVICE.all[id];
 
   let str = '<html><head>';
-  if (d.status == 'ok') {
-    str +=
-      "<link href='./plugins/" +
-      d.type +
-      '/' +
-      d.type +
-      ".css' rel='stylesheet' type='text/css'>";
-  }
+  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>';
@@ -48,272 +40,273 @@ drawDeviceFrame = function (id) {
 
   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;
+
 };
 
-generateBodyHTML = function(d){
+
+function generateBodyHTML(d){
   let str = "";
-  if (d.status == 'ok') {
+
+  if (d.status === 'ok') {
+
     try {
       str += PLUGINS.all[d.type].template({
         data: d.data,
-        listName: d.displayName || d.defaultName,
+        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 += `<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 += `<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 (device) {
-  if (device == undefined || device.status=="new") {
-    return true;
-  }
-  
-  if(drawCount==0){
-    drawDeviceFrame(device.id);
-  }else{
-    let $deviceDrawArea = document.getElementById(`device-${device.id}-draw-area`).contentDocument.body;
-    $deviceDrawArea.innerHTML = generateBodyHTML(DEVICE.all[device.id]);
 
-    let $scrollTo = $deviceDrawArea.getElementsByClassName("scroll-position");
-    if($scrollTo.length==1){
-      document.getElementById(`device-${device.id}-draw-area`).contentWindow.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
-    }
+module.exports.draw = function draw(device) {
+
+  const d = device;
+  const $deviceDrawArea = document.getElementById(`device-${d.id}-draw-area`);
+
+  if($deviceDrawArea){
+    const scriptEl = $deviceDrawArea.contentWindow.document.createRange().createContextualFragment(generateBodyHTML(d));
+    $deviceDrawArea.contentWindow.document.body.replaceChildren(scriptEl);
+
+  }else{
+    drawDeviceFrame(d.id);
+
   }
-  drawCount++;
-  
+  d.drawn = true;
 };
 
-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];
+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 html = '';
-  if (d.status == 'ok') {
+
+}
+
+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') {
+  } 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>';
 
-  let elem = document.getElementById(d.id);
+  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>'
-      );
+      .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();
+
 };
 
-switchDevice = function (id) {
-  if (activeDevice && activeDevice.pinIndex == false) {
-    document.getElementById('device-' + activeDevice.id).remove();
+
+module.exports.removeDeviceFromList = function removeDeviceFromList(device) {
+  const d = device;
+  document.getElementById(d.id).remove();
+
+};
+
+
+function switchDevice(id) {
+  if (activeDevice && activeDevice.pinIndex === false) {
+    document.getElementById(`device-${activeDevice.id}`).remove();
     activeDevice = false;
   }
   activeDevice = DEVICE.all[id];
 
-  var cols = 1;
+  let cols = 1;
   if (pinnedDevices.length > 0) {
     cols += pinnedDevices.length;
   }
-  if (pinnedDevices.indexOf(activeDevice) >= 0 || id == undefined) {
+  if (pinnedDevices.indexOf(activeDevice) >= 0 || id === undefined) {
     cols--;
   }
 
-  document.getElementById('all-devices').style.gridTemplateColumns =
-    'repeat(' + cols + ', 1fr)';
+  document.getElementById('all-devices').style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
 
-  if (id == undefined) {
+  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;
+    return;
   }
 
-  var i = DEVICE.all[id].id;
+  document.getElementById('refresh-device-button').disabled = false;
+  // document.getElementById('refresh-device-button').style.opacity = 1;
+
+  const i = DEVICE.all[id].id;
+  let $deviceWrapper = document.getElementById(`device-${i}`);
 
-  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);
+    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);
 
     $deviceWrapper = document.getElementById(`device-${i}`);
   }
 
-  switchClass(document.getElementById(id), 'active-device');
+  window.switchClass(document.getElementById(id), 'active-device');
   drawDeviceFrame(id);
-  switchClass(document.getElementById(`device-${id}`), 'active-device-outline');
+  window.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;
+  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('setDevicePin', !DEVICE.all[id].pinIndex === false);
 };
 module.exports.switchDevice = switchDevice;
 
-module.exports.getActiveDevice = function () {
+
+module.exports.getActiveDevice = function getActiveDevice() {
   return activeDevice;
 };
 
-module.exports.pinActiveDevice = function () {
-  if (activeDevice == undefined) {
-    return true;
+
+module.exports.pinActiveDevice = function pinActiveDevice() {
+  if (activeDevice === undefined) {
+    return;
   }
-  if (pinnedDevices.indexOf(DEVICE.all[activeDevice.id]) == -1) {
+  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;
+
+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 (device) {
+
+module.exports.pinDevice = function pinDevice(device) {
   pinnedDevices.push(device);
   DEVICE.changePinIndex(device, true);
 };
-module.exports.unpinDevice = function (device) {
+
+
+module.exports.unpinDevice = function unpinDevice(device) {
   pinnedDevices.push(device);
   DEVICE.changePinIndex(device, false);
 };
 
-module.exports.resetPinned = function () {
+
+module.exports.resetPinned = function resetPinned() {
   pinnedDevices.length = 0;
   activeDevice = false;
-  // switchDevice();
+
   try {
     document
       .querySelector('#device-list .active-device')
       .classList.remove('active-device');
-  } catch (err) {}
+  } catch (err) {
+    //
+  }
   document.getElementById('all-devices').innerHTML = '';
 };
 
-module.exports.getPinnedDevices = function () {
+
+module.exports.getPinnedDevices = function getPinnedDevices() {
   return pinnedDevices;
 };
 
-module.exports.toggleSlotButtons = function (slotIndex) {
-  if (slotIndex == 1) {
+
+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) {
+  } 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) {
+  } 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;
+
+module.exports.selectPreviousDevice = function selectPreviousDevice() {
+  if (activeDevice === undefined) {
+    return;
   }
-  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);
+  const keys = Object.keys(DEVICE.all);
+  const prevIndex = Math.max(0, 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>';
+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]);
+};
 
-  document.getElementById('device-settings-plugin-dropdown').innerHTML =
-    typeSelect;
+
+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;
 };
-
-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);
-  };
-}