Slides, timing and transitions for your store's TV screens
Everything your store's TV screens show comes from one folder on your website: a file called
config.json and the slides it lists. This guide covers how to prepare the
files, how long each one stays up, how each one comes in, and ends with a complete
config.json you can copy.
Each screen (an NVIDIA SHIELD TV or a Raspberry Pi) checks your folder on a schedule the screen's owner sets. It connects only to the web address built into the screen, only over HTTPS, and downloads only the files that changed since the last check. Nothing else is contacted: no analytics, no tracking, no other servers.
your-site/
config.json the playlist (below)
brand/logo.png shown for a few seconds when a screen starts
media/slide1.pdf
media/new-arrivals.jpg
media/slide2.pdf
media/hours.pdf
fit"contain" Available"cover" Available"fill" Next update
Set a time for every slide in defaults, then give any item its own. A PDF item
shows each of its pages for that item's time. The playlist loops forever.
A transition is how an item comes onto the screen. Set one for everything in
defaults, or per item. Each preview below runs from a slide into a video
frame at 1 second. Available works on your screens today;
Next update arrives with the next app update.
Heavy ones (3D) are best on a SHIELD TV; on a Raspberry Pi playing video, stay with light
and medium.
The quiet ones. Readable on any screen, lightest on the hardware.
A straight cut, no motion.
"transition": "none"light
Cross-fade: the new item fades in over the old one.
"transition": "fade"light
The old item fades to black, then the new one fades up. Calm, good before a video.
"transition": "fade_black"light
Like fade through black, through a white flash instead. Bright, upbeat.
"transition": "fade_white"lightMovement with a direction. One value per direction: _left, _right, _up, _down.
The new item pushes the old one out to the left. Same as slide_left.
"transition": "slide"light
The new item comes in from the left and pushes the old one right.
"transition": "slide_right"light
The new item rises from the bottom and pushes the old one up.
"transition": "slide_up"light
The new item drops in from the top and pushes the old one down.
"transition": "slide_down"light
The new item slides over the old one from the right; the old one stays still. Also cover_right, cover_up, cover_down.
"transition": "cover_left"light
The old item slides away to the left and uncovers the new one. Also reveal_right, reveal_up, reveal_down.
"transition": "reveal_left"lightA hard edge or shape uncovers the next item. Directions as above for wipes.
A hard edge sweeps right to left, uncovering the new item. Also wipe_right, wipe_up, wipe_down.
"transition": "wipe_left"medium
The edge sweeps from the bottom up.
"transition": "wipe_up"medium
A circle opens from the centre. Good for a logo.
"transition": "iris"medium
The new item opens from a line down the middle, like doors.
"transition": "split"medium
Horizontal slats open together, like window blinds.
"transition": "blinds"mediumScale changes. zoom and kenburns are on the screens now.
The new item fades in while growing slightly (92% to 100%).
"transition": "zoom"light
The new item grows from the centre, from half size. Strong for a logo.
"transition": "zoom_in"light
The old item grows past the screen and fades away, uncovering the new one.
"transition": "zoom_out"light
Fades in, then drifts and zooms slowly the whole time it is on screen. Brings still slides to life; on a video it only fades.
"transition": "kenburns"mediumThe screen turns in space. Best kept for the Shield.
The screen turns over like a card, the new item on its back.
"transition": "flip"heavy
The two items sit on the sides of a turning cube.
"transition": "cube"heavy
This file works on your screens today. Copy it, change the file names to yours, and save it
as config.json in the top of your folder. The whole file is one
{ ... }, with straight quotes and commas between items (the last item has none).
{
"format": 1,
"branding": {
"logo": "brand/logo.png",
"splash_seconds": 4,
"background": "#000000"
},
"defaults": {
"seconds": 10,
"transition": "fade",
"transition_ms": 800,
"fit": "contain"
},
"playlist": [
{ "pdf": "media/slide1.pdf", "pages": "all", "seconds": 12, "transition": "slide" },
{ "image": "media/new-arrivals.jpg", "fit": "cover", "seconds": 15, "transition": "kenburns" },
{ "pdf": "media/slide2.pdf", "pages": "1-3,5", "transition": "zoom" },
{ "image": "brand/logo.png", "seconds": 5, "transition": "fade", "transition_ms": 1200 },
{ "pdf": "media/hours.pdf", "pages": "1", "seconds": 8, "transition": "none" }
]
}
| Key | Where | What it does |
|---|---|---|
format | top | Always 1 for now. Required. |
logo | branding | Image shown when a screen starts. Optional. |
splash_seconds | branding | How long the logo shows, 0 to 30. |
background | branding | Colour of the bars around a contain slide, like #000000. |
seconds | defaults, item | Time on screen, 2 to 3600. |
transition | defaults, item | How the item comes in (Step 3). |
transition_ms | defaults, item | Transition length, 0 to 5000 ms. |
fit | defaults, item | contain or cover (Step 1). |
playlist | top | The items in order, 1 to 500. Required. |
pdf / image | item | The file, relative to your folder. Exactly one per item. |
pages | item (PDF) | "all" or pages like "1-3,5". |
config.json last, so a screen never reads a playlist that names a file not there yet.
Videos join the same playlist, in any order: slide1.pdf, a video, slide2.pdf, another
video, your logo. Each video plays to its end, can repeat, and plays its sound unless you
turn it off. The new transitions above, "fill", a different time for single
PDF pages, and a "random" transition come with it. Best video format for
every screen: MP4, H.265 (HEVC), 1920 x 1080, 30 frames per second.
{ "video": "media/video1.mp4", "audio": false, "transition": "fade_black" },
{ "pdf": "media/slide2.pdf", "pages": "1-3", "page_seconds": { "2": 20 } },
{ "video": "media/video2.mp4", "plays": 2, "transition": "iris" }
Not for use yet: today's screens refuse a playlist with video items and keep showing their last good playlist.