Mobile

A device can be controlled with a mobile card. These cards are available in the smartphone app and from the Zones & Devices overview.

By default your device's class will automatically generate the mobile card, based on the device's capabilities. It is possible to override this by defining a mobile card in the /app.json, or upon Pairing.

Mobile Components

A mobile card is a collection of components. A component can be seen as a small widget, that shows and/or controls one or more capabilities.

/app.json

"id": "com.weather.example",
...
"drivers": [
    {
        "id": "my_driver",
        ...
        "mobile": {
            "components": [
                {
                    "id": "icon",
                    "capabilities": [ "onoff" ]
                },
                {
                    "id": "slider",
                    "capabilities": [ "dim" ],
                    "options": {
                        "showTitle": true
                    }
                },
                {
                    "id": "toggle",
                    "capabilities": [ "onoff" ]
                }
            ]
        }
    }
]

Non-floating components will be rendered from left to right, so always let the icon component be first in the array.

If your device supports the onoff capability, the mobile card will look greyish when the device is turned off. To prevent this, add capabilitiesOptions.onoff.greyout = false to the driver entry in /app.json.

Icon

"id": "icon"

The Icon component will display the device's icon, and can optionally be used for a single boolean capability.

Toggle

"id": "toggle"

The Toggle component can be used for a single boolean capability.

Options

/app.json

"options": {
    "showTitle": true // default: false
}

Slider

"id": "slider"

The Slider component can be used for a single number capability.

Options

/app.json

"options": {
    "showTitle": true // default: false,
    "icons": {
        "my_capability": "/path/to/my/icon.svg"
    }
}

Battery

"id": "battery"

The Battery component can be used for the measure_battery capability.

Sensor

"id": "sensor"

The Sensor component can be used for one or more number, boolean or string capabilities.

Options

/app.json

"options": {
    "icons": {
        "my_capability": "/path/to/my/icon.svg"
    },

    // for boolean capabilities:
    "my_capability": {
        "noblink": true, // don't blink red
        "invert": true, // blink on false
        "label": {
            "true": {
                "en": "Aww yeah"
            },
            "false": {
                "en": "Oh noes!"
            }
        }
    }
}

Ternary

"id": "ternary"

The Ternary component can be used for a single enum capability with exactly 3 values.

Options

/app.json

"options": {
    "icons"    : {
        "top"        : false,
        "middle"    : "/path/to/my/icon.svg", // added in >0.9.3
        "bottom"    : false
    },
    "values": {
        "top"        : "up",
        "middle"    : "idle",
        "bottom"    : "down"
    }
}

Picker

"id": "picker"

The Picker component can be used for a single enum capability with one or more values.

Color

"id": "color"

The Color component can be used for any combination of light_hue, light_saturation, light_temperature and light_modecapabilities. It can switch between three modes (hue/saturation/temperature) accordingly.

Thermostat

"id": "thermostat"

The Thermostat component can be used for the target_temperature capability.

Button

"id": "button"

The Button component can be used for a boolean or enum capability.

When using a boolean-type capability, the button will send a true value on each press. When the toggle option is set, it will toggle between true and false.

When using an enum-type capability, the button will cycle through the possible values.

Options

/app.json

"options": {
    "icons": {
        "my_capability": "/path/to/my/icon.svg"
    },
    "toggle": [ "my_boolean_capability" ],
    "showTitle": [ "my_capability" ] // add capability ID's to show the title for. By default all titles are shown. Show none with an empty array
}