DOIF/uiTable: Unterschied zwischen den Versionen
Trelle (Diskussion | Beiträge) (→Beschreibung der Kombination: DOIF_hsv statt DOIF_color) |
Trelle (Diskussion | Beiträge) (→Links) |
||
Zeile 110: | Zeile 110: | ||
== Links == | == Links == | ||
* [[DOIF]] | |||
* Style-Attribute [https://www.w3schools.com/cssref/default.asp https://www.w3schools.com/cssref/default.asp] | * Style-Attribute [https://www.w3schools.com/cssref/default.asp https://www.w3schools.com/cssref/default.asp] | ||
[[Kategorie:HOWTOS]] | [[Kategorie:HOWTOS]] | ||
[[Kategorie:Code Snippets]] | [[Kategorie:Code Snippets]] |
Version vom 22. Oktober 2017, 10:36 Uhr
An dieser Seite wird momentan noch gearbeitet. |
Das Attribut uiTable ist noch nicht offizieller Bestandteil des Moduls. Eine Vorabversion gibt im Forenthread, dort ist derzeit
auch die Syntax beschrieben.Das DOIF-Attribut uiTable dient der Definition eines User Interface im Kontext von FHEMWEB. Die Syntax ist in der Befehlsreferenz zu uiTable beschrieben und wird hier nicht behandelt. An dieser Stelle werden Beispiele zur Gestaltung der uiTable gezeigt.
Kombination von WID und STY zu einem Thermostat Widget
Das Thermostat Widget zeigt mit dem inneren Teilkreis die Isttemperatur an und mit dem äusseren Teilkreis wird die Solltemperatur gesetzt. Das obere Textfeld zeigt den Zahlenwert der Solltemperatur, der Untere den der Isttemperatur. Die Farbe, der Soll- und Isttemperatur ändert sich mit ihrem Wert.
Beschreibung der Kombination
uiTable ist tabellenförmig aufgebaut, in einer Tabellenzelle können mehrere Elemente kombiniert werden. Da zwei gleich große knob-Widgets übereinander liegen ist nur das obere Widget, die Solltemperatur, bedienbar. Die Widgetkombination wird durch den folgenden Code-Auszug beschrieben.
$TPL{style2}="text-align:right;width:23px;position:absolute;left:13px;top:26px;font-weight:bold;font-size:12px;color:"; $TPL{style3}="text-align:right;width:23px;position:absolute;left:13px;top:13px;font-weight:bold;font-size:12px;color:"; $TPL{knob1}="knob,thickness:.4,fgColor:#00A5FF,min:7,max:30,width:50,height:50,step:.5,angleArc:270,angleOffset:225,displayInput:false"; $TPL{knob2}="knob,thickness:.3,fgColor:#FFA500,min:7,max:30,width:50,height:50,step:.5,angleArc:270,angleOffset:225,displayInput:false"; "<div style='position:relative;width:50px;height:50px'><div style='position:absolute;left:0px;top:0px'>".WID([HMdummy_Labor:measured-temp],$TPL{knob1})."</div><div style='position:absolute;left:0px;top:0px'>".WID([HMdummy_Labor:desired-temp],$TPL{knob2},"set")."</div>".STY([HMdummy_Labor:measured-temp:d1],$TPL{style2}.DOIF_hsv([HMdummy_Labor:measured-temp],7,25,240,360,100,100)).STY([HMdummy_Labor:desired-temp:d1],$TPL{style3}.DOIF_hsv([HMdummy_Labor:desired-temp],7,25,240,360,100,100))."</div>"
Mit style2, style3, knob1 und knob2 werden vier Templates gespeichert. Sie werden jeweils nur einmal verwendet, verkürzen aber die Tabellendefinition. Die Templates knob1 und knob2 beschreiben die Knob-Widgets. Die Templates style2 und style3 beschreiben die Textfelder für die Soll- und Isttemperatur durch die Angabe der entsprechenden CSS-Attribute.
Struktur der Kombination
Die Tabellenzelle wird mit div-Elementen nach folgenden Schema strukturiert.
<div mit relativer Position zum Elternelement> <div mit absoluter Position zum Elternelement> Knob-Widget Isttemperatur </div> unterste Ebene <div mit absoluter Position zum Elternelement> Knob-Widget Solltemperatur </div> <div mit absoluter Position zum Elternelement> Solltemperatur </div> in STY enthalten und beschrieben durch style3 <div mit absoluter Position zum Elternelement> Isttemperatur </div> in STY enthalten und beschrieben durch style2, oberste Ebene </div>
Mit position:relative;width:50px;height:50px
wird das oberste div-Element in der Tabellenzelle positioniert. Durch die Verwendung des CSS-Attributes position wird das div-Element zum Bezugspunkt der nachfolgenden Elemente mit absoluter Positionsangabe.
Positionierung der FHEMWEB-Widgets
Mit position:absolute;left:0px;top:0px
werden die das knob-Widget umschliessenden div-Elemente in die linke obere Ecke ihres Elternelementes positioniert.
Position und Format der Textanzeige
position:absolute;left:13px;top:26px
positioniert das div-Element absolut zum Bezugspunkt, 13 Pixel nach rechts und 26 Pixel nach unten, von links oben aus.
width:23px
legt die Breite des div-Elements auf 23 Pixel fest.
font-weight:bold
formatiert den Text fett.
font-size:12px
legt die Schriftgröße auf 12 Pixel fest.
text-align:right
richtet den Text rechtsbündig aus.
color:#<berechnete Farbe>
legt die Farbe fest.
Mit $TPL{style2}.DOIF_hsv([HMdummy_Labor:measured-temp],7,25,240,360,100,100)
wird die Farbnummer an das Template 'style3 angehängt.
Die Farbnummer wird mit der DOIF internen Funktion DOIF_hsv berechnet. Die Funktion wird mit den Parametern <laufender Wert>,<unterer Wert>,<oberer Wert>,<HUE-Startwert>,<HUE-Endwert>,<Farbsättigung>,<Hellwert> aufgerufen.
Beispiel für Raw definition
Der Code enthält einen Dummy HMdummy_Labor der das Thermostatventil simuliert und ein DOIF HMsensor_Labor, das die Ist-Temperatur bis zur Solltemperatur erhöht und dann diesen Vorgang wiederholt. Die uiTable mit der Widgetkombination ist im DOIF widgetkombi_Labor enthalten.
defmod widgetkombi_Labor DOIF (1) ## HMsensor_Labor HMdummy_Labor attr widgetkombi_Labor group Labor: uiTable attr widgetkombi_Labor room DOIF_Labor attr widgetkombi_Labor uiTable {\ $TPL{style2}="text-align:right;;width:23px;;position:absolute;;left:13px;;top:26px;;font-weight:bold;;font-size:12px;;color:";;\ $TPL{style3}="text-align:right;;width:23px;;position:absolute;;left:13px;;top:13px;;font-weight:bold;;font-size:12px;;color:";;\ \ $TPL{knob1}="knob,thickness:.4,fgColor:#00A5FF,min:7,max:30,width:50,height:50,step:.5,angleArc:270,angleOffset:225,displayInput:false";;\ $TPL{knob2}="knob,thickness:.3,bgColor:#808080,fgColor:#FFA500,min:7,max:30,width:50,height:50,step:.5,angleArc:270,angleOffset:225,displayInput:false";;\ \ }\ WID([HMsensor_Labor],"uzsuSelectRadio,enable,disable,disabled")\ \ "<div style='position:relative;;width:50px;;height:50px'><div style='position:absolute;;left:0px;;top:0px'>".WID([HMdummy_Labor:measured-temp],$TPL{knob1})."</div><div style='position:absolute;;left:0px;;top:0px'>".WID([HMdummy_Labor:desired-temp],$TPL{knob2},"set")."</div>".STY([HMdummy_Labor:measured-temp:d1],$TPL{style2}.DOIF_hsv([HMdummy_Labor:measured-temp],7,25,240,360,100,100)).STY([HMdummy_Labor:desired-temp:d1],$TPL{style3}.DOIF_hsv([HMdummy_Labor:desired-temp],7,25,240,360,100,100))."</div>" defmod HMdummy_Labor dummy attr HMdummy_Labor group Labor: uiTable attr HMdummy_Labor room DOIF_Labor attr HMdummy_Labor userReadings desired-temp {ReadingsNum($name,"state",7)} defmod HMsensor_Labor DOIF ([+1])\ (setreading HMdummy_Labor measured-temp {(if ([HMdummy_Labor:measured-temp] < [HMdummy_Labor:desired-temp]){[HMdummy_Labor:measured-temp]+.5} else {7})}) attr HMsensor_Labor do always attr HMsensor_Labor group Labor: uiTable attr HMsensor_Labor room DOIF_Labor attr HMsensor_Labor webCmd enable:disable setstate HMdummy_Labor desired-temp 16.5 setstate HMdummy_Labor 2017-10-21 19:26:41 desired-temp 16.5 setstate HMdummy_Labor 2017-10-21 19:26:41 measured-temp 13.5 setstate HMdummy_Labor 2017-10-21 19:26:13 state desired-temp 16.5 setstate HMsensor_Labor disabled setstate HMsensor_Labor 2017-10-21 19:26:41 cmd 1 setstate HMsensor_Labor 2017-10-21 19:26:41 cmd_event timer_1 setstate HMsensor_Labor 2017-10-21 19:26:41 cmd_nr 1 setstate HMsensor_Labor 2017-10-21 19:26:41 last_cmd cmd_1 setstate HMsensor_Labor 2017-10-21 19:26:41 mode disabled setstate HMsensor_Labor 2017-10-21 19:26:41 state disabled setstate HMsensor_Labor 2017-10-21 19:27:25 timer_01_c01 21.10.2017 19:27:26 setstate widgetkombi_Labor initialized setstate widgetkombi_Labor 2017-10-21 19:17:32 cmd 0 setstate widgetkombi_Labor 2017-10-21 19:17:32 state initialized
Links
- DOIF
- Style-Attribute https://www.w3schools.com/cssref/default.asp