diff --git a/plugins/qlab/img/pause_circled.png b/plugins/qlab/img/pause_circled.png new file mode 100644 index 0000000..78d7b51 Binary files /dev/null and b/plugins/qlab/img/pause_circled.png differ diff --git a/plugins/qlab/img/play_circled.png b/plugins/qlab/img/play_circled.png new file mode 100644 index 0000000..2de8ba7 Binary files /dev/null and b/plugins/qlab/img/play_circled.png differ diff --git a/plugins/qlab/img/status_broken_white.png b/plugins/qlab/img/status_broken_white.png new file mode 100644 index 0000000..91c5d83 Binary files /dev/null and b/plugins/qlab/img/status_broken_white.png differ diff --git a/plugins/qlab/qlab.css b/plugins/qlab/qlab.css index fd51fbe..155ee66 100644 --- a/plugins/qlab/qlab.css +++ b/plugins/qlab/qlab.css @@ -170,6 +170,61 @@ tr.playback-position .q-gray-text { color: #424242; } +.cart{ + position: relative; + height: 600px; + width: 100%; + background-color: #2c2b2a; +} +.cartCueWrapper{ + display: block; + position: absolute; + box-sizing: border-box; + padding: 3px; +} +.cartCue{ + height: 100%; + box-sizing: border-box; + + border: 3px solid; + border-radius: 6px; + color: white; + font-size: 1.2em; +} +.cartCue p{ + margin: 10px; +} +.cartCueIcon{ + position: absolute; + right: 13px; + top: 13px; +} +.cartColor-red{ + border-color: #ff4242; + background-color: #9b3726; +} +.cartColor-orange{ + border-color: #ffa500; + background-color: #ad6026; +} +.cartColor-green{ + border-color: #01d52f; + background-color: #397f27; +} +.cartColor-blue{ + border-color: #536de0; + background-color: #304893; +} +.cartColor-purple{ + border-color: #a601c0; + background-color: #592d74; +} +.cartBlank{ + border-color: #1f1f1f; + background-color: #1f1f1f; +} + + @media screen and (min-width: 0px) and (max-width: 750px) { .hide-medium { display: none; diff --git a/plugins/qlab/qlab.html b/plugins/qlab/qlab.html index a219aaa..ba75dde 100644 --- a/plugins/qlab/qlab.html +++ b/plugins/qlab/qlab.html @@ -9,17 +9,19 @@ +
<% if(cue.broken){ %> -
+ <% }else if(cue.running){ %> -
+ <% }else if(cue.loaded){ %> -
+ <% }else if(cue.flagged){ %> -
+ <% }else{ %> - + <% } %> +
@@ -132,6 +134,10 @@ <% groupModes.pop(); %> <% } %> +<% function cartTemplate(cueList, groupModes, depth, workspace){ %> + +<% } %> +

<%= listName %>

<%= data.version || "" %>

@@ -140,9 +146,80 @@ <% for(var i in data.workspaces){ %> <% for(var j in data.workspaces[i].cueLists){ %> - <% let cueList = data.workspaces[i].cueLists[j] %> + <% + let cueList = data.workspaces[i].cueLists[j]; + let width = 100/cueList.cartRows; + let height = 600/(cueList.cartColumns+1); + %> +

<%= cueList.listName %> - <%= data.workspaces[i].displayName %>

+ + + <% if(cueList.type=="Cart"){ %> + +
+ + <% for(let r=0; r + <% for(let c=0; c +
+ <% } %> + <% } %> + + + <% for(var c in cueList.cues){ + let cue = cueList.cues[c]; + + if(!cue.cartPosition){ + continue; + } + + let row = cue.cartPosition[0]-1; + let col = cue.cartPosition[1]-1; + + let colPos = width*col; + let rowPos = height*row; + + if(col>=cueList.cartColumns || row>=cueList.cartRows){ + continue; + } + %> + +
+ +
+ <% if(cue.broken){ %> + + <% }else if(cue.running){ %> + + <% }else{ %> + + <% } %> +
+
+

<%= cue.number %> • <%= cue.displayName %>

+
+ +
+ + <% } %> + +
+ + + + <% }else{ %> + <% cueListOffset = 0 %> @@ -169,18 +246,14 @@ - <% cueTemplate(cueList, [], [], data.workspaces[i]) %> + <% cueTemplate(cueList, [], [], data.workspaces[i]); %>
+ + <% } %> <% } %> <% } %> - <% function prettyFormatTime(seconds){ diff --git a/plugins/qlab/qlab.js b/plugins/qlab/qlab.js index c00f6eb..8b38994 100644 --- a/plugins/qlab/qlab.js +++ b/plugins/qlab/qlab.js @@ -14,7 +14,7 @@ exports.data = function (device, osc) { const p = osc.address.split('/'); p.shift(); - // console.log(address) + //console.log(address) if (osc.address == '/reply/workspaces') { const d = JSON.parse(osc.args[0]).data; @@ -45,13 +45,20 @@ exports.data = function (device, osc) { device.data.workspaces[workspace].cueLists[d[i].uniqueID].cues = d[i].cues; + device.data.workspaces[workspace].allCues[d[i].uniqueID] = d[i]; + + if(d[i].type=="Cart"){ + device.send(`/cue_id/${d[i].uniqueID}/cartColumns`); + device.send(`/cue_id/${d[i].uniqueID}/cartRows`); + } + function getMoreCueInfo(group, groups_arg) { const groups = JSON.parse(JSON.stringify(groups_arg)); groups.push(group.uniqueID); for (let cueIndex in group.cues) { const cue = group.cues[cueIndex]; - // console.log(cue) + //console.log(cue) device.data.lastCueInGroup[group.uniqueID] = cue; @@ -62,7 +69,7 @@ exports.data = function (device, osc) { { type: 's', value: - '["mode", "parent", "isBroken", "preWait", "duration", "postWait", "continueMode", "cueTargetNumber", "isLoaded", "isRunning"]', + '["mode", "parent", "isBroken", "preWait", "duration", "postWait", "continueMode", "cueTargetNumber", "isLoaded", "isRunning", "cartPosition", "displayName"]', }, ] ); @@ -75,10 +82,14 @@ exports.data = function (device, osc) { } device.data.workspaces[workspace].allCues[cue.uniqueID] = cue; + + } } getMoreCueInfo(d[i], []); + + } // console.log(device.data.lastCueInGroup) @@ -91,28 +102,26 @@ exports.data = function (device, osc) { p[1] == 'workspace' && p[5] == 'playbackPosition' ) { - console.log('pb move'); + //console.log('pb move'); device.data.playbackPosition = osc.args[0]; device.draw(); } else if (p[0] == 'reply' && p[1] == 'cue_id') { + + const d = JSON.parse(osc.args[0]); + const cueID = p[2]; + const workspace = d.workspace_id; + const cueList = d.data.parent; + if (p[3] == 'uniqueID') { // response to /cue/playbackPosition/uniqueID - device.data.playbackPosition = JSON.parse(osc.args[0]).data; - } else if (p[3] == 'mode') { - const cueID = p[2]; - const mode = JSON.parse(osc.args[0]).data; - const workspaceID = JSON.parse(osc.args[0]).workspace_id; + device.data.playbackPosition = d.data; + + } else if (p[3] == 'mode') { + device.data.workspaces[workspace].allCues[cueID].mode = d.data; - device.data.workspaces[workspaceID].allCues[cueID].mode = mode; } else if (p[3] == 'valuesForKeys') { this.deviceInfoUpdate(device, 'status', 'ok'); - const d = JSON.parse(osc.args[0]); - - const cueID = p[2]; - const workspace = d.workspace_id; - const cueList = d.data.parent; - device.data.workspaces[workspace].allCues[cueID].mode = d.data.mode; device.data.workspaces[workspace].allCues[cueID].preWait = d.data.preWait; device.data.workspaces[workspace].allCues[cueID].duration = @@ -127,6 +136,14 @@ exports.data = function (device, osc) { device.data.workspaces[workspace].allCues[cueID].broken = d.data.isBroken; device.data.workspaces[workspace].allCues[cueID].running = d.data.isRunning; + device.data.workspaces[workspace].allCues[cueID].cartPosition = + d.data.cartPosition; + device.data.workspaces[workspace].allCues[cueID].displayName = + d.data.displayName; + }else if(p[3] == 'cartColumns'){ + device.data.workspaces[workspace].allCues[cueID].cartColumns = d.data; + }else if(p[3] == 'cartRows'){ + device.data.workspaces[workspace].allCues[cueID].cartRows = d.data; } device.draw(); } else if (p[1] == 'workspace' && p[3] == 'selectionIsPlayhead') {