Smart Home Visualization Themes - Manual

Design your custom GUI tailored to your home or building automation project.

About

Theme is the smart home visualization of bOS building automation system which is displayed on mobile devices (mobile phones, tablets, etc.).

Theme node contains the control templates and default colors which can be used in the smart home visualization themes.

bOS supports fully customizable smart home visualizations (Themes) that fit on any mobile device. Themes contain visualization panels which can be used to display an automatic layout (frames) or a floor plan layout (freely positioned controls). Panels are accessed through the bottom (category) and building navigation menu. Infinite number of subpanels can be added to any category.


Help

Main Node defines the the visualization theme. Theme Panel and Menu Nodes can be added to the Main Node to create the visualization theme. Main Node is the home screen of the visualization theme. Theme Panel nodes define the visualization panels (e.g. rooms, categories). Menu Nodes define the menu structure of the visualization theme. The first level of Menu Nodes are displayed in the bottom menu. Theme Panels and Menu Nodes added under the first level Menu Node are displayed in the left menu.

Smart home theme tree

Picture 1: Example of visualization theme

Theme Editor

Theme Editor enables editing of the theme panels.

Building operating system theme editor

Picture 2: Theme Editor

Upper toolbar enables:

  • Frame: Add a frame control.
  • Object: Add user control linked to an object.
  • General: Add general control not linked to an object.
  • Delete: Delete selected controls.
  • Copy: Copy selected controls.
  • Paste: Paste selected controls.
  • Cut: Cut selected controls.
  • Up: Move selected control up (controls on Frame) or bring to front (control on Panel).
  • Down: Move selected control down (controls on Frame) or send to back (control on Panel).
  • Refresh: Refresh browser cache (can be used to refresh the images, if images are replaced).

Lower toolbar enables scrolling of panels and selected frames.

On the right the current panel and current selected controls settings are displayed. The settings editor filters the currently displayed properties depending on the selected control style.

Frame

Frame control is used for grouping of multiple controls. Frame control can be added by clicking on the Frame button. The Frame form will be displayed. A frame template can be selected under Template drop down box. By clicking on the Add button object will be added to the currently selected frame or to the panel if no frames are selected.

Object

Object control is a control linked to a specific configuration object. Object control can be added by clicking on the Object button or by drag and dropping an object from the configuration tree to the Theme Editor panel. The Object Control form will be displayed.

Smart home add UI

Picture 3: Add object control form

Add UI form displays the configuration tree from which an object can be selected. For each object the supported user interface controls are displayed in the Type drop down control. The list of controls can contain object specific object controls and universal controls linked to an object's value or function. Before adding the new user control, a template can be selected under Template drop down box. By clicking on the Add button object will be added to the currently selected frame or to the panel if no frames are selected.

The available styles are:

  • Automatic: Style is set automatically based on parent control (panel, frame, menu frame).

  • Control: Used as a UI control in frames.

Smart kitchen Control

Picture 4: Control template

  • Button: Used as a UI control in free positioning (e.g. Floor plan).

Smart Home Button

Picture 5: Button template

  • Icon: Used as a UI control in Menu Control.

Smart home design Icon

Picture 6: Icon template

  • Manual: Manually set all the appearance properties.

The available universal controls are:

  • Boolean: used for controlling ON/OFF, True/False, Enabled/Disabled object values.
    • Device: template for controlling devices.
    • Lamp: template for controlling lights.
    • Status: template for displaying status value.
    • Alert: template for displaying alert (e.g. Alarm sensor).
    • Set Button: template simulating set button.
  • Double: used for controlling analog object values.
    • Status: template for displaying status value (e.g. Current temperature).
    • Setpoint: template for setting value (e.g. Setpoint temperature)
    • Percent bar: template for displaying status value with progress bar.
  • Integer: used for controlling whole number object values.
    • Dimmer: template for controlling dimmers.
    • Shades: template for controlling shades.
    • Mode: template for controlling modes.
    • Status: template for displaying status value (e.g. Valve position status).
    • Setter: template for setting value (e.g. Valve position control).

The available object specific controls are:

  • AlarmPartition: keypad for controlling a DSC alarm partition.
  • AlarmPartitionLabel: text label showing the current DSC alarm partition status.
  • ColorPicker: color selection control for RGBMixer task or HUE lamp.
  • DataLogger: chart control for AnalogLog and CounterLog tasks.
  • DeviceState: control for setting the GlobalCache IRDevice status.
  • IPCamera: control for IPCamera device showing the IPCamera image.
  • Library: control for showing the XBMC library.
  • PanelLink: navigation control for Theme Panel node.
  • PlayList: control for showing the XBMC play list.
  • Remote: control for showing the XBMC remote control.
  • RSSReader: control for RSS device showing the RSS feed.
  • Scene: control for Scene task.
  • Schedule: control for Schedule task.
  • Weather: control for displaying the weather information for the Weather device.

General

General controls are controls which are not linked to a configuration object. General button opens the General Control form. Before adding the new user control, a control template can be selected under Control template drop down box. Templates can be fully customized under Templates node. By clicking on the Add button object will be added to the currently selected frame or to the panel if no frames are selected.

The available general controls are:

  • Spacer: empty space control used in frames to acchieve a specific control layout.
  • DateTime: control for showing the current date and time.
  • TextLabel: control for showing a static text value.
  • StartProgram: control for starting an application or opening a web page on the client device.
  • WebBrowser: control for showing an embedded web page.