Homeassistant: Create a nice roof window and cover visualization/control
I have some Velux roof windows and covers.
And I wanted to have a nice visualisation of their state and a way to easily control them. The default mdi icons are IMO not intuitive and very limitted, so I created my own icons and card with custom:button-card.
Further I created some automations to control each window resp. cover with a single button:
- If a window is closed or closing, a button press makes it to get opened.
- If a window is open or opening, a button press makes it to get closed.
Here the SVG files to show the open, close and moving states:
Windows
Covers
Button Cards
The button card looks as following:
Windows
type: custom:button-card
entity_picture: |
[[[
if (entity.state == "unavailable") {
return "/local/custom_icons/velux/roof-window-disabled.svg";
}
else if (entity.state == "open") {
return "/local/custom_icons/velux/roof-window-open.svg";
}
else if (entity.state == "closed") {
return "/local/custom_icons/velux/roof-window-closed.svg";
}
else if (entity.state == "opening") {
return "/local/custom_icons/velux/roof-window-opening.svg";
}
else if (entity.state == "closing") {
return "/local/custom_icons/velux/roof-window-closing.svg";
}
]]]
show_entity_picture: true
size: 50px
show_state: true
show_name: false
state_display: |
[[[
if (entity.state == "unavailable") {
return "nicht verfügbar";
}
else if (entity.state == "open") {
if (entity.attributes.current_position == 100) {
return "Offen";
}
else
{
return (entity.attributes.current_position + "% offen");
}
}
else if (entity.state == "closed") {
return "Geschlossen";
}
else if (entity.state == "opening") {
return "Öffnend";
}
else if (entity.state == "closing") {
return "Schliessend";
}
]]]
styles:
state:
- font-size: 12px
entity: cover.room1
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.toggle_room1_window
Covers
type: custom:button-card
entity_picture: |
[[[
if (entity.state == "unavailable") {
return "/local/custom_icons/velux/roof-cover-disabled.svg";
}
else if (entity.state == "open") {
return "/local/custom_icons/velux/roof-cover-open.svg";
}
else if (entity.state == "closed") {
return "/local/custom_icons/velux/roof-cover-closed.svg";
}
else if (entity.state == "opening") {
return "/local/custom_icons/velux/roof-cover-opening.svg";
}
else if (entity.state == "closing") {
return "/local/custom_icons/velux/roof-cover-closing.svg";
}
]]]
show_entity_picture: true
size: 50px
show_state: true
show_name: false
state_display: |
[[[
if (entity.state == "unavailable") {
return "nicht verfügbar";
}
else if (entity.state == "open") {
if (entity.attributes.current_position == 100) {
return "Offen";
}
else
{
return (100 - entity.attributes.current_position + "% geschlossen");
}
}
else if (entity.state == "closed") {
return "Geschlossen";
}
else if (entity.state == "opening") {
return "Öffnend";
}
else if (entity.state == "closing") {
return "Schliessend";
}
]]]
styles:
state:
- font-size: 12px
entity: cover.room1
tap_action:
action: call-service
service: automation.trigger
service_data:
entity_id: automation.toggle_room1_cover
Automations
alias: Toggle Room1 Window
description: ""
triggers: []
conditions: []
actions:
- if:
- condition: or
conditions:
- condition: state
entity_id: cover.room1_window
state: closed
- condition: state
entity_id: cover.room1_window
state: closing
then:
- device_id: 202576afc097***
domain: cover
entity_id: 46d90edfd2fb9***
type: open
else:
- condition: or
conditions:
- condition: state
entity_id: cover.room1_window
state: open
- condition: state
entity_id: cover.room1_window
state: opening
- device_id: 202576afc097***
domain: cover
entity_id: 46d90edfd2fb9***
type: close
mode: single
Images
The SVG files must be placed under www, eg. www/custom_icons/velux/.
Extentions
Venting
If you also want to show the venting position, see the extention in https://community.home-assistant.io/t/roof-windows-and-cover-visualization-control/891367/2
Venting icon:
Hello, thank you very much for this beautiful work. However, I tried to make the background transparent to match the design of my dashboard, but I couldn’t do it. Would it be complicated for you to do this? If not, could you provide a version with a transparent background? If so, it’s no big deal. Thank you anyway.
Wunderbar, vielen dank, very elegant solution, thanks for sharing!
Worked perfectly for me out of the box on my mobile dashboard. The icons are very beautiful and useful. I love em. You have a lot of talent… keep up the good work 🙂
o/ Many greetings & gratitude from NL