bump version to v1.2.1

Delete devices by null coalesce if never connected

.eslintrc.js

@@ -20,6 +20,6 @@ module.exports = {
     'no-use-before-define': 'off',
     'space-infix-ops': 'warn',
     'no-bitwise': 'off',
-    'no-restricted-globals': 'off'
+    'no-restricted-globals': 'off',
   },
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Let us know what isn't working
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Windows 10]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'

.github/release.yaml

@@ -0,0 +1,14 @@
+changelog:
+  exclude:
+    authors:
+      - dependabot
+  categories:
+    - title: Plugins 🖥️
+      labels:
+        - plugin
+    - title: Interface
+      labels:
+        - interface
+    - title: Other Changes
+      labels:
+        - '*'

.github/workflows/release.yaml

@@ -0,0 +1,44 @@
+name: release
+on:
+  workflow_dispatch:
+
+env:
+  GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+jobs:
+  build-linux:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run release
+  build-windows:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run release
+  build-macos:
+    runs-on: macos-13
+    env:
+      CSC_LINK: ${{ secrets.MACOS_CSC_LINK }}
+      CSC_KEY_PASSWORD: ${{ secrets.MACOS_CSC_KEY_PASSWORD }}
+      APPLE_ID: ${{ secrets.APPLE_ID }}
+      APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+      APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run release

.gitignore

@@ -1,7 +1,3 @@
-
 .DS_Store
 node_modules
-.vscode
 /dist
-package-lock.json
-package-lock.json

.nvmrc

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

.prettierignore

@@ -1,2 +1,4 @@
 node_modules
 out
+dist
+*.ejs

.prettierrc.js

@@ -4,4 +4,5 @@ module.exports = {
   semi: true,
   singleQuote: true,
   bracketSameLine: true,
+  printWidth: 120,
 };

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Electron: Main",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "runtimeArgs": ["--remote-debugging-port=9223", "."],
+      "windows": {
+        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+      }
+    },
+    {
+      "name": "Electron: Renderer",
+      "type": "chrome",
+      "request": "attach",
+      "port": 9223,
+      "webRoot": "${workspaceFolder}",
+      "timeout": 30000
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Electron: All",
+      "configurations": ["Electron: Main", "Electron: Renderer"]
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": ["javascript"],
+  "html.validate.styles": false // accept templates inside HTML style attributes
+}

LICENSE

@@ -0,0 +1,339 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

README.md

@@ -1,8 +1,8 @@
-# Cue View
+# <img width="30" alt="icon" src="https://github.com/stagehacks/Cue-View/assets/919746/b8fb5fa8-de7e-4e1b-9043-47194fb2762d"> Cue View
 
 A dashboard for everything in your show.
 
-![Screen Shot 2021-10-26 at 11 57 21 PM](https://user-images.githubusercontent.com/919746/138997636-dfca293a-7c98-459d-85a3-405c9b11ce8a.png)
+<img width="100%" alt="screenshot" src="https://github.com/stagehacks/Cue-View/assets/919746/dd89a45b-620c-4358-8001-8406bc2c2497">
 
 ## Features
 
@@ -13,75 +13,16 @@ A dashboard for everything in your show.
 
 ## Supported Devices
 
-- QLab 4
+- QLab 4 & 5
 - ETC Eos Consoles
 - Watchout
 - PJLink Projectors
 - X32 Audio Consoles
 - XAir Audio Consoles
-
-#### Future Devices
-
-- Spikemark (not possible until additional OSC methods are added)
+- Art-Net Universes
+- sACN Universes
 - ATEM Video Mixers
-- Art-Net, sACN Universes
-- Epson Pro series Projectors
-- DiGiCo Consoles
-- d&b DS100, amps
-- Hog
-
-
-
-# Plugins
-A Cue View "plugin" is a system for communicating with a type of device, for example QLab or Watchout. It consists of a JS file that describes how to communicate with the device, an HTML template for displaying the device's data, and a CSS file to style the HTML.
-
-### plugin.js
-```js
-exports.defaultName = 'Example Plugin';
-exports.connectionType = 'osc' or 'TCPsocket' or 'UDPsocket'
-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();
-}
-```
+- Shure ULXD Wireless
+- DiGico SD Consoles
+- PosiStageNet
+- Livestream Studio (soon)

index.html

@@ -3,93 +3,84 @@
   <head>
     <meta charset="UTF-8" />
     <title>Cue View</title>
-    <link rel="stylesheet" href="src/index.css" />
+    <link rel="stylesheet" href="src/assets/css/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>
+          <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>
+          <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-inspector">
+          <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/assets/img/outline_search_white_18dp.png" />
+            </button>
+            <button class="left" id="refresh-device-button" title="Refresh Device" disabled>
+              <img src="src/assets/img/outline_refresh_white_18dp.png" />
+            </button>
+            <button class="right" id="network-info-button">
+              <img src="src/assets/img/outline_info_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>
+          <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" title="IP Address of the remote device" />
+                </td>
+              </tr>
+              <tr>
+                <th id="device-settings-port-label" title="'Receive' port on the remote device">Port:</th>
+                <td>
+                  <input
+                    id="device-settings-port"
+                    type="number"
+                    maxlength="5"
+                    title="'Receive' port on the remote device" />
+                </td>
+                <th>Pin:</th>
+                <td><input id="device-settings-pin" type="checkbox" /></td>
+              </tr>
+              <tr id="device-settings-rx-port-row">
+                <th title="'Send' port on the remote device">Local:</th>
+                <td>
+                  <input
+                    id="device-settings-rx-port"
+                    type="number"
+                    maxlength="5"
+                    title="'Send' port on the remote device" />
+                </td>
+                <th></th>
+                <td></td>
+              </tr>
+              <tbody id="device-settings-fields"></tbody>
+            </table>
 
-          <h3>No Device Selected</h3>
+            <h3>No Device Selected</h3>
+          </div>
         </div>
       </div>
 

main.js

@@ -1,9 +1,17 @@
-const { app, BrowserWindow, Menu, ipcMain, nativeTheme } = require('electron');
+const { app, BrowserWindow, Menu, ipcMain, nativeTheme, dialog, shell } = require('electron');
+const { autoUpdater } = require('electron-updater');
 const path = require('path');
+const packageInfo = require('./package.json');
 
 const isMac = process.platform === 'darwin';
+const isWin = process.platform === 'win32';
+const isLinux = process.platform === 'linux';
+
+let autoUpdate = false;
+let manualUpdateCheck = false;
 let menuObj;
 let mainWindow;
+let networkInfoWindow;
 
 const menuTemplate = [
   ...(isMac ? [{ role: 'appMenu' }] : []),
@@ -12,55 +20,72 @@ const menuTemplate = [
     submenu: [
       {
         label: 'Clear Saved Data',
-        id: 'resetViews',
-        click (menuItem, window, event) {
-          mainWindow.webContents.send('resetViews');
-        }
+        id: 'clearSavedData',
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('clearSavedData');
+        },
       },
       {
         label: 'Reload App',
-        role: 'reload'
+        role: 'reload',
       },
       { type: 'separator' },
-      ...(isMac ? [{ role: 'close' }] : [{ role: 'quit' }])
-    ]
+      ...(isMac ? [{ role: 'close' }] : [{ role: 'quit' }]),
+    ],
   },
   { role: 'editMenu' },
   {
     label: 'View',
     submenu: [
       { role: 'togglefullscreen' },
+      {
+        label: 'Toggle Sidebar',
+        id: 'toggleSidebar',
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('toggleSidebar');
+        },
+      },
       { type: 'separator' },
       {
         label: 'Arrangement 1',
         accelerator: 'CommandOrControl+1',
         id: 'window1',
         enabled: true,
-        click (menuItem, window, event) {
-          mainWindow.webContents.send('doSlots1');
-        }
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('loadSlot', 1);
+        },
       },
       {
         label: 'Arrangement 2',
         accelerator: 'CommandOrControl+2',
         id: 'window2',
         enabled: true,
-        click (menuItem, window, event) {
-          mainWindow.webContents.send('doSlots2');
-        }
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('loadSlot', 2);
+        },
       },
       {
         label: 'Arrangement 3',
         accelerator: 'CommandOrControl+3',
         id: 'window3',
         enabled: true,
-        click (menuItem, window, event) {
-          mainWindow.webContents.send('doSlots3');
-        }
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('loadSlot', 3);
+        },
       },
       { type: 'separator' },
-      { role: 'toggleDevTools' }
-    ]
+      {
+        label: 'Network Information...',
+        accelerator: 'CommandOrControl+I',
+        id: 'window4',
+        enabled: true,
+        click(menuItem, window, event) {
+          openNetworkInfoWindow();
+        },
+      },
+      { type: 'separator' },
+      { role: 'toggleDevTools' },
+    ],
   },
   {
     label: 'Device',
@@ -70,9 +95,9 @@ const menuTemplate = [
         accelerator: 'CommandOrControl+F',
         id: 'deviceSearch',
         enabled: true,
-        click (menuItem, window, event) {
-          mainWindow.webContents.send('doSearch');
-        }
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('searchAll');
+        },
       },
       { type: 'separator' },
       {
@@ -82,64 +107,118 @@ const menuTemplate = [
         accelerator: 'CommandOrControl+P',
         id: 'devicePin',
         enabled: false,
-        click (menuItem, window, event) {
-          mainWindow.webContents.send(
-            'setActiveDevicePinned',
-            menuItem.checked
-          );
-        }
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('setActiveDevicePinned', menuItem.checked);
+        },
       },
       {
         label: 'Delete',
         accelerator: 'CommandOrControl+Backspace',
         id: 'deviceDelete',
         enabled: false,
-        click (menuItem, window, event) {
-          mainWindow.webContents.send('doDelete');
-        }
-      }
-    ]
-  }
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('deleteActive');
+        },
+      },
+    ],
+  },
+  {
+    label: 'Help',
+    role: 'help',
+    submenu: [
+      {
+        label: 'About',
+        role: 'about',
+      },
+      {
+        label: 'Check for Updates',
+        click: () => {
+          // set manual update flag
+          manualUpdateCheck = true;
+          autoUpdater.checkForUpdates();
+        },
+      },
+      {
+        label: 'Enable Auto Update',
+        click: () => {
+          mainWindow.webContents.send('setAutoUpdate', !autoUpdate);
+        },
+      },
+    ],
+  },
 ];
 
 const windowMac = {
-  width: 1500,
-    height: 900,
-    titleBarStyle: 'hiddenInset',
-    transparent: true,
-    frame: false,
-    show: false,
-    // backgroundColor: "#333333",
-    vibrancy: 'window',
-    visualEffectState: 'followWindow',
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true,
-      preload: path.join(__dirname, 'preload.js'),
-    },
-}
-
-const windowWin = {
   width: 1500,
   height: 900,
-  backgroundColor: "#333333",
+  titleBarStyle: 'customButtonsOnHover',
+  transparent: false,
+  frame: false,
+  show: false,
+  vibrancy: 'window',
+  visualEffectState: 'followWindow',
   webPreferences: {
     contextIsolation: false,
     nodeIntegration: true,
     preload: path.join(__dirname, 'preload.js'),
   },
+};
+
+const windowWin = {
+  width: 1500,
+  height: 900,
+  backgroundColor: '#333333',
+  webPreferences: {
+    contextIsolation: false,
+    nodeIntegration: true,
+    preload: path.join(__dirname, 'preload.js'),
+  },
+};
+
+const networkInfoMac = {
+  width: 700,
+  height: 350,
+  // transparent: true,
+  frame: true,
+  show: false,
+  vibrancy: 'window',
+  visualEffectState: 'followWindow',
+  webPreferences: {
+    contextIsolation: false,
+    nodeIntegration: true,
+    preload: path.join(__dirname, 'networkInterfaces.js'),
+  },
+};
+
+const networkInfoWin = {
+  width: 700,
+  height: 350,
+  backgroundColor: '#333333',
+  show: false,
+  webPreferences: {
+    contextIsolation: false,
+    nodeIntegration: true,
+    preload: path.join(__dirname, 'networkInterfaces.js'),
+  },
+};
+
+if (isWin) {
+  app.setAppUserModelId(app.name);
 }
 
 const createWindow = () => {
-
   nativeTheme.themeSource = 'dark';
-  
-  if(isMac){
+
+  if (isMac) {
     mainWindow = new BrowserWindow(windowMac);
-  }else{
+  } else {
     mainWindow = new BrowserWindow(windowWin);
   }
 
+  if (isLinux) {
+    mainWindow.setIcon(path.join(__dirname, 'src', 'assets', 'img', 'icon.png'));
+  }
+
   mainWindow.loadFile('index.html');
 
   mainWindow.on('ready-to-show', () => {
@@ -152,12 +231,11 @@ const createWindow = () => {
 
   menuObj = Menu.buildFromTemplate(menuTemplate);
   Menu.setApplicationMenu(menuObj);
-  
 };
 
 app.whenReady().then(() => {
   createWindow();
-  
+
   app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
@@ -188,3 +266,153 @@ ipcMain.on('disableSearchAll', (event, arg) => {
 ipcMain.on('setDevicePin', (event, arg) => {
   menuObj.getMenuItemById('devicePin').checked = arg;
 });
+
+ipcMain.on('openNetworkInfoWindow', (event, arg) => {
+  openNetworkInfoWindow();
+});
+
+function openNetworkInfoWindow() {
+  if (!networkInfoWindow || (networkInfoWindow && networkInfoWindow.isDestroyed())) {
+    if (isMac) {
+      networkInfoWindow = new BrowserWindow(networkInfoMac);
+    } else {
+      networkInfoWindow = new BrowserWindow(networkInfoWin);
+      networkInfoWindow.removeMenu();
+    }
+    networkInfoWindow.loadFile('networkInterfaces.html');
+  }
+  networkInfoWindow.show();
+}
+
+// ONLY Autoupdate logic below
+ipcMain.on('checkForUpdates', (event, arg) => {
+  autoUpdater.checkForUpdates();
+});
+
+ipcMain.on('setAutoUpdate', (event, _autoUpdate) => {
+  autoUpdate = _autoUpdate;
+
+  // update menu item for enabling/disabling auto update
+  menuTemplate[menuTemplate.length - 1].submenu[2].label = autoUpdate ? 'Disable Auto Update' : 'Enable Auto Update';
+  menuObj = Menu.buildFromTemplate(menuTemplate);
+  Menu.setApplicationMenu(menuObj);
+});
+
+// this can be set to true to bypass the download update dialog and skip straight to install prompt
+autoUpdater.autoDownload = false;
+
+autoUpdater.on('update-available', (updateInfo) => {
+  // skip prompting to download if autoDownload is set
+  if (autoUpdater.autoDownload) {
+    return;
+  }
+
+  const msg = `Version v${updateInfo.version} is available.  Would you like to download it?`;
+  const title = 'Update Available';
+
+  let dialogOpts = {};
+
+  if (isMac) {
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Download', 'Cancel', 'View Release Notes'],
+      title: 'Update Available',
+      message: title,
+      detail: msg,
+    };
+  } else {
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Download', 'Cancel', 'View Release Notes'],
+      title: 'Update Available',
+      message: msg,
+    };
+  }
+
+  dialog.showMessageBox(mainWindow, dialogOpts).then((returnValue) => {
+    if (returnValue.response === 0) {
+      // download was clicked
+      autoUpdater.downloadUpdate();
+    } else if (returnValue.response === 2) {
+      // view release notes clicked
+      shell.openExternal(`${packageInfo.repository}/releases/tag/v${updateInfo.version}`);
+    }
+  });
+});
+
+autoUpdater.on('update-downloaded', (event) => {
+  const title = 'Update Downloaded';
+  const msg = `Version v${event.version} has been downloaded. Would you like to install this update now?`;
+
+  let dialogOpts = {};
+
+  if (isMac) {
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Install', 'Later'],
+      title: 'Update Downloaded',
+      message: title,
+      detail: msg,
+    };
+  } else {
+    dialogOpts = {
+      type: 'info',
+      buttons: ['Install', 'Later'],
+      title: 'Update Downloaded',
+      message: msg,
+    };
+  }
+
+  dialog.showMessageBox(mainWindow, dialogOpts).then((returnValue) => {
+    if (returnValue.response === 0) autoUpdater.quitAndInstall();
+  });
+});
+
+autoUpdater.on('update-not-available', (updateInfo) => {
+  if (manualUpdateCheck) {
+    let dialogOpts = {};
+    const msg = `There is no update available at this time. Latest version is v${updateInfo.version}`;
+    if (isMac) {
+      dialogOpts = {
+        type: 'info',
+        buttons: ['Ok'],
+        title: 'No Update Available',
+        message: 'No Update Available',
+        detail: msg,
+      };
+    } else {
+      dialogOpts = {
+        type: 'info',
+        buttons: ['Ok'],
+        title: 'No Update Available',
+        message: msg,
+      };
+    }
+    dialog.showMessageBox(mainWindow, dialogOpts);
+    // revert manual update flag
+    manualUpdateCheck = false;
+  }
+});
+
+autoUpdater.on('error', (error, message) => {
+  let dialogOpts = {};
+
+  if (isMac) {
+    dialogOpts = {
+      type: 'error',
+      buttons: ['Ok'],
+      title: 'Update Error',
+      message: 'Update Error',
+      detail: error.message,
+    };
+  } else {
+    dialogOpts = {
+      type: 'error',
+      buttons: ['Ok'],
+      title: 'Update Error',
+      message: error.message,
+    };
+  }
+
+  dialog.showMessageBox(mainWindow, dialogOpts);
+});

networkInterfaces.html

@@ -0,0 +1,92 @@
+<html>
+  <head>
+    <title>Network Information</title>
+    <style type="text/css">
+      body {
+        margin: 0px;
+        color: white;
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
+        user-select: none;
+        background-color: transparent;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+      }
+      th,
+      td {
+        padding: 12px;
+        padding-left: 10px;
+      }
+      th {
+        text-align: left;
+        background-color: rgba(100, 100, 100, 0.3);
+        border-top: #868686 1px solid;
+        border-bottom: #444 1px solid;
+        border-right: #868686 1px solid;
+        font-weight: normal;
+        height: 36px;
+      }
+      td {
+        border-bottom: dimgray 1px solid;
+      }
+      p {
+        color: #a0a0a0;
+        margin: 17px 13px;
+        font-size: 14px;
+      }
+      button {
+        box-sizing: content-box;
+        height: 25px;
+        border: none;
+        outline: none;
+        padding: 1px 10px;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+
+        color: white;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 4px;
+        font-size: 14px;
+      }
+      button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+      button:focus {
+        outline: none;
+      }
+      span {
+        border-radius: 4px;
+        padding: 2px 4px;
+      }
+      .if-en {
+        background-color: #1565c0;
+      }
+      .if-ut {
+        background-color: #bf360c;
+      }
+      .red {
+        color: #ca6f1e;
+      }
+      .green {
+        color: #28b463;
+      }
+    </style>
+  </head>
+</html>
+<p>Attached Network Interfaces:</p>
+<button onclick="location.reload()">Refresh</button>
+<table>
+  <tr>
+    <th>ID</th>
+    <th>IP Address</th>
+    <th>Subnet Mask</th>
+    <th>Searchable Address Ranges</th>
+  </tr>
+  <tbody id="network-interfaces"></tbody>
+</table>
+
+<script>
+  window.init();
+</script>

networkInterfaces.js

@@ -0,0 +1,31 @@
+const SEARCH = require('./src/search.js');
+
+window.init = function init() {
+  const networkInterfaces = SEARCH.getNetworkInterfaces();
+  let html = '';
+
+  for (let i = 0; i < Object.keys(networkInterfaces).length; i++) {
+    const interfaceID = Object.keys(networkInterfaces)[i];
+    const interfaceObj = networkInterfaces[interfaceID];
+
+    html += `
+      <tr>
+        <td><span class="if-${interfaceID.substring(0, 2)}">${interfaceID}</span></td>
+        <td>${interfaceObj[0].address}</td>
+        <td>${interfaceObj[0].netmask}</td>
+    `;
+
+    if (interfaceObj[0].searchTruncated) {
+      html += `<td class='red'>`;
+    } else {
+      html += `<td class='green'>`;
+    }
+
+    html += `
+      ${interfaceObj[0].firstSearchAddress} - ${interfaceObj[0].lastSearchAddress}</td>
+      </tr>
+    `;
+
+    document.getElementById('network-interfaces').innerHTML = html;
+  }
+};

package.json

@@ -1,52 +1,95 @@
 {
   "name": "cue-view",
   "productName": "Cue View",
-  "version": "0.9.5-pre",
+  "version": "1.2.1",
   "description": "A dashboard for everything in your show",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "pretty": "prettier --write **/*",
     "start": "electron .",
     "build": "electron-builder -m -w -l",
-    "buildARM": "electron-builder -l --arm64"
+    "build:mac": "electron-builder -m",
+    "build:windows": "electron-builder -w",
+    "build:linux": "electron-builder -l",
+    "release": "electron-builder"
   },
   "author": "alec@stagehacks.com",
   "license": "CC BY-SA 4.0",
   "homepage": "https://github.com/stagehacks/Cue-View",
   "repository": "https://github.com/stagehacks/Cue-View",
   "devDependencies": {
-    "electron": "^15.2.0",
-    "eslint": "^8.9.0",
+    "@electron/notarize": "^2.5.0",
+    "electron": "^33.0.2",
+    "electron-builder": "^25.1.8",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.4",
-    "prettier": "^2.5.1"
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "prettier": "^3.3.3"
   },
   "dependencies": {
+    "@jwetzell/posistagenet": "^1.1.0",
+    "atem-connection": "^3.5.0",
     "bonjour": "^3.5.0",
-    "lodash": "^4.17.20",
+    "electron-updater": "^6.3.9",
+    "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "netmask": "^2.0.2",
-    "osc": "^2.4.1",
-    "uuid": "^8.3.2"
+    "osc": "^2.4.5",
+    "uuid": "^11.0.1"
   },
   "build": {
-    "appId": "com.electron.cueview",
-    "icon": "./src/img/",
-    "artifactName": "${productName} ${os} v${version}.${ext}",
+    "appId": "com.stagehacks.cueview",
+    "icon": "src/assets/img/",
+    "artifactName": "${name}.${os}-${arch}.v${version}.${ext}",
+    "npmRebuild": false,
     "mac": {
-      "target": "zip",
       "category": "Utilities",
-      "icon": "./src/img/icon.icns"
+      "icon": "src/assets/img/icon.icns",
+      "hardenedRuntime": true,
+      "electronLanguages": [
+        "en"
+      ],
+      "target": [
+        {
+          "target": "zip",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        }
+      ],
+      "publish": [
+        "github"
+      ]
     },
     "win": {
-      "target": "portable",
-      "icon": "./src/img/icon.ico"
+      "target": "NSIS",
+      "icon": "src/assets/img/icon.ico",
+      "publish": [
+        "github"
+      ]
+    },
+    "nsis": {
+      "oneClick": false
     },
     "linux": {
-      "target": "deb",
+      "target": [
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64",
+            "arm64",
+            "armv7l"
+          ]
+        }
+      ],
       "maintainer": "alec@stagehacks.com",
-      "category": "Utility"
+      "category": "Utility",
+      "publish": [
+        "github"
+      ]
     }
   }
 }

plugins/artnet/info.html

@@ -1,2 +1,2 @@
-<p><em>Art-Net</em> requires no configuration.</p>
-<p>Art-Net™ Designed by and Copyright Artistic Licence Holdings Ltd</p>
+<p>Quit any other applications that use Art-Net before using this plugin.</p>
+<p>Art-Net™ Designed by and Copyright Artistic Licence Holdings Ltd</p>

plugins/artnet/main.js

@@ -1,119 +1,155 @@
-const _ = require('lodash');
-
-exports.defaultName = "Art-Net";
-exports.connectionType = 'UDPsocket';
-exports.heartbeatInterval = 10000;
-exports.searchOptions = {
-  type: 'UDPsocket',
-  searchBuffer: Buffer.from([0x00]),
-  devicePort: 6454,
-  listenPort: 6454,
-  validateResponse (msg, info, devices) {
-    return msg.toString('utf8', 0, 7) === "Art-Net";
-  }
-};
-exports.defaultPort = 6454;
-
-exports.ready = function ready(device) {
-  const d = device;
-  d.data.universes = {};
-  d.data.orderedUniverses = [];
-
+exports.config = {
+  defaultName: 'Art-Net',
+  connectionType: 'UDPsocket',
+  remotePort: 6454,
+  mayChangePorts: false,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 15000,
+  searchOptions: {
+    type: 'UDPsocket',
+    searchBuffer: Buffer.from([0x00]),
+    devicePort: 6454,
+    listenPort: 6454,
+    validateResponse(msg, info, devices) {
+      return msg.toString('utf8', 0, 7) === 'Art-Net';
+    },
+  },
 };
 
-exports.data = function data(device, buf) {
-  if(buf.length < 18){
-    return
-  }
-  const univ = buf.readUInt8(14);
-  const d = device;
-  let u = d.data.universes[univ];
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data.universes = {};
+  device.data.orderedUniverses = [];
+};
 
-  if(!u){
-    d.data.universes[univ] = {};
-    u = d.data.universes[univ];
+exports.data = function data(_device, buf) {
+  const device = _device;
+
+  if (buf.length < 18 || buf.slice(0, 7).toString() !== 'Art-Net') {
+    return;
   }
 
-  u.sequence = buf.readUInt8(12);
-  u.net = buf.readUInt8(15);
-  u.opCode = buf.readUInt8(9);
-  u.version = buf.readUInt16BE(10);
-  u.slots = Array.prototype.slice.call(buf, 18);
-  d.data.ip = d.addresses[0];
-
-  if(!_.includes(d.data.orderedUniverses, univ)){
-    d.data.orderedUniverses.push(univ);
-    d.data.orderedUniverses.sort();
-    u.slotElems = [];
-    u.slotElemsSet = false;
-
-    d.draw();
-    updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+  const opCode = buf.readUInt16BE(8);
 
+  if (opCode === 33) {
+    sendArtPollReply(device);
+    return;
   }
 
-  device.update("universeData", {
-    u: univ,
-    universe: u
+  const universeIndex = buf.readUInt8(14);
+
+  let universe = device.data.universes[universeIndex];
+
+  if (!universe) {
+    device.data.universes[universeIndex] = {};
+    universe = device.data.universes[universeIndex];
+  }
+
+  universe.sequence = buf.readUInt8(12);
+  universe.subnet = buf.readUInt8(15);
+  universe.opCode = buf.readUInt8(9);
+  universe.version = buf.readUInt16BE(10);
+  universe.slots = buf.slice(18);
+  device.data.ip = device.addresses[0];
+
+  if (!device.data.orderedUniverses.includes(universeIndex)) {
+    device.data.orderedUniverses.push(universeIndex);
+    device.data.orderedUniverses.sort();
+    universe.slotElems = [];
+    universe.slotElemsSet = false;
+
+    device.draw();
+    device.update('elementCache');
+  }
+
+  device.update('universeData', {
+    universeIndex,
+    universe,
   });
-
-
 };
 
-
-exports.heartbeat = function heartbeat(device) {
-  
-};
-
-
+exports.heartbeat = function heartbeat(device) {};
 
 let lastUpdate = Date.now();
-exports.update = function update(device, document, updateType, updateData){
-
+exports.update = function update(_device, _document, updateType, updateData) {
+  const device = _device;
   const data = updateData;
-  const doc = document;
+  const document = _document;
 
-  if(updateType === "universeData" && data.universe){
-
-    if(Date.now() - lastUpdate > 1000){
+  if (updateType === 'universeData' && data.universe) {
+    if (Date.now() - lastUpdate > 1000) {
       lastUpdate = Date.now();
-      updateElementsCache(device, device.data.universes, device.data.orderedUniverses);
+      device.update('elementCache');
     }
 
-    const $elem = doc.getElementById(`universe-${data.u}`);
+    const $elem = document.getElementById(`universe-${data.universeIndex}`);
 
-    if($elem && data.universe.slotElemsSet){
-
-      for(let i = 0; i < 512; i++){
-        data.universe.slotElems[i].innerText = data.universe.slots[i];
+    if ($elem && data.universe.slotElemsSet) {
+      for (let i = 0; i < 512; i++) {
+        data.universe.slotElems[i].textContent = data.universe.slots[i];
       }
 
-      doc.getElementById(`universe-${data.u}-sequence`).innerText = data.universe.sequence;
-
-
-    }else{
+      document.getElementById(`universe-${data.universeIndex}-sequence`).textContent = data.universe.sequence;
+    } else {
       device.draw();
-      updateElementsCache(device, device.data.universes, device.data.orderedUniverses);
+      device.update('elementCache');
     }
-
-  }else if(updateType === "elementCache"){
-
-    data.orderedUniverses.forEach(univ => { 
-      for(let i = 0; i < 512; i++){
-        data.universes[univ].slotElems[i] = doc.getElementById(`${univ}-${i}`);
+  } else if (updateType === 'elementCache') {
+    device.data.orderedUniverses.forEach((universeIndex) => {
+      for (let i = 0; i < 512; i++) {
+        device.data.universes[universeIndex].slotElems[i] = document.getElementById(`${universeIndex}-${i}`);
       }
-      data.universes[univ].slotElemsSet = true;
+      device.data.universes[universeIndex].slotElemsSet = true;
     });
-
   }
-  
+};
 
+function sendArtPollReply(device) {
+  // minimum viable Art-Net packet
+  // not to full Art-Net spec
+  // https://art-net.org.uk/how-it-works/discovery-packets/artpollreply/
+
+  const interfaces = device.getNetworkInterfaces();
+
+  for (let i = 0; i < Object.keys(interfaces).length; i++) {
+    const buf = Buffer.alloc(213);
+    buf.write('Art-Net', 0);
+
+    buf.writeInt16LE(0x2100, 8);
+
+    const addr = interfaces[Object.keys(interfaces)[i]][0].address.split('.');
+
+    buf.writeUInt8(addr[0], 10);
+    buf.writeUInt8(addr[1], 11);
+    buf.writeUInt8(addr[2], 12);
+    buf.writeUInt8(addr[3], 13);
+
+    buf.writeInt16LE(6454, 14);
+
+    buf.write('Cue View', 26);
+
+    buf.writeUInt8(4, 173);
+
+    buf.writeUInt8(0xc0, 174);
+    buf.writeUInt8(0xc0, 175);
+    buf.writeUInt8(0xc0, 176);
+    buf.writeUInt8(0xc0, 177);
+
+    buf.writeUInt8(0x80, 178);
+    buf.writeUInt8(0x80, 179);
+    buf.writeUInt8(0x80, 180);
+    buf.writeUInt8(0x80, 181);
+
+    buf.writeUInt8(0x80, 182);
+    buf.writeUInt8(0x80, 183);
+    buf.writeUInt8(0x80, 184);
+    buf.writeUInt8(0x80, 185);
+
+    buf.writeUInt8(0x00, 186);
+    buf.writeUInt8(0x01, 187);
+    buf.writeUInt8(0x02, 188);
+    buf.writeUInt8(0x03, 189);
+
+    device.send(buf);
+  }
 }
-
-function updateElementsCache(device, univ, ordered){
-  device.update("elementCache", {
-    universes: univ,
-    orderedUniverses: ordered
-  });
-}
-

plugins/artnet/template.ejs

@@ -4,23 +4,23 @@
 
 
 <div id="universes">
-<% data.orderedUniverses.forEach(univ => { 
-  let universe = data.universes[univ];
+<% data.orderedUniverses.forEach(universeIndex => { 
+  let universe = data.universes[universeIndex];
 %>
 
-  <table id="universe-<%= univ %>">
+  <table id="universe-<%= universeIndex %>">
   <tr>
     <td class="data" colspan="2">
       Universe
-      <br><em><%= univ %></em>
+      <br><em><%= universeIndex %></em>
     </td>
     <td class="data" colspan="2">
       Sub-Net
-      <br><em><%= universe.net %></em>
+      <br><em><%= universe.subnet %></em>
     </td>
     <td class="data" colspan="2">
       Sequence
-      <br><em id="universe-<%= univ %>-sequence"><%= universe.sequence %></em>
+      <br><em id="universe-<%= universeIndex %>-sequence"><%= universe.sequence %></em>
     </td>
     <td class="data" colspan="2">
       OpCode
@@ -35,7 +35,6 @@
       <br><em><%= data.ip %></em>
     </td>
     <td class="data" colspan="3"></td>
-
   </tr>
 
   <tr>
@@ -51,14 +50,10 @@
       <th><%= row*16+1 %></th>
     <% for(col=0; col<16; col++){ %>
       <% slot++%>
-      <td id="<%= univ %>-<%= row*16+col %>" title="<%= univ %>/<%= slot %>"><%= universe.slots[slot-1] %></td>
+      <td id="<%= universeIndex %>-<%= row*16+col %>" title="<%= universeIndex %>/<%= slot %>"><%= universe.slots[slot-1] %></td>
     <% } %>
     </tr>
   <% } %>
-
-  
 </table>
-
 <% }); %>
-
 </div>

plugins/atem/info.html

@@ -0,0 +1,11 @@
+<h3>ATEM Configuration</h3>
+<ul>
+  <li>Set the IP Address, Subnet Mask, and Gateway of the ATEM using the <em>ATEM Setup utility</em></li>
+  <li>The ATEM must be connected to a computer using a USB cable to change its Network settings</li>
+</ul>
+
+<h3>ATEM Software Download</h3>
+<button href="https://www.blackmagicdesign.com/support/family/atem-live-production-switchers">
+  Blackmagic Support
+</button>
+(Look for <em>ATEM Switchers Update</em>)

plugins/atem/main.js

@@ -0,0 +1,240 @@
+const { TransitionStyle, TransitionSelection } = require('atem-connection/dist/enums');
+
+let timerFrameRate;
+
+exports.config = {
+  defaultName: 'ATEM',
+  connectionType: 'atem',
+  defaultPort: 9910,
+  mayChangePorts: false,
+  searchOptions: {
+    type: 'UDPScan',
+    searchBuffer: Buffer.from([
+      0x10, 0x14, 0x53, 0xab, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3a, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
+      0x00,
+    ]),
+    listenPort: 0,
+    devicePort: 9910,
+    validateResponse(msg, info) {
+      // This is a tad bit hacky but works from what I can see.
+      return Buffer.compare(msg.slice(0, 4), Buffer.from([16, 20, 83, 171])) === 0;
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  console.log('atem ready');
+  const device = _device;
+  device.data = device.connection.state;
+  device.draw();
+
+  // TODO: this is a little hacky but it works? gotta be a way to hook into device.draw() to trigger update
+  setInterval(() => {
+    device.update('inputs', device.data);
+    device.update('fadeToBlack', device.data);
+    device.update(`transitionPosition`, device.data);
+    device.update('downstreamKeyers', device.data);
+    device.update('upstreamKeyers', device.data);
+    device.update('transitionProperties', device.data);
+    device.update('deviceInfo', device.data);
+  }, 1000);
+};
+
+exports.update = function update(device, _document, updateType, data) {
+  const document = _document;
+
+  if (updateType.includes('transitionPosition')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[i];
+      const tbarId = `me-${i}-tbar-div`;
+      const tbarHandleId = `me-${i}-tbar-handle-div`;
+      if (document.getElementById(tbarId)) {
+        document.getElementById(tbarId).style.height = `${mixEffect.transitionPosition.handlePosition / 100}%`;
+      }
+      if (document.getElementById(tbarHandleId)) {
+        document.getElementById(tbarHandleId).style.bottom = `${mixEffect.transitionPosition.handlePosition / 100}%`;
+      }
+      document.getElementById(`me-${i}-transition-rate`).textContent = framesToTime(
+        mixEffect.transitionPosition.remainingFrames
+      );
+
+      if (mixEffect.transitionPosition.inTransition) {
+        document.getElementById(`me-${i}-auto`).classList.add('atem-red');
+      } else {
+        document.getElementById(`me-${i}-auto`).classList.remove('atem-red');
+      }
+    }
+  } else if (updateType.includes('downstreamKeyers')) {
+    for (let i = 0; i < data.video.downstreamKeyers.length; i++) {
+      const dsk = data.video.downstreamKeyers[i];
+      if (dsk.isAuto) {
+        document.getElementById(`dsk-${i}-auto`).classList.add('atem-red');
+      } else {
+        document.getElementById(`dsk-${i}-auto`).classList.remove('atem-red');
+      }
+
+      if (dsk.onAir) {
+        document.getElementById(`dsk-${i}-onair`).classList.add('atem-red');
+      } else {
+        document.getElementById(`dsk-${i}-onair`).classList.remove('atem-red');
+      }
+
+      if (dsk.properties.tie) {
+        document.getElementById(`dsk-${i}-tie`).classList.add('atem-yellow');
+      } else {
+        document.getElementById(`dsk-${i}-tie`).classList.remove('atem-yellow');
+      }
+
+      document.getElementById(`dsk-${i}-rate`).textContent = framesToTime(dsk.remainingFrames);
+    }
+  } else if (updateType.includes('fadeToBlack')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const fadeToBlack = data.video.mixEffects[i].fadeToBlack;
+      const ftbRateId = `me-${i}-ftb-rate`;
+      const ftbId = `me-${i}-ftb`;
+
+      document.getElementById(ftbRateId).textContent = framesToTime(fadeToBlack.remainingFrames);
+
+      if (fadeToBlack.isFullyBlack) {
+        if (document.getElementById(ftbId).classList.contains('atem-red')) {
+          document.getElementById(ftbId).classList.remove('atem-red');
+        } else {
+          document.getElementById(ftbId).classList.add('atem-red');
+        }
+      } else if (fadeToBlack.inTransition) {
+        document.getElementById(ftbId).classList.add('atem-red');
+      } else {
+        document.getElementById(ftbId).classList.remove('atem-red');
+      }
+    }
+  } else if (
+    updateType.includes('programInput') ||
+    updateType.includes('previewInput') ||
+    updateType.includes('inputs')
+  ) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[0];
+      Object.keys(device.data.inputs)
+        .map((key) => Number(key))
+        .forEach((inputId) => {
+          if (mixEffect.programInput === inputId) {
+            document.getElementById(`me-${i}-program-input-${inputId}`).classList.add('atem-red');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-red');
+          } else {
+            document.getElementById(`me-${i}-program-input-${inputId}`).classList.remove('atem-red');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-red');
+          }
+
+          if (mixEffect.previewInput === inputId) {
+            document.getElementById(`me-${i}-preview-input-${inputId}`).classList.add('atem-green');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-green');
+          } else {
+            document.getElementById(`me-${i}-preview-input-${inputId}`).classList.remove('atem-green');
+            document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-green');
+          }
+        });
+    }
+  } else if (updateType.includes('transitionProperties')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const transitionProperties = data.video.mixEffects[i].transitionProperties;
+      Object.keys(TransitionStyle)
+        .filter((key) => !isNaN(Number(key)))
+        .map((key) => Number(key))
+        .forEach((style) => {
+          if (style === transitionProperties.style) {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.remove('atem-yellow');
+          }
+          if (style === transitionProperties.nextStyle) {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-style-${style}`).classList.remove('atem-yellow');
+          }
+        });
+
+      Object.keys(TransitionSelection)
+        .filter((key) => !isNaN(Number(key)))
+        .map((key) => Number(key))
+        .forEach((selection) => {
+          if (transitionProperties.selection.includes(selection)) {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.remove('atem-yellow');
+          }
+
+          if (transitionProperties.nextSelection.includes(selection)) {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.add('atem-yellow');
+          } else {
+            document.getElementById(`me-${i}-transition-selection-${selection}`).classList.remove('atem-yellow');
+          }
+        });
+    }
+  } else if (updateType.includes('upstreamKeyers')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const upstreamKeyers = data.video.mixEffects[i].upstreamKeyers;
+      upstreamKeyers.forEach((upstreamKeyer) => {
+        if (upstreamKeyer.onAir) {
+          document.getElementById(`me-${i}-key-${upstreamKeyer.upstreamKeyerId + 1}-onair`).classList.add('atem-red');
+        } else {
+          document
+            .getElementById(`me-${i}-key-${upstreamKeyer.upstreamKeyerId + 1}-onair`)
+            .classList.remove('atem-red');
+        }
+      });
+    }
+  } else if (updateType.includes('transitionPreview')) {
+    for (let i = 0; i < data.video.mixEffects.length; i++) {
+      const mixEffect = data.video.mixEffects[i];
+      if (mixEffect.transitionPreview) {
+        document.getElementById(`me-${i}-transition-preview`).classList.add('atem-red');
+      } else {
+        document.getElementById(`me-${i}-transition-preview`).classList.remove('atem-red');
+      }
+    }
+  } else if (updateType.includes('deviceInfo')) {
+    // videoModes pulled from https://github.com/nrkno/sofie-atem-connection/blob/master/src/enums/index.ts#L238
+    if ([27, 26, 23, 25, 19, 13, 11, 7, 5].includes(data.settings.videoMode)) {
+      timerFrameRate = 30;
+    } else if ([24, 22, 18, 16, 12, 10, 6, 4].includes(data.settings.videoMode)) {
+      timerFrameRate = 25;
+    } else if ([21, 20, 15, 14, 9, 8].includes(data.settings.videoMode)) {
+      timerFrameRate = 24;
+    } else {
+      timerFrameRate = 30;
+    }
+
+    if (!device.displayName) {
+      this.deviceInfoUpdate(device, 'displayName', data.info.productIdentifier);
+    }
+  } else {
+    console.log('unhandled update');
+    console.log(updateType);
+    console.log(device.data);
+  }
+};
+
+exports.data = function data(_device, msg) {
+  const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');
+  device.data = msg.state;
+
+  msg.pathToChange.forEach((path) => {
+    device.update(path, device.data);
+  });
+};
+
+function framesToTime(total) {
+  if (timerFrameRate) {
+    const seconds = Math.floor(total / timerFrameRate);
+    const frames = total - seconds * timerFrameRate;
+    let framesString = String(frames);
+    if (frames < 10) {
+      framesString = `0${framesString}`;
+    } else if (framesString === '0') {
+      framesString = '00';
+    }
+    return `${seconds}:${framesString}`;
+  }
+  return '0:00';
+}

plugins/atem/styles.css

@@ -0,0 +1,203 @@
+body {
+  background-color: #282828;
+}
+h1 {
+  font-family: 'Open Sans', sans-serif;
+}
+h3 {
+  color: #6d6d6d !important;
+  margin: 30px 0px 10px 9px;
+  font-size: 0.9em;
+  font-weight: 400;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.me-label {
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+.atem-input {
+  width: 52px;
+  height: 52px;
+  background-image: url('img/button_white.png');
+}
+
+.source-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #1f1f1f;
+  border: #1a1a1a 2px solid;
+  border-radius: 8px;
+  max-width: 416px;
+  padding: 12px;
+}
+
+.atem-red {
+  background-image: url('img/button_red.png');
+  box-shadow: 0px 0px 10px 1px #ff0000;
+  z-index: 10000;
+}
+
+.atem-green {
+  background-image: url('img/button_green.png');
+  box-shadow: 0px 0px 10px 1px #06c300;
+  z-index: 10000;
+}
+
+.atem-yellow {
+  background-image: url('img/button_yellow.png');
+  box-shadow: 0px 0px 10px 1px #c7ca00;
+  z-index: 10000;
+}
+
+.atem-disabled {
+  background-image: url('img/button_off.png');
+  color: #3a3a3a;
+}
+
+.atem-gray {
+  color: #575757;
+}
+
+.source-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.transition-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.transition-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-right: 30px;
+}
+
+.tbar-container {
+  display: flex;
+  flex-direction: column-reverse;
+  background-color: #1f1f1f;
+  border: 2px solid;
+  border-color: #1a1a1a;
+  border-radius: 6px;
+  width: 88px;
+  height: 429px;
+  position: relative;
+  margin-top: 58px;
+  margin-right: 60px;
+}
+
+.tbar-bg {
+  position: absolute;
+  background-image: url('img/tbar_bg.png');
+  width: 88px;
+  height: 429px;
+}
+.tbar-handle {
+  position: absolute;
+  background-image: url('img/tbar_handle.png');
+  width: 126px;
+  height: 50px;
+  left: -3px;
+}
+.tbar-div {
+  width: 100%;
+  background-color: #7aff58;
+  overflow: hidden;
+}
+
+.dsk {
+  width: 100%;
+}
+
+.dsk .source-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  width: 100%;
+  padding: 5px;
+}
+
+.dsk h3 {
+  text-align: center;
+}
+
+.fade-to-black-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-right: 30px;
+}
+
+.fade-to-black .source-wrapper {
+  display: flex;
+  width: 100%;
+  padding: 5px;
+}
+
+.fade-to-black h3 {
+  text-align: center;
+}
+.rate-heading {
+  text-align: center;
+  font-size: small;
+  margin-bottom: 4px;
+}
+
+.dsk-rate,
+.ftb-rate,
+.transition-rate {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.dsk-rate-label,
+.ftb-rate-label,
+.transition-rate-label {
+  color: rgb(235, 110, 0);
+  background-color: black;
+  border-radius: 3px;
+  padding: 6px 2px;
+  text-align: center;
+}
+
+.clear {
+  background: transparent;
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.hide {
+  display: none;
+}
+
+.no-wrap {
+  flex-wrap: nowrap;
+}
+
+.show-small {
+  display: none;
+}
+
+@media screen and (min-width: 0px) and (max-width: 480px) {
+  .hide-small {
+    display: none;
+  }
+  .show-small {
+    display: block;
+  }
+}
+
+.float-left {
+  float: left;
+}

plugins/atem/template.ejs

@@ -0,0 +1,189 @@
+<header>
+	<h1><%= listName  %></h1>
+</header>
+
+<% if (data.video.mixEffects) { %>
+<% Object.entries(data.video.mixEffects).forEach(([meIndex, state])=>{ %>
+    <div class="mixeffect_wrapper" id="me-<%= meIndex %>">
+        <h1 class="atem-gray me-label">ME<%= Number(meIndex) + 1 %></h1>
+        <div class="inputs-container show-small">
+            <h3 class="atem-gray">Preview/Program</h3>
+            <div class="source-wrapper">
+                <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
+                    <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
+                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input">
+                            <div class="source-label"><%= input.shortName %></div>
+                        </div>
+                    <% } else {%>
+                        <div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input atem-disabled">
+                            <div class="source-label"><%= input.shortName %></div>
+                        </div>
+                    <% }%>
+                <% }) %>
+            </div>
+        </div>
+        <div class="float-left" style="margin-right: 30px;">
+            <div class="program-container hide-small">
+                <h3 class="atem-gray">Program</h3>
+                <div class="source-wrapper">
+                    <% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
+                        <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
+                            <div id="me-<%= meIndex %>-program-input-<%= input.inputId %>" class="atem-input">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% } else {%>
+                            <div id="me-<%= meIndex %>-program-input-<%= input.inputId %>" class="atem-input atem-disabled">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% }%>
+
+                    <% }) %>
+                </div>
+            </div>
+            <div class="preview hide-small">
+                <h3 class="atem-gray">Preview</h3>
+                <div class="source-wrapper">
+                    <% Object.values(data.inputs).forEach((input)=>{ %>
+                        <% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
+                            <div id="me-<%= meIndex %>-preview-input-<%= input.inputId %>" class="atem-input">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% } else {%>
+                            <div id="me-<%= meIndex %>-preview-input-<%= input.inputId %>" class="atem-input atem-disabled">
+                                <div class="source-label"><%= input.shortName %></div>
+                            </div>
+                        <% }%>
+
+                    <% }) %>
+                </div>
+            </div>
+        </div>
+        <div class="transition-container float-left">
+            <div class="transition-settings">
+                <div class="next-transition">
+                    <h3>Next Transition</h3>
+                    <div class="source-wrapper" style="width: 260px;">
+                            <div class="atem-input clear"></div>
+                            <div id="me-<%= meIndex %>-key-1-onair" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-2-onair" class="atem-input <% if(data.video.downstreamKeyers.length<2){ %> atem-disabled <% } %>">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-3-onair" class="atem-input <% if(data.video.downstreamKeyers.length<3){ %> atem-disabled <% } %>">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+                            <div id="me-<%= meIndex %>-key-4-onair" class="atem-input <% if(data.video.downstreamKeyers.length<4){ %> atem-disabled <% } %>">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>ON</div> <div>AIR</div>
+                                </div>
+                            </div>
+
+                            <div id="me-<%= meIndex %>-transition-selection-1" class="atem-input">
+                                <div class="source-label">BKGD</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-2" class="atem-input">
+                                <div class="source-label">KEY 1</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-4" class="atem-input <% if(data.video.downstreamKeyers.length<2){ %> atem-disabled <% } %>">
+                                <div class="source-label">KEY 2</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-8" class="atem-input <% if(data.video.downstreamKeyers.length<3){ %> atem-disabled <% } %>">
+                                <div class="source-label">KEY 3</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-selection-16" class="atem-input <% if(data.video.downstreamKeyers.length<4){ %> atem-disabled <% } %>">
+                                <div class="source-label">KEY 4</div>
+                            </div>
+                    </div>
+                </div>
+            
+                <div class="transition-style">
+                    <h3>Transition Style</h3>
+                    <div class="source-wrapper" style="width: 260px;">
+                            <div id="me-<%= meIndex %>-transition-style-0" class="atem-input">
+                                <div class="source-label">MIX</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-1" class="atem-input">
+                                <div class="source-label">DIP</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-2" class="atem-input">
+                                <div class="source-label">WIPE</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-4" class="atem-input">
+                                <div class="source-label">STING</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-style-3" class="atem-input">
+                                <div class="source-label">DVE</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-transition-preview" class="atem-input">
+                                <div class="source-label" style="flex-direction: column;">
+                                    <div>PREV</div> <div>TRANS</div>
+                                </div>
+                            </div>
+                            <div class="atem-input clear"></div>
+                            <div id="me-<%= meIndex %>-cut" class="atem-input">
+                                <div class="source-label">CUT</div>
+                            </div>
+                            <div id="me-<%= meIndex %>-auto" class="atem-input">
+                                <div class="source-label">AUTO</div>
+                            </div>
+                            <div class="transition-rate atem-input clear">
+                                <div class="atem-gray rate-heading">Rate</div>
+                                <div id="me-<%= meIndex %>-transition-rate" class="transition-rate-label">&nbsp;&nbsp;</div>
+                            </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tbar-container">
+                <div class="tbar-bg"></div>
+                <div id="me-<%= meIndex %>-tbar-handle-div" class="tbar-handle"></div>
+                <div id="me-<%= meIndex %>-tbar-div" class="tbar-div" ></div>
+            </div>
+            <div class="fade-to-black-container">
+                <% if (data.video.downstreamKeyers) { %>
+                    <% Object.entries(data.video.downstreamKeyers).forEach(([dskIndex, state])=>{ %>
+                        <div class="dsk">
+                            <h3 class="atem-gray">DSK<%= Number(dskIndex) + 1 %></h3>
+                            <div class="source-wrapper">
+                                <div id="dsk-<%= dskIndex %>-tie" class="atem-input">
+                                    <div class="source-label">TIE</div>
+                                </div>
+                                <div class="dsk-rate atem-input clear">
+                                    <div class="atem-gray rate-heading">Rate</div>
+                                    <div id="dsk-<%= dskIndex %>-rate" class="dsk-rate-label">&nbsp;&nbsp;</div>
+                                </div>
+                                <div id="dsk-<%= dskIndex %>-onair" class="atem-input">
+                                    <div class="source-label" style="flex-direction: column;">
+                                        <div>ON</div> <div>AIR</div>
+                                    </div>
+                                </div>
+                                <div id="dsk-<%= dskIndex %>-auto" class="atem-input">
+                                    <div class="source-label">AUTO</div>
+                                </div>
+                            </div>
+                        </div>
+                    <% }) %>
+                <% } %>
+                <div class="fade-to-black">
+                    <h3 class="atem-gray">Fade to Black</h3>
+                    <div class="source-wrapper">
+                        <div class="ftb-rate atem-input clear">
+                            <div class="atem-gray rate-heading">Rate</div>
+                            <div id="me-<%= meIndex %>-ftb-rate" class="ftb-rate-label">&nbsp;&nbsp;</div>
+                        </div>
+                        <div id="me-<%= meIndex %>-ftb" class="atem-input">
+                            <div class="source-label">FTB</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<% }) %>
+<% } %>

plugins/digico/fader.ejs

@@ -0,0 +1,42 @@
+<tr class="fader" id="<%=type%>-<%=index%>">
+    <% if(fader && fader.meter>0){ %>
+        <td class="fader-channel" style="background: linear-gradient(0deg, rgba(68, 255, 68, 0.3) <%=fader.meter%>%, transparent <%=fader.meter%>%);">
+            <%=index%>
+        </td>
+    <% }else{ %>
+        <td class="fader-channel"><%=index%></td>
+    <% } %>
+
+    <% if(type=="Control_Groups"){ %>
+        <td class="fader-name lcd-control-group state-<%= fader ? fader.solo : '' %>">
+            <%= fader ? fader.name : "-" %>
+        </td>
+    <% }else if(type=="Input_Channels"){ %>
+        <td class="fader-name lcd-channel-input state-<%= fader ? fader.solo : '' %>">
+            <%= fader ? (fader.Channel_Input ? fader.Channel_Input.name: "") : "" %>
+        </td>
+    <% }else if(type=="Group_Outputs"){ %>
+        <td class="fader-name lcd-group-output state-<%= fader ? fader.solo : '' %>">
+            <%= fader ? (fader.Buss_Trim ? fader.Buss_Trim.name: "") : "" %>
+        </td>
+    <% }else if(type=="Aux_Outputs"){ %>
+        <td class="fader-name lcd-aux-output state-<%= fader ? fader.solo : '' %>">
+            <%= fader ? (fader.Buss_Trim ? fader.Buss_Trim.name: "") : "" %>
+        </td>
+    <% } %>
+    
+    <td class="fader-mute state-<%= fader ? fader.mute : '-' %>"></td>
+
+    <% if(fader){ %>
+        <% let percent = (fader.fader-10)*1.5+100 %>
+        <td class="fader-fader" style="background: linear-gradient(90deg, rgb(150, 150, 150, 0.2) <%=percent%>%, transparent <%=percent%>%);">
+            <% if(fader.fader>-100){ %>
+                <small style="mix-blend-mode: difference;"><%= fader ? Math.round(fader.fader*10.0)/10.0 : '-' %>db</small>
+            <% } %>
+        </td>
+    <% }else{ %>
+        <td>-</td>
+    <% } %>
+    
+   
+</tr>

plugins/digico/info.html

@@ -0,0 +1,17 @@
+Cue View emulates to be the DiGiCo SD iPad app.
+<ol>
+  <li>On the SD console open <em>Master Screen</em> &rarr; <em>Setup</em> &rarr; <em>External Control</em></li>
+  <li>Enable <em>External Control</em> by pressing the button at the top of the panel</li>
+  <li>Press the <em>add device</em> button and select <em>DiGiCo Pad</em></li>
+  <li>Enter a <em>Device Name</em> for Cue View and then enter the IP Address of this computer</li>
+  <li>Enter Send and Receive Port numbers</li>
+  <ul>
+    <li>Cue View <em>Port</em> = DiGiCo <em>Receive</em></li>
+    <li>Cue View <em>Local</em> = DiGiCo <em>Send</em></li>
+  </ul>
+  <li>Tick the <em>Enable</em> column for this device</li>
+  <li>
+    Press the <em>Load</em> button in the bottom right corner of the panel and select the commands button for the
+    relevant console
+  </li>
+</ol>

plugins/digico/main.js

@@ -0,0 +1,192 @@
+const _ = require('lodash');
+const fs = require('fs');
+const path = require('path');
+
+exports.config = {
+  defaultName: 'DiGiCo SD',
+  connectionType: 'osc-udp',
+  remotePort: 8000,
+  localPort: 8001,
+  mayChangePorts: true,
+  heartbeatInterval: 2000,
+  heartbeatTimeout: 11000,
+  searchOptions: {
+    type: 'UDPsocket',
+    // send "/Console/Name/?" this is what the iPad sends to check connection
+    searchBuffer: Buffer.from([
+      0x2f, 0x43, 0x6f, 0x6e, 0x73, 0x6f, 0x6c, 0x65, 0x2f, 0x4e, 0x61, 0x6d, 0x65, 0x2f, 0x3f, 0x00, 0x2c, 0x00, 0x00,
+      0x00,
+    ]),
+    devicePort: 8000,
+    listenPort: 9000,
+    validateResponse(msg, info) {
+      console.log(msg);
+      console.log(msg.toString());
+      return msg.toString().includes('/Console');
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data = new DiGiCo();
+
+  device.send('/Console/Name/?');
+  device.send('/Console/Session/Filename/?');
+  device.send('/Console/Channels/?');
+  device.send('/Snapshots/Current_Snapshot/?');
+  device.send('/Meters/clear');
+};
+exports.data = function data(_device, oscData) {
+  const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');
+
+  const properties = oscData.address.split('/');
+  properties.shift();
+
+  if (properties[0] !== 'Meters') {
+    setObjectProperty(device.data, properties, oscData.args);
+    // console.log(properties);
+  }
+
+  if (properties[0] === 'Console' && properties[1] === 'Control_Groups') {
+    for (let i = 1; i <= device.data.Console.Control_Groups; i++) {
+      device.send(`/Control_Groups/${i}/?`);
+    }
+    device.draw();
+  } else if (properties[0] === 'Console' && properties[1] === 'Input_Channels') {
+    for (let i = 1; i <= device.data.Console.Input_Channels; i++) {
+      device.send(`/Input_Channels/${i}/Channel_Input/name/?`);
+      device.send(`/Input_Channels/${i}/mute/?`);
+      device.send(`/Input_Channels/${i}/solo/?`);
+      device.send(`/Input_Channels/${i}/fader/?`);
+      device.send(`/Meters/request/1${i}`, [
+        { type: 's', value: `/Input_Channels/${i}/Channel_Input/post_meter/left` },
+      ]);
+    }
+    device.draw();
+  } else if (properties[0] === 'Console' && properties[1] === 'Group_Outputs') {
+    for (let i = 1; i <= device.data.Console.Group_Outputs; i++) {
+      device.send(`/Group_Outputs/${i}/mute/?`);
+      device.send(`/Group_Outputs/${i}/solo/?`);
+      device.send(`/Group_Outputs/${i}/fader/?`);
+      device.send(`/Group_Outputs/${i}/Buss_Trim/name/?`);
+      device.send(`/Meters/request/3${i}`, [{ type: 's', value: `/Group_Outputs/${i}/fader_meter/left` }]);
+    }
+    device.draw();
+  } else if (properties[0] === 'Console' && properties[1] === 'Aux_Outputs') {
+    for (let i = 1; i <= device.data.Console.Aux_Outputs; i++) {
+      device.send(`/Aux_Outputs/${i}/mute/?`);
+      device.send(`/Aux_Outputs/${i}/solo/?`);
+      device.send(`/Aux_Outputs/${i}/fader/?`);
+      device.send(`/Aux_Outputs/${i}/Buss_Trim/name/?`);
+      device.send(`/Meters/request/4${i}`, [{ type: 's', value: `/Aux_Outputs/${i}/fader_meter/left` }]);
+    }
+    device.draw();
+  } else if (properties[0] === 'Console' && properties[1] === 'Name') {
+    this.deviceInfoUpdate(device, 'defaultName', device.data.Console.Name);
+  } else if (['Control_Groups', 'Input_Channels', 'Group_Outputs', 'Aux_Outputs'].includes(properties[0])) {
+    device.update('fader', {
+      type: properties[0],
+      channel: properties[1],
+    });
+  } else if (properties[0] === 'Snapshots') {
+    device.update('updateSnapshot', {
+      snapshots: device.data.Snapshots,
+    });
+  } else if (properties[0] === 'Meters' && properties[1] === 'values') {
+    for (let i = 0; i < oscData.args.length; i += 2) {
+      const channelType = oscData.args[i].toString()[0];
+      const channelNumber = oscData.args[i].toString().substring(1);
+      const meterValue = BigInt(oscData.args[i + 1]) / -40000n + 100n;
+
+      if (channelType === '1' && device.data.Input_Channels[channelNumber]) {
+        device.data.Input_Channels[channelNumber].meter = meterValue;
+        device.update('fader', {
+          type: 'Input_Channels',
+          channel: channelNumber,
+        });
+      } else if (channelType === '3' && device.data.Group_Outputs[channelNumber]) {
+        device.data.Group_Outputs[channelNumber].meter = meterValue;
+        device.update('fader', {
+          type: 'Group_Outputs',
+          channel: channelNumber,
+        });
+      } else if (channelType === '4' && device.data.Aux_Outputs[channelNumber]) {
+        device.data.Aux_Outputs[channelNumber].meter = meterValue;
+        device.update('fader', {
+          type: 'Aux_Outputs',
+          channel: channelNumber,
+        });
+      }
+    }
+  }
+};
+
+exports.heartbeat = function heartbeat(device) {
+  device.send('/Console/Name/?');
+  console.log(device.data);
+
+  // Need to do a /Meters/clear when quitting Cue View or closing the View
+};
+
+class DiGiCo {
+  constructor() {
+    this.Console = {};
+    this.Input_Channels = {};
+    this.Aux_Outputs = {};
+    this.Control_Groups = {};
+    this.Group_Outputs = {};
+    this.Matrix_Outputs = {};
+    this.Layout = {};
+  }
+}
+
+/*
+ This function takes somethings like this /Console/Session/Filename with a osc args like ['session.ses'] 
+ and turns it into a nested object like. An easy way to set properties converting OSC paths to properties
+ {
+    Console: {
+      Session: {
+        Filename: 'session.ses'
+      }
+    }
+ }
+
+*/
+function setObjectProperty(_object, _properties, value) {
+  let object = _object;
+  const properties = _properties;
+
+  for (let i = 0; i < properties.length - 1; i++) {
+    const property = properties[i];
+    if (object[property] === undefined) {
+      object[property] = {};
+    }
+    object = object[property];
+  }
+  const property = properties[properties.length - 1];
+  if (Array.isArray(value)) {
+    // if this is an array of length one just set the property to the contents so ['string'] becomes 'string'
+    if (value.length === 1) {
+      object[property] = value[0];
+      return;
+    }
+  }
+  object[property] = value;
+}
+
+const faderTemplate = _.template(fs.readFileSync(path.join(__dirname, `/fader.ejs`)));
+exports.update = function update(device, doc, updateType, data) {
+  if (updateType === 'fader') {
+    const $elem = doc.getElementById(`${data.type}-${data.channel}`);
+    $elem.outerHTML = faderTemplate({
+      type: data.type,
+      fader: device.data[data.type][data.channel],
+      index: data.channel,
+    });
+  } else if (updateType === 'snapshot') {
+    const $elem = doc.getElementById(`snapshot`);
+    $elem.textContent = `${data.snapshots.Current_Snapshot}`;
+  }
+};

plugins/digico/styles.css

@@ -0,0 +1,76 @@
+.column {
+  float: left;
+  margin: 5px;
+}
+.section {
+  border: #333 3px solid;
+  border-bottom: none;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  padding: 10px;
+  margin-bottom: 30px;
+}
+.section h3 {
+  font-weight: 300;
+  margin-top: 0px;
+  color: #aaa !important;
+}
+table {
+  border-collapse: collapse;
+  display: block;
+}
+.fader:nth-child(even) {
+  background: #1a1a1a;
+}
+.fader:nth-child(odd) {
+  background: #1f1f1f;
+}
+.fader td {
+  text-align: center;
+  width: 30px;
+  height: 20px;
+  border: black 1px solid;
+}
+.fader .fader-channel {
+  color: #777;
+  font-size: 10px;
+}
+.fader .fader-name {
+  width: 80px;
+  color: black;
+  font-family: monospace;
+}
+.fader .lcd-control-group {
+  background-color: rgb(66, 132, 255);
+}
+.fader .lcd-channel-input {
+  background-color: rgb(135, 175, 235);
+}
+.fader .lcd-group-output {
+  background-color: rgb(241, 71, 48);
+}
+.fader .lcd-aux-output {
+  background-color: rgb(197, 0, 187);
+}
+.fader .fader-name.state-1 {
+  background-color: rgb(0, 185, 0);
+}
+.fader .fader-mute {
+  width: 10px;
+  background-color: #444;
+}
+.fader .fader-mute.state-1 {
+  background-color: red;
+}
+.fader .fader-fader {
+  text-align: left;
+  width: 70px;
+  padding: 0px 10px;
+  color: rgb(68, 68, 68);
+}
+
+#snapshot {
+  font-size: 36px;
+  font-weight: bold;
+  font-family: 'Arial Black', 'Impact';
+}

plugins/digico/template.ejs

@@ -0,0 +1,56 @@
+<header>
+  <h1><%= listName %></h1>
+  <h2><%= data.Console.Session.Filename %></h2>
+</header>
+
+<% 
+const fs = require('fs');
+let _ = require('lodash');
+const path = require('path');
+  
+  let faderTemplate = _.template(fs.readFileSync(path.join(__dirname, `/plugins/digico/fader.ejs`)));
+%>
+
+<div class="column">
+  <div class="section">
+    <h3>snapshot <span id="snapshot"></span></h3>
+  </div>
+
+  <div class="section">
+  <h3>control groups</h3>
+  <table>
+    <% for(let i=1; i<=data.Console.Control_Groups; i++){ %>
+      <%= faderTemplate({type: "Control_Groups", fader: data.Control_Groups[i], index: i}) %>
+    <% } %>
+  </table>
+  </div>
+
+  <div class="section">
+  <h3>group outputs</h3>
+  <table>
+    <% for(let i=1; i<=data.Console.Group_Outputs; i++){ %>
+      <%= faderTemplate({type: "Group_Outputs", fader: data.Group_Outputs[i], index: i}) %>
+    <% } %>
+  </table>
+  </div>
+
+  <div class="section">
+    <h3>aux outputs</h3>
+    <table>
+      <% for(let i=1; i<=data.Console.Aux_Outputs; i++){ %>
+        <%= faderTemplate({type: "Aux_Outputs", fader: data.Aux_Outputs[i], index: i}) %>
+      <% } %>
+    </table>
+    </div>
+</div>
+
+<div class="column section">
+  <h3>input channels</h3>
+  <table>
+    <% for(let i=1; i<=data.Console.Input_Channels; i++){ %>
+      <%= faderTemplate({type: "Input_Channels", fader: data.Input_Channels[i], index: i}) %>
+    <% } %>
+  </table>
+</div>
+
+

plugins/eos/cue.ejs

@@ -1,83 +1,80 @@
 <tbody id="<%= q[0].uid %>">
+  <% for(var partNumber in q){ %> 
+	  <% var part = q[partNumber] %> 
+  	<%if(part.scene.length>0 && partNumber==0){ %>
+      <tr>
+        <td></td>
+        <td colspan="12" class="scene">
+        <hr />
+        <span><%= part.scene %></span>
+        </td>
+      </tr>
+	  <% } %> 
 
-<% for(var partNumber in q){ %>
-
-	<% var part = q[partNumber] %>
-
-
-	<% if(part.scene.length>0 && partNumber==0){ %>
-	<tr>
-		<td></td>
-		<td colspan="12" class="scene"><hr><span><%= part.scene %></span></td>
-	</tr>
-	<% } %>
-
-	<% if(isActive){ %>
-	<tr class="active-cue scroll-position">
-<% }else{ %>
-	<tr >
-<% } %>
-
-	<% if(partNumber!=0){ %>
-		<td class="num" style="padding-left: 20px;"><div>P<%= partNumber %></div></td>
-	<% }else{ %>
-		<td class="num"><div><%= cueNumber %></div></td>
-	<% } %>
-
-	<% if(partNumber!=0 || part.partcount==0){ %>
-
-		<!-- Int Up/Int Down -->
-		<% if(part.uptimeduration == part.downtimeduration || part.downtimeduration==-1){ %>
-			<td class="black" colspan="2"><%= prettyDuration(part.uptimedelay) || "" %><%= prettyDuration(part.uptimeduration, true) %></td>
-		<% }else{ %>
-			<td class="black"><%= prettyDuration(part.uptimedelay) || "" %><%= prettyDuration(part.uptimeduration, true) %></td>
-			<td class="black "><%= prettyDuration(part.downtimeduration, true) %></td>
-		<% } %>
-
-		<td class="black hide-medium"><%= prettyDuration(part.focustimeduration, true) %></td>
-		<td class="black hide-medium"><%= prettyDuration(part.colortimeduration, true) %></td>
-		<td class="black hide-medium"><%= prettyDuration(part.beamtimeduration, true) %></td>
-		<td class="hide-small"><%= prettyDuration(part.duration) %></td>
-
-	<% }else{ %>
-		<td class="black" colspan="2"></td>
-		<td class="black hide-medium"></td>
-		<td class="black hide-medium"></td>
-		<td class="black hide-medium"></td>
-		<td class="hide-small"></td>
-
-	<% } %>
-
-	<td class="black hide-small"><%= part.mark %></td>
-	<td class="black hide-small"><%= part.block %></td>
-	<td class="black hide-small"><%= part.assert %></td>
-	<td class="black hide-small">
-		<%= (part.follow>=0)? "F"+prettyDuration(part.follow) : "" %>
-		<%= (part.hang>=0)? "H"+prettyDuration(part.hang) : "" %>
-	</td>
-	<td class="black" style="text-align: left">
-		<%= (partNumber==0 ? "": "&nbsp;&nbsp;&nbsp;") %>
-		<%= part.label %>
-	</td>
-	<td class="black hide-medium"><%= part.extlinks %></td>
-
-</tr>
-
-
-<% } %>
-
-</tbody>
-
-<%
-function prettyDuration(milliseconds, box){
-	if(milliseconds==-1){
-		return "";
-	}
-	var num = Math.round(milliseconds/100)/10;
-	if(box){
-		return "<div class='time'>"+num+"</div>";
-	}
-	return num;
+  	<% if(isActive){ %>
+  		<tr class="active-cue scroll-position">
+	  <% }else{ %>
+      </tr>
+      <tr>
+    <% } %> 
 	
-}
-%>
+	  <% if(partNumber!=0){ %>
+      <td class="num" style="padding-left: 20px">
+        <div>P<%= partNumber %></div>
+      </td>
+    <% }else{ %>
+    	<td class="num"><div><%= cueNumber %></div></td>
+    <% } %> 
+	
+	  <% if(partNumber !== 0 || part.partCount === 0){ %>
+
+      <!-- Int Up/Int Down -->
+      <% if(part.uptimeDuration === part.downtimeDuration || part.downtimeDuration === -1){ %>
+        <td class="black" colspan="2">
+          <%= part.prettyDuration(part.uptimeDelay) || "" %>
+          <%= part.prettyDuration(part.uptimeDuration, true) %>
+        </td>
+      <% }else{ %>
+        <td class="black">
+          <%= part.prettyDuration(part.uptimeDelay) || "" %>
+          <%= part.prettyDuration(part.uptimeDuration, true) %>
+        </td>
+        <td class="black">
+          <%= part.prettyDuration(part.downtimeDuration, true) %>
+        </td>
+      <% } %>
+
+      <td class="black hide-medium">
+        <%= part.prettyDuration(part.focusTimeDuration, true) %>
+      </td>
+      <td class="black hide-medium">
+        <%= part.prettyDuration(part.colorTimeDuration, true) %>
+      </td>
+      <td class="black hide-medium">
+        <%= part.prettyDuration(part.beamTimeDuration, true) %>
+      </td>
+      <td class="hide-small"><%= part.prettyDuration(part.duration) %></td>
+
+    <% }else{ %>
+      <td class="black" colspan="2"></td>
+      <td class="black hide-medium"></td>
+      <td class="black hide-medium"></td>
+      <td class="black hide-medium"></td>
+      <td class="hide-small"></td>
+    <% } %>
+
+    <td class="black hide-small"><%= part.mark %></td>
+    <td class="black hide-small"><%= part.block %></td>
+    <td class="black hide-small"><%= part.assert %></td>
+    <td class="black hide-small">
+      <%= (part.follow>=0)? "F"+part.prettyDuration(part.follow) : "" %> 
+      <%= (part.hang>=0)? "H"+part.prettyDuration(part.hang) : "" %>
+    </td>
+    <td class="black" style="text-align: left">
+      <%= (partNumber==0 ? "": "&nbsp;&nbsp;&nbsp;") %> 
+      <%= part.label %>
+    </td>
+    <td class="black hide-medium"><%= part.extLinks %></td>
+    </tr>
+  <% } %>
+</tbody>

plugins/eos/cue.js

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

plugins/eos/info.html

@@ -1,15 +1,24 @@
-<h2>Connection Requirements</h2>
+<h2>Connection Requirements: Eos 3.2 and newer</h2>
+<h4>Browser: Setup &rarr; Device Settings &rarr; Network</h4>
+<ul>
+  <li>Enable <em>Third Party OSC</em> on the network interface(s) you are using</li>
+  <li>Ensure this Cue View device's port is set to <em>3037</em></li>
+</ul>
 
+<p>&nbsp;</p>
+
+<h2>Connection Requirements: Eos 3.1 and earlier</h2>
 <h4>Shell/ECU &rarr; Network</h4>
 <ul>
-	<li>Enable <em>&#10004; TCP OSC</em>. The TCP format dropdown does not matter.</li>
-	<li>Enable <em>Third Party OSC</em></li>
+  <li>Enable <em>&#10004; TCP OSC</em>. The TCP format should be "TCP Format for OSC 1.1 (SLIP)".</li>
+  <li>Enable <em>Third Party OSC</em></li>
 </ul>
 If the "Third Party OSC" option is not available, Eos must be updated to 3.1 or newer.
 
-<h4>System Settings &rarr; Show Control &rarr; OSC</h4>
+<h4>Browser: System Settings &rarr; Show Control &rarr; OSC</h4>
 <ul>
-	<li>Enable <em>&#10004; OSC RX</em></li>
-	<li>Enable <em>&#10004; OSC TX</em></li>
-	<li>All other fields may be left to defaults or blank.</li>
-</ul>
+  <li>Enable <em>&#10004; OSC RX</em></li>
+  <li>Enable <em>&#10004; OSC TX</em></li>
+  <li>All other fields may be left to defaults or blank.</li>
+  <li>If a custom port is desired specify it in under OSC TCP Server Ports.</li>
+</ul>

plugins/eos/main.js

@@ -1,180 +1,156 @@
 const _ = require('lodash');
 const fs = require('fs');
+const path = require('path');
+const Cue = require('./cue');
 
-exports.defaultName = 'ETC Eos';
-exports.connectionType = 'osc';
-exports.searchOptions = {
-  type: 'TCPport',
-  searchBuffer: Buffer.from(
-    '\xc0/eos/ping\x00\x00\x2c\x00\x00\x00\xc0',
-    'ascii'
-  ),
-  testPort: 3032,
-  validateResponse (msg, info) {
-    return msg.toString().indexOf('/eos/out');
+exports.config = {
+  defaultName: 'ETC Eos',
+  connectionType: 'osc',
+  defaultPort: 3037,
+  mayChangePorts: true,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 6000,
+  searchOptions: {
+    type: 'TCPport',
+    searchBuffer: Buffer.from('\xc0/eos/ping\x00\x00\x2c\x00\x00\x00\xc0', 'ascii'),
+    testPort: 3037,
+    validateResponse(msg, info) {
+      return msg.toString().includes('/eos/out');
+    },
   },
+  fields: [
+    {
+      key: 'cueListFilter',
+      label: 'Q List',
+      type: 'numberinput',
+      value: '',
+      action(_device) {
+        const device = _device;
+        device.data.cueListFilter = device.fields.cueListFilter;
+        device.draw();
+      },
+    },
+  ],
 };
-exports.defaultPort = 3037;
 
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data.EOS = new EOS();
+  device.templates = {
+    cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
+  };
+  device.data.cueListFilter = device.fields.cueListFilter;
 
-exports.ready = function ready(device) {
   device.send('/eos/get/cuelist/count');
   device.send('/eos/get/version');
   device.send('/eos/subscribe', [{ type: 'i', value: 1 }]);
 };
 
-exports.data = function data(device, osc) {
-  const p = osc.address.split('/');
-  const d = device;
-  p.shift();
+exports.data = function data(_device, osc) {
+  const device = _device;
+  this.deviceInfoUpdate(device, 'status', 'ok');
 
-  // console.log(osc.address)
+  const addressParts = osc.address.split('/');
+  addressParts.shift();
 
-  if (match(p, ['eos','out','show','name'])) {
-    d.data.showName = osc.args[0];
-    d.data.cuelists = {};
+  if (match(addressParts, ['eos', 'out', 'show', 'name'])) {
+    device.data.EOS.showName = osc.args[0];
+    device.data.EOS.cueLists = {};
     this.deviceInfoUpdate(device, 'defaultName', osc.args[0]);
-
-
-  } else if (match(p, ['eos','out','get','cuelist','count'])) {
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cuelist', 'count'])) {
     for (let i = 0; i < osc.args[0]; i++) {
-      d.send(`/eos/get/cuelist/index/${i}`);
+      device.send(`/eos/get/cuelist/index/${i}`);
     }
-
-
-  } else if (match(p, ['eos','out','get','cuelist','*','list','*','*'])) {
-    d.data.cuelists[p[4]] = {};
-    d.send(`/eos/get/cue/${p[4]}/count`);
-
-
-  } else if (match(p, ['eos','out','get','cue','*','count'])) {
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cuelist', '*', 'list', '*', '*'])) {
+    device.data.EOS.cueLists[addressParts[4]] = {};
+    device.send(`/eos/get/cue/${addressParts[4]}/count`);
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cue', '*', 'count'])) {
     for (let i = 0; i < osc.args[0]; i++) {
-      device.send(`/eos/get/cue/${p[4]}/index/${i}`);
+      device.send(`/eos/get/cue/${addressParts[4]}/index/${i}`);
     }
-
-
-  } else if (match(p, ['eos','out','get','cue','*','*','*','list','*','*'])) {
-    this.deviceInfoUpdate(device, 'status', 'ok');
-    if (d.data.cuelists[p[4]][p[5]] === undefined) {
-      d.data.cuelists[p[4]][p[5]] = {};
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cue', '*', '*', '*', 'list', '*', '*'])) {
+    if (device.data.EOS.cueLists[addressParts[4]] === undefined) {
+      device.data.EOS.cueLists[addressParts[4]] = {};
+      device.send(`/eos/get/cue/${addressParts[4]}/count`);
     }
-    d.data.cuelists[p[4]][p[5]][p[6]] = {
+    if (device.data.EOS.cueLists[addressParts[4]][addressParts[5]] === undefined) {
+      device.data.EOS.cueLists[addressParts[4]][addressParts[5]] = {};
+    }
+    device.data.EOS.cueLists[addressParts[4]][addressParts[5]][addressParts[6]] = new Cue(osc.args);
+
+    device.update('cueData', {
+      cue: device.data.EOS.cueLists[addressParts[4]][addressParts[5]],
+      cueNumber: addressParts[5],
       uid: osc.args[1],
-      label: osc.args[2],
-      uptimeduration: osc.args[3],
-      uptimedelay: osc.args[4],
-      downtimeduration: osc.args[5],
-      downtimedelay: osc.args[6],
-      focustimeduration: osc.args[7],
-      focustimedelay: osc.args[8],
-      colortimeduration: osc.args[9],
-      colortimedelay: osc.args[10],
-      beamtimeduration: osc.args[11],
-      beamtimedelay: osc.args[12],
-      mark: osc.args[16],
-      block: osc.args[17],
-      assert: osc.args[18],
-      follow: osc.args[20],
-      hang: osc.args[21],
-      partcount: osc.args[26],
-      scene: osc.args[28],
-      duration: Math.max(
-        osc.args[3],
-        osc.args[5],
-        osc.args[7],
-        osc.args[9],
-        osc.args[11]
-      ),
-    };
-
-    device.update("cueData", {
-      cue: device.data.cuelists[p[4]][p[5]],
-      cueNumber: p[5],
-      uid: osc.args[1]
     });
-
-
-  } else if (match(p, ['eos','out','get','cue','*','*'])) {
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cue', '*', '*'])) {
     // There's no OSC notification of the deletion of a part. It just tells you to update the parent cue and remaining children.
     // So: we should fetch all the parts of a cue somehow every time there's an update to a cue.
-    delete d.data.cuelists[p[4]][p[5]];
-    d.draw();
-
-
-  } else if (match(p, ['eos','out','get','cue','*','*','*','actions','list','*','*'])) {
+    delete device.data.EOS.cueLists[addressParts[4]][addressParts[5]];
+    device.draw();
+  } else if (match(addressParts, ['eos', 'out', 'get', 'cue', '*', '*', '*', 'actions', 'list', '*', '*'])) {
     if (osc.args.length === 3) {
-      d.data.cuelists[p[4]][p[5]][0].extlinks = osc.args[2];
+      device.data.EOS.cueLists[addressParts[4]][addressParts[5]][0].extLinks = osc.args[2];
     }
-
-
-  } else if (match(p, ['eos','out','event','cue','*','*','fire'])) {
-    d.data.activeCue = p[5];
-    d.draw();
-    d.update("activeCue", {uid: device.data.cuelists[p[4]][p[5]][0].uid});
-
-
-  } else if (match(p, ['eos','out','notify','cue','*','*','*','*'])) {
-    const cueList = p[4];
+  } else if (match(addressParts, ['eos', 'out', 'event', 'cue', '*', '*', 'fire'])) {
+    device.data.EOS.activeCue = addressParts[5];
+    device.draw();
+    const cues = device.data.EOS.cueLists[addressParts[4]][addressParts[5]];
+    if (cues) {
+      device.update('activeCue', {
+        uid: cues[0].uid,
+      });
+    }
+  } else if (match(addressParts, ['eos', 'out', 'notify', 'cue', '*', '*', '*', '*'])) {
+    const cueList = addressParts[4];
     const cueNumber = osc.args[1];
-
-    d.send(`/eos/get/cue/${cueList}/${cueNumber}`);
-    
-
-  } else if (match(p, ['eos','out','get','version'])) {
-    d.data.version = osc.args[0];
-
-
+    device.send(`/eos/get/cue/${cueList}/${cueNumber}`);
+  } else if (match(addressParts, ['eos', 'out', 'get', 'version'])) {
+    device.data.EOS.version = osc.args[0];
   } else {
     // console.log(osc);
-
   }
-  // console.log(p)
 };
 
-
-const cueTemplate = _.template(fs.readFileSync(`./plugins/eos/cue.ejs`));
-
-exports.update = function update(device, doc, updateType, data){
-
-  if(updateType === "cueData"){
+exports.update = function update(device, doc, updateType, data) {
+  if (updateType === 'cueData') {
     const $elem = doc.getElementById(data.uid);
-
-    if($elem){
-      $elem.outerHTML = cueTemplate({
+    if ($elem) {
+      $elem.outerHTML = device.templates.cue({
         q: data.cue,
         cueNumber: data.cueNumber,
-        isActive: false
+        isActive: false,
       });
-
-    }else{
+    } else {
       device.draw();
-
     }
-
-  }else if(updateType === "activeCue"){
+  } else if (updateType === 'activeCue') {
     const $elem = doc.getElementById(data.uid);
-    $elem.scrollIntoView({behavior: "smooth", block: "center"});
-
+    $elem.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
-
-
-}
-
+};
 
 exports.heartbeat = function heartbeat(device) {
   device.send('/eos/ping');
 };
 
-
-function match(osc, array){
+function match(testArray, patternArray) {
   let out = true;
-  if(osc.length !== array.length){
+  if (testArray.length !== patternArray.length) {
     return false;
   }
-  array.forEach((m, i)=> {
-    if(osc[i] !== m && m !== "*"){
+  patternArray.forEach((patternPart, i) => {
+    if (testArray[i] !== patternPart && patternPart !== '*') {
       out = false;
     }
   });
   return out;
-}
+}
+class EOS {
+  constructor() {
+    this.version = '';
+    this.showName = '';
+    this.cueLists = {};
+    this.activeCue = undefined;
+  }
+}

plugins/eos/styles.css

@@ -3,6 +3,7 @@ table {
   border: #404040 1px solid;
   border-radius: 4px;
   color: #a59baa;
+  width: 100%;
 }
 th {
   font-size: 14px;
@@ -62,6 +63,16 @@ tr.active-cue .time {
   border-color: #c78b07;
 }
 
+.list_name {
+  color: lightgray;
+  margin-left: 5px;
+  margin-bottom: 2px;
+}
+
+.list_container {
+  margin-bottom: 10px;
+}
+
 @media screen and (min-width: 0px) and (max-width: 750px) {
   .hide-medium {
     display: none;

plugins/eos/template.ejs

@@ -1,46 +1,44 @@
 <header>
 	<h1><%= listName  %></h1>
-	<h2>Eos <%= data.version  %></h2>
+	<h2>Eos <%= data.EOS.version  %></h2>
 </header>
 
-<%
-  const fs = require('fs');
-  let cueTemplate = _.template(fs.readFileSync(`./plugins/eos/cue.ejs`));
-%>
+<% for(var i in data.EOS.cueLists){ %>
+	<% if(data.cueListFilter == i || data.cueListFilter.length==0){ %>
+	<div class="list_container">
+		<div class="list_name">List <%= i %></div>
+		<table cellspacing="0">
+			<tr>
+				<th width="70px">Cue</th>
+				<th width="30px">Int Up</th>
+				<th width="30px">Int Down</th>
+				<th width="40px" class="hide-medium">Focus</th>
+				<th width="40px" class="hide-medium">Color</th>
+				<th width="40px" class="hide-medium">Beam</th>
+				<th width="40px" class="hide-small">Dur</th>
+				<th width="20px" class="hide-small">M</th>
+				<th width="20px" class="hide-small">B</th>
+				<th width="20px" class="hide-small">A</th>
+				<th width="70px" class="hide-small">Fw/Hg</th>
+				<th width="150px">Label</th>
+				<th width="10px" class="hide-medium">Ext Links</th>
+			</tr>
 
+			<% var cues = Object.keys(data.EOS.cueLists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
 
-<% for(var i in data.cuelists){ %>
-	<strong>List <%= i %></strong>
-	<table cellspacing="0">
-		<tr>
-			<th width="70px">Cue</th>
-			<th width="30px">Int Up</th>
-			<th width="30px">Int Down</th>
-			<th width="40px" class="hide-medium">Focus</th>
-			<th width="40px" class="hide-medium">Color</th>
-			<th width="40px" class="hide-medium">Beam</th>
-			<th width="40px" class="hide-small">Dur</th>
-			<th width="20px" class="hide-small">M</th>
-			<th width="20px" class="hide-small">B</th>
-			<th width="20px" class="hide-small">A</th>
-			<th width="70px" class="hide-small">Fw/Hg</th>
-			<th width="150px">Label</th>
-			<th width="10px" class="hide-medium">Ext Links</th>
-		</tr>
+			<% for(var j=0; j<cues.length; j++){ %>
+				<% var q = data.EOS.cueLists[i][cues[j]] %>
+				
+				<%= templates.cue({
+					q: q,
+					cues: cues,
+					cueNumber: cues[j],
+					isActive: (cues[j]==data.EOS.activeCue+"")
+				}) %>
 
-		<% var cues = Object.keys(data.cuelists[i]).sort(function(a, b){return Number(a)-Number(b)}) %>
-
-		<% for(var j=0; j<cues.length; j++){ %>
-			<% var q = data.cuelists[i][cues[j]] %>
-			
-			<%= cueTemplate({
-				q: q,
-				cues: cues,
-				cueNumber: cues[j],
-				isActive: (cues[j]==data.activeCue+"")
-			}) %>
-
-		<% } %>
-	</table>
+			<% } %>
+		</table>
+	</div>
+	<% } %>
 
 <% } %>

plugins/lightfactory/main.js

@@ -0,0 +1,136 @@
+exports.config = {
+  defaultName: 'LightFactory',
+  connectionType: 'TCPsocket',
+  remotePort: 3100,
+  mayChangePorts: true,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 10000,
+  searchOptions: {
+    type: 'TCPport',
+    searchBuffer: Buffer.from('\n', 'ascii'),
+    testPort: 3100,
+    validateResponse(msg, info) {
+      return msg.toString().includes('LightFactory');
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data.cueLists = {};
+  device.send('get cue list\n');
+};
+
+function cleanMessage(message) {
+  return message.split('\n').filter((line) => line.trim() !== '');
+}
+
+// TODO(jwetzell): try to grab notes?
+exports.data = function data(_device, _message) {
+  const message = _message.toString();
+  const device = _device;
+
+  if (message.includes('Current Cue List')) {
+    // NOTE(jwetzell): loading cue list info
+    const cueListMessage = cleanMessage(message);
+    if (cueListMessage.includes('<LIST START>') && cueListMessage.includes('<LIST FINISHED>')) {
+      const cueListstartIndex = cueListMessage.indexOf('<LIST START>');
+      const cueListFinishedIndex = cueListMessage.indexOf('<LIST FINISHED>');
+
+      for (let i = cueListstartIndex + 1; i < cueListFinishedIndex; i++) {
+        const cueListName = cueListMessage[i];
+        if (device.data.cueLists[cueListName] === undefined) {
+          device.data.cueLists[cueListName] = {
+            name: cueListName,
+            cues: {},
+            active: false,
+          };
+        } else {
+          // NOTE(jwetzell): reset active as it will be computed in a few lines
+          device.data.cueLists[cueListName].active = false;
+        }
+      }
+      const activeCueListLine = cueListMessage[cueListFinishedIndex + 1];
+      if (activeCueListLine) {
+        const activeCueListLineParts = activeCueListLine.split('Current Cue List');
+        const activeCueList = activeCueListLineParts[activeCueListLineParts.length - 1].trim();
+        if (activeCueList && device.data.cueLists[activeCueList] !== undefined) {
+          device.data.cueLists[activeCueList].active = true;
+        }
+      }
+      device.data.cueListToLoad = Object.keys(device.data.cueLists)[0];
+      device.send(`get cues ${device.data.cueListToLoad}\n`);
+    }
+  } else if (message.includes('Current Live Cue')) {
+    // NOTE(jwetzell): loading cues for a cue list
+    const cueList = device.data.cueLists[device.data.cueListToLoad];
+    const cueListCuesMessage = cleanMessage(message);
+
+    // NOTE(jwetzell): this is so gross
+    if (cueListCuesMessage.includes('<LIST START>') && cueListCuesMessage.includes('<LIST FINISHED>')) {
+      const cuesStartIndex = cueListCuesMessage.indexOf('<LIST START>');
+      const cuesFinishedIndex = cueListCuesMessage.indexOf('<LIST FINISHED>');
+
+      const validCueNumbers = [];
+      for (let i = cuesStartIndex + 1; i < cuesFinishedIndex; i++) {
+        const cueData = cueListCuesMessage[i];
+        const cueSplit = cueData.indexOf(' ');
+        const cueNumber = cueSplit > 0 ? cueData.substring(0, cueSplit).trim() : cueData.trim();
+        const cueName = cueSplit > 0 ? cueData.substring(cueSplit + 1).trim() : '';
+        cueList.cues[cueNumber] = {
+          name: cueName,
+          number: cueNumber,
+          active: false,
+        };
+        validCueNumbers.push(cueNumber);
+      }
+
+      const invalidCueNumbers = Object.keys(cueList.cues).filter((cueNumber) => !validCueNumbers.includes(cueNumber));
+
+      invalidCueNumbers.forEach((cueNumber) => {
+        delete cueList.cues[cueNumber];
+      });
+
+      const activeCueLine = cueListCuesMessage[cuesFinishedIndex + 1];
+      if (activeCueLine) {
+        const activeCueLineParts = activeCueLine.split('Current Live Cue');
+        const activeCue = activeCueLineParts[activeCueLineParts.length - 1].trim();
+        if (activeCue && cueList.cues[activeCue] !== undefined) {
+          cueList.cues[activeCue].active = true;
+        }
+      }
+    }
+    // NOTE(jwetzell): load next cue list's cues if there is one
+    const cueListNames = Object.keys(device.data.cueLists);
+    const cueListIndex = cueListNames.indexOf(device.data.cueListToLoad);
+    device.data.cueListToLoad = cueListNames.at(cueListIndex + 1);
+    if (device.data.cueListToLoad !== undefined) {
+      device.send(`get cues ${device.data.cueListToLoad}\n`);
+    }
+  } else if (message.includes('Running cue') || message.includes('Goto cue')) {
+    const cueUpdateMessage = message
+      .trim()
+      .slice(0, -1)
+      .split(':')
+      .map((item) => item.trim());
+    if (cueUpdateMessage.length === 3) {
+      const cueListName = cueUpdateMessage[1];
+      const updatedCue = cueUpdateMessage[2];
+
+      const split = updatedCue.indexOf(' ');
+
+      const updatedCueNumber = split > 0 ? updatedCue.substring(0, split).trim() : updatedCue.trim();
+      if (device.data.cueLists[cueListName] !== undefined) {
+        Object.entries(device.data.cueLists[cueListName].cues).forEach(([cueName, cueData]) => {
+          cueData.active = cueData.number === updatedCueNumber;
+        });
+      }
+    }
+  }
+  device.draw();
+};
+
+// TODO(jwetzell): keep alive? refresh cue list info?
+exports.heartbeat = function heartbeat(device) {
+  device.send('get cue list\n');
+};

plugins/lightfactory/styles.css

@@ -0,0 +1,52 @@
+section {
+  background-color: #363636;
+  border: gray 1px solid;
+  padding: 2px;
+  padding-top: 0px;
+  overflow: hidden;
+  font-size: 8px;
+  margin-bottom: 10px;
+  width: 300px;
+}
+table {
+  border: #414142 1px solid;
+  background-color: #272727;
+  width: 100%;
+}
+table,
+th,
+td {
+  border-collapse: collapse;
+  color: #ccc;
+  font-size: 12px;
+}
+th {
+  padding: 2px 10px;
+  border: #282828 1px solid;
+  background: linear-gradient(#404040, #363636);
+  text-align: left;
+}
+td {
+  text-align: left;
+  padding: 7px 7px;
+  font-family: sans-serif;
+  position: relative;
+}
+tr {
+  border-bottom: #363636 1px solid;
+}
+tr:nth-child(odd) {
+  background-color: #2a2a2a;
+}
+tr:nth-child(even) {
+  background-color: #202020;
+}
+
+.active_indicator {
+  color: #00ff00;
+  font-size: 13px;
+  position: absolute;
+  top: 4px;
+  left: -4px;
+  transform: rotate(-45deg);
+}

plugins/lightfactory/template.ejs

@@ -0,0 +1,35 @@
+<header>
+	<h1><%= listName %></h1>
+</header>
+
+<div>
+	<!-- Server Loop -->
+	<% Object.entries(data.cueLists).forEach(([cueListName,cueListData]) => { %>
+	
+	<section>
+		<h2>Cue List: <%= cueListData.name %> <%= cueListData.active ? '(Active)': '' %></h2>
+
+		<table>
+			<tr>
+				<th width="10px" style="padding: 0px;"></th>
+				<th width="50px">Cue No</th>
+				<th>Description</th>
+
+			</tr>
+			<!-- Tracker Loop -->
+			<% Object.entries(cueListData.cues).forEach(([cueName,cueData]) => { %>
+
+			<tr>
+				<td style="padding: 0px;"><span class="active_indicator"><%= cueData.active ? '&#9698;': '' %></span></td>
+				<td><%= cueData.number %></td>
+				<td><%= cueData.name %> </td>
+			</tr>
+
+			<% }); %>
+		</table>
+	</section>
+
+	<% 
+    }); 
+  	%>
+</div>

plugins/livestream-studio/info.html

@@ -0,0 +1,5 @@
+<h3>Livestream Studio Configuration</h3>
+<ul>
+  <li>enable Third-party Controllers under Settings->Hardware Control->Allow Incoming Connections</li>
+  <li>allow the connection from Cue View the first time it connects under the same settings menu</li>
+</ul>

plugins/livestream-studio/main.js

@@ -0,0 +1,147 @@
+exports.config = {
+  defaultName: 'Livestream Studio',
+  connectionType: 'TCPsocket',
+  remotePort: 9923,
+  mayChangePort: false,
+  searchOptions: {
+    type: 'TCPport',
+    searchBuffer: Buffer.from(''),
+    testPort: 9923,
+    validateResponse(msg, info) {
+      return msg.toString().startsWith('ILCC:');
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  console.log('livestream studio ready');
+  const device = _device;
+  device.draw();
+
+  setInterval(() => {
+    device.update('inputs', device.data);
+    device.update('fadeToBlack', device.data);
+  }, 1000);
+};
+
+exports.update = function update(device, _document, updateType, data) {
+  const document = _document;
+  if (updateType === 'programInput' || updateType === 'previewInput' || updateType === 'inputs') {
+    device.data.inputs.forEach((input) => {
+      if (device.data.program === input.number) {
+        document.getElementById(`input-${input.number}`).classList.add('lss-red');
+      } else {
+        document.getElementById(`input-${input.number}`).classList.remove('lss-red');
+      }
+
+      if (device.data.preview === input.number) {
+        document.getElementById(`input-${input.number}`).classList.add('lss-green');
+      } else {
+        document.getElementById(`input-${input.number}`).classList.remove('lss-green');
+      }
+    });
+  } else if (updateType === 'fadeToBlack') {
+    const ftbId = 'ftb';
+
+    if (device.data.fadeToBlack) {
+      document.getElementById(ftbId).classList.add('lss-ftb-glow');
+    } else {
+      document.getElementById(ftbId).classList.remove('lss-ftb-glow');
+    }
+  } else if (updateType === 'tbar') {
+    const tbarId = `tbar-div`;
+    const tbarHandleId = `tbar-handle-div`;
+    if (document.getElementById(tbarId)) {
+      document.getElementById(tbarId).style.height = `${device.data.tBar.percent * 1.4 + 10}px`;
+    }
+    if (document.getElementById(tbarHandleId)) {
+      document.getElementById(tbarHandleId).style.bottom = `${device.data.tBar.percent * 1.4 + 10}px`;
+    }
+
+    if (device.data.tBar.status === 'Automatic') {
+      document.getElementById(`auto`).classList.add('lss-red');
+    } else {
+      document.getElementById(`auto`).classList.remove('lss-red');
+    }
+  } else if (updateType === 'cut') {
+    document.getElementById('cut').classList.add('lss-red');
+    setTimeout(() => {
+      document.getElementById('cut').classList.remove('lss-red');
+    }, 250);
+  }
+};
+
+exports.data = function data(_device, msg) {
+  const device = _device;
+
+  this.deviceInfoUpdate(device, 'status', 'ok');
+
+  const packets = msg.toString().split('\n');
+
+  packets.forEach((packet) => {
+    const packetParts = packet.split(':');
+    const packetType = packetParts[0];
+    if (packetType === 'ILC') {
+      if (device.data.inputs === undefined) {
+        device.data.inputs = [];
+      }
+      device.data.inputs[packetParts[1]] = {
+        number: Number.parseInt(packetParts[1], 10) + 1,
+        name: packetParts[2].replaceAll('"', ''),
+        audio: {
+          level: parseFloat(packetParts[3]) / 1000,
+          gain: parseFloat(packetParts[4]) / 1000,
+          mute: packetParts[5] === '1',
+          solo: packetParts[6] === '1',
+          programLock: packetParts[7] === '1',
+        },
+        type: packetParts[8],
+      };
+      device.draw();
+      device.update('inputs', device.data);
+    } else if (packetType === 'ILCC') {
+      if (device.data.inputCount !== undefined) {
+        device.data.inputs = [];
+      }
+      device.data.inputCount = Number.parseInt(packetParts[1], 10);
+    } else if (packetType === 'PmIS') {
+      device.data.program = Number.parseInt(packetParts[1], 10) + 1;
+      device.update('programInput', device.data);
+    } else if (packetType === 'PwIS') {
+      device.data.preview = Number.parseInt(packetParts[1], 10) + 1;
+      device.update('previewInput', device.data);
+    } else if (packetType === 'Cut') {
+      [device.data.preview, device.data.program] = [device.data.program, device.data.preview];
+      device.data.tBar.percent = 0;
+      device.data.tBar.status = 'Stop';
+      device.update('cut');
+      device.update('inputs', device.data);
+      device.update('tbar', device.data);
+    } else if (packetType === 'FOut') {
+      device.data.fadeToBlack = true;
+      device.update('fadeToBlack', device.data);
+    } else if (packetType === 'FIn') {
+      device.data.fadeToBlack = false;
+      device.update('fadeToBlack', device.data);
+    } else if (packetType === 'TrASp' || packetType === 'TrMSp') {
+      if (device.data.tBar === undefined) {
+        device.data.tBar = {};
+      }
+      device.data.tBar.status = packetType === 'TrASp' ? 'Automatic' : 'Manual';
+      device.data.tBar.percent = Number.parseInt(packetParts[1], 10) / 10;
+      if (device.data.tBar.percent === 0) {
+        device.data.tBar.status = 'Stop';
+      }
+      device.update('tbar', device.data);
+    } else if (packetType === 'TrAStart' || packetType === 'TrAStop') {
+      if (device.data.tBar === undefined) {
+        device.data.tBar = {};
+      }
+      device.data.tBar.status = packetType.slice(3);
+      if (packetType === 'TrAStop') {
+        device.data.tBar.percent = 0;
+      }
+      device.update('tbar', device.data);
+    }
+  });
+};

plugins/livestream-studio/styles.css

@@ -0,0 +1,179 @@
+body {
+  background-color: #191919;
+}
+h1 {
+  font-family: 'Open Sans', sans-serif;
+}
+h5 {
+  color: white;
+  margin: 0px 0px 10px 3px;
+  font-weight: bold;
+  width: 100%;
+  /* font-family: 'Open Sans', sans-serif; */
+}
+
+.lss-input {
+  width: 120px;
+  height: 40px;
+  background-color: #242424;
+  color: white;
+  border: #242424 6px solid;
+  outline: black 1px solid;
+  outline-offset: -1px;
+}
+
+.lss-button {
+  width: 80px;
+  height: 30px;
+  background: linear-gradient(#363636, #282828);
+  border-radius: 5px;
+  border: black 2px solid;
+  color: gray;
+  margin-bottom: 5px;
+}
+
+.source-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #000000;
+  width: 122px;
+  border: black 1px solid;
+}
+
+.lss-red {
+  border-color: #6f1607;
+  outline-color: #ff0000;
+}
+.lss-button.lss-red {
+  color: #6f1607;
+}
+
+.lss-green {
+  border-color: #395a13;
+  outline-color: #558522;
+}
+
+.lss-disabled {
+  color: #3a3a3a;
+}
+
+.lss-ftb-glow {
+  border: gray 2px solid;
+  animation: ftb-glow 0.75s infinite alternate;
+}
+
+@keyframes ftb-glow {
+  0% {
+    border-color: #666666;
+    color: #666666;
+  }
+  100% {
+    border-color: #fc584b;
+    color: #fc584b;
+  }
+}
+
+.source-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 11px;
+  font-weight: bold;
+}
+
+.inputs-container {
+  width: 200px;
+}
+
+.transition-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.transition-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-right: 30px;
+}
+
+.tbar-container {
+  display: flex;
+  flex-direction: column-reverse;
+  background-color: red;
+  border: 2px black solid;
+  width: 80px;
+  height: 176px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.tbar-bg {
+  position: absolute;
+  background-image: url('img/tbar_bg.png');
+  width: 80px;
+  height: 176px;
+}
+.tbar-handle {
+  position: absolute;
+  background-image: url('img/tbar_handle.png');
+  width: 42px;
+  height: 20px;
+  left: 19px;
+  bottom: 10px;
+}
+.tbar-div {
+  width: 100%;
+  background-color: #7aff58;
+  overflow: hidden;
+}
+
+.fade-to-black-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.fade-to-black .source-wrapper {
+  display: flex;
+  width: 100%;
+  padding: 5px;
+  justify-content: center;
+}
+
+.fade-to-black h3 {
+  text-align: center;
+}
+
+.clear {
+  background: transparent;
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.hide {
+  display: none;
+}
+
+.no-wrap {
+  flex-wrap: nowrap;
+}
+
+.show-small {
+  display: none;
+}
+
+@media screen and (min-width: 0px) and (max-width: 480px) {
+  .hide-small {
+    display: none;
+  }
+  .show-small {
+    display: block;
+  }
+}
+
+.float-left {
+  float: left;
+}

plugins/livestream-studio/template.ejs

@@ -0,0 +1,66 @@
+<header>
+	<h1><%= listName  %></h1>
+</header>
+
+<% if (data.inputCount) { %>
+    <div class="inputs-container float-left">
+        <h5>INPUTS</h5>
+        <div class="source-wrapper">
+            <% data.inputs.forEach((input)=>{ %>
+                <div id="input-<%= input.number %>" class="lss-input">
+                    <div class="source-label"><%= input.name %></div>
+                </div>
+            <% }) %>
+        </div>
+    </div>
+    </div>
+    <div class="transition-container float-left">
+        <div class="transition-settings">
+            <!-- <div class="next-transition">
+                <h3>Next Transition</h3>
+                <div class="source-wrapper" style="width: 260px;">
+                        <div class="lss-input clear"></div>
+                        <div id="key-1-onair" class="lss-input">
+                            <div class="source-label" style="flex-direction: column;">
+                                <div>ON</div> <div>AIR</div>
+                            </div>
+                        </div>
+                        <div id="key-2-onair" class="lss-input">
+                            <div class="source-label" style="flex-direction: column;">
+                                <div>ON</div> <div>AIR</div>
+                            </div>
+                        </div>
+                        <div id="key-3-onair" class="lss-input">
+                            <div class="source-label" style="flex-direction: column;">
+                                <div>ON</div> <div>AIR</div>
+                            </div>
+                        </div>
+                        <div id="key-4-onair" class="lss-input">
+                            <div class="source-label" style="flex-direction: column;">
+                                <div>ON</div> <div>AIR</div>
+                            </div>
+                        </div>
+                </div>
+            </div> -->
+        
+            <div class="transition-style">
+                <h5>TRANSITION</h5>
+                <div id="cut" class="lss-button">
+                    <div class="source-label">CUT</div>
+                </div>
+                <div id="auto" class="lss-button">
+                    <div class="source-label">AUTO</div>
+                </div>
+                <div class="tbar-container">
+                    <div class="tbar-bg"></div>
+                    <div id="tbar-handle-div" class="tbar-handle"></div>
+                    <div id="tbar-div" class="tbar-div" ></div>
+                </div>
+                <div id="ftb" class="lss-button">
+                    <div class="source-label">FTB</div>
+                </div>
+            </div>
+        </div>
+       
+    </div>
+<% } %>

plugins/pjlink/info.html

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

plugins/pjlink/main.js

@@ -1,126 +1,160 @@
 const md5 = require('md5');
 
-exports.defaultName = 'PJLink Projector';
-exports.connectionType = 'TCPsocket';
-exports.heartbeatInterval = 5000;
-exports.heartbeatTimeout = 15000;
-exports.searchOptions = {
-  type: 'UDPsocket',
-  searchBuffer: Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]),
-  devicePort: 4352,
-  listenPort: 4352,
-  validateResponse (msg, info) {
-    return msg.toString().indexOf('%2ACKN=') >= 0;
+exports.config = {
+  defaultName: 'PJLink Projector',
+  connectionType: 'TCPsocket',
+  remotePort: 4352,
+  mayChangePorts: false,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 15000,
+  searchOptions: {
+    type: 'UDPsocket',
+    searchBuffer: Buffer.from([0x25, 0x32, 0x53, 0x52, 0x43, 0x48, 0x0d]),
+    devicePort: 4352,
+    listenPort: 4352,
+    validateResponse(msg, info) {
+      return msg.toString().includes('%2ACKN=');
+    },
   },
+  fields: [
+    {
+      key: 'password',
+      label: 'Pass',
+      type: 'textinput',
+      value: '',
+      action(device) {
+        device.plugin.heartbeat(device);
+      },
+    },
+  ],
 };
-exports.defaultPort = 4352;
 
 exports.ready = function ready(device) {
   // Power status query
   // device.send("%1POWR ?\r");
 };
-let password = false;
 
-function processPJLink(device, str, that) {
+const PJLinkCmds = [
+  '%1POWR=',
+  '%1INPT=',
+  '%1AVMT=',
+  '%1ERST=',
+  '%1LAMP=',
+  '%1NAME=',
+  '%1INF1=',
+  '%1INF2=',
+  '%2SNUM=',
+  '%2SVER=',
+];
+
+let passwordMD5 = false;
+let passwordSeed = false;
+
+function processPJLink(_device, str, that) {
   const arr = str.split('%');
   arr.shift();
-  const d = device;
+  const device = _device;
 
-  arr.forEach((s) => {
-    const split = s.split('=');
-    const key = split[0];
-    const value = split[1];
+  arr.forEach((response) => {
+    const parts = response.split('=');
+    const cmd = parts[0];
+    const value = parts[1];
 
-    if(key === '1POWR'){
-      d.data.power = value;
+    switch (cmd) {
+      case '1POWR':
+        device.data.power = value;
+        break;
 
-    }else if(key === '1INPT'){
-      d.data.input = value;
-      
-    }else if(key === '1AVMT'){
-      d.data.avmute = value;
-      
-    }else if(key === '1ERST'){
-      d.data.fanError = value[0];
-      d.data.lampError = value[1];
-      d.data.tempError = value[2];
-      d.data.coverError = value[3];
-      d.data.filterError = value[4];
-      d.data.otherError = value[5];
-      
-    }else if(key === '1LAMP'){
-      d.data.lamp = value.split(' ');
-      
-    }else if(key === '1NAME'){
-      d.data.name = value;
-      that.deviceInfoUpdate(d, 'defaultName', d.data.name);
-      
-    }else if(key === '1INF1'){
-      d.data.info1 = value;
-      
-    }else if(key === '1INF2'){
-      d.data.info2 = value;
-      
-    }else if(key === '2SNUM'){
-      d.data.serial = value;
-      
-    }else if(key === '2SVER'){
-      d.data.version = value;
-      
+      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;
+
+      default:
+        break;
     }
   });
-
-  d.draw();
-
+  device.draw();
 }
 
-exports.data = function data(device, message) {
+exports.data = function data(_device, message) {
+  const device = _device;
   this.deviceInfoUpdate(device, 'status', 'ok');
   const msg = message.toString();
 
   if (msg.substring(0, 8) === 'PJLINK 1') {
-    password = md5(`${msg.substring(9, 17)}JBMIAProjectorLink`);
+    passwordSeed = msg.substring(9, 17);
+    passwordMD5 = md5(`${passwordSeed}${device.fields.password}`);
+    device.data.authentication = 'ON';
+
     device.send(
-      `${password}%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`
+      `${passwordMD5}%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`
     );
+    device.draw();
+  } else if (msg.substring(0, 8) === 'PJLINK 0') {
+    device.data.authentication = 'OFF';
+    device.draw();
+  } else if (msg.startsWith('PJLINK ERRA')) {
+    device.data.passwordOK = false;
+    device.draw();
   }
-  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=') {
+
+  if (PJLinkCmds.includes(msg.substring(0, 7))) {
     processPJLink(device, msg, this);
+    device.data.passwordOK = true;
   }
 };
 
 exports.heartbeat = function heartbeat(device) {
-  if (password) {
+  passwordMD5 = md5(`${passwordSeed}${device.fields.password}`);
+  if (device.fields.password.length > 0 && device.data.passwordOK) {
     device.send(
-      `${password}%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`
+      `${passwordMD5}%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`
     );
+  } else if (device.fields.password.length > 0) {
+    device.send(`${passwordMD5}%1POWR ?\r`);
+  } else if (device.data.passwordOK) {
+    device.send(`%1POWR ?\r%1INPT ?\r%1AVMT ?\r%1ERST ?\r%1LAMP ?\r%1NAME ?\r%1INF1 ?\r%1INF2 ?\r%2SNUM ?\r%2SVER ?\r`);
+  } else {
+    device.send(`%1POWR ?\r`);
   }
+
   device.draw();
 };

plugins/pjlink/styles.css

@@ -7,3 +7,7 @@
 .ok {
   color: #79b757;
 }
+table {
+  margin-bottom: 30px;
+  width: 350px;
+}

plugins/pjlink/template.ejs

@@ -2,7 +2,6 @@
 	<h1><%= listName  %></h1>
 </header>
 
-
 <table class="cv-table">
 	<tr>
 		<td>Power</td>
@@ -73,7 +72,6 @@
 		<% } %>
 	<% } %>
 
-
 	<tr>
 		<td>Name</td>
 		<td><div><%= data.name %></div></td>
@@ -94,4 +92,19 @@
 		<td>Version</td>
 		<td><div><%= data.version %></div></td>
 	</tr>
+</table>
+<table class="cv-table">
+	<tr>
+		<td>Authentication</td>
+		<td>
+		<% if(!data.passwordOK){ %>
+			<div class='error'>INCORRECT PASSWORD</div>
+		<% }else if(data.authentication=="ON"){ %>
+			<div class='ok'>ON</div>
+		<% }else{ %>
+			<div class='error'><%= data.authentication %></div>
+		<% } %>
+		
+		</td>
+	</tr>
 </table>

plugins/posistagenet/info.html

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

plugins/posistagenet/main.js

@@ -0,0 +1,57 @@
+const { Decoder } = require('@jwetzell/posistagenet');
+
+exports.config = {
+  defaultName: 'PosiStageNet',
+  connectionType: 'multicast',
+  remotePort: 56565,
+  mayChangePorts: false,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 15000,
+  searchOptions: {
+    type: 'multicast',
+    address: `236.10.10.10`,
+    port: 56565,
+    validateResponse(msg, info) {
+      // TODO(jwetzell): find a way to check that this is a posistagenet message
+      return true;
+    },
+  },
+};
+
+exports.ready = function ready(_device) {
+  const device = _device;
+  device.data = {};
+  const networkInterfaces = device.getNetworkInterfaces();
+
+  Object.keys(networkInterfaces).forEach((networkInterfaceID) => {
+    const networkInterface = networkInterfaces[networkInterfaceID];
+    device.connection.addMembership(`236.10.10.10`, networkInterface[0].address);
+  });
+};
+
+exports.data = function data(_device, buf, info) {
+  const device = _device;
+
+  if (!device.decoders) {
+    device.decoders = {};
+  }
+
+  if (!device.decoders[info.address]) {
+    device.decoders[info.address] = new Decoder();
+  }
+
+  device.decoders[info.address].decode(buf);
+
+  Object.keys(device.decoders).forEach((address) => {
+    device.data[address] = {
+      trackers: device.decoders[address].trackers,
+      system_name: device.decoders[address].system_name,
+      fields: device.decoders[address].getTrackerFields(),
+    };
+  });
+  device.draw();
+};
+
+exports.heartbeat = function heartbeat(device) {};
+
+exports.update = function update(_device, doc, updateType, updateData) {};

plugins/posistagenet/styles.css

@@ -0,0 +1,46 @@
+section {
+  background-color: #2d2d2d;
+  border: gray 1px solid;
+  padding: 10px;
+  padding-top: 0px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+table {
+  border: #414142 1px solid;
+  background-color: #272727;
+}
+table,
+th,
+td {
+  border-collapse: collapse;
+  color: #ccc;
+
+  font-size: 13px;
+}
+th {
+  padding: 2px 10px;
+}
+td {
+  text-align: center;
+  padding: 2px 7px;
+  font-family: 'Courier New', Courier, monospace;
+}
+.bg-pos {
+  background-color: #443727;
+}
+.bg-speed {
+  background-color: #32422e;
+}
+.bg-ori {
+  background-color: #2e4242;
+}
+.bg-accel {
+  background-color: #392b3f;
+}
+.bg-trgtpos {
+  background-color: #3a2732;
+}
+.border-right {
+  border-right: 1px solid #272727;
+}

plugins/posistagenet/template.ejs

@@ -0,0 +1,154 @@
+<header>
+  <h1><%= listName%></h1>
+</header>
+
+<div>
+  <!-- Server Loop -->
+  <% Object.keys(data).forEach((address) => { 
+    const instanceData = data[address]
+  %>
+  <section>
+  <h2>Server: <%= instanceData.system_name %> (<%= address %>)</h2>
+  <h3>Tracker Count: <%= Object.keys(instanceData.trackers).length %></h3>
+
+  <table>
+    <tr>
+      <th></th>
+      <% if(instanceData.fields.has('tracker_name')) { %>
+        <th></th>
+      <% } %>
+
+      <% if(instanceData.fields.has('pos')) { %>
+        <th colspan="3" class="bg-pos border-right">POS</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('speed')) { %>
+        <th colspan="3" class="bg-speed border-right">SPEED</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('ori')) { %>
+        <th colspan="3" class="bg-ori border-right">ORI</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('status')) { %>
+        <th class="border-right"></th>
+      <% } %>
+
+      <% if(instanceData.fields.has('accel')) { %>
+        <th colspan="3" class="bg-accel border-right">ACCEL</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('trgtpos')) { %>
+        <th colspan="3" class="bg-trgtpos border-right">TRGTPOS</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('timestamp')) { %>
+        <th></th>
+      <% } %>
+    </tr>
+    <tr>
+      <th>ID</th>
+      <% if(instanceData.fields.has('tracker_name')) { %>
+        <th>Name</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('pos')) { %>
+        <th class="bg-pos">x</th>
+        <th class="bg-pos">y</th>
+        <th class="bg-pos border-right">z</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('speed')) { %>
+        <th class="bg-speed">x</th>
+        <th class="bg-speed">y</th>
+        <th class="bg-speed border-right">z</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('ori')) { %>
+        <th class="bg-ori">x</th>
+        <th class="bg-ori">y</th>
+        <th class="bg-ori border-right">z</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('status')) { %>
+        <th class="border-right">validity</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('accel')) { %>
+        <th class="bg-accel">x</th>
+        <th class="bg-accel">y</th>
+        <th class="bg-accel border-right">z</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('trgtpos')) { %>
+        <th class="bg-trgtpos">x</th>
+        <th class="bg-trgtpos">y</th>
+        <th class="bg-trgtpos border-right">z</th>
+      <% } %>
+
+      <% if(instanceData.fields.has('timestamp')) { %>
+        <th>tracker_timestamp</th>
+      <% } %>
+
+    </tr>
+    <!-- Tracker Loop -->
+    <% Object.entries(instanceData.trackers).forEach(([trackerId,trackerData]) => { %>
+
+    <tr>
+      <td><%= trackerId %></td>
+      <% if(instanceData.fields.has('tracker_name')) { %>
+        <td><%= trackerData.tracker_name?.tracker_name%></td>
+      <% } %>
+      
+      <% if(instanceData.fields.has('pos')) { %>
+        <!-- pos -->
+        <td class="bg-pos"><%= trackerData.pos?.pos_x?.toFixed(2) %></td>
+        <td class="bg-pos"><%= trackerData.pos?.pos_y?.toFixed(2) %></td>
+        <td class="bg-pos border-right"><%= trackerData.pos?.pos_z?.toFixed(2) %></td>
+      <% } %>
+
+      <% if(instanceData.fields.has('speed')) { %>
+        <!-- speed -->
+        <td class="bg-speed"><%= trackerData.speed?.speed_x?.toFixed(2) %></td>
+        <td class="bg-speed"><%= trackerData.speed?.speed_y?.toFixed(2) %></td>
+        <td class="bg-speed border-right"><%= trackerData.speed?.speed_z?.toFixed(2) %></td>
+      <% } %>
+
+      <% if(instanceData.fields.has('ori')) { %>
+        <!-- ori -->
+        <td class="bg-ori"><%= trackerData.ori?.ori_x?.toFixed(2) %></td>
+        <td class="bg-ori"><%= trackerData.ori?.ori_y?.toFixed(2) %></td>
+        <td class="bg-ori border-right"><%= trackerData.ori?.ori_z?.toFixed(2) %></td>
+      <% } %>
+
+      <% if(instanceData.fields.has('status')) { %>
+        <td class="border-right"><%= trackerData.status?.validity?.toFixed(2) %></td>
+      <% } %>
+
+      <% if(instanceData.fields.has('accel')) { %>
+        <!-- accel -->
+        <td class="bg-accel"><%= trackerData.accel?.accel_x?.toFixed(2) %></td>
+        <td class="bg-accel"><%= trackerData.accel?.accel_y?.toFixed(2) %></td>
+        <td class="bg-accel border-right"><%= trackerData.accel?.accel_z?.toFixed(2) %></td>
+      <% } %>
+
+      <% if(instanceData.fields.has('trgtpos')) { %>
+        <!-- trgtpos -->
+        <td class="bg-trgtpos"><%= trackerData.trgtpos?.trgtpos_x?.toFixed(2) %></td>
+        <td class="bg-trgtpos"><%= trackerData.trgtpos?.trgtpos_y?.toFixed(2) %></td>
+        <td class="bg-trgtpos border-right"><%= trackerData.trgtpos?.trgtpos_z?.toFixed(2) %></td>
+      <% } %>
+
+      <% if(instanceData.fields.has('timestamp')) { %>
+        <td><%= trackerData.timestamp?.tracker_timestamp %></td>
+      <% } %>
+
+    </tr>
+
+    <% }); %>
+  </table>
+</section>
+  <% 
+    }); 
+  %>
+</div>

plugins/qlab/cart.ejs

@@ -1,15 +1,17 @@
-<div id="<%= cueList.uniqueID %>">
+<% let cueKeys = allCues[cueList.uniqueID]; %>
 
-<h3><%= cueList.displayName %></h3>
+<div id="<%= cueKeys.uniqueID %>">
+
+<h3><%= workspace.displayName %> &mdash; <%= cueList.listName %></h3>
 <%
-  let width = 100/cueList.cartColumns;
-  let height = 600/(cueList.cartRows);
+  let width = 100/cueKeys.cartColumns;
+  let height = 600/(cueKeys.cartRows);
 %>
 
 <div class="cart">
 
-<% for(let r=0; r<cueList.cartRows; r++){ %>
-  <% for(let c=0; c<cueList.cartColumns; c++){ %>
+<% for(let r=0; r<cueKeys.cartRows; r++){ %>
+  <% for(let c=0; c<cueKeys.cartColumns; c++){ %>
     <% let style = `style="left:${width*c}%; top:${height*r}px; width:${width }%; height:${height}px;"`; %>
 
     <div class="cartCueWrapper" <%= style %>><div class="cartCue cartBlank"></div></div>
@@ -18,25 +20,27 @@
 <% } %>
 
 
-<% for(var c in cueList.cues){ 
-  let cue = cueList.cues[c];
+<% for(let i=0; i<cueList.cues.length; i++){
+  let cue = allCues[cueList.cues[i].uniqueID];
 
   if(!cue.cartPosition){
     cue.cartPosition = [0, 0];
   }
 
+
   let row = cue.cartPosition[0]-1;
   let col = cue.cartPosition[1]-1;
 
   let colPos = width*col;
   let rowPos = height*row;
 
-  if(col>=cueList.cartColumns || row>=cueList.cartRows){
+  if(col>=cueKeys.cartColumns || row>=cueKeys.cartRows){
     continue;
-  } 
+  }
+
 %>
- 
-<%= tileTemplate({cue: allCues[cue.uniqueID], allCues: allCues}) %>
+
+<%= tileTemplate({cue: cueList.cues[i], allCues: allCues, workspace: workspace}) %>
 
 <% } %>
 

plugins/qlab/cue.ejs

@@ -1,133 +1,206 @@
+<% let cueKeys = allCues[cue.uniqueID]; %>
 <% let playbackPosition = workspace.playbackPosition==cue.uniqueID ? "playback-position" : "" %>
-<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%= playbackPosition %>" id="<%= cue.uniqueID %>">
+<% let selected = workspace.selected.includes(cue.uniqueID) ? "selected": "" %>
 
-  <td></td> <!-- playhead/color indicator -->
+<% if(cueKeys && cueKeys.parent){ %>
 
-  <td><center>
-  <% if(cue.broken){ %>
-    <img src="plugins/qlab/img/status_broken.png" height="18px">
+<tr class="q-<%= cueKeys.colorName %> q-armed-<%= cueKeys.armed %> <%= playbackPosition %> <%= selected %>" id="<%= cueKeys.uniqueID %>">
 
-  <% }else if(cue.running){ %>
-    <img src="plugins/qlab/img/status_running.png" height="18px">
-
-  <% }else if(cue.paused){ %>
-    <img src="plugins/qlab/img/status_paused.png" height="18px">
-
-  <% }else if(cue.loaded){ %>
-    <img src="plugins/qlab/img/status_loaded.png" height="18px">
-
-  <% }else if(cue.flagged){ %>
-    <img src="plugins/qlab/img/status_flagged.png" height="20px">
-
-  <% }else{ %>
+    <!-- playhead/color indicator -->
+    <td class="playhead"></td> 
     
-  <% } %>
-  </center></td>
+
+    <!-- status indicator -->
+    <td><center> 
+    <% if(cueKeys.isBroken){ %>
+        <img src="./plugins/qlab/img/status_broken.png" height="18px">
+    
+    <% }else if(cueKeys.isRunning){ %>
+        <img src="./plugins/qlab/img/status_running.png" height="18px">
+    
+    <% }else if(cueKeys.isPaused){ %>
+        <img src="./plugins/qlab/img/status_paused.png" height="18px">
+    
+    <% }else if(cueKeys.isLoaded){ %>
+        <img src="./plugins/qlab/img/status_loaded.png" height="18px">
+    
+    <% }else if(cueKeys.isFlagged){ %>
+        <img src="./plugins/qlab/img/status_flagged.png" height="20px">
+    
+    <% }else{ %>
+        
+    <% } %>
+    </center></td>
 
 
-  <td><img src="plugins/qlab/img/<%= cue.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>
-  <td><center><%= cue.number || "&nbsp;" %></center></td>
-
-
-
-
-  <% for(let i=cue.nestedGroupModes.length; i>0; i--){ %>
-
-    <% let test = "" %>
-
-    <% if(cue.type=="Group" && i==1 && cue.cues.length==0){ %>
-      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gTop gBot group-arrow"><%= test %></td>
-
-    <% }else if(cue.type=="Group" && i==1){ %>
-      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gTop group-arrow"><%= test %></td>
-
-    <% }else if(cue.nestedGroupPosition[i-1]==0 && cue.nestedGroupPosition[i-2]==0){ %>
-      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft gBot"><%= test %></td>
-
-    <% }else if(i==1 && cue.nestedGroupPosition[i]==0){ %>
-      <td class="gMode-<%= cue.nestedGroupModes[i] %> gBot"><%= test %></td>
+    <!-- cue type icon -->
+    <% if(cueKeys.type == "Group" && cueKeys.mode){ %> 
+        <td><img src="./plugins/qlab/img/v5/group-<%= cueKeys.mode %>.png" height="20px"></td>
 
     <% }else{ %>
-      <td class="gMode-<%= cue.nestedGroupModes[i-1] %> gLeft"><%= test %></td>
+        <td><img src="./plugins/qlab/img/<%= cueKeys.type.toLowerCase().replace(' ','-') %>.png" height="20px"></td>
 
     <% } %>
 
-  <% } %>
 
+
+    <!-- cue number -->
+    <td><center><%= cueKeys.number || "&nbsp;" %></center></td>
+
+
+    <% let nextCue = cueKeys.cueInWorkspace.parent.cues[cueKeys.cueInWorkspace.sortIndex+1]; %>
+
+    <!-- spaces before name -->
+    <% for(let i=0; i<cueKeys.parentKeys.length; i++){ %>
+        <% let parent = cueKeys.parentKeys[i+1]; %>
+        <%  %>
+
+        <% if(cueKeys.type=="Group" && cueKeys.cues.length==0 && i==cueKeys.parentKeys.length-1){ %>
+            <td class="gMode-<%= cueKeys.mode %> gLeft gTop gBot group-arrow"></td>
+
+        <% }else if(cueKeys.type=="Group" && i==cueKeys.parentKeys.length-1){ %>
+            <td class="gMode-<%= cueKeys.mode %> gLeft gTop group-arrow"></td>
+
+        <%}else if(parent){%>
+
+            <% let parentCues = parent.cueInWorkspace.cues %>
+            <% let lastCueInMe = parentCues[parentCues.length-1]%>
+
+            <% while(lastCueInMe.type=="Group" && lastCueInMe.cues.length){
+                parentCues = lastCueInMe.cues;
+                lastCueInMe = parentCues[parentCues.length-1];
+            } %>
+                    
+            <% if(lastCueInMe.uniqueID == cueKeys.uniqueID){ %>
+                <td class="gMode-<%= parent.mode %> gLeft gBot"></td>
+
+            <% }else{ %>
+                <td class="gMode-<%= parent.mode %> gLeft"></td>
+                
+
+            <% } %>
+
+
+        <% }else if(cueKeys.parentKeys[i]){ %>
+            <% let nextCue2 = cueKeys.parentKeys[i].cues[cueKeys.cueInWorkspace.sortIndex+1]; %>
+
+            <% if(!nextCue2){ %>
+                <td class="gMode-<%= cueKeys.parentKeys[i].mode %> gBot"></td>
+
+            <% }else{ %>
+                <td></td>
+
+            <% } %>
+
+
+        <% } %>
+        
+    <% } %>    
+
+            
+
+    <!-- cue name -->
   
-
-  <!-- end spacer cells -->
+    <% if(cue.type=="Group"){ %>
+        
+        <% if(cue.cues && cue.cues.length==0){ %>
+          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gBot gRight"><%= cueKeys.listName %></td>
+    
+        <% }else{ %>
+          <td id="cue-name" colspan="<%= 11-cueKeys.parentKeys.length %>" class="gMode-<%= cueKeys.mode %> gTop gRight"><%= cueKeys.listName %></td>
+    
+        <% } %>
+    
+    <% }else if(!nextCue){ %>
+        <td colspan="<%= 11-cueKeys.parentKeys.length %>" class="cue-name gMode-<%= cueKeys.parent.mode %> gBot gRight"><%= cueKeys.listName %></td>
+    
+    <% }else{ %>
+        <td colspan="<%= 11-cueKeys.parentKeys.length %>" class="cue-name gMode-<%= cueKeys.parent.mode %> gRight"><%= cueKeys.listName %></td>
+    
+    <% } %>
+    
 
 
-	<% if(cue.type=="Group"){ %>
-    <% if(cue.cues.length==0){ %>
-      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gBot gRight"><%= cue.listName %></td>
+
+    <!-- cue target -->
+    <% if(cueKeys.currentCueTarget){ %>
+        <td class="q-target hide-medium"><%= allCues[cueKeys.currentCueTarget].number ||  allCues[cueKeys.currentCueTarget].listName %></td>
 
     <% }else{ %>
-      <td id="cue-name" colspan="<%= 11-cue.nestedGroupModes.length %>" class="gMode-<%= cue.groupMode %> gTop gRight"><%= cue.listName %></td>
+        <td class="q-target hide-medium"></td>
+
+    <% } %>
+    
+
+
+    <!-- cue preWait -->
+    <% if(cueKeys.preWait){ %>
+        <td class="q-time hide-small"><%= elapsedTime(cueKeys.preWait, cueKeys.preWaitElapsed, "preWait", cueKeys) %></td>
+
+    <% }else{ %>
+        <td class="q-time q-gray-text hide-small">00:00.00</td>
 
     <% } %>
 
-  <% }else if(cue.nestedGroupPosition[1]==0){ %>
-    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[1] %> gBot gRight"><%= cue.listName %></td>
-
-  <% }else{ %>
-    <td colspan="<%= 11-cue.nestedGroupModes.length %>" class="cue-name gMode-<%= cue.nestedGroupModes[1] %> gRight"><%= cue.listName %></td>
-
-  <% } %>
 
 
-  <td class="q-time hide-medium"><%= cue.target %></td>
+    <!-- cue duration -->
+    <% let cueTypesWithAction = ["Audio", "Mic", "Video", "Camera", "Text", "Light", "Fade", "Network", "MIDI File", "Timecode", "Wait"]; %>
+    <% if((cueKeys.type=="Group" && cueKeys.mode==3) || (cueKeys.type=="Group" && cueKeys.mode==6) || cueTypesWithAction.includes(cueKeys.type)){ %>
+        <td class="q-time hide-medium"><%= elapsedTime(cueKeys.duration, cueKeys.actionElapsed, "action", cueKeys) %></td>
+
+    <% }else{ %>
+        <td class="hide-medium"></td>
+
+    <% } %>
+
+
+    <!-- cue postWait -->
+    <% if(cueKeys.postWait){ %>
+        <td class="q-time hide-medium"><%= elapsedTime(cueKeys.postWait, cueKeys.postWaitElapsed, "postWait", cueKeys) %></td>
+
+    <% }else{ %>
+        <td class="q-time q-gray-text hide-medium">00:00.00</td>
+
+    <% } %>
 
 
 
+    <!-- cue continueMode -->
+    <% if(cueKeys.continueMode==2){ %>
+        <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>
 
-  <% if(cue.preWait){ %>
-    <td class="q-time hide-medium"><%= elapsedTime(cue.preWait, cue.preWaitElapsed, "preWait", cue) %></td>
+    <% }else if(cueKeys.continueMode==1){ %>
+        <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>
 
-  <% }else{ %>
-    <td class="q-time q-gray-text hide-small">00:00.00</td>
+    <% }else{ %>
+        <td class="hide-small"></td>
 
-  <% } %>
-
-
-  <% let cueTypesWithAction = ["Audio", "Mic", "Video", "Camera", "Text", "Light", "Fade", "Network", "MIDI File", "Timecode", "Wait"]; %>
-  <% if((cue.type=="Group" && cue.groupMode==3) || cueTypesWithAction.indexOf(cue.type)>=0){ %>
-    <td class="q-time hide-medium"><%= elapsedTime(cue.duration, cue.actionElapsed, "action", cue) %></td>
-
-  <% }else{ %>
-    <td class="hide-medium"></td>
-
-  <% } %>
-
-
-
-  <% if(cue.postWait){ %>
-    <td class="q-time hide-medium"><%= elapsedTime(cue.postWait, cue.postWaitElapsed, "postWait", cue) %></td>
-
-  <% }else{ %>
-    <td class="q-time q-gray-text hide-medium">00:00.00</td>
-
-  <% } %>
-
-
-
-  <% if(cue.continueMode==2){ %>
-    <td class="hide-small"><center><img src="plugins/qlab/img/auto_follow.png" height="20px"></center></td>
-
-  <% }else if(cue.continueMode==1){ %>
-    <td class="hide-small"><center><img src="plugins/qlab/img/auto_continue.png" height="20px"></center></td>
-
-  <% }else{ %>
-    <td class="hide-small"></td>
-
-  <% } %>
+    <% } %>
 
 
 </tr>
 
-<% 
-  function prettyFormatTime(seconds){
+
+    <% }else{ %>
+
+<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> " id="<%= cue.uniqueID %>">
+    <td></td>
+    <td></td>
+    <td></td>
+    <td><center><%= cue.number || "&nbsp;" %></center></td>
+    <td colspan="11" id="cue-name"><%= cue.listName %></td>
+    <td class="q-time hide-medium"></td>
+    <td class="q-time q-gray-text hide-small">00:00.00</td>
+    <td class="hide-medium"></td>
+    <td class="q-time q-gray-text hide-medium">00:00.00</td>
+    <td class="hide-small"></td>
+</tr>
+
+<% } %>
+
+<%
+function prettyFormatTime(seconds){
     if(!seconds){
       return "00:00.00";
     }
@@ -139,14 +212,14 @@
     return string.substring(startIndex, string.length-2)
   }
 
-  function elapsedTime(def, value, type, cue){
+function elapsedTime(def, value, type, cue){
 
-    if(type=="action" && cue.paused){
+    if(type=="action" && cue.isPaused){
       value-=cue.preWait;
     }
 
     let border, fill;
-    if(cue.paused){
+    if(cue.isPaused){
       border = "#f6e737";
       fill = "rgba(255, 240, 60, 0.7)";
     }else{
@@ -159,7 +232,7 @@
       let percent = value/def*100;
       let bg = `style='background: black; background: linear-gradient(90deg, ${fill} ${percent}%, transparent ${percent}%);`;
 
-      if(cue.paused){
+      if(cue.isPaused){
         bg+= "outline-color: "+border+";";
         bg+= "color: white;";
       }
@@ -167,7 +240,7 @@
       
       return `<div class='q-time-elapsed' ${bg}>${prettyFormatTime(Math.min(def, value))}</span>`;
 
-    }else if(type=="postWait" || type=="action"){
+    }else if(type=="postWait" && cue.continueMode==0){
       return `<span class='q-gray-text'>${prettyFormatTime(def)}</span>`;
 
     }else{

plugins/qlab/cuelist.ejs

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

plugins/qlab/info.html

@@ -1,4 +1,5 @@
 <h3>Connection Requirements</h3>
 <ul>
-	<li>No Passcode</li>
-</ul>
+  <li><em>View</em> permission enabled in OSC Access</li>
+  <li>Provide passcode if necessary</li>
+</ul>

plugins/qlab/main.js

@@ -1,381 +1,389 @@
 const _ = require('lodash');
 const fs = require('fs');
+const path = require('path');
 
-let lastElapsedUpdate = Date.now();
-
-exports.defaultName = 'QLab 4';
-exports.connectionType = 'osc';
-exports.heartbeatInterval = 50;
-exports.heartbeatTimeout = 2000;
-exports.searchOptions = {
-  type: 'Bonjour',
-  bonjourName: 'qlab',
+exports.config = {
+  defaultName: 'QLab',
+  connectionType: 'osc',
+  remotePort: 53000,
+  localPort: 53001,
+  mayChangePorts: true,
+  mayChangeLocalPort: false,
+  heartbeatInterval: 100,
+  heartbeatTimeout: 5000,
+  searchOptions: {
+    type: 'Bonjour',
+    bonjourName: 'qlab',
+  },
+  fields: [
+    {
+      key: 'passcode',
+      label: 'Pass',
+      type: 'textinput',
+      value: '',
+      action(device) {
+        device.send('/workspaces');
+      },
+    },
+  ],
 };
 
-exports.ready = function ready(device) {
+const valuesForKeysString =
+  '["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",' +
+  '"type","children","preWait","postWait","duration","colorName","continueMode",' +
+  '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",' +
+  '"actionElapsed","postWaitElapsed","isPaused","currentCueTarget","isRunning","armed","notes"]';
+
+exports.ready = function ready(_device) {
+  const device = _device;
   device.send(`/version`);
   device.send('/workspaces');
+  device.data.workspaces = {};
+  device.data.cueKeys = {};
+  device.data.version = '';
+  device.data.lastElapsedMessage = 0;
+  device.data.ticks = 0;
+
+  device.templates = {
+    cue: _.template(fs.readFileSync(path.join(__dirname, `cue.ejs`))),
+    tile: _.template(fs.readFileSync(path.join(__dirname, `tile.ejs`))),
+    cart: _.template(fs.readFileSync(path.join(__dirname, `cart.ejs`))),
+    cuelist: _.template(fs.readFileSync(path.join(__dirname, `cuelist.ejs`))),
+  };
 };
 
-exports.data = function data(device, oscData) {
-  const osc = oscData.address.split('/');
-  osc.shift();
-  const d = device;
-  
-  // console.log(oscData.address)
+exports.data = function data(_device, oscData) {
+  const device = _device;
 
-  if(match(osc, ["reply", "version"])){
+  const msgAddr = oscData.address.split('/');
+  msgAddr.shift();
 
-    const json = JSON.parse(oscData.args[0]);
-    d.data.version = json.data;
+  let json = [];
+  try {
+    json = JSON.parse(oscData.args[0]);
+  } catch (err) {
+    // a handful of messages don't respond with JSON
+  }
 
-    this.deviceInfoUpdate(d, 'status', 'ok');
-
-
-  }else if(match(osc, ["reply", "workspaces"])){
-    
-    const json = JSON.parse(oscData.args[0]);
-    d.data.workspaces = {};
-
-    json.data.forEach(wksp => {
-    
-      d.data.workspaces[wksp.uniqueID] = {
-        uniqueID: wksp.uniqueID,
-        displayName: wksp.displayName,
-        cueLists: {},
-        cues: {}
+  if (Object.keys(json).length > 0) {
+    if (json.status === 'denied') {
+      if (device.data.workspaces[json.workspace_id]) {
+        device.data.workspaces[json.workspace_id].permission = 'denied';
       }
+      return;
+    }
+    if (json.status === 'error') {
+      device.send('/workspaces');
+      return;
+    }
+  }
 
-      d.send(`/workspace/${wksp.uniqueID}/connect`);
-
-    });
-
-
-  }else if(match(osc, ["reply", "workspace", "*", "connect"])){
-
-    d.send(`/workspace/${osc[2]}/updates`, [
-      { type: 'i', value: 1 },
-    ]);
-
-    d.send(`/workspace/${osc[2]}/cueLists`);
-
-
-
-  }else if(match(osc, ["reply", "workspace", "*", "cueLists"])){
-
-    this.deviceInfoUpdate(d, 'status', 'ok');
-
-
-    const workspace = d.data.workspaces[osc[2]];
-    const json = JSON.parse(oscData.args[0]);
-
-    workspace.cueLists = {};
-    workspace.cues = {};
-
-
-    json.data.forEach(ql => {
-      workspace.cueLists[ql.uniqueID] = ql;
-      addChildrenToWorkspace(workspace, ql);
-    });
-
-    d.draw();
-    
-
-    setTimeout(() => {
-      json.data.forEach(ql => {
-        workspace.cueLists[ql.uniqueID] = ql;
-        getValuesForKeys(d, json.workspace_id, ql);
-      });
-    }, 0);
-
-
-
-  }else if(match(osc, ["reply", "cue_id", "*", "children"])){
-
-    const json = JSON.parse(oscData.args[0]);
-    const workspace = d.data.workspaces[json.workspace_id];
-    const cueID = osc[2];
-    const cue = workspace.cues[cueID];
-
-    if(!_.isEqual(cue.cues, json.data)){
-      workspace.cueLists[cueID].cues = json.data;
-      addChildrenToWorkspace(workspace, workspace.cueLists[cueID]);
-
-      d.draw();
-
-      getValuesForKeys(d, json.workspace_id, cue);
+  if (oscData.address === '/reply/workspaces') {
+    for (let i = 0; i < json.data.length; i++) {
+      device.data.workspaces[json.data[i].uniqueID] = {
+        version: json.data[i].version,
+        displayName: json.data[i].displayName,
+        port: json.data[i].port,
+        udpReplyPort: json.data[i].udpReplyPort,
+        cueLists: [],
+        selected: [],
+      };
+      device.data.version = json.data[i].version;
+      device.data.workspaces[json.data[i].uniqueID].permission = 'ok';
+      device.send(`/workspace/${json.data[i].uniqueID}/connect`, device.fields.passcode);
     }
 
+    this.deviceInfoUpdate(device, 'status', 'ok');
+    device.draw();
+  } else if (/reply\/workspace\/.*\/connect/.test(oscData.address)) {
+    if (json.data === 'badpass') {
+      device.data.workspaces[json.workspace_id].permission = 'badpass';
+    } else {
+      device.data.workspaces[json.workspace_id].permission = 'ok';
+      device.send(`/workspace/${msgAddr[2]}/cueLists`);
+      device.send(`/workspace/${msgAddr[2]}/updates`, [{ type: 'i', value: 1 }]);
+    }
+  } else if (/reply\/workspace\/.*\/cueLists/.test(oscData.address)) {
+    insertChildCues(device, device.data.workspaces[msgAddr[2]].cueLists, json.data, '[root group of cue lists]');
+  } else if (/reply\/cue_id\/.*\/valuesForKeys/.test(oscData.address)) {
+    const keyValues = json.data;
+    let cue = device.data.cueKeys[msgAddr[2]];
 
-  }else if(match(osc, ["reply", "cue_id", "*", "valuesForKeys"])){
+    if (cue === undefined) {
+      device.data.cueKeys[msgAddr[2]] = {};
+      cue = device.data.cueKeys[msgAddr[2]];
+    }
+    cue.uniqueID = keyValues.uniqueID;
+    cue.number = keyValues.number;
+    cue.listName = keyValues.listName;
+    cue.isBroken = keyValues.isBroken;
+    cue.isRunning = keyValues.isRunning;
+    cue.isLoaded = keyValues.isLoaded;
+    cue.isFlagged = keyValues.isFlagged;
+    cue.type = keyValues.type;
+    cue.cues = keyValues.children;
+    cue.preWait = keyValues.preWait;
+    cue.postWait = keyValues.postWait;
+    cue.duration = keyValues.duration;
+    cue.colorName = keyValues.colorName;
+    cue.continueMode = keyValues.continueMode;
+    cue.mode = keyValues.mode;
+    cue.parent = keyValues.parent;
+    cue.cartRows = keyValues.cartRows;
+    cue.cartColumns = keyValues.cartColumns;
+    cue.cartPosition = keyValues.cartPosition;
+    cue.displayName = keyValues.displayName;
+    cue.preWaitElapsed = keyValues.preWaitElapsed;
+    cue.actionElapsed = keyValues.actionElapsed;
+    cue.postWaitElapsed = keyValues.postWaitElapsed;
+    cue.isPaused = keyValues.isPaused;
+    cue.currentCueTarget = keyValues.currentCueTarget;
+    cue.armed = keyValues.armed;
+    cue.notes = keyValues.notes;
 
-    const json = JSON.parse(oscData.args[0]);
-    const cueValues = json.data;
-
-    const workspace = d.data.workspaces[json.workspace_id];
-    let cue = workspace.cues[cueValues.uniqueID];
-
-    if(!cue){
-      workspace.cues[cueValues.uniqueID] = {};
-      cue = workspace.cues[cueValues.uniqueID];
+    if (keyValues.isRunning) {
+      device.data.lastElapsedMessage = device.data.ticks;
     }
 
-    cue.uniqueID = cueValues.uniqueID;
-    cue.number = cueValues.number;
-    cue.name = cueValues.name;
-    cue.listName = cueValues.listName;
-    cue.displayName = cueValues.displayName;
-    cue.broken = cueValues.isBroken;
-    cue.running = cueValues.isRunning;
-    cue.loaded = cueValues.isLoaded;
-    cue.flagged = cueValues.isFlagged;
-    cue.paused = cueValues.isPaused;
-    cue.type = cueValues.type;
-    cue.cues = cueValues.children;
-    cue.preWait = cueValues.preWait;
-    cue.postWait = cueValues.postWait;
-    cue.duration = cueValues.currentDuration;
-    cue.colorName = cueValues.colorName;
-    cue.continueMode = cueValues.continueMode;
-    cue.groupMode = cueValues.mode;
-    cue.parent = cueValues.parent;
-    cue.cartRows = cueValues.cartRows;
-    cue.cartColumns = cueValues.cartColumns;
-    cue.cartPosition = cueValues.cartPosition;
-    cue.preWaitElapsed = cueValues.preWaitElapsed;
-    cue.actionElapsed = cueValues.actionElapsed;
-    cue.postWaitElapsed = cueValues.postWaitElapsed;
-
-    const nestedGroupModes = [];
-    const nestedGroupPosition = [0];
-    let obj = cue;
-
-    while(obj.parent !== "[root group of cue lists]"){
-      nestedGroupModes.push(obj.groupMode);
-
-      let pos = _.findIndex(workspace.cues[obj.parent].cues, {uniqueID: obj.uniqueID});
-      pos = Math.abs(pos - workspace.cues[obj.parent].cues.length) - 1;
-      nestedGroupPosition.push(pos)
-
-      obj = workspace.cues[obj.parent];
+    if (cue.parent !== '[root group of cue lists]') {
+      cue.parent = device.data.cueKeys[cue.parent];
     }
-    cue.nestedGroupModes = nestedGroupModes;
-    cue.nestedGroupPosition = nestedGroupPosition;
 
-    // console.log("draw "+cue.number)
+    if (cue.type === 'Cue List' || cue.type === 'Group' || cue.type === 'Cart') {
+      if (device.data.cueKeys[msgAddr[2]].cueInWorkspace && cue.cues) {
+        insertChildCues(
+          device,
+          device.data.cueKeys[msgAddr[2]].cueInWorkspace.cues,
+          [...keyValues.children],
+          device.data.cueKeys[msgAddr[2]].cueInWorkspace
+        );
+      }
+      device.draw();
+    }
 
-    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
-
-
-  }else if(match(osc, ["reply", "cue_id", "*", "preWaitElapsed"])){
-
-    const json = JSON.parse(oscData.args[0]);
-    const workspace = d.data.workspaces[json.workspace_id];
-    const cue = workspace.cues[osc[2]];
-
-    cue.preWaitElapsed = json.data;
-    lastElapsedUpdate = Date.now();
-
-    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
-
-
-  }else if(match(osc, ["reply", "cue_id", "*", "actionElapsed"])){
-
-    const json = JSON.parse(oscData.args[0]);
-    const workspace = d.data.workspaces[json.workspace_id];
-    const cue = workspace.cues[osc[2]];
-
-    cue.actionElapsed = json.data;
-    lastElapsedUpdate = Date.now();
-
-    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
-
-
-  }else if(match(osc, ["reply", "cue_id", "*", "postWaitElapsed"])){
-
-    const json = JSON.parse(oscData.args[0]);
+    if (cue.type !== 'Cue List' && cue.type !== 'Cart') {
+      device.update('updateCueRow', { cue, workspace: device.data.workspaces[json.workspace_id] });
+    }
+  } else if (/reply\/cue_id\/(.*)\/(.*)Elapsed/.test(oscData.address)) {
     const workspace = device.data.workspaces[json.workspace_id];
-    const cue = workspace.cues[osc[2]];
+    let cueID;
+    let keyName;
+    device.data.lastElapsedMessage = device.data.ticks;
 
-    cue.postWaitElapsed = json.data;
-    lastElapsedUpdate = Date.now();
+    if (workspace?.version.startsWith('5.')) {
+      const addrParts = json.address.split('/');
+      cueID = addrParts[4];
+      keyName = addrParts[5];
+    } else {
+      const addrParts = json.address.split('/');
+      cueID = addrParts[2];
+      keyName = addrParts[3];
+    }
 
-    d.update("updateCueData", {'cue': cue, 'allCues': workspace.cues, 'workspace': workspace});
+    device.data.cueKeys[cueID][keyName] = json.data;
 
+    device.update('updateCueRow', { cue: device.data.cueKeys[cueID], workspace });
+  } else if (/reply\/workspace\/.*\/selectedCues/.test(oscData.address)) {
+    const workspace = device.data.workspaces[msgAddr[2]];
+    if (!workspace) {
+      return;
+    }
+    workspace.selected = [];
+    for (let i = 0; i < json.data.length; i++) {
+      workspace.selected.push(json.data[i].uniqueID);
+    }
+    device.update('updatePlaybackAndSelected', { workspace: device.data.workspaces[json.workspace_id] });
+  } else if (/update\/workspace\/.*\/cue_id\/.*/.test(oscData.address)) {
+    device.send(`/cue_id/${msgAddr[4]}/valuesForKeys`, [{ type: 's', value: valuesForKeysString }]);
+  } else if (/update\/workspace\/.*\/cueList\/.*\/playbackPosition/.test(oscData.address)) {
+    const workspace = device.data.workspaces[msgAddr[2]];
+    if (workspace) {
+      workspace.playbackPosition = oscData.args[0];
+      device.update('updatePlaybackAndSelected', { workspace: device.data.workspaces[msgAddr[2]] });
+    }
+  } else if (/update\/workspace\/.*\/dashboard/.test(oscData.address)) {
+    device.send(`/workspace/${msgAddr[2]}/selectedCues`);
+    device.send(`/cue_id/active/preWaitElapsed`);
+  }
+};
 
-  }else if(match(osc, ["update", "workspace", "*", "cue_id", "*"])){
+exports.update = function update(device, _doc, updateType, data) {
+  const doc = _doc;
+  if (updateType === 'updateCueRow') {
+    const $elem = doc.getElementById(data.cue.uniqueID);
+    if ($elem) {
+      if (data.cue.parent.type === 'Cart') {
+        $elem.outerHTML = device.templates.tile({
+          allCues: device.data.cueKeys,
+          cue: data.cue,
+          workspace: data.workspace,
+        });
+      } else {
+        $elem.outerHTML = device.templates.cue({
+          allCues: device.data.cueKeys,
+          cue: data.cue,
+          workspace: data.workspace,
+        });
+      }
+    }
+  } else if (updateType === 'updatePlaybackAndSelected') {
+    Array.from(doc.querySelectorAll('.selected')).forEach(($el) => {
+      $el.classList.remove('selected');
+    });
+    Array.from(doc.querySelectorAll('.playback-position')).forEach(($el) => {
+      $el.classList.remove('playback-position');
+    });
 
-    const workspace = d.data.workspaces[osc[2]];
-    
-    if(workspace){
-      const cueLists = Object.keys(workspace.cueLists);
-      const cueID = osc[4];
+    for (let i = 0; i < data.workspace.selected.length; i++) {
+      const $elem = doc.getElementById(data.workspace.selected[i]);
+      if ($elem) {
+        $elem.classList.add('selected');
+      }
+    }
 
-      if(cueID !== "[root group of cue lists"){
-        if(cueLists.includes(cueID)){
-          d.send(`/workspace/${workspace.uniqueID}/cue_id/${cueID}/children`);
+    const $playheadInfo = doc.getElementById('playhead-information');
+    const $playheadName = doc.getElementById('playhead-name');
+    const $playheadNotes = doc.getElementById('playhead-notes');
+
+    if (data.workspace.playbackPosition) {
+      const $cueRow = doc.getElementById(data.workspace.playbackPosition);
+      if ($cueRow) {
+        $cueRow.classList.add('playback-position');
+        $cueRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+
+      const cue = device.data.cueKeys[data.workspace.playbackPosition];
+      if (cue && $playheadName) {
+        $playheadName.setAttribute('class', `playhead-name cartColor-${cue.colorName} playhead-disarmed`);
+        $playheadInfo.classList.add('playhead-active');
+        if (cue.number) {
+          $playheadName.innerHTML = `${cue.number} &bull; ${cue.displayName}`;
+        } else {
+          $playheadName.innerHTML = cue.displayName;
+        }
+        if (cue.notes) {
+          $playheadNotes.innerHTML = cue.notes;
+        } else {
+          $playheadNotes.innerHTML = '<span style="color:#5C5C5C">Notes</span>';
+        }
+        if (!cue.armed) {
+          $playheadName.classList.add('playhead-disarmed');
+        } else {
+          $playheadName.classList.remove('playhead-disarmed');
         }
-
-        d.send(`/workspace/${osc[2]}/cue_id/${cueID}/valuesForKeys`, [
-          {type: 's', value: valuesForKeysString}
-        ]);
-
       }
+    } else {
+      $playheadName.setAttribute('class', `playhead-name`);
+      $playheadName.innerHTML = '<span style="color:#747574">[no cue on standby]</span>';
+      $playheadNotes.innerHTML = '';
+      $playheadInfo.classList.remove('playhead-active');
     }
-
-  
-  }else if(match(osc, ["update", "workspace", "*"])){
-    // occurs when cue lists are reordered or a list is deleted
-    d.send(`/workspace/${osc[2]}/cueLists`);
-
-
-  }else if(match(osc, ["update", "workspace", "*", "dashboard"])){
-    // this workspace might be new, let's check
-
-    if(d.data.workspaces[osc[2]]){
-      //
-    }else{
-      console.log("new workspace!");
-      d.send('/workspaces');
-    }
-
-
-  }else if(match(osc, ["update", "workspace", "*", "cueList", "*", "playbackPosition"])){
-
-    const workspace = d.data.workspaces[osc[2]];
-
-    if(workspace){
-      const cue = workspace.cues[oscData.args[0]];
-      
-      if(cue){
-        workspace.playbackPosition = oscData.args[0] ? cue.uniqueID : "";
-        d.update("updatePlaybackPosition", {'cue': cue});
-      }
-    }
-
-  }else if(match(osc, ["update", "workspace", "*", "disconnect"])){
-
-    delete d.data.workspaces[osc[2]];
-    d.draw();
-
-  }else{
-    // console.log(address)
   }
-
-
-  
 };
 
-
-const cueTemplate = _.template(fs.readFileSync(`./plugins/qlab/cue.ejs`));
-const tileTemplate = _.template(fs.readFileSync(`./plugins/qlab/tile.ejs`));
-const cartTemplate = _.template(fs.readFileSync(`./plugins/qlab/cart.ejs`));
-
-exports.update = function update(device, doc, updateType, data){
-
-  if(updateType === "updateCueData"){
-    const $elem = doc.getElementById(data.cue.uniqueID);
-
-    if($elem){
-
-      if(data.cue.type === "Cue List"){
-        $elem.outerHTML = `<h3>${data.workspace.displayName} &mdash; ${data.cue.name}</h3>`;
-
-      }else if(data.cue.type === "Cart"){
-        $elem.outerHTML = cartTemplate({'tileTemplate': tileTemplate, 'cueList': data.cue, 'allCues': data.workspace.cues});
-        
-      }else if(data.cue.cartPosition && data.cue.cartPosition[0] !== 0){
-        $elem.outerHTML = tileTemplate(data);
-        
-      }else{
-        $elem.outerHTML = cueTemplate(data);
-      }
-    }
-
-  }else if(updateType === "updatePlaybackPosition"){
-    Array.from(doc.getElementsByClassName("playback-position")).forEach(
-    ($elem, index, array) => {
-        $elem.classList.remove("playback-position");
-    });
-
-    const $elem = doc.getElementById(data.cue.uniqueID);
-    $elem.classList.add("playback-position");
-    $elem.scrollIntoView({behavior: "smooth", block: "center"});
-
+exports.heartbeat = function heartbeat(_device) {
+  const device = _device;
+  device.data.ticks++;
+  if (device.data.ticks % 10 === 0) {
+    device.send(`/thump`);
   }
-}
-
-
-
-
-
-
-
-
-
-const valuesForKeysString = 
-'["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",'
-+ '"type","children","preWait","postWait","currentDuration","colorName","continueMode",'
-+ '"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",'
-+ '"actionElapsed","postWaitElapsed","isPaused"]';
-
-function addChildrenToWorkspace(workspace, q){
-  const w = workspace;
-  w.cues[q.uniqueID] = q;
-  w.cues[q.uniqueID].nestedGroupModes = [];
-  w.cues[q.uniqueID].nestedGroupPosition = [];
-
-  if(q.cues){
-    q.cues.forEach(cue => {
-      addChildrenToWorkspace(w, cue);
-    });
+  if (device.data.ticks - device.data.lastElapsedMessage < 5) {
+    device.send(`/cue_id/active/preWaitElapsed`);
+    device.send(`/cue_id/active/postWaitElapsed`);
+    device.send(`/cue_id/active/actionElapsed`);
   }
-}
-
-
-function getValuesForKeys(device, workspaceID, q){
-  device.send(`/workspace/${workspaceID}/cue_id/${q.uniqueID}/valuesForKeys`, [
-    {type: 's', value: valuesForKeysString}
-  ]);
-  if(q.cues){
-    q.cues.forEach(cue => {
-      getValuesForKeys(device, workspaceID, cue);
-    });
-  }
-}
-
-
-function match(osc, array){
-  let out = true;
-  if(osc.length !== array.length){
-    return false;
-  }
-  array.forEach((m, i)=> {
-    if(osc[i] !== m && m !== "*"){
-      out = false;
-    }
-  });
-  return out;
-}
-
-let interval = 5;
-let heartbeatCount = 0;
-exports.heartbeat = function heartbeat(device) {
-  heartbeatCount++;
-
-  if(Date.now() - lastElapsedUpdate > 300){
-    interval = 5;
-  }else{
-    interval = 1;
-  }
-
-  if(heartbeatCount % interval === 0){
-    device.send(`/cue/active/preWaitElapsed`);
-    device.send(`/cue/active/actionElapsed`);
-    device.send(`/cue/active/postWaitElapsed`);
-  }
-
 };
 
+function insertChildCues(_device, _oldCues, newCues, _parent) {
+  const device = _device;
+  const newIDs = _.keyBy(newCues, 'uniqueID');
+  const oldCues = _oldCues;
+  const parent = _parent;
 
+  if (!oldCues) {
+    return;
+  }
 
+  for (let i = 0; i < oldCues.length; i++) {
+    const oldCue = oldCues[i];
+
+    if (!newIDs[oldCue.uniqueID]) {
+      oldCues.splice(i, 1);
+      i--;
+    }
+
+    const indexOfOldCueInNew = _.findIndex(newCues, (o) => o.uniqueID === oldCue.uniqueID);
+
+    if (indexOfOldCueInNew >= 0) {
+      const newCue = newCues[indexOfOldCueInNew];
+      oldCues[i].armed = newCue.armed;
+      oldCues[i].colorName = newCue.colorName;
+      oldCues[i].colorNameLive = newCue['colorName/live'];
+
+      oldCues[i].flagged = newCue.flagged;
+      oldCues[i].listName = newCue.listName;
+      oldCues[i].name = newCue.name;
+      oldCues[i].number = newCue.number;
+      oldCues[i].type = newCue.type;
+      oldCues[i].sortIndex = indexOfOldCueInNew;
+      oldCues[i].parent = parent;
+
+      newCue.used = true;
+
+      let keys = device.data.cueKeys[oldCues[i].uniqueID];
+      if (!keys) {
+        device.data.cueKeys[oldCues[i].uniqueID] = {};
+        keys = device.data.cueKeys[oldCues[i].uniqueID];
+      }
+
+      keys.cueInWorkspace = oldCues[i];
+
+      if (oldCues[i].type === 'Group' || oldCues[i].type === 'Cue List' || oldCues[i].type === 'Cart') {
+        insertChildCues(device, oldCues[i].cues, newCue.cues, oldCues[i]);
+      }
+    }
+  }
+  for (let i = 0; i < newCues.length; i++) {
+    const newCue = newCues[i];
+    if (newCue.used !== true) {
+      const newIndex = oldCues.push({
+        armed: newCue.armed,
+        colorName: newCue.colorName,
+        colorNameLive: newCue['colorName/live'],
+        flagged: newCue.flagged,
+        listName: newCue.listName,
+        name: newCue.name,
+        number: newCue.number,
+        type: newCue.type,
+        uniqueID: newCue.uniqueID,
+        sortIndex: i,
+        parent,
+      });
+
+      const freshCue = oldCues[newIndex - 1];
+
+      let keys = device.data.cueKeys[freshCue.uniqueID];
+      if (!keys) {
+        device.data.cueKeys[freshCue.uniqueID] = {};
+        keys = device.data.cueKeys[freshCue.uniqueID];
+      }
+
+      if (freshCue.parent === '[root group of cue lists]') {
+        keys.parentKeys = [];
+      } else {
+        keys.parentKeys = [...device.data.cueKeys[freshCue.parent.uniqueID].parentKeys];
+        keys.parentKeys.push(device.data.cueKeys[freshCue.parent.uniqueID]);
+      }
+
+      device.send(`/cue_id/${newCue.uniqueID}/valuesForKeys`, [{ type: 's', value: valuesForKeysString }]);
+
+      keys.cueInWorkspace = freshCue;
+
+      if (freshCue.type === 'Group' || freshCue.type === 'Cue List' || oldCues[i].type === 'Cart') {
+        freshCue.cues = [];
+        insertChildCues(device, freshCue.cues, newCue.cues, freshCue);
+      }
+    }
+  }
+  oldCues.sort((a, b) => a.sortIndex - b.sortIndex);
+}

plugins/qlab/styles.css

@@ -1,3 +1,6 @@
+body {
+  margin-bottom: 200px !important;
+}
 table {
   background-color: #323232;
   border: 0px;
@@ -33,61 +36,60 @@ td img {
 }
 
 tr:nth-child(even) {
-  background: #323232;
+  background: #2d2d2d;
 }
 tr:nth-child(odd) {
-  background: #2c2c2c;
+  background: #262626;
 }
 
-tr:nth-child(even).q-red {
-  background: linear-gradient(to top, #2c2c2c, #4c3130 1px);
-}
 tr:nth-child(odd).q-red {
-  background: linear-gradient(to top, #323232, #513635 1px);
+  background: linear-gradient(to top, #262626, #49302f 1px);
 }
-.q-red td:first-of-type {
-  padding-left: 5px;
-  border-left: 5px #ff4242 solid;
+tr:nth-child(even).q-red {
+  background: linear-gradient(to top, #2d2c2d, #513635 1px);
+}
+.q-red td.playhead {
+  background: linear-gradient(to right, #ff4242 55%, transparent 55%);
+}
+
+tr:nth-child(odd).q-orange {
+  background: linear-gradient(to top, #262626, #443526 1px);
 }
 tr:nth-child(even).q-orange {
-  background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
+  background: linear-gradient(to top, #2d2c2d, #4a3b2c 1px);
 }
-tr:nth-child(odd).q-orange {
-  background: linear-gradient(to top, #323232, #514330 1px);
+.q-orange td.playhead {
+  background: linear-gradient(to right, #ffa500 55%, transparent 55%);
 }
-.q-orange td:first-of-type {
-  padding-left: 5px;
-  border-left: 5px #ffa500 solid;
+
+tr:nth-child(odd).q-green {
+  background: linear-gradient(to top, #262626, #2d3d27 1px);
 }
 tr:nth-child(even).q-green {
-  background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
+  background: linear-gradient(to top, #2d2c2d, #32422e 1px);
 }
-tr:nth-child(odd).q-green {
-  background: linear-gradient(to top, #323232, #324b33 1px);
+.q-green td.playhead {
+  background: linear-gradient(to right, #01d52f 55%, transparent 55%);
 }
-.q-green td:first-of-type {
-  padding-left: 5px;
-  border-left: 5px #01d52f solid;
+
+tr:nth-child(odd).q-blue {
+  background: linear-gradient(to top, #262626, #292d40 1px);
 }
 tr:nth-child(even).q-blue {
-  background: linear-gradient(to top, #2c2c2c, #323647 1px);
+  background: linear-gradient(to top, #2d2c2d, #2f3346 1px);
 }
-tr:nth-child(odd).q-blue {
-  background: linear-gradient(to top, #323232, #363b4b 1px);
+.q-blue td.playhead {
+  background: linear-gradient(to right, #536de0 55%, transparent 55%);
 }
-.q-blue td:first-of-type {
-  padding-left: 5px;
-  border-left: 5px #536de0 solid;
+
+tr:nth-child(odd).q-purple {
+  background: linear-gradient(to top, #262626, #342639 1px);
 }
 tr:nth-child(even).q-purple {
-  background: linear-gradient(to top, #2c2c2c, #39273d 1px);
+  background: linear-gradient(to top, #2d2c2d, #382c3f 1px);
 }
-tr:nth-child(odd).q-purple {
-  background: linear-gradient(to top, #323232, #433147 1px);
-}
-.q-purple td:first-of-type {
-  padding-left: 5px;
-  border-left: 5px #a601c0 solid;
+.q-purple td.playhead {
+  background: linear-gradient(to right, #a601c0 55%, transparent 55%);
 }
 
 tr.q-armed-false td {
@@ -96,13 +98,22 @@ tr.q-armed-false td {
 }
 
 tr.playback-position {
-  background-image: none !important;
-  background: #1557da !important;
-  color: white !important;
+  background: #444 !important;
+  color: white;
+}
+tr.playback-position td.playhead {
+  padding: 0px;
+}
+tr.playback-position td.playhead::before {
+  content: url(img/playhead.png);
 }
 tr.playback-position .q-gray-text {
   color: white !important;
 }
+tr.selected {
+  background: #1557da !important;
+  color: white !important;
+}
 
 .gLeft {
   height: 24px;
@@ -140,16 +151,19 @@ tr.playback-position .q-gray-text {
   border-radius: 6px;
 }
 .gMode-1 {
-  border-color: #5a5a87;
+  border-color: #48477f;
 }
 .gMode-2 {
-  border-color: #5a5a87;
+  border-color: #48477f;
 }
 .gMode-3 {
-  border-color: #429242;
+  border-color: #43a424;
 }
 .gMode-4 {
-  border-color: #925fc0;
+  border-color: #7f26a5;
+}
+.gMode-6 {
+  border-color: #ee6a21;
 }
 .gMode-,
 .gMode-0 {
@@ -157,7 +171,7 @@ tr.playback-position .q-gray-text {
 }
 .group-arrow {
   width: 13px;
-  background-image: url('img/arrow-down.png');
+  background-image: url('img/new_group_arrow.png');
   background-position: center;
   background-repeat: no-repeat;
 }
@@ -166,6 +180,12 @@ tr.playback-position .q-gray-text {
   font-size: 14px;
   text-align: center;
 }
+.q-target {
+  text-align: center;
+  font-size: 12px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
 .q-gray-text {
   color: #424242;
 }
@@ -187,6 +207,10 @@ tr.playback-position .q-gray-text {
   box-sizing: border-box;
   padding: 3px;
 }
+.cartCueWrapper.selected .cartCue {
+  border-color: #89b4db;
+  box-shadow: #89b4db 0px 0px 2px 3px;
+}
 .cartCue {
   height: 100%;
   box-sizing: border-box;
@@ -203,27 +227,27 @@ tr.playback-position .q-gray-text {
   right: 13px;
   top: 13px;
 }
-.cartColor-red {
-  border-color: #ff4242;
-  background-color: #9b3726;
+div.cartColor-red {
+  border-color: #e7443a;
+  background-color: #942f27;
 }
-.cartColor-orange {
-  border-color: #ffa500;
-  background-color: #ad6026;
+div.cartColor-orange {
+  border-color: #f18f28;
+  background-color: #a95023;
 }
-.cartColor-green {
-  border-color: #01d52f;
-  background-color: #397f27;
+div.cartColor-green {
+  border-color: #4ebf32;
+  background-color: #397824;
 }
-.cartColor-blue {
-  border-color: #536de0;
-  background-color: #304893;
+div.cartColor-blue {
+  border-color: #3a54cf;
+  background-color: #25378a;
 }
-.cartColor-purple {
-  border-color: #a601c0;
-  background-color: #592d74;
+div.cartColor-purple {
+  border-color: #7e25a5;
+  background-color: #4c2269;
 }
-.cartColor-none {
+div.cartColor-none {
   border-color: #95929f;
   background-color: #3b3b3b;
 }
@@ -237,6 +261,53 @@ tr.playback-position .q-gray-text {
   box-shadow: 0px 0px 3px 3px #88b3db, inset 0px 0px 5px #88b3db;
 }
 
+#playhead-information {
+  width: 80%;
+  height: 120px;
+  position: fixed;
+  bottom: 30px;
+  left: 10%;
+  padding: 16px;
+  box-sizing: border-box;
+
+  background-color: #2e2d2d;
+  border: #424242 3px solid;
+  border-radius: 4px;
+  box-shadow: black 0px 0px 20px 5px;
+}
+#playhead-information.playhead-active {
+  border-color: #4cbe34;
+}
+.playhead-name {
+  width: 100%;
+  padding: 6px 12px;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+
+  background-color: #434343;
+  border: #434343 1px solid;
+  font-size: 18px;
+  color: white;
+  border-radius: 3px;
+}
+.playhead-disarmed {
+  background: url('img/disarmed-pattern-light.png');
+  background-attachment: fixed;
+}
+#playhead-notes {
+  width: 100%;
+  padding: 6px 8px;
+  box-sizing: border-box;
+  height: 36px;
+
+  border: #5c5b5b 1px solid;
+  font-size: 18px;
+  color: #9a9a99;
+  border-radius: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 @media screen and (min-width: 0px) and (max-width: 750px) {
   .hide-medium {
     display: none;

plugins/qlab/template.ejs

@@ -3,43 +3,42 @@
   <h2>QLab <%= data.version || "" %></h2>
 </header>
 
-<%
-  const fs = require('fs');
-  let _ = require('lodash');
-
-  let cueTemplate = _.template(fs.readFileSync(`./plugins/qlab/cue.ejs`));
-  let tileTemplate = _.template(fs.readFileSync(`./plugins/qlab/tile.ejs`));
-  let cartTemplate = _.template(fs.readFileSync(`./plugins/qlab/cart.ejs`));
-  let listTemplate = _.template(fs.readFileSync(`./plugins/qlab/cuelist.ejs`));
-
-%>
 
 
+<% const workspaceKeys = Object.keys(data.workspaces); %>
 
-<%
-  for(const workspace_id in data.workspaces){
-  const workspace = data.workspaces[workspace_id];
+<% if(workspaceKeys.length==0){ %>
+  <h3>QLab is open but there isn't an open Workspace</h3>
+<% } %>
 
-  for(const cueList_id in workspace.cueLists){
-  const ql = workspace.cueLists[cueList_id];
-%>
+  
+<% for(let i=0; i<workspaceKeys.length; i++){ %>
+  <% const workspace = data.workspaces[workspaceKeys[i]]; %>
 
+  <% if(workspace.permission=="ok"){ %>
 
+    <% for(let j=0; j<workspace.cueLists.length; j++){ %>
+      <% const cueList = workspace.cueLists[j]; %>
 
-  <% if(ql.type=="Cue List"){ %>
-
-    <%= listTemplate({cueList: ql, allCues: workspace.cues, rowTemplate: cueTemplate, workspace: workspace}) %>
-
-  <% }else if(ql.type=="Cart"){ %>
-
-    <%= cartTemplate({cueList: ql, allCues: workspace.cues, tileTemplate: tileTemplate}) %>
+      <% if(cueList.type=="Cue List"){ %>
+        <%= templates.cuelist({cueList: cueList, allCues: data.cueKeys, rowTemplate: templates.cue, workspace: workspace}) %>
+      <% }else if(cueList.type=="Cart"){ %>
+        <%= templates.cart({cueList: cueList, allCues: data.cueKeys, tileTemplate: templates.tile, workspace: workspace}) %>
+      <% } %>
 
+    <% } %>
+  
+  <% }else{ %>
 
+    <h3><%= workspace.displayName %> &mdash; <u>Incorrect Passcode or OSC Access Permissions</u></h3>
+    <button href="https://qlab.app/docs/v5/fundamentals/workspace-settings#the-osc-access-tab">QLab Documentation: OSC Access Tab</button>
+    <h1>&nbsp;</h1>
   <% } %>
 
+<% } %>
 
-
-<% }} %>
-
-
+<div id="playhead-information">
+  <div id="playhead-name" class="playhead-name"><span style="color:#747574">[no cue on standby]</span></div>
+  <div id="playhead-notes"></div>
+</div>
 

plugins/qlab/tile.ejs

@@ -1,17 +1,17 @@
 <%
-
   let height = 0;
   let width = 0;
   let left = 0;
   let top = 0;
+  let cueKeys = allCues[cue.uniqueID];
+  let parent = allCues[cue.parent];
 
+  if(cueKeys.parent){
+    width = 100/cueKeys.parent.cartColumns;
+    height = 600/cueKeys.parent.cartRows;
 
-  if(cue.parent){
-    width = 100/allCues[cue.parent].cartColumns;
-    height = 600/allCues[cue.parent].cartRows;
-
-    top = (cue.cartPosition[0]-1)*height;
-    left = (cue.cartPosition[1]-1)*width;
+    top = (cueKeys.cartPosition[0]-1)*height;
+    left = (cueKeys.cartPosition[1]-1)*width;
   }
 
   let style = `style="left:${left}%; top:${top}px; width:${width }%; height:${height}px;"`;
@@ -21,17 +21,21 @@
 <div id="<%= cue.uniqueID %>" class="cartCueWrapper" <%= style %> > 
 
   <div class="cartCueIcon">
-    <% if(cue.broken){ %>
+    <% if(cueKeys.isBroken){ %>
       <img src="plugins/qlab/img/status_broken_white.png" height="18px">
-    <% }else if(cue.running){ %>
+    <% }else if(cueKeys.isRunning){ %>
       <img src="plugins/qlab/img/pause_circled.png" height="24px">
     <% }else{ %>
       <img src="plugins/qlab/img/play_circled.png" height="24px">
     <% } %>
   </div>
 
-  <div class="cartCue cartColor-<%= cue.colorName %>">
-    <p><%= cue.number %> &bull;  <%= cue.displayName %></p>
+  <div class="cartCue cartColor-<%= cueKeys.colorName %>">
+    <p>
+      <%= cueKeys.number %>
+      <% if(cueKeys.number){ %> &bull; <% } %>
+      <%= cueKeys.displayName %>
+    </p>
   </div>
 
 </div>

plugins/sacn/info.html

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

plugins/sacn/main.js

@@ -1,152 +1,135 @@
 const _ = require('lodash');
 
-exports.defaultName = 'sACN';
-exports.connectionType = 'multicast';
-exports.defaultPort = 5568;
-exports.heartbeatInterval = 5000;
-exports.searchOptions = {
-  type: "multicast",
-  address: getMulticastGroup(1),
-  port: 5568,
-  validateResponse (msg, info) {
-    return msg.toString('utf8', 4, 13) === "ASC-E1.17";
+exports.config = {
+  defaultName: 'sACN',
+  connectionType: 'multicast',
+  remotePort: 5568,
+  mayChangePorts: false,
+  heartbeatInterval: 5000,
+  heartbeatTimeout: 15000,
+  searchOptions: {
+    type: 'multicast',
+    address: getMulticastGroup(1),
+    port: 5568,
+    validateResponse(msg, info) {
+      return msg.toString('utf8', 4, 13) === 'ASC-E1.17';
+    },
   },
 };
-exports.defaultPort = 5568;
 
 exports.ready = function ready(device) {
-
   const d = device;
   d.data.universes = {};
-  d.data.source = "Unknown Source";
+  d.data.priorities = {};
+  d.data.source = 'Unknown Source';
   d.data.orderedUniverses = [];
 
-  // device.draw();
-  for(let i = 1; i <= 16; i++){
-    d.connection.addMembership(getMulticastGroup(i));
+  const networkInterfaces = d.getNetworkInterfaces();
+
+  for (let i = 1; i <= 16; i++) {
+    for (let j = 0; j < Object.keys(networkInterfaces).length; j++) {
+      const networkInterfaceID = Object.keys(networkInterfaces)[j];
+      const networkInterface = networkInterfaces[networkInterfaceID];
+      d.connection.addMembership(getMulticastGroup(i), networkInterface[0].address);
+    }
   }
-  
 };
 
+exports.data = function data(_device, buf) {
+  const universeIndex = buf.readUInt16BE(113);
+  const device = _device;
 
-exports.data = function data(device, buf) {
+  let universe = device.data.universes[universeIndex];
+  let priorities = device.data.priorities[universeIndex];
 
-  const univ = buf.readUInt16BE(113);
-  const d = device;
-
-  let u = d.data.universes[univ];
-
-  if(!u){
-    d.data.universes[univ] = {};
-    u = d.data.universes[univ];
+  if (!universe) {
+    device.data.universes[universeIndex] = {};
+    universe = device.data.universes[universeIndex];
+  }
+  if (!priorities) {
+    device.data.priorities[universeIndex] = new Array(512).fill(0);
+    priorities = device.data.priorities[universeIndex];
   }
 
-  u.sequence = buf.readUInt8(111);
-  u.priority = buf.readUInt8(108);
-  u.cid = buf.toString('hex', 22, 38);
-  u.slots = Array.prototype.slice.call(buf, 126);
-  if(buf.readUInt8(125) !== 0){
-    u.startCode = buf.readUInt8(125);
+  universe.sequence = buf.readUInt8(111);
+  universe.priority = buf.readUInt8(108);
+  universe.cid = buf.toString('hex', 22, 38);
+  universe.slots = buf.slice(126);
+  universe.startCode = buf.readUInt8(125);
+
+  device.data.source = buf.toString('utf8', 44, 108);
+  device.displayName = `${device.data.source} sACN`;
+  device.data.ip = device.addresses[0];
+
+  if (!_.includes(device.data.orderedUniverses, universeIndex)) {
+    device.data.orderedUniverses.push(universeIndex);
+    device.data.orderedUniverses.sort();
+    universe.slotElems = [];
+    universe.slotElemsSet = false;
+
+    if (universe.priority > 0 && universe.startCode === 0) {
+      device.draw();
+      device.update('elementCache');
+    }
   }
-
-
-  d.data.source = buf.toString('utf8', 44, 108);
-  d.displayName = `${d.data.source} sACN`;
-  d.data.ip = d.addresses[0];
-
-  if(!_.includes(d.data.orderedUniverses, univ)){
-    d.data.orderedUniverses.push(univ);
-    d.data.orderedUniverses.sort();
-    u.slotElems = [];
-    u.slotElemsSet = false;
-
-    d.draw();
-    updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
-
+  if (universe.priority > 0 && universe.startCode === 0) {
+    device.update('universeData', {
+      universeIndex,
+      universe,
+      startCode: universe.startCode,
+    });
+  } else {
+    device.data.priorities[universeIndex] = buf.slice(126);
   }
-
-  d.update("universeData", {
-    u: univ,
-    universe: u,
-    startCode: u.startCode
-  });
-
 };
 
-
-exports.heartbeat = function heartbeat(device) {
- 
-};
-
-
+exports.heartbeat = function heartbeat(device) {};
 
 let lastUpdate = Date.now();
-exports.update = function update(device, doc, updateType, updateData){
-
-  const d = device;
+exports.update = function update(_device, doc, updateType, updateData) {
+  const device = _device;
   const data = updateData;
 
-  if(updateType === "universeData" && data.universe){
-
-    if(Date.now() - lastUpdate > 1000){
+  if (updateType === 'universeData' && data.universe) {
+    if (Date.now() - lastUpdate > 1000) {
       lastUpdate = Date.now();
-      updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+      device.update('elementCache');
     }
 
-    const $elem = doc.getElementById(`universe-${data.u}`);
-
-    if($elem && data.universe.slotElemsSet){
-
-      if(data.universe.priority > 0){
-        for(let i = 0; i < 512; i++){
-          data.universe.slotElems[i].innerText = data.universe.slots[i];
-        }
-
-        const $code = doc.getElementById(`universe-${data.u}-code`);
-        if(data.startCode === 0xDD){
-          $code.innerText = "Net3"
-        }else if(data.startCode === 0x17){
-          $code.innerText = "Text"
-        }else if(data.startCode === 0xCF){
-          $code.innerText = "SIP"
-        }else if(data.startCode === 0xCC){
-          $code.innerText = "RDM"
-        }
+    const $elem = doc.getElementById(`universe-${data.universeIndex}`);
 
+    if ($elem && data.universe.slotElemsSet) {
+      for (let i = 0; i < 512; i++) {
+        data.universe.slotElems[i].textContent = data.universe.slots[i];
       }
-
-    }else{
-      d.draw();
-      updateElementsCache(d, d.data.universes, d.data.orderedUniverses);
+      const $code = doc.getElementById(`universe-${data.universeIndex}-code`);
+      if (data.startCode === 0xdd) {
+        $code.textContent = 'Net3';
+      } else if (data.startCode === 0x17) {
+        $code.textContent = 'Text';
+      } else if (data.startCode === 0xcf) {
+        $code.textContent = 'SIP';
+      } else if (data.startCode === 0xcc) {
+        $code.textContent = 'RDM';
+      }
+    } else if (data.universe.startCode === 0) {
+      device.draw();
+      device.update('elementCache');
     }
+  } else if (updateType === 'elementCache') {
+    device.data.orderedUniverses.forEach((universeIndex) => {
+      const universe = device.data.universes[universeIndex];
 
-  }else if(updateType === "elementCache"){
-
-    data.orderedUniverses.forEach(univ => { 
-      for(let i = 0; i < 512; i++){
-        data.universes[univ].slotElems[i] = doc.getElementById(`${univ}-${i}`);
+      if (doc.getElementById(`${universeIndex}-0`)) {
+        for (let i = 0; i < 512; i++) {
+          universe.slotElems[i] = doc.getElementById(`${universeIndex}-${i}`);
+          universe.slotElems[i].title = `${universeIndex}/${i}   ${device.data.priorities[universeIndex][i]}`;
+        }
+        universe.slotElemsSet = true;
       }
-      data.universes[univ].slotElemsSet = true;
     });
-
   }
-  
-
-}
-
-
-function updateElementsCache(device, univ, ordered){
-  device.update("elementCache", {
-    universes: univ,
-    orderedUniverses: ordered
-  });
-}
-
-
-
-
-
-
+};
 
 // From https://github.com/hhromic/e131-node/blob/master/lib/e131.js
 function getMulticastGroup(universe) {
@@ -154,5 +137,4 @@ function getMulticastGroup(universe) {
     throw new RangeError('universe should be in the range [1-63999]');
   }
   return `239.255.${universe >> 8}.${universe & 0xff}`;
-  
-}
+}