van_Zyl
12. Oktober 2024 um 11:28
1
Hallo Zusammen,
ich habe mir mit einem CSS-Generator ein Layout generiert, wie ich es gerne auf meinem Dashboard nutzen möchte. Der Code sieht so aus:
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
views:
- theme: ios-dark-mod
title: Home
path: grid
type: custom:grid-layout
layout;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
gap: 7px 7px;
grid-template-areas: |
"Alles-aus Alarme Müll Uhr"
"Fenster Sensoren Sensoren Uhr"
"Schlafzimmer Büro DWD DWD"
"Flur WoZi DWD DWD"
"Kino Bad DWD DWD";
width: 1920px;
height: 1200px;
.DWD {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas: |
". . ."
". . ."
". . .";
grid-area: DWD;
}
mediaquery:
'(max-width: 932px)':
grid-template-columns: 100%
grid-template-areas: |
"Schlafzimmer"
"Büro"
"Flur"
"WoZi"
"Kino"
"Bad"
"Fenster"
"Alles-aus"
"Alarme"
"Sensoren"
"Müll"
"Uhr"
Wenn ich den Code in den Raw-Editor kopiere, erscheint folgende Fehlermeldung:
YAML kann nicht geparst werden: YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key (13:21) 10 | path: grid 11 | type: custom:grid-layout 12 | layout; 13 | grid-auto-rows: 1fr; --------------------------^ 14 | grid-template-columns: 1fr 1fr 1fr 1fr; 15 | grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
Was muss geändert werden?
So soll das ganze aussehen:
tarag
12. Oktober 2024 um 11:34
2
YAML arbeitet nicht mit Semikolon, wie auch schon die Fehlermeldung bemängelt.
van_Zyl
12. Oktober 2024 um 12:05
3
Danke für den Tip.
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
views:
- theme: ios-dark-mod
title: Home
path: grid
type: custom:grid-layout
layout:
grid-auto-rows: 1fr
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr 1fr 1fr
gap: 7px 7px
grid-template-areas:
"Alles-aus Alarme Müll Uhr"
"Fenster Sensoren Sensoren Uhr"
"Schlafzimmer Büro DWD DWD"
"Flur WoZi DWD DWD"
"Kino Bad DWD DWD"
width: 1920px
height: 1200px
.DWD {
display: grid
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr
gap: 0px 0px
grid-template-areas:
". . ."
". . ."
". . ."
grid-area: DWD
}
mediaquery:
grid-template-columns: 100%
grid-template-areas:
"Schlafzimmer"
"Büro"
"Flur"
"WoZi"
"Kino"
"Bad"
"Fenster"
"Alles-aus"
"Alarme"
"Sensoren"
"Müll"
"Uhr"
Jetzt erscheint folgende Meldung:
YAML kann nicht geparst werden: YAMLException: bad indentation of a mapping entry (19:9) 16 | gap: 7px 7px 17 | grid-template-areas: 18 | "Alles-aus Alarme Müll Uhr" 19 | "Fenster Sensoren Sensoren Uhr" --------------^ 20 | "Schlafzimmer Büro DWD DWD" 21 | "Flur WoZi DWD DWD"
tarag
12. Oktober 2024 um 12:14
4
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
views:
- theme: ios-dark-mod
title: Home
path: grid
type: custom:grid-layout
layout:
grid-auto-rows: 1fr
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr 1fr 1fr
gap: 7px 7px
grid-template-areas:
- "Alles-aus Alarme Müll Uhr"
- "Fenster Sensoren Sensoren Uhr"
- "Schlafzimmer Büro DWD DWD"
- "Flur WoZi DWD DWD"
- "Kino Bad DWD DWD"
width: 1920px
height: 1200px
DWD:
display: grid
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr
gap: 0px 0px
grid-template-areas:
- ". . ."
- ". . ."
- ". . ."
grid-area: DWD
mediaquery:
'(max-width: 932px)':
grid-template-columns: 100%
grid-template-areas:
- "Schlafzimmer"
- "Büro"
- "Flur"
- "WoZi"
- "Kino"
- "Bad"
- "Fenster"
- "Alles-aus"
- "Alarme"
- "Sensoren"
- "Müll"
- "Uhr"
Damit hast Du zumindest korrekten YAML-Code. Bei Deinem Beispiel stimmten u.a. die Einrückungen nicht. Ob die Anzeige funktioniert, habe ich jetzt nicht getestet.
Aber wieso verwendest Du nicht die aktuellen Funktionen, um ein Dashboard grafisch aufzubauen, ohne YAML?
van_Zyl
12. Oktober 2024 um 14:45
5
Vielen Dank für die Hilfe.
Ich kann mit den “Bordmitteln” das Dashboard nicht so gestalten wie ich möchte. Ausserdem will ich das Dashboard auf die Displaygröße beschränken.
van_Zyl
14. Oktober 2024 um 10:10
7
Ich habe den Code jetzt angepasst. Vielen Dank für die Hilfe!
So funktioniert er:
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
views:
- theme: ios-dark-mode
title: Home
path: grid
type: custom:grid-layout
width: 1920px;
height: 1200px
layout:
grid-auto-rows: 5
grid-template-columns: 5
grid-template-rows: 5
gap: 7px 7px
grid-template-areas: |
"Alles-aus Alarme Müll Uhr"
"Fenster Sensoren Sensoren Uhr"
"Schlafzimmer Büro DWD DWD"
"Flur WoZi DWD DWD"
"Kino Bad DWD DWD"
DWD:
display: grid
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr
gap: 0px 0px
grid-template-areas: |
" . . ."
" . . ."
" . . ."
grid-area: DWD
mediaquery:
'(max-width: 932px)':
grid-template-columns: 100%
grid-template-areas: |
"Alarme"
"Müll"
"Büro"
"Flur"
"Schlafzimmer"
"WoZi"
"Kino"
"Bad"
"Fenster"
"Alles-aus"
"Sensoren"
"Uhr"
Nachtrag:
Wie kann ich die Höhe des gesamtem Grids, oder jeder einzelnen Zeile vorgeben?
by HarryP: Zusammenführung Doppelpost (bitte “bearbeiten” Funktion nutzen)