Mobile Driven Signage

 

Revel Digital has created a basic framework that allows for remote control of your digital signage using most any mobile device. Users can simply scan a QR code to access a menu of options for controlling the content on your screen. This opens up a number of opportunities for viewers to change the content to something more interesting or relevant to them. Examples might include selecting a specific video to watch, changing the location for weather or traffic information, or changing a menu board from morning to lunch on demand.

For this example we will put together a simple demo with 3 options to select from which will trigger different templates to play.

 

Generate your Developer API key

---

Open your account information page https://as1.reveldigital.com/account/api and locate the API Access section on the right-hand side

Click the button to generate a key. Save the key for later use.

 

Determine the device you want to control

---

Using the API key you can get the list of devices in your account. From this list we need to select the device ID. This allows us to send commands to that specific device.

To do this we need to access the Revel Digital API and select all devices using your API key generated earlier. Go to the API explorer page here: https://api.reveldigital.com/swagger/index.html#/Devices/Devices_GetAll

Enter your API key and click the Try it Out button.

Find the device you wish to remote control in the results and copy it's Id.

 

Create the mobile remote control configuration file

---

The remote control interface presented to the user needs to be configured with the number of buttons, colors, timeouts, etc. To do this we need to define a configuration file accessible on the web. A simple method for this is to use a Github Gist. Gists are simple to create and modify, and allows us to access the configuration from the web.

The Gist we are using for this demo is available here: https://gist.github.com/mtinnes/c1702ea7bd72d59ac1b99be4d2b1eb2d

Go ahead and create your own Gist by copying this one. Once created we will need the Raw link to the gist to be used in our gadget.

Copy the URL of the Raw gist and save it for later. In our example the Raw link is: https://gist.githubusercontent.com/mtinnes/c1702ea7bd72d59ac1b99be4d2b1eb2d/raw/f96c8ab7bc345525a1278a0a6c55bc6c6814c547/gistfile1.txt

You can see from the configuration there are a number of pages defined. Each page has a collection of objects representing buttons with a name, command, and command argument. The name is how the button will appear to the user, the command along with it's argument is what will be sent to the screen when the button is pressed. The 'to' field is optional and is the name of the next page in the navigation.

{
   "title":"Remote",
   "background-color":"#0099ff",
   "pages":{
      "home":[
         {
            "name":"Page 1",
            "command":"remote",
            "arg":"menuboard",
            "to":"page1"
         },
         {
            "name":"page 2",
            "command":"remote",
            "arg":"financial",
            "to":"page2"
         }
      ],
      "page1":[
         {
            "name":"Page 2",
            "command":"remote",
            "arg":"alert",
            "to":"page2"
         }
      ],
      "page2":[
         {
            "name":"Page 1",
            "command":"remote",
            "arg":"reset",
            "to":"page1"
         }
      ]
   }
}

 

Add the QR code to a template

---

The QR code is what provides the link for controlling the screen. This can be placed anywhere in your template and styled to fit your design requirements. Keep in mind that all templates triggered by the remote control should contain this QR code so that it's always available regardless of which template is currently selected.

Create or edit a template in your Revel Digital account, then add a Gadget zone. The gadget will be configured with the values you saved from earlier.

Gadget Source: https://reveldigital.github.io/reveldigital-gadgets/remote-qr-generator.xml

Config File: <Your Raw Gist URL>

API Key: <Your Revel Digital API Key>

Device Id: <Your Device Id>

Previewing the template should show a QR code. Scan this code to verify your buttons are shown as defined in the Gist configuration.

 

Create a Smart Schedule to control the screen content

---

Scanning the QR code will present a list of buttons as defined in the Gist configuration file. Clicking a button will send the command associated with that button to the device specified in the gadget. This command will allow us to change content playing on that device.

The easiest way to do this is by using Smart Scheduling which can use a command to determine which content to play.

To create a Smart Schedule, go to the Schedules section of your Revel Digital account, then click New Schedule > Smart Schedule.

 

A Smart Schedule consists of 3 sections, the What, When , and Where.

What: Select any template or playlist you wish to play for a given command

When: Select Command, then enter the command name and argument as defined in the Gist configuration file

Where: Select the device which we are targeting for control

Select High priority for these schedules to override any existing schedule.

NOTE: make sure you also have a default Basic schedule with one of the templates containing the QR code. 

 

Deploy your content to the screen

---

Now we just need to deploy to the screen. Scanning the QR code will present the list of buttons we defined in your configuration file and clicking one will transition to the template or playlist we have defined in our Smart Schedules.