Tutorial #3a - Single Room UI

In this tutorial we will begin generating a complete single room 'home cinema' solution using 3 sources, an AV receiver / amplifier, projector, and motorised screen:

Equipment Connectivity

A DemoPad Centro-C IP gateway will provide control over the components via several infra-red outputs, RS232 COM port connections, and 2 relay outputs (up/down) for the motorised screen.

In this tutorial though, we will concern ourselves with the user interface only. Indeed, this is usually the approach one would take when designing projects, as it can be completed off-site, without necessarily requiring access to the physical equipment.

Create the Project

Add a Centro-C
Orientation Options

Creating the Splash Screen

It is common for projects to have an initial screen which is presented to the user when they launch the app. This might show your company logo, or an appropriate image relating to the project.

Splash Screen

Creating the Main Control Page

* Next create a new page called Main Control Page (see Adding a Page). Click on the Landscape icon from the navigation tree and set a background image for that page using the Choose Image with Preview option and selecting the image below:

Background Image Selection

Navigation to the Main Control Page

Now that we have the initial logo screen and the main control page, we need the app to jump to the main control page automatically after a few seconds of the app loading. This is done using a Page Load Action on the Home Page:

Page Load Action

If you were to upload the project at this point, you would see the black screen with the logo for 2 seconds, before the app jumped to the main control page with the blue background.

Source Selection Buttons

If you are using the professional version of the software you can use a Smart Button to quickly generate these buttons by dragging on a button and selecting / creating a flag. If you are using the standard version of the software, this will need to be done manually:

Add Source Selection Buttons

Add 3 buttons (see Adding Buttons), one for each source. We recommend you use the Pro Set 1\Source Icons graphics as shown:

Adding Source Selection Buttons

If you add a button by mistake, you can single click it and press the delete / backspace key to remove it from the page.

Align Buttons

Align and Distribute Buttons

Once the buttons are aligned, click and drag them all with the mouse so that they are moved to the bottom of the page:

Aligned Buttons

Highlight Source Buttons

Highlighting Buttons

Set Source Selection Flags

Once you have done this for all 3 buttons, you may wish to upload the project and ensure that pressing each button causes it to change image, and that only 1 button at once is in the highlighted state.

Create Remote Control Subpages

Select Subpage Background Image

When prompted to do so, select Yes to the prompt: Resize subpage to match actual image size?. This will alter the subpage canvas size to match the physical dimensions of the image selected, which in this case is desirable, as the background image selected fits nicely with the main page background image.

Copy Subpages

Populate Subpages with Building Blocks

Whilst we could create the remote controls using individual buttons, a far quicker way is to use a pre-saved building block of page objects. Select the Source 1 Landscape option from the tree view, and select Building Block from the Insert Page Object menu. Then navigate to Pro Set 1\pages and hover over the Sat Remote building block, and click and drag the objects onto the subpage, ensuring that the top left of the building block is fully on the subpage canvas area:

Add Building Block

When prompted, accept that any image files may potentially be overridden, and choose No when asked whether to Auto Assign Commands and the building block will be placed on the subpage. You can then drag all the objects to place them appropriately, if some of them are outside the background image area. (Note Control-A will select all objects on a page to allow you to move them all at once)

Perform the same steps for the other 2 subpages, choosing the BlurayRemote and AppleTVRemote building blocks accordingly.

Add Subpages to Main Control Page

Add Subpages

You should position each subpage in the same place, as only one will be visible at any one time. This will be achieved using the Reveal menu option for each page. Click on each subpage in turn and expand the Reveal menu, and choose the same flag which you created previously for each source selection button. Also set the Transition option to from left:

Revealing Subpages

NOTE - when page objects (eg subpages) are placed on top of each other, as in this case, you can navigate to the ones underneath by clicking with the right mouse button. This will send the top most object to the bottom, allowing you to then click to select the object which is now on top. Note this has no effect on the control app z-order, it is simply a way of accessing hidden objects in the designer software.

Publish to App

You are now ready to upload the project to the app & test the UI operation. Please refer to Tutorial 1 - Uploading a Project

Once the project is downloaded, you should see the black icon page, followed by the main control page with the 3 source buttons. Pressing any of the 3 source buttons should cause the button to highlight, and the associated remote control to appear based on the flag.

Tutorial 3 Screenshot

If you wish you can download the working project to your control app from our cloud server using the following QR code:

Tutorial 3 Cloud QR code

Or you can download the complete project from http://designer.docs.demopad.com/tutorials/tutorial3.zip