stagehacks/Cue-View
1
0
Fork 0
mirror of https://github.com/stagehacks/Cue-View.git synced 2026-08-08 23:33:39 +00:00
Code Issues Packages Projects Releases 9 Wiki Activity

add Cue Carts, finally

Browse Source
This commit is contained in:
sparks-alec
2022-01-15 00:25:58 -05:00
parent 0ba876384a
commit 6be6b8d944
6 changed files with 174 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/qlab/img/pause_circled.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

plugins/qlab/img/play_circled.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

plugins/qlab/img/status_broken_white.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

plugins/qlab/qlab.css
+55
View File
@@ -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;
plugins/qlab/qlab.html
+86 -13
View File
@@ -9,17 +9,19 @@
<td></td> <!-- playhead/color indicator -->
<td><center>
<% if(cue.broken){ %>
<td><center><img src="plugins/qlab/img/status_broken.png" height="18px"></center></td>
<img src="plugins/qlab/img/status_broken.png" height="18px">
<% }else if(cue.running){ %>
<td><center><img src="plugins/qlab/img/status_running.png" height="18px"></center></td>
<img src="plugins/qlab/img/status_running.png" height="18px">
<% }else if(cue.loaded){ %>
<td><center><img src="plugins/qlab/img/status_loaded.png" height="18px"></center></td>
<img src="plugins/qlab/img/status_loaded.png" height="18px">
<% }else if(cue.flagged){ %>
<td><center><img src="plugins/qlab/img/status_flagged.png" height="20px"></center></td>
<img src="plugins/qlab/img/status_flagged.png" height="20px">
<% }else{ %>
<td></td>
<% } %>
</center></td>
<td><img src="plugins/qlab/img/<%= cue.type.toLowerCase() %>.png" height="20px"></td>
@@ -132,6 +134,10 @@
<% groupModes.pop(); %>
<% } %>
<% function cartTemplate(cueList, groupModes, depth, workspace){ %>
<% } %>
<header>
<h1><%= listName %></h1>
<h2><%= data.version || "" %></h2>
@@ -140,9 +146,80 @@
<% for(var i in data.workspaces){ %>
<% for(var j in data.workspaces[i].cueLists){ %>
<% let cueList = data.workspaces[i].cueLists[j] %>
<%
let cueList = data.workspaces[i].cueLists[j];
let width = 100/cueList.cartRows;
let height = 600/(cueList.cartColumns+1);
%>
<h3><%= cueList.listName %> - <%= data.workspaces[i].displayName %></h3>
<% if(cueList.type=="Cart"){ %>
<div class="cart">
<% for(let r=0; r<cueList.cartRows; r++){ %>
<% for(let c=0; c<cueList.cartColumns; c++){ %>
<div class="cartCueWrapper" style="
left: <%= width*c %>%;
top: <%=height*r%>px;
width: <%=width%>%;
height: <%=height%>px;
"><div class="cartCue cartBlank"></div></div>
<% } %>
<% } %>
<% for(var c in cueList.cues){
let cue = cueList.cues[c];
if(!cue.cartPosition){
continue;
}
let row = cue.cartPosition[0]-1;
let col = cue.cartPosition[1]-1;
let colPos = width*col;
let rowPos = height*row;
if(col>=cueList.cartColumns || row>=cueList.cartRows){
continue;
}
%>
<div class="cartCueWrapper " style="
left: <%=colPos%>%;
top: <%=rowPos%>px;
width: <%=width%>%;
height: <%=height%>px;
">
<div class="cartCueIcon">
<% if(cue.broken){ %>
<img src="plugins/qlab/img/status_broken_white.png" height="18px">
<% }else if(cue.running){ %>
<img src="plugins/qlab/img/pause_circled.png" height="24px">
<% }else{ %>
<img src="plugins/qlab/img/play_circled.png" height="24px">
<% } %>
</div>
<div class="cartCue cartColor-<%= cue.colorName %>">
<p><%= cue.number %> &bull; <%= cue.displayName %></p>
</div>
</div>
<% } %>
</div>
<% }else{ %>
<% cueListOffset = 0 %>
<table cellspacing="0">
<tr>
@@ -169,18 +246,14 @@
<img src="plugins/qlab/img/auto_continue_stubby.png" height="20px">
</th>
</tr>
<% cueTemplate(cueList, [], [], data.workspaces[i]) %>
<% cueTemplate(cueList, [], [], data.workspaces[i]); %>
</table>
<% } %>
<% } %>
<% } %>
<script>
var $scrollTo = document.getElementsByClassName("scroll-position");
if($scrollTo.length==1){
window.scroll({top: $scrollTo[0].offsetTop-200, behavior: 'smooth'});
}
</script>
<%
function prettyFormatTime(seconds){
plugins/qlab/qlab.js
+33 -16
View File
@@ -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') {