Building an overlay

An overlay is an ordinary web page, HTML, CSS and JavaScript, in a folder on your Mac. InterDirector loads it, lets the operator change the values you choose to offer, tells it when it goes on and off air, and puts it over Program. If you can write a web page, you can build an overlay. This page covers the package and how to try it; the next two cover parameters, and going on air, transitions and scrolling.

Start from a starter package

Two packages, written to be copied and changed, each with comments throughout:

• Starter Lower Third (zip, 77 KB): a name and tagline with a logo and sponsor logos. It uses every kind of parameter and plays its own entrance and exit.
• Starter Ticker (zip, 37 KB): a message that scrolls across a bar, with its speed and direction set by the operator.

Both are free to copy, change and use in any production, without credit (MIT-0, in each package’s LICENSE.txt). Each carries its font, with the font’s own licence.

The one rule

Your page is always showing. InterDirector draws it all the time, on air or not, and Preview shows the same live page that Program will: the operator looks at it there to check the text before taking it. So the page must always look finished, even before anything is set. A blank or half-built page is exactly what Preview shows the operator.

What a package is

My Overlay/
  index.html
  interdirector-overlay.json
  js/
  fonts/

index.html is the page, and the only file you must have. interdirector-overlay.json is the manifest: what the operator can set, and how the overlay arrives, leaves or scrolls. Everything else is there because your page uses it. A package carries everything it needs, fonts included: the page is loaded from the folder with no internet, and the Mac running the show may not have your font installed.

The smallest overlay

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html, body {
        margin: 0;
        width: 1920px;
        height: 1080px;
        background: transparent;
      }
      #name {
        position: absolute;
        left: 120px;
        bottom: 110px;
        font: 700 56px sans-serif;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="name">Hello, InterDirector</div>
  </body>
</html>

That is a complete overlay. Two things to notice:

• The background is transparent. Whatever the page does not paint, Program shows through.
• The page is the size of the Show’s picture, 1920 × 1080 for a Full HD Show and 1280 × 720 for a 720p one. Position things with ordinary CSS. The starter packages are drawn for 1920 × 1080; for another size, change their measurements to fit.

The manifest

interdirector-overlay.json, beside index.html, says what the operator can set and how the overlay moves:

{
  "schemaVersion": 1,
  "parameters": [],
  "transitions": {},
  "scroll": {}
}

schemaVersion is always 1. The other three are optional, so declare only what you use:

• parameters: the values the operator can change, such as a name, a colour or a logo. See Overlay parameters.
• transitions: how the overlay arrives and leaves. See On air, transitions and scrolling.
• scroll: for a ticker or a credits roll, which InterDirector moves for you. Same page.

A manifest InterDirector cannot read takes the overlay offline with a message saying why, and nothing else in the Show is affected.

Try it in InterDirector

1. Press Add Input… and choose Overlay.
2. In the Package menu, choose Your Own Package… and pick your folder.
3. Put the overlay in Preview to see it, and press Overlay to take it to air.

After editing a file, press Reload Package in the overlay’s settings. InterDirector keeps the page it loaded when the input started, so an edit changes nothing on screen until you reload it. The operator’s values are kept.

Keep it light

InterDirector only redraws your page when it can have changed: something in the page changed, a CSS animation or transition is running, or your script asked for an animation frame. That covers ordinary web pages. Two things it does not see, so they look jerky on air:

• A playing video. Do not put moving video in an overlay.
• Drawing on a canvas from a timer. Draw in requestAnimationFrame instead.

An animation that runs all the time is redrawn all the time, on air or not, so keep motion to the moments it is on air. More on that in On air, transitions and scrolling.