style fix for dropdowns on Windows

Update package-lock.json
Update .gitignore
2026-07-26 09:18:39 +00:00 · 2022-01-15 16:10:49 -05:00 · 2022-01-15 16:10:34 -05:00 · 2022-01-15 16:10:06 -05:00 · 2022-01-15 16:10:02 -05:00 · 2022-01-15 16:09:34 -05:00
42 changed files with 3884 additions and 12757 deletions
@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['airbnb-base', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 13,
+  },
+  rules: {
+    'import/no-extraneous-dependencies': 0,
+    'no-unused-vars': ['error', { args: 'none' }],
+    'no-console': 'off',
+    'no-alert': 'off',
+    'no-plusplus': 'off',
+    'import/extensions': 'off',
+  },
+};
@@ -1,4 +1,5 @@

 .DS_Store
 node_modules
-out/Cue View-darwin-x64
+.vscode
+/dist
@@ -0,0 +1,2 @@
+node_modules
+out
@@ -0,0 +1,7 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  bracketSameLine: true,
+};
@@ -1,19 +1,18 @@
 # Cue View
+
 A dashboard for everything in your show.

 ![Screen Shot 2021-10-26 at 11 57 21 PM](https://user-images.githubusercontent.com/919746/138997636-dfca293a-7c98-459d-85a3-405c9b11ce8a.png)

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

-
 ## Supported Devices
+
 - QLab 4
 - ETC Eos Consoles
 - Watchout
@@ -21,15 +20,68 @@ A dashboard for everything in your show.
 - X32 Audio Consoles
 - XAir Audio Consoles

-
 #### Future Devices
+
 - Spikemark
 - ATEM Video Mixers
 - Art-Net, sACN Universes
 - Epson Pro series Projectors
 - DiGiCo Consoles
 - d&b DS100, amps
+- Hog


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

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

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

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

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

-const createWindow = () => {
-  
-  mainWindow = new BrowserWindow({
-    width: 1500,
+const menuTemplate = require('./src/menu');
+
+const windowMac = {
+  width: 1500,
    height: 900,
    titleBarStyle: 'hiddenInset',
    transparent: true,
    frame: false,
    show: false,
-    //backgroundColor: "#333333",
-    vibrancy: "window",
-    visualEffectState: "followWindow",
+    // backgroundColor: "#333333",
+    vibrancy: 'window',
+    visualEffectState: 'followWindow',
    webPreferences: {
-      //enableRemoteModule: true,
      contextIsolation: false,
      nodeIntegration: true,
-      preload: path.join(__dirname, 'preload.js')
-    }
-  });
+      preload: path.join(__dirname, 'preload.js'),
+    },
+}
+
+const windowWin = {
+  width: 1500,
+  height: 900,
+  backgroundColor: "#333333",
+  webPreferences: {
+    contextIsolation: false,
+    nodeIntegration: true,
+    preload: path.join(__dirname, 'preload.js'),
+  },
+}
+
+const createWindow = () => {
+
+  nativeTheme.themeSource = 'dark';
+  
+  if(isMac){
+    mainWindow = new BrowserWindow(windowMac);
+  }else{
+    mainWindow = new BrowserWindow(windowWin);
+  }

  mainWindow.loadFile('index.html');

  mainWindow.on('ready-to-show', () => {
-      mainWindow.show();
+    mainWindow.show();
  });

-  if(process.defaultApp){
+  if (process.defaultApp) {
    mainWindow.webContents.openDevTools();
  }

-
-  menu = Menu.buildFromTemplate(menuTemplate);
-  Menu.setApplicationMenu(menu);
-
+  menuObj = Menu.buildFromTemplate(menuTemplate);
+  Menu.setApplicationMenu(menuObj);
+  
 };

-
-
 app.whenReady().then(() => {
-  createWindow()
-
-  app.on('activate', function () {
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
-})
-
-
-
-
+  createWindow();
+  
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});

 app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
@@ -70,126 +74,22 @@ app.on('window-all-closed', () => {
  }
 });

-
-
-const { ipcMain } = require('electron')
 ipcMain.on('enableDeviceDropdown', (event, arg) => {
-  menu.getMenuItemById('devicePin').enabled = true;
-  menu.getMenuItemById('deviceDelete').enabled = true;
+  menuObj.getMenuItemById('devicePin').enabled = true;
+  menuObj.getMenuItemById('deviceDelete').enabled = true;
 });
 ipcMain.on('disableDeviceDropdown', (event, arg) => {
-  menu.getMenuItemById('devicePin').enabled = false;
-  menu.getMenuItemById('deviceDelete').enabled = false;
+  menuObj.getMenuItemById('devicePin').enabled = false;
+  menuObj.getMenuItemById('deviceDelete').enabled = false;
 });

 ipcMain.on('enableSearchAll', (event, arg) => {
-  menu.getMenuItemById('deviceSearch').enabled = true;
+  menuObj.getMenuItemById('deviceSearch').enabled = true;
 });
 ipcMain.on('disableSearchAll', (event, arg) => {
-  menu.getMenuItemById('deviceSearch').enabled = false;
+  menuObj.getMenuItemById('deviceSearch').enabled = false;
 });

-ipcMain.on('setDevicePin', function(event, arg){
-  menu.getMenuItemById('devicePin').checked = arg;
-})
-
-const isMac = process.platform === 'darwin'
-
-const menuTemplate = [
-  { 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");
-        }
-      }
-    ]
-  }
-]
+ipcMain.on('setDevicePin', (event, arg) => {
+  menuObj.getMenuItemById('devicePin').checked = arg;
+});
@@ -1,63 +1,48 @@
 {
-  "name": "Cue View",
-  "version": "0.9.2",
+  "name": "Cue-View",
+  "productName": "Cue View",
+  "version": "0.9.4-pre",
  "description": "A dashboard for everything in your show",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "electron-forge start",
-    "package": "electron-forge package",
-    "make": "electron-forge make"
+    "start": "electron .",
+    "buildAll": "electron-builder -m -w -l"
  },
-  "author": "Stage Hacks LLC",
+  "author": "Cue View",
  "license": "CC BY-SA 4.0",
+  "homepage": "https://github.com/stagehacks/Cue-View",
+  "repository": "https://github.com/stagehacks/Cue-View",
  "devDependencies": {
-    "@electron-forge/cli": "^6.0.0-beta.61",
-    "@electron-forge/maker-deb": "^6.0.0-beta.61",
-    "@electron-forge/maker-rpm": "^6.0.0-beta.61",
-    "@electron-forge/maker-squirrel": "^6.0.0-beta.61",
-    "@electron-forge/maker-zip": "^6.0.0-beta.61",
-    "electron": "^15.2.0"
+    "electron": "^15.2.0",
+    "eslint": "^8.6.0",
+    "eslint-config-prettier": "^8.3.0",
+    "prettier": "^2.5.1"
  },
  "dependencies": {
    "bonjour": "^3.5.0",
    "ejs": "^3.1.5",
-    "electron-reload": "^1.5.0",
-    "electron-squirrel-startup": "^1.0.0",
    "lodash": "^4.17.20",
    "md5": "^2.3.0",
    "netmask": "^1.0.6",
    "osc": "^2.4.1",
    "uuid": "^8.3.2"
  },
-  "config": {
-    "forge": {
-      "packagerConfig": {
-        "icon": "./src/img/icon.icns"
-      },
-      "makers": [
-        {
-          "name": "@electron-forge/maker-squirrel",
-          "config": {
-            "name": "Cue View",
-            "iconUrl": "./src/img/win-icon.ico"
-          }
-        },
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "darwin"
-          ]
-        },
-        {
-          "name": "@electron-forge/maker-deb",
-          "config": {}
-        },
-        {
-          "name": "@electron-forge/maker-rpm",
-          "config": {}
-        }
-      ]
+  "build": {
+    "appId": "com.electron.cueview",
+    "icon": "./src/img/",
+    "artifactName": "${productName} ${os} v${version}.${ext}",
+    "mac": {
+      "target": "zip",
+      "category": "utility",
+      "icon": "./src/img/icon.icns"
+    },
+    "win": {
+      "target": "zip",
+      "icon": "./src/img/icon.ico"
+    },
+    "linux": {
+      "target": "zip"
    }
  }
 }
@@ -1,69 +1,68 @@
-table{
-	background-color: #141414;
-	border: #404040 1px solid;
-	border-radius: 4px;
-	color: #a59baa;
+table {
+  background-color: #141414;
+  border: #404040 1px solid;
+  border-radius: 4px;
+  color: #a59baa;
 }
-th{
-	font-size: 14px;
-	font-weight: normal;
-	padding: 5px;
+th {
+  font-size: 14px;
+  font-weight: normal;
+  padding: 5px;
 }
-td{
-	text-align: center;
-	padding: 6px;
+td {
+  text-align: center;
+  padding: 6px;
 }
-td:first-child{
-	text-align: left;
+td:first-child {
+  text-align: left;
 }
-td.black{
-	background-color: black;
-	border-right: #212021 1px solid;
+td.black {
+  background-color: black;
+  border-right: #212021 1px solid;
 }
-td.num{
-	color: white;
-	font-weight: 600;
-	font-size: 16px;
+td.num {
+  color: white;
+  font-weight: 600;
+  font-size: 16px;
 }
-.scene{
-	background-color: black;
-	border-top: #141414 2px solid;
-	border-bottom: #141414 2px solid;
+.scene {
+  background-color: black;
+  border-top: #141414 2px solid;
+  border-bottom: #141414 2px solid;
 }
-.scene hr{
-	border: #001f10 4px solid;
+.scene hr {
+  border: #001f10 4px solid;
 }
-.scene span{
-	display: table;
-	margin: 0px auto;
-	margin-top: -25px;
-	padding: 4px;
-	background-color: black;
-	font-weight: bold;
-	font-size: 14px;
+.scene span {
+  display: table;
+  margin: 0px auto;
+  margin-top: -25px;
+  padding: 4px;
+  background-color: black;
+  font-weight: bold;
+  font-size: 14px;
 }
-.time{
-	border: #2f2b35 2px solid;
-	border-radius: 5px;
+.time {
+  border: #2f2b35 2px solid;
+  border-radius: 5px;
 }
-tr.active-cue{
-	color: #d49800;
+tr.active-cue {
+  color: #d49800;
+}
+tr.active-cue td.num {
+  color: #d49800;
+}
+tr.active-cue .time {
+  border-color: #d49800;
 }
-	tr.active-cue td.num{
-		color: #d49800;
-	}
-	tr.active-cue .time{
-		border-color: #d49800;
-	}

-	
@media screen and (min-width: 0px) and (max-width: 750px) {
-	.hide-medium{
-		display: none;
-	}
+  .hide-medium {
+    display: none;
+  }
 }
@media screen and (min-width: 0px) and (max-width: 550px) {
-	.hide-small{
-		display: none;
-	}
-}
+  .hide-small {
+    display: none;
+  }
+}
@@ -41,7 +41,7 @@
 				<% } %>

 				<% if(cues[j]==data.activeCue+""){ %>
-					<tr class="active-cue">
+					<tr class="active-cue scroll-position">
 				<% }else{ %>
 					<tr>
 				<% } %>
@@ -97,12 +97,6 @@

 <% } %>

-<script>
-	var $scrollTo = document.getElementsByClassName("active-cue");
-	if($scrollTo.length==1){
-		window.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
-	}
-</script>

 <%
 	function prettyDuration(milliseconds, box){
@@ -1,115 +1,144 @@
-exports.defaultName = "ETC Eos";
-exports.connectionType = "osc";
+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"));
-	}
-}
+  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"
+// "\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.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();

-exports.data = function(device, osc){
-	var address = osc.address;
-	var p = osc.address.split("/");
-	p.shift();
+  if (p[1] == 'out' && p[2] == 'show' && p[3] == 'name') {
+    device.data.showName = osc.args[0];
+    device.data.cuelists = {};
+    this.deviceInfoUpdate(device, 'defaultName', osc.args[0]);
+  } else if (osc.address == '/eos/out/get/cuelist/count') {
+    for (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]
+      ),
+    };

-	if(p[1]=="out" && p[2]=="show" && p[3]=="name"){
-		device.data.showName = osc.args[0];
-		device.data.cuelists = {};
-		this.deviceInfoUpdate(device, "defaultName", osc.args[0]);
-	}else if(osc.address=="/eos/out/get/cuelist/count"){
-		for(var i=0; i<osc.args[0]; i++){
-			device.send("/eos/get/cuelist/index/"+i);
-		}
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cuelist" && p[5]=="list"){
-		device.data.cuelists[p[4]] = {};
-		device.send("/eos/get/cue/"+p[4]+"/count");
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p[5]=="count"){
-		for(var i=0; i<osc.args[0]; i++){
-			device.send("/eos/get/cue/"+p[4]+"/index/"+i);
-		}
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p[7]=="list"){
-		this.deviceInfoUpdate(device, "status", "ok");
-		if(device.data.cuelists[p[4]][p[5]]==undefined){
-			device.data.cuelists[p[4]][p[5]] = {};
-		}
-		device.data.cuelists[p[4]][p[5]][p[6]] = {
-			uid: osc.args[1],
-			label: osc.args[2],
-			uptimeduration: osc.args[3],
-			uptimedelay: osc.args[4],
-			downtimeduration: osc.args[5],
-			downtimedelay: osc.args[6],
-			focustimeduration: osc.args[7],
-			focustimedelay: osc.args[8],
-			colortimeduration: osc.args[9],
-			colortimedelay: osc.args[10],
-			beamtimeduration: osc.args[11],
-			beamtimedelay: osc.args[12],
-			mark: osc.args[16],
-			block: osc.args[17],
-			assert: osc.args[18],
-			follow: osc.args[20],
-			hang: osc.args[21],
-			partcount: osc.args[26],
-			scene: osc.args[28],
-			duration: Math.max(osc.args[3], osc.args[5], osc.args[7], osc.args[9], osc.args[11])
-		};
+    // console.log(p[4]+" "+p[5]+" "+p[6]+" updated")
+    device.draw();
+  } else if (p[1] == 'out' && p[2] == 'get' && p[3] == 'cue' && p.length == 6) {
+    // console.log("cue "+p[4]+" "+p[5]+" deleted")

-		//console.log(p[4]+" "+p[5]+" "+p[6]+" updated")
-		device.draw();
+    // 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.

-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p.length==6){
-
-		//console.log("cue "+p[4]+" "+p[5]+" deleted")
-
-
-		// There's no OSC notification of the deletion of a part. It just tells you to update the parent cue and remaining children.
-		// So: we should fetch all the parts of a cue somehow every time there's an update to a cue.
-
-
-
-		delete device.data.cuelists[p[4]][p[5]];
-		device.draw();
-
-	}else if(p[1]=="out" && p[2]=="get" && p[3]=="cue" && p[7]=="actions"){
-		if(osc.args.length==3){
-			device.data.cuelists[p[4]][p[5]][0].extlinks = osc.args[2];
-		}
-	}else if(p[1]=="out" && p[2]=="event" && p[3]=="cue" && p[6]=="fire"){
-		// explore replacing this with /eos/out/active/cue
-		device.data.activeCue = p[5];
-		device.draw();
-	}else if(p[1]=="out" && p[2]=="notify" && p[3]=="cue"){
-		var cueList = p[4];
-		var listIndex = p[6];
-		var listCount = p[7];
-		var cueNumber = osc.args[1];
-		
-		device.send("/eos/get/cue/"+cueList+"/"+cueNumber);
-		//console.log("SENT /eos/get/cue/"+cueList+"/"+cueNumber);
-	}else if(p[2]=="cmd" || p[2]=="ping" || p[2]=="user" || p[2]=="softkey"){
-
-	}else if(p[3]=="version"){
-		device.data.version = osc.args[0];
-
-	}else{
-		//console.log(osc);
-	}
-	//console.log(p)
-}
-exports.heartbeat = function(device){
-	device.send("/eos/ping");
-}
+    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');
+};
@@ -1,10 +1,9 @@
-
-.warning{
-	color: #e9873a;
+.warning {
+  color: #e9873a;
 }
-.error{
-	color: #ed5f5d;
+.error {
+  color: #ed5f5d;
 }
-.ok{
-	color: #79b757;
+.ok {
+  color: #79b757;
 }
@@ -1,116 +1,120 @@
-exports.defaultName = "PJLink Projector";
-exports.connectionType = "TCPsocket";
+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);
-	}
-}
+  type: 'UDPsocket',
+  searchBuffer: Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]),
+  devicePort: 4352,
+  listenPort: 4352,
+  validateResponse: function (msg, info) {
+    return msg.toString().indexOf('%2ACKN=') >= 0;
+  },
+};
 exports.defaultPort = 4352;

-exports.ready = function(device){
-	//Power status query
-	//device.send("%1POWR ?\r");
-}
-var password = false;
+exports.ready = function (device) {
+  // Power status query
+  // device.send("%1POWR ?\r");
+};
+let password = false;

-exports.data = function(device, message){
-	this.deviceInfoUpdate(device, "status", "ok");
-	var msg =  message.toString();
+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];

-	const md5 = require("md5");
-
-	if(msg.substring(0, 8)=="PJLINK 1"){
-		password = md5(msg.substring(9, 17)+"JBMIAProjectorLink")
-		device.send(password+"%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r");
-	}
-	if(msg.substring(0, 7)=="%1POWR="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1INPT="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1AVMT="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1ERST="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1LAMP="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1NAME="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1INF1="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%1INF2="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%2SNUM="){
-		processPJLink(device, msg, this);
-	}
-	if(msg.substring(0, 7)=="%2SVER="){
-		processPJLink(device, msg, this);
-	}
+    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();
 }

-function processPJLink(device, str, that){
-	var arr = str.split("%");
-	for(var key in arr){
-		var split = arr[key].split("=");
-		var key = split[0];
-		var value = split[1];
-		
-		switch(key){
-			case "1POWR":
-				device.data.power = value;
-				break;
-			case "1INPT":
-				device.data.input = value;
-				break;
-			case "1AVMT":
-				device.data.avmute = value;
-				break;
-			case "1ERST":
-				device.data.fanError = value[0];
-				device.data.lampError = value[1];
-				device.data.tempError = value[2];
-				device.data.coverError = value[3];
-				device.data.filterError = value[4];
-				device.data.otherError = value[5];
-				break;
-			case "1LAMP":
-				device.data.lamp = value.split(" ");
-				break;
-			case "1NAME":
-				device.data.name = value;
-				that.deviceInfoUpdate(device, "defaultName", device.data.name);
-				break;
-			case "1INF1":
-				device.data.info1 = value;
-				break;
-			case "1INF2":
-				device.data.info2 = value;
-				break;
-			case "2SNUM":
-				device.data.serial = value;
-				break;
-			case "2SVER":
-				device.data.version = value;
-				break;
-		}
-	}
-	device.draw();
-}
+exports.data = function (device, message) {
+  this.deviceInfoUpdate(device, 'status', 'ok');
+  const msg = message.toString();

-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");
-	}
-}
+  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`
+    );
+  }
+};
@@ -1,189 +1,237 @@
-table{
-	background-color: #323232;
-	border: 0px;
-	color: #b8b8b8;
-	font-family: sans-serif;
-	width: 100%;
-	table-layout:fixed;
-	margin-bottom: 30px;
+table {
+  background-color: #323232;
+  border: 0px;
+  color: #b8b8b8;
+  font-family: sans-serif;
+  width: 100%;
+  table-layout: fixed;
+  margin-bottom: 30px;
 }
-th{
-	font-size: 12px;
-	font-weight: normal;
-	padding: 0px 4px;
-	background-color: #2d2c2d;
-	border: #545454 1px solid;
-	border-right: none;
+th {
+  font-size: 12px;
+  font-weight: normal;
+  padding: 0px 4px;
+  background-color: #2d2c2d;
+  border: #545454 1px solid;
+  border-right: none;
 }
-	th.no-border{
-		border-left: none;
-		border-right: none;
-		padding: 0px;
-	}
-
-td{
-	padding: 0px;
-	height: 25px;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+th.no-border {
+  border-left: none;
+  border-right: none;
+  padding: 0px;
 }
-	td img{
-		padding-top: 4px;
-	}
-

+td {
+  padding: 0px;
+  height: 25px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+td img {
+  padding-top: 4px;
+}

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

-
-tr:nth-child(even).q-red{
-	background: linear-gradient(to top, #2c2c2c, #4c3130 1px);
+tr:nth-child(even).q-red {
+  background: linear-gradient(to top, #2c2c2c, #4c3130 1px);
 }
-tr:nth-child(odd).q-red{
-	background: linear-gradient(to top, #323232, #513635 1px);
+tr:nth-child(odd).q-red {
+  background: linear-gradient(to top, #323232, #513635 1px);
 }
-	.q-red td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #ff4242 solid;
-	}
-tr:nth-child(even).q-orange{
-	background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
+.q-red td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #ff4242 solid;
 }
-tr:nth-child(odd).q-orange{
-	background: linear-gradient(to top, #323232, #514330 1px);
+tr:nth-child(even).q-orange {
+  background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
 }
-	.q-orange td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #ffa500 solid;
-	}
-tr:nth-child(even).q-green{
-	background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
+tr:nth-child(odd).q-orange {
+  background: linear-gradient(to top, #323232, #514330 1px);
 }
-tr:nth-child(odd).q-green{
-	background: linear-gradient(to top, #323232, #324b33 1px);
+.q-orange td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #ffa500 solid;
 }
-	.q-green td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #01d52f solid;
-	}
-tr:nth-child(even).q-blue{
-	background: linear-gradient(to top, #2c2c2c, #323647 1px);
+tr:nth-child(even).q-green {
+  background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
 }
-tr:nth-child(odd).q-blue{
-	background: linear-gradient(to top, #323232, #363b4b 1px);
+tr:nth-child(odd).q-green {
+  background: linear-gradient(to top, #323232, #324b33 1px);
 }
-	.q-blue td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #536de0 solid;
-	}
-tr:nth-child(even).q-purple{
-	background: linear-gradient(to top, #2c2c2c, #39273d 1px);
+.q-green td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #01d52f solid;
 }
-tr:nth-child(odd).q-purple{
-	background: linear-gradient(to top, #323232, #433147 1px);
+tr:nth-child(even).q-blue {
+  background: linear-gradient(to top, #2c2c2c, #323647 1px);
 }
-	.q-purple td:first-of-type{
-		padding-left: 5px;
-		border-left: 5px #a601c0 solid;
-	}
-
-tr.q-armed-false td{
-	background: url("img/disarmed-pattern-light.png");
-	background-attachment: fixed;
+tr:nth-child(odd).q-blue {
+  background: linear-gradient(to top, #323232, #363b4b 1px);
+}
+.q-blue td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #536de0 solid;
+}
+tr:nth-child(even).q-purple {
+  background: linear-gradient(to top, #2c2c2c, #39273d 1px);
+}
+tr:nth-child(odd).q-purple {
+  background: linear-gradient(to top, #323232, #433147 1px);
+}
+.q-purple td:first-of-type {
+  padding-left: 5px;
+  border-left: 5px #a601c0 solid;
 }

-
-tr.playback-position{
-	background-image: none !important;
-	background: #1557da !important;
-	color: white !important;
-}
-tr.playback-position .q-gray-text{
-	color: white !important;
+tr.q-armed-false td {
+  background: url('img/disarmed-pattern-light.png');
+  background-attachment: fixed;
 }

-
-.gLeft{
-	height: 24px;
-	width: 12px;
-	border-left: 2px solid;
+tr.playback-position {
+  background-image: none !important;
+  background: #1557da !important;
+  color: white !important;
 }
-.gTop{
-	border-top: 2px solid;
-}
-.gBot{
-	border-bottom: 2px solid;
-}
-.gRight{
-	border-right: 2px solid;
-}
-.gMode-1.gLeft.gTop{
-	border-radius: 6px 0px 0px 0px;
-}
-.gMode-1.gLeft.gBot{
-	border-radius: 0px 0px 0px 6px;
-}
-.gMode-1.gRight.gBot{
-	border-radius: 0px 0px 6px 0px;
-}
-.gMode-1.gLeft.gTop.gBot{
-	border-radius: 6px 0px 0px 6px;
-}
-.gMode-1.gLeft.gTop.gRight{
-	border-radius: 6px 6px 0px 0px;
-}
-.gMode-1.gTop.gRight.gBot{
-	border-radius: 0px 6px 6px 0px;
-}
-.gMode-1.gLeft.gTop.gRight.gBot{
-	border-radius: 6px;
-}
-.gMode-1{
-	border-color: #5a5a87;
-}
-.gMode-2{
-	border-color: #5a5a87;
-}
-.gMode-3{
-	border-color: #429242;
-}
-.gMode-4{
-	border-color: #925fc0;
-}
-.gMode-, .gMode-0{
-	border-color: rgba(0, 0, 0, 0);
-}
-.group-arrow{
-	width: 13px;
-	background-image: url("img/arrow-down.png");
-	background-position: center;
-	background-repeat: no-repeat;
+tr.playback-position .q-gray-text {
+  color: white !important;
 }

-.q-time{
-	font-size: 14px;
-	text-align: center;
+.gLeft {
+  height: 24px;
+  width: 12px;
+  border-left: 2px solid;
 }
-.q-gray-text{
-	color: #424242;
+.gTop {
+  border-top: 2px solid;
+}
+.gBot {
+  border-bottom: 2px solid;
+}
+.gRight {
+  border-right: 2px solid;
+}
+.gMode-1.gLeft.gTop {
+  border-radius: 6px 0px 0px 0px;
+}
+.gMode-1.gLeft.gBot {
+  border-radius: 0px 0px 0px 6px;
+}
+.gMode-1.gRight.gBot {
+  border-radius: 0px 0px 6px 0px;
+}
+.gMode-1.gLeft.gTop.gBot {
+  border-radius: 6px 0px 0px 6px;
+}
+.gMode-1.gLeft.gTop.gRight {
+  border-radius: 6px 6px 0px 0px;
+}
+.gMode-1.gTop.gRight.gBot {
+  border-radius: 0px 6px 6px 0px;
+}
+.gMode-1.gLeft.gTop.gRight.gBot {
+  border-radius: 6px;
+}
+.gMode-1 {
+  border-color: #5a5a87;
+}
+.gMode-2 {
+  border-color: #5a5a87;
+}
+.gMode-3 {
+  border-color: #429242;
+}
+.gMode-4 {
+  border-color: #925fc0;
+}
+.gMode-,
+.gMode-0 {
+  border-color: rgba(0, 0, 0, 0);
+}
+.group-arrow {
+  width: 13px;
+  background-image: url('img/arrow-down.png');
+  background-position: center;
+  background-repeat: no-repeat;
 }

+.q-time {
+  font-size: 14px;
+  text-align: center;
+}
+.q-gray-text {
+  color: #424242;
+}
+
+.cart{
+  position: relative;
+  height:  600px;
+  width:  100%;
+  background-color: #2c2b2a;
+}
+.cartCueWrapper{
+  display:  block;
+  position: absolute;
+  box-sizing: border-box;
+  padding:  3px;
+}
+.cartCue{
+  height:  100%;
+  box-sizing: border-box;
+
+  border:  3px solid;
+  border-radius:  6px;
+  color:  white;
+  font-size:  1.2em;
+}
+.cartCue p{
+  margin:  10px;
+}
+.cartCueIcon{
+  position: absolute;
+  right:  13px;
+  top:  13px;
+}
+.cartColor-red{
+  border-color:  #ff4242;
+  background-color:  #9b3726;
+}
+.cartColor-orange{
+  border-color:  #ffa500;
+  background-color: #ad6026;
+}
+.cartColor-green{
+  border-color:  #01d52f;
+  background-color: #397f27;
+}
+.cartColor-blue{
+  border-color:  #536de0;
+  background-color: #304893;
+}
+.cartColor-purple{
+  border-color:  #a601c0;
+  background-color: #592d74;
+}
+.cartBlank{
+  border-color:  #1f1f1f;
+  background-color: #1f1f1f;
+}


@media screen and (min-width: 0px) and (max-width: 750px) {
-	.hide-medium{
-		display: none;
-	}
+  .hide-medium {
+    display: none;
+  }
 }
@media screen and (min-width: 0px) and (max-width: 550px) {
-	.hide-small{
-		display: none;
-	}
+  .hide-small {
+    display: none;
+  }
 }
-
@@ -9,17 +9,19 @@

 				<td></td> <!-- playhead/color indicator -->

+				<td><center>
 				<% if(cue.broken){ %>
-					<td><center><img src="plugins/qlab/img/status_broken.png" height="18px"></center></td>
+					<img src="plugins/qlab/img/status_broken.png" height="18px">
 				<% }else if(cue.running){ %>
-					<td><center><img src="plugins/qlab/img/status_running.png" height="18px"></center></td>
+					<img src="plugins/qlab/img/status_running.png" height="18px">
 				<% }else if(cue.loaded){ %>
-					<td><center><img src="plugins/qlab/img/status_loaded.png" height="18px"></center></td>
+					<img src="plugins/qlab/img/status_loaded.png" height="18px">
 				<% }else if(cue.flagged){ %>
-					<td><center><img src="plugins/qlab/img/status_flagged.png" height="20px"></center></td>
+					<img src="plugins/qlab/img/status_flagged.png" height="20px">
 				<% }else{ %>
-					<td></td>
+					
 				<% } %>
+				</center></td>


 				<td><img src="plugins/qlab/img/<%= cue.type.toLowerCase() %>.png" height="20px"></td>
@@ -132,6 +134,10 @@
 	<% groupModes.pop(); %>
 <% } %>

+<% function cartTemplate(cueList, groupModes, depth, workspace){ %>
+
+<% } %>
+
 <header>
 	<h1><%= listName %></h1>
 	<h2><%= data.version || "" %></h2>
@@ -140,9 +146,80 @@

 <% for(var i in data.workspaces){ %>
 	<% for(var j in data.workspaces[i].cueLists){ %>
-		<% let cueList = data.workspaces[i].cueLists[j] %>
+		<%
+			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>
@@ -169,18 +246,14 @@
 					<img src="plugins/qlab/img/auto_continue_stubby.png" height="20px">
 				</th>
 			</tr>
-			<% cueTemplate(cueList, [], [], data.workspaces[i]) %>
+			<% cueTemplate(cueList, [], [], data.workspaces[i]); %>
 		</table>
+
+		<% } %>
 	<% } %>

 <% } %>

-<script>
-	var $scrollTo = document.getElementsByClassName("scroll-position");
-	if($scrollTo.length==1){
-		window.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
-	}
-</script>

 <%
 	function prettyFormatTime(seconds){
@@ -1,133 +1,161 @@
-exports.defaultName = "QLab 4";
-exports.connectionType = "osc";
+exports.defaultName = 'QLab 4';
+exports.connectionType = 'osc';
 exports.searchOptions = {
-	type: "Bonjour",
-	bonjourName: "qlab"
-}
+  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], []);


+    }

-exports.ready = function(device){
-	device.send("/workspaces");
-}
+    // console.log(device.data.lastCueInGroup)

-exports.data = function(device, osc){
-	var address = osc.address;
-	var p = osc.address.split("/");
-	p.shift();
+    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') {

-	//console.log(address)
+    const d = JSON.parse(osc.args[0]);
+    const cueID = p[2];
+    const workspace = d.workspace_id;
+    const cueList = d.data.parent;

-	if(osc.address=="/reply/workspaces"){
-		const d = JSON.parse(osc.args[0]).data;
-		device.data.workspaces = {};
-		for(var i=0; i<d.length; i++){
-			device.data.workspaces[d[i].uniqueID] = {
-				"displayName": d[i].displayName,
-				"selectionIsPlayhead": true,
-			}
-			device.data.version = d[i].version;
-			device.send("/workspace/"+d[i].uniqueID+"/cueLists");
-			device.send("/workspace/"+d[i].uniqueID+"/updates", [{type: "i", value: 1}]);
-			device.send("/cue/playbackPosition/uniqueID");
-			device.send("/workspace/"+d[i].uniqueID+"/selectionIsPlayhead");
-		}
+    if (p[3] == 'uniqueID') {
+      // response to /cue/playbackPosition/uniqueID
+      device.data.playbackPosition = d.data;

-	}else if(p[1]=="workspace" && p[3]=="cueLists"){
-		var workspace = p[2];
-		var d = JSON.parse(osc.args[0]).data;
-		device.data.workspaces[workspace].cueLists = {};
-		device.data.workspaces[workspace].allCues = {};
-		device.data.workspaces[workspace].allCuesOrdered = [];
-		device.data.lastCueInGroup = {};
+    } else if (p[3] == 'mode') {
+      device.data.workspaces[workspace].allCues[cueID].mode = d.data;

-		for(var i in d){
+    } else if (p[3] == 'valuesForKeys') {
+      this.deviceInfoUpdate(device, 'status', 'ok');

-			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[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 {
+  }
+};

-			getMoreCueInfo(d[i], []);
-
-			function getMoreCueInfo(group, groups_arg){
-				var groups = JSON.parse(JSON.stringify(groups_arg))
-				groups.push(group.uniqueID);
-
-				for(var cueIndex in group.cues){
-					var cue = group.cues[cueIndex];
-					//console.log(cue)
-
-					device.data.lastCueInGroup[group.uniqueID] = cue;
-
-					cue.groups = groups;
-					device.send("/workspace/"+workspace+"/cue_id/"+cue.uniqueID+"/valuesForKeys", [{type: "s", value: "[\"mode\", \"parent\", \"isBroken\", \"preWait\", \"duration\", \"postWait\", \"continueMode\", \"cueTargetNumber\", \"isLoaded\", \"isRunning\"]"}]);
-					cue.index = device.data.workspaces[workspace].allCuesOrdered.push(cue)-1;
-
-					if(cue.cues){
-						cue.mode = 0;
-						getMoreCueInfo(cue, groups);
-					}
-
-					device.data.workspaces[workspace].allCues[cue.uniqueID] = cue;
-
-				}
-			}
-
-		}
-
-		//console.log(device.data.lastCueInGroup)
-
-		
-		device.draw();
-	}else if(p[0]=="update" && p[1]=="workspace" && p[3]=="cue_id"){
-		device.send("/workspace/"+p[2]+"/cueLists");
-	}else if(p[0]=="update" && p[1]=="workspace" && p[5]=="playbackPosition"){
-		console.log('pb move')
-		device.data.playbackPosition = osc.args[0];
-		device.draw();
-	}else if(p[0]=="reply" && p[1]=="cue_id"){
-
-		if(p[3] == "uniqueID"){
-			// response to /cue/playbackPosition/uniqueID
-			device.data.playbackPosition = JSON.parse(osc.args[0]).data;
-		}else if(p[3]=="mode"){
-			var cueID = p[2];
-			var mode = JSON.parse(osc.args[0]).data;
-			var workspaceID = JSON.parse(osc.args[0]).workspace_id;
-
-			device.data.workspaces[workspaceID].allCues[cueID].mode = mode;
-
-		}else if(p[3]=="valuesForKeys"){
-			this.deviceInfoUpdate(device, "status", "ok");
-
-			var d = JSON.parse(osc.args[0]);
-
-			var cueID = p[2];
-			var workspace = d.workspace_id;
-			var cueList = d.data.parent;
-
-			device.data.workspaces[workspace].allCues[cueID].mode = d.data.mode;
-			device.data.workspaces[workspace].allCues[cueID].preWait = d.data.preWait;
-			device.data.workspaces[workspace].allCues[cueID].duration = d.data.duration;
-			device.data.workspaces[workspace].allCues[cueID].postWait = d.data.postWait;
-			device.data.workspaces[workspace].allCues[cueID].continueMode = d.data.continueMode;
-			device.data.workspaces[workspace].allCues[cueID].target = d.data.cueTargetNumber;
-			device.data.workspaces[workspace].allCues[cueID].loaded = d.data.isLoaded;
-			device.data.workspaces[workspace].allCues[cueID].broken = d.data.isBroken;
-			device.data.workspaces[workspace].allCues[cueID].running = d.data.isRunning;
-		}
-		device.draw();
-
-	}else if(p[1]=="workspace" && p[3]=="selectionIsPlayhead"){
-
-		device.data.workspaces[p[2]].selectionIsPlayhead = JSON.parse(osc.args[0]).data;
-
-	}else{
-		
-	}
-}
-
-exports.heartbeat = function(device){
-	try{
-		device.send("/workspace/"+(Object.keys(device.data.workspaces)[0])+"/thump");
-	}catch(err){}
-}
+exports.heartbeat = function (device) {
+  try {
+    device.send(`/workspace/${Object.keys(device.data.workspaces)[0]}/thump`);
+  } catch (err) {}
+};
@@ -1,16 +1,13 @@
-table{
-	font-family: PlexMono !important;
+table {
+  font-family: PlexMono !important;
 }

-
-
-
-.warning{
-	color: #e9873a;
+.warning {
+  color: #e9873a;
 }
-.error{
-	color: #ed5f5d;
+.error {
+  color: #ed5f5d;
 }
-.ok{
-	color: #79b757;
+.ok {
+  color: #79b757;
 }
@@ -1,56 +1,58 @@
-exports.defaultName = "Dataton Watchout";
-exports.connectionType = "TCPsocket";
+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");
-	}
-}
+  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.ready = function (device) {
+  device.send('authenticate 1\n');
+};

-exports.data = function(device, message){
-	var msg = message.toString();
-	if(msg.substring(0, 5)=="Ready"){
-		device.send("getStatus\n");
-	}
-	if(msg.substring(0, 5)=="Reply"){
-		var arr = msg.split(" ");
+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
+    );

-		device.data.showName = "";
-		var i = 0;
-		while(arr[i][arr[i].length-1]!='"'){
-			i++;
-			device.data.showName+=arr[i]+" ";
-		}
-		device.data.showName = device.data.showName.substring(1, device.data.showName.length-2);
+    i--;
+    device.data.busy = arr[i + 2];
+    device.data.health = arr[i + 3];
+    device.data.displayOpen = arr[i + 4];
+    device.data.showActive = arr[i + 5];
+    device.data.programmerOnline = arr[i + 6];
+    device.data.position = Number(arr[i + 7]).toFixed(2);
+    device.data.rate = arr[i + 8];
+    device.data.standby = arr[i + 9];

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

-		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");
-}
+exports.heartbeat = function (device) {
+  device.send('getStatus\n');
+};
@@ -1,103 +1,120 @@
-td{
-	padding: 3px 16px !important;
+td {
+  padding: 3px 16px !important;
 }
-tr td:first-child{
-	text-align: center;
+tr td:first-child {
+  text-align: center;
 }

-.mute-0, .mute-1{
-	width: 30px;
-	padding: 4px;
-	font-size: 14px;
-	border: black 2px solid;
-	text-align: center;
-	border-radius: 10px;
+.mute-0,
+.mute-1 {
+  width: 30px;
+  padding: 4px;
+  font-size: 14px;
+  border: black 2px solid;
+  text-align: center;
+  border-radius: 10px;
 }
-.mute-1{
-	border-color: gray;
-	color: gray;
+.mute-1 {
+  border-color: gray;
+  color: gray;
 }
-.mute-0{
-	border-color: #fc3344;
-	color: #fc3344;
+.mute-0 {
+  border-color: #fc3344;
+  color: #fc3344;
 }
-.white{
-	color: white;
+.white {
+  color: white;
 }

-.color{
-	padding: 1px 6px;
-	border-radius: 10px;
-	color: black;
-	font-family: PlexMono !important;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap; 
-	overflow: hidden;
+.color {
+  padding: 1px 6px;
+  border-radius: 10px;
+  color: black;
+  font-family: PlexMono !important;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
-.color-0{ /*Black*/
-	background-color: #212121;
-	color: white;
+.color-0 {
+  /*Black*/
+  background-color: #212121;
+  color: white;
 }
-.color-1{ /*Red*/
-	background-color: #fc545b;
+.color-1 {
+  /*Red*/
+  background-color: #fc545b;
 }
-.color-2{ /*Green*/
-	background-color: #65b84d;
+.color-2 {
+  /*Green*/
+  background-color: #65b84d;
 }
-.color-3{ /*Yellow*/
-	background-color: #fec52e;
+.color-3 {
+  /*Yellow*/
+  background-color: #fec52e;
 }
-.color-4{ /*Blue*/
-	background-color: #157efb;
+.color-4 {
+  /*Blue*/
+  background-color: #157efb;
 }
-.color-5{ /*Purple*/
-	background-color: #a453a5;
+.color-5 {
+  /*Purple*/
+  background-color: #a453a5;
 }
-.color-6{ /*Teal*/
-	background-color: #00dae3;
+.color-6 {
+  /*Teal*/
+  background-color: #00dae3;
 }
-.color-7{ /*White*/
-	background-color: #e0e0e0;
+.color-7 {
+  /*White*/
+  background-color: #e0e0e0;
 }
-.color-8{ /*Gray*/
-	background-color: #8c8c8c;
+.color-8 {
+  /*Gray*/
+  background-color: #8c8c8c;
 }
-.color-9{ /*Red*/
-	color: #fc545b;
-	border: #fc545b 1px solid;
+.color-9 {
+  /*Red*/
+  color: #fc545b;
+  border: #fc545b 1px solid;
 }
-.color-10{ /*Green*/
-	color: #65b84d;
-	border: #65b84d 1px solid;
+.color-10 {
+  /*Green*/
+  color: #65b84d;
+  border: #65b84d 1px solid;
 }
-.color-11{ /*Yellow*/
-	color: #fec52e;
-	border: #fec52e 1px solid;
+.color-11 {
+  /*Yellow*/
+  color: #fec52e;
+  border: #fec52e 1px solid;
 }
-.color-12{ /*Blue*/
-	color: #157efb;
-	border: #157efb 1px solid;
+.color-12 {
+  /*Blue*/
+  color: #157efb;
+  border: #157efb 1px solid;
 }
-.color-13{ /*Purple*/
-	color: #a453a5;
-	border: #a453a5 1px solid;
+.color-13 {
+  /*Purple*/
+  color: #a453a5;
+  border: #a453a5 1px solid;
 }
-.color-14{ /*Teal*/
-	color: #00dae3;
-	border: #00dae3 1px solid;
+.color-14 {
+  /*Teal*/
+  color: #00dae3;
+  border: #00dae3 1px solid;
 }
-.color-15{ /*White*/
-	color: #e0e0e0;
-	border: #e0e0e0 1px solid;
+.color-15 {
+  /*White*/
+  color: #e0e0e0;
+  border: #e0e0e0 1px solid;
 }

-input[type=range] {
+input[type='range'] {
  -webkit-appearance: none;
  margin: 0px;
  width: 100%;
 }
-input[type=range]::-webkit-slider-thumb {
+input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -9px;
  height: 26px;
@@ -105,9 +122,9 @@ input[type=range]::-webkit-slider-thumb {
  border-radius: 4px;
  background: #929292;
 }
-input[type=range]::-webkit-slider-runnable-track {
+input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #3b3b3b;
  border-radius: 4px;
-}
+}
@@ -1,47 +1,51 @@
 <header>
-	<h1><%= listName %></h1>
-	<h2><%= data.model %></h2>
+  <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>
-	<% } %>
-
+  <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);
-}
-
-%>
+<% function formatAsDB(val){ if(val==-90){ return "-&infin;"; } if(val>0){
+return "+"+val.toFixed(1); } return val.toFixed(1); } %>
@@ -1,129 +1,130 @@
-exports.defaultName = "X32 Mixer";
-exports.connectionType = "UDPsocket";
+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);
-	}
-}
+  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){
+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.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.data.stereoFader = 0;
-	device.data.stereoFaderDB = 0;
-	device.data.stereoMute = 0;
+  device.send(Buffer.from('/xinfo'));

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

-	//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;
 }

-exports.data = function(device, buf){
-	this.deviceInfoUpdate(device, "status", "ok");
-	var msg = buf.toString().split('\u0000\u0000')
-
-	if(msg[0]=="/xinfo"){
-		this.deviceInfoUpdate(device, "defaultName", msg[4]);
-		device.data.name = msg[4];
-		device.data.ip = msg[2];
-		device.data.firmware = msg[7];
-		device.data.model = msg[5];
-
-
-		device.send(Buffer.from("/lr/mix/fader\u0000\u0000\u0000\u0000"));
-		device.send(Buffer.from("/lr/mix/on\u0000\u0000\u0000\u0000"));
-
-		for(var i=0; i<=32; i++){
-			device.send(Buffer.from("/ch/"+i.toString().padStart(2, "0")+"/config/name\u0000\u0000\u0000\u0000"));
-		}
-		device.draw();
-
-
-	}else if(msg[0]=="/meters/0"){
-		//console.log(msg)
-	}else if(msg[0].indexOf("/mix/fader")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelFaders[channel-1] = buf.readFloatBE(24);
-			device.data.channelFadersDB[channel-1] = convertToDBTheBehringerWay(buf.readFloatBE(24));
-		}else if(addr[0]=="lr"){
-			device.data.stereoFader = buf.readFloatBE(20);
-			device.data.stereoFaderDB = convertToDBTheBehringerWay(buf.readFloatBE(20));
-		}
-
-		device.draw();
-
-	}else if(msg[0].indexOf("/mix/on")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelMutes[channel-1] = buf[23];
-		}else if(addr[0]=="lr"){
-			device.data.stereoMute = buf[19];
-		}
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/fader\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/name")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelNames[channel-1] = msg[2];
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/config/color\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/color")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelColors[channel-1] = buf.readInt8(27);
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/on\u0000\u0000\u0000\u0000"));
-
-	}else{
-		//console.log(msg)
-	}
-	//console.log(msg)
-
+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.heartbeat = function(device){
-	device.send(Buffer.from("/xremote"));
-}
+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];

-function parseAddress(msg){
-	var addr = msg.split("/");
-	addr.shift();
-	return addr;
-}
+    device.send(Buffer.from('/lr/mix/fader\u0000\u0000\u0000\u0000'));
+    device.send(Buffer.from('/lr/mix/on\u0000\u0000\u0000\u0000'));

-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;
-	}
-}
+    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'));
+};
@@ -1,103 +1,119 @@
-td{
-	padding: 3px 16px !important;
+td {
+  padding: 3px 16px !important;
 }
-tr td:first-child{
-	text-align: center;
+tr td:first-child {
+  text-align: center;
 }

-.mute-0, .mute-1{
-	width: 30px;
-	padding: 4px;
-	font-size: 14px;
-	border: black 2px solid;
-	text-align: center;
-	border-radius: 10px;
+.mute-0,
+.mute-1 {
+  width: 30px;
+  padding: 4px;
+  font-size: 14px;
+  border: black 2px solid;
+  text-align: center;
+  border-radius: 10px;
 }
-.mute-1{
-	border-color: gray;
-	color: gray;
+.mute-1 {
+  border-color: gray;
+  color: gray;
 }
-.mute-0{
-	border-color: #fc3344;
-	color: #fc3344;
+.mute-0 {
+  border-color: #fc3344;
+  color: #fc3344;
 }
-.white{
-	color: white;
+.white {
+  color: white;
 }

-.color{
-	padding: 1px 6px;
-	border-radius: 10px;
-	color: black;
-	font-family: PlexMono !important;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap; 
-	overflow: hidden;
+.color {
+  padding: 1px 6px;
+  border-radius: 10px;
+  color: black;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
-.color-0{ /*Black*/
-	background-color: #212121;
-	color: white;
+.color-0 {
+  /*Black*/
+  background-color: #212121;
+  color: white;
 }
-.color-1{ /*Red*/
-	background-color: #fc545b;
+.color-1 {
+  /*Red*/
+  background-color: #fc545b;
 }
-.color-2{ /*Green*/
-	background-color: #65b84d;
+.color-2 {
+  /*Green*/
+  background-color: #65b84d;
 }
-.color-3{ /*Yellow*/
-	background-color: #fec52e;
+.color-3 {
+  /*Yellow*/
+  background-color: #fec52e;
 }
-.color-4{ /*Blue*/
-	background-color: #157efb;
+.color-4 {
+  /*Blue*/
+  background-color: #157efb;
 }
-.color-5{ /*Purple*/
-	background-color: #a453a5;
+.color-5 {
+  /*Purple*/
+  background-color: #a453a5;
 }
-.color-6{ /*Teal*/
-	background-color: #00dae3;
+.color-6 {
+  /*Teal*/
+  background-color: #00dae3;
 }
-.color-7{ /*White*/
-	background-color: #e0e0e0;
+.color-7 {
+  /*White*/
+  background-color: #e0e0e0;
 }
-.color-8{ /*Gray*/
-	background-color: #8c8c8c;
+.color-8 {
+  /*Gray*/
+  background-color: #8c8c8c;
 }
-.color-9{ /*Red*/
-	color: #fc545b;
-	border: #fc545b 1px solid;
+.color-9 {
+  /*Red*/
+  color: #fc545b;
+  border: #fc545b 1px solid;
 }
-.color-10{ /*Green*/
-	color: #65b84d;
-	border: #65b84d 1px solid;
+.color-10 {
+  /*Green*/
+  color: #65b84d;
+  border: #65b84d 1px solid;
 }
-.color-11{ /*Yellow*/
-	color: #fec52e;
-	border: #fec52e 1px solid;
+.color-11 {
+  /*Yellow*/
+  color: #fec52e;
+  border: #fec52e 1px solid;
 }
-.color-12{ /*Blue*/
-	color: #157efb;
-	border: #157efb 1px solid;
+.color-12 {
+  /*Blue*/
+  color: #157efb;
+  border: #157efb 1px solid;
 }
-.color-13{ /*Purple*/
-	color: #a453a5;
-	border: #a453a5 1px solid;
+.color-13 {
+  /*Purple*/
+  color: #a453a5;
+  border: #a453a5 1px solid;
 }
-.color-14{ /*Teal*/
-	color: #00dae3;
-	border: #00dae3 1px solid;
+.color-14 {
+  /*Teal*/
+  color: #00dae3;
+  border: #00dae3 1px solid;
 }
-.color-15{ /*White*/
-	color: #e0e0e0;
-	border: #e0e0e0 1px solid;
+.color-15 {
+  /*White*/
+  color: #e0e0e0;
+  border: #e0e0e0 1px solid;
 }

-input[type=range] {
+input[type='range'] {
  -webkit-appearance: none;
  margin: 0px;
  width: 100%;
 }
-input[type=range]::-webkit-slider-thumb {
+input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -9px;
  height: 26px;
@@ -105,9 +121,9 @@ input[type=range]::-webkit-slider-thumb {
  border-radius: 4px;
  background: #929292;
 }
-input[type=range]::-webkit-slider-runnable-track {
+input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: #3b3b3b;
  border-radius: 4px;
-}
+}
@@ -1,47 +1,51 @@
 <header>
-	<h1><%= listName %></h1>
-	<h2><%= data.model %></h2>
+  <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>
-	<% } %>
-
+  <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);
-}
-
-%>
+<% function formatAsDB(val){ if(val==-90){ return "-&infin;"; } if(val>0){
+return "+"+val.toFixed(1); } return val.toFixed(1); } %>
@@ -1,129 +1,131 @@
-exports.defaultName = "X Air Mixer";
-exports.connectionType = "UDPsocket";
+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);
-	}
-}
+  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){
+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.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.data.stereoFader = 0;
-	device.data.stereoFaderDB = 0;
-	device.data.stereoMute = 0;
+  device.send('/xinfo');

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

-	//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;
 }

-exports.data = function(device, buf){
-	this.deviceInfoUpdate(device, "status", "ok");
-	var msg = buf.toString().split('\u0000\u0000')
-
-	if(msg[0]=="/xinfo"){
-		this.deviceInfoUpdate(device, "defaultName", msg[4]);
-		device.data.name = msg[4];
-		device.data.ip = msg[2];
-		device.data.firmware = msg[7];
-		device.data.model = msg[5];
-
-
-		device.send(Buffer.from("/lr/mix/fader\u0000\u0000\u0000\u0000"));
-		device.send(Buffer.from("/lr/mix/on\u0000\u0000\u0000\u0000"));
-
-		for(var i=0; i<=32; i++){
-			device.send(Buffer.from("/ch/"+i.toString().padStart(2, "0")+"/config/name\u0000\u0000\u0000\u0000"));
-		}
-		device.draw();
-
-
-	}else if(msg[0]=="/meters/0"){
-		//console.log(msg)
-	}else if(msg[0].indexOf("/mix/fader")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelFaders[channel-1] = buf.readFloatBE(24);
-			device.data.channelFadersDB[channel-1] = convertToDBTheBehringerWay(buf.readFloatBE(24));
-		}else if(addr[0]=="lr"){
-			device.data.stereoFader = buf.readFloatBE(20);
-			device.data.stereoFaderDB = convertToDBTheBehringerWay(buf.readFloatBE(20));
-		}
-
-		device.draw();
-
-	}else if(msg[0].indexOf("/mix/on")>=0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-
-		if(addr[0]=="ch"){
-			device.data.channelMutes[channel-1] = buf[23];
-		}else if(addr[0]=="lr"){
-			device.data.stereoMute = buf[19];
-		}
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/fader\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/name")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelNames[channel-1] = msg[2];
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/config/color\u0000\u0000\u0000\u0000"));
-
-	}else if(msg[0].indexOf("/config/color")>0){
-		var addr = parseAddress(msg[0]);
-		var channel = Number(addr[1]);
-		device.data.channelColors[channel-1] = buf.readInt8(27);
-		device.draw();
-		device.send(Buffer.from("/ch/"+addr[1]+"/mix/on\u0000\u0000\u0000\u0000"));
-
-	}else{
-		//console.log(msg)
-	}
-	//console.log(msg)
-
+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.heartbeat = function(device){
-	device.send(Buffer.from("/xremote"));
-}
+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];
+    }

-function parseAddress(msg){
-	var addr = msg.split("/");
-	addr.shift();
-	return addr;
-}
+    device.data.ip = msg[5];
+    device.data.firmware = msg[13];
+    device.data.model = msg[9];
+    this.deviceInfoUpdate(device, 'defaultName', device.data.name);

-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;
-	}
-}
+    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');
+};
@@ -1,215 +1,181 @@
-
-const { remote } = require('electron');
+// const { remote } = require('electron');
 const { ipcRenderer } = require('electron');
-//let currWindow = remote.BrowserWindow.getFocusedWindow();
-const { v4: uuid } = require('uuid');
-let ejs = require('ejs');
+// let currWindow = remote.BrowserWindow.getFocusedWindow();
+// const { v4: uuid } = require('uuid');
+// const ejs = require('ejs');

-let net = require("net");
+//const net = require('net');

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

 window.addDevice = DEVICE.addDevice;

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

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

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

-  document.getElementById("device-settings-table").onclick = function(e){
+  document.getElementById('device-settings-table').onclick = function (e) {
    e.stopPropagation();
-  }
-  document.getElementById("device-settings-name").onchange = function(e){
+  };
+  document.getElementById('device-settings-name').onchange = function (e) {
    e.stopPropagation();
-    DEVICE.changeActiveName(e.target.value)
-  }
-  document.getElementById("device-settings-plugin-dropdown").onchange = function(e){
+    DEVICE.changeActiveName(e.target.value);
+  };
+  document.getElementById('device-settings-plugin-dropdown').onchange =
+    function (e) {
+      e.stopPropagation();
+      DEVICE.changeActiveType(e.target.value);
+    };
+  document.getElementById('device-settings-ip').onchange = function (e) {
    e.stopPropagation();
-    DEVICE.changeActiveType(e.target.value)
-  }
-  document.getElementById("device-settings-ip").onchange = function(e){
+    DEVICE.changeActiveIP(e.target.value);
+  };
+  document.getElementById('device-settings-port').onchange = function (e) {
    e.stopPropagation();
-    DEVICE.changeActiveIP(e.target.value)
-  }
-  document.getElementById("device-settings-port").onchange = function(e){
+    DEVICE.changeActivePort(e.target.value);
+  };
+  document.getElementById('device-settings-pin').onchange = function (e) {
    e.stopPropagation();
-    DEVICE.changeActivePort(e.target.value)
-  }
-  document.getElementById("device-settings-pin").onchange = function(e){
-    e.stopPropagation();
-    if(e.target.checked){
+    if (e.target.checked) {
      VIEW.pinActiveDevice();
-    }else{
+    } else {
      VIEW.unpinActiveDevice();
    }
-  }
+  };

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

-  document.getElementById("device-list").onclick = function(e){
-      e.stopPropagation();
-      var deviceID = e.srcElement.id;
-      if(e.srcElement.id != "device-list"){
-          VIEW.switchDevice(deviceID);
-      }
-  }
+  document.getElementById('refresh-device-button').onclick = function (e) {
+    e.stopPropagation();
+    DEVICE.refreshActive();
+  };

-  document.getElementById("add-device-button").onchange = function(e){
+  document.getElementById('device-list').onclick = function (e) {
+    e.stopPropagation();
+    const deviceID = e.srcElement.id;
+    if (e.srcElement.id != 'device-list') {
+      VIEW.switchDevice(deviceID);
+    }
+  };

-      DEVICE.registerDevice({
+  document.getElementById('add-device-button').onchange = function (e) {
+    DEVICE.registerDevice({
      type: e.target.value,
-      defaultName: "New Device",
+      defaultName: 'New Device',
      port: undefined,
-      addresses: []
+      addresses: [],
    });
    e.target.selectedIndex = 0;

    SAVESLOTS.saveAll();
+  };

-  }
-
-
-
-  document.onkeyup = function(e){
-    switch(e.key){
-      case "ArrowUp":
+  document.onkeyup = function (e) {
+    switch (e.key) {
+      case 'ArrowUp':
        VIEW.selectPreviousDevice();
        break;
-      case "ArrowDown":
+      case 'ArrowDown':
        VIEW.selectNextDevice();
        break;
-      case "Tab":
-        if(document.activeElement.tagName!="INPUT" && document.activeElement.tagName!="SELECT"){
-          document.getElementById("device-settings-name").select();
+      case 'Tab':
+        if (
+          document.activeElement.tagName != 'INPUT' &&
+          document.activeElement.tagName != 'SELECT'
+        ) {
+          document.getElementById('device-settings-name').select();
        }
        break;
    }
-  }
-
+  };

  // document.getElementById("device-settings-delete").onclick = function(e){
  //  e.stopPropagation();
  //  confirm("Are you sure you want to delete device \n\""+VIEW.getActiveDevice().name+"\"?")
  // }

+  document.getElementById('device-list-col').onclick = function (e) {
+    try {
+      document
+        .querySelector('#device-list .active-device')
+        .classList.remove('active-device');
+      ipcRenderer.send('disableDeviceDropdown', '');
+    } catch (err) {
+      // console.log(err)
+    }
+    try {
+      document
+        .getElementsByClassName('active-device-outline')[0]
+        .classList.remove('active-device-outline');
+    } catch (err) {
+      // console.log(err)
+    }

-
-  document.getElementById("device-list-col").onclick = function(e){
-    
-      try{
-          document.querySelector("#device-list .active-device").classList.remove("active-device");
-          ipcRenderer.send("disableDeviceDropdown", "");
-      }catch(err){
-        //console.log(err)
-      }
-      try{
-          document.getElementsByClassName("active-device-outline")[0].classList.remove("active-device-outline");
-      }catch(err){
-        //console.log(err)
-      }
-        
    VIEW.switchDevice();
-  }
+  };
+};

-
-
-  
-
-}
-
-
-
-
-
-
-
-
-
-
-
-ipcRenderer.on("setActiveDevicePinned", function(event, message){
-  if(!message){
+ipcRenderer.on('setActiveDevicePinned', (event, message) => {
+  if (!message) {
    VIEW.unpinActiveDevice();
-  }else{
+  } else {
    VIEW.pinActiveDevice();
  }
 });

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

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

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

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

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

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

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

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

-@font-face {
-    font-family: PlexMono;
-    src: url("media/IBMPlexMono-Text.otf") format("opentype");
+.not-responding {
 }
-
-@font-face {
-    font-family: PlexSans;
-    src: url("media/IBMPlexSans-Light.otf") format("opentype");
+.not-responding em {
+  background-color: #3f3f3f;
+  color: white;
+  padding: 2px 10px;
+  display: inline-block;
+  border-radius: 5px;
 }
@@ -1,274 +1,258 @@
 const { v4: uuid } = require('uuid');
-let osc = require("osc");
-let net = require("net");
-let udp = require('dgram');
-var _ = require('lodash/function');
+const osc = require('osc');
+const net = require('net');
+const udp = require('dgram');
+const { debounce } = require('lodash/function');

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

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

+registerDevice = function (newDevice) {

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

-	console.log(PLUGINS.all)
+  const initElements = document.getElementsByClassName('init');
+  for (let i = 0; i < initElements.length; i++) {
+    initElements[i].style.display = 'none';
+  }

-	if(PLUGINS.all[newDevice.type]==undefined){
-		console.error("Plugin for device "+newDevice.type+" does not exist.");
-		return true;
-	}
+  // 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;
+      }
+    }
+  }

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

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

-	//console.log("Registered new "+newDevice.type)
-
-	var id = newDevice.id || uuid();
-	devices[id] = {
-		id: id,
-		status: "new",
-		type: newDevice.type,
-		displayName: newDevice.displayName,
-		defaultName: newDevice.defaultName,
-		port: newDevice.port,
-		addresses: newDevice.addresses,
-		data: {},
-		pinIndex: false,
-		lastDrawn: 0,
-		lastHeartbeat: 0,
-		heartbeatInterval: PLUGINS.all[newDevice.type].heartbeatInterval,
-		draw: _.debounce(function(){ VIEW.draw(this); }, 30, { leading: true, trailing: true})
-	}
-	
-	VIEW.addDeviceToList(devices[id]);
-	initDeviceConnection(id);
-
-}
+  VIEW.addDeviceToList(devices[id]);
+  initDeviceConnection(id);
+};
 module.exports.registerDevice = registerDevice;

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

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

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

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

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

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

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

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

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

-	}else if(plugins[type].connectionType == "UDPsocket"){
-
-		device.connection = udp.createSocket('udp4');
-
-		device.connection.bind(function(){
-
-			plugins[type].ready(device);
-
-			device.connection.on('message',function(msg,info){
-				plugins[type].data(device, msg);
-				infoUpdate(device, "status", "ok");
-			});
-		});
-
-		device.send = function(data){
-			device.connection.send(data, device.port, device.addresses[0], function(err){
-				//console.log(err);
-			});
-		}
-
-
-	}
-
-}
+    device.send = function (data) {
+      device.connection.send(Buffer.from(data), device.port, device.addresses[0], (err) => {
+        // console.log(err);
+      });
+    };
+  }
+};
 module.exports.initDeviceConnection = initDeviceConnection;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
-  src: local('img/Material Icons'),
-    local('img/MaterialIcons-Regular'),
+  src: local('img/Material Icons'), local('img/MaterialIcons-Regular'),
    url(img/MaterialIcons-Regular.ttf) format('truetype');
 }
 .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
+  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
@@ -1,23 +1,17 @@
-document.onclick = function(e){
-	window.closePopovers();
-}
+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";
+};

-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.closePopovers = function () {
+  // document.getElementById("add-device-popover").style.display = "none";
+};
@@ -0,0 +1,99 @@
+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');
+        }
+      }
+    ]
+  }
+];
@@ -1,38 +1,46 @@
-let fs = require('fs');
-let DEVICE = require("./device.js");
-let VIEW = require("./view.js");
+const fs = require('fs');
+const ejs = require('ejs');
+const DEVICE = require('./device.js');
+const VIEW = require('./view.js');

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

-module.exports.init = function(callback){
+module.exports.init = function (callback) {
+  console.log(`Loading plugin files... ${__dirname}/../plugins`);

-	console.log("Loading plugin files... "+__dirname+"/../plugins")
+  fs.readdir(`${__dirname}/../plugins`, (err, files) => {
+    for (let i in files) {
+      const plugin = files[i];

-	fs.readdir(__dirname+"/../plugins", function(err, files){
-		for(var i in files){
-			var plugin = files[i];
+      if (plugin[0] != '.') {
+        console.log(`${i} ${plugin}`);
+        allPlugins[
+          plugin
+        ] = require(`${__dirname}/../plugins/${plugin}/${plugin}.js`);

+        allPlugins[plugin].deviceInfoUpdate = function (device, param, value) {
+          DEVICE.infoUpdate(device, param, value);
+        };
+        allPlugins[plugin].draw = function (device) {
+          VIEW.draw(device);
+        };

-			if(plugin[0]!="."){
-				console.log(i+" "+plugin);
-				allPlugins[plugin] = require(__dirname+"/../plugins/"+plugin+"/"+plugin+".js");
+        allPlugins[plugin].template = ejs.compile(
+          fs.readFileSync(
+            `${__dirname}/../plugins/${plugin}/${plugin}.html`,
+            'utf8'
+          )
+        );

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

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

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

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

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

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

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

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

-	for(var i=0; i<savedDevices.length; i++){
-		DEVICE.registerDevice({
-			type: savedDevices[i].type,
-			displayName: savedDevices[i].displayName,
-			defaultName: savedDevices[i].defaultName,
-			port: savedDevices[i].port,
-			addresses: savedDevices[i].addresses,
-			id: savedDevices[i].id
-		})
-	}
+  for (let i = 0; i < savedDevices.length; i++) {
+    DEVICE.registerDevice({
+      type: savedDevices[i].type,
+      displayName: savedDevices[i].displayName,
+      defaultName: savedDevices[i].defaultName,
+      port: savedDevices[i].port,
+      addresses: savedDevices[i].addresses,
+      id: savedDevices[i].id,
+    });
+  }
+};

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

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

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

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

+module.exports.reloadActiveSlot = function () {
+  loadSlot(activeSlot);
+};

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

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

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

+// from local-devices library
+function getServers() {
+  const interfaces = os.networkInterfaces();
+  const result = [];

-var searching = false;
-var allServers = false;
+  for (const key in interfaces) {
+    const addresses = interfaces[key];
+    for (let i = addresses.length; i--; ) {
+      const address = addresses[i];
+      if (address.family === 'IPv4' && !address.internal) {
+        const subnet = ip.subnet(address.address, address.netmask);
+        let current = ip.toLong(subnet.firstAddress);
+        const last = ip.toLong(subnet.lastAddress) - 1;
+        while (current++ < last) result.push(ip.fromLong(current));
+      }
+    }
+  }

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

+//  ____              _
+// |  _ \            (_)
+// | |_) | ___  _ __  _  ___  _   _ _ __
+// |  _ < / _ \| '_ \| |/ _ \| | | | '__|
+// | |_) | (_) | | | | | (_) | |_| | |
+// |____/ \___/|_| |_| |\___/ \__,_|_|
+//                  _/ |
+//                 |__/

+newSearchBonjour = function (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]);
+      }
+    }

- //  ____              _                  
- // |  _ \            (_)                 
- // | |_) | ___  _ __  _  ___  _   _ _ __ 
- // |  _ < / _ \| '_ \| |/ _ \| | | | '__|
- // | |_) | (_) | | | | | (_) | |_| | |   
- // |____/ \___/|_| |_| |\___/ \__,_|_|   
- //                  _/ |                 
- //                 |__/                  
-
-newSearchBonjour = function(pluginType, plugin){
-	bonjour.find({type: plugin.searchOptions.bonjourName}, function(e){
-		console.log(pluginType)
-		
-		var validAddresses = [];
-		for(var i in e.addresses){
-			if(e.addresses[i].indexOf(":")==-1){
-				validAddresses.push(e.addresses[i])
-			}
-		}
-		
-		DEVICE.registerDevice({
-			type: pluginType,
-			defaultName: e.name,
-			port: e.port,
-			addresses: validAddresses
-		})
-	});
-}
-
+    DEVICE.registerDevice({
+      type: pluginType,
+      defaultName: e.name,
+      port: e.port,
+      addresses: validAddresses,
+    });
+  });
+};

 // searchBonjour = function(){
 // 	bonjour.find({type: "qlab"}, function(e){
@@ -129,108 +146,79 @@ newSearchBonjour = function(pluginType, plugin){
 // 		})
 // 	});

-
 // }

+//  _______ _____ _____
+// |__   __/ ____|  __ \
+//    | | | |    | |__) |
+//    | | | |    |  ___/
+//    | | | |____| |
+//    |_|  \_____|_|

+newSearchTCP = function (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, () => {
+    client.write(plugin.searchOptions.searchBuffer);
+    // DEVICE.registerDevice({
+    // 	type: pluginType,
+    // 	defaultName: plugin.defaultName,
+    // 	port: plugin.defaultPort,
+    // 	addresses: [ip]
+    // })
+  });
+  client.on('data', (data) => {
+    if (plugin.searchOptions.validateResponse(data)) {
+      DEVICE.registerDevice({
+        type: pluginType,
+        defaultName: plugin.defaultName,
+        port: plugin.defaultPort,
+        addresses: [ip],
+      });
+    }
+    client.end();
+  });
+  client.on('error', (err) => {
+    // no device here
+  });
+};

+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];

-newSearchTCP = function(pluginType, plugin){
-	for(var i=0; i<allServers.length; i++){
-		TCPtest(allServers[i], pluginType, plugin);
-	}
-}
-
-TCPtest = function(ip, pluginType, plugin){
-	var client = net.createConnection(plugin.searchOptions.testPort, ip, function(){
-		client.write(plugin.searchOptions.searchBuffer);
-		// DEVICE.registerDevice({
-		// 	type: pluginType,
-		// 	defaultName: plugin.defaultName,
-		// 	port: plugin.defaultPort,
-		// 	addresses: [ip]
-		// })
-	});
-	client.on('data', (data) => {
-		if(plugin.searchOptions.validateResponse(data)){
-			DEVICE.registerDevice({
-				type: pluginType,
-				defaultName: plugin.defaultName,
-				port: plugin.defaultPort,
-				addresses: [ip]
-			})
-		}
-		client.end();
-	});
-	client.on("error", function(err){
-	 	//no device here
-	});
-} 
-
-
-
-// from local-devices library
-function getServers () {
-  var interfaces = os.networkInterfaces()
-  var result = []
-
-  for (var key in interfaces) {
-    var addresses = interfaces[key]
-    for (var i = addresses.length; i--;) {
-      var address = addresses[i]
-      if (address.family === 'IPv4' && !address.internal) {
-        var subnet = ip.subnet(address.address, address.netmask)
-        var current = ip.toLong(subnet.firstAddress)
-        var last = ip.toLong(subnet.lastAddress) - 1
-        while (current++ < last) result.push(ip.fromLong(current))
+      if (
+        iface.family == 'IPv4' &&
+        iface.internal == false &&
+        iface.address.split('.')[0] != '169'
+      ) {
+        validInterfaces.push(iface);
      }
    }
  }

-  return result;
-}
-
-
-
-findOnlineDevices = function(){
-	var allInterfaces = require('os').networkInterfaces();
-	var validInterfaces = [];
-	for(var i in allInterfaces){
-		for(var j=0; j<allInterfaces[i].length; j++){
-			var iface = allInterfaces[i][j];
-
-			if(iface.family=="IPv4" && iface.internal==false && iface.address.split(".")[0]!="169"){
-				validInterfaces.push(iface);
-			}
-		}
-	}
-
-	for(var i=0; i<validInterfaces.length; i++){
-		var block = new netmask(validInterfaces[i].cidr);
-		var f = block.first.split(".");
-		var l = block.last.split(".");
-		var cur = [f[0], f[1], f[2], f[3]];
-
-		for(var j=Number(f[2]); j<=Number(l[2]); j++){
-			cur[2] = j;
-			for(var k = Number(f[3]); k<Number(l[3]); k++){
-				cur[3] = k;
-				allIPs.push(cur[0]+"."+cur[1]+"."+cur[2]+"."+cur[3]);
-			}
-		}
-	}
-}
-
-
+  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();
@@ -287,57 +275,65 @@ findOnlineDevices = function(){
 // 	});
 // }

+//  _    _ _____  _____
+// | |  | |  __ \|  __ \
+// | |  | | |  | | |__) |
+// | |  | | |  | |  ___/
+// | |__| | |__| | |
+//  \____/|_____/|_|

-
- //  _    _ _____  _____  
- // | |  | |  __ \|  __ \ 
- // | |  | | |  | | |__) |
- // | |  | | |  | |  ___/ 
- // | |__| | |__| | |     
- //  \____/|_____/|_|     
-                       
 const pjLinkMessage = Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]);
 const xAirMessage = Buffer.from([0x2f, 0x78, 0x69, 0x6e, 0x66, 0x6f]);
-var serverUDP = dgram.createSocket('udp4');
-var serverUDP2 = dgram.createSocket('udp4');
+const serverUDP = dgram.createSocket('udp4');
+const serverUDP2 = dgram.createSocket('udp4');

-var searchSockets = [];
-
-
-newSearchUDP = function(pluginType, plugin){
-	var i = searchSockets.push(dgram.createSocket('udp4'))-1;
-	searchSockets[i].bind(plugin.searchOptions.listenPort, function(){
-		searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
-			//console.log(err)
-		});
-		setTimeout(function(){
-			searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
-				//console.log(err)
-			});
-		}, 100);
-		setTimeout(function(){
-			searchSockets[i].send(plugin.searchOptions.searchBuffer, plugin.searchOptions.devicePort, '255.255.255.255', (err) => {
-				//console.log(err)
-			});
-		}, 400);
-
-		searchSockets[i].on('message',function(msg,info){
-			if(plugin.searchOptions.validateResponse(msg, info)){
-				DEVICE.registerDevice({
-					type: pluginType,
-					defaultName: plugin.defaultName,
-					port: plugin.defaultPort,
-					addresses: [info.address]
-				})
-			}
-		});
-
-	});
-	searchSockets[i].on('listening', function(){
-	    searchSockets[i].setBroadcast(true);
-	});
-}
+newSearchUDP = function (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].on('message', (msg, info) => {
+      if (plugin.searchOptions.validateResponse(msg, info)) {
+        DEVICE.registerDevice({
+          type: pluginType,
+          defaultName: plugin.defaultName,
+          port: plugin.defaultPort,
+          addresses: [info.address],
+        });
+      }
+    });
+  });
+  searchSockets[i].on('listening', () => {
+    searchSockets[i].setBroadcast(true);
+  });
+};

 // searchUDP = function(){

@@ -362,7 +358,6 @@ newSearchUDP = function(pluginType, plugin){
 // 	    dgramPJLink.setBroadcast(true);
 // 	});

-
 // 	dgramXAir = dgram.createSocket('udp4');
 // 	dgramXAir.bind(function(){
 // 		dgramXAir.send(xAirMessage, 10024, '255.255.255.255', (err) => {
@@ -389,11 +384,5 @@ newSearchUDP = function(pluginType, plugin){
 // 	dgramXAir.on('listening', function(){
 // 	    dgramXAir.setBroadcast(true);
 // 	});
-	

 // }
-
-
-
-
-
@@ -1,293 +1,319 @@
 const { ipcRenderer } = require('electron');
-let DEVICE = require("./device.js");
-let PLUGINS = require("./plugins.js");
-var _ = require('lodash/function');
+const DEVICE = require('./device.js');
+const PLUGINS = require('./plugins.js');
+// const _ = require('lodash/function');

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

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

+drawDeviceFrame = function (id) {
+  // console.log("DRAW")

-module.exports.init = function(){
-	populatePluginLists();
+  const $deviceDrawArea = document.getElementById(`device-${id}-draw-area`);
+  const $devicePinned = document.getElementById(`device-${id}-pinned`);
+
+  if ($deviceDrawArea == null) {
+    return true;
+  }
+
+  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'>";
+  }
+
+  // scrollbar styles are inline to prevent the styles flickering in
+  str += '<style>';
+  str += '::-webkit-scrollbar {background-color: black;width: 12px;}';
+  str += '::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {background-color: #2b2b2b;}';
+  str +=
+    '::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}';
+  str += '::-webkit-scrollbar-button {display:none;}';
+  str += 'body{visibility: hidden;}';
+  str += '</style>';
+  str += "<link href='src/defaultPlugin.css' rel='stylesheet' type='text/css'>";
+  str += '</head><body>';
+
+  str += generateBodyHTML(d);
+
+  str += '</body></html>';
+
+  $deviceDrawArea.setAttribute('class', `${d.type} draw-area`);
+  $deviceDrawArea.contentWindow.document.open();
+  $deviceDrawArea.contentWindow.document.write(str);
+
+  if (d.pinIndex) {
+    $devicePinned.style.display = 'block';
+  } else {
+    $devicePinned.style.display = 'none';
+  }
+};
+
+generateBodyHTML = function(d){
+  let str = "";
+  if (d.status == 'ok') {
+    try {
+      str += PLUGINS.all[d.type].template({
+        data: d.data,
+        listName: d.displayName || d.defaultName,
+      });
+    } catch (err) {
+      console.log(err);
+      str += '<h3>Plugin Template Error</h3>';
+    }
+  } else {
+    str += '<header><h1>' + (d.displayName || d.defaultName) + '</h1></header>';
+    str += "<div class='not-responding'>";
+    str +=
+      '<h2><em>' +
+      d.type +
+      '</em> is not responding to requests for data.</h2>';
+    str += '<h3>IP <em>' + d.addresses[0] + '</em></h3>';
+    str += '<h3>Port <em>' + d.port + '</em></h3></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'});
+    }
+  }
+  drawCount++;
+  
+};

-drawDeviceInterface = function(id){
+module.exports.addDeviceToList = function (device) {
+  var d = device;
+  var addressStr = d.addresses[0] || '';
+  for (var i = 1; i < d.addresses.length; i++) {
+    addressStr += ', ' + d.addresses[i];
+  }
+  var html = '';
+  if (d.status == 'ok') {
+    html += "<div class='status material-icons green'>done</div>";
+  } else if (d.status == 'refresh') {
+    html += "<div class='status material-icons'>refresh</div>";
+  } else {
+    html += "<div class='status material-icons red'>clear</div>";
+  }
+  html +=
+    "<div class='type'><img height='18px' src='plugins/" +
+    d.type +
+    "/icon.png'></div>";
+  html += "<div class='name'>" + (d.displayName || d.defaultName) + '</div>';

-	// console.log("DRAW")
+  let elem = document.getElementById(d.id);
+  if (elem == null) {
+    document
+      .getElementById('device-list')
+      .insertAdjacentHTML(
+        'beforeend',
+        "<a class='device' id='" + d.id + "'>" + html + '</a>'
+      );
+  } else {
+    elem.innerHTML = html;
+  }
+};
+module.exports.removeDeviceFromList = function (device) {
+  var d = device;
+  document.getElementById(device.id).remove();
+};

-	var $deviceDrawArea = document.getElementById("device-"+id+"-draw-area");
-	var $devicePinned = document.getElementById("device-"+id+"-pinned");
+switchDevice = function (id) {
+  if (activeDevice && activeDevice.pinIndex == false) {
+    document.getElementById('device-' + activeDevice.id).remove();
+    activeDevice = false;
+  }
+  activeDevice = DEVICE.all[id];

-	if($deviceDrawArea==null){
-		return true;
-	}
+  var cols = 1;
+  if (pinnedDevices.length > 0) {
+    cols += pinnedDevices.length;
+  }
+  if (pinnedDevices.indexOf(activeDevice) >= 0 || id == undefined) {
+    cols--;
+  }

-	d = DEVICE.all[id];
+  document.getElementById('all-devices').style.gridTemplateColumns =
+    'repeat(' + cols + ', 1fr)';

-	var str = "<html><head>";
-	if(d.status=="ok"){
-		str+="<link href='./plugins/"+d.type+"/"+d.type+".css' rel='stylesheet' type='text/css'>";
-	}
-	
+  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;
+  }

-	//scrollbar styles are inline to prevent the styles flickering in
-	str+="<style>";
-	str+="::-webkit-scrollbar {background-color: black;width: 12px;}";
-	str+="::-webkit-scrollbar-track {background-color: #2b2b2b;}";
-	str+="::-webkit-scrollbar-thumb {background-color: #6b6b6b;border-radius: 16px;border: 3px solid #2b2b2b;}";
-	str+="::-webkit-scrollbar-button {display:none;}";
-	str+="body{visibility: hidden;}";
-	str+="</style>";
-	str+="<link href='src/defaultPlugin.css' rel='stylesheet' type='text/css'>";
-	str+="</head><body>";
+  var i = DEVICE.all[id].id;

-	if(d.status=="ok"){
-		try{
-			str += PLUGINS.all[d.type].template({data: d.data, listName: d.displayName || d.defaultName});
-		}catch(err){
-			console.log(err)
-			str += "<h3>Plugin Template Error</h3>";
-		}
-	}else{
-		str+="<header><h1>"+(d.displayName || d.defaultName)+"</h1></header>";
-		str+="<div class='not-responding'>";
-		str+="<h2><em>"+d.type+"</em> is not responding to requests for data.</h2>";
-		str+="<h3>IP <em>"+d.addresses[0]+"</em></h3>";
-		str+="<h3>Port <em>"+d.port+"</em></h3></div>";
-	}
-	
-	str+="</body></html>";
+  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);

-		
-	$deviceDrawArea.setAttribute("class", d.type+" draw-area");
-	$deviceDrawArea.contentWindow.document.open();
-	$deviceDrawArea.contentWindow.document.write(str);
+    $deviceWrapper = document.getElementById(`device-${i}`);
+  }

+  switchClass(document.getElementById(id), 'active-device');
+  drawDeviceFrame(id);
+  switchClass(document.getElementById(`device-${id}`), 'active-device-outline');

-	if(d.pinIndex){
-		$devicePinned.style.display = "block";
-	}else{
-		$devicePinned.style.display = "none";
-	}
-}
+  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;

-module.exports.draw = function(device){
-	if(device==undefined){
-		return true;
-	}
-	drawDeviceInterface(device.id)
-}
-
-
-
-
-module.exports.addDeviceToList = function(device){
-	var d = device;
-	var addressStr = d.addresses[0] || "";
-	for(var i=1; i<d.addresses.length; i++){
-		addressStr+=", "+d.addresses[i];
-	}
-	var html = "";
-	if(d.status=="ok"){
-		html += "<div class='status material-icons green'>done</div>";
-	}else if(d.status=="refresh"){
-		html += "<div class='status material-icons'>refresh</div>";
-	}else{
-		html+="<div class='status material-icons red'>clear</div>";
-	}
-	html+="<div class='type'><img height='18px' src='plugins/"+d.type+"/icon.png'></div>";
-	html+="<div class='name'>"+(d.displayName || d.defaultName)+"</div>";
-
-	let elem = document.getElementById(d.id);
-	if(elem==null){
-		document.getElementById("device-list").insertAdjacentHTML("beforeend", "<a class='device' id='"+d.id+"'>"+html+"</a>");
-	}else{
-		elem.innerHTML = html;
-	}
-}
-module.exports.removeDeviceFromList = function(device){
-	var d = device;
-	document.getElementById(device.id).remove();
-}
-
-
-
-switchDevice = function(id){
-
-	if(activeDevice && activeDevice.pinIndex==false){
-		document.getElementById("device-"+activeDevice.id).remove();
-		activeDevice = false;
-	}
-	activeDevice = DEVICE.all[id];
-
-
-	var cols = 1;
-	if(pinnedDevices.length>0){
-		cols+=pinnedDevices.length;
-	}
-	if(pinnedDevices.indexOf(activeDevice)>=0 || id==undefined){
-		cols--;
-	}
-
-	document.getElementById("all-devices").style.gridTemplateColumns = "repeat("+(cols)+", 1fr)";
-
-	if(id==undefined){
-		//document.getElementById('refresh-device-button').style.opacity = 0.2;
-		document.getElementById('refresh-device-button').disabled = true;
-		document.getElementById('device-settings-table').style.display = "none";
-		return true;
-	}else{
-		document.getElementById('refresh-device-button').disabled = false;
-		//document.getElementById('refresh-device-button').style.opacity = 1;
-	}
-
-
-	var i = DEVICE.all[id].id;
-
-	var $deviceWrapper = document.getElementById("device-"+i);
-	if(!$deviceWrapper){
-		var html = '<div class="col device-wrapper" id="device-'+i+'">'
-		+'<img id="device-'+i+'-pinned" class="device-pin" src="src/img/outline_push_pin_white_18dp.png">'
-		+'<iframe id="device-'+i+'-draw-area" class="draw-area"></iframe>'
-		+'<div id="device-'+i+'-settings"></div></div>';
-		document.getElementById("all-devices").insertAdjacentHTML("afterbegin", html);
-
-		$deviceWrapper = document.getElementById("device-"+i);
-	}
-
-    switchClass(document.getElementById(id), "active-device");
-    drawDeviceInterface(id);
-    switchClass(document.getElementById("device-"+id), "active-device-outline");
-
-
-
-    document.getElementById('device-settings-table').style.display = "block";
-    document.getElementById('device-settings-plugin-dropdown').value=activeDevice.type;
-    document.getElementById("device-settings-name").value = activeDevice.displayName || activeDevice.defaultName || "";
-    document.getElementById("device-settings-ip").value = activeDevice.addresses[0] || "";
-    document.getElementById("device-settings-port").value = activeDevice.port || "";
-    document.getElementById("device-settings-pin").checked = activeDevice.pinIndex;
-
-
-    ipcRenderer.send("enableDeviceDropdown", "");
-    ipcRenderer.send("setDevicePin", !DEVICE.all[id].pinIndex==false);
-   
-}
+  ipcRenderer.send('enableDeviceDropdown', '');
+  ipcRenderer.send('setDevicePin', !DEVICE.all[id].pinIndex == false);
+};
 module.exports.switchDevice = switchDevice;

+module.exports.getActiveDevice = function () {
+  return activeDevice;
+};

-module.exports.getActiveDevice = function(){
-	return activeDevice;
-}
+module.exports.pinActiveDevice = function () {
+  if (activeDevice == undefined) {
+    return true;
+  }
+  if (pinnedDevices.indexOf(DEVICE.all[activeDevice.id]) == -1) {
+    pinnedDevices.push(DEVICE.all[activeDevice.id]);
+  }
+  DEVICE.changeActivePinIndex(true);
+};

-module.exports.pinActiveDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	if(pinnedDevices.indexOf(DEVICE.all[activeDevice.id])==-1){
-		pinnedDevices.push(DEVICE.all[activeDevice.id]);
-	}
-	DEVICE.changeActivePinIndex(true);
-}
+module.exports.unpinActiveDevice = function () {
+  if (activeDevice == undefined) {
+    return true;
+  }
+  pinnedDevices.splice(pinnedDevices.indexOf(DEVICE.all[activeDevice.id]), 1);
+  DEVICE.changeActivePinIndex(false);
+};

-module.exports.unpinActiveDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	pinnedDevices.splice(pinnedDevices.indexOf(DEVICE.all[activeDevice.id]), 1);
-	DEVICE.changeActivePinIndex(false);
-}
+module.exports.pinDevice = function (device) {
+  pinnedDevices.push(device);
+  DEVICE.changePinIndex(device, true);
+};
+module.exports.unpinDevice = function (device) {
+  pinnedDevices.push(device);
+  DEVICE.changePinIndex(device, false);
+};

-module.exports.pinDevice = function(device){
-	pinnedDevices.push(device)
-	DEVICE.changePinIndex(device, true);
-}
-module.exports.unpinDevice = function(device){
-	pinnedDevices.push(device)
-	DEVICE.changePinIndex(device, false);
-}
+module.exports.resetPinned = function () {
+  pinnedDevices.length = 0;
+  activeDevice = false;
+  // switchDevice();
+  try {
+    document
+      .querySelector('#device-list .active-device')
+      .classList.remove('active-device');
+  } catch (err) {}
+  document.getElementById('all-devices').innerHTML = '';
+};

-module.exports.resetPinned = function(){
-	pinnedDevices.length = 0;
-	activeDevice = false;
-	//switchDevice();
-	try{
-		document.querySelector("#device-list .active-device").classList.remove("active-device");
-	}catch(err){}
-	document.getElementById("all-devices").innerHTML = "";
-}
+module.exports.getPinnedDevices = function () {
+  return pinnedDevices;
+};

-module.exports.getPinnedDevices = function(){
-	return pinnedDevices;
-}
+module.exports.toggleSlotButtons = function (slotIndex) {
+  if (slotIndex == 1) {
+    document.getElementById('save-slot-1').classList.add('active');
+    document.getElementById('save-slot-2').classList.remove('active');
+    document.getElementById('save-slot-3').classList.remove('active');
+  } else if (slotIndex == 2) {
+    document.getElementById('save-slot-1').classList.remove('active');
+    document.getElementById('save-slot-2').classList.add('active');
+    document.getElementById('save-slot-3').classList.remove('active');
+  } else if (slotIndex == 3) {
+    document.getElementById('save-slot-1').classList.remove('active');
+    document.getElementById('save-slot-2').classList.remove('active');
+    document.getElementById('save-slot-3').classList.add('active');
+  }
+};

+module.exports.selectPreviousDevice = function () {
+  if (activeDevice == undefined) {
+    return true;
+  }
+  var keys = Object.keys(DEVICE.all);
+  var prevIndex = Math.max(0, keys.indexOf(activeDevice.id) - 1);
+  switchDevice(keys[prevIndex]);
+};
+module.exports.selectNextDevice = function () {
+  if (activeDevice == undefined) {
+    return true;
+  }
+  var keys = Object.keys(DEVICE.all);
+  var prevIndex = Math.min(keys.length - 1, keys.indexOf(activeDevice.id) + 1);
+  switchDevice(keys[prevIndex]);
+};

-module.exports.toggleSlotButtons = function(slotIndex){
-	if(slotIndex==1){
-		document.getElementById("save-slot-1").classList.add("active");
-		document.getElementById("save-slot-2").classList.remove("active");
-		document.getElementById("save-slot-3").classList.remove("active");
-	}else if(slotIndex==2){
-		document.getElementById("save-slot-1").classList.remove("active");
-		document.getElementById("save-slot-2").classList.add("active");
-		document.getElementById("save-slot-3").classList.remove("active");
-	}else if(slotIndex==3){
-		document.getElementById("save-slot-1").classList.remove("active");
-		document.getElementById("save-slot-2").classList.remove("active");
-		document.getElementById("save-slot-3").classList.add("active");
-	}
-}
+populatePluginLists = function () {
+  var typeSelect = '';
+  var addSelect = '<option value="" disabled selected hidden>+</option>';

-module.exports.selectPreviousDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	var keys = Object.keys(DEVICE.all);
-	var prevIndex = Math.max(0, keys.indexOf(activeDevice.id)-1);
-	switchDevice(keys[prevIndex])
-}
-module.exports.selectNextDevice = function(){
-	if(activeDevice==undefined){
-		return true;
-	}
-	var keys = Object.keys(DEVICE.all);
-	var prevIndex = Math.min(keys.length-1, keys.indexOf(activeDevice.id)+1);
-	switchDevice(keys[prevIndex])
-}
+  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>';
+  }

-
-populatePluginLists = function(){
-
-	var typeSelect = "";
-	var addSelect = '<option value="" disabled selected hidden>+</option>';
-
-	for(const pluginType in PLUGINS.all){
-		var plugin = PLUGINS.all[pluginType];
-
-		addSelect+="<option value='"+pluginType+"'>"+plugin.defaultName+"</option>";
-		typeSelect+="<option value='"+pluginType+"'>"+plugin.defaultName+"</option>";
-	}
-
-	document.getElementById("device-settings-plugin-dropdown").innerHTML = typeSelect;
-	document.getElementById("add-device-button").innerHTML = addSelect;
-}
+  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);
-	};
-};
+  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);
+  };
+}
Author	SHA1	Message	Date
sparks-alec	d2edcf81fa	style fix for dropdowns on Windows	2022-01-15 16:10:49 -05:00
sparks-alec	127dba77b6	Update package-lock.json	2022-01-15 16:10:34 -05:00
sparks-alec	98e2d0928c	Update .gitignore	2022-01-15 16:10:06 -05:00
sparks-alec	8aa8021272	fix menus to work on all platforms	2022-01-15 16:10:02 -05:00
sparks-alec	b31e0af2b7	switch to electron-builder removing electron-forge	2022-01-15 16:09:34 -05:00
sparks-alec	3100ed53c9	cross-platform icons	2022-01-15 16:08:18 -05:00
sparks-alec	15e419e633	Delete out directory	2022-01-15 15:56:51 -05:00
sparks-alec	7ce39a1e37	Delete .vscode directory	2022-01-15 10:30:21 -05:00
sparks-alec	c2c25125ae	Update .gitignore	2022-01-15 10:30:04 -05:00
sparks-alec	c1e07cde2a	Merge branch 'main' of https://github.com/stagehacks/Cue-View	2022-01-15 10:29:53 -05:00
sparks-alec	9d9c1d1e6f	this is not supposed to be here oops	2022-01-15 10:29:41 -05:00
sparks-alec	91ae8da9a2	fix quotes	2022-01-15 10:23:49 -05:00
sparks-alec	22ad1c3f71	make device header background not transparent looks like butt, honestly	2022-01-15 10:23:39 -05:00
sparks-alec	0744e9e3c4	add scrollbar-corner background color game-changing style fix for about 6 pixels in the corner of very narrow views	2022-01-15 10:22:48 -05:00
sparks-alec	4b83430bb9	Update main.js make pretty on Windows	2022-01-15 10:11:31 -05:00
sparks-alec	dd8e15cadc	new UDPsocket send syntax	2022-01-15 10:11:16 -05:00
sparks-alec	245ae98a4e	fix code block	2022-01-15 10:08:56 -05:00
sparks-alec	cdb9b64af0	first stab at documenting plugins	2022-01-15 10:07:52 -05:00
sparks-alec	cfa47f0064	autoscroll now lives in view.js instead of in the plugin itself	2022-01-15 00:26:42 -05:00
sparks-alec	6be6b8d944	add Cue Carts, finally	2022-01-15 00:25:58 -05:00
sparks-alec	0ba876384a	make device rendering faster!	2022-01-15 00:25:27 -05:00
sparks-alec	f1b4d2a49a	remove unnecessary debug info	2022-01-09 11:27:33 -05:00
sparks-alec	f0e0c1c30e	remove unnecessary debug info	2022-01-09 11:27:23 -05:00
sparks-alec	b3ba244bf7	remove extra quote that broke Eos plugin computers are the worst	2022-01-09 11:27:10 -05:00
sparks-alec	580aa96886	add ignore for .vscode	2022-01-09 11:19:08 -05:00
sparks-alec	ad9a21c2e8	add require for search.js UI search buttons don't work without it!	2022-01-09 11:13:05 -05:00
sparks-alec	27f8f79d6f	Merge branch 'main' of https://github.com/stagehacks/Cue-View	2022-01-09 10:48:44 -05:00
sparks-alec	e394b4cec8	add win32 build	2022-01-09 10:48:40 -05:00
sparks-alec	173f5466ff	add ignore for win32	2022-01-09 10:47:46 -05:00
sparks-alec	1dbd0e1a25	add win32 makers	2022-01-09 10:46:38 -05:00
sparks-alec	711b51829c	Merge pull request #1 from samschloegel/main Add linting and formatting to improve open source contributability	2022-01-09 10:43:46 -05:00
Sam Schloegel	c2fdf0e5c6	Fix missing ejs requirement	2022-01-05 21:35:44 -05:00
Sam Schloegel	0e97bd6abc	Define variables before use	2022-01-05 21:27:38 -05:00
Sam Schloegel	9c16c9c220	Reduce variable scope pollution with const/let	2022-01-05 21:20:35 -05:00
Sam Schloegel	35340b86db	Consolidate requires	2022-01-05 20:25:42 -05:00
Sam Schloegel	221341672a	Remove unused requires	2022-01-05 20:14:44 -05:00
Sam Schloegel	bf2f24f924	Use const for require statements	2022-01-03 15:20:51 -05:00
Sam Schloegel	22be9dbccf	Disable import/extensions rule to match convention	2022-01-03 15:20:00 -05:00
Sam Schloegel	1bbc28f817	Fix global-require next-line exception	2022-01-03 15:18:45 -05:00
Sam Schloegel	d0dc2380ea	eslint fix prefer-arrow-callback errors	2022-01-03 14:48:13 -05:00
Sam Schloegel	83c46db661	eslint fix spaced-comment errors	2022-01-03 14:40:10 -05:00
Sam Schloegel	aec191e178	Change string concats to template literals	2022-01-03 14:31:13 -05:00
Sam Schloegel	c5691b56c9	Initial prettify	2022-01-03 10:51:25 -05:00
Sam Schloegel	551d29da60	Add bracketSameLine for html	2022-01-03 10:42:39 -05:00
Sam Schloegel	a4bff71dbe	Adjust to better match existing conventions	2022-01-03 00:28:11 -05:00
Sam Schloegel	d642c01b8c	Add airbnb to eslint	2022-01-02 23:04:14 -05:00
Sam Schloegel	f9cf6ecc52	Initialize eslint, prettier, format on save	2022-01-02 22:41:15 -05:00
sparks-alec	9a6d8875e8	remove unused font	2021-11-13 17:32:27 -05:00
sparks-alec	65cb11c0cc	remove debug console log	2021-11-13 17:22:39 -05:00
sparks-alec	d2a52f079e	remove unused font link	2021-11-13 17:21:57 -05:00
sparks-alec	949b78ec96	fix issues processing info from XAir	2021-11-13 15:59:52 -05:00
sparks-alec	9255cfcdfe	Update package-lock.json	2021-11-13 15:59:09 -05:00
sparks-alec	329e55ec25	Update README.md	2021-11-03 14:18:01 -04:00