Using Control Pages (Pro only feature)

Indigo Control Pages provide a quick and powerful way to create Indigo Touch and Web browser accessible home control interfaces. Control Pages update in real time as Device states (on/off, brightness, active sprinkler zone, etc.) and Variable values (iTunes_CurrentTrack, homeMode, etc.) change and allow remote control of any Indigo action. The Control Page Editor allows the creation of these pages graphically within Indigo -- no HTML, CSS, or JavaScript coding is required. Once created, the built-in Indigo Web Server can immediately serve the pages to any modern Web browser.

Indigo Control Pages:

Before creating or editing a Control Page, you should first create Indigo Devices to represent your INSTEON and X10 modules, and Indigo Variables to represent your home control state information.


example Control Page representing a floor plan

Creating a Control Page

  1. Select Control Page List from the View menu.
  2. Press the New... button at the top of the main window.
  3. Enter a name in the Page name edit field (ex: "first floor").

Tip: For a good Control Page example, look at how the Sample House database file uses Control Pages. Click on various page controls to select them and see their settings and actions.

Editing the Page Background

When no page controls are selected, the bottom of the Page Editor window shows information about the page background. If you do not see these controls, then use the mouse to click on the background in the Page Editor workspace (not on a control) to deselect any selected controls.

The Page Editor does not have floor plan drawing tools or objects. All graphics are imported PNG image files. To create your own custom background image you can either: draw a background page graphic (like a floor plan) in any graphic program that can save PNG image files, use a scanner to scan a real paper blueprint into a PNG image file, or take photographs of your house and/or rooms.

The Background image popup control specifies the PNG image file to be used as the background for this page. If you have a custom PNG image file you want to use, then:

  1. Press the Show Folder button to locate the backgrounds folder, then move your PNG image file into the folder.
  2. Switch back to Indigo and press the Refresh button.
  3. Select your PNG image in the Background image popup control.

The Background color specifies what color will be used behind the background image. If the background image is opaque and the background size is set to fit the image, then the background color will not show through.

The Background size can be set to match the image exactly or can be set to a specific width and height.

Adding a Device State Control

  1. Press the New button at the top of the Page Editor window. A new selected control will be inserted into the center of the page.
  2. Select Device State from the Display popup control.
  3. Select the device you want to control in the For popup control.

Device State controls can be viewed on the Control Page as either a graphical image icon (like a light bulb), or as text showing the current state (on, off, brightness %, etc.). Select the As image radio button to view the Device State control as a graphical image icon, or select As text to view a textual representation of the current Device State.

Tip: You can have unlimited controls on a single page, including multiple controls that represent the same device. For example, you can have both a graphical icon representation of a device and a textual representation of the same device. Use the Duplicate button to quickly copy the selected Device State control. You can then reposition and modify the settings of the new duplicate control.

If you selected the As image radio button, then choose an image icon from the popup control you want to use for this control.

If you selected the As text radio button, then you can specify the font face, point size, color, and alignment used to display the device's textual state. Additionally, the blue selection feedback on the control in the page workspace will show a handle that can be click-dragged to specify the maximum width allowed for the textual state.

Adding a Variable Value Control

  1. Press the New button at the top of the Page Editor window. A new selected control will be inserted into the center of the page.
  2. Select Variable Value from the Display popup control.
  3. Select the variable you want to control in the For popup control.

Variable Value controls can be viewed on the Control Page as either a graphical image icon (like a green or red circle), or as text showing the current state (true, false, "asleep", etc.). Select the As image radio button to view the Variable Value control as a graphical image icon, or select As text to view a textual representation of the current Variable Value.

If you selected the As image radio button, then choose an image icon from the popup control you want to use for this control.

If you selected the As text radio button, then you can specify the font face, point size, color, and alignment used to display the variable's textual value. Additionally, the blue selection feedback on the control in the page workspace will show a handle that can be click-dragged to specify the maximum width allowed for the textual state.

Adding a Static Image or Caption Control

  1. Press the New button at the top of the Page Editor window. A new selected control will be inserted into the center of the page.
  2. Select Static Image / Caption from the Display popup control.
  3. Select an image icon from the Image popup control, or for caption-only controls select None.

Static Image and Caption controls are useful for adding textual labels, buttons, and other stateless images to your Control Page. Although they never update to reflect a Device State or Variable Value, they can still be assigned browser click actions. For example, you could have a Static Image control of a button that when pressed runs a sprinkler schedule, or turns off all the lights in the house.

Adjusting Captions Text on Any Control

All control types (Device State, Variable Value, and Static Image) can have optional caption or label text displayed. By default, Device State caption text is the device's name and Variable Value caption text is the variable name. To override the caption text used, enter new text in the Caption edit field. You can also specify the font face, point size, color, and relative position used by the caption.

Defining Client Actions

All control types (Device State, Variable Value, and Static Image) can have optional client actions defined (taps in Indigo Touch, mouse clicks in web browsers). A client action is different from a server action (see Defining Server Actions below) in that a client action will cause the client to perform some action locally: Popup UI Controls, Link to Control Page, or Link to External URL.

Popup UI Controls

To show popup controls for the Device State Control, select Popup UI controls in the Client action popup control. This will show controls that are specific to the particular device that was selected above - on/off controls for all lights, sliders for dimmers, etc.

Linking Control Pages Together

To link the selected control to another Control Page, select Link to Control Page in the Client action popup control. Next, select the destination Control Page's name in the popup control. Turn on the Open in new window checkbox if you want the client Web browser to create a new window for the destination Control Page (Tip: this setting is ignored in Indigo Touch).

Linking to an External Web Page

To link the selected control to an external Web page or URL, select Link to External URL in the Client action popup control. Next, enter the full URL in the edit field. Normally, you will want to assign this browser click action to a Static Image or Caption control that has caption text of the destination Web page's name. Turn on the Open in new window checkbox if you want the client Web browser to create a new window for the destination Web page (Tip: this setting is ignored in Indigo Touch since all URLs will be opened in a new window in Mobile Safari).

Defining Server Actions

All control types (Device State, Variable Value, and Static Image) can have optional server actions defined. These Indigo actions will be executed on the server whenever the remote client receives a tap or click on the control region. By default, Device State controls have an action that toggles the device's state on/off. Other control types have no action defined by default. To override the action used upon a click or tap, select a new action type in the Server action popup control.

 

Live WYSIWYG Previewing

Press the Browser Preview button to open in your browser a live preview of the Control Page being edited. You will see edits live as you move controls and change their properties. Note the browser preview will only be valid while the Page Editor window is open.

Accessing Control Pages Remotely

In Indigo Touch, Control Pages will show up (not surprisingly) under the Control Pages tab. You can also access the Control Pages from the browser by choosing the Go->Browser Control Pages menu item, or by selecting a specific Control Page in the main window and pressing the Show in Browser button. For information on how to access the Indigo Web server remotely from other computers on your home network see the remote Indigo access section.