Hallo Zusammen,
ich habe über lange Jahre mein Haus mit IOBroker gesteuert und mir ein für mich und die Familie liebgewonnenes Bedienzentrum mittels eines in den Flurschrank eingebauten Tablets gebaut. Hier kann man zentral sehen ob irgendwo noch Fenster auf sind oder Lichter brennen. Zusätzlich kann ich auch die Heizkörperthermostate steuern, die Rollläden bedienen, über die Termine sehen wann der Müll geholt wird oder ein anderer Termin ansteht oder ob einer der Sensoren neue Batterien braucht und vieles mehr.
Ziel ist es nun dieses Schema so gut wie möglich nachzubauen.
In die VIS musste ich mich auch reindenken und konnte somit über die GUI “selbstgemahlte” Knöpfe frei auf dem Bildschirm platzieren.
Da ich vorhabe mittelfristig komplett auf HA zu wechseln, habe ich angefangen die Bereiche meiner VIS in HA nachzubauen, bin aber leider recht schnell an meine Grenzen gestoßen.
Hier mal ein Bild meines IOB VIS Dashbords:
Anfangen würde ich gerne mit der rechten Spalte, wo ich den Zustand der Aktoren sehen und steuern kann. In der Titelleiste steht immer fix die Etage, gefolgt von einer Varriablen, welche sagt ob gelüftet werden soll oder nicht. Manche der Buttons sind zusätzlich mit Jumps versehen um auf andere Seiten zu springen (z.B. der Mäher oder die Kameras). Wie oben geschrieben sind die Symbole in den Knöpfen mit Pixelmator selbst erstellt.
Mein erster Versuch zum Testen ob ich Buttons frei nebeneinander platzieren kann war so “Semi” erfolgreich. Hier das Ergebnis:
und der benutzte Code:
type: grid
cards:
- type: heading
icon: ""
heading: Erdgeschoss
heading_style: title
grid_options:
rows: 1
columns: full
- type: horizontal-stack
cards:
- type: markdown
content: "**Flur**"
text_only: true
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
}
ha-markdown {
font-size: 20px !important;
}
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 50px
- height: 0px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: markdown
content: "**WZ Terrassentür**"
text_only: true
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
}
ha-markdown {
font-size: 20px !important;
}
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 50px
- height: 0px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: markdown
content: "**WZ Schiebetür**"
text_only: true
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
}
ha-markdown {
font-size: 20px !important;
}
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 50px
- height: 0px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: markdown
content: "**Esszimmer**"
text_only: true
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
}
ha-markdown {
font-size: 20px !important;
}
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 50px
- height: 0px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: markdown
content: "**Küche**"
text_only: true
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
}
ha-markdown {
font-size: 20px !important;
}
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 50px
- height: 0px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
grid_options:
columns: 12
rows: auto
- type: horizontal-stack
cards:
- type: markdown
content: "**Gäste WC**"
text_only: true
card_mod:
style: |
ha-card {
background: transparent !important;
border-radius: 0px !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
display: flex;
align-items: center;
justify-content: flex-start;
height: 60px;
}
ha-markdown {
font-size: 20px !important;
}
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 50px
- height: 0px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
- type: custom:button-card
entity: switch.shellyplusplugs_64b7080e02e0_switch_0
icon: mdi:lightbulb
show_name: false
styles:
card:
- width: 50px
- height: 50px
- margin-right: 0px
- border-radius: 4px
icon:
- width: 40px
- height: 40px
grid_options:
columns: 12
rows: auto
column_span: 1
Idee war rechtsbündig mit button-cards anzufangen und diese als horizontal stack cards dann bei bedarf um weitere button cards zu erweitern. Dies hat allerdings von der vertikalen Ausrichtung der Buttons nicht funktioniert. Als work-around habe ich mir deshalb in jeder Zeile eine blank-card eingefügt. Somit habe ich immer 5 Karten nebeneinander und würde in Bereichen wo ich nur 2 oder 3 Karten brauche die restlichen Karten mit blank-cards auffüllen.
Gibt es hier eine elegantere Lösung?
Ich glaube, dass es einige Leute gibt, die von IOBroker kommen und sich mit den HA Dashboards schwertun. Deshalb würde ich dieses Thema versuchen über die nächsten Monate fortzuführen um möglichst viele “Wechsler” wie mich abzuholen.
Grüße
miwi
