Custom-Layout

Jedes Widget mit Layout-Auswahl kennt den Layout-Typ Custom: ein freies Zellenraster, in dem Titel, Wert, Icon, Bild, Bedien-Element oder Freitext beliebig platziert werden.

Mögliche Bildquellen (URL, Adapter-Pfad, Datei, Base64): siehe Bildpfade.

Aus Layout übernehmen

Beim Wechsel auf Custom fragt der Editor, womit das Raster startet.

Auswahl
Layout „…“ übernehmen	baut das bisherige Layout als Raster nach — danach Zeilen ergänzen oder umbauen
Bisheriges Raster behalten	nur wenn das Widget schon ein Custom-Raster hatte
Standard-Raster	Titel · Wert · Einheit
Abbruch	Layout bleibt

Im Raster-Editor holt Aus Layout übernehmen … jedes Layout später noch einmal.

Widget	Layouts
Wert-Anzeige · Binärsensor · Fensterkontakt · Zustandsbild	Standard · Karte · Kompakt · Minimal
Schalter	Standard · Karte · Kompakt
Thermostat	Standard · Kompakt · Minimal · Rundskala
Wetter	Standard · Kompakt · Minimal
Drehregler	Bogen · Skala · Endlos (3D) — setzt zusätzlich dialStyle
Dimmer · Rollladen	Standard · Kompakt · Minimal
Schieberegler	Standard (waagrecht und senkrecht)
Auswahlfeld	Standard · Kompakt · Minimal · Karte
Button · HTTP-Aktion	Standard · Kompakt · Minimal
Eingabefeld	Standard · Kompakt
Uhrzeit	Standard · Karte · Minimal
Zeitschaltuhr · Countdown · Mediaplayer	Standard · Kompakt
RGB-Licht	Standard · Nur Helligkeit · Nur Farbe · Nur Lichtwärme
Kalender	Standard · Karte · Kompakt · Minimal · Agenda
evcc	alle sieben Layouts

Links Rundskala, rechts dasselbe als Custom-Raster mit einer dp-Zeile (Luftfeuchte) darunter:

Übernommen
Farben je Zustand	Zellen mit var(--aura-state-color) · var(--aura-value-color) folgen an/aus, Schwellwert, Heizen/Kühlen
Karten-Hintergrund	bg + borderColor am Raster (Verlauf + Rahmen) — Karten-Hintergrund entfernen im Raster-Editor
Rundskala · Vorhersage · Schnellwahl	als Komponente (dial · forecast · presets …)
Bedienblöcke	als Komponente, so wie das Layout sie zeichnet (viz + btn-col beim Rollladen, slider-line, input-row …)
Listen · Diagramme · Player	als ganzer Block (events-list beim Kalender, flow-diagram bei evcc, player beim Mediaplayer) — Zeilen davor oder danach ergänzen

Raster

Größe per Spinner. Zellen werden zeilenweise gelesen (oben links → unten rechts).

Option	Wert
Spalten	1–20
Zeilen	1–20
Spaltenbreiten	Verhältnis (2 / 1 …) oder auto	auto = so breit wie der Inhalt
Zeilenhöhen	Verhältnis (1 / 0,25 / 1 …) oder auto	auto = so hoch wie der Inhalt; kleiner Wert = Trennzeile
colSizes / rowSizes	auto · 1fr · 60px …	Track-Größe pro Spalte/Zeile
colSpan / rowSpan	1–n	Zelle über mehrere Spalten/Zeilen ziehen

Zellen, die auf einer gezogenen Zelle liegen, werden darüber gezeichnet — z. B. Lampen und Werte auf einem Bild über das ganze Raster: Grundriss mit Bedienelementen.

Verhältnis-Spalten wachsen mit der Widget-Breite: dasselbe Raster rückt in der mobilen Ansicht (Widget über die volle Breite) auseinander. auto-Spalten bleiben bei jeder Breite gleich — z. B. Spalte 1 (Icon) und Spalte 2 (Titel) auf auto, Spalte 3 (Wert) auf 1fr: Icon + Titel links, Wert rechts, wie im Compact-Layout.

Zellinhalt

Klick auf eine Zelle öffnet den Zell-Editor (Schriftgröße, Farbe, Ausrichtung, Span — je nach Zelltyp).

Typ
empty	leer
title · value · unit · rawValue	Widget-eigene Felder
dp	beliebiger Datenpunktwert
text	Freitext
icon · stateIcon	Lucide-Icon, optional vom Datenpunkt-State abhängig
image	Bild aus Datei oder URL
switch · slider · button · stepper · input	Bedien-Element für einen Datenpunkt
select	Auswahlfeld für einen Datenpunkt
datepicker	Datums-/Zeitwähler für einen Datenpunkt
state-text · lastchange	Text je nach Zustand · Zeitpunkt der letzten Änderung
progress	Balken für einen Zahlenwert zwischen min und max (nur Anzeige)
component	Widget-Komponente (z. B. Temperatur-Balken bei Wetter)

Hintergrund
Farbe	mit Transparenz, z. B. halb durchsichtig über einem Foto im Bild-Widget
Ganze Zelle	füllt die Rasterzelle (Standard)
Nur hinter dem Inhalt	Schild hinter dem Text — title · value · unit · text · field · dp · state-text · lastchange

Eine zutreffende Bedingung mit Hintergrund ersetzt die feste Farbe an derselben Stelle.

Zeilenabstand (lineHeight)
leer	1,3 × Schriftgröße + kleine Reserve für Unterlängen (Standard)
Zahl, z. B. 1	genau dieses Vielfache, ohne Reserve — große Werte passen in flache Zellen

Textrichtung (textDirection)
horizontal	Waagrecht (Standard)
vertical-cw	↻ 90° — liest sich von oben nach unten
vertical-ccw	↺ 90° — liest sich von unten nach oben
stacked	Buchstaben aufrecht untereinander

Gilt für title · value · unit · text · field · dp · state-text · lastchange. Ausrichtung bleibt auf die Zelle bezogen (links/rechts, oben/unten). Senkrechter Text braucht Höhe: rowSpan oder eine höhere Zeile.

Vertikale Ausrichtung (valign)
top · middle · bottom	Oben · Mitte (Standard) · Unten
baseline	Schriftlinie — unten, alle baseline-Zellen einer Zeile auf derselben Schriftlinie

baseline gilt für waagrechten Text (title · value · unit · text · field · dp · state-text · lastchange), sonst wie bottom. Die Zelle ist dann nur so hoch wie ihr Inhalt — ein Hintergrund „Ganze Zelle“ deckt nur den Inhalt ab.

Die Balkenfarbe von progress und slider (mit barStyle) ist color, sonst die Akzentfarbe. Eine zutreffende Zell-Bedingung mit color färbt den Balken mit — bg färbt dagegen die ganze Zelle, nie den Balken.

Fortschrittsbalken (progress)

Gleiche Einstellungen wie der Balken der Füllstandsanzeige.

Feld	Standard
showValue	false	Wert anzeigen
valuePlacement	inside	inside (im Balken) · outside (neben dem Balken)
color	Akzentfarbe	Farbe der Füllung
trackColor	Füllfarbe, 20 %	Ungefüllte Fläche
valueFilledColor	Weiß	Schrift über der Füllung
valueEmptyColor	Textfarbe	Schrift über der ungefüllten Fläche

Ohne valueFilledColor/valueEmptyColor bleibt der Wert einfarbig mit Differenz-Mischung wie bisher.

Umrechnung & Zeit-Formatierung (dp)

Der Button neben dem Datenpunkt-Feld öffnet beide Anzeige-Optionen — der Datenpunkt bleibt unverändert.

Feld
valueFactor / valueOffset	Anzeige = Wert × Faktor + Offset (auch bei progress)
valueTimeFormat	Zeitwert als Uhrzeit und/oder Datum: relative (vor 5 Min) · time · time-sec · date · date-long · datetime · datetime-sec · custom
valueTimePattern	Token-Muster bei custom, z. B. EEEE, dd.MM. HH:mm

Zeitstempel (Sekunden/Millisekunden), ISO-Zeitangaben und HH:mm werden automatisch erkannt; nicht lesbare Werte zeigen –. Tokens siehe Wert-Anzeige.

Auswahlfeld (select)

Das Auswahlfeld-Widget als Zelle — mit denselben Einträgen, denselben Quellen und denselben Anzeige-Optionen.

Feld	Standard
entriesSource	manual	manual = Liste in der Zelle · json = aus Datenpunkt
entries	[]	Wert→Label-Paare mit optionaler Farbe und Lucide-Icon; Knopf Aus common.states importieren füllt sie
entriesDp	—	DP mit dem JSON, optional mit JSON-Pfad (…liste?data.modes)
entriesValueKey · entriesLabelKey · entriesColorKey · entriesIconKey · entriesImageKey	auto	Feldnamen im JSON
showSelectedLabel	false	aktuellen Eintrag neben dem Dropdown anzeigen
hideSelect	false	Dropdown ausblenden (nur der aktuelle Eintrag)
entryDisplay	text	text · icon-text · icon
selectDisplay	dropdown	dropdown · circle = Kreismenü wie beim Auswahlfeld
circleStep	—	nur circle: zusätzlich − / + mit dieser Schrittweite (Zahlen-DP)
min · max	—	nur circle: Grenzen für − / +
circleDirection	auto	auto · full · top · right · bottom · left
circleItemSize	48	px
circleKeepOpen	false	nach Auswahl offen bleiben
circlePrimary	entry	nur circle, „Große Anzeige“: entry = Wert der Auswahl (Datenpunkt oben) groß · dp = Wert von circleValueDp groß (z. B. Isttemperatur), Wert der Auswahl klein darunter
circleValueDp	—	nur bei circlePrimary: dp; Format über prefix · suffix · decimals

Akzeptierte JSON-Formen und die Feldnamen-Erkennung: siehe Auswahlfeld → JSON-Datenpunkt.

Diagramm (widget)

Ein vorhandenes Diagramm-Widget als Spiegel in einer Zelle — z. B. Thermostat mit Kreismenü links und Temperaturverlauf rechts.

Feld	Standard
embedWidgetId	—	Diagramm-Widget (Einfach, Erweitert, eCharts), beliebiger Tab; Änderungen gelten fürs Original

Die Zelle braucht Fläche (1fr oder Spannweite).

Eingabefeld (input)

Das Eingabefeld-Widget als Zelle. text ist hier der Platzhalter.

Feld	Standard
inputMode	text	text · number (mit min / max / step)
multiline	false	mehrzeiliges Textfeld
submitMode	submit	submit (Enter / Feld verlassen / Senden-Button) · live (jeder Tastenschlag)
showSubmit	true	Senden-Button anzeigen (nur bei submit)
clearAfterSubmit	false	Befehlsfeld: nach dem Senden leeren, Datenpunkt-Wert nie anzeigen
inputUnit	—	Einheit rechts neben dem Feld; leer = keine
confirmAction / confirmText	false	Sicherheitsabfrage vor dem Senden

Bedienelement (switch)

Feld
controlMode	toggle · checkbox · icon · image · button	Schiebeschalter · Checkbox · Icon · Bild · Button
trueValue / falseValue	z. B. 0/100, an/aus	Schreibwerte; leer = true/false
statusDpId	optional	Status-Datenpunkt: Zustand, Beschriftung und Farben kommen von hier, geschrieben wird auf den Datenpunkt oben
stateMode	boolean · condition	Auswertung des Zustands: true/1/on · Vergleich mit stateOperator / stateValue
trueIcon / falseIcon, trueColor / falseColor	nur icon	Icon und Farbe je Zustand
trueImage / falseImage	nur image	Bild je Zustand: URL, Pfad, Base64, Datei vom Server oder Upload vom PC; falseImage leer = trueImage, beide leer = Icon
fontSize	28	Größe von Icon bzw. Bild in px (icon, image)
trueText / falseText	nur button	Beschriftung je Zustand; leer = AN/AUS
buttonTrueColor / buttonFalseColor	nur button	Hintergrundfarbe je Zustand
buttonTrueTextColor / buttonFalseTextColor	nur button	Textfarbe je Zustand
text, color, buttonTextColor	nur button	zustandslose Altfelder; gelten, solange die AN/AUS-Felder leer sind
buttonWidth	auto · full · uniform	Textbreite · Zellenbreite · längstes Label aller uniform-Buttons
momentary, momentaryDelay		Taster-Modus: Impuls statt Umschalten

Getrennte Schalt- und Status-Datenpunkte

Beispiel Tasmota-Steckdose — cmnd.POWER nimmt nur Befehle an und fällt danach auf null, der Zustand steht in stat.POWER:

Feld	Wert
Datenpunkt	mqtt.1.plug1.cmnd.POWER
statusDpId	mqtt.1.plug1.stat.POWER
trueValue / falseValue	1 / 0
stateMode	boolean (erkennt ON/OFF) oder condition mit == und ON
trueText / falseText	An / Aus

Dasselbe stateMode-Feld gibt es bei state-text und state-icon, damit dort ebenfalls ON/OFF oder Zahlenwerte den Text bzw. das Icon bestimmen.

Schieberegler (slider)

Feld	Standard
min / max / step	0 / 100 / 1	Wertebereich und Schrittweite
barStyle	false	gefüllter Balken statt nativem Regler
barSize	100	Balkengröße in % (nur bei barStyle)
orientation	horizontal	horizontal · vertical
valuePosition	none	none · left · right · top · bottom
showScale	false	Skala mit den Schrittwerten entlang der Spur
scaleLabelEvery	—	nur jeden n-ten Schritt beschriften; leer = so viele, wie die Breite hergibt
scaleTicks	true	Skalenstriche zeichnen

Die Skala beschriftet immer Min und Max; zu feine Skalen (z. B. 0–255) werden auf ein rundes Raster ausgedünnt. Die Zahlen folgen der Schrittweite, nicht decimals.

Klick-Aktion

Knopf Klick-Aktion im Zell-Editor — dieselben Aktionen wie beim Widget-Klick (Popup-View, Tab-Link, …).

Feld
clickAction	Aktion dieser Zelle; leer = Klick geht an die Aktion des Widgets
popup	title · hideTitle · width · height · autoCloseSec · autoCloseCountdown · transparency · backdropDim · background · padding

Zelltypen
mit Klick-Aktion	title · value · unit · text · dp · field · image · icon · state-icon · state-text · progress · lastchange
ohne	Bedienelemente (switch, slider, button, stepper, input, select, datepicker) · component · empty

Zellen verschieben & kopieren

Mit der Maus

Geste	Aktion
Drag & Drop	Zelle verschieben
Strg + Drag & Drop (Mac: ⌥)	Zelle kopieren
Rechtsklick	Kontextmenü (Kopieren · Ausschneiden · Einfügen · Leeren · Zeile/Spalte einfügen oder löschen)

Zeilen & Spalten einfügen

Rechtsklick auf eine Zelle:

Eintrag	Aktion
Zeile darüber / darunter einfügen	leere Zeile an dieser Stelle, alles darunter rückt nach unten
Spalte links / rechts einfügen	leere Spalte an dieser Stelle, alles rechts davon rückt nach rechts
Zeile n löschen / Spalte n löschen	entfernt die Zeile/Spalte; enthält sie konfigurierte Zellen, wird nachgefragt

colSpan/rowSpan, die über die Stelle reichen, wachsen bzw. schrumpfen mit. Spaltenbreiten bleiben der jeweiligen Spalte zugeordnet, neue Spalten bekommen 1.

Mit der Tastatur

Wirkt auf die aktuell ausgewählte Zelle. Auf Apple-Geräten steht ⌘ statt Strg und ⌫ statt Entf.

Shortcut	Aktion
Strg + C	Kopieren
Strg + X	Ausschneiden
Strg + V	Einfügen
Entf	Leeren

Überschreiben

Enthält das Ziel bereits eine nicht-leere Zelle, erscheint ein Bestätigungs-Dialog.

Zwischenablage

Kopierter Zellinhalt bleibt während der Sitzung erhalten und kann auch in andere Widgets eingefügt werden.

Zurücksetzen

Der Button Raster zurücksetzen am Ende des Editors stellt das Widget-spezifische Default-Raster wieder her.