Layouts and zones

A layout divides a screen into areas. Each area plays its own playlist, on its own loop, and knows what size artwork it needs.

Why it existsA screen is one rectangle and a menu board is not. Splitting it lets the food stay on screen while the ticker moves and the sound plays from somewhere else entirely — three things changing at three speeds, which is what a wall in a shop actually does. The alternative is one video that has to be re-cut every time the soup changes.

The zones#

Nine layouts come with the platform: full screen, a main area with a bottom ticker, a sidebar on either side, an L-shape, two kinds of split, a weather corner over a full picture, and a three-way split. Their areas are called Main, Sidebar, Secondary, Footer and Widget.

Every layout also has Audio, which is not an area at all — it has no box on the glass. It is where a playlist of music or announcements goes, and on a video wall the sound comes from one panel however many are showing picture.

Drawing your own#

On a screen's form, under Layout, Draw a layout opens a canvas shaped like that screen. Drag a zone to move it, drag a corner to resize it, or type the exact pixels — a slot sold as 1920 × 240 is entered as 1920 and 240 rather than dragged until the number happens to agree.

Screens → a screen → Advanced settings → Layout → Draw a layout

Shop front · sizes shown for 1920×1080 — Old Street

Main picture1920 × 842 px · 100% × 78%Layer 02

News ticker1920 × 238 px · 100% × 22%Layer 0

schedules address these as Main and Footer3

1The screen at its own resolution and shape, so a portrait totem is drawn as a portrait.

2Each zone carries the size it will actually be, in pixels, on this screen.

3What a schedule addresses this zone as. It never changes, whatever you rename it.

The layout is proportions, not pixels. One layout fits every screen you put it on: a quarter-width sidebar is 480 px wide on a 1920 screen and 960 on a 4K one. The pixel sizes shown are for the screen you came from.
Renaming a zone is safe. What a schedule points at is the zone's key, shown under its name, and that never changes. Call it "News ticker" or "Football scores" — the schedules pointing at it carry on.
Removing one is not. Content addressed to a zone that no longer exists keeps being scheduled and stops appearing. The editor tells you before you save which schedules that would affect.
Layers decide overlaps. Zones may sit on top of each other — that is what the weather corner is. The higher layer is in front.

Screen with nothing on part of it

A layout does not have to cover the whole screen, and where no zone reaches, the screen is black. The editor says how much of it that is while you draw, because a black band down one side is obvious from across a room and not at all obvious on a canvas.

What size artwork a zone needs#

This is the question the pixel sizes exist to answer. A designer needs a number, and "the sidebar" is not one. Open the screen's schedule panel and every zone is listed with its size — Main picture 1920 × 842 — which is what you send to whoever is making the artwork.

The same numbers appear when you set up an ad slot: choosing Fixed offers the sizes your own screens actually produce, with the layout and zone each comes from, so you pick one rather than typing it. See How advertising works.

Example — A bakery window in Old Street

The screen is 1920 × 1080 in the window. The layout is a main picture over a ticker, with the split at 78%, which the editor reports as 1920 × 842 and 1920 × 238. The photographs are commissioned at 1920 × 842. The ticker takes a news widget, which needs no artwork at all. Audio takes nothing, because the window faces the street.

On a phone

Layouts can be chosen on a phone but not drawn on one. Dragging boxes on a canvas and reading pixel sizes off them wants a desk.