Layout Customization with the Roku IP Driver

With the introduction of IP control, your RedEye system can more tightly integrate with other devices on the network. Using information passed back from the devices you are controlling, you can display the movie poster for the film you are watching, present the current temperature and humidity from a climate control system, or display the track name for the currently playing song.

Roku streaming media players are popular among RedEye customers and Roku’s IP control documentation is quite good, so we chose it as one of the first devices to add to our IP driver library.This document provides some information on how you can access the more advanced features available through the Roku driver.

Adding the Roku IP device

As with any device, the first place to go is the “Add a Device” screen, where we choose our manufacturer (Roku) and device type (Streaming Media Player). For the port, we scroll to the bottom of the list and choose the “Add New IP Port” option. Finally, give the device a display name (e.g., “Roku”) and tap Save.

All Roku players use the same API, so there is only one driver to choose from. When you select it, you will see a brief note about compatibility and a list of its commands. This is the one we want, so tap Save again.

We are almost done adding the Roku device, but before it will work properly, we have to change the IP port settings to identify the address on our network where we can reach the Roku player. For best results, we should edit the client list on our router to reserve this particular IP address or change the Roku player’s network settings to make this IP address static — otherwise after a router reboot or power outage we may find that the Roku IP address has changed and we would have to go back to update our settings here.

Assuming that you have taken care of reserving the IP address for your Roku, tap on the Port Settings row and enter the IP address in the space provided. The rest of the settings on this screen are fine, so tap Save to finish.

Adding a “Watch Roku” Activity

Once you have added an IP device, you can use it in your RedEye activities just as you would any other device. To illustrate, we will create a simple “Watch Roku” activity. First, choose the activity type (Watch Streaming Video), and give it a name (Watch Roku). Then select the devices you wish to use (in this case, a projector, an AVR, and the Roku player itself). Then tap Save.

After setting up the appropriate launch and shutdown actions as usual, RedEye will give you a default activity template. Roku does not offer some of the commands found in the template, so the screenshot here is what we get after a little bit of layout customization.

At this point you can go ahead and use your Roku as is, but you may be thinking that we could have done the same thing with the Roku infrared codeset. Our next step is to add some of the customization that IP makes possible.

Adding a Search Box

A lot of Roku channels offer search functionality, but using the onscreen keyboard can be a bit of a pain.One thing that can make life simpler is using a keyboard within the RedEye app to enter search text. To do that, we need to add a search text box to our Watch Roku activity.

Before you can add a text box or any of the more advanced layout elements, you need to turn on the Advanced Options preference on the Main Setup screen[1]:

Next, find your Watch Roku activity and click on the “Edit Activity Layout” button to make changes to the layout. Then tap on the plus (+) icon to add a new control to the layout. If this is the first time you have enabled Advanced Options, then the following screen may be new to you. We want add a text field control, so go ahead and select that now.

This is the Text Field Setup screen, where we configure values for the search box we are creating. We can skip the Name and Description fields. In Placeholder, enter the value “search” — this word will appear inside the box as a hint to remind us what happens with the text we enter.

You can leave the font size alone, but we should go ahead and change the text field width so it takes up most of the screen. Our layouts are 320 pixels wide, so if we leave a margin of 10 pixels on each, 300 pixels is what we want.

Finally, we will skip down to the bottom of the screen. We need to assign a variable to this control — variables are the means by which we send our text down to the RedEye for transmission to the Roku. The Roku driver has already created a variable for this purpose, so we can go ahead and select the one called “roku-textInput”. Once we have our variable selected, we can choose an action to make the search box process our text. The Roku driver has a command called “Send Text Entry” which uses the roku-textInput variable, so we can select that here. Then tap Save.

Now when you are using your Roku player and you want to search for something, all you need to do is start typing into the search box.

Adding an Installed Channel List

Another thing we can do with the Roku IP driver is download a list of installed channels. By presenting that list inside our Watch Roku activity, we can jump directly from one channel to the other without having to go back to the Roku home screen and navigate around using the arrow keypad. This time we are going to add an HTML control to our activity.

Since we want RedEye to launch the appropriate Roku channel when we tap on an item in the list, we are going to change the HTML control type from “Display Only” to “Action”.

Next we need to specify an HTML Content variable which contains the HTML to draw our list. Once again, the Roku IP driver has pre-configured the variable we need – it is called “roku-channelHtml”.

Just as with the text field, we need some way to tell RedEye which item we have tapped, and so we have a Selected Value variable. For this we will use the Roku driver’s “roku-selectedChannelId” variable.

Finally, we will choose the Launch Activity command for our action. This command uses the value in the roku-selectedChannelId variable to launch the channel we want.

At the bottom of the channel list, you may have noticed the “(refresh channel list)” row. If you add or remove channels to your Roku, you can tap on this row to update the list of available channels in your Watch Roku activity.


[1] If you are making layout changes on your PC using RedEye’s browser application, you can skip this step — advanced options are always enabled.