Roof windows and cover visualization/control

Share your Projects! Dashboards & Frontend
1

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:

cover
cover857Ă—154 12.6 KB

Covers:
windows
windows867Ă—158 11.4 KB

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

And the automation looks as following:

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

The SVG files must be placed under www, eg. www/custom_icons/velux/. Since I can’t upload the SVG files here, I placed them here: Homeassistant: Create a nice roof window and cover visualization/control – Digital home of George Ruinelli

6 Likes
2

Hi.
I just stumbled upon this and 1st of all “Thank You” for this nice work of yours.

I would like to propose a small enhancement.
Velux windows have a “Ventilation” position. ( at least mine have)

This is when, the vent is open, but the window itself is closed.
The maximum venting value seems to be at: “Open - 15%”
So everything > 0 and <=15% should be considered “VENTING”

Only when fully closed, the windows reports “Closed”
Modifying your code slightly.
In the entity_picture:

entity_picture: |
[[[
if (entity.state == “unavailable”) {
return “/local/custom_icons/velux/roof-window-disabled.svg”;
}
else if (entity.state == “open”) {
if (entity.attributes.current_position <= 15) {
return “/local/custom_icons/velux/roof-window-venting.svg”;
}
else
{
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

and in the state_display:

state_display: |
[[[
if (entity.state == “unavailable”) {
return “unavailable”;
}
else if (entity.state == “open”) {
if (entity.attributes.current_position <= 15) {
return “venting”;
}
else if (entity.attributes.current_position == 100) {
return “open”;
}
else
{
return (entity.attributes.current_position + “% open”);
}
}
else if (entity.state == “closed”) {
return “closed”;
}
else if (entity.state == “opening”) {
return “opening”;
}
else if (entity.state == “closing”) {
return “closing”;
}
]]]

To have an additional SVG icon would also be nice.
I have not made a new icon, but propose the icon name :slight_smile:

Cheers and thanks for your efforts
Jurgen

3

Hi @juergen3

Thanks for your feedback!

What about this:

grafik
grafik168Ă—146 5.29 KB

You can grab it from my homepage (see link in my first post)

Please note that the venting position seems not to be identical for everybody. On my windows, it is at 7 %!

4

Hi and thank you for the icon. :slightly_smiling_face:

About the venting position:
I checked again using the Velux KLR 200 and HA
I think you are right!

  1. up to 7% the window is venting but still “locked”
  2. between 8% and 14% it is venting and about to un-lock?
  3. at 15% the window is venting, still closed, but now “un-locked”

I considered <=15% as closed. :thinking:

Maybe we need more icons and states-displays?
How about:

  1. Venting $%" & locked
  2. Venting & un-locking
  3. Venting & un-locked
    ???

I am very bad at drawing icons :frowning: ,
but I think the propeller icon suggest a “forced or active” venting.

I suggest adding symbols to the window icon like

  1. wave arrows and a lock (<=7%)
  2. wave arrows and an unlocking lock (8%-14%)
  3. wave arrows and an un-locked lock (15%)
  4. above 15% - as before

For example something like this?:

image
image406Ă—367 16.5 KB

Again, thanks for all your efforts
Best regards and cheers from the cold NAMIBIA
Jurgen

5

Hi,

thanks for the great work - really love the icons! I have one request: the background of my dashboard is not white (but black) and some of the icons (e.g. roof-window-closing.svg) have still (partial) white backgrounds. May you re-upload them with complete transparent background?

Again, thanks!