Hallo,
ich habe heute ein wenig mit stateFormat rumgetestet. Dabei habe ich festgestellt, dass man mit HTML-Code die Ausgabe formatieren kann. Irgendwo habe ich gelesen, man kann auch mit CSS arbeiten. Das mit CSS bekomme ich aber nicht hin.
Funktioniert das mit CSS im Editor eines Attributs? Wenn ja, wo und wie?
Zum Test habe ich oben die CSS-Zeile eingefügt. Funktioniert nicht.
PS: Mit der Variablen $Ausgabe baue ich mir Zeile für Zeile die Ausgabe zusammen, da es auch if else-Bedingungen gibt. Weiß nicht, ob man das so macht..
{
my $Ausgabe = "<html><head><style>table, th, td {color: darkred;}</style></head><body>";
$Ausgabe = "<p align='left'>Dietpi: ";
if (ReadingsVal("sysmon","cpu_temp","") < "37") {
$Ausgabe = $Ausgabe . "<br>CPU Temperatur: <font color='#3a9c42'><b>" . ReadingsVal("sysmon","cpu_temp","") . "°C</b></font>";
}
else {
$Ausgabe = $Ausgabe . "<br>CPU Temperatur: <font color='#ff0000'><b>" . ReadingsVal("sysmon","cpu_temp","") . "°C</b></font>";
};
if (ReadingsVal("sysmon","fs_ssd1T_mountstatus","") eq "Online") {
$Ausgabe = $Ausgabe . "<br>SSD1T Status: <font color='#3a9c42'><b>Mounted</b></font>";
}
else {
$Ausgabe = $Ausgabe . "<br>SSD1T Status: <font color='#ff0000'><b>" . ReadingsVal("sysmon","fs_ssd1T_mountstatus","") . "</b></font></p>";
};
$Ausgabe = $Ausgabe . "<br>";
$Ausgabe = $Ausgabe . "<table>";
$Ausgabe = $Ausgabe . "<tr>";
$Ausgabe = $Ausgabe . "<th>Status</th><th>Betreff</th><th>Bemerkung</th>";
$Ausgabe = $Ausgabe . "</tr>";
$Ausgabe = $Ausgabe . "<tr>";
$Ausgabe = $Ausgabe . "<td>Status</td><td>Up-Time</td><td>".ReadingsVal("sysmon","uptime_text","")."</td>";
$Ausgabe = $Ausgabe . "</tr>";
$Ausgabe = $Ausgabe . "<tr>";
$Ausgabe = $Ausgabe . "<td>Status</td><td>FHEM-Backup</td><td>".ReadingsTimestamp("backup_sys","state",0)."</td>";
$Ausgabe = $Ausgabe . "</tr>";
$Ausgabe = $Ausgabe . "<tr>";
$Ausgabe = $Ausgabe . "<td>Status</td><td>FHEM-Backup Cleanup (>3Tage)</td><td>".ReadingsTimestamp("backupsLoeschen_at","letzter_Durchlauf",0)."</td>";
$Ausgabe = $Ausgabe . "</tr>";
$Ausgabe = $Ausgabe . "<tr>";
$Ausgabe = $Ausgabe . "<td>Status</td><td>mariaDB-Backup</td><td>".ReadingsVal("DbRepBackup","DumpFileCreatedSize","").", am: ".ReadingsTimestamp("DbRepBackup","DumpFileCreatedSize",0)."</td>";
$Ausgabe = $Ausgabe . "</tr>";
$Ausgabe = $Ausgabe . "</table>";
$Ausgabe = $Ausgabe . "</body></html>";
return $Ausgabe;
}
#1 stateFormat ist fuer alle Ausgabegeraete gedacht, nicht nur fuer FHEMWEB, sprich das sollte kein HTML enthalten. Fuer die FHEMWEB Ausgabe sollte man stattdessen devStateIcon verwenden.
#2 zu devStateIcon existiert auch ein devStateStyle. Alternativ schreibt man die CSS Anweisung als Inhalt des FHEMWEB CSS Attributes bzw. wenn es viel wird, dann packt man alles in eine Datei, und man setzt CssFiles. f18 (in Edit styles) erleichtert die Pflege ueber das "Additional CSS" Link
#3 im gezeigten Beispiel wird der in der ersten Zeile gesetzte Inhalt von $Ausgabe in der zweiten Zeile ersetzt / zerstoert.
#4 <html>...<html> ist ein Kunstgriff, damit FHEM (genauer fhemweb.js) erkennt, dass es sich hier um HTML handelt, und nicht einen "normalen" Text. <head> und <body> ist ueberfluessig.
OK, vielen Dank.
#1 stateFormat: OK, verstanden
#2 devStateIcon: devStateStyle bzw. den Umgang damit verstehe ich nicht. Müsste ich mich nochmals mit beschäftigen.
FHEMWEB CSS Attributes/CssFiles finde ich umständlich, wenn doch nur ein devStateIcon eines bestimmten Device formatiert werden soll
Habe die CSS-Anweisung direkt in das devStateIcon geschrieben. Funktioniert. Was soll dagegen sprechen?
#3 Logisch
#4 <html>: Was bedeutet 'Kunstgriff'? Man kann <html> einfügen oder auch weglassen. Beides funktioniert. Kann man/soll man <html> wie <head> und <body> jetzt nun weglassen oder einfügen?
Vielen Dank und viele Grüße
{
my $Ausgabe = "<style>
.tab1 {color: darkblue; text-align: left;}
.tab1 th {background-color: #E0E0C8;}
.tab1 th, .tab1 td {border: 1px solid black; border-collapse: collapse;}
.head1 {min-width: 90px;}
.head2 {min-width: 300px;}
.tab1 td {background-color: #FFFFE7;}
.iconstate1 {display: block; margin-left: auto; margin-right: auto;}
</style><p align='left'>Dietpi: ";
if (ReadingsVal("sysmon","cpu_temp","") < "37") {
$Ausgabe = $Ausgabe . "<br>CPU Temperatur: <font color='#3a9c42'><b>" . ReadingsVal("sysmon","cpu_temp","") . "°C</b></font>";
}
else {
$Ausgabe = $Ausgabe . "<br>CPU Temperatur: <font color='#ff0000'><b>" . ReadingsVal("sysmon","cpu_temp","") . "°C</b></font>";
ZitatHabe die CSS-Anweisung direkt in das devStateIcon geschrieben. Funktioniert. Was soll dagegen sprechen?
Meiner Ansicht nach nichts.
ZitatKann man/soll man <html> wie <head> und <body> jetzt nun weglassen oder einfügen?
An <html></html> erkennt FHEM, dass der Inhalt HTML sein soll. Ohne werden die Zeichen < und > geschuetzt, damit der Browser sie (und weitere Daten) nicht verschluckt.
<head> und <body> kann man sparen: FHEM interessiert das nicht, der Browser verschluckt sie, und einen "richtigen" <head> und <body> hat die Seite bereits.
OK, tausend Dank.