Skip to main content

Viewer Page

This is where all the fun happens!

Overview​

Ahh, the Viewer Page. Your Viewer Page is the face of your show and is what your viewers will see and interact with as they request sequences. It is by far the most fun and frustrating part of Remote Falcon. Fun because it's a fully customizeable HTML webpage and frustrating because it's a fully customizeable HTML webpage.

Viewer Page Customization

Just a heads up for those who have never ventured into HTML. It can be overwhelming at first and often times mistakes are easily made that can break an entire Viewer page. Always check twice and be mindful about what you are changing in the HTML.

When you first visit the Viewer Page settings after signing up, the first thing you'll probably notice is... well, nothing. To get started you need to create a New Viewer Page. You can find this option (and more) under the Speed Dial.

Speed Dial

We'll explore each option more, but before we get into it, a quick note...

The intent of this section is not to explain how HTML and CSS work, as that's way beyond the scope of this documentation. If you want to know more about HTML and CSS,

Google

New Viewer Page​

If you have no Viewer Pages, this is the place to start! Clicking this option opens a modal where you can put in the name of the page and a starting template.

Starting Templates

When you first visit this page you may not have any idea what the starting templates actually look like. You can preview the templates in the Viewer Page Templates menu.

Save Viewer Page​

Did you make a change to something? Yeah, you should save it using this thing.

Copy HTML​

Just in case you want to copy your Viewer Page HTML to share, save on your computer, or edit in your own fancy IDE.

Manage Viewer Pages​

This option opens another modal that displays each of your Viewer Pages you have created, as well as which one is actively enabled in the Viewer Page section of the Remote Falcon Settings. From here, you can choose to edit or delete the viewer page.

Toggle Side Preview​

Want to see what your Viewer Page looks like as you edit it? Just click this to enable a preview of the Viewer Page to the side of the editor.

Toggle Fullscreen Preview​

If the side preview just isn't doing it for you, you can go into a full screen preview.

HTML Validation​

Below the editor there is a snazzy little section that will actually validate your HTML as you make changes to it. If something got messed up in your Viewer Page HTML or your Viewer Page isn't displaying as you expect it to, check this validation section for errors. Clicking on the corresponding line number will take you to where the issue is. Or get you close.

HTML Validator

You might notice several "errors" in the validation when you first create a Viewer Page. If everything is working as expected, the most of these can be ignored.

Viewer Page Elements​

If you've used HTML before you might notice some weird things in the Viewer Page HTML. Don't be alarmed. They are there for a reason. To allow your Viewer Page to be as dynamic as possible, certain tags are used that tell Remote Falcon what needs to be replaced by actual data. There are essentially 3 different types of "dynamic elements".

Dynamic Elements

The Dynamic Elements mentioned in the upcoming sections are VERY important in order for Remote Falcon and your Viewer Page to work correctly. Be cautious when editing, adding, or removing Dynamic Elements.

Dynamic Div Containers​

The Dynamic Div Containers are used to hide and show entire blocks of code, for example when Viewer Control is turned off the "After Hours" section is displayed. Here are each of the Dynamic Div Containers used:

  • {after-hours-message} - The content within this dynamic div container only appears when Viewer Control has been turned off. It's purpose is to display content to be seen when your show is not running.
  • {jukebox-dynamic-container} - Anything that appears in this container will display if Jukebox mode is enabled.
  • {playlist-voting-dynamic-container} - Anything in this container will display if Voting mode is enabled.
  • {location-code-dynamic-container} - If you have the Code option selected for Viewer Location Checks, then the content within this container will display.

Tags​

The Tags are used to replace specific items on the Viewer Page and consists of:

  • {NOW_PLAYING} - Displays the current playing sequence.
  • {NEXT_PLAYLIST} - Displays the next sequence in the queue.
  • {QUEUE_SIZE} - Displays the current size of the queue.
  • {JUKEBOX_QUEUE} - Displays a list of all the sequences that are currently in the queue (does not include NEXT_PLAYLIST).
  • {QUEUE_DEPTH} - Displays the current maximum queue depth that is set in the Control Panel.
  • {LOCATION_CODE} - Displays the input field used to enter the location code.
  • {PLAYLISTS} - Displays the list of sequences (if Jukebox) or sequences plus votes (if Voting).

Status Messages​

The Status Messages are the feedback sections that display when your viewer requests a sequence or makes a vote. Indicates if the request or vote was successful or if something happened. Includes:

  • {requestSuccessful} - Displays if a request or vote is made successfully.
  • {requestFailed} - Displays if something bad happened and we don't know why.
  • {requestPlaying} - Displays if a request is made for a sequence that is already playing, up next, or falls withing the request limit.
  • {queueFull} - Displays if a request is made the maximum queue depth has been met.
  • {invalidLocation} - Displays if GPS Location is selected for Check Viewer Present and the viewer attempts to place a request or vote outside the allowed radius.
  • {alreadyVoted} - Displays if Prevent Multiple Votes is enabled and a viewer tries to vote more than once in a given round.
  • {invalidLocationCode} - Displays if the Code option selected for Check Viewer Present and a viewer attempts to place a request or vote with an incorrect or missing code.
  • {locationNotice} - Displays a notice if the viewer has not accepted location info and GPS Location is enabled.

Some CSS and Styling Stuff​

As new features are requested and changes are mode, sometimes new CSS style classes are introduced. Here are a few that allow you to better style the sequences and artists for both Jukebox and Voting.

.cell-vote-playlist-{key}: This class controls the voting style for a specific sequence section, including display name and artist
.cell-vote-playlist-artist: This class controls the voting style for all artist elements
.cell-vote-playlist-artist-{key}: This class controls the voting style for a specific sequence artist

.jukebox-list-{key}: This class controls the jukebox style for a specific sequence section, including display name and artist
.jukebox-list-artist: This class controls the jukebox style for all artist elements
.jukebox-list-artist-{key}: This class controls the jukebox style for a specific sequence artist

.sequence-image: This class controls the style for all sequence images for both jukebox and voting
.sequence-image-{key}: This class controls the style for a specific sequence image for both jukebox and voting