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.
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 |
colSizes / rowSizes | auto · 1fr · 60px … | Track-Größe pro Spalte/Zeile |
colSpan / rowSpan | 1–n | Zelle über mehrere Spalten/Zeilen ziehen |
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) |
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.
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 |
Akzeptierte JSON-Formen und die Feldnamen-Erkennung: siehe Auswahlfeld → JSON-Datenpunkt.
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 · button | Schiebeschalter · Checkbox · Icon · 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 |
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.
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) |
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.