change plugin filenames

plugins/qlab/cue.ejs

@@ -1,4 +1,5 @@
-<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %>" id="<%= cue.uniqueID %>">
+<% let playbackPosition = workspace.playbackPosition==cue.uniqueID ? "playback-position" : "" %>
+<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%= playbackPosition %>" id="<%= cue.uniqueID %>">
 
   <td></td> <!-- playhead/color indicator -->
 
@@ -9,6 +10,9 @@
   <% }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">
 
@@ -79,7 +83,7 @@
 
 
   <% if(cue.preWait){ %>
-    <td class="q-time hide-small"><%= prettyFormatTime(cue.preWait) %></td>
+    <td class="q-time hide-medium"><%= elapsedTime(cue.preWait, cue.preWaitElapsed, "preWait", cue) %></td>
 
   <% }else{ %>
     <td class="q-time q-gray-text hide-small">00:00.00</td>
@@ -87,9 +91,9 @@
   <% } %>
 
 
-
-  <% if(cue.duration || (cue.type=="Group" && cue.mode==3)){ %>
-    <td class="q-time hide-medium"><%= prettyFormatTime(cue.duration) %></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>
@@ -99,7 +103,7 @@
 
 
   <% if(cue.postWait){ %>
-    <td class="q-time q-gray-text hide-medium"><%= prettyFormatTime(cue.postWait) %></td>
+    <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>
@@ -124,6 +128,9 @@
 
 <% 
   function prettyFormatTime(seconds){
+    if(!seconds){
+      return "00:00.00";
+    }
     var startIndex = 14;
     if(seconds>=3600){
       startIndex = 11;
@@ -131,4 +138,40 @@
     var string = new Date(seconds * 1000).toISOString()
     return string.substring(startIndex, string.length-2)
   }
+
+  function elapsedTime(def, value, type, cue){
+
+    if(type=="action" && cue.paused){
+      value-=cue.preWait;
+    }
+
+    let border, fill;
+    if(cue.paused){
+      border = "#f6e737";
+      fill = "rgba(255, 240, 60, 0.7)";
+    }else{
+      border = "#48ba41";
+      fill = "rgba(0, 200, 50, 0.5)";
+    }
+
+
+    if(value>0){
+      let percent = value/def*100;
+      let bg = "background: black; background: linear-gradient(90deg, "+fill+" "+percent+"%, transparent "+percent+"%);";
+
+      if(cue.paused){
+        bg+= "outline-color: "+border+";";
+        bg+= "color: white;";
+      }
+      
+      return "<div class='q-time-elapsed' style='"+bg+"'>"+prettyFormatTime(Math.min(def, value))+"</span>";
+
+    }else if(type=="postWait" || type=="action"){
+      return "<span class='q-gray-text'>"+prettyFormatTime(def)+"</span>";
+
+    }else{
+      return prettyFormatTime(def);
+
+    }
+  }
 %>

plugins/qlab/cuelist.ejs

@@ -42,7 +42,7 @@
 function displayCueRow(q){
   let html = "";
 
-  html+= rowTemplate({cue: allCues[q.uniqueID], allCues: allCues});
+  html+= rowTemplate({cue: allCues[q.uniqueID], allCues: allCues, workspace: workspace});
 
   if(q.cues){
     q.cues.forEach(q =>{

plugins/qlab/main.js

@@ -1,13 +1,19 @@
 let _ = require('lodash');
+const fs = require('fs');
+
+let lastElapsedUpdate = Date.now();
 
 exports.defaultName = 'QLab 4';
 exports.connectionType = 'osc';
+exports.heartbeatInterval = 50;
+exports.heartbeatTimeout = 2000;
 exports.searchOptions = {
   type: 'Bonjour',
   bonjourName: 'qlab',
 };
 
 exports.ready = function (device) {
+  device.send(`/version`);
   device.send('/workspaces');
 };
 
@@ -17,16 +23,17 @@ exports.data = function (device, oscData) {
   osc.shift();
 
   let data;
-
   
   //console.log(address)
 
-  if(match(osc, ["reply", "version"])){ // heartbeat response
+  if(match(osc, ["reply", "version"])){
+
+    let json = JSON.parse(oscData.args[0]);
+    device.data.version = json.data;
 
     this.deviceInfoUpdate(device, 'status', 'ok');
 
 
-
   }else if(match(osc, ["reply", "workspaces"])){
     
     let json = JSON.parse(oscData.args[0]);
@@ -71,7 +78,9 @@ exports.data = function (device, oscData) {
       addChildrenToWorkspace(workspace, ql);
     });
 
+    console.log("total device draw 2");
     device.draw();
+    
 
     setTimeout(function(){
       json.data.forEach(ql => {
@@ -87,14 +96,16 @@ exports.data = function (device, oscData) {
     let json = JSON.parse(oscData.args[0]);
     let workspace = device.data.workspaces[json.workspace_id];
     let cue_id = osc[2];
+    let cue = workspace.cues[cue_id];
 
-    workspace.cueLists[cue_id].cues = json.data;
-    addChildrenToWorkspace(workspace, workspace.cueLists[cue_id]);
+    if(!_.isEqual(cue.cues, json.data)){
+      workspace.cueLists[cue_id].cues = json.data;
+      addChildrenToWorkspace(workspace, workspace.cueLists[cue_id]);
 
-    device.draw();
-
-    getValuesForKeys(device, json.workspace_id, workspace.cues[cue_id]);
+      device.draw();
 
+      getValuesForKeys(device, json.workspace_id, cue);
+    }
 
 
   }else if(match(osc, ["reply", "cue_id", "*", "valuesForKeys"])){
@@ -118,6 +129,7 @@ exports.data = function (device, oscData) {
     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;
@@ -130,6 +142,9 @@ exports.data = function (device, oscData) {
     cue.cartRows = cueValues.cartRows;
     cue.cartColumns = cueValues.cartColumns;
     cue.cartPosition = cueValues.cartPosition;
+    cue.preWaitElapsed = cueValues.preWaitElapsed;
+    cue.actionElapsed = cueValues.actionElapsed;
+    cue.postWaitElapsed = cueValues.postWaitElapsed;
 
     let nestedGroupModes = [];
     let nestedGroupPosition = [0];
@@ -147,9 +162,46 @@ exports.data = function (device, oscData) {
     cue.nestedGroupModes = nestedGroupModes;
     cue.nestedGroupPosition = nestedGroupPosition;
 
+    //console.log("draw "+cue.number)
+
     device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
 
 
+  }else if(match(osc, ["reply", "cue_id", "*", "preWaitElapsed"])){
+
+    let json = JSON.parse(oscData.args[0]);
+    let workspace = device.data.workspaces[json.workspace_id];
+    let cue = workspace.cues[osc[2]];
+
+    cue.preWaitElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "actionElapsed"])){
+
+    let json = JSON.parse(oscData.args[0]);
+    let workspace = device.data.workspaces[json.workspace_id];
+    let cue = workspace.cues[osc[2]];
+
+    cue.actionElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
+
+
+  }else if(match(osc, ["reply", "cue_id", "*", "postWaitElapsed"])){
+
+    let json = JSON.parse(oscData.args[0]);
+    let workspace = device.data.workspaces[json.workspace_id];
+    let cue = workspace.cues[osc[2]];
+
+    cue.postWaitElapsed = json.data;
+    lastElapsedUpdate = Date.now();
+
+    device.update("updateCueData", {cue: cue, allCues: workspace.cues, workspace: workspace});
+
 
   }else if(match(osc, ["update", "workspace", "*", "cue_id", "*"])){
 
@@ -157,17 +209,19 @@ exports.data = function (device, oscData) {
     let cueLists = Object.keys(workspace.cueLists);
     let cue_id = osc[4];
 
-    if(cueLists.includes(cue_id)){
-      device.send(`/workspace/${workspace.uniqueID}/cue_id/${cue_id}/children`);
-    }
+    if(cue_id!="[root group of cue lists"){
+      if(cueLists.includes(cue_id)){
+        device.send(`/workspace/${workspace.uniqueID}/cue_id/${cue_id}/children`);
+      }
 
-    device.send(`/workspace/${osc[2]}/cue_id/${cue_id}/valuesForKeys`, [
-      {type: 's', value: valuesForKeysString}
-    ]);
+      device.send(`/workspace/${osc[2]}/cue_id/${cue_id}/valuesForKeys`, [
+        {type: 's', value: valuesForKeysString}
+      ]);
+
+    }
 
   
   }else if(match(osc, ["update", "workspace", "*"])){
-    // nothing here yet
     // occurs when cue lists are reordered or a list is deleted
     device.send(`/workspace/${osc[2]}/cueLists`);
 
@@ -180,8 +234,11 @@ exports.data = function (device, oscData) {
 
     let workspace = device.data.workspaces[osc[2]];
     let cue = workspace.cues[oscData.args[0]];
+    workspace.playbackPosition = oscData.args[0] ? cue.uniqueID : "";
 
-    if(cue) device.update("updatePlaybackPosition", {cue: cue});
+    if(cue){
+      device.update("updatePlaybackPosition", {cue: cue});
+    }
 
   }else{
     console.log(address)
@@ -191,10 +248,57 @@ exports.data = function (device, oscData) {
   
 };
 
+
+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`));
+
+exports.update = function(device, doc, updateType, data){
+
+  if(updateType=="updateCueData"){
+    $elem = doc.getElementById(data.cue.uniqueID);
+
+    if($elem){
+
+      if(data.cue.type=="Cue List"){
+        $elem.outerHTML = '<h3>'+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(
+    function($elem, index, array) {
+        $elem.classList.remove("playback-position");
+    });
+    
+    doc.getElementById(data.cue.uniqueID).classList.add("playback-position");
+
+  }
+}
+
+
+
+
+
+
+
+
+
 const valuesForKeysString = 
 '["uniqueID","number","name","listName","isBroken","isRunning","isLoaded","isFlagged",'
 +'"type","children","preWait","postWait","currentDuration","colorName","continueMode",'
-+'"mode","parent","cartRows","cartColumns","cartPosition","displayName"]';
++'"mode","parent","cartRows","cartColumns","cartPosition","displayName","preWaitElapsed",'
++'"actionElapsed","postWaitElapsed","isPaused"]';
 
 function addChildrenToWorkspace(workspace, q){
   workspace.cues[q.uniqueID] = q;
@@ -234,7 +338,24 @@ function match(osc, array){
   return out;
 }
 
-
+let interval = 5;
+let heartbeatCount = 0;
 exports.heartbeat = function (device) {
-  device.send(`/version`);
-};
+  heartbeatCount++;
+
+  if(Date.now()-lastElapsedUpdate>300){
+    interval = 5;
+  }else{
+    interval = 1;
+  }
+
+  if(heartbeatCount%interval==0){
+    device.send(`/cue/active/preWaitElapsed`);
+    device.send(`/cue/active/actionElapsed`);
+    device.send(`/cue/active/postWaitElapsed`);
+  }
+
+};
+
+
+

plugins/qlab/qlab.html

@@ -1,99 +0,0 @@
-<header>
-  <h1><%= listName %></h1>
-  <h2><%= 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`));
-
-%>
-
-
-
-<%
-  for(const workspace_id in data.workspaces){
-  const workspace = data.workspaces[workspace_id];
-
-  for(const cueList_id in workspace.cueLists){
-  const ql = workspace.cueLists[cueList_id];
-%>
-
-
-
-  <% if(ql.type=="Cue List"){ %>
-
-    <%= listTemplate({cueList: ql, allCues: workspace.cues, rowTemplate: cueTemplate}) %>
-
-  <% }else if(ql.type=="Cart"){ %>
-
-    <%= cartTemplate({cueList: ql, allCues: workspace.cues, tileTemplate: tileTemplate}) %>
-
-
-  <% } %>
-
-
-
-<% }} %>
-
-
-
-<script src="node_modules/lodash/core.min.js"></script>
-
-<script>
-
-
-function updateElement(type, data){
-
-
-  if(type=="updateCueData"){
-    $elem = document.getElementById(data.cue.uniqueID);
-
-    if($elem){
-
-      if(data.cue.type=="Cue List"){
-        $elem.outerHTML = '<h3>'+data.workspace.displayName+' - '+data.cue.name+'</h3>';
-
-      }else if(data.cue.type=="Cart"){
-
-        $elem.outerHTML = cartTemplate({cueList: data.cue, allCues: data.workspace.cues});
-        
-      }else if(data.cue.cartPosition[0]!=0){
-        $elem.outerHTML = tileTemplate(data);
-        
-      }else{
-        $elem.outerHTML = cueTemplate(data);
-      }
-    }
-
-  }else if(type=="updatePlaybackPosition"){
-
-    Array.from(document.getElementsByClassName("playback-position")).forEach(
-    function($elem, index, array) {
-        $elem.classList.remove("playback-position");
-    });
-
-    document.getElementById(data.cue.uniqueID).classList.add("playback-position");
-  }
-  
-}
-
-
-
-</script>
-
-
-
-
-
-
-
-
-
-
-

plugins/qlab/styles.css

@@ -22,21 +22,21 @@ th.no-border {
 }
 
 td {
-  padding: 0px;
+  padding: -1px;
   height: 25px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 td img {
-  padding-top: 4px;
+  padding-top: 2px;
 }
 
 tr:nth-child(even) {
-  background: #2c2c2c;
+  background: #323232;
 }
 tr:nth-child(odd) {
-  background: #323232;
+  background: #2c2c2c;
 }
 
 tr:nth-child(even).q-red {
@@ -169,6 +169,14 @@ tr.playback-position .q-gray-text {
 .q-gray-text {
   color: #424242;
 }
+.q-time-elapsed {
+  margin:  0px 2px;
+  outline:  #49c042 1px solid;
+  line-height: 18px;
+}
+
+
+
 
 .cart{
   position: relative;

plugins/qlab/template.ejs

@@ -0,0 +1,45 @@
+<header>
+  <h1><%= listName %></h1>
+  <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`));
+
+%>
+
+
+
+<%
+  for(const workspace_id in data.workspaces){
+  const workspace = data.workspaces[workspace_id];
+
+  for(const cueList_id in workspace.cueLists){
+  const ql = workspace.cueLists[cueList_id];
+%>
+
+
+
+  <% if(ql.type=="Cue List"){ %>
+
+    <%= listTemplate({cueList: ql, allCues: workspace.cues, rowTemplate: cueTemplate, workspace: workspace}) %>
+
+  <% }else if(ql.type=="Cart"){ %>
+
+    <%= cartTemplate({cueList: ql, allCues: workspace.cues, tileTemplate: tileTemplate}) %>
+
+
+  <% } %>
+
+
+
+<% }} %>
+
+
+