Editing Activity Layouts

<< Back to Activity SetupOn to Custom Variables >> Although you can edit the button layout for any activity using an iPhone or iPad, certain things about personal computers make it significantly easier to do so. Namely, the presence of a keyboard and mouse, and a larger monitor all make for a more precise and more satisfying experience. For this reason, the ability to edit activity layouts was one of the first bits of functionality that we developed for the browser application. When you select an activity for layout editing, a fresh window or tab opens in your browser. On the left-hand side of this window you will find the existing button layout. On the right-hand side are detail about the layout and the currently selected control(s).Setup Activity Layout

Selecting Controls

Click on a button to select. Shift-click to select additional controls. Shift-clicking on an already-selected control deselects it. When you select each control, a small, yellow number appears in the upper right-hand corner of the control indicating the order in which the control was selected relative to the rest of the selected controls. Also, you will see dashed lines appear which indicate the boundaries and centerlines of your selection. These lines are particularly useful in positioning controls.

Moving Controls

Once selected, you can move controls by dragging them. As you move them, you may see gridlines appear which indicate when you have aligned your controls with others on the screen, whether exactly along the same line, or at the system-default margin of 10 pixels apart. You can also “nudge” controls in 1-pixel increments using the arrow keys on your keyboard.

Constraining Movement

When dragging a control, you can constrain motion to a particular axis. If you hold down the Shift key while dragging, the control(s) will only move up and down; if you hold down the Control key, the control(s) will move only left and right.

Deleting Controls

Once selected, you can delete a button by clicking on the Delete Selected button on the right-hand side of the page.

Adding Controls

To add a control, click on the Add Control button on the right-hand side of the page. From the resulting pop-up, choose the type of control to add. The following types are available today:Add Control PC
  • Button
  • Image
  • Slider
  • Label
  • HTML
  • (IP) Camera
  • Text Field
After you click OK, the new control will appear in the top-left corner of the screen; it is pre-selected so you can begin editing it right away.

Saving Changes

Once you have made changes, you need to save them or they will not be available when you close the browser window. To do so, click the Save Changes button. If you have made changes that you wish to discard, clicking the Cancel Changes button discards your changes and reloads the activity layout page. If you want to exit without saving your changes, simply close the browser window or tab.

Control Details

Along the right-hand side of the activity layout page there is an accordion containing button details and other information about the layout. It contains the following elements:

View

In the View section you can determine the level of zoom that you use in displaying the layout. You can also choose whether or not to show guidelines. The iPhone/iPod touch Guide Lines option draws a purple line at the border of an iPhone screen so you know how many buttons will fit on the screen at one time. The Layout Lines option displays control edges and default margin lines to help you align your buttons against one another.

Position

Activity Layout PositionIn the Position section you can view or edit the current position of your selected control(s). The Top value displays the vertical (Y) coordinate of the control. When you type a value into this text box, the control will move to that vertical offset. Similarly, the Left value displays the horizontal (X) coordinate of the control; typing a value into this text box moves it to the appropriate horizontal offset. Z-Index determines the stacking order of your images. You can give your images a Z-Index value between 1 and 1000, and different images can share the same value. Lower Z-Index values appear toward the bottom of the stack. Buttons and other controls appear on top of images – that is, they have an effective Z-Index value of 1001. If you plan to use your image as the background for an activity, you may want to check the Is Background box. Normally, RedEye will resize your layout window to accommodate all of the controls. For images with the “Is Background” option checked, however, RedEye will not resize the layout window to fit them, thus eliminating the possibility of scrolling the layout window for the sake of the background image alone. If you have more than one control selected, the Align and Distribute buttons become available. When you click on an Align button, all the controls are aligned to the axis of the first control in the selection (the one marked with the yellow number 1). In other words, if you have selected three controls and you selected the one at the far left first, then clicking on the “Align right edges” button will move all the other controls so that their right edges line up with that first, left-most control. You can align left, right, top, and bottom edges, as well as vertical and horizontal centers. If you click one of the Distribute buttons, all of the controls will be evenly distributed between the positions of the first selected (yellow 1) and last selected (highest yellow number) controls. You can distribute along either the horizontal or the vertical axis.

Appearance

In the Appearance section you can change the look of the selected control(s). For button controls, there are three Size choices: small, large, and jumbo. For image controls, you specify the exact Width and Height, in “relative pixels.” The relative pixel measurement assumes a display width of 320.0 pixels. For iPad, we scale up the size by 40%. On other screens (Android phones and tablets, PCs running the browser app) the exact scaling factor depends on the size and resolution of the display. You can also change the control Name, and choose whether to show a text label below the control. Activity Layout AppearanceYou can also give each control a Description, which is useful on the iPhone for customers using the VoiceOver accessibility option, as descriptions are read to give control “hints.” For button controls, you can choose an Icon. Icons here include all of the available command icons, plus many popular television network icons. If there is not an appropriate icon, you can choose “Text only,” which displays text in the middle of the button in lieu of an icon. Images If you are working on an image control, you determine what the image will display by selecting a Base Image Variable. Optionally, you can also assign an Active Image Variable, which determines the image shown when the control is clicked or tapped (highlighted). The variable referred to here is a “state” or “custom” variable. You can update state variables dynamically, which makes image controls suitable for displaying things such as album art. For more information on the scripting involved in updating state variables at runtime, please refer to the RedEye Advanced Programming Manual. Your image state variables should be properly formatted URLs. Because of limitations within the browser application and limited storage space within the RedEye unit itself, at this time we support images hosted on publicly accessible web (HTTP) servers. You can use file types supported by standard web browsers, including JPEG, GIF, and PNG. We recommend using PNG files, as this format uses lossless compression and allows for transparency. The RedEye application will cache the images you feed it based on URL. If you need to update an image, the URL needs to change. (Alternatively, you can delete and reinstall the iOS application, or clear your browser’s image cache.) Sliders The Show Value option is unique to slider controls. When this option is selected, a label will appear above the slider handle displaying the current value of the slider. This label moves in tandem with the slider handle as you drag.

Slider Values

In the Slider Values section you determine the range and values of the slider control. Minimum Value is the lowest acceptable value for the control; negative values are acceptable, as are non-whole numbers. Similarly, Maximum Value is the highest acceptable value.  Increment defines the smallest amount of change allowed between one value and another; increments must be non-negative, but they can be fractions. Choose a Value Variable to tie your slider control to a state variable.  When you drag the slider, RedEye will update the value of this variable; similarly, when the variable value updates, the slider handle position will update to reflect the change. For more information on the scripting involved in updating state variables at runtime, please refer to the RedEye Advanced Programming Manual. Labels For labels, you can also specify the Font Size in relative points (similar to relative pixels, this is the font size when the display is 320 pixels wide, and RedEye will scale automatically for you). Font size determines the height of the label control. Check the Bold box if you wish the label to use bold font. You can choose among left, center, and right alignment using the Justification drop down. You can choose a Color for your label. If your label functions as a button when tapped, the Highlight Color determines how it displays when tapped. Click in either color text box to edit the color. You can specify colors by their red, green, blue (RGB) values; hue, saturation, brightness (HSB) values; or hexadecimal values. You can also drag cursors over the vertical hue bar and the two-dimensional saturation and brightness field to make adjustments to the current color. The color swatch on the top left displays the new color; the one on the top right shows the original. When you are finished making changes, click on the circular rainbow icon in the bottom right corner to use the current color, or click the close icon in the upper right to cancel. Choose a Text Variable to determine the text displayed in your label. The variable referred to here is a “state” or “custom” variable. You can update state variables at runtime, which makes label controls suitable for displaying dynamic data such as the current track name. For more information on the scripting involved in updating state variables at runtime, please refer to the RedEye Advanced Programming Manual. HTML Values Choose an HTML Content Variable to determine the content displayed in your HTML control. The variable referred to here is a “state” or “custom” variable.You can update state variables at runtime, which makes HTML controls suitable for displaying dynamic data. For more information on the scripting involved in updating state variables at runtime, please refer to the RedEye Advanced Programming Manual. The Selected Value Variable determines which state variable RedEye will update when you click on a hyperlink whose URL begins with the prefix redeye#. RedEye will set the value of this variable to be the text following the pound sign (#) in the URL. For example, if the hyperlink URL is “redeye#my_value” then the variable value will be set to “my_value”. Cameras Choose a URL Variable to assign the video feed for your camera control. The variable referred to here is a “state” or “custom” variable. You can update state variables at runtime, which makes it possible to change the camera feed based on a button click or some other action within the activity. For more information on the scripting involved in updating state variables at runtime, please refer to the RedEye Advanced Programming Manual. At present, RedEye can handle Motion-JPEG video feeds, which most IP cameras support today. Your URL should point to an HTTP or HTTPS stream.

Security

RedEye can access password-protected and encrypted camera feeds using information you provide in the Security section. Enter the Username and Password, if desired. Please note that RedEye will store this information in your configuration, so it may be accessible to other people on your network. If you do not enter a username and password in the configuration, you can still access password-protected feeds, but you will be prompted for the missing information (username, password, or both) at runtime. If you are accessing a password-protected feed using an unencrypted stream (i.e., HTTP rather than HTTPS), you must select the Allow Clear Text option to allow your credentials to be sent in clear text. If you do not want to allow clear text credentials, you will need to change your stream to use HTTPS. If you have configured your camera to use HTTPS using a self-signed certificate, then you must select the Allow Self-Signed option to prevent RedEye from attempting to validate the server certificate against commonly known root certificates. Text Fields

Appearance

In the Appearance section you can change the look of your text field control(s). Placeholder is text that displays inside the field when it would otherwise be empty – a way of indicating the purpose of the field without having to waste space with a label outside the field itself. You can specify the exact Width in “relative pixels.” The relative pixel measurement assumes a display width of 320.0 pixels. For iPad, we scale up the size by 40%. On other screens (Android phones and tablets, PCs running the browser app) the exact scaling factor depends on the size and resolution of the display. You can also specify the Font Size in relative points (similar to relative pixels, this is the font size when the display is 320 pixels wide, and RedEye will scale automatically for you). Font size determines the height of the text field control. If you check the Show Border option, RedEye will draw a thin border around the outside of your text field. You can choose a Color for the text in your text field. Background determines the color displayed behind the text in the control. Click in either color text box to edit the color. You can specify colors by their red, green, blue (RGB) values; hue, saturation, brightness (HSB) values; or hexadecimal values. You can also drag cursors over the vertical hue bar and the two-dimensional saturation and brightness field to make adjustments to the current color. The color swatch on the top left displays the new color; the one on the top right shows the original. When you are finished making changes, click on the circular rainbow icon in the bottom right corner to use the current color, or click the close icon in the upper right to cancel.

Text Field Values

Choose a Text Variable to determine which variable stores the text that you type into the field. Typically a command or script uses the value of this variable to process the text and send it to the device you are controlling. For more information on variables and scripting, please refer to the RedEye Advanced Programming Manual.

Shortcut / Gesture

In this section you can set both the keyboard shortcut for your control (which you can use when controlling your RedEye through the browser application) and the shortcut gesture (which you can use in conjunction with an iOS controller). iOS shortcuts include a number of motion gestures as well as multi-touch options. Keyboard shortcuts include all the basic alphanumeric characters, plus many special characters such as tab, space, escape, and arrow keys. Shortcuts already assigned to controls display the control name next to the shortcut in each list.

Actions / Toggles

In this section you determine what happens when you press a control while running your activity. If you are editing a button, there are four basic types:
  • Normal buttons execute a single action one time when tapped.
  • Macro buttons execute more than one action when tapped. Macro buttons are particularly useful for creating buttons that jump to favorite television channels.
  • Toggle buttons execute a single action at one time, but cycle through a series of actions when pressed repeatedly. For example, perhaps you want a single button to switch between Play and Pause on successive taps, because combining these actions into one button will save space in your activity layout. You can create a toggle button with two actions — one for Play and one for Pause — so that each time you tap the button, you alternate between the two. Toggle buttons are similar to toggle commands, but more powerful. For example, toggle buttons can work with discrete commands, or even commands that target different devices.
  • Repeating buttons function as do Normal buttons when tapped and released. However, if you tap and hold a repeating button, the button’s action is repeated rapidly until you release the button. This type of button is useful for things such as volume and channel functions that “ramp” when you hold them down.
In the case of toggle and macro button types, you can add additional actions to your button. Click on the Add New Macro Action or Add New Toggle Value link as appropriate. For macro buttons, there will be a delay between each action, which you can customize by typing a value in the delay text box. You can reorder commands in the macro or toggle list by dragging on the handle icon (Handle Icon Actions) at the right. You can delete an action by clicking on the red X (Delete Icon). Buttons which display with a red border do not have any action assigned, so you may want to add one here. Deleted Buttons If you delete a button but have not yet saved your changes, it will be available here. Click on the Restore link to put it back into your layout at its original position. Images If you are editing an image, you do not have to specify an action (i.e., the image can be there for display purposes only). However, you can also give the image an action to make it function like a custom button. In this case there are two types:
  • Normal images can execute a single action one time when tapped.
  • Repeating images function as do Normal images when tapped and released. However, if you tap and hold a repeating image, the image’s action is repeated rapidly until you release it. This type of image is useful for things such as volume and channel functions that “ramp” when you hold them down.
Sliders Although tying your slider control to a state variable will cause that state variable to update, unless you specify an action here, simply changing the state variable value will have no effect. Please note that the state variable change always happens before the invocation of your action. Labels For labels, you do not have to specify an action (i.e., the label can be there for display purposes only). However, you can also give the label an action to make it function like a custom button. In this case there are two types:
  • Normal labels can execute a single action one time when tapped.
  • Repeating labels function as do Normal labels when tapped and released. However, if you tap and hold a repeating label, the label’s action is repeated rapidly until you release it. This type of label is useful for things such as volume and channel functions that “ramp” when you hold them down.
HTML For HTML controls, you do not have to specify an action (i.e., the control can be there for display purposes only). However, you can also perform actions when clicking on hyperlinks beginning with the redeye# prefix. As with slider controls, RedEye updates the Selected Value Variable (see above) before invoking your action, so you can use this variable to determine which hyperlink was clicked. Actions themselves have two different types. Command actions simply send out one of your pre-defined commands. To pick a command, first pick the device, and then the command, as well as a toggle value (if necessary). Script actions run a custom script that you write. Scripting is outside the scope of this manual, but more information on scripting is available in the RedEye Advanced Programming Manual. Text Fields In this section you determine what happens when you type in a text field while running your activity. Here you specify how the text you have entered will be processed and sent to the device you are controlling. Actions themselves have two different types. Command actions simply send out one of your pre-defined commands. To pick a command, first pick the device, and then the command, as well as a toggle value (if necessary). Script actions run a custom script that you write. Scripting is outside the scope of this manual, but more information on scripting is available in the RedEye Advanced Programming Manual.

Tips

The Tips section displays a quick reference for some of the less obvious features of the activity layout page. << Back to Activity SetupOn to Custom Variables >>