[Edge] Custom capability presentations: switch and toggle switch state

Developer Programs Writing Edge Drivers
1

I have written a custom capability that has a single text attribute (statustext) with a setter command. I also created a presentation where the attribute is a toggle switch in the detailView.

This almost works except for one thing: the “state” section of the presentation is not correctly mapping the switch on/off position based on the correlating attribute value. Even though the label shows the expected text value, the switch itself is always “on” no matter what. I have tried this with both Switch and ToggleSwitch, and the state section is broken for me on both.

@nayelyz Am I missing something in getting the switch position to map to the actual attribute value?

image
image562×583 48.4 KB

Capability

{
    "version": 1,
    "status": "proposed",
    "name": "activestatus6",
    "ephemeral": false,
    "attributes": {
        "statustext": {
            "schema": {
                "type": "object",                
                "properties": {
                    "value": {
                        "type": "string",
                        "enum": [
                            "enabled",
                            "disabled"
                        ]
                    }
                },
                "additionalProperties": false,
                "required": [
                    "value"
                ]
            },
            "setter": "setStatusText",
            "enumCommands": []
        }
    },
    "commands": {
        "setStatusText": {
            "name": "setStatusText",
            "arguments": [
                {
                    "name": "value",
                    "optional": false,
                    "schema": {
                        "type": "string"
                    }
                }
            ]
        }
    }
}

Presentation

    "dashboard": {
        "states": [
            {
                "label": "Status: {{statustext.value}}"
            }
        ],
        "actions": []
    },
    "detailView": [
        {
            "label": "{{i18n.label}}",
            "displayType": "toggleSwitch",
            "toggleSwitch": {
                "command": {
                    "name": "setStatusText",
                    "on": "enabled",
                    "off": "disabled"
                },
                "state": {
                    "value": "statustext.value",                    
                    "on": "enabled",
                    "off": "disabled",
                    "label": "{{statustext.value}}"
                }
            }
        }
    ],
    "automation": {
        "conditions": [
            {
                "label": "Status",
                "displayType": "enumSlider",                
                "enumslider": {
                    "value": "statustext.value",
                    "alternatives": [
                        {
                            "key": "enabled",
                            "value": "Enabled"
                        },
                        {
                            "key": "disabled",
                            "value": "Disabled"
                        }
                    ]
                }
            }
        ],
        "actions": [
            {
                "label": "Status",
                "displayType": "list",
                "list": {
                    "alternatives": [
                    {
                        "key": "enabled",
                        "value": "Enabled"
                    },
                    {
                        "key": "disabled",
                        "value": "Disabled"
                    }
                ]
                }
            }
        ]
    },
    "id": "towertalent27877.activestatus6",
    "version": 1
}```
2

Hi, @brbeaird
I have a custom capability where the button changes from “colored” to “gray” (I just made a test with it). So, I think the only difference is that you didn’t configure the alternatives to identify which state is “active” (“colored”) and which “inactive” (“gray”). For example:

"detailView": [
    {
        "label": "Toggle Switch",
        "displayType": "toggleSwitch",
        "toggleSwitch": {
            "command": {
                "name": "setSwitchValue",
                "on": "Device On",
                "off": "Device Off",
                "argumentType": "string"
            },
            "state": {
                "value": "switchValue.value",
                "valueType": "string",
                "on": "Device On",
                "off": "Device Off",
                "alternatives": [
                    {
                        "key": "Device On",
                        "value": "{{i18n.attributes.switchValue.i18n.value.DeviceOn.label}}",
                        "type": "active"
                    },
                    {
                        "key": "Device Off",
                        "value": "{{i18n.attributes.switchValue.i18n.value.DeviceOff.label}}",
                        "type": "inactive"
                    }
                ]
            }
        }
    }
]
3

That worked! Thank you so much. Might be useful to tweak the docs to indicate that section is just as important as the on/off values above it.

1 Like