stateFormat mit icons?

[ch.eick]

Hallo zusammen,

ich habe noch keine alternative Fhem Oberfläche im Einsatz und hübsche mit FhemWeb mit stateFormat etwas auf.

Im Anhang habe ich mal ein Bild vom Wechselrichter bei gefüght, das mir als Richtung dient. Wäre soetwas auch in FhemWeb möglich?

Mein bisheriges Ergebnis sieht so aus und ist an der Grenze meiner jetzigen Kenntnisse

Code Auswählen Erweitern


{sprintf("
<TABLE>

<TR>
  <TH VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">Batterie %s</TH>
  <TH VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">aktuell</TH>
  <TH VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">Hausverbrauch</TH>
</TR>

<TR>
  <TD VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">
    Leistung:  %04d W<br>
    Temp.: %02.1f °C<br>
    Ladung: %2d %%
  </TD>

  <TD VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">
    DC total: %05d W<br>
    <br>
    <br>
    PV reserve: %05d W
  </TD>

  <TD VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">
    von PV: %05d W <br>
    von Batterie: %05d W<br>
    vom Netz: %05d W<br>
    ins Haus: %05d W
  </TD>
</TR>

</TABLE>
" ,
(ReadingsVal($name,"Battery_voltage",0)*ReadingsVal($name,"Actual_battery_charge_-minus_or_discharge_-plus_current",0) lt 0) ? "<span style='color:#00FF00'>Laden</span>":"<span style='color:#FF0000'>Entladen</span>" ,

ReadingsVal($name,"Battery_voltage",0)*ReadingsVal($name,"Actual_battery_charge_-minus_or_discharge_-plus_current",0),
ReadingsVal($name,"Battery_temperature",0) ,
ReadingsVal($name,"Act_state_of_charge",0) ,

ReadingsVal($name,"Power_DC1","0")+ReadingsVal($name,"Power_DC2","0"),
ReadingsVal($name,"Power_DC1","0")+ReadingsVal($name,"Power_DC2","0")-ReadingsVal($name,"Total_AC_active_power","0"),

ReadingsVal($name,"Home_own_consumption_from_PV",0) ,
ReadingsVal($name,"Home_own_consumption_from_battery",0) ,
ReadingsVal($name,"Home_own_consumption_from_grid",0),
ReadingsVal($name,"Home_own_consumption_from_PV",0) +ReadingsVal($name,"Home_own_consumption_from_battery",0)+ReadingsVal($name,"Home_own_consumption_from_grid",0)
)}


Das Ergebnis ist auch im Anhang zu sehen.

Gruß
   Christian

[rudolfkoenig]

Wäre soetwas auch in FhemWeb möglich?

Da man bei stateFormat einen Perl-Ausdruck angeben kann, und perl funktional vollstaendig ist (vulgo beliebige Webseiten generieren kann), ist es moeglich.
Ich wuerde geschaetzt 2-3 Stunden Netto dafuer brauchen, da ich keine Vorlagen kenne.
Ich meine bei pah hatte ich mit Behaeltern was Vergleichbares gesehen, ob man das hier wiederverwenden kann, weiss ich nicht.

[ch.eick]

Okay, danke.

ich hatte schon versucht mit <img src=.... Icons aus dem Default Verzeichnis zu verwenden, jedoch scheine ich dann da wohl einen Syntax Fehler zu haben.
Ich kann leider auch nur Beispiele mit HTML für mich anpassen.
Dann versuche ich es mal weiter, eventuell meldet sich ja noch jemand zu Wort.

Wäre das denn generell ein Weg, den man verwenden würde, oder laufe ich da in eine Sackgasse und es gibt eventuell noch etwas einfacheres?
Bisher habe ich den Fokus auf die Anbindung und Funktionalität gelegt, jedoch möchte ich es jetzt doch langsam auch verschönern.

Viele Grüße
     Christian

[Beta-User]

Der Thread, in dem pah das vorgestellt hatte, dürfte der hier sein: https://forum.fhem.de/index.php/topic,35340.msg276630.html#msg276630. Es gibt in seinem neuen Buch dazu auch Hinweise, wie man eigene (auch komplexere) SVG's (im Kontext mit FHEM) basteln kann, ausprobiert habe ich das aber noch nicht.
Es sah' aber machbar aus, wenn man die Stellschrauben kennt.

Es gab "gewisse Kritik" an dem Thread, weil stateFormat statt devStateIcon verwendet wird (und man daher bei textbasierten Systemen/Screenreadern unschöne Ergebnisse zu "lesen" bekommt). Irgendjemand meinte, das müsse so sein, weil man sonst die Größe nicht manipulieren könnte, pah selbst merkte an, man könne ggf. durch entsprechende Rückmeldecodes dazu auch verhindern, dass "ungrafische" Systeme via stateFormat unschön bedient werden usw. usf.. (@Rudi: ich kann das nicht bewerten, aber wenn wir das stateFormat screenreader-tauglich "escapen" könnten, wäre das auf alle Fälle kein Fehler, und wie man die Größe des devStateIcon manipuliert, wäre auch interessant, selbst wenn ich grade keinen Anwendungsfall dazu habe... Ich pack's dann in's Wiki zum Wiederfinden?)

Wenn möglich, würde ich daher dafür plädieren, für FHEMWEB mit devStateIcon zu arbeiten, es sollte möglich sein, auch da die Anzeigegröße der SVG's zu manipulieren.

An sich wäre es aber super, wenn wir hierzu eine allgemein "verständliche" Lösung hinbekämen; mit f18 (und flex) ist es doch zwischenzeitlich m.E. kein Hexenwerk mehr, ohne externes Frontend anschauliche UI's zu basteln.

Gruß, Beta-User

[ch.eick]

Nun habe ich Versuche gemacht

Das ins stateFormat geschrieben

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<body>

<TABLE>

<TR>
  <TH VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">Batterie %s</TH>
  <TH VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">aktuell</TH>
  <TH VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">Hausverbrauch</TH>
</TR>

<TR>
  <TD VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">
    Leistung:  %04d W<br>
    Temp.: %02.1f °C<br>
    Ladung: %2d %%
  </TD>

  <TD VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">
    DC total: %05d W<br>
    <br>
    <br>
    PV reserve: %05d W
  </TD>

  <TD VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">
    von PV: %05d W <br>
    von Batterie: %05d W<br>
    vom Netz: %05d W<br>
    ins Haus: %05d W
  </TD>
</TR>

</TABLE>

<svg height="130" width="500" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

</body>
</html>


Das zeigt mir ein oranges Symbol mit dem Text "SVG" , jedoch habe ich die Größe noch nicht im Griff.
Die hängt von height="130" width="500" viewBox="0 0 200 200" ab, jedoch habe ich den warscheinlich simplen Syntax nicht verstanden. Manchmal wird es extrem klein, jedoch bisher nie groß.
Ich hab mal ein Bild angehängt.


Wenn ich das dann auch noch, wie vorher ins sprintf einpacke bekomme ich durch den svg Teil einen Syntax Error sobald ich das attr stateFormat speichere.

Code Auswählen Erweitern


{sprintf("
<!DOCTYPE html>
<html>
<body>

<TABLE>

<TR>
  <TH VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">Batterie %s</TH>
  <TH VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">aktuell</TH>
  <TH VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">Hausverbrauch</TH>
</TR>

<TR>
  <TD VALIGN=\"TOP\" ALIGN=\"MIDDLE\" WIDTH=\"60\">
    Leistung:  %04d W<br>
    Temp.: %02.1f °C<br>
    Ladung: %2d %%
  </TD>

  <TD VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">
    DC total: %05d W<br>
    <br>
    <br>
    PV reserve: %05d W
  </TD>

  <TD VALIGN=\"TOP\" ALIGN=\"RIGHT\" WIDTH=\"60\">
    von PV: %05d W <br>
    von Batterie: %05d W<br>
    vom Netz: %05d W<br>
    ins Haus: %05d W
  </TD>
</TR>

</TABLE>

<svg height="130" width="500" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

</body>
</html>
",
"Test" )}


Meldung: Can't find string terminator '"' anywhere before EOF at (eval 665440) line 51.

Das sollte eigentlich simpel zu finden sein, jedoch habe ich schon extrem viele '"' positioniert. Ich finde nie die richtige Position

Mit dieser svg Technik könnte ich dann die svg Grafiken plazieren und mit sprintf die Werte eintragen. Soweit die Theorie.

Im sprintf Code habe ich der einfachheit halben die Variablen herausgelassen.

Viele Grüße
     Christian