Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Create New Panel
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.
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.
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.
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:
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.
Figure 5: Enter Custom Screen Dimensions