FHEMWEB/Popup

Popup – Werte und Bedienelemente in einem Dialog

Das Popup-Widget zeigt im FHEMWEB (PGM2) Frontend einen kleinen Menü-Button (drei Striche) in der Gerätezeile. Ein Klick darauf öffnet einen Dialog mit frei wählbaren Readings samt Einheit und Icon sowie allen Bedienelementen aus dem webCmd des Geräts, z. B. Slider, Auswahllisten, Colorpicker oder Icons aus cmdIcon.

Gedacht ist es vor allem für das Smartphone. Das Popup holt diese Bedienelemente zurück, ohne dass die Detailseite geöffnet werden muss. Das Popup übernimmt den Style des Skins und bringt keine eigenen Farben mit.

Hilfe

Forenthread zum Popup-Widget

popup – Dialog für Werte und Bedienelemente

1️⃣ Widget im Device einrichten

Die Einrichtung erfolgt über das Attribut webCmd und widgetOverride.

attr <devicename> webCmd cmd<X>
attr <devicename> widgetOverride cmd<X>:popup,<Reading>@<Einheit>,<Reading>@<Einheit>,...

2️⃣ Parameter

Parameter	Beschreibung
`Reading@Einheit`	Beliebig viele Readings, die im Dialog angezeigt werden. Die Einheit ist optional. Die Werte werden live aktualisiert.
`alwaysVisible`	Optional: Button bei jeder Bildschirmbreite zeigen. Ohne diesen Schalter erscheint der Button nur im Hochformat bis 480 px Breite, also dort, wo f18 die Spalten ausblendet. Die Position in der Liste ist egal.

3️⃣ Beispiel

Nur auf dem Smartphone

attr <device> webCmd pct:state:cmd1
attr <device> widgetOverride cmd1:popup,measured-temp@°C,humidity@%

Bei jeder Bildschirmbreite

attr <device> widgetOverride cmd1:popup,alwaysVisible,measured-temp@°C,humidity@%

Auf Touch-Geräten öffnet sich der Dialog mittig, auf dem Desktop direkt am Button.

Bedienelemente aus webCmd

Alle Einträge aus webCmd erscheinen automatisch im Dialog, unterhalb der Readings. Der Popup-Eintrag selbst wird übersprungen. Die fertigen Elemente der Gerätezeile werden beim Öffnen in den Dialog verschoben und beim Schließen zurückgelegt. Slider, Auswahllisten, Colorpicker und cmdIcon funktionieren deshalb genauso wie in der Gerätezeile.

Als Beschriftung dient der Name des zugehörigen Readings, bei cmdIcon der Befehlsname.

Hängt ein Widget an einem Reading, das es noch nicht gibt, verwendet FHEM state, und im Dialog steht dann auch state. Abhilfe schafft, das Reading einmal anzulegen:

setreading <device> <reading> -

Icons für Readings

Links neben jedem Reading kann statt des Namens ein Icon stehen. Ist kein Icon gesetzt oder der Name unbekannt, steht dort der Reading-Name.

1️⃣ Icons im Device einrichten

Die Icons werden über die Attribute icon_1, icon_2 usw. gesetzt. Die Nummer zählt nach der Reihenfolge der Readings in der Popup-Definition, alwaysVisible zählt dabei nicht mit.

attr <devicename> userattr icon_1 icon_2
attr <devicename> icon_1 <Icon>
attr <devicename> icon_2 <Icon>

2️⃣ Parameter

Format	Beschreibung
`temp_temperature@red`	FHEM-Icon aus dem `iconPath` von FHEMWEB, SVG oder PNG.
`data:image/svg+xml;;charset=utf-8,%3Csvg...%3E@red`	SVG direkt im Attribut. Mit Farbe gilt sie für das ganze SVG.
`mdi-thermometer`	Material Design Icon, die MDI-Schrift muss im Frontend geladen sein.
`fa-tint`	Wird zuerst als FHEM-Icon gesucht, sonst als Font-Awesome-Klasse gesetzt.
`@Farbe`	Optional bei FHEM-Icons und SVG: Farbname (`@red`) oder Hex-Wert mit oder ohne Raute (`@FF8800`, `@#00AAFF`). Ohne Farbe übernimmt ein SVG-Icon die Textfarbe des Styles.

3️⃣ Beispiel

attr <device> widgetOverride cmd1:popup,measured-temp@°C,humidity@%
attr <device> userattr icon_1 icon_2
attr <device> icon_1 temp_temperature@red
attr <device> icon_2 humidity

Aussehen anpassen

Das Popup verwendet dieselben Klassen wie die Detailseite (block, odd/even, col1, dval, mkTitle) und übernimmt auch die f18-Einstellung „Wrap columns on small screens“. Für eigene Anpassungen im Style stehen diese Klassen zur Verfügung:

Klasse	Element
`.fhem-popup-btn`	Button in der Gerätezeile
`.fhem-popup-container`	Inhalt des Dialogs
`.fhem-popup-table`	Tabelle mit Readings und Bedienelementen
`.fhem-popup-icon`	Icon eines Readings

Beispiel für mehr Abstand zwischen den Zeilen:

.fhem-popup-table td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

Tipp für eigene dunkle Styles: jQuery UI legt auf .ui-dialog ein helles Hintergrundbild. Wer dort nur background-color setzt, sollte zusätzlich background-image: none !important; ergänzen.

Links

FHEMWEB Widgets