From 56cc1b0cf860b829d826cce47d5d7ea774503149 Mon Sep 17 00:00:00 2001 From: Joel Wetzell Date: Wed, 8 Feb 2023 15:10:56 -0600 Subject: [PATCH] transition and style wired up and prune inputs --- plugins/atem/main.js | 202 ++++++++++++++++++++++---------------- plugins/atem/styles.css | 4 + plugins/atem/template.ejs | 63 +++++++----- 3 files changed, 162 insertions(+), 107 deletions(-) diff --git a/plugins/atem/main.js b/plugins/atem/main.js index 0dd337f..8f9ffe0 100644 --- a/plugins/atem/main.js +++ b/plugins/atem/main.js @@ -1,3 +1,5 @@ +const { TransitionStyle, TransitionSelection } = require('atem-connection/dist/enums'); + exports.config = { defaultName: 'ATEM', connectionType: 'atem', @@ -26,10 +28,12 @@ exports.ready = function ready(_device) { // TODO: this is a little hacky but it works? gotta be better way to get initial update going const interval = setInterval(() => { - device.update('inputs', device.data.video.mixEffects); - device.update('fadeToBlack', device.data.video.mixEffects); - device.update(`transitionPosition`, device.data.video.mixEffects); - device.update('downstreamKeyers', device.data.video.downstreamKeyers); + 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); }, 1000); setTimeout(() => { clearInterval(interval); @@ -38,86 +42,131 @@ exports.ready = function ready(_device) { exports.update = function update(device, _document, updateType, data) { const document = _document; - switch (updateType) { - case 'downstreamKeyers': - for (let i = 0; i < data.length; i++) { - const dsk = data[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'); - } - - if (dsk.remainingFrames === dsk.properties.rate) { - document.getElementById(`dsk-${i}-rate`).textContent = '1:00'; - } else { - // TODO: format in 0:00 format - document.getElementById(`dsk-${i}-rate`).textContent = `00${dsk.remainingFrames}`.slice(-2); - } + 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-progress`; + if (document.getElementById(tbarId)) { + document.getElementById(tbarId).value = mixEffect.transitionPosition.handlePosition; } - break; - case 'transitionPosition': - for (let i = 0; i < data.length; i++) { - const tbarId = `me-${i}-tbar-pos`; - if (document.getElementById(tbarId)) { - document.getElementById(tbarId).value = data[i].transitionPosition.handlePosition; - } + // TODO: format in 0:00 format + document.getElementById(`me-${i}-transition-rate`).textContent = + `00${mixEffect.transitionPosition.remainingFrames}`.slice(-2); + } + } 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'); } - break; - case 'fadeToBlack': - for (let i = 0; i < data.length; i++) { - const fadeToBlack = data[i].fadeToBlack; - const ftbRateId = `me-${i}-ftb-rate`; - const ftbId = `me-${i}-ftb`; - if (fadeToBlack.remainingFrames === fadeToBlack.rate) { - document.getElementById(ftbRateId).textContent = '1:00'; - } else { - // TODO: format in 0:00 format - document.getElementById(ftbRateId).textContent = `00${fadeToBlack.remainingFrames}`.slice(-2); - } - if (fadeToBlack.inTransition || fadeToBlack.isFullyBlack) { - document.getElementById(ftbId).classList.add('atem-red'); - } else { - document.getElementById(ftbId).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'); } - break; - case 'inputs': - for (let i = 0; i < data.length; i++) { - const programInputs = device.connection.listVisibleInputs('program', i); - const previewInputs = device.connection.listVisibleInputs('preview', i); - Object.entries(device.data.inputs).forEach(([inputId, input]) => { - if (programInputs.includes(Number(inputId))) { + 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 = `00${dsk.remainingFrames}`.slice(-2); + } + } 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`; + + // TODO: format in 0:00 format + document.getElementById(ftbRateId).textContent = `00${fadeToBlack.remainingFrames}`.slice(-2); + + if (fadeToBlack.inTransition || fadeToBlack.isFullyBlack) { + 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'); } else { document.getElementById(`me-${i}-program-input-${inputId}`).classList.remove('atem-red'); } - if (previewInputs.includes(Number(inputId))) { + if (mixEffect.previewInput === inputId) { document.getElementById(`me-${i}-preview-input-${inputId}`).classList.add('atem-green'); } else { document.getElementById(`me-${i}-preview-input-${inputId}`).classList.remove('atem-green'); } }); - } - break; - default: - break; + } + } 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 { + console.log('unhandled update'); + console.log(updateType); + console.log(device.data); } }; @@ -127,19 +176,6 @@ exports.data = function data(_device, msg) { device.data = msg.state; msg.pathToChange.forEach((path) => { - if (path.includes('transitionPosition')) { - device.update(`transitionPosition`, device.data.video.mixEffects); - } else if (path.includes('downstreamKeyers')) { - device.update('downstreamKeyers', device.data.video.downstreamKeyers); - } else if (path.includes('fadeToBlack')) { - device.update('fadeToBlack', device.data.video.mixEffects); - } else if (path.includes('programInput')) { - device.update('inputs', device.data.video.mixEffects); - } else if (path.includes('previewInput')) { - device.update('inputs', device.data.video.mixEffects); - } else { - console.log(path); - console.log(device.data); - } + device.update(path, device.data); }); }; diff --git a/plugins/atem/styles.css b/plugins/atem/styles.css index a1a2a64..252347d 100644 --- a/plugins/atem/styles.css +++ b/plugins/atem/styles.css @@ -94,3 +94,7 @@ h3 { padding: 2px; text-align: center; } + +.hide { + display: none; +} diff --git a/plugins/atem/template.ejs b/plugins/atem/template.ejs index 3d49316..3becdb9 100644 --- a/plugins/atem/template.ejs +++ b/plugins/atem/template.ejs @@ -9,20 +9,34 @@

Program

- <% Object.entries(data.inputs).forEach(([inputId, state])=>{ %> -
-
<%= state.shortName %>
-
+ <% Object.values(data.inputs).sort((a,b)=>a.internalPortType{ %> + <% if ([0,1,2,3,4].includes(input.internalPortType)) { %> +
+
<%= input.shortName %>
+
+ <% } else {%> +
+
<%= input.shortName %>
+
+ <% }%> + <% }) %>

Preview

- <% Object.entries(data.inputs).forEach(([inputId, state])=>{ %> -
-
<%= state.shortName %>
-
+ <% Object.values(data.inputs).forEach((input)=>{ %> + <% if ([0,1,2,3,4].includes(input.internalPortType)) { %> +
+
<%= input.shortName %>
+
+ <% } else {%> +
+
<%= input.shortName %>
+
+ <% }%> + <% }) %>
@@ -58,19 +72,19 @@
-
+
BKGD
-
+
KEY 1
-
+
KEY 2
-
+
KEY 3
-
+
KEY 4
@@ -81,19 +95,19 @@

Transition Style

-
+
MIX
-
+
DIP
-
+
WIPE
-
+
STING
-
+
DVE
@@ -117,7 +131,7 @@
Rate
-
1:00
+
00
@@ -127,7 +141,7 @@
Rate
-
1:00
+
00
FTB
@@ -135,8 +149,8 @@
-
- +
+
<% }) %> @@ -153,11 +167,12 @@
Rate
-
1:00
+
00
-
ON
AIR
+
ON
AIR
+
AUTO