Platzhalter und HTML

Platzhalter und freies HTML

Platzhalter setzen aktuelle FHEM-Werte in Text oder erlaubtes HTML ein. Werte werden als Text, nicht als ausführbarer HTML-Code eingesetzt.

Suchen statt tippen

• Textwidget: Knopf {{ }} in der Werkzeugleiste.
• Freies HTML: Platzhalter suchen und einfügen ….

Device nach Name, Alias, Typ oder Raum suchen und ein Reading mit aktuellem Wert auswählen. Optional Filter und Einheit einstellen. Im HTML-Dialog fügt die Auswahl an der Cursorposition ein; Als Element schreiben verwendet die unten beschriebene Attributform.

Grundform

{{Device:reading}}
{{Device:reading|filter}}

Beispiel	Bedeutung
{{Garten:temperature}}	Reading temperature von Garten.
{{Garten:@alias}}	Alias des Devices; ohne Alias leer.
{{Garten:@name}}	Technischer Device-Name.
{{Garten:@type}}	Device-Typ.

Die Namen sind Beispiele und müssen in deiner Installation existieren. Für Device-Namen sind Buchstaben, Ziffern, _, . und - vorgesehen. Je Kachel sind höchstens 20 verschiedene Devices möglich.

Das Reading wird zuerst im Device, danach in seinen Kanälen gesucht. Ein nicht vorhandener Wert erscheint als –, sofern kein geeigneter Ersatztext gesetzt ist.

Filter

Filter werden von links nach rechts mit | verkettet.

Filter	Wirkung
round(n)	Auf 0 bis 6 Nachkommastellen runden.
int	Nachkommastellen abschneiden.
upper, lower	Groß-/Kleinschreibung.
default(Text)	Ersatztext für einen leeren Wert.
prefix(Text), suffix(Text)	Text vor/hinter einen nicht leeren Wert setzen.
map(on=An,off=Aus)	Zugeordnete Werte ersetzen; andere unverändert lassen.

Texte innerhalb der Filterklammern dürfen keine Zeichen |, (, ), { oder } enthalten. Das sind keine frei ausführbaren Perl-/JavaScript-Ausdrücke.

{{Garten:temperature|round(1)|suffix( °C)}}
{{Fenster:state|map(open=Offen,closed=Geschlossen)|default(unbekannt)}}

Einheiten

Unter Einheit hinter dem Wert eine Einheit eingeben oder etwa °C, W, kWh oder % aus den Vorschlägen wählen. Eigene Einheiten sind bis 16 Zeichen möglich; Steuerzeichen und Filter-/HTML- Trennzeichen sind nicht erlaubt.

Die Auswahl wird als letzter suffix( Einheit) mit führendem Leerzeichen gespeichert. Beim erneuten Bearbeiten wird sie erkannt und ersetzt, nicht immer weiter angehängt. Ein leeres Einheitenfeld entfernt sie. Andere Filter wie round(1) bleiben erhalten.

Beschriftung ist keine Umrechnung. Das Anhängen von kWh wandelt Wh nicht um.

Freies HTML einrichten

Echtes HTML-Widget mit fiktiven Live-Werten und eigener Inhaltsüberschrift; die zusätzliche Widgettitelzeile ist in diesem Beispiel ausgeblendet.

Einstellungsdialog: Freies HTML

Unter Bearbeiten → Widget hinzufügen → Freies HTML einen erlaubten HTML-Inhalt eingeben. Kein vollständiges HTML-Dokument mit html, head oder eigenen Skripten einfügen.

<h3>Garten</h3>
<p>Temperatur: <strong>{{Garten:temperature|round(1)}}</strong> °C</p>
<p>Luftfeuchte: {{Garten:humidity|int|suffix( %)}}</p>

Alternative: Attribute wie in FTUI

Nur im freien HTML:

<span device="Garten" reading="temperature" filter="round(1)|suffix( °C)"></span>
<div device="Lampe" reading="state" filter="map(on=An,off=Aus)"></div>
<h3 device="Garten" reading="@alias"></h3>

device und reading müssen zusammen angegeben werden. filter ist optional. Der Wert ersetzt den Elementinhalt. Die Attributnamen heißen bewusst ohne data--Präfix. Beide Schreibweisen dürfen gemischt werden.

Farben abhängig vom Zustand

<style>
  .warm { color: #ff8a80; }
  .kalt { color: #7fb4ff; }
</style>
<div data-cms-class="Garten:temperature>=25:warm; Garten:temperature<10:kalt">
  Garten: {{Garten:temperature|round(1)|suffix( °C)}}
</div>

Syntax:

Device:reading Operator Vergleichswert : Klassenname

Mehrere Bedingungen durch ; trennen. Erlaubte Operatoren: =, !=, >, <, >=, <=. Sind beide Werte numerisch, erfolgt der Zahlenvergleich, sonst sind nur Textvergleiche mit = bzw. != vorgesehen. Die im Widget definierten Klassen gelten für dieses Widget.

Erlaubtes HTML

Kategorie	Zulässig
Elemente	div span p h1 h2 h3 h4 strong b em i u small br hr ul ol li table thead tbody tr th td style
Attribute	class style title colspan rowspan data-cms-class device reading filter
Länge	Höchstens 20.000 Zeichen.

Attribute in doppelten Anführungszeichen schreiben. title darf Platzhalter enthalten.

Nicht erlaubt sind unter anderem Skripte, Iframes, Bilder, Formulare, Ereignisattribute wie onclick, Links, Kommentare, url(), @import und position: fixed. Eine Verletzung wird beim Speichern gemeldet.

Für Bilder und Links stattdessen Textwidget oder LinkWidget verwenden.

Fehler finden

• Exakte Schreibweise von Device und Reading prüfen.
• Das Reading zuerst in FHEM ansehen.
• Bei – Verfügbarkeit und Wert prüfen.
• Einfache Filterkette ohne Formatierung testen.
• Bei abgelehntem HTML erlaubte Elemente, Attribute und Anführungszeichen prüfen.

Wertanzeige · Fehlerhilfe