FTUI Neue Version chart_widget

Stril · 23 Oktober 2016, 06:50:49

Hallo!

Ich habe leider auch ein Problem mit dem Chart-Widget:
Ein Chart, das einen Dummy zeigt, aktualisiert nicht. Angezeigt wird ein Dummy, der in einen Filelog geschrieben wird.

Das Eigenartige: Aktualisiere ich den Dummy, wird in FHEM ein Event generiert, aber dieses Event dann nicht im TabletUI-Eventmonitor angezeigt. Auch der Shortpoll hilft nicht. Ich muss den Browser aktualisieren.
Packe ich den Dummy als Label in TabletUI, wird er perfekt per Longpoll aktualisiert.

Habt ihr dazu eine Idee?

Code Auswählen


<div class="normal"
        data-type="chart"
        data-logdevice='["FileLog_sA_Bodenfeuchte"]'
        data-columnspec='["3:sA_Bodenfeuchte.*::"]'
        data-style='["ftui l0fill"]'
        data-ptype='["lines"]'
        data-uaxis='["primary"]'
        data-legend='["Bodenfeuchte"]'
        data-yunit="%"
        data-ytext="Bodenfeuchte"
        data-minvalue="auto"
        data-maxvalue="auto"
        data-height="200"
        data-yticks="auto"
        data-minvalue_sec="auto"
        data-maxvalue_sec="auto"
        data-nofulldays="true"
        data-daysago_start="0"
        data-cursorgroup="1"
        data-scrollgroup="1"
        data-xticks="auto">
</div>

--> wird nicht aktualisiert

Code Auswählen


<div data-type="label"
             data-device="sA_Bodenfeuchte"
             data-get="state"
             data-unit=" %"
             class="inline">
</div>

--> wird aktualisiert

Grüße
Phil

Stril · 25 Oktober 2016, 11:27:29

Hallo!

Hat noch jemand eine Idee, wie ich die Aktualisierung irgendwie einstellen kann?

Danke und Grüße
Phil

eki · 26 Oktober 2016, 09:48:07

Ja, habe ich

. Wie ich schon weiter vorne beschrieben habe, klappt das mit der Aktualisierung nur dann, wenn Du zusätzlich zu dem Logdevice noch eine Zeile mit data-device = ... einfügst. In dieser Definition muss dann das Device (nicht das Logdevice) angegeben werden, welches die Events generiert, die das Logfile füllen (in Deinem Fall also der Dummy). Blöderweise generiert eine Aktualisierung der Infos im Logdevice anscheinend keine Events die eine Antwort auf das longpoll aus FHEM heraus triggern.

Stril · 26 Oktober 2016, 10:17:22

Hallo Eki!

Danke für die Antwort.
Ich habe das data-device hinzugefügt, die aktuellste Version des Chart-Widgets genommen und das Update wird getriggert. Dafür wird der Plot meist erst nach einem Reload angezeigt. Vorher ist der Plot einfach nicht vorhanden.

Hast Du dazu auch noch einen Ansatz? Das Ganze betrifft alle meine Plots. Sie werden einfach nicht zuverlässig beim ersten Versuch angezeigt.

Danke und Grüße
Phil

eki · 26 Oktober 2016, 12:48:47

So auf Anhieb habe ich keine Antwort. Sind das "normale" plot widgets oder popups? Was heißt denn Die Plots werden "erst beim reload" dargestellt. Du rufst Die Seite doch mehr oder weniger immer durch einen "reload" auf. Oder meinst Du dass der erste Seitenaufruf grundsätzlich nichts darstellt und dann der zweite Aufruf ("reload") erst die Plots lädt.
Was ganz interessant wäre, wäre wenn Du in Deiner Index Datei mal das debug attribut setzen würdest (

Code Auswählen

<meta name="debug" content="1">) und dann die Ausgabe auf der Konsole (zur Konsole kommt man in dem meisten Browsern durch rechte Maustaste im Browser Anzeigefenster und Auswahl "Inspect Element") hier postest.

Stril · 26 Oktober 2016, 13:19:15

Hallo!

Ich habe aktuell zwei Plots auf unterschiedlichen Pagebuttons. Mal lädt einer davon, mal beide, mal keiner. Wenn ich einen Reload der ganzen Seite mache, klappt es praktisch immer, aber nicht beim ersten Versuch. Debug ist ein:

Full refresh done in 0.3s for 1471 parameters
Start Longpoll in 5s
Longpoll started

Beim "Untersuchen" sehe ich:

Code Auswählen


<div class="normal" data-type="chart" data-device="sA_Bodenfeuchte" data-logdevice="[&quot;lp&quot;]" data-logfile="CURRENT" data-columnspec="[&quot;FileLog:FileLog_sA_Bodenfeuchte,interpolate,extend=24*60*60,predict:3:sA_Bodenfeuchte.*::&quot;]" data-style="[&quot;ftui l0fill&quot;]" data-ptype="[&quot;lines&quot;]" data-uaxis="[&quot;primary&quot;]" data-legend="[&quot;Bodenfeuchte&quot;]" data-yunit="%" data-ytext="Bodenfeuchte" data-minvalue="auto" data-maxvalue="auto" data-height="200" data-yticks="auto" data-minvalue_sec="auto" data-maxvalue_sec="auto" data-daysago_start="0" data-cursorgroup="1" data-scrollgroup="1" data-xticks="auto" data-daysago_end="now" data-nofulldays="true">
<svg class="basesvg1" style="overflow: visible; width: 93%; height: 200px; display: inline;"><g id="classesContainer" stroke="grey"></g></svg></div>

...aber es bleibt schwarz.

Nach dem Reload sind dann Daten in der Ausgabe:

Code Auswählen


...
<path d="M42,189 L 42,165.60989499192198 110.07977192982456,119.72500000000022 110.792649122807,50.449999999999804 224.14012280701755,119.72500000000022 225.20943859649122,50.449999999999804 225.92231578947366,119.72500000000022 228.06094736842104,50.449999999999804 229.48670175438596,119.72500000000022 231.62533333333332,50.449999999999804 233.05108771929824,119.72500000000022 256.93247368421055,148.25000000000006 257.28891228070177,119.72500000000022 257.645350877193,189 258.0017894736842,148.25000000000006 258.0017894736842,119.72500000000022 258.0017894736842,26.000000000000217 258.71466666666663,119.72500000000022 280.4574210526316,189 280.81385964912283,119.72500000000022 326.438,119.72500000000022 L326.438,189 Z" class="ftui l0fill" style="stroke-width: 2px; fill: url(#gr_ftui0)" id="primary-graph-2-0-lines" animstate="hide" min="189" max="26" xrange="326.438"></path>

eki · 26 Oktober 2016, 13:30:22

sind die 3 Zeilen

Code Auswählen

Full refresh done in 0.3s for 1471 parameters
Start Longpoll in 5s
Longpoll started

echt alles was in der Konsole steht wenn Du im Index File debug auf 1 setzt?

Stril · 26 Oktober 2016, 13:47:56

Hallo!

Leider ja...

Grüße
Phil

eki · 26 Oktober 2016, 14:26:28

@setstate: gibt es, was die Update Funktion betrifft, ein anderes Verhalten bei Pagebutton Aufrufen der einzelnen Seiten verglichen mit einem Reload einer Setie?

setstate · 26 Oktober 2016, 16:07:49

Wenn die Unterseiten mit class="prefetch" schon im Hintergrund geladen werden, ist der Unterschied, dass das Chart nicht sichtbar ist beim Anlegen, weil der übergeordnete Container hidden ist.

Stril · 26 Oktober 2016, 21:27:39

Hallo!

Ich habe es gerade mal getestet:

OHNE Prefetch ist alles prima. Die Plots werden angezeigt.
MIT Prefetch ist es Glückssache. Mal alle Plots, mal keiner.

Hab jetzt erstmal Prefetch abgeschaltet.

Danke für den Hinweis!

Grüße
Phil

eki · 27 Oktober 2016, 08:22:18

Dann weiß ich zumindest mal woran es liegt, muss aber noch nachdenken wie ich das etwas genereller abfange (bisher habe ich nur den Popup Fall berücksichtigt).

Stril · 27 Oktober 2016, 08:50:47

Hallo!

Super!
Vielen Dank schonmal!

Grüße

netbus · 27 Oktober 2016, 12:53:33

Hi,
ich habe so ein ähnliches Phänomen.
Ich habe zwei Widgets auf einer Seite wovon eines ein simplechart und das andere ein normales chart ist. Mittels Popup wird dann ein Chart Graph geöffnet.
Nach dem die Seite geladen ist, sieht man den simplechart Graph und der chart Graph bleibt leer.
Erst wenn ich einmal auf den chart Graph clicke wird er geladen. Woran kann das liegen?

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM

     *
     * Version: 2.2.*

     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="151">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- verbose level 1-6 = output to console;0 = not output -->



    <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="lib/openautomation.css" />


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <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>FHEM-Tablet-UI</title>

</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="2" data-sizex="4" data-sizey="1">
<div data-type="popup" data-width="800px" data-heigth="600">
<div data-type="simplechart"
        data-device="AktuellerVerbrauch"
        data-logdevice="FileLog_AktuellerVerbrauch"
        data-columnspec="3:AktuellerVerbrauch.*::"
        data-yticks="500"
        data-xticks="240"
        data-width="100%"
        data-height="100%"
        data-daysago="1"
        data-minvalue="0"
        data-maxvalue="3000"
        data-caption="Stromverbrauch" class="fullsize">
    </div>
<div class="dialog">
<div class="fullsize"
                data-type="chart"
                data-logdevice='["FileLog_AktuellerVerbrauch"]'
                data-columnspec='["3:AktuellerVerbrauch"]'
                data-style='["ftui l0fill"]'
                data-ptype='["lines"]'
                data-uaxis='["primary"]'
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yticks="auto"
                data-minvalue_sec="auto"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-maxvalue_sec="auto"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-nofulldays="true"
                data-xticks="auto"
                data-height="80%"
                data-width="100%">
</div>
</div>
</div>
</li>
<li data-row="1" data-col="6" data-sizex="4" data-sizey="1">
<div data-type="popup" data-width="800px" data-heigth="600">
<div class="fullsize prefetch"
                data-type="chart"
                data-logdevice='["FileLog_Tempsensor"]'
                data-columnspec='["4:Tempsensor_T1.temperature"]'
                data-style='["ftui l0fill"]'
                data-ptype='["lines"]'
                data-uaxis='["primary"]'
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yticks="auto"
                data-minvalue_sec="auto"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-maxvalue_sec="auto"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-nofulldays="true"
                data-xticks="auto"
                data-height="80%"
                data-width="100%">
</div>
<div class="dialog">
<div class="fullsize"
                data-type="chart"
                data-logdevice='["FileLog_Tempsensor"]'
                data-columnspec='["4:Tempsensor_T1.temperature"]'
                data-style='["ftui l0fill"]'
                data-ptype='["lines"]'
                data-uaxis='["primary"]'
                data-minvalue="auto"
                data-maxvalue="auto"
                data-yticks="auto"
                data-minvalue_sec="auto"
                data-cursorgroup="1"
                data-scrollgroup="1"
                data-maxvalue_sec="auto"
                data-daysago_start="0"
                data-daysago_end="-1"
                data-nofulldays="true"
                data-xticks="auto"
                data-height="80%"
                data-width="100%">
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>

eki · 27 Oktober 2016, 15:16:19

Hallo zusammen,

könnt Ihr mit der angehängten Testversion mal testen. Ich hoffe, dass das die beiden berichteten Probleme beseitigt (das Zeichnen des Charts hängt jetzt nicht mehr am Typ sondern am "sichtbar Werden").
Die Änderung ist aber an so zentraler Stelle, dass ich darum bitte, das ausgiebig zu testen, um sicher zu stellen, dass es keine Regressionen gibt.