User Interface Design

Pierre Kil edited this page Nov 30, 2017 · 10 revisions

The user interface design view is used for creating control panel designs for various control devices, whether iOS, Android or web-based. Multiple designs can be created to cater for multiple different types of devices that access the OpenRemote installation. There can be even different designs for same device type when different user profiles should have different visual user experience. All these different device designs are listed on the left side of the user interface designer view.

User Interface Design View with Multiple Device Screen Designs

Figure 1: User Interface Design View with Multiple Device Screen Designs.

In a panel you can use several widget types to make up your design. The widget types are explained here.

Button Widget

Buttons in OpenRemote Designer are one-way control elements – that is, they do not change their look or visual appearance based on device state (such as whether a light switch is in 'on' or 'off' state).

Buttons can control devices by sending direct commands to devices. Buttons can also be used as navigation elements to switch between control panel screens.

On the right hand side of the UI designer screen, there's a selection of UI widgets that can be dragged and dropped on the device design canvas. Select the button component and drag it on the screen (see Figure 2)

Figure Button Widget

Label Widget

Labels in OpenRemote Designer can display a sensor value or state. They do not change their look or visual appearance based on sensor value (such as whether there is presence or not).

Image Widget

Image Widgets can be used to visually display the status of a sensor (eg. presence or not). By adapting the code, you can even enable more than 2 states (see Figure 3).

Image Widget

Figure 3. Image Widget, an example with even three different states (requires changes in the code).

Switch Widget

Switches in OpenRemote Designer are two-way control elements – that is, they do change their look or visual appearance based on device state, using different images for 'Image(on)' and 'Image(off)' state (such as for a light switch).

Switches can control devices by sending direct commands to devices.

Slider Widget

Sliders in OpenRemote Designer are two-way control elements to set a range value. They can control devices by sending direct set values within a defined range to devices.

Color Picker Widget

Color Pickers can be used to send an RGB value as a command to a device (eg. a light controller)

Web Widget

Web elements in OpenRemote Designer allow you to embed HTML content in your control panel user interfaces. This is a convenient way to embed visual assets that cannot be easily constructed with the native UI elements offered in the designer.

Examples of web element use include:

  • Integrate third party device and data providers that expose HTML views
  • Add user interactions such as HTML-based device configuration screens as part of OpenRemote control panel user interfaces
  • Integrate third party data visualization services such as EmonCMS.

Web widget can be positioned with absolute pixel position either by dragging it to a desired position or entering desired pixel position values. Web widget dimensions can be modified by dragging the components right or bottom boundary line or by entering new width and height values directly into the widget's property form.

For relative dimensions and positioning, a web widget must be placed on a grid layout container.

Web Widget Positioning

You can position a web element by initially dragging and dropping it to the chosen panel screen position. If you need to make further adjustments to the web widget position, you can do so by:

  • Hovering the mouse pointer over the web widget component, pressing and holding left mouse button down while dragging the component to a new position on the screen
  • Modifying the left and top position property values at the bottom right of the screen when the web widget has been selected. Enter new values into the property fields. The user interface design will update with new value when you defocus the property field, for example by pressing a tab key to move to a next form field.

Web Widget Dimensions

Figure 4: Position Web Widget by dragging it to new position or enter new property values Web Widget Dimensions

You can adjust the web widget dimensions using a mouse by doing the following:

  • Hover the mouse pointer over the right boundary line of a selected web widget. You will notice the mouse pointer change to a horizontal arrow image. Press left mouse button and drag the web widget to a new desired width.
  • Hover the mouse pointer over the bottom boundary line of a selected web widget. You will notice the mouse pointer change to a vertical arrow image. Press left mouse button and drag the web widget to a new desired height.

Alternatively, you can enter new width and height values directly into a selected web widgets properties, as illustrated in Figure 4 above.

Aligning Widgets

There are several options to align you widgets. Some of the options only work with multiple items selected (which you can do by clicking on the different items while holding shift), those will be disabled if you only select 1 item (Figure 5).

  • Widget Alignment: Align on left border, vertical center, right border, top edge, horizontal center and right edge: the first item you select is the one that "sets the constraint", the others in the selection will be aligned on this one.
  • Widget Sizing: Make Widgets the same size, again 1st selected item sets the size for the others. This equal sizing does not apply to the fonts in the boxes.
  • Widget Spread: Spread evenly on horizontal or vertical axis : move the items so there is identical spacing between all selected items. The leftmost and rightmost items determine the total space which will be used to spread the items. It seems the behavior is a bit weird currently if this defines a space that is not big enough for all items to fit. I'll take a look at that later.
  • Widget Centering: Center horizontally or vertically, places the item (or items = the whole selection) in the center of the screen (it should also take into account the fact that there is a tab bar).

Widget Alignment

Figure 5. Different options for aligning widgets.

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.