[neue Widgets] zum Anzeigen von und Schalten mit Icons

[Ellert]

Bitte beachten:
Falls die Widgets manuell installiert wurden, muss vor dem Update sichergestellt werden, dass die Rechte dieser Dateien richtig gesetzt sind.
Alternativ können die Widgets vor dem Update gelöscht werden.

Mit dem Widget iconLabel können auf einfache Weise Werte von Readings als Icons angezeigt werden.

Mit dem Widget iconSwitch können Werte in Readings gesetzt werden, die verschiedenen Werte werden zyklisch gesetzt und entsprechende Icons angezeigt, ähnlich wie mehrere Dreierpärchen in devStateIcon.

Mit dem Widget iconRadio kann z.B. für beliebige Readings eine Icon-Leiste angezeigt werden, das gewählt Icon ist markiert, ähnlich wie die Radiobuttons von uzsuSelectRadio, aber mit Icons statt Text.

Mit dem Widget iconButtons kann z.B. für beliebige Readings eine Icon-Leiste angezeigt werden, die gewählten Icons sind markiert, ähnlich wie uzsuSelectRadio, jedoch mit Icons statt Text.


Hier ein funktionierendes Beispiel für Raw definition zu ausprobieren.

Code Auswählen Erweitern


defmod du10 dummy
attr du10 readingList iconswitch iconlabel iconradio iconlabel2 iconbuttons
attr du10 room 0_Test
attr du10 setList iconswitch:iconSwitch,wide#open,@red,half#open,fts_shutter_50@CD2906,totally#closed,fts_shutter_100@magenta,half#closed, \
iconlabel:iconLabel,wide#open,@red,half#open,fts_shutter_50@CD2906,totally#closed,fts_shutter_100@magenta,half#closed, \
iconradio:iconRadio,grey,10,fts_shutter_10@FFA500,30,fts_shutter_30@orange,50,fts_shutter_50@orange,70,fts_shutter_70@orange,90,fts_shutter_90@orange \
iconlabel2:iconLabel,10,,30,,50,,70,,90,\
iconbuttons:iconButtons,orange,Bad,sani_heating@green,Wohnzimmer_1,sani_heating@green,Wohnzimmer_2,sani_heating@green,Esszimmer,sani_heating@green,Diele,sani_heating@green
attr du10 userReadings iconlabel:iconswitch.* {ReadingsVal($name,"iconswitch","wideopen")},iconlabel2:iconradio.* {ReadingsVal($name,"iconradio","10")}
attr du10 webCmd iconswitch:iconlabel:iconradio:iconlabel2:iconbuttons
attr du10 webCmdLabel iconSwitch\
:iconLabel\
:iconRadio\
:iconLabel 2\
:iconButtons
attr du10 widgetOverride setList:textField-long

setstate du10 initialized
setstate du10 2017-09-20 17:07:55 iconbuttons Bad,Wohnzimmer_2,Diele
setstate du10 2017-09-21 15:52:10 iconlabel half open
setstate du10 2017-09-20 17:16:03 iconlabel2 70
setstate du10 2017-09-20 17:16:03 iconradio 70
setstate du10 2017-09-21 15:52:10 iconswitch half open
setstate du10 2017-09-20 17:07:42 state initialized



Links
Eine Zusammenstellung der vorhandenen Widgets für FHEMWEB zum Ausprobieren: https://wiki.fhem.de/wiki/FHEMWEB/Widgets

15.09.2017 Update: Raute # für Leerzeichen in <value> und <reference value>
18.09.2017 Dokupatch entfernt, die Doku wird zukünftig aus der js-Datei erzeugt.
21.09.2017 Vorbereitung auf das neue Script-Handling, pro Widget eine Datei, umbenennen von iconSelectRadio auf iconRadio, neues Widget "iconButtons"
04.10.2017 Widgets eingecheckt

[Ellert]

Es gibt noch ein drittes Widget iconSelectRadio, Icons als Radiobutton, siehe ersten Beitrag

Die Idee zu den Widgets, entstand im Zuge der Weiterentwicklung von DOIF.

[Ellert]

@rudolfkoenig: Ich würde gern die fhemweb_icon.js aus dem ersten Beitrag in das Verzeichnis /pgm2 einchecken, darf ich das?

Wie kommt das Patch (FHEMWEB_doku.patch) mit der Doku in die 01_FHEMWEB.pm?

[rudolfkoenig]

Sorry fuer die Verspaetung.

Ich moechte solche fhemweb Erweiterungen analog zu den FHEMWEB Modulen haben:
- es gibt Maintainer fuer die Dateien
- die Doku kommt aus der Datei
- die Dateien werden nur bei Bedarf geladen. Es gibt aktuell 8 fhemweb_*.js Dateien, die nur von wenigen verwendet werden, aber alle Laden diese Dateien immer.

Ich will das Problem angehen, aber ich brauche dafuer ein bisschen mehr zusammenhaengende Freizeit.
Wenn jemand konkrete Ideen hat, nur her damit.

[Ellert]

Lösungsvorschlag:
Eine Datei plugin_xyz.js wird in pgm2 eingecheckt, eventuell in einem Unterverzeichnis pgm2/plugin.
Zusätzlich wird ein Modul erstellt 98_Load_xyz.pm
Das Modul enthält die Doku, wie alle anderen Module auch.
Maintainer ist der Modulautor für Modul und JS.
Wenn eine Instanz des Modul per Define angelegt wird, dann wird plugin_xyz.js zum FHEMWEB Attribut JavaScripts zugefügt.
Bei einem Delete wird die plugin_xyz.js aus dem FHEMWEB Attribut entfernt.

Vorteil:
Die Arbeit liegt ausschließlich beim Modulautor.

Nachteil:
Es darf in pgm2, ggf. pgm2/plugin eingecheckt werden.
Es werden Attribute automatisch verändert und gespeichert.
Die Doku der Widgets steht an verschiedenen Stellen der Commandref.

Edit: Ich habe gerade gesehen, das über $data{FWEXT}{SCRIPT} die JS-Datei angegeben werden kann, dann müsste das Attribut JavaScript nicht gesetzt werden.

[Ellert]

Ich habe ein Modul erstellt, das die Doku bereitstellt und das Javascript über  $data{FWEXT}{SCRIPT} einbindet.

Wenn das Javascript geladen werden soll, dann muss eine Instanz des Moduls definiert werden.
Wenn die Instanz gelöscht wird, dann wird das Javascript nicht mehr geladen.

Das Modul muss in das Modulverzeichnis FHEM kopiert werden.
Das Javascript muss in den Ordner pgm2 kopiert werden.
FHEM neu starten
Dann ein Device anlegen.

Code Auswählen Erweitern

define FW_iconWidgets FW_iconWidgets

Danach können die Widgets genutzt werden.

@rudolfkoenig: Wäre das eine akzeptable Lösung?

Der Maintainer darf seine js-Datei in pgm2 einchecken und das Modul in FHEM.

Edit: Anlagen gelöscht

[rudolfkoenig]

Danke fuers Nachdenken, aber ich wuerde gerne solche dummy-Module vermeiden.
Ich habe auch einen Vorschlag, siehe https://forum.fhem.de/index.php?topic=76868

[JoeALLb]

Edit: Anlagen gelöscht

Wie ist das nun geplant, da in fhemweb die Änderungen ja eingeflossen sind?

[Ellert]

Wie ist das nun geplant, da in fhemweb die Änderungen ja eingeflossen sind?

Ich habe das nicht geplant, sondern einfach gelöscht.

[Ellert]

Die Widgets wurden eingecheckt und stehen ab morgen per Update zur Verfügung.

[Ellert]

Statt des Hintergrundes kann auch das selectierte Icon aus gewählt werden, siehe Bild im ersten Beitrag und https://fhem.de/commandref.html#widgetOverride

[daelch]

Hallo,

ich habe versucht, iconradio für meine Jalousien zu nutzen, weiß aber nicht, wie ich es richtig in die Attribute integriere.

Code Auswählen Erweitern


defmod HM_WohnzimmerJalBar HMCCUDEV OEQ56456
attr HM_WohnzimmerJalBar userattr Fenster Fenster_map Wohnzimmer WohnzimmerJal WohnzimmerJal_map Wohnzimmer_map structexclude
attr HM_WohnzimmerJalBar IODev d_ccu
attr HM_WohnzimmerJalBar alias Jalousie Bar
attr HM_WohnzimmerJalBar ccureadingfilter (LEVEL|INHIBIT|DIRECTION|WORKING)
attr HM_WohnzimmerJalBar ccureadingname LEVEL:+pct
attr HM_WohnzimmerJalBar ccuscaleval LEVEL:0:1:0:100,LEVEL_SLATS:0:1:0:100
attr HM_WohnzimmerJalBar cmdIcon up:control_centr_arrow_up stop:control_x down:control_centr_arrow_down Sichtschutz:fts_blade_arc_close_50 Lichtschutz:fts_blade_arc_close_00
attr HM_WohnzimmerJalBar controldatapoint LEVEL
attr HM_WohnzimmerJalBar eventMap /datapoint STOP 1:stop/datapoint LEVEL 0:down/datapoint LEVEL 100:up/datapoint LEVEL_COMBINED "0x00,0x50":Sichtschutz/datapoint LEVEL_COMBINED "0x00,0xC8":Lichtschutz/
attr HM_WohnzimmerJalBar group Jalousien
attr HM_WohnzimmerJalBar icon fts_shutter_40
attr HM_WohnzimmerJalBar room Wohnbereich
attr HM_WohnzimmerJalBar statedatapoint LEVEL
attr HM_WohnzimmerJalBar stripnumber 1
attr HM_WohnzimmerJalBar substexcl control|pct
attr HM_WohnzimmerJalBar substitute LEVEL,LEVEL_SLATS!#0-0:Geschlossen,#1-2:Sichtschutz,#3.1-5:Lichtschutz,#100-100:Offen
attr HM_WohnzimmerJalBar webCmd Sichtschutz:Lichtschutz:down:up:stop
attr HM_WohnzimmerJalBar widgetOverride control:slider,0,10,100

setstate HM_WohnzimmerJalBar Sichtschutz
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.DIRECTION 0
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.DIRECTION_SLATS 0
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.INHIBIT false
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.LEVEL Sichtschutz
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.LEVEL_SLATS 40
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.WORKING false
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 1.WORKING_SLATS false
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 control 1.5
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 hmstate Sichtschutz
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 pct 40
setstate HM_WohnzimmerJalBar 2019-11-11 21:36:02 state Sichtschutz


Derzeit sieht es so aus wie im Anhang.

Kann mir jemand einen Tipp geben? Vielen Dank!

Viele Grüße
Christoph

[beaune]

Hallo,

ich versuche rauszufinden, wie man das Aussehen der Icons mit Hilfe der Option

Code Auswählen Erweitern

[class<classname>@] beeinflussen kann, werde aber nicht so ganz schlau aus der Commandref, wie man das benutzt.

Hat da jemand mal ein Beispiel parat? Das würd mir sehr helfen...

[rudolfkoenig]

Die "[class<classname>@]" Syntax ist mir fremd.

Die Widgets und alle anderen Elemente kann man (wie bei HTML ueblich) ueber CSS aendern, entweder durch eigene Dateien (CssFiles FHEMWEB Attribut) oder CSS-Anweisungen direkt (FHEMWEB Css Attribut). Wie man das Element fuer die CSS Anweisung identifiziert, ist z.Bsp. hier beschrieben: https://www.w3schools.com/cssref/css_selectors.asp
Dabei hilft mir die JavaScript-Console, bzw. Rechte-Maustaste, Inspect.

[Ellert]

Die eckigen Klammern signalisieren in der Befehlsreferenz eine optionale Angabe.
Aus der FHEM-Referenz:

[class<classname>@] als Prefix vor dem zweiten Parameter, weist den SVG-Icons eine CSS-Klasse zu.

Es können also die die Eigenschaften des svg-Tags über eine CSS-Klasse definiert werden.

Beispiel:
Wenn eine CSS-Klasse meineklasse definiert ist, dann lautet das Präfix classmeineklasse@.