Chart Anzeige 10 Zoll Tablet

[dft606]

Hallo zusammen,

Ich habe eine merkwürdige Anzeige der Kurven im Diagramm bei meinen Tablets Alldocube iplay10.
FTUI läuft auf dem Tablet mit dem Fully Kiosk Browser.
Es werden nicht alle Kurven die im Diagramm definiert sind grafisch angezeigt. Über die "cursor" Funktion können aber die Werte aller Kurven angezeigt werde, auch diese die grafisch nicht dargestellt sind.
Mit dem Chrome Browser besteht da gleiche Problem.

Auf dem PC mit Chrome Browser und auch auf meinem Chuwi HI10 plus Tablet unter Android im Fully Kiosk Browser wird das Diagramm korrekt dargestellt.

Bilder der 4 Varianten habe ich beigefügt.

Kann dieses Darstellungsproblem wirklich am Tablet liegen?
Oder gibt es in der "chart" definition oder im Fully Kiosk Browser Optionen die das Problem beheben?


Gruß

Johannes

[eki]

Es sieht ja, wenn ich das richtig sehe, so aus, dass immer die am Schluss gezeichneten Graphen fehlen, oder? Es könnte also irgendetwas sein, das den Browser aus dem Trittt bringt. Bekommst Du irgendwelche Fehlermeldungen?

[dft606]

Gestern abend habe ich die Anzeige auf einem 7 Zoll Tablet geprüft.
Hier werden auch nicht alle Kurven dargestellt, es fehlen aber nicht die gleichen.

Durch Zufall hat das Tablet kurz auf "Hochformat" umgeschaltet. Hier waren plötzlich alle Kurven zu sehen.

Ich vermute das es an dem Seitenverhältnis der Diagrammdarstellung liegen könnte.
Die beiden 10 Zoll Tablets haben unterschiedliche Auflösungen, wenn ich die Breite und die Höhe auf dem Bildschirm messe ist dies nicht gleich.

Werde es die nächsten Tage testen.


Gruß

Johannes

[eki]

Nur um sicher zu gehen, testest Du mit der neuesten Chart Version (die, die bei Update FTUI mitkommt)?

[dft606]

Hallo,

ich habe FTUI zum Update hinzugefügt. Die Chart Version ist vom 5.5.2020.

Verschiedene Seitenverhältnisse habe ich jetzt auch getestet, ohne Erfolg.

In den angehängten Dateien ist das Diagramm von gestern mit verschiedenen Zoom Stufen dargestellt.
Man sieht dann auch noch, dass manche Kurven bei gewissen Werten einfach abgeschnitten dargestellt werden.
Es ist auch kein System dahinter welche Kurven nicht dargestellt werden. Wenn der Fully Kiosk Browser neu gestartet wird dann kann es sein, dass andere Kurven nicht dargestellt werden.

Habe aktuell auch noch die Linienstärken auf 1px reduziert und den Hintergrund auf schwarz geändert. Dies hat auch keine Änderung hervorgerufen.

So habe ich das Chart definiert:

Code Auswählen Erweitern

        <div data-type="chart"
        data-device='["OWX_28_FF93176F1801","OWX_28_01D06E1E1901","OWX_28_AD9E7D1E1901","OWX_28_9ECD121E1901","OWX_28_8A22741E1901","OWX_28_448D721E1901","OWX_28_E2407B1E1901","OWX_28_3BB8621E1901"]'
        data-logdevice="DBLOG_SQLite"
        data-logfile="HISTORY"
        data-ptype="lines"
        data-legend='["Aussen","Solar Vorlauf","WP Vorlauf","WW oben","WW unten","Puffer","SP mitte","SP unten"]'
        data-ytext="Temperatur"
        data-minvalue="auto"
        data-maxvalue="auto"
        data-style='["ftui l0","ftui l2","ftui l2","ftui l1","ftui l3","ftui l4","ftui l5","ftui l6"]'
        data-columnspec='["OWX_28_FF93176F1801:temperature","OWX_28_01D06E1E1901:temperature","OWX_28_AD9E7D1E1901:temperature","OWX_28_9ECD121E1901:temperature","OWX_28_8A22741E1901:temperature","OWX_28_448D721E1901:temperature","OWX_28_E2407B1E1901:temperature","OWX_28_3BB8621E1901:temperature"]'
        data-daysago_start="1"
        data-daysago_end="-1"
        data-yunit="°C"
        data-height="92%"
        class="fullsize"</div>


Ich habe heute auch noch weitere Diagramme erstellt, hier tritt das Problem ebenfalls auf.

Kann es an der Auflösung von dem Tablet liegen (10,6zoll / 1920 x 1080)? Habe insgesamt 3 Tablets im Haus verteilt, ausgerechnet bei diesen funktioniert es nicht.
Selbst auf meinem Redmi Note 4x wird das Diagramm korrekt dargestellt.

Kann man in der ftui_chart.css oder widget_chart.js noch etwas ändern?
Ich bin jetzt mit meinem Latein am Ende...


Hier noch der Code der ganzen Seite auf dem das Diagramm definiert ist:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
* -   Schalter mit Label: Breite: 3 Felder / Höhe: 3 Felder

Ebene 3

wegen Pagebutton-Untermenü:
Ebene 1: Breite: 30 Felder / Höhe: 18 Felder
Ebene 2:    Breite: 28 Felder / Höhe: 18 Felder
Ebene 3:    Breite: 26 Felder / Höhe: 18 Felder
Ebene 4:    Breite: 24 Felder / Höhe: 18 Felder

  -->

</head>
<body>
  <div class="page" id="heating_etage_temp">
    <div class="gridster">
    <ul>

      <li data-row="1" data-col="1" data-sizex="4" data-sizey="18">
        <header><div data-type="label" class="medium orange">Temperaturen</div></header>
        <div class="inline">Aussen: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_FF93176F1801"    data-get="temperature"  data-color="white"  data-unit="°C"  data-fix="1" class="inline"></div>
      </br></br>
        <div class="inline">Solar Vorlauf: &nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_01D06E1E1901"   data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>
      </br></br>
        <div class="inline">WP Vorlauf: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_AD9E7D1E1901"   data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>
      </br></br>
        <div class="inline">WW oben: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_9ECD121E1901"   data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>
      </br></br>
        <div class="inline">WW unten: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_8A22741E1901"    data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>
      </br></br>
      <div class="inline">Puffer: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_448D721E1901"    data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>
      </br></br>
      <div class="inline">SP mitte: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_E2407B1E1901"    data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>
      </br></br>
      <div class="inline">SP unten: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
        <div data-type="label" data-device="OWX_28_3BB8621E1901"    data-get="temperature"  data-color="white"  data-unit="°C" data-fix="1"  class="inline"></div>

      </li>

      <li data-row="4" data-col="13" data-sizex="22" data-sizey="18">
        <header><div data-type="label" class="medium orange">Diagramm Temperaturen</div></header>
      </br>
        <div data-type="chart"
        data-device='["OWX_28_FF93176F1801","OWX_28_01D06E1E1901","OWX_28_AD9E7D1E1901","OWX_28_9ECD121E1901","OWX_28_8A22741E1901","OWX_28_448D721E1901","OWX_28_E2407B1E1901","OWX_28_3BB8621E1901"]'
        data-logdevice="DBLOG_SQLite"
        data-logfile="HISTORY"
        data-ptype="lines"
        data-legend='["Aussen","Solar Vorlauf","WP Vorlauf","WW oben","WW unten","Puffer","SP mitte","SP unten"]'
        data-ytext="Temperatur"
        data-minvalue="auto"
        data-maxvalue="auto"
        data-style='["ftui l0","ftui l2","ftui l2","ftui l1","ftui l3","ftui l4","ftui l5","ftui l6"]'
        data-columnspec='["OWX_28_FF93176F1801:temperature","OWX_28_01D06E1E1901:temperature","OWX_28_AD9E7D1E1901:temperature","OWX_28_9ECD121E1901:temperature","OWX_28_8A22741E1901:temperature","OWX_28_448D721E1901:temperature","OWX_28_E2407B1E1901:temperature","OWX_28_3BB8621E1901:temperature"]'
        data-daysago_start="1"
        data-daysago_end="-1"
        data-yunit="°C"
        data-height="92%"
        class="fullsize"</div>


      </li>

    </ul>
    </div>
  </div>
</body>
</html>



Kann eventuell "Gridster" das Problem sein?


Gruß

Johannes

[eki]

Ich habe das versucht nachzuvollziehen. Geht natürlich nur teilweise, und bei mir ist das Verhalten nicht zu sehen. Daher auch schwer zu untersuchen.
Wenn Du die Möglichkeit hast, hier das HTML, das durch FTUI erzeugt wird (also das was nach all den javascript Aktionen entsteht) hier zu posten, könnte ich da noch mal drauf schauen, keine Ahnung ob und wie das geht.

[eki]

Kannst Du mal schauen, ob dein Problem das Gleiche wie das unter:
https://forum.fhem.de/index.php/topic,104612.msg986832.html#msg986832
Beschriebene ist?