↓
 
Startseite→-→Homeassistant: Create a nice roof window and cover visualization/control

Homeassistant: Create a nice roof window and cover visualization/control

Digital home of George Ruinelli Veröffentlicht am von

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

Velux.zipHerunterladen

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:

roof-window-venting.zipHerunterladen

Kommentare

Homeassistant: Create a nice roof window and cover visualization/control — Ein Kommentar

  1. 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

    Antworten ↓

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

 

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre, wie deine Kommentardaten verarbeitet werden.

HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

↑