Output Visuals

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)
      • Image without caption
    • .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.
Layer Transition Lifecycle in an Output Player
Layer Transition Lifecycle in an Output Player

Default opacity (fade) transition / CSS

scss
.layer { &:not(.type-html):not(.type-visual):not(.type-snippet) { display: flex; } &.layer-out-transition { opacity: 1; transition: 300ms ease-in; } iframe { position: relative; z-index: -1; } &.layer-in-transition { opacity: 0; transition: 300ms ease-out; } &.layer-transition-in { opacity: 0; } &.layer-visible { opacity: 100; } &.layer-transition-out { opacity: 100; } &.layer-hidden { opacity: 0; } }

Customize Visual

Header HTML

Add libraries to your Output
Included Libraries by default
  • Tailwind CSS (CSS styling)
→ See for layer’ element selectors
Custom Examples

Body 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:
javascript
document .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 .

Custom Fonts

If you want to make use of your own fonts, follow the next steps:
  1. Make sure you’ve uploaded the fonts in public place, available on a public url
  1. Adjust your Custom CSS
    1. css
      @font-face { font-family: 'Your Custom Font'; src: url('https://stationx-publicwebsite.com/customfont.woff2') format('woff2') font-weight: normal; font-style: normal; } .canvas { font-family: "Your Custom Font", sans-serif; } .layer { /* Layer you want to customize specifically */ font-family: "Your Custom Font", sans-serif; }
  1. Verify if the font is working in the designer. If not- the Devtools of your browser will show helpful font resolver errors to debug loading your custom font.