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

make atem more responsive and more gradients

Browse Source
This commit is contained in:
Joel Wetzell
2023-02-09 19:40:07 -06:00
parent 6e4133ae8f
commit d2958966be
3 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/atem/main.js
+4
View File
@@ -100,14 +100,18 @@ exports.update = function update(device, _document, updateType, data) {
.forEach((inputId) => {
if (mixEffect.programInput === inputId) {
document.getElementById(`me-${i}-program-input-${inputId}`).classList.add('atem-red');
document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-red');
} else {
document.getElementById(`me-${i}-program-input-${inputId}`).classList.remove('atem-red');
document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-red');
}
if (mixEffect.previewInput === inputId) {
document.getElementById(`me-${i}-preview-input-${inputId}`).classList.add('atem-green');
document.getElementById(`me-${i}-input-${inputId}`).classList.add('atem-green');
} else {
document.getElementById(`me-${i}-preview-input-${inputId}`).classList.remove('atem-green');
document.getElementById(`me-${i}-input-${inputId}`).classList.remove('atem-green');
}
});
}
plugins/atem/styles.css
+30 -6
View File
@@ -13,8 +13,8 @@ h3 {
width: 35px;
height: 35px;
background: white;
border: 4px solid;
border-color: #8c8c8c;
border: 2px solid;
border-color: #bcbcbc;
border-radius: 3px;
margin: 6px;
}
@@ -30,18 +30,29 @@ h3 {
}
.atem-red {
background: rgb(255, 130, 131);
background: radial-gradient(circle, rgba(255, 130, 131, 1) 0%, rgba(255, 41, 40, 1) 100%);
background: rgb(255, 128, 132);
background: radial-gradient(circle, rgba(255, 128, 132, 1) 0%, rgba(247, 18, 48, 1), rgba(255, 43, 58, 1) 100%);
box-shadow: 0px 0px 10px 1px rgb(255, 128, 132);
}
.atem-green {
background: rgb(14, 238, 7);
background: radial-gradient(circle, rgba(14, 238, 7, 1) 0%, rgba(29, 204, 14, 1) 100%);
box-shadow: 0px 0px 10px 1px rgb(14, 238, 7);
}
.atem-yellow {
background: rgb(255, 240, 0);
background: radial-gradient(circle, rgba(255, 240, 0, 1) 0%, rgba(250, 169, 9, 1) 100%);
background: rgb(249, 255, 3);
background: radial-gradient(
circle,
rgba(249, 255, 3, 1) 0%,
rgba(253, 214, 14, 1) 55%,
rgba(255, 174, 0, 1) 69%,
rgba(253, 181, 0, 1) 75%,
rgba(249, 197, 7, 1) 79%,
rgba(250, 169, 9, 1) 100%
);
box-shadow: 0px 0px 10px 1px rgb(249, 255, 3);
}
.atem-gray {
@@ -153,3 +164,16 @@ h3 {
.no-wrap {
flex-wrap: nowrap;
}
.show-small {
display: none;
}
@media screen and (min-width: 0px) and (max-width: 480px) {
.hide-small {
display: none;
}
.show-small {
display: block;
}
}
plugins/atem/template.ejs
+18 -2
View File
@@ -6,7 +6,23 @@
<% Object.entries(data.video.mixEffects).forEach(([meIndex, state])=>{ %>
<div class="mixeffect_wrapper" id="me-<%= meIndex %>">
<h1 class="atem-gray me-label">ME<%= Number(meIndex) + 1 %></h1>
<div class="program">
<div class="inputs show-small">
<h3 class="atem-gray">Inputs</h3>
<div class="source-wrapper">
<% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
<% if ([0,1,2,3,4].includes(input.internalPortType)) { %>
<div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input">
<div class="source-label"><%= input.shortName %></div>
</div>
<% } else {%>
<div id="me-<%= meIndex %>-input-<%= input.inputId %>" class="atem-input hide">
<div class="source-label"><%= input.shortName %></div>
</div>
<% }%>
<% }) %>
</div>
</div>
<div class="program hide-small">
<h3 class="atem-gray">Program</h3>
<div class="source-wrapper">
<% Object.values(data.inputs).sort((a,b)=>a.internalPortType<b.internalPortType).forEach((input)=>{ %>
@@ -23,7 +39,7 @@
<% }) %>
</div>
</div>
<div class="preview">
<div class="preview hide-small">
<h3 class="atem-gray">Preview</h3>
<div class="source-wrapper">
<% Object.values(data.inputs).forEach((input)=>{ %>