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