DOIF: Kombination von fhemweb widgets, Größe verändern?

[gestein]

Hallo,

ich versuche, mir ein Widget zu basteln, mit dem ich einfach meine Dimmer bedienen kann.
Dabei dachte ich an eine Kombination aus außen ein "knob" für die Helligkeit und innen einen Schalter für "Ein/Aus".
Zum Glück hat Damian ja einiges an Beispielen im Wiki.

Nach einigem Probieren, wird mittlerweile der Knob für die Helligkeit und (momentan) eine Glühbirne für Ein/Aus dargestellt.
Schalten geht (ohne Glühbirne geht auch das Verstellen der Helligkeit).

Die Glühbirne ist nämlich zu groß.
Mit dem css-Style "smallIcon2" kann ich auch einfache Icons kleiner darstellen (über "::FW_makeImage("measure_battery_0","","smallIcon2")".
Aber ich schaffe es nicht das switch-Widget kleiner darzustellen.

Wenn ich mir den html-Code anschaue, dann sehe ich den css-Style für die svg-Graphik, aber wenn ich das Widget verwende, dann ist dort kein svg eingebettet, sondern eben direkt das switch-Widget.

Kann man die Widgets über größer/kleiner darstellen?
Oder ist die Lösung ein eigenes js?

Danke, lg, Gerhard

Hier mein momentaner Code, mit dem ich den Shelly-Dimmer bedienen kann/möchte:

Code Auswählen Erweitern

defmod widgetkombi_Labor2 DOIF (1)
attr widgetkombi_Labor2 comment https://wiki.fhem.de/wiki/DOIF/uiTable
attr widgetkombi_Labor2 room DOIF_Labor
attr widgetkombi_Labor2 uiTable {\
$TPL{style4}="<div style='position:relative;;width:50px;;height:50px'>";;\
$TPL{style5}="<div style='position:absolute;;left:0px;;top:0px'>";;\
$TPL{style6}="<style>.smallIcon2 {height: 25px;;position: relative;;left: 5px;;top: 10px;;}</style>";;\
\
$TPL{knob2}="knob,thickness:.3,bgColor:#808080,fgColor:#FFA500,min:0,max:100,width:50,height:50,step:.5,angleArc:270,angleOffset:225,displayInput:false";;\
$TPL{onoff}="iconSwitch,off,FS20.on,on,FS20.off"\
}\
\
DEF TPL_Thermostat($TPL{style4}.$TPL{style5}.WID($1,$TPL{knob2},"set")."</div>".$TPL{style6}.WID($2,$TPL{onoff},"set")."</div>"."</div>")\
\
TPL_Thermostat([MQTT2_shellydimmer2_40F52001B3D1:pct],[MQTT2_shellydimmer2_40F52001B3D1:state])\



[gestein]

Geschafft (fast).
Die Steuerung ist noch etwas frickelig, da wäre wohl noch etwas Feintuning nötig.
Aber das übersteigt leider mein Wissen.
Statt der Icons ,,FS20.on" und ,,FS20.off" kann man natürlich jedes beliebige nehmen.

Hier mein Code:

Code Auswählen Erweitern

defmod widgetkombi_Labor DOIF (1)
attr widgetkombi_Labor comment https://wiki.fhem.de/wiki/DOIF/uiTable
attr widgetkombi_Labor icon fts_shutter_automatic
attr widgetkombi_Labor room DOIF_Labor,Z_System->Startansicht
attr widgetkombi_Labor uiTable {\
$TPL{style1}="<div style='position:relative;;width:50px;;height:50px'>";;\
$TPL{style2}="<div style='position:absolute;;left:0px;;top:0px'>";;\
$TPL{style3}="<style>.smallIcon2 {height: 20px;;position: relative;;left: 0px;;top: 12px;;}</style>";;\
\
$TPL{knob}="knob,thickness:.3,bgColor:#808080,fgColor:#FFA500,min:0,max:100,width:50,height:50,step:5,angleArc:270,angleOffset:225,displayInput:false";;\
$TPL{onoff}="iconSwitch,classsmallIcon2\@off,FS20.on,on,FS20.off";;\
}\
\
DEF TPL_Dimmer($TPL{style1}.$TPL{style2}.WID([$1:pct],$TPL{knob},"set")."</div>".$TPL{style3}.WID([$1:state],$TPL{onoff},"set")."</div>"."</div>")\
\
TPL_Dimmer(MQTT2_shellydimmer2_40F52001B3D1)\
\


Für Tipps/Verbesserungen wäre ich sehr dankbar.

Lg, Gerhard

[Damian]

Die ganzen Beispiele auf der Seite https://wiki.fhem.de/wiki/DOIF/uiTable stammten vornehmlich von Ellert. Sie stammten aus der Zeit, als es noch keine Schnittstelle für Perlfunktionen gab.

Inzwischen habe ich einige Funktionen programmiert, die durch einen einfachen Aufruf Visualisierungen/Widgets erstellen, siehe https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg.

Mein Ziel ist es nur noch mit Funktionsaufrufen zu arbeiten und nicht selber in der uiTable HTML-Code zu erstellen. Denn solche Tabellen-Definitionen sind unübersichtlich und nur von HTML-Experten zu verstehen, wozu die meisten FHEM-User nicht gehören.

Langfristig möchte ich SVG-Widgets erstellen, die Eingaben mit schöner Visualisierung kombinieren, wie z. B. ein Thermostat. Das Problem dabei ist, dass man den Code auf der javascript-Seite erstellen muss.

Ich hoffe im Sommer die ersten SVG-Widgets präsentieren zu können, die man dann nur noch einfach in der Tabellen angeben muss.

[gestein]

Hallo Damian,

Deine Seiten habe ich alle durchgelesen.
Allerdings habe ich keinen Weg gefunden, wie ich so eine Kombination anders erstellen soll, als direkt mit html-Code.
Zuerst dachte ich auch, dass kein Weg an js vorbeiführt. Davor bin ich aber aufgrund mangelndem Wissen zurückgeschreckt.
Dann habe ich Deine Möglichkeiten entdeckt.
So klappt es zumindest mal - bis ein Profi wie Du das besser erledigt.

Auf den Sommer freue ich mich schon
lg, Gerhard