FHEM Forum

FHEM => Frontends => FHEMWEB => Thema gestartet von: Ellert am 21 August 2017, 18:34:48

Titel: [neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 21 August 2017, 18:34:48
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 (https://wiki.fhem.de/wiki/Import_von_Code_Snippets) zu ausprobieren.
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
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 01 September 2017, 18:01:39
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.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 15 September 2017, 18:53:02
@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?
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: rudolfkoenig am 17 September 2017, 12:10:35
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.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 17 September 2017, 13:41:10
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.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 17 September 2017, 18:12:48
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.

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
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: rudolfkoenig am 19 September 2017, 14:18:48
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
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: JoeALLb am 04 Oktober 2017, 12:06:01
Edit: Anlagen gelöscht
Wie ist das nun geplant, da in fhemweb die Änderungen ja eingeflossen sind?
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 04 Oktober 2017, 14:20:23
Wie ist das nun geplant, da in fhemweb die Änderungen ja eingeflossen sind?
Ich habe das nicht geplant, sondern einfach gelöscht.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 04 Oktober 2017, 20:04:25
Die Widgets wurden eingecheckt und stehen ab morgen per Update zur Verfügung.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 25 Oktober 2017, 07:55:52
Statt des Hintergrundes kann auch das selectierte Icon aus gewählt werden, siehe Bild im ersten Beitrag und https://fhem.de/commandref.html#widgetOverride
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: daelch am 11 November 2019, 21:58:29
Hallo,

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

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
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: beaune am 25 Juli 2021, 12:30:17
Hallo,

ich versuche rauszufinden, wie man das Aussehen der Icons mit Hilfe der Option [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...
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: rudolfkoenig am 26 Juli 2021, 14:05:23
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.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: Ellert am 27 Juli 2021, 17:51:01
Die eckigen Klammern signalisieren in der Befehlsreferenz eine optionale Angabe.
Aus der FHEM-Referenz:
Zitat
[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@.
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: beaune am 27 Juli 2021, 19:52:32
Danke schon mal für Eure Hinweise. Tatsächlich kann ich jetzt einen Effekt sehen. So ganz klar ist es mir aber noch nicht, was ich genau beeinflussen kann. Ich hab z.B. folgendes Device definiert:

defmod du16 dummy
attr du16 alias iconradiotest3
attr du16 readingList state
attr du16 room taster
attr du16 setList state:iconRadio,classmeineklasse@grey,on,control_arrow_down,off,control_arrow_up

Also müßte ich das Aussehen der Buttons mit Hilde der CSS-Klasse "meineklasse" beeinflussen können. Dazu habe ich eine CSS-Datei namens mytestcss2.css erstellt. Inhalt:
.meineklasse {
    border-style: solid;
    color:green;
}
Die CSS-Datei lege ich unter fhem/www/pgm2 ab und mache sie fhem per Attribut bekannt:
defmod WEB FHEMWEB 8083 global
attr WEB CssFiles pgm2/mytestcss2.css
Titel: Antw:[neue Widgets] zum Anzeigen von und Schalten mit Icons
Beitrag von: rudolfkoenig am 27 Juli 2021, 23:01:18
Zitat
Es können also die die Eigenschaften des svg-Tags über eine CSS-Klasse definiert werden.
Sorry, habs ueberlesen dass es nur die icon* Widgets betrifft.