Create New Panel

Pierre Kil edited this page Dec 7, 2016 · 20 revisions
Clone this wiki locally

The process of designing a new control panel user interface for the OpenRemote system begins by creating a new panel design for your chosen device. This page gives you step-by-step instructions on how to accomplish that task.

First navigate to the User Interface Design view, by selecting the second icon in the top menu (see Image 1)

Create New Panel

In the User Interface Design view, locate the menu on the left-hand side control panel list area, and click on 'New'. The opened menu includes an entry 'New Panel'. Click on it (see Figure 1) and follow the steps below.

Menu New Panel

Figure 1: On Panel Selection Menu First Choose 'New' and then 'New Panel'

After selecting 'New Panel' as shown above, a new dialog opens. In this dialog, fill in the name of your control panel design. Use a descriptive name, as this name is shown to the end user when he is queried which device design to load into his device.

Also, this dialog allows you to choose which type of device you are creating your control panel for. This is a convenience that helps pre-load a device template for your design with correct screen dimensions and a device frame. Choose a device type that you want to design for, or a closest match (see Figure 2).

If your device is not listed as a device template and there's no suitable alternative with similar screen dimensions, you can create a 'custom panel' design that allows you to specify screen details. See Create a Custom Panel for more details.

New Panel Name

Figure 2: Enter A Name For Your Panel And Choose One Of Predefined Device Templates

Below an example of a device template (Figure 3). It's an 'iPhone5 and SE' device template with 320x568 screen dimensions. Note that we use Points in stead of Pixels for iOS devices.

Have another device that you'd like to contribute as predefined device template to Online Designer? Please read how to contribute a new device template and contact us.

New Panel iPhoneSE

Figure 3: Example of New Panel with 'iPhone5 and SE' Device Template

Create a Custom Panel

If the control panel device resolution is not listed as part of the predefined device templates, you will need to specify the screen dimensions explicitly before creating user interface designs for a device.

This can be accomplished by selecting 'Create Custom Panel' item on the left-hand side screen list in Online Designer, as shown in Figure 4 below:

Custom Panel Menu

Figure 4: Select 'Custom Panel' from Screen Selection Menu to Create Differently Sized Control Panel Screen Designs

Once selected, you will be presented with dialog for the screen dimensions, seen below in Figure 5.

Custom Screen Size Dropdown

Figure 5: Enter Custom Screen Dimensions

See Also