Uhrzeit aus Readings von Spritpreis Monitor

[B.Stromberg]

Fantastisch!

Möchte mich noch einmal ganz herzlich hier bei allen bedanken.

Ganz besonders bei @OdfFhem, der mich wirklich bei allen Problemen sachlich und fundiert ans Ziel geführt hat.

Hier nun das vorläufige Endergebnis.
Keine Schönheit, aber exakt das, was ich (für meine Frau) haben wollte

[B.Stromberg]

Verlagert man es in die 2.Spalte, steht es ganz rechts....

Sorry, wenn ich noch einmal nerve.
Wie mache ich es, wenn mehrere Readings in einer Reihe haben möchte? 2 Readings habe ich ja kapiert, nun hätte ich ganz gern hinter den Stromwerten der Wärmepumpe noch die Temperaturen vom Speicher (Oben / Unten)

Code Auswählen Erweitern

<tr>
<td><div data-type="label" class="bigger inline left">WP (</div><div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C" class="inline left"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" class="inline left"></div></td>
<td><div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>

Meine bisherigen Versuche, wer hätte es gedacht, waren leider nicht sehr erfolgreich

Schön wäre es, wenn die Temperaturwerte zwischen den beiden Watt werten stehen würden.
Ich verstehe nicht, wenn ich diese Readings einfach anhänge, dass dabei dann als Endergebnis so ein Chaos herauskommt....

[OdfFhem]

Ich verstehe nicht, wenn ich diese Readings einfach anhänge, dass dabei dann als Endergebnis so ein Chaos herauskommt....

Insgesamt hat bei Dir jede Zeile 2 Spalten; bedeutet bei der Verwendung von 4 Spalten in einer Zeile, dass die Tabelle "verunstaltet" wird ...


Für Testzwecke habe ich folgendes HTML-Konstrukt genutzt (s. Screenshot):

Code Auswählen Erweitern


  <table class="center">
    <!-- 1.Zeile ... mit 2 eingefärbten Spalten -->
    <tr>
      <td><div data-type="label" class="bigger yellow">Dies ist Testtext für Spalte #1</div></td>
      <td><div data-type="label" class="bigger green">Dies ist Testtext für Spalte #2</div></td>
    </tr>
    <!-- 2.Zeile ... 1.Spalte: enthält 1 Wert linksbündig ... 2.Spalte: enthält 1 Wert rechtsbündig -->
    <tr>
      <td><div data-type="label" class="bigger inline left">WP (</div>
          <div data-type="label" data-device="ftuitest" data-get="power7" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
          <div data-type="label" class="bigger inline left">)</div></td>
      <td><div data-type="label" data-device="ftuitest" data-get="power6" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
    </tr>
    <!-- 3.Zeile ... 1.Spalte: enthält je 1 Wert links- bzw. rechtsbündig ... 2.Spalte: wie 1.Spalte -->
    <tr>
      <td><div data-type="label" class="bigger inline left">WP (</div>
          <div data-type="label" data-device="ftuitest" data-get="power7" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
  <div data-type="label" class="bigger inline left">)</div>
          <div data-type="label" data-device="ftuitest" data-get="temperature2" data-unit="°C&nbsp;&nbsp;" class="big inline right"></div></td>
      <td><div data-type="label" data-device="ftuitest" data-get="temperature3" data-unit="°C" data-pre-text="&nbsp;" class="big inline left"></div>
          <div data-type="label" data-device="ftuitest" data-get="power6" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
    </tr>
    <!-- 4.Zeile ... 1.Spalte: enthält 1 Wert linksbündig und 2 Werte rechtsbündig ... 2.Spalte enthält 1 Wert rechtsbündig -->
    <tr>
      <td><div data-type="label" class="bigger inline left">WP (</div>
          <div data-type="label" data-device="ftuitest" data-get="power7" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
  <div data-type="label" class="bigger inline left">)</div>
          <div class="big inline right">
            <div data-type="label" data-device="ftuitest" data-get="temperature2" data-unit="°C&nbsp;&nbsp;" class="inline"></div>
            <div data-type="label" data-device="ftuitest" data-get="temperature3" data-unit="°C" data-pre-text="&nbsp;" class="inline"></div>
  </div>
      </td>
      <td><div data-type="label" data-device="ftuitest" data-get="power6" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
    </tr>#
  </table>

  dient nur zur Abstandhaltung zwischen den beiden Temperaturdarstellungen.
Ist natürlich nur ein Beispiel, aber vielleicht hilft's ...

[B.Stromberg]

Ist natürlich nur ein Beispiel, aber vielleicht hilft's ...

Hallo!
Wieder einmal einen herzlichen Dank von mir an dich!
Hat zwar eine Weile gedauert, bis ich verstanden habe, dass die ganzen Daten in table /table reingehören aber OK, so lerne ich wenigstens auch etwas dabei

Das Ganze wird jetzt tatsächlich etwas eng mit den 4 Werten in einer Reihe.
Ich nutze zur Visualisierung ein Fire HD 10 Tablet (komplett ent Amazinisiert).

Dort wären auf der rechten Displayseite eigentlich noch gut 5cm Platz.
Gibt es eine Funktion, dass FTUI die komplette Breite ausnutzt?
Ich nutze zur Zeit 9 Zeilen, die müssten dann allerdings auch erhalten bleiben...

Hier nochmal meine komplette html:

Code Auswählen Erweitern

<html>
<title>FHEM</title>
<body>
<div class="page" id="1_sonstiges">
<ul>
<div class="left"></div>
<table class="center">
<tr><td><div class="bigger 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="bigger right"></div></td></tr>
<tr>
<td><div data-type="label" class="bigger inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="bigger inline left">WP (</div>
          <div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
  <div data-type="label" class="bigger inline left">)</div>
          <div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="&deg;C&nbsp;&nbsp;" class="inline right"></div></td>
      <td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="&deg;C" data-pre-text="&nbsp;" class="inline left"></div>
          <div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="bigger 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>
</ul>
</div>
</div>
</body>
</html>


Und wie es zur Zeit aussieht.

[OdfFhem]

Gibt es eine Funktion, dass FTUI die komplette Breite ausnutzt?

Ein paar Erkenntnisse:
- keine besonderen Angaben im <table>-Element sorgen für "Kleben am oberen linken Rand" ... nur soviel Platz wie nötig
- <table class="center"> sorgt für zentrierte Darstellung ... nur soviel Platz wie nötig
- <table class="fullsize"> sorgt für 100% Höhe und 100% Breite ... soviel Platz wie verfügbar
- wenn man z.B. nur die Breite vergrößern möchte, kann man noch auf das style-Attribut zurückgreifen ...

[B.Stromberg]

- <table class="fullsize"> sorgt für 100% Höhe und 100% Breite ... soviel Platz wie verfügbar
- wenn man z.B. nur die Breite vergrößern möchte, kann man noch auf das style-Attribut zurückgreifen ...

table class="fullsize" macht es tatsächlch etwas breiter.
Allerdings sind da immer noch gut 3cm Platz in der Breite, was wegen der Übersichtlichkeit eigentlich schade wäre zu verschenken.

Mit style meinst du CSS Klassen?

[OdfFhem]

table class="fullsize" macht es tatsächlch etwas breiter.
Allerdings sind da immer noch gut 3cm Platz in der Breite, was wegen der Übersichtlichkeit eigentlich schade wäre zu verschenken.

Mit style meinst du CSS Klassen?

fullsize arbeitet mit den css-Eigenschaften width und height ... jeweils 100%:
- Bei mir passt nichts mehr zwischen die vier Seitenränder und die Tabelle ...
- Bei Dir scheint irgendwas den rechten Rand zu blockieren ...

style ist ein Attribut, mit dem man alle möglichen css-Eigenschaften festlegen kann:
- <table style="height:100%; width:100%;"> hätte dieselbe Auswirkung wie <table class="fullsize">
- <table style="height:50%; width:100%;"> sorgt für komplette Breite und 50% Höhe
- es wird auf jeden Fall immer nur der noch verfügbare Platz ausgenutzt

[B.Stromberg]

Oh Mann, bin ich blöd.....

Ich habe doch noch das Seitenmenü vom FTUI. Ist mir nicht aufgefallen, weil ich in die Readings gezoomt habe und das auch so gespeichert wird.

Gibt es eine Möglichkeit bei der Übersichtsseite #1_sonstiges (das ist die Seite, die ich dann auf dem Tablet darstelle) das Seitenmenü wegzulassen?

hier mal meine index.html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
   
   <!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
* -
* - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
* -   Breite: 9 Felder / Höhe: 5 Felder
* -    <meta name="widget_base_width" content="138">
* -    <meta name="widget_base_height" content="155">
* - Denver TAD-70112 WiFi: 7 Zoll 800x480 512 MB Dualcore 1,3 GHz 8GB
* -   Breite: 7 Felder / Höhe: 5 Felder
* -    <meta name="widget_base_width" content="144">
* -    <meta name="widget_base_height" content="112">
* - IPhone 5s: 4 Zoll 1136 × 640 Dualcore 1 GB 1,3 GHz 64GB
* -   Breite: 7 Felder / Höhe: 5 Felder
<meta name="widget_base_width" content="154">
<meta name="widget_base_height" content="142">
*/

#1920x1080
     <meta name="shortpoll_filter" content=".*">
-->
   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="42">
    <meta name="widget_base_height" content="43">
    <meta name="gridster_cols" content="30">
    <meta name="gridster_rows" content="18">
   
    <meta name="web_device" content="WEB">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="0">
    <meta name="widget_margin" content="1">
    <meta name="longpoll" content="1">
    <meta name="longpoll_type" content="websocket">
<meta name="longpoll_filter" content=".*"> 
    <meta name="debug" content="2">
    <meta name="toast" content="2">
   

    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="/lib/powerange.min.css" />
<!--<link rel="stylesheet" href="/lib/openautomation.css" />-->
<!--<link rel="stylesheet" href="/fhem/tablet10test/eigenefonts/gk/style.css">-->
<link rel="stylesheet" href="/lib/material-icons.css" />
<link rel="stylesheet" href="/lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/wopr.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/own.css">
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />


    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FTUI</title>
</head>
<body>
    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="16">
<header><div data-type="label" class="medium orange">Menu</div></header>
            <div class="cell">
        <div data-type="pagebutton" data-url="#1_etagen.html"    data-load="#1_etagen" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_etagen.html||.*#2_etage_.*.html||.*#3_rooms_.*.html)" data-icon="oa-control_building_s_all" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_heating.html"    data-load="#1_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_heating.html||.*#2_heating_etage_.*.html)" data-icon="oa-sani_heating" class="prefetch top-space"></div>
                <div data-type="pagebutton" data-url="#1_sonstiges.html"    data-load="#1_sonstiges" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_sonstiges.html||.*#1_sonstiges_etage_.*.html)" data-icon="oa-measure_battery_100" class="prefetch top-space"></div>



<header><div data-type="label" class="blue">Temperatur</div></header>
<header><div data-type="label" class="medium orange">Außen</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="TerrassenkuehlschrankTemp" data-get="Aussentemp" data-unit="°C" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="TerrassenkuehlschrankTemp" data-get="AM2301-14_Humidity" data-unit="%" class="right"></div></td></tr>
</table>
<header><div data-type="label" class="medium orange">Terrasse</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="TerrassenkuehlschrankTemp" data-get="AM2301-14_Temperature" data-unit="°C" class="right"></div></td></tr>
</table>               
<header><div data-type="label" class="medium orange">Keller</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="SpeicherTemperatur" data-get="AM2301_Temperature" data-unit="°C" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="SpeicherTemperatur" data-get="AM2301_Humidity" data-unit="%" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="SpeicherTemperatur" data-get="AM2301_DewPoint" data-unit="°C Tau" class="right"></div></td></tr>
</table>
<header><div data-type="label" class="medium orange">Dachgeschoss</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="EsszimmerDachgeschoss" data-get="AM2301_Temperature" data-unit="°C" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="EsszimmerDachgeschoss" data-get="AM2301_Humidity" data-unit="%" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="EsszimmerDachgeschoss" data-get="AM2301_DewPoint" data-unit="°C Tau" class="right"></div></td></tr>
</table>

                <header>Uhrzeit</header>
                <div data-type="clock" data-format="H:i:s" class="large"></div>
                <div data-type="clock" data-format="d.m.Y" class="small"></div>
                <header>Load</header>
                <div data-type="label" data-device="sysmon" data-get="loadavg" class="bold" data-color="#CCCCCC"></div>
                <header>Max Credits</header>
                <div data-type="label" data-device="CUL1" data-get="credit10ms" class="bold" data-color="#CCCCCC"></div>
                <header>Kurs Ethereum</header>
                <div data-type="label" data-device="Ethereum" data-get="ethereum" class="bold" data-color="#CCCCCC"></div>
                </div>
   
        </li>
        <li data-row="1" data-col="3" data-sizex="8" data-sizey="16">
            <div class="page" id="1_index"></div>
        <div class="page" id="1_etagen"></div>
            <div class="page" id="1_light"></div>
            <div class="page" id="1_heating"></div>
            <div class="page" id="1_rollaeden"></div>
            <div class="page" id="1_multimedia"></div>
            <div class="page" id="1_phone"></div>
            <div class="page" id="1_wetter"></div>
            <div class="page" id="1_sonstiges"></div>
         </li>
        </ul>
            </div>
</body>
</html>


[OdfFhem]

Dein Menü steht statisch an dieser Stelle ... also den ersten beiden Spalten:
<li data-row="1" data-col="1" data-sizex="2" data-sizey="16"></li>

Ab der dritten Spalte wird die ausgewählte Seite dargestellt:
<li data-row="1" data-col="3" data-sizex="8" data-sizey="16"></li>

Ich würde auf den ersten Blick sagen, dass das Ausblenden des Menüs keinen Raum schaffen würde.


Ich nutze pagetab und jede "neue" Seite hat den kompletten Raum zur Verfügung
... die eingeschränkten Seiten könnten ohne bzw. ohne komplettes Menü ... evtl. nur "Ausweg"
... die restlichen Seiten mit komplettem Menü

[B.Stromberg]

Ich nutze pagetab und jede "neue" Seite hat den kompletten Raum zur Verfügung
... die eingeschränkten Seiten könnten ohne bzw. ohne komplettes Menü ... evtl. nur "Ausweg"
... die restlichen Seiten mit komplettem Menü

Könntest du mir da ein wenig auf die Sprünge helfen?
Du weißt denke ich mittlerweile, dass ich in html. 2 linke Daumen habe

[OdfFhem]

Die beiden Links zeigen hoffentlich die Unterschiede/Möglichkeiten beispielhaft auf:
- https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton
- https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab

[B.Stromberg]

Oh weia...
Feiertage sind doch schon vorbei....

Da muss ich meine ganze Tablet UI umklöppeln

[OdfFhem]

Noch mal eine kleine Rückfrage:
Würde auf dem Tablet nur eine einzige Seite dargestellt
oder
hätte die Darstellung nichts mit dem Bisherigen zu tun
?

Wenn ja, dann könntest Du
- auch einfach eine neue Startseite anlegen
- für (Wage)Mutige sogar mit FTUI3 starten
- ...

[B.Stromberg]

Noch mal eine kleine Rückfrage:
Würde auf dem Tablet nur eine einzige Seite dargestellt
oder
hätte die Darstellung nichts mit dem Bisherigen zu tun
?

Wenn ja, dann könntest Du
- auch einfach eine neue Startseite anlegen
- für (Wage)Mutige sogar mit FTUI3 starten
- ...

Also Ursprung des Ganzen war, dass ich Readings auf meinem Notebook sehen wollte... Dann ist FTUI über die Jahre gewachsen.

#1_etagen.html und #1_heating.html sind Seiten für mein Notebook

#1_sonstiges.html ist einzig und allein für das Fire HD 10 um 24/7 diese 9 Readings darzustellen für meine Frau.

Das mit FTUI3 lassen wir mal lieber, du willst doch irgendwann mal wieder Ruhe vor mir haben und nicht die nächsten 8 Wochen mir FTUI3 beibringen

Quick & Dirty reicht mir völlig... Auch nur mit Direktaufruf der einen Seite fürs Tablet...

[OdfFhem]

Das mit FTUI3 lassen wir mal lieber, du willst doch irgendwann mal wieder Ruhe vor mir haben und nicht die nächsten 8 Wochen mir FTUI3 beibringen

Bitte keine "Drohungen"

Quick & Dirty reicht mir völlig... Auch nur mit Direktaufruf der einen Seite fürs Tablet...

Ich habe einfach mal eine neue Startdatei index_frau.html angelegt - der Teil zwischen <table>...</table> entspricht 1:1 Deinem table-Inhalt:

Code Auswählen Erweitern


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

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

<body>
<table class="fullsize">
<tr><td><div class="bigger 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="bigger right"></div></td></tr>
<tr>
<td><div data-type="label" class="bigger inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<tr>
      <td><div data-type="label" class="bigger inline left">WP (</div>
          <div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
  <div data-type="label" class="bigger inline left">)</div>
          <div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="&deg;C&nbsp;&nbsp;" class="inline right"></div></td>
      <td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="&deg;C" data-pre-text="&nbsp;" class="inline left"></div>
          <div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="bigger 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>

Dies führt (mit zufälligen Daten) zu den angehängten Screenshots ... das hellbläuliche soll den Rahmen des Tablets darstellen.

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.

"<link rel="stylesheet" href="./fhem-tablet-ui-user-neu.css" />" muss bei Dir wahrscheinlich leicht anders aussehen ...