First Commit

plugins/qlab/qlab.css

@@ -0,0 +1,189 @@
+table{
+	background-color: #323232;
+	border: 0px;
+	color: #b8b8b8;
+	font-family: sans-serif;
+	width: 100%;
+	table-layout:fixed;
+	margin-bottom: 30px;
+}
+th{
+	font-size: 12px;
+	font-weight: normal;
+	padding: 0px 4px;
+	background-color: #2d2c2d;
+	border: #545454 1px solid;
+	border-right: none;
+}
+	th.no-border{
+		border-left: none;
+		border-right: none;
+		padding: 0px;
+	}
+
+td{
+	padding: 0px;
+	height: 25px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+	td img{
+		padding-top: 4px;
+	}
+
+
+
+tr:nth-child(even) {
+	background: #2c2c2c;
+}
+tr:nth-child(odd) {
+	background: #323232;
+}
+
+
+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);
+}
+	.q-red td:first-of-type{
+		padding-left: 5px;
+		border-left: 5px #ff4242 solid;
+	}
+tr:nth-child(even).q-orange{
+	background: linear-gradient(to top, #2c2c2c, #4b3e2a 1px);
+}
+tr:nth-child(odd).q-orange{
+	background: linear-gradient(to top, #323232, #514330 1px);
+}
+	.q-orange td:first-of-type{
+		padding-left: 5px;
+		border-left: 5px #ffa500 solid;
+	}
+tr:nth-child(even).q-green{
+	background: linear-gradient(to top, #2c2c2c, #2d452d 1px);
+}
+tr:nth-child(odd).q-green{
+	background: linear-gradient(to top, #323232, #324b33 1px);
+}
+	.q-green td:first-of-type{
+		padding-left: 5px;
+		border-left: 5px #01d52f solid;
+	}
+tr:nth-child(even).q-blue{
+	background: linear-gradient(to top, #2c2c2c, #323647 1px);
+}
+tr:nth-child(odd).q-blue{
+	background: linear-gradient(to top, #323232, #363b4b 1px);
+}
+	.q-blue td:first-of-type{
+		padding-left: 5px;
+		border-left: 5px #536de0 solid;
+	}
+tr:nth-child(even).q-purple{
+	background: linear-gradient(to top, #2c2c2c, #39273d 1px);
+}
+tr:nth-child(odd).q-purple{
+	background: linear-gradient(to top, #323232, #433147 1px);
+}
+	.q-purple td:first-of-type{
+		padding-left: 5px;
+		border-left: 5px #a601c0 solid;
+	}
+
+tr.q-armed-false td{
+	background: url("img/disarmed-pattern-light.png");
+	background-attachment: fixed;
+}
+
+
+tr.playback-position{
+	background-image: none !important;
+	background: #1557da !important;
+	color: white !important;
+}
+tr.playback-position .q-gray-text{
+	color: white !important;
+}
+
+
+.gLeft{
+	height: 24px;
+	width: 12px;
+	border-left: 2px solid;
+}
+.gTop{
+	border-top: 2px solid;
+}
+.gBot{
+	border-bottom: 2px solid;
+}
+.gRight{
+	border-right: 2px solid;
+}
+.gMode-1.gLeft.gTop{
+	border-radius: 6px 0px 0px 0px;
+}
+.gMode-1.gLeft.gBot{
+	border-radius: 0px 0px 0px 6px;
+}
+.gMode-1.gRight.gBot{
+	border-radius: 0px 0px 6px 0px;
+}
+.gMode-1.gLeft.gTop.gBot{
+	border-radius: 6px 0px 0px 6px;
+}
+.gMode-1.gLeft.gTop.gRight{
+	border-radius: 6px 6px 0px 0px;
+}
+.gMode-1.gTop.gRight.gBot{
+	border-radius: 0px 6px 6px 0px;
+}
+.gMode-1.gLeft.gTop.gRight.gBot{
+	border-radius: 6px;
+}
+.gMode-1{
+	border-color: #5a5a87;
+}
+.gMode-2{
+	border-color: #5a5a87;
+}
+.gMode-3{
+	border-color: #429242;
+}
+.gMode-4{
+	border-color: #925fc0;
+}
+.gMode-, .gMode-0{
+	border-color: rgba(0, 0, 0, 0);
+}
+.group-arrow{
+	width: 13px;
+	background-image: url("img/arrow-down.png");
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
+.q-time{
+	font-size: 14px;
+	text-align: center;
+}
+.q-gray-text{
+	color: #424242;
+}
+
+
+
+@media screen and (min-width: 0px) and (max-width: 750px) {
+	.hide-medium{
+		display: none;
+	}
+}
+@media screen and (min-width: 0px) and (max-width: 550px) {
+	.hide-small{
+		display: none;
+	}
+}
+

plugins/qlab/qlab.html

@@ -0,0 +1,196 @@
+<% function cueTemplate(cueList, groupModes, depth, workspace){ %>
+
+	<% depth++ %>
+
+	<% for(var c in cueList.cues){ %>
+
+		<% var cue = cueList.cues[c] %>
+			<tr class="q-<%= cue.colorName %> q-armed-<%= cue.armed %> <%if(data.playbackPosition==cue.uniqueID){ %>playback-position scroll-position<% } %>" id="<%= cue.uniqueID %>">
+
+				<td></td> <!-- playhead/color indicator -->
+
+				<% if(cue.broken){ %>
+					<td><center><img src="plugins/qlab/img/status_broken.png" height="18px"></center></td>
+				<% }else if(cue.running){ %>
+					<td><center><img src="plugins/qlab/img/status_running.png" height="18px"></center></td>
+				<% }else if(cue.loaded){ %>
+					<td><center><img src="plugins/qlab/img/status_loaded.png" height="18px"></center></td>
+				<% }else if(cue.flagged){ %>
+					<td><center><img src="plugins/qlab/img/status_flagged.png" height="20px"></center></td>
+				<% }else{ %>
+					<td></td>
+				<% } %>
+
+
+				<td><img src="plugins/qlab/img/<%= cue.type.toLowerCase() %>.png" height="20px"></td>
+				<td><center><%- cue.number || "&nbsp;" %></center></td>
+
+				<%
+				var nextCueDepth = 0;
+				if(workspace.allCuesOrdered[cue.index+1]!=undefined){
+					nextCueDepth = workspace.allCuesOrdered[cue.index+1].groups.length-1;
+				}
+
+				%>
+				
+				
+
+				<!-- spacer cells before cue name --> 
+				<% for(var i=0; i<depth; i++){ %>
+
+					<% if(i==depth-1 && cue.type=="Group"){ %>
+
+						<% if(cue.cues.length==0){ %>
+							<td width="15px" class="group-arrow gMode-<%= cue.mode %> gLeft gTop gBot"></td>
+
+						<% }else{ %>
+							<td width="15px" class="group-arrow gMode-<%= cue.mode %> gLeft gTop"></td>
+
+						<% } %>
+
+					<% }else if(i<nextCueDepth){ %>
+						<td width="15px" class="gMode-<%= groupModes[i] %> gLeft"></td>
+
+					<% }else if(i>=nextCueDepth && i<depth-1 ){ %>
+						<td width="15px" class="gMode-<%= groupModes[i] %> gLeft gBot"></td>
+
+					<% }else if(i==depth-1 && i>nextCueDepth){ %>
+						<td width="15px" class="gMode-<%= groupModes[groupModes.length-1] %> gBot"></td>
+
+					<% }else{ %>
+						<td width="15px" ></td>
+
+					<% } %>
+
+				<% } %>
+
+				
+
+				<!-- cue name -->
+				<% if(cue.type=="Group"){ %>
+					<% if(cue.cues.length==0){ %>
+						<td colspan="<%= 11-depth %>" class="gMode-<%= cue.mode %> gTop gBot gRight"><%= cue.listName %></td>
+
+					<% }else{ %>
+						<td colspan="<%= 11-depth %>" class="gMode-<%= cue.mode %> gTop gRight"><%= cue.listName %></td>
+
+					<% } %>
+				<% }else if(depth>nextCueDepth+1){ %>
+					<td colspan="<%= 11-depth %>" class="gMode-<%= groupModes[groupModes.length-1] %> gBot gRight"><%= cue.listName %></td>
+
+				<% }else if(depth>1){ %>
+					<td colspan="<%= 11-depth %>" class="gMode-<%= groupModes[groupModes.length-1] %> gRight"><%= cue.listName %></td>
+
+				<% }else{ %>
+					<td colspan="<%= 11-depth %>"><%= cue.listName %></td>
+
+				<% } %>
+
+				<td class="q-time hide-medium"><%= cue.target %></td>
+
+				<% if(cue.preWait){ %>
+					<td class="q-time hide-small"><%= prettyFormatTime(cue.preWait) %></td>
+				<% }else{ %>
+					<td class="q-time q-gray-text hide-small">00:00.00</td>
+				<% } %>
+
+				<% if(cue.duration || (cue.type=="Group" && cue.mode==3)){ %>
+					<% %>
+					<td class="q-time hide-medium"><%= prettyFormatTime(cue.duration) %></td>
+				<% }else{ %>
+					<td class="hide-medium"></td>
+				<% } %>
+
+				<% if(cue.postWait){ %>
+					<td class="q-time q-gray-text hide-medium"><%= prettyFormatTime(cue.postWait) %></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>
+		<% if(cue.cues){ %>
+			<% groupModes.push(cue.mode) %>
+			<% cueTemplate(cue, groupModes, depth, workspace) %>
+		<% } %>
+
+	<% } %>
+	<% groupModes.pop(); %>
+<% } %>
+
+<header>
+	<h1><%= listName %></h1>
+	<h2><%= data.version || "" %></h2>
+</header>
+
+
+<% for(var i in data.workspaces){ %>
+	<% for(var j in data.workspaces[i].cueLists){ %>
+		<% let cueList = data.workspaces[i].cueLists[j] %>
+		<h3><%= cueList.listName %> - <%= data.workspaces[i].displayName %></h3>
+
+		<% cueListOffset = 0 %>
+		<table cellspacing="0">
+			<tr>
+				<th width="1px" 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" 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>
+				<th width="25px" class="no-border"></th>
+				<th width="25px" class="no-border"></th>
+				<th width="25px" class="no-border"></th>
+				<th width="25px" class="no-border"></th>
+				<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="20px" class="hide-small" style="border-left: none; border-right: none;">
+					<img src="plugins/qlab/img/auto_continue_stubby.png" height="20px">
+				</th>
+			</tr>
+			<% 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){
+		var startIndex = 14;
+		if(seconds>=3600){
+			startIndex = 11;
+		}
+		var string = new Date(seconds * 1000).toISOString()
+		return string.substring(startIndex, string.length-2)
+	}
+
+
+%>

plugins/qlab/qlab.js

@@ -0,0 +1,133 @@
+exports.defaultName = "QLab 4";
+exports.connectionType = "osc";
+exports.searchOptions = {
+	type: "Bonjour",
+	bonjourName: "qlab"
+}
+
+
+
+exports.ready = function(device){
+	device.send("/workspaces");
+}
+
+exports.data = function(device, osc){
+	var address = osc.address;
+	var p = osc.address.split("/");
+	p.shift();
+
+	//console.log(address)
+
+	if(osc.address=="/reply/workspaces"){
+		const d = JSON.parse(osc.args[0]).data;
+		device.data.workspaces = {};
+		for(var i=0; i<d.length; i++){
+			device.data.workspaces[d[i].uniqueID] = {
+				"displayName": d[i].displayName,
+				"selectionIsPlayhead": true,
+			}
+			device.data.version = d[i].version;
+			device.send("/workspace/"+d[i].uniqueID+"/cueLists");
+			device.send("/workspace/"+d[i].uniqueID+"/updates", [{type: "i", value: 1}]);
+			device.send("/cue/playbackPosition/uniqueID");
+			device.send("/workspace/"+d[i].uniqueID+"/selectionIsPlayhead");
+		}
+
+	}else if(p[1]=="workspace" && p[3]=="cueLists"){
+		var workspace = p[2];
+		var d = JSON.parse(osc.args[0]).data;
+		device.data.workspaces[workspace].cueLists = {};
+		device.data.workspaces[workspace].allCues = {};
+		device.data.workspaces[workspace].allCuesOrdered = [];
+		device.data.lastCueInGroup = {};
+
+		for(var i in d){
+
+			device.data.workspaces[workspace].cueLists[d[i].uniqueID]=d[i];
+			device.data.workspaces[workspace].cueLists[d[i].uniqueID].cues = d[i].cues;
+
+			getMoreCueInfo(d[i], []);
+
+			function getMoreCueInfo(group, groups_arg){
+				var groups = JSON.parse(JSON.stringify(groups_arg))
+				groups.push(group.uniqueID);
+
+				for(var cueIndex in group.cues){
+					var cue = group.cues[cueIndex];
+					//console.log(cue)
+
+					device.data.lastCueInGroup[group.uniqueID] = cue;
+
+					cue.groups = groups;
+					device.send("/workspace/"+workspace+"/cue_id/"+cue.uniqueID+"/valuesForKeys", [{type: "s", value: "[\"mode\", \"parent\", \"isBroken\", \"preWait\", \"duration\", \"postWait\", \"continueMode\", \"cueTargetNumber\", \"isLoaded\", \"isRunning\"]"}]);
+					cue.index = device.data.workspaces[workspace].allCuesOrdered.push(cue)-1;
+
+					if(cue.cues){
+						cue.mode = 0;
+						getMoreCueInfo(cue, groups);
+					}
+
+					device.data.workspaces[workspace].allCues[cue.uniqueID] = cue;
+
+				}
+			}
+
+		}
+
+		//console.log(device.data.lastCueInGroup)
+
+		
+		device.draw();
+	}else if(p[0]=="update" && p[1]=="workspace" && p[3]=="cue_id"){
+		device.send("/workspace/"+p[2]+"/cueLists");
+	}else if(p[0]=="update" && p[1]=="workspace" && p[5]=="playbackPosition"){
+		console.log('pb move')
+		device.data.playbackPosition = osc.args[0];
+		device.draw();
+	}else if(p[0]=="reply" && p[1]=="cue_id"){
+
+		if(p[3] == "uniqueID"){
+			// response to /cue/playbackPosition/uniqueID
+			device.data.playbackPosition = JSON.parse(osc.args[0]).data;
+		}else if(p[3]=="mode"){
+			var cueID = p[2];
+			var mode = JSON.parse(osc.args[0]).data;
+			var workspaceID = JSON.parse(osc.args[0]).workspace_id;
+
+			device.data.workspaces[workspaceID].allCues[cueID].mode = mode;
+
+		}else if(p[3]=="valuesForKeys"){
+			this.deviceInfoUpdate(device, "status", "ok");
+
+			var d = JSON.parse(osc.args[0]);
+
+			var cueID = p[2];
+			var workspace = d.workspace_id;
+			var cueList = d.data.parent;
+
+			device.data.workspaces[workspace].allCues[cueID].mode = d.data.mode;
+			device.data.workspaces[workspace].allCues[cueID].preWait = d.data.preWait;
+			device.data.workspaces[workspace].allCues[cueID].duration = d.data.duration;
+			device.data.workspaces[workspace].allCues[cueID].postWait = d.data.postWait;
+			device.data.workspaces[workspace].allCues[cueID].continueMode = d.data.continueMode;
+			device.data.workspaces[workspace].allCues[cueID].target = d.data.cueTargetNumber;
+			device.data.workspaces[workspace].allCues[cueID].loaded = d.data.isLoaded;
+			device.data.workspaces[workspace].allCues[cueID].broken = d.data.isBroken;
+			device.data.workspaces[workspace].allCues[cueID].running = d.data.isRunning;
+		}
+		device.draw();
+
+	}else if(p[1]=="workspace" && p[3]=="selectionIsPlayhead"){
+
+		device.data.workspaces[p[2]].selectionIsPlayhead = JSON.parse(osc.args[0]).data;
+
+	}else{
+		
+	}
+}
+
+exports.heartbeat = function(device){
+	try{
+		device.send("/workspace/"+(Object.keys(device.data.workspaces)[0])+"/thump");
+	}catch(err){}
+}