Uhrzeit aus Readings von Spritpreis Monitor

B.Stromberg · 08 Januar 2023, 13:06:33

Zitat von: OdfFhem am 08 Januar 2023, 07:41:46

Meiner Ansicht nach "klebt" die Darstellung mit <table class="fullsize"> zu sehr am Rand.
Mit <table style="height:95%; width:95%;"> oder so ähnlich erzielt man vermutlich bessere Lesbarkeit.

Moin!

Vielen Dank, dass du mir auch weiterhin hilfst.
Habe die "neue" index.html so angelegt wie im Beispiel von dir beschrieben.

"Problem" ist jetzt allerdings, dass die Zeilen auf dem Tablet, zwar in voller Breite, aber sehr klein, mit großen Zwischenräumen zwischen den Zeilen dargestellt werden

Bekommt man das irgendwie hin, dass die Readings alle untereinander dargestellt werden, ohne Leerzeichen / Freiräume zwischen den Zeilen?

Der Text sollte Zwecks Lesbarkeit aus etwas Entfernung so groß wie möglich sein

OdfFhem · 08 Januar 2023, 16:34:00

Zitat von: B.Stromberg am 08 Januar 2023, 13:06:33
"Problem" ist jetzt allerdings, dass die Zeilen auf dem Tablet, zwar in voller Breite, aber sehr klein, mit großen Zwischenräumen zwischen den Zeilen dargestellt werden

Bekommt man das irgendwie hin, dass die Readings alle untereinander dargestellt werden, ohne Leerzeichen / Freiräume zwischen den Zeilen?

Der Text sollte Zwecks Lesbarkeit aus etwas Entfernung so groß wie möglich sein

FTUI2 unterstützt u.a. folgende Größen:
normal ... 100% ; large ... 125% ; big ... 150% ; bigger ... 200% ; tall ... 350% ; great ... 450% ; grande ... 600%

Bislang verwendest Du als Größe "normal","big" und "bigger"
"normal" verwendest Du bislang nur indirekt ... wo keine Größe angegeben ist, wird autom. "normal" verwendet

Ich habe jetzt 1:1 das bisherige Beispiel auf andere Größen umgestellt ...
- normal ... durch ... bigger ; den beiden Temperaturen muss nun zwanghaft eine Größe zugeordnet werden
- big und bigger ... durch ... great
... angehängter Screenshot verdeutlicht den Unterschied

Da ich das von Dir genutzte Tablet nur vom Hörensagen kenne, wirst Du "intensiver" mit den Größenangaben spielen müssen.

B.Stromberg · 08 Januar 2023, 16:57:21

Zitat von: OdfFhem am 08 Januar 2023, 16:34:00
FTUI2 unterstützt u.a. folgende Größen:
normal ... 100% ; large ... 125% ; big ... 150% ; bigger ... 200% ; tall ... 350% ; great ... 450% ; grande ... 600%

Hmmmm im Moment haben die Größenangaben bei mir keine Auswirkung....
Habe auch schon Grande ausprobiert, sieht aus, als würde FTUI die Größenangaben ignorieren.

Was habe ich nun schon wieder "verhunzt"?
Hier die komplette html.

Code Auswählen

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>Frau</title>
  </head>
<html>

<body>
<table style="height:95%; width:95%;">
<tr><td><div class="great inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="great right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="great inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="great inline left">WP (</div>
          <div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="great inline left"></div>
	  <div data-type="label" class="great inline left">)</div>
          <div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="&deg;C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline"></div></td>
      <td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="&deg;C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="left"></div>
          <div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="great inline right"></div></td>
  </tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr>
      <td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="big inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="big inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline left"></div></td>
      <td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
</table>
</body>
</html>

OdfFhem · 08 Januar 2023, 18:10:30

Zitat von: B.Stromberg am 08 Januar 2023, 16:57:21
Was habe ich nun schon wieder "verhunzt"?

"<link rel="stylesheet" href="css/fhem-tablet-ui.css" />" kannst Du schon mal weglassen
... dies ist die originäre FTUI2-Datei und muss hier nicht angegeben werden
... hier sollte - sofern vorhanden - die "erweiternde" user.css angegeben werden

Ich habe Dein Beispiel mal ausprobiert und die ersten drei Zeilen werden meist deutlich größer dargestellt
... den Rest von big,bigger hast Du noch nicht ersetzt
... die Temperaturen sind noch immer autom. von der Größe normal

Ich kann aus der Ferne schlecht einschätzen, was da schiefgeht
... vielleicht kannst Du mal alles ersetzen und dann ein Screenshot/Foto vom Tablet-Display (temporär) zeigen

B.Stromberg · 08 Januar 2023, 20:47:08

Zitat von: OdfFhem am 08 Januar 2023, 18:10:30
Ich kann aus der Ferne schlecht einschätzen, was da schiefgeht
... vielleicht kannst Du mal alles ersetzen und dann ein Screenshot/Foto vom Tablet-Display (temporär) zeigen

bei den übrig gebliebenen big hat mir wohl pspad einen Streich gespielt.
Habe ich korrigiert.

Hier die abgeänderte html.

Code Auswählen

<!DOCTYPE html>
<html>
  <head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>Frau</title>
  </head>
<html>
<body>
<table style="height:95%; width:95%;">
<tr><td><div class="great inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="great right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="great inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="great inline left">WP (</div>
          <div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="great inline left"></div>
	  <div data-type="label" class="great inline left">)</div>
          <div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="&deg;C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline"></div></td>
      <td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="&deg;C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="left"></div>
          <div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="great inline right"></div></td>
  </tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="great inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="great right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="great inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="great right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="great inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="great right"></div></td></tr>
<tr>
      <td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="great inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="great inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline left"></div></td>
      <td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline right"></div></td>
</tr>
</table>
</body>
</html>

Ich habe mal 2 Fotos vom Tablet beigefügt. Diese sind von meinem Platz auf dem Sofa aus ca. 3m Entfernung aufgenommen.
Quali ist Mist, sorry aber man sieht so den Unterschied, bzw. dass bei der neuen html. die Größenangaben, warum auch immer, nicht berücksichtigt werden.
Ich könnte das Foto "neue html" auch mit big / bigger oder small machen. Die Textgröße ändert sich nicht

Bei der alten html. nutze ich auf dem Tablet "pinch & zoom" um reinzuzoomen und das Seitenmenü wegzuhaben.

Ich füge auch noch einmal 2 Screenshots bei.

Achso, in der alten html ist es Absicht, dass die ersten 3 Readings größer dargestellt werden.

OdfFhem · 08 Januar 2023, 21:28:09

Ich habe folgendes "Minimal"-Beispiel konstruiert:

Code Auswählen


<!DOCTYPE html>
<html>
  <head>
    <script src="js/fhem-tablet-ui.js" defer></script>
  </head>
<html>
<body>
  <!--
  <table>
    <tr><td><div class="normal">normal ... 100%</div></td></tr>
    <tr><td><div class="large">large ... 125%</div></td></tr>
    <tr><td><div class="big">big ... 150%</div></td></tr>
    <tr><td><div class="bigger">bigger ... 200%</div></td></tr>
    <tr><td><div class="tall">tall ... 350%</div></td></tr>
    <tr><td><div class="great">great ... 450%</div></td></tr>
    <tr><td><div class="grande">grande ... 600%</div></td></tr>
  </table>
  -->

  <!--
  <table class="fullsize">
    <tr><td><div class="normal">normal ... 100%</div></td></tr>
    <tr><td><div class="large">large ... 125%</div></td></tr>
    <tr><td><div class="big">big ... 150%</div></td></tr>
    <tr><td><div class="bigger">bigger ... 200%</div></td></tr>
    <tr><td><div class="tall">tall ... 350%</div></td></tr>
    <tr><td><div class="great">great ... 450%</div></td></tr>
    <tr><td><div class="grande">grande ... 600%</div></td></tr>
  </table>
  -->

  <!--
  <table class="center">
    <tr><td><div class="normal">normal ... 100%</div></td></tr>
    <tr><td><div class="large">large ... 125%</div></td></tr>
    <tr><td><div class="big">big ... 150%</div></td></tr>
    <tr><td><div class="bigger">bigger ... 200%</div></td></tr>
    <tr><td><div class="tall">tall ... 350%</div></td></tr>
    <tr><td><div class="great">great ... 450%</div></td></tr>
    <tr><td><div class="grande">grande ... 600%</div></td></tr>
  </table>
  -->

  <table style="width:95%; height:95%;">
    <tr><td><div class="normal">normal ... 100%</div></td></tr>
    <tr><td><div class="large">large ... 125%</div></td></tr>
    <tr><td><div class="big">big ... 150%</div></td></tr>
    <tr><td><div class="bigger">bigger ... 200%</div></td></tr>
    <tr><td><div class="tall">tall ... 350%</div></td></tr>
    <tr><td><div class="great">great ... 450%</div></td></tr>
    <tr><td><div class="grande">grande ... 600%</div></td></tr>
  </table>
</body>

Bei mir funktioniert es z.B. auf Desktop (Chrome,Firefox) und Tablet (Chrome).

Zum Auskommentieren dienen folgende Klammerzeilen

Code Auswählen


<!--
  <table ...> ... </table>
-->

B.Stromberg · 08 Januar 2023, 22:02:49

Zitat von: OdfFhem am 08 Januar 2023, 21:28:09
Ich habe folgendes "Minimal"-Beispiel konstruiert:

*grummel*

Mein Gott, ich hasse den Standby Modus bei meinem Notebook.
In PSPad wird mir die geänderte index.html angezeigt, nur gespeichert wurde diese nicht......
Windows neu gestartet und nun ändert sich auch die Größe

Bastel im Moment mit <table style="height:100%; width:100%;">

Breite wird nun schön ausgenutzt (ja, ich muss die beiden Temperaturen noch anpassen, weiß aber noch nicht, wie ich die linksbündig hinter die Klammer von WP bekomme)

Nur unten wird nun die Blaue Tonne abgeschnitten.
Nehme ich "tall" ist es ein wenig klein, nehme ich great ist es unten abgeschnitten.
Dachte mit height könnte man das irgendwie beeinflussen, aber selbst bei 30% bleibt es unten abgeschnitten.
Denke, das liegt logischerweise daran, dass ja das Verhältnis proportional läuft. (sonst wäre die Schrift gestreckt, was ja so nicht geht).
Nehme ich fullsize, ist am rechten Rand wieder 5cm Luft.

Ein Zwischending zwischen tall und great gibt es nicht?

EDIT 22:15h

Habe jetzt einfach die Größen der 3 Readings von Waschmaschine, Trockner und Spülmaschine geändert, dann passt das. Muss ja nun keine Raketenwissenschaft sein.

Wo ich hängenbleibe ist die beiden Temperaturen bei "WP" nebeneinander darzustellen.
Die "51,5" könnte ein Leerzeichen weiter nach Rechts aber die "47,8" müsste dann, mit vielleicht 3 Leerzeichen, daneben.
Oder fällt dir da etwas ein, wie man das schöner machen kann?
Ich füge noch einmal einen aktuellen Screenshot bei.

Hier die neue html:

Code Auswählen

<!DOCTYPE html>
<html>
  <head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>Frau</title>
  </head>
<html>
<body>
<table style="height:100%; width:100%;">
<tr><td><div class="grande inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="grande right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="great inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="great inline left">WP (</div>
          <div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="great inline left"></div>
	  <div data-type="label" class="great inline left">)</div>
          <div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="&deg;C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline great left"></div></td>
      <td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="&deg;C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline great left"></div>
          <div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr>
      <td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="great inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="great inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline left"></div></td>
      <td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline right"></div></td>
</tr>
</table>
</body>
</html>

B.Stromberg · 09 Januar 2023, 03:00:20

Moin!

Habe es mal selbst hinbekommen

OdfFhem · 10 Januar 2023, 02:37:44

Zitat von: B.Stromberg am 08 Januar 2023, 22:02:49
Mein Gott, ich hasse den Standby Modus bei meinem Notebook.

Ich glaube, mit diesem Eindruck bist Du nicht allein ... wie sagt man gerne bei uns: "Da simmer dabei, dat is ...!"

Aber schon mal schön, dass es jetzt funktioniert ...

B.Stromberg · 16 Januar 2023, 15:06:53

Zitat von: OdfFhem am 10 Januar 2023, 02:37:44
Aber schon mal schön, dass es jetzt funktioniert ...

Hallo!
Darf ich dich noch einmal nerven?
Das Ganze hat bei mir nun derart ausgeartet, dass ich zur Darstellung der Werte einen 24" Monitor hochkant verwende.
Das klappt soweit ganz gut, nur ist dort ein kleiner Schönheitsfehler.

Ich habe nun auch Datum, Uhrzeit und Temperatur integriert, denke aber, dass ich dort bei der Formatierung mal wieder etwas vermurkst habe

Alle paar Sekunden "springt" das Bild ein paar Millimeter hoch und runter. Nehme ich den Code von der Uhrzeit, Datum und Temperatur wieder raus, bleibt das Bild stabil.

Hier noch einmal der komplette Code:

Code Auswählen

<!DOCTYPE html>
<html>
  <head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>Monitor</title>
  </head>
<html>
<body>
<table style="height:80%; width:100%;">
<tr>
      <td><div class="left gigantic bold" data-type="clock" data-format="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;H:i:s"></div></td>
</tr>
<tr>
      <td><div data-type="clock" data-format="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;l, d. F Y" class="left tall thin"></div></td>
      <td><div data-type="label" data-device="Wetterstation" data-get="temperature" data-unit="°C" class="gigantic right"></div></td>
</tr>
<tr><td><div class="great inline top-space left">Stromverbrauch</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="great top-space right"></div></td></tr>
<tr>
      <td><div data-type="label" class="great inline left">PV (</div>
          <div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="tall inline left"></div>
          <div data-type="label" class="great inline left">)</div><div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="&deg;C" data-fix="1" data-limits='[1,40,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline middle tall"></div>
      <td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="tall inline left">WP (</div>
          <div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="tall inline left"></div>
	      <div data-type="label" class="tall inline left">)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="&deg;C" data-fix="1" data-limits='[1,40,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline middle tall"></div>
      <td><div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="tall inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="tall inline left">Wasser (</div>
          <div data-type="label" data-device="WarmwasserWaermepumpe" data-get="ENERGY_Today" data-unit="kWh" data-fix="1" class="tall inline left"></div><div data-type="label" class="tall inline left"></div>
          <div data-type="label" class="tall inline left">)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div data-type="label" data-device="WarmwasserTemperatur" data-get="DS18B20_Temperature" data-unit="&deg;C" data-fix="1" data-limits='[1,40,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline middle tall"></div>
      <td><div data-type="label" data-device="WarmwasserWaermepumpe" data-get="ENERGY_Power" data-unit=" w" class="tall inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","w&auml;scht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Sp&uuml;lmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-2]|[0-2][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","sp&uuml;lt"]' data-limits-part="(\d*).*" data-limits='[0,3]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr>
      <td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" data-post-text=" €" class="tall inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="tall inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle &nbsp;" data-post-text=" €" class="tall inline left"></div></td>
      <td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="tall inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="VolvoOnCall" data-get="distanceToEmpty" data-pre-text="Volvo " data-post-text=" Restkilometer" class="tall inline left"></div></td>
      <td><div data-type="label" data-device="VolvoOnCall" data-get="fuelAmount" " data-post-text=" l Tankinhalt" class="tall inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="tall inline left" data-device="Bitpanda" data-get="BTC_USD" data-fix="0" data-unit="$" data-pre-text="Bitcoin&nbsp;"</div></td>
      <td><div data-type="label" class="tall inline right" data-device="Bitpanda" data-get="ETH_USD" data-fix="0" data-unit="$" data-pre-text="Ethereum&nbsp;"</div></td>
</tr>
<tr>
      <td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="tall inline left"></div></td>
      <td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="tall inline right"></div></td>
</tr>
</table>
</body>
</html>

Es geht wohl primär um diese Zeilen:

Code Auswählen

<tr>
      <td><div class="left gigantic bold" data-type="clock" data-format="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;H:i:s"></div></td>
</tr>
<tr>
      <td><div data-type="clock" data-format="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;l, d. F Y" class="left tall thin"></div></td>
      <td><div data-type="label" data-device="Wetterstation" data-get="temperature" data-unit="°C" class="gigantic right"></div></td>
</tr>

Mit table-style habe ich schon rumprobiert, das "Zucken" im Bild ist egal bei welcher Größe.

Das exakt dort etwas im Argen liegt merke ich daran, dass "width:x%" keine Auswirkung hat. Nehme ich den Code für Uhr, Datum, Temp raus, ändert sich die Breite.

Ergo, ich habe wieder etwas vermurkst

Als Anlage ein Screenshot. Das Aussehen ist wie gewünscht, nur das "Zucken" im Bild nervt

OdfFhem · 16 Januar 2023, 15:39:54

Schaue ich mir gerne an ... wird aber ein wenig später ...

Kann man "genauer" erkennen, welcher der drei Verdächtigen beim Zucken mehr oder weniger Platz braucht ?

B.Stromberg · 16 Januar 2023, 15:47:56

Zitat von: OdfFhem am 16 Januar 2023, 15:39:54
Schaue ich mir gerne an ... wird aber ein wenig später ...

Kann man "genauer" erkennen, welcher der drei Verdächtigen beim Zucken mehr oder weniger Platz braucht ?

Keine Eile

Bin wirklich froh, dass du mir hilfst

Es wird wohl mit der Aufteilung in der Reihe zu tun haben. Es wird nichts explizit größer.
Damit Uhrzeit und Datum halbwegs in der Mitte sind habe ich ja einfach Leerzeichen " " gesetzt.
Bin da mit den Klassen "right" und "left" nicht klargekommen.

Eigentlich müsste man der Seite erst einmal vorgeben, wie groß diese ist? Vertikal ist ja nicht üblich...
Denke, dass Temperatur oder Datum über den rechten Rand hinausgehen....

Wie gesagt, tue mich echt mit der Formatierung in html schwer.

Auch die Temperaturen hinter PV, WP und Wasser sind ja mit Leerzeichen "hingemogelt".
Habe bisher nichts gefunden, wie man einen dritten Wert in einer Zeile exakt in die Mitte bekommt.

OdfFhem · 16 Januar 2023, 21:53:53

Ich habe mal 4 Testfälle angelegt (s. Screenshot):
-1- Tabelle in Tabelle ... ähnlich zu Deiner Ausgabe, aber mit vorgegebener Spaltenbreite
-2- wie -1-, nur mit Normalschrift und daher konstanter Darstellung ... dient zum Vergleich, ob sich die Spaltenbreite von -1- wertabhängig verändert hat
-3- Darstellung verhält sich wie der Rest der Tabelle; legt aber umgekehrt auch fallabhängig selbst die Spaltenbreite für den Rest der Tabelle fest
-4- zentrierte Sicht von Datum und Zeit ; allerdings ohne Temperatur; dient eigentlich nur zur Beobachtung

Meine Tests haben selbst mit realistischen Werten die Variante -3- zum Wackeln gebracht
... mit Variante -1- ist mir dies nicht gelungen

Code Auswählen


<tr><td colspan="2">
  <table style="width:100%; height:100%;">
    <tr><td style="background-color:gray; width:75%"><div data-type="clock" data-format="H:i:s" class="gigantic bold"></div></td>
        <td rowspan="2" style="background-color:gray;"><div data-type="label" data-device="ftuitest" data-get="temperature1" data-unit="°C" class="gigantic"></div></td></tr>
    <tr><td style="background-color:gray;"><div data-type="clock" data-format="l, d. F Y" class="tall thin"></div></td></tr>
  </table>
</td></tr>


<tr><td colspan="2">
  <table style="width:100%; height:100%;">
    <tr><td style="background-color:green; width:75%"><div data-type="clock" data-format="H:i:s"></div></td>
        <td rowspan="2" style="background-color:green;"><div data-type="label" data-device="ftuitest" data-get="temperature1" data-unit="°C"></div></td></tr>
    <tr><td style="background-color:green;"><div data-type="clock" data-format="l, d. F Y"></div></td>
        </tr>
  </table>
</td></tr>


<tr>
  <td style="background-color:lightblue; width=75%"><div class="gigantic bold" data-type="clock" data-format="H:i:s"></div></td>
  <td  style="background-color:lightblue;" rowspan="2"><div data-type="label" data-device="ftuitest" data-get="temperature1" data-unit="°C" class="gigantic"></div></td>
</tr>
<tr>
  <td style="background-color:lightblue;"><div data-type="clock" data-format="l, d. F Y" class="tall thin"></div></td>
</tr>


<tr>
  <td colspan="2" style="background-color:green"><div class="gigantic bold" data-type="clock" data-format="H:i:s"></div></td>
</tr>
<tr>
  <td colspan="2" style="background-color:green"><div data-type="clock" data-format="l, d. F Y" class="tall thin"></div></td>
</tr>

Vielleicht hilft's Dir beim "Ruhigstellen" der Darstellung ...

B.Stromberg · 17 Januar 2023, 04:46:57

Wieder einmal ein ganz dickes DANKE an dich!
Habe die Variante 1 übernommen.
Heute um Mitternacht, wo das Datum von Montag auf Dienstag umgeschlagen ist, stand dann auf einmal Dienstag noch eine Reihe tiefer. Das hatte ich wohl irgendwie vermurkst.
Jetzt mit den vorgegebenen Bereichen passiert das nicht mehr

Hat dann glaube ich auch den Vorteil, dass das Datum unabhängig von der Länge des Wochentags immer mittig unter der Uhr bleibt.

Mal sehen, evtl. baue ich auf diese Art und Weise noch einmal die ganze Ansicht um.
Das mit colspan und rowspan muss ich mir noch einmal genauer ansehen.
Für manche Bereiche brauche ich nur 2 Spalten, für andere 3 Spalten, ob und wie man das mischen kann.

Wenn man erst einmal einen Ansatz hat, kann man sich den Rest auch zusammensuchen

OdfFhem · 17 Januar 2023, 08:05:22

Zitat von: B.Stromberg am 17 Januar 2023, 04:46:57
Für manche Bereiche brauche ich nur 2 Spalten, für andere 3 Spalten, ob und wie man das mischen kann.

Kann man mischen, allerdings gilt: man kann mit colspan keine Spalten dazu erfinden
... aber aus z.B. zwei "(unterschiedlich) schmalen" Spalten kann man eine "breite" Spalte machen
... könnte übersetzt bedeuten: generell mit 3 Spalten beginnen und in Zeilen, die nur 2 Spalten brauchen, auf colspan zurückgreifen