Viewer page reference
Your viewer page is plain HTML and CSS. Pick The Lights injects live data wherever you put a token. The contract is identical to Remote Falcon's, so community templates work as-is. Scripts are stripped on save.
Tokens
| Token | Renders |
|---|---|
{PLAYLISTS} | The request list (Jukebox) or vote list (Voting). Categories become sections. |
{NOW_PLAYING} | Display name of the playing sequence. |
{NOW_PLAYING_TIMER} | Elapsed / total time, e.g. 1:25 / 3:16. |
{NEXT_PLAYLIST} | Next in the queue (or next scheduled). |
{QUEUE_SIZE} / {QUEUE_DEPTH} | Items in the queue / configured maximum. |
{JUKEBOX_QUEUE} | The queue as a list. |
{VOTES} | Current vote tallies as a list. |
{VOTES_REMAINING} | "N of M votes left" when a daily limit is set. |
{LOCATION_CODE} | The code input (Code check-in). |
{RETRY_LOCATION} / {RETRY_LOCATION_INLINE} | A button / link that re-requests GPS permission. |
Container switches
Put these inside an element's opening tag; the element is hidden when the condition doesn't apply:
<div {jukebox-dynamic-container}>— only in Jukebox mode<div {playlist-voting-dynamic-container}>— only in Voting mode<div {location-code-dynamic-container}>— only with Code check-in<div {location-permission-dynamic-container}>— only when GPS was denied<div {after-hours-message}>— only when nothing is playing and the agent is offline
Message blocks
Add elements with these ids, hidden by default (style="display:none"). The matching one is shown for 6 seconds after a request or vote:
requestSuccessful requestPlaying queueFull invalidLocation alreadyVoted alreadyRequested requestFailed invalidLocationCode dailyVoteLimitReached sequenceUnavailable
Generated classes
Style the generated list with: .jukebox-list (+ -N), .jukebox-list-artist, .sequence-image, .category-section, .category-label, .cell-vote-playlist, .cell-vote, .jukebox-queue, .sequence-unavailable. Each row carries data-key (MadMapper name) and data-key-2 (display name).
Templates
- Classic — Clean dark page with queue, now playing and a big request list.
- Haunted — Orange and purple Halloween theme with flickering title.
- Winter Lights — Icy blue holiday theme with snowfall-ready layout.
- Projection Wall — Gallery-style grid with artwork tiles for mapped shows.
- Blank starter — Just the required tokens and message blocks. Bring your own CSS.
Images: upload under Images and paste the URL. Snow: toggle Make it snow in Settings → Viewer page.