Hi
I’m building an integration for a WEM thermostat and I’d like to visualise the outside temperature, the inside temperature (measure_temperature), the min and max temperature. But I have an issue finding the corresponding capabilities (Tutorial: Device Capabilities - Homey Apps SDK v3).
Is there a way to create your own capabilities?
Wouter
Is it also possible to use global icons such as the ones that are in use by Homey?
I’d like to use the thermometer icon that is standard.
Thanks!
I think you have to copy them into your app.
Where can I download them?
I’ve looked into some apps that I have but I cannot find any, is there a way to open existing apps and grab the images?
If use use sub capabilities then you will automatically get the icon.
I assumed that they are shown on the web dashboard, so you can use your browser to download them. Or, as @Adrian_Rockall suggests, use subcapabilities.
@robertklep I tried downloading the image but it is embedded inside the code
<span class="css-11y1nwh efypr2h0" style="--url:url(data\:image\/svg\+xml\;base64\,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PHBhdGggZD0iTTIzLjcgMGMzLjMgMCA1Ljk4OCAyLjY4OCA1Ljk4OCA1Ljk4OHYyMi40NDNBMTAuNjg4IDEwLjY4OCAwIDAgMSAzNC40IDM3LjNjMCAyLjg1OC0xLjExMyA1LjU0Ni0zLjEzMyA3LjU2NkExMC42MzEgMTAuNjMxIDAgMCAxIDIzLjcgNDhjLTIuODYgMC01LjU0Ny0xLjExMi03LjU2Ny0zLjEzM0ExMC42MzEgMTAuNjMxIDAgMCAxIDEzIDM3LjNhMTAuNjg4IDEwLjY4OCAwIDAgMSA0LjcxMi04Ljg3VjUuOTg5QTUuOTk3IDUuOTk3IDAgMCAxIDIzLjcgMFptMCAyLjIxNGEzLjc1IDMuNzUgMCAwIDAtMi42NjYgMS4xMDggMy43NSAzLjc1IDAgMCAwLTEuMTA5IDIuNjY2VjI5LjA0YzAgLjM5LS4yMDcuNzUxLS41NDMuOTUyYTguNTY2IDguNTY2IDAgMCAwLTMuMDIzIDMuMDQxIDguNDczIDguNDczIDAgMCAwLTEuMTQ5IDQuMjYzIDguNDMgOC40MyAwIDAgMCAyLjQ4NyA2LjAwMyA4LjQzIDguNDMgMCAwIDAgNi4wMDMgMi40ODcgOC40MyA4LjQzIDAgMCAwIDYuMDAzLTIuNDg3IDguNDMgOC40MyAwIDAgMCAyLjQ4Ny02LjAwMyA4LjQ2MyA4LjQ2MyAwIDAgMC0xLjE0OS00LjI2MyA4LjUzNyA4LjUzNyAwIDAgMC0zLjAyMy0zLjA0MSAxLjExMSAxLjExMSAwIDAgMS0uNTQ0LS45NTJWNS45ODhhMy43NSAzLjc1IDAgMCAwLTEuMTA4LTIuNjY2QTMuNzUgMy43NSAwIDAgMCAyMy43IDIuMjE0Wm0xLjY4NSAxNS4wODNWMzEuMTZhNi40NDIgNi40NDIgMCAwIDEgNC43NjMgNi4yMjUgNi40NDcgNi40NDcgMCAxIDEtOC4xMjktNi4yMjVWMTcuMjk3aDMuMzY2WiIgZmlsbD0iIzMxMzEzMiIgZmlsbC1ydWxlPSJldmVub2RkIi8\+PC9zdmc\+); --size:52px; --color:var(--color-icon-light); --display:inline-block; background-color: rgb(255, 255, 255);"></span>
@Adrian_Rockall can you please give me a bit more info about the subcapabilities?
This is how my capability looks like, I know there is an image tag
{
"type": "number",
"title": {
"en": "Outside temperature",
"nl": "Buitentemperatuur"
},
"uiComponent": "sensor",
"getable": true,
"setable": false,
"units": {
"en": "°C"
},
"min": -20,
"max": 40
}
Thanks
Basically you use the standard temperature capability in your driver definition but add a .outside (or whatever you want) to the end. So:
"capabilities": [
"measure_temperature.outside ",
],
"capabilitiesOptions":
{
"measure_temperature.outside ":
{
"title":
{
"en": "Outside temperature",
}
},
},
You can have as many of those as you like just by changing the postfix and adding he relevant capabilitiesOptions to set the title.
When you define the flow card you name it measure_temperature_outside_changed and in your code you add:
this.outsideTrigger = this.homey.flow.getDeviceTriggerCard( 'measure_temperature_outside_changed' );
The measure_temperature_outside_changed.json file will be something like:
{
"title": {
"en": "The outside temperature changed",
},
"platforms": [
"local"
],
"tokens": [
{
"name": "measure_temperature_outside",
"type": "number",
"title": {
"en": "Outside Temperature",
},
"example": 25
}
],
"args": [
{
"name": "device",
"type": "device",
"filter": "driver_id=YOUR_DRIVER"
}
]
}
Then it will trigger automatically when the capability value changes.
Extract the Base64-encoded data and decode it:
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M23.7 0c3.3 0 5.988 2.688 5.988 5.988v22.443A10.688 10.688 0 0 1 34.4 37.3c0 2.858-1.113 5.546-3.133 7.566A10.631 10.631 0 0 1 23.7 48c-2.86 0-5.547-1.112-7.567-3.133A10.631 10.631 0 0 1 13 37.3a10.688 10.688 0 0 1 4.712-8.87V5.989A5.997 5.997 0 0 1 23.7 0Zm0 2.214a3.75 3.75 0 0 0-2.666 1.108 3.75 3.75 0 0 0-1.109 2.666V29.04c0 .39-.207.751-.543.952a8.566 8.566 0 0 0-3.023 3.041 8.473 8.473 0 0 0-1.149 4.263 8.43 8.43 0 0 0 2.487 6.003 8.43 8.43 0 0 0 6.003 2.487 8.43 8.43 0 0 0 6.003-2.487 8.43 8.43 0 0 0 2.487-6.003 8.463 8.463 0 0 0-1.149-4.263 8.537 8.537 0 0 0-3.023-3.041 1.111 1.111 0 0 1-.544-.952V5.988a3.75 3.75 0 0 0-1.108-2.666A3.75 3.75 0 0 0 23.7 2.214Zm1.685 15.083V31.16a6.442 6.442 0 0 1 4.763 6.225 6.447 6.447 0 1 1-8.129-6.225V17.297h3.366Z" fill="#313132" fill-rule="evenodd"/></svg>
Save that as icon.svg
@Adrian_Rockall thanks for the info, that is working perfectly and is way easier than expected.
One last thing, when I check the values in the app, I’m getting 2 times "temperature’ instead of temperature and the translation of the capability which is described in the driver.compose.json file
"capabilities": [
"measure_temperature.outside",
"measure_temperature"
],
"capabilitiesOptions": {
"measure_temperature.outside ": {
"title": {
"en": "Outside temperature",
"nl": "Buitentemperatuur"
}
}
},
Any suggestions here?
After changing the code, have you deleted and re-added the device?
Could you show a screenshot so I can make sure I am understanding correctly?
There was a space after the capabiltiesOptions, that is why it was not picked up.
One addition…
You can’t change the icon for default capabilities or subcapabilities based on default capabilities - as far as I tried all combinations overwriting the capability settingsnin the driver.
So if you are planning to use separate icos for your capabilities, better define your own custom capability.
But use measure_ or meter_ as prefix to get these values selectable on the device tile.
Example for individual capability with their icon:
