Widget Reference

Widget Attributes / Description
Text / Status widgets
Label Labels can be used to provide additional information to widgets in a panel, for example for function groups or positions in a room.
Attribute Description
Title Sets the title (text) of the label.
Show frame Shows a frame around the label if set.
Size Sets the label size in base squares.
Frame color Sets the individual frame background color. This setting overwrites the default stylesheet frame settings.
Title font Sets the individual title font. This setting overwrites the default stylesheet label font settings.
Direction Set the labels text rotation to horizontal or vertical.
Reset to defaults Resets the individual label settings for the frame background color and the title font to the default stylesheet settings.
Status Viewer A status viewer can be used to display values provided by accessories such as temperature or humidity sensors along with their units and a description of the value.
Attribute Description
Title Sets the title (text) of the label.
Command Selects the command / characteristic for the value to be shown.
Fraction digits Defines the decimal places to show.
Units Units to show after the value label, e.g. °C for temperatures. You can type any text into this entry or leave it empty.
Icon Icon to show on the left of the status viewer
Size Horizontal size of the widget in base squares.
Status Selection Status selections can be used when a characteristic offers different options to select from. Tapping on the button of a status selection shows a popup with the available options.
Attribute Description
Title Sets the title (text) of the label.
Command Selects the command / characteristic for the value to be shown.
Icon Icon to show on the button of the status selection.
Size Horizontal size of the widget in base squares.
Buttons / Switches
Button Buttons can be used to send commands or values to characteristics of individual accessories. Buttons are stateless so they do not track any feedback from the accessory. If status tracking is required, switches should be used instead of buttons.
Attribute Description
Title Sets the title (text) of the label (can be left empty).
Icon Selects an icon for the button.
Button color Overwrites the stylesheet setting for button color when set.
LED color Overwrites the LED on color stylesheet setting when set.
Command Selects the command / characteristic for the button action.
Value Defines the value to send when the button is pressed. Enter 1 for example if you want to switch a light on or 0 for switching it off.
Labeled Button In addition to buttons, labeled buttons shows a label with the button title.
Attribute Description
Title Sets the title (text) of the label.
Icon Selects an icon for the button.
Button color Overwrites the stylesheet setting for button color when set.
LED color Overwrites the LED on color stylesheet setting when set.
Command Selects the command / characteristic for the button action.
Value Defines the value to send when the button is pressed.
Switch Switches can be used to switch between the off and on status of a characteristics. Switches also tracks any feedback from the device showing the status of the corresponding characteristic by highlighting the LED accordingly.
Attribute Description
Title Sets the title (text) of the label (not used for simple switches)
Icon Selects an icon for the switch.
Command Selects the command / characteristic for the switch action.
Labeled Switch In addition to switches, labeled switches shows a label with the title of the switch.
Attribute Description
Title Sets the title (text) of the switch label.
Icon Selects an icon for the switch.
Command Selects the command / characteristic for the switch action.
Value setting widgets
Knob Knobs are used to set the value of a characteristic by simulating the turning movement of a real knob. Knobs can be used to set temperatures, dim lights or to set the volume. The value is shown as text as well as visualized by the knob LED. A ratio can be set to provide a more accurate setting of the corresponding value.
Attribute Description
Title Sets the title (text) of the knob.
Command Selects the command / characteristic for the knob action.
Ratio 1/n Sets the ratio of the knob (number of complete cycles to reach 100% of the value)
Size Sets the size of the knob in base squares.
Update rate (msec) Sets the value update rate (rate at which the value is sent to the accessory) in milliseconds.
Slider Sliders are used to set the value of a characteristic by shifting the thumb over the widget up and down or from left to right depending on the directional setting of the slider. Similar to knobs, sliders can be used to set temperatures, dim lights or to set the volume. The value is shown as text as well as visualized by the knob LED.
Attribute Description
Title Sets the title (text) of the slider.
Command Selects the command / characteristic for the slider action.
Direction Sets the slider orientation.
Size Sets the size of the slider in base squares.
Update rate (msec) Sets the value update rate (rate at which the value is sent to the accessory) in milliseconds.
Media widgets
Directional pad The directional pad (D-Pad) is a four way directional control widget with an additional center button function to confirm the users input. It can be used to navigate media on a device. As the user is free to select any function on a directional pad, it could also be used to switch different lights dependent on their position in the room or for similar purposes, where a function is somehow connected to a position or direction.
Attribute Description
Title Sets the title (text) of the directional pad (not used currently)
Drawing option D-Pads can be displayed as a cross or as a rounded (circular) control.
The following settings are identical for all directional controls and the center button.
Command Sets the characteristic to set when the D-Pad is pressed towards the given direction.
Value Sets the value of the characteristic.
Icon Sets the icon to show on the corresponding side of the D-Pad
Dual Button A dual button is a two way control widget. It can be used as a rocker switch to switch between two different values of a characteristic or to increment and decrement values. The up and down function allows the assignment of individual characterstics which increases the flexibility of this widget..
Attribute Description
Title Sets the title (text) of the directional pad (not used currently)
Direction Dual buttons can be displayed vertically or horizontally to better fit the panel layout as required.
The following settings are identical for both directions of the dual button.
Command Sets the characteristic to set when the dual button is pressed towards the given direction.
Value Sets the value of the characteristic.
Icon Sets the icon to show on the corresponding side of the dual button.
Up / Down switch The up / down switch groups two buttons to execute two different individual functions. The function and purpose of the up / down switch is quite similar to the dual button, therefore it can be used to increase or decrease the value or to select between two differents states of a characteristic. It could also be applied for incremental light dimming without feedback.
Attribute Description
Title Sets the title (text) of the directional pad (not used currently)
The following settings are identical for both functions of the up / down switch.
Command Sets the characteristic to set when the dual button is pressed towards the given direction.
Value Sets the value of the characteristic.
Icon Sets the icon to show on the corresponding side of the dual button.
Home accessories
Color light The color light widget allows to set the color and the status of a color light bulb or LED stripe. When the user taps on the left button, a color selection popup is displayed allowing the user to select the desired light color. The switch on the right side of the widget sets the status of the light to on or off accordingly. The color light widget tracks the status of the accessory by showing the currently selected color and highlighting the LED of the switch.
Attribute Description
Title Sets the title (text) of the color light label.
Command Selects the command / characteristic for the switch action.
Icon Sets the switch icon.
Color The color light widget supports setting the color by one characteristic describing hue, saturation and brightness of the light, as well as setting the color by three independent characteristics. Use this setting if the accessory supports setting the color at once (used for example in openHAB).
Hue Independent characteristic for the hue setting.
Saturation Independent characteristic for the saturation.
Brightness Independent characteristic for the brightness.
Rollershutter The rollershutter widget groups all functions required to drive a rollershutter into one control.
Attribute Description
Title Sets the title (text) of the color light label.
The following settings are identical for all functions of the rollershutter widget.
Command Sets the characteristic to set when up, down or stop button is pressed.
Value Sets the value of the corresponding characteristic.
Icon Sets the icon of the corresponding button.
Command (Status) The rollershutter widget can show the status of a characteristic, for example to show the current status of the rollershutter (open, closed, memory position). This function depends on the capabilities of the corresponding accessory and can be configured as required.
Scene Controller The scene controller is a specific widget to activate scenes or action sets as defined in the corresponding accessory. Each scene can be adressed individually by assigning the corresponding scene value to the widget’s scene list.
Attribute Description
Title Sets the title (text) of the color light label.
Command Sets the characteristic to set a scene is selected.
Icon Sets the icon of the corresponding button.
Scenes… Define scenes to select individually
Scene name Name of the scene to show on the selection list.
Icon Icon to show on the corresponding scene in the selection list.
Scene value Value to set to the characteristic, when the corresponding scene is selected by the user.
Other widgets
Navigation Tile The purpose of the navigation tile widget is to build a navigation between different panels in the same home. Besides the settings in the panel stylesheet the navigation tile offers some additional features in order to be customized for a good user experience with LiVo.
Attribute Description
Title Sets the title / description of the navigation tile.
Panel Selects the panel to be loaded when the user taps on the navigation tile.
Width in cells Sets the navigation tile width in base squares.
Height in cells Sets the navigation tile height in base squares.
Image Allows to select an image from the photo gallery to use as icon for the navigation tile. The image is scaled automatically in order to fit to the size of the navigation tile.
Background color Sets the color of the tile.
Title font Sets the font and color of the navigation tile title.
Reset to default Resets all values to the stylesheet defaults.
Web Viewer The web viewer widget is able to show any selected web page and could be used to integrate accessory specific web user interfaces or external web pages like a traffic map or a weather forecast into your LiVo panel.

The web page can be automatically refreshed perodically or when a user defined trigger occurs.

Attribute Description
URL The URL of the web page to show within the web viewer widget.
Refresh timeout Time interval in seconds for the web page refresh. Set to 0 when no refresh interval is required.
Characteristic Characteristic item to observe in order to trigger a web page refresh.
Value Trigger value for the web page refresh.
User Manual Content