Device UI for remote control

Overview

In order to use a customised device UI, change the view mode on the Devices page:

All devices will be rendered as a customisable set of interactive controls (widgets). By default, a simple set is rendered, which corresponds to the Shadow.ino Arduino sketch:

A set of controls that is displayed is configurable per device. The configuration is stored in the device shadow tags.ui key, and it is editable via two ways:

  • By clicking on the device management icon, then selecting the Interface tab
  • Via the API, by changing the tags.ui device shadow key

The UI configuration looks as following:

That dialog, essentially, allows to edit tags.ui shadow section, which has the following format:

{
  "widgets": [        // The UI specifies a list of widgets to render
    {"type": .....},  //  Each widget has a type and type-specific settings
    {"type": .....},  // 
  ]
};

Here is a default configuration:

{
  "widgets": [
    {"type": "toggle", "title": "Switch LED on/off", "key": "state.reported.led"},
    {"type": "input", "icon": "fa-save", title: "Set LED pin", "key": "state.reported.pin"},
    {"type": "value", "title": "free RAM:", "key": "state.reported.ram"},
    {"type": "button", "title": "reboot", "icon": "fa-power-off", "method": "Sys.Reboot", "params": {}},
  ]
};

Below each widget type is documented.



Toggle: switch things on/off

{"type": "toggle", "title": "Switch LED on/off", "key": "state.reported.led"}

Renders a toggle button with a label. A shadow key must point to a boolean true/false value.


Value: display any shadow value

{"type": "value", "title": "free RAM:", "key": "state.reported.ram"},

Renders shadow value. The key could point to any simple value - like string, number, boolean.


Button: call any RPC function

{"type": "button", "title": "reboot", "icon": "fa-power-off", "method": "Sys.Reboot", "params": {}}

Renders push button. A push button is attached to the RPC function, not the shadow value. By pushing a button, a given method is called with given params.


Input: display and change any shadow value

{"type": "input", "icon": "fa-save", title: "Set LED pin", "key": "state.reported.pin"}

Renders text input with a push button to save. The input field renders the shadow value. A user can change the value and click the button. Clicking the button sets the state.desired.KEY, triggering the delta.