Hallo,
Jörg hatte mal bemerkt das man eine ansprechende optische Darstellung der Daten auch im Device umsetzen könnte und nicht unbedingt wie die meisten Beispiele aus den Templates auf readingsGroup zurückgreifen müsse. Scheinbar gabs auch mal Versuche von Reinhart das umzusetzen (siehe MQTT2-Ebus-Wiki, weiter unten Templates auf Basis devStateIcon) aber in ein Template hat das keinen Einzug genommen, der Code steht auch nicht im Wiki, sehe nur das Bild.
Ich weiß nicht wie Reinhart das Beispiel umgesetzt hat, auch nicht ob ich in devStateIcon richtig bin, aber man kann {} verwenden und es landet nichts in STATE wie bei stateFormat.
Hier meine ersten Spielereien (unabhängig davon ob das nun Broadcast-Meldungen sind oder welche die angefordert werden müssen und in welchem Device die Daten landen), allerdings jetzt mit pahcolor, die span hab ich auch anders angeordnet, das dieser Versatz der Icons nicht zustande kommt wenn die Werte einstellig sind und die Elemente links ausgerichtet statt rechts (devStateStyle). Ob man pahcolor bei jedem Wert verwenden muss sei mal dahingestellt.
defmod MQTT2_ebusd_bai MQTT2_DEVICE ebusd_bai
attr MQTT2_ebusd_bai IODev MQTT2_Server
attr MQTT2_ebusd_bai comment {my $var1="<span style=\'color:\x23".substr(Color::pahColor(0,30,60,ReadingsVal($name,'1_Vorlauf',0),0),0,6)."\'>".ReadingsVal($name,'1_Vorlauf',0)."</span>";;\
return "Vorlauf:".$var1}
attr MQTT2_ebusd_bai devStateIcon {"<span>Vorlauf:</span><br><span>".FW_makeImage('sani_supply_temp')."</span><span style=\'color:\x23".substr(Color::pahColor(30,55,80,ReadingsNum($name,'1_Vorlauf',0),0),0,6)."\'>;".sprintf("%.2f \°C",ReadingsNum($name,'1_Vorlauf',0))."</span><br><span>Warmwasser:</span><br><span>".FW_makeImage('sani_water_hot')."</span><span style=\'color:\x23".substr(Color::pahColor(48,55,60,ReadingsNum($name,'1_Warmwassertemperatur',0),0),0,6)."\'>;".sprintf("%.2f \°C",ReadingsNum($name,'1_Warmwassertemperatur',0))."</span><br><span>Aussen:</span><br><span>".FW_makeImage('temp_outside')."</span><span style=\'color:\x23".substr(Color::pahColor(-10,15,40,ReadingsNum($name,'1_Aussentemperatur',0),0),0,6)."\'>;".sprintf("%.2f \°C",ReadingsNum($name,'1_Aussentemperatur',0))."</span><br><span>Druck:</span><br><span>".FW_makeImage('weather_barometric_pressure')."</span><span style=\'color:\x23".substr(Color::pahColor(1.6,2.1,2.6,ReadingsNum($name,'WaterPressure',0),0),0,6)."\'>;".sprintf("%.2f \°C",ReadingsNum($name,'WaterPressure',0))."</span>"}
attr MQTT2_ebusd_bai devStateStyle style="text-align:left"
attr MQTT2_ebusd_bai event-on-change-reading .*
attr MQTT2_ebusd_bai group Ebus
attr MQTT2_ebusd_bai jsonMap Status01_0_value:1_Vorlauf Status01_0_name:0 Status01_1_value:1_Ruecklauf Status01_1_name:0 Status01_2_value:1_Aussentemperatur Status01_2_name:0 Status01_3_value:0 Status01_3_name:0 Status01_4_value:1_Warmwassertemperatur Status01_4_name:0 Status01_5_value:1_Pumpe Status01_5_name:0 HwcStarts_0_name:0 HwcStarts_0_value:HwcStarts FanSpeed_0_name:0 FanSpeed_0_value:FanSpeed WaterPressure_press_value:WaterPressure WaterPressure_sensor_value:0 DateTime_bdate_value:0 DateTime_btime_value:0 DateTime_dcfstate_value:0 DateTime_temp2_value:0 outsidetemp_temp2_value:0
attr MQTT2_ebusd_bai readingList ebusd/bai/Status01:.* { json2nameValue($EVENT, 'Status01_', $JSONMAP) }\
ebusd/bai/WaterPressure:.* { json2nameValue($EVENT, 'WaterPressure_', $JSONMAP) }\
ebusd/bai/FlowTemp:.* { json2nameValue($EVENT, 'FlowTemp_', $JSONMAP) }\
ebusd/bai/FanSpeed:.* { json2nameValue($EVENT, 'FanSpeed_', $JSONMAP) }\
ebusd/bai/Status02:.* { json2nameValue($EVENT, 'Status02_', $JSONMAP) }\
ebusd/bai/FanHours:.* { json2nameValue($EVENT, 'FanHours_', $JSONMAP) }\
ebusd/bai/HcHours:.* { json2nameValue($EVENT, 'HcHours_', $JSONMAP) }\
ebusd/bai/HwcHours:.* { json2nameValue($EVENT, 'HwcHours_', $JSONMAP) }\
ebusd/bai/HwcStarts:.* { json2nameValue($EVENT, 'HwcStarts_', $JSONMAP) }\
ebusd/bai/SetMode:.* { json2nameValue($EVENT, 'SetMode_', $JSONMAP) }\
ebusd/broadcast/vdatetime:.* { json2nameValue($EVENT, 'vdatetime_', $JSONMAP) }\
ebusd/bai/DateTime:.* { json2nameValue($EVENT, 'DateTime_', $JSONMAP) }\
ebusd/broadcast/outsidetemp:.* { json2nameValue($EVENT, 'outsidetemp_', $JSONMAP) }
attr MQTT2_ebusd_bai room Ebus,MQTT2_DEVICE
Was ich jetzt gerne hätte wäre eine horizontale Anordnung und keine vertikale. Um das auch optisch ansprechend hinzubekommen sehe ich nur die Verwendung vom div-Tag.
Es muss ja aber einen Grund geben das ich immer nur inline-Elemente in stateFormat/devStateIcon in Verwendung sehe.
Kann mich da bitte jemand aufklären ?
Oder hat jemand einen Tipp für ansprechende horizontale Anordnung ?
Gruß
Thomas
Hallo Thomas,
eventuell wäre das Thema in Frontends/FHEMWEB besser aufgehoben (der eigentliche Code dazu steckt in FW_dev2image aus 01_FHEMWEB.pm).
Das ist eher eine Frage für Fortgeschrittene, und v.a. Rudi liest hier eher nur sporadisch mit. Würde daher empfehlen, das unter einem etwas anderen Titel dort nochmal zu plazieren (mit wechselseitigen Verweisen), Vorschlag wäre in diese Richtung:
"Perl-devStateIcon: Wie Ausrichtung von mehreren Elementen (Grafik, Text) beeinflussen?"
Ansonsten ist es wohl schlicht so, dass komplexere Grafik/Text-Mischungen bisher eher nicht so gängig waren...
Die Grafik im Wiki basiert mit einiger Sicherheit auf den Codes, die etwa ab hier zu finden sind: https://forum.fhem.de/index.php/topic,97989.msg919304.html#msg919304; was da steht, bringt dich aber vermutlich nicht wirklich weiter.
Gruß, Beta-User
erster Test nach Bestätigung das nichts dagegen spricht :)
{"<div style=\'float: left\' \'width: 33.33333%\' \'padding: 20px\' \'background: #eee\' \'box-sizing: border-box\'><span>Vorlauf:</span><br><span>".FW_makeImage('sani_supply_temp')."</span><span style=\'color:\x23".substr(Color::pahColor(30,55,80,ReadingsNum($name,'1_Vorlauf',0),0),0,6)."\'>".sprintf("%.2f \°C",ReadingsNum($name,'1_Vorlauf',0))."</span></div><div style=\'float: left\' \'width: 33.33333%\' \'padding: 20px\' \'background: #eee\' \'box-sizing: border-box\'><span>Warmwasser:</span><br><span>".FW_makeImage('sani_water_hot')."</span><span style=\'color:\x23".substr(Color::pahColor(48,55,60,ReadingsNum($name,'1_Warmwassertemperatur',0),0),0,6)."\'>".sprintf("%.2f \°C",ReadingsNum($name,'1_Warmwassertemperatur',0))."</span></div><div style=\'float: left\' \'width: 33.33333%\' \'padding: 20px\' \'background: #eee\' \'box-sizing: border-box\'><span>Aussen:</span><br><span>".FW_makeImage('temp_outside')."</span><span style=\'color:\x23".substr(Color::pahColor(-10,15,40,ReadingsNum($name,'1_Aussentemperatur',0),0),0,6)."\'>".sprintf("%.2f \°C",ReadingsNum($name,'1_Aussentemperatur',0))."</span></div><div style=\'float: left\' \'width: 33.33333%\' \'padding: 20px\' \'background: #eee\' \'box-sizing: border-box\'><span>Druck:</span><br><span>".FW_makeImage('weather_barometric_pressure')."</span><span style=\'color:\x23".substr(Color::pahColor(1.6,2.1,2.6,ReadingsNum($name,'WaterPressure',0),0),0,6)."\'>".sprintf("%.2f \ bar",ReadingsNum($name,'WaterPressure',0))."</span></div>"}
:) Sieht doch schon ganz gut aus...
Vielleicht noch eine Anmerkung: Wenn du das so stark am eigenen Farbschema ausrichtest, ist das für templates nicht optimal. Aber ganz unabhängig davon, welche Farbe man wählt: Probleme sind nie ganz auszuschließen.
Ohne das näher geprüft zu haben: wäre es nicht einfacher, nur die Icons einzufärben, damit man den Text immer lesen kann? (Bin grad nicht sicher, ob bei den SVG's der Vordergrund oder Hintergrund eingefärbt wird; wenn das wider Erwarten auch der Hintergrund sein sollte, könnte der User dann ja schlicht die Ende-Markierung entsprechend verschieben, wenn er das ungefählich oder schöner findet...?).
Zitatwäre es nicht einfacher, nur die Icons einzufärben, damit man den Text immer lesen kann?
Nur das Icon einzufärben der Lesbarkeit wegen find ich gut, aber nicht selbst draufgekommen und werd ich auch mal so machen/zeigen.
Zu der Anmerkung nochmal zum Verständnis und hier OT, richte nix nach meinem Farbschema aus, das sind erste Gehversuche, der Style sollte f-18 im light-Modus (ausser da hat sich was am Standard geändert seit dem einrichten meines ATs) und den nutz ich am Tage, dark wenns dunkel ist.
defmod at_f18_light at *{sunrise(0,"05:00","07:30")} attr WEB styleData {\
"f18":{\
"Pinned.menu": true,\
"savePinChanges": true,\
"Pinned.style.list.f18 special": true,\
"rightMenu": false,\
"hideLogo": true,\
"hidePin": false,\
"Pinned.detail.DeviceOverview": true,\
"cols.bg": "F8F8F8",\
"cols.fg": "465666",\
"cols.link": "4C9ED9",\
"cols.evenrow": "E8E8E8",\
"cols.oddrow": "F0F0F0",\
"cols.header": "DDDDDD",\
"cols.menu": "EEEEEE",\
"cols.sel": "CAC8CF",\
"cols.inpBack": "FFFFFF",\
"hideInput": false,\
"Pinned.detail.Readings": true,\
"Pinned.style.list.f18: Room specific": true\
}\
};;save
attr at_f18_light group WEB-Stil
{FW_makeImage('sani_supply_temp@#.substr(Color::pahColor(0,30,60,ReadingsVal("MQTT2_ebusd_bai","1_Vorlauf",0),0),0,6)')}
Wie hängt man denn den Hex-Wert an das @ ran, hab jetzt alles erdenkliche durch, ohne Erfolg.
Schau' dir das mit den Hochkommata nochmal an, da ist ein grundsätzliches Verständnisproblem dahinter.
Bei den Tests fand ich es einfacher, erst mal die Werte in Variablen zu packen und dann weiterzuverarbeiten. Ungetestet sollte es - nur mit dem Icon - so klappen:{my $col_supply_temp = substr(Color::pahColor(0,30,60,ReadingsVal("MQTT2_ebusd_bai","1_Vorlauf",0),0),0,6); my $icon_supply_temp = 'sani_supply_temp@'.$colPower; FW_makeImage("$icon_supply_temp",'file_unknown@grey')}
Der mittlere Teil der Grafik im Wiki dürfte (evtl. mit Anpassungen, was den Farbverlauf angeht) auf Folgendem basieren, das ist dann eine Multi-Icon-Variante mit Textanteil (stammt aus dem ebus-template-Thread, da gibt's noch etwas mehr, wenn man nach pahColor sucht):
{ my $vP = ReadingsVal($name, "WPPWMPower_percent0_value", "4448"); my $colPower = substr(Color::pahColor(0,50,4449,$vP,0),0,6); my $iconPower = 'sani_pump@'.$colPower; my $vFS = ReadingsVal($name, "FanSpeed_0_value", "3001"); my $colFSpeed = substr(Color::pahColor(0,50,4000,$vFS,0),0,6); my $iconFSpeed = 'vent_ventilation_level_'; $iconFSpeed .= $vFS < 499 ? '0@' : $vFS <1699 ? '1@' : $vFS <3001 ? '2@' : '3@'; $iconFSpeed .= $colFSpeed; "<div style=\"text-align:right\" > Heizungspumpe: " . FW_makeImage("$iconPower",'file_unknown@grey') . " ($vP Watt)<br>Ventilatordrehzahl: " . FW_makeImage("$iconFSpeed",'vent_ventilation_level_3@red') . " ($vFS Upm)</div>"}
Habs selbst hinbekommen nach einmal drüber schlafen:
{FW_makeImage('sani_supply_temp@#'.substr(Color::pahColor(0,30,60,ReadingsVal("MQTT2_ebusd_bai","1_Vorlauf",0),0),0,6).'')}
Das gar nicht so einfach, drunter wollt ich eigentlich weitere divs verwenden.
Es kommt mir jetzt die Frage auf ob div der richtige Weg ist (bin ja kein HTML-Guru), warum nicht einfach eine Tabelle nehmen, flexbox, grid oder mit display: table... gibts auch und könnte man auch spielen, aber alles mehr Code.
Weshalb ich das erwähne ? wenn ich nach längerer Zeit die Seite wieder aufrufe und ich mich nicht neu anmelden muss, sehe ich die vergangenen Werte hoch/runter rattern bis zum aktuellen Wert.
Mit div müsste man, mein ich, jetzt anfangen zu tricksen und ein (unnötiges span) einbauen das das IST-div die gleiche Höhe wie die anderen hat.
{"<div style=\'text-align: center; float: left; padding: 20px;background: #ffffff;box-sizing: border-box;font-weight: bold;\'><span>IST</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box\'>
<span>Vorlauf:</span><br><span>".FW_makeImage('sani_supply_temp@#'.substr(Color::pahColor(30,55,80,ReadingsVal($name,"1_Vorlauf",0),0),0,6).'')."</span><span> ".sprintf("%.2f \°C",ReadingsNum($name,'1_Vorlauf',0))."</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;\'>
<span>Warmwasser:</span><br><span>".FW_makeImage('sani_water_hot@#'.substr(Color::pahColor(48,55,60,ReadingsVal($name,"1_Warmwassertemperatur",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \°C",ReadingsNum($name,'1_Warmwassertemperatur',0))."</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;\'>
<span>Aussen:</span><br><span>".FW_makeImage('temp_outside@#'.substr(Color::pahColor(-10,15,40,ReadingsVal($name,"1_Aussentemperatur",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \°C",ReadingsNum($name,'1_Aussentemperatur',0))."</span></div>
<div style=\'text-align: center; float: left; padding: 20px;background: #ffffff;box-sizing: border-box;\'>
<span>Druck:</span><br><span>".FW_makeImage('weather_barometric_pressure@#'.substr(Color::pahColor(1.6,2.1,2.6,ReadingsVal($name,"WaterPressure",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \ bar",ReadingsNum($name,'WaterPressure',0))."</span></div>"}
Und noch was, wenn ich jetzt bewusst einen Style über die Schriftfarbe stolpern lassen wollte, wo stehen die css-Angaben ?
Die Kombifelder die man in webCmd nur mit dem Namen angibt, wie setz ich das jetzt um / bekomm ich die jetzt ins HTML ?
{"<div style=\'overflow: hidden;display: table; width: 100%; height: 100%;\'>
<div style=\'display: table-cell; vertical-align: middle; text-align: center; float: left; padding: 20px; width: 100px; background: #ffffff;box-sizing: border-box;font-weight: bold;padding-bottom: 32768px; margin-bottom: -32768px;\'>
<span>IST</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;padding-bottom: 32788px; margin-bottom: -32768px;\'>
<span>Vorlauf:</span><br><span>".FW_makeImage('sani_supply_temp@#'.substr(Color::pahColor(30,55,80,ReadingsVal($name,"1_Vorlauf",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \°C",ReadingsNum($name,'1_Vorlauf',0))."</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;padding-bottom: 32788px; margin-bottom: -32768px;\'>
<span>Warmwasser:</span><br><span>".FW_makeImage('sani_water_hot@#'.substr(Color::pahColor(48,55,60,ReadingsVal($name,"1_Warmwassertemperatur",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \°C",ReadingsNum($name,'1_Warmwassertemperatur',0))."</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;padding-bottom: 32788px; margin-bottom: -32768px;\'>
<span>Aussen:</span><br><span>".FW_makeImage('temp_outside@#'.substr(Color::pahColor(-10,15,40,ReadingsVal($name,"1_Aussentemperatur",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \°C",ReadingsNum($name,'1_Aussentemperatur',0))."</span></div>
<div style=\'text-align: center; float: left; padding: 20px;background: #ffffff;box-sizing: border-box;padding-bottom: 32788px; margin-bottom: -32768px;\'>
<span>Druck:</span><br><span>".FW_makeImage('weather_barometric_pressure@#'.substr(Color::pahColor(1.6,2.1,2.6,ReadingsVal($name,"WaterPressure",0),0),0,6).'')."</span>
<span> ".sprintf("%.2f \ bar",ReadingsNum($name,'WaterPressure',0))."</span></div>
</div>
<div style=\'clear: right;overflow: hidden;display: table; width: 100%; height: 100%;\'>
<div style=\'display: table-cell; vertical-align: middle; text-align: center; float: left; padding: 20px; width: 100px; background: #ffffff;box-sizing: border-box;font-weight: bold;padding-bottom: 32768px; margin-bottom: -32768px;\'>
<span>SOLL</span></div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;padding-bottom: 32788px; margin-bottom: -32768px;\'>
<span>".ReadingsNum($name,'Hc1HeatCurve',0)." (".sprintf("%.2f \°C",ReadingsNum($name,'SetMode_flowtempdesired_value',0)).")</span><br>
<span>hier<br>Hc1HeatCurve<br>DropDown</span>
</div>
<div style=\'text-align: center; float: left;padding: 20px;background: #ffffff;box-sizing: border-box;padding-bottom: 32788px; margin-bottom: -32768px;\'>
<span>".sprintf("%.2f \°C",ReadingsNum($name,'SetMode_hwctempdesired_value',0))."</span><br>
<span>hier<br>HwcTempDesired<br>DropDown</span></div>
</div>
"}
Gerade DOIF/uiTable (https://wiki.fhem.de/wiki/DOIF/uiTable) entdeckt.
Diese Funktionen in jedem Device, nicht nur in einem DOIF und "Die Beer wär g'schält"
Ich habe hier https://forum.fhem.de/index.php/topic,77690.msg963098.html#msg963098 ein paar Funktionen definiert, die man bereits mit der aktuellen DOIF-Version nutzen kann.
Ich habe bei mir jeweils ein DOIF ohne Definition als Rahmen für mehrer Geräte genommen. Wie z. B. hier für die Rollläden:
https://forum.fhem.de/index.php/topic,77690.msg963294.html#msg963294