FHEMWEB Knob Steuerelement

[svenson08]

Basierend auf diesem Thread http://forum.fhem.de/index.php/topic,14753.msg95363.html#msg95363
habe ich mich mal der Umsetzung des Knob Steuererlements angenommen.

Wer dies testen möchte muss die Dateien fhemweb_knob.js und jquery.knob.js
in das Verzeichnis /www/pgm2 kopieren und den 01_FHEMWEB.pm.patch anwenden, oder die angehängte 01_FHEMWEB.pm verwenden.
Nach einem FHEM neustart kann man sich einen dummy wie folgt erstellen

Code Auswählen Erweitern

define knobdummy dummy
attr knobdummy alias Knob Test
attr knobdummy room KNOB
attr knobdummy setList state:knob
attr knobdummy webCmd state


die Darstellung des Steuerelements kann über diverse Parameter mitgegeben werden, diese werden mit Komma getrennt hinter knob eingegeben z. B.

Code Auswählen Erweitern

attr knobdummy setList state:knob,step=5,width=150,thickness=.4,bgcolor=indigo,cursor=false,anglearc=180,angleoffset=270,linecap=round

Es gibt die folgenden Parameter, welche alle optional sind.

min für den minimalen Wert z.B. 10
max für den maximal Wert z.B. 150
step in welchen Schritten der Wert geändert wird z.B. 5
width Größe des Steuerelement z.B. 150
thickness Breite des angezeigten Rand z.B. .3
fgcolor Farbe des Rings z.B. red oder #121212
bgcolor Hintergrundfarbe des Rings z.B. blue oder #454545
anglearc Welchen Radius der Ring darstellt z.B. 120
angleoffset An welcher Stelle der Ring beginnt z.B. 270
linecap Darstellung des Anfangs/Ende des Ring rund oder eckig, erlaub ist butt oder round
displayinput Eingabe eines Werts in der Mitte des Rings, erlaubt ist true oder false
cursor Vergrößern des Rings durch die Maus oder bewegen einer Markierung auf dem Ring, erlaub ist true oder false

Die Beispiele im Screenshot sind wie folgt erstellt worden:

Code Auswählen Erweitern

define knobdummy1 dummy
attr knobdummy1 alias Knob Test 1
attr knobdummy1 icon refresh
attr knobdummy1 room KNOB
attr knobdummy1 setList state:knob,min=50,max=500,step=50,width=100,thickness=.3,fgcolor=yellow
attr knobdummy1 webCmd state

define knobdummy2 dummy
attr knobdummy2 alias Knob Test 2
attr knobdummy2 icon refresh
attr knobdummy2 room KNOB
attr knobdummy2 setList state:knob,step=5,width=150,thickness=.2,fgcolor=greenyellow,cursor=false
attr knobdummy2 webCmd state

define knobdummy3 dummy
attr knobdummy3 alias Knob Test 3
attr knobdummy3 icon refresh
attr knobdummy3 room KNOB
attr knobdummy3 setList state:knob,step=5,width=150,thickness=.4,bgcolor=indigo,cursor=false,anglearc=180,angleoffset=270,linecap=round
attr knobdummy3 webCmd state

define knobdummy4 dummy
attr knobdummy4 alias Knob Test 4
attr knobdummy4 icon refresh
attr knobdummy4 room KNOB
attr knobdummy4 setList state:knob,step=5,width=50,thickness=.4,bgcolor=darksalmon,fgcolor=firebrick,cursor=false,anglearc=180,angleoffset=90
attr knobdummy4 webCmd state

Gruß Svenson

[justme1968]

sehr geil

[rudolfkoenig]

Werde ich uebernehmen, aber erst wenn es "autoload-modulfaehig" ist, und dazu muss vmtl. auch FHEMWEB angepasst werden.
Ich moechte dafuer die ganze Logik in Javascript haben, um hier den Engpass FHEMWEB (und damit mich) zu loesen. Vermutlich werden dafuer auch die anderen Widgets (slider & co) angepasst.

[svenson08]

Hallo Rudi,

aber erst wenn es "autoload-modulfaehig" ist

so ganz versteh ich das nicht, muss ich noch was ändern/ anpassen?

Mir selbst gefällt im Patch auch nicht das dort die jquery in FHEMWEB explizit angegeben werden muss. Lässt sich das evtl. entkoppeln, z.B. das alle .js Dateien in einem "Lib" Verzeichnis von FHEMWEB autom. geladen werden ohne das diese explizit angegeben werden müssen? Ähnliches ist auch mit fhemweb_*.js umgesetzt. Das "Verzeichnis" ist nur mal so in den Raum gestellt, da mir die Diskussion mit der Verzeichnisstruktur bekannt sind.

Gruß Svenson

[rudolfkoenig]

Nein, du musst nichts aendern, aber leider warten.

Genau diese Fragen, die du stellst, muessen erst geklaert werden. Und ich will nicht alle .js laden, sondern nur bei Bedarf, genauso wie fhem.pl die FHEM-Module. Frag mich aber nicht, wie das gehen soll, ich weiss es noch nicht

[svenson08]

Ok, warten ist ist nicht das Problem 

Frag mich aber nicht, wie das gehen soll, ich weiss es noch nicht

Die fhemweb_*.js werden geladen wenn diese da sind. Daher der erste Gedanke mit dem Verzeichnis. Unter der Annahme alles was da drin ist wir benötigt - was nicht die beste Lösung ist. Denn entweder dort ist alles drin was jemals in Frage kommt, oder der User muss gezielt benötigte Dateien dort rein kopiere - was dazu führt das einfach alles dort rein kopiert wird.

Mir fällt nur die Lösung über Abhängigkeiten aus der Praxis ein. z.B. würden in einem Modul dependencys definiert, die wiederum bestimmen welche .js geladen werden. Prinzipiell so wie das svg.js in 01_FHEMWEB geladen wird, eben nur bei bedarf. Im Bezug auf das Knob ist das jetzt nicht wirklich die Wahnsinsidee, selbst wenn du die Widgets ausgelagers und in diesen Abhängigkeiten definiert wären könntest du in FHEMWEB nicht wissen welches Widget wirklich benötigt wird ..... oder doch?

genauso wie fhem.pl die FHEM-Module.

Die Module werden doch geladen wenn diese definiert sind. Ginge sowas auch mit den Widgets? Dann wäre nur die Frage wie die Widgets ausgelagert und geladen werden ... und damit versteh ich glaub ich dein erstes Post zu dem Thread 

[justme1968]

@rudi: wenn du dabei bist bei den widgets etwas umzustellen wäre es klasse die das backend und das frontend etwas mehr zu entkoppeln.

d.h. wenn ein modul ein set mit einen bestimmten wertebereich anbietet sollte der user in der lage sein zu entscheiden ob er einen slider oder die knobs möchte oder vielleicht sogar ein menü mit nur drei festen werten.

eine möglichkeit dazu wäre bei webCmd die modifier ebenfalls zu erlauben und so den modul default zu überschreiben.
in der readingsGroup erlaube ich so etwas schon und es ist sehr praktisch.

ich weiss das es von der syntax mit dem splitten nicht passt. aber vielleicht hast du dazu eine idee.

[betateilchen]

Und ich will nicht alle .js laden, sondern nur bei Bedarf, genauso wie fhem.pl die FHEM-Module. Frag mich aber nicht, wie das gehen soll, ich weiss es noch nicht

vielleicht mit jQuery und getScript() ?

http://www.hackthenet.de/weblog/208/javascript-dateien-mit-jquery-dynamisch-nachladen

[rudolfkoenig]

Ok, ich praezisiere
Ich hab nicht das Problem mit dem wie, sondern mit dem wann, und welche. Sowas wie ein "define" fehlt hier ja.

[betateilchen]

hm... ich hätte jetzt eher das "wie" als das größere Thema angesehen 

Ok, zugegeben, ich bin jetzt nicht der javascript-Spezialist.

[T.ihmann]

Könnte man nicht eine neue Klasse knob einführen, die ihre Eigenschaften von dummy erbt ? Dann könnte man mit

Code Auswählen Erweitern

define knobdummy knob

einen neuen Knob definieren und erst dann das Modul und javascript Zeug laden. Analog könnte es eine Klasse Slider geben ebenso von Dummy abstammend

[justme1968]

was soll das denn bewirken? zum einen funktionen das in fhem nicht so mit den klassen und zum anderen soll der knob und slider und die anderen widgets ja nicht nur in dummys und nicht nur einer pro device verwendet werden.

[T.ihmann]

Idee war einen define hinzubekommen, der anzeigt, das wir die JavaScript Sachen für Knobs brauchen und die dann nach laden können .

[rudolfkoenig]

@T.ihmann: da das Problem "in" der HTML-Seite (== Raum- bzw. Detailansicht) ist, muesste man diesen knobdummy auf jeder Seite, der ein Knob hat, zuordnen. Und dann noch ein calenderdummy, enhancededitordummy, usw. und das ist mAn fuer etwas groessere Installationen nicht handhabbar. Und dann gibt es noch FLOORPLAN. Und damit waere erstmal nur das .js geladen, der wuesste aber noch nicht genau, welche Elemente jetzt in Knob zu verwandeln sind.

Ich denke eher an folgendes: Widget-Typ in einem Attribut des betroffenen HTML-Elementes hinterlegen (FW_widget="knob"), fhemweb.js sucht nach Laden der Seite alle Elemente nach diesem Attribut durch, und laedt die benoetigten javascript Dateien. FHEMWEB muss anhand von ZZZ diese Elemente markieren. ZZZ koennte per default aus dem :modifier fuer Befehle aus "set X ?" bzw. "attr X ?" fuer Attribute kommen, wie bisher, aber der Benutzer muss in der Lage sein es zu aendern, vmtl. per Attribut fuer einzelne Geraete. Das passt aber nicht auf dem enhancededitor, und hinkt noch beim webCmd

[betateilchen]

Das passt aber nicht auf dem enhancededitor,

Was bräuchtest Du beim enhancedEditor, um ihn (besser/überhaupt) in Dein Konzept integrieren zu können?