CSS Selectors
Default selectors:
#visual_canvas
.canvas
Canvas wrapper containing all layers
Layer
.layer
Wraps layer, with Layer’ CSS Selector applied# ID Selector
for Layer (customizable).type-{type}
→ contains layer type (.layer.type-text
= a text layer)schedulingmedia
text
media
html
snippet
Elements
- Text
.h1
-.h6
+.p
are classes that are added to the layer element
Layer Transition Lifecycle
Activation/Active state means: Output plays the layer’ parent Visual AND Layer Condition is Live
.layer-in-transition
when the layer is in a transition mode between active states+750 ms
.layer-transition-in
when a layer becomes active
.layer-transition-out
when a layer becomes inactive
.layer-visible
Layer transition done and Layer is visible and is active
.layer-hidden
Layer transition done and Layer is hidden and is not active
Future Lifecycle improvements include Visual’s CUE-IN state (to know that a Visual is coming up in Output Player Rundown Queue) and a CUE-OUT state which identifies when a Visual’s playtime is almost over.
Customize Visual
Header HTML
Add libraries to your Output
Included Libraries by default
- Tailwind CSS (CSS styling)
→ See for layer’ element selectors
Custom ExamplesBody Javascript
Raw Javascript to be added at the end of the Body
Events
To integrate your custom logic with the described Layer transition states (see) Events are dispatched on
activation
and hide
events.When an layer is activated the
layer-activated
event is triggered on the .layer
HTML element. When hidden the layer-hidden
event is triggered:javascriptdocument .querySelector(".layer#selection-id") .addEventlistener("layer-activated", function(){ // do special stuff }) document .querySelector(".layer#selection-id") .addEventlistener("layer-hidden", function(){ // do special stuff })
Body-end HTML
HTML code (CSS, etc.) that is added to the end of the body (
js
wont be evaluated, script tags will)Adding animations for yet to be rendered elements
Custom CSS
Appended at the end of the
header
after Header HTML
.