Jeder der mit Home Assistant anfängt, kennt das Problem, dass Lovelace einem nur eine begrenzte Möglichkeit bietet, was das Spaltenlayout angeht. Trotz der Vielzahl an Karten die einem spätestens mit HACS zur Verfügung stehen, sind die Spaltenbreiten doch statisch. Mit verschachteln von horizontal- und vertical-stack und dem Panel-Mode kann man das Layout zwar schon etwas durchbrechen, aber auch diese Variante teilt die Bereiche immer in gleiche Breiten bzw. Höhen auf.
Anders sieht es mit der Bootstrap-Grid-Card aus, welche Ihr über HACS installieren könnt. Hier haben wir die Möglichkeit mit Hilfe von Bootstrap CSS-Klassen die Höhen und Breiten der Zeilen, Spalten gezielter zu definieren.
Innerhalb der Bootstrap-Grid-Card kann man einzelne Zeilen über die Karte vom Typ „row“ definieren. Spaltenbreiten innerhalb der Zeile kann man z.B. über das „class“ Attribut mit Werten wie „col-3“ oder „col-9“ auslösen. Standardmäßig kann man von einer Spaltenanzahl von 12 über die volle Breite der Karte ausgehen.
die Klasse „col-3“ gibt also an, dass man 1/4 der zur Verfügung stehenden Breite nutzen soll. „col-9“ hingegen soll 3/4 des Platzes einnehmen.
Weitere Informationen zu den möglichen Klassen-Definitionen von Bootstrap findet Ihr unter folgendem Link:
https://getbootstrap.com/docs/4.0/layout/grid/
Der große Vorteil dieser Vorgehensweise gegenüber der Variante mit horizontal- und vertical-stack liegt darin, dass wenn die Breite des Displays für die Darstellung nicht ausreicht, die Bereiche sich weiterhin untereinander anordnen können.
Beispiel Code für ein Bootstrap-Grid mit verschiedenen Größenangaben
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
type: custom:bootstrap-grid-card
class: col-md-12
cards:
- type: row
class: justify-content-md-center
cards:
- type: vertical-stack
class: col-md-3
cards:
- type: button
tap_action:
action: toggle
entity: light.flurlicht_unten
- type: button
tap_action:
action: toggle
entity: scene.haus_verlassen
- type: button
tap_action:
action: toggle
entity: alarm_control_panel.master
- type: vertical-stack
class: col-md-9
cards:
- type: button
entity: binary_sensor.carport_tor_geschlossen
show_state: true
name: Carport
show_name: true
show_icon: true
tap_action:
action: call-service
service: switch.toggle
service_data: {}
target:
entity_id: switch.carport_tor
- type: row
class: justify-content-md-center
cards:
- type: button
tap_action:
action: toggle
entity: light.flurlicht_unten
- type: button
tap_action:
action: toggle
entity: scene.haus_verlassen
- type: button
tap_action:
action: toggle
entity: alarm_control_panel.master
- type: row
class: justify-content-md-center
cards:
- type: button
tap_action:
action: toggle
entity: light.flurlicht_unten
- type: button
tap_action:
action: toggle
entity: scene.haus_verlassen
- type: button
tap_action:
action: toggle
entity: alarm_control_panel.master
- type: button
tap_action:
action: toggle
entity: scene.haus_verlassen
- type: button
tap_action:
action: toggle
entity: alarm_control_panel.master