FTUI Neue Version chart_widget

[MichaelT]

Hallo eki,


Ich hab mal ne Frage.
Ich habe mehrere Charts in unterschiedlichen Popups eingebaut. Die Werte kommen aus dblog. Nun habe ich bemerkt, dass ftui auch bei geschlossenem Popup recht träge war. Nachdem ich die Charts entfernt habe, war ftui wiedrr flott.

Werden die charts auch bei geschlossenem popup aktualisiert?

Bei meinem alten nexus 7 geht sogar im Problemfall der akku trotz ladegerät leer.

Info: Die Eventrate im dblog ist schon recht hoch.


Gruß Michael

[eki]

Hallo Michael,

Hier das Verhalten, wie es gedacht ist, und zumindest bei meiner Windows Testumgebung auch nachvollziehbar ist:

Sofern Du data-device für die Charts gesetzt hast, wird bei jeder Änderung eines Parameters des devices ein update für das chart widget ausgelöst (das ist ftui Grundfunktion, und funktioniert bei allen widgets so). Falls Du kein data-device gesetzt hast, gibt es auch keine automatischen Updates und das Chart wird nur dann gezeichnet, wenn es erstellt wird (siehe unten) oder wenn bei geöffnetem Chart irgendeiner der Buttons zum Zoomen oder Verschieben betätigt wird.
Die popup Charts "schlafen" bis sie das erste mal aufgerufen werden (per klick auf das entsprechende Label, Button, etc.). Erst dann wird das Chart wirklich angelegt und gezeichnet (ich habe jetzt festgestellt, dass alle bis dahin aufgelaufenen updates jeweils zu einem Neuzeichnen führen, was natürlich quatsch ist, da muss ich noch mal forschen). Solange dann das Popup sichtbar ist, führen Updates zum Neuzeichnen. Wenn das Popup danach wieder unsichtbar gemacht wird, laufen die Updates zwar beim Chart Widget ein, führen aber nicht zum Neuzeichnen. Wenn das Popup Chart dann das nächste Mal sichtbar wird, führen die Updates auch wieder zum Neuzeichnen.

Um Dein Problem mal einzugrenzen, wäre es sinnvoll, wenn Du mal die data-device settings bei den Charts herausnimmst, und beobachtest, ob das Verhalten dann anders ist.

[MichaelT]

Danke für die Info,

schau ich mir nochmal genauer an.

Gruß
Michael

EDIT:
Hab es nun mit data-device eingebaut. Alle 2 Minuten eine Event. Enorme Verbesserung!

[schmimat]

Hallo,

danke erstmal für die tolle Arbeit.

Ich hab jetzt mein Chart so erzeugt, wie ich es mir vorstelle. (Y-Achse und sec-Y-Achse "gleiche Achsen"; siehe Bild)

Code Auswählen Erweitern


data-yunit=" °C"
data-ytext="Temperatur [°C]"
data-minvalue="-17,5"
data-maxvalue="27,5"
        data-yticks='[[-15,-15],[-10,-10],[-5,-5],[0,0],[5,5],[10,10],[15,15],[20,20],[25,25]]'
data-y_margin='["5","10"]'
        data-yunit_sec=" %"
data-ytext_sec="Prozent [%]"
        data-minvalue_sec="-5"
data-maxvalue_sec="105"
data-yticks_sec='[[0,0],[25,25],[50,50],[75,75],[100,100]]'


Leider werden am Curser nur im Bereich 0 bis -5 die "wahren Werte" dargestellt.
Es wird auch die

Code Auswählen Erweitern

data-yunit nicht angezeigt.

Wo liegt das Problem ?

Vielen Dank für eure Bemühungen

mfG Matthias

[eki]

Bitte ändere mal die arrays für yticks folgendermaßen:

Code Auswählen Erweitern


data-yticks='["[-15,-15]","[-10,-10]","[-5,-5]","[0,0]","[5,5]","[10,10]","[15,15]","[20,20]","[25,25]"]'
data-yticks_sec='["[0,0]","[25,25]","[50,50]","[75,75]","[100,100]"]'


[schmimat]

Hi,

danke für die schnelle Antwort.

Die Werte am Curser gehen. Die Legenden sind blank.

mfG Matthias

[eki]

Die Legende soll nur einen Hinweis darstellen, was die verschiedenen Linie bedeuten (und beim Klick auf die Texte können die einzelnen Linien aus- und eingeblendet werden). Hier ist nicht beabsichtigt auch aktuelle Werte darzustellen.

[schmimat]

Hi,

sorry, nicht die Legende ist blank, sondern die Beschriftung der y-Achsen.

In der ursprünglichen Version (ohne "") wird die Beschriftung der y-Achse angezeigt, jedoch ohne Unit (-10, statt -10 °C ),

Mit "auto" wird die Unit

Code Auswählen Erweitern

data-yunit=" °C" korrekt an der Y-Achsenbeschriftung angezeigt

mfG Matthias

[eki]

OK, ich habe mich jetzt noch mal etwas intensiver mit dem Thema yticks beschäftigt (ist schon recht lange her, dass ich das eingebaut hatte und ich hatte gar nicht mehr alle Variante auf der Pfanne  ).
Es gibt im Prinzip 4 Varianten (gilt für yticks und yticks_sec gleich):

• data-yticks = 'auto'
  Das erklärt sich hoffentlich von selbst, das widget kümmert sich selbst um die Einteilung der y-Achse
• data-yticks = einfacher Zahlenwert
  Der Wert gibt den Abstand zwischen den einzelnen Linien und Beschriftungen an. Begonnen wird beim Minimalwert, der Abstand ist immer gleich
• data-yticks = Eindimensionales Array (z.B. '[-15,-10,-5,-3,-2,0]')
  Es werden Linien und Beschriftungen and den jeweils vorgegebenen y Werten gesetzt. Dadurch können unterschiedliche Abstände und ein Beginn nicht beim Minimum realisiert werden.
• data-yticks = Zweidimensionales Array (z.B. '[[0,"offen"],[1,"zu"]]')
  Zusätzlich zu der Angabe der y Werte an denen eine Linie und Beschriftung erfolgen soll, wird ein Mapping definiert, welches die y-Werte auf beliebige Strings mappt. An der Achse und am Cursor wird dann jeweils der gemappte String dessen Mapping Wert dem wahren Wert am nächsten liegt angezeigt.

Soweit ich Deinen Ansatz verstehe, würde für Dich also am ehesten der 3. Fall in der Liste gelten. Allerdings habe ich beim Ausprobieren hier noch einen Fehler festgestellt, der genau dann zuschlägt, wenn eine 0 in der Liste der Werte des Arrays enthalten ist. Ich habe den Fehler korrigiert, und die korrigierte Version hier angehängt. Bitte teste das mal (einfach die datei ins js Verzeichnis kopieren und vor dem Testen den Cache des Browsers löschen). Falls es OK ist würde ich es dann als neue "offizielle" Version freigeben (da sind auch noch einige andere inzwischen festgestellte Korrekturen enthalten).
[/list]

[schmimat]

Hi,

Danke für die Infos und die Arbeit.
Die Probleme mit fhem-tablet-ui-user.css und den data-yticks sind jetzt behoben. (fast)

Gibt es die Möglichkeit der Nachkommestellen bei der 3. Variante zu verändern?

Leider wird das Chart mit der neuen Funtion

Code Auswählen Erweitern

if (!$.fn.visibilityChanged) ... im Popup Dialog nicht immer (oft nicht) angezeigt.

Fehler in Console:

Code Auswählen Erweitern


TypeError: elem.visibilityChanged is not a function


Liegt es vielleicht daran?

- Departure: Auto refresh nach Popup öffnen oder Seitenwechsel mit Pagebutton

https://forum.fhem.de/index.php/topic,65604.0.html

Code Auswählen Erweitern


<div data-type="popup" data-height="550px" data-width="650px" data-mode="fade" data-draggable="true">
    <div data-type="link" class="large thin">Show Chart</div>
    <div class="dialog">
    <header class="small">Chart Wohnzimmer</header>
    <div data-type="chart"
                        data-height="500px" data-width="600px"
        data-device="EG.WZ.RT"
data-logdevice="logdb"
        data-logfile="HISTORY"
data-columnspec='["EG.WZ.RT:actuator","EG.WZ.RT:measured-temp","EG.WZ.RT:desired-temp","GA.VO.TH:temperature"]'
data-style='["ftui l1","ftui l0","ftui l2","ftui l5"]'
data-ptype='["steps","steps","steps","steps"]'
data-uaxis='["secondary","primary","primary","primary"]'
data-legend='["Ventil Pos.","Ist Temp.","Soll Temp.","Aussen Temp."]'
data-xticks="auto"
data-xticks_round="h"
data-xticks_angle="45"
data-yunit=" °C" data-ytext="Temperatur [°C]"
data-minvalue="-17,5" data-maxvalue="27,5"
data-yticks='[-15,-10,-5,0,5,10,15,20,25]'
data-y_margin='["5","10"]'
data-yunit_sec=" %" data-ytext_sec="Prozent [%]"
data-minvalue_sec="-5" data-maxvalue_sec="105"
data-yticks_sec='[0,25,50,75,100]'
data-daysago_start="48h" data-daysago_end="0h"
data-nofulldays="true"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true">
    </div>
</div>
</div>


Vielen Dank für Deine Bemühungen

mfG Matthias

[eki]

Bei den Nachkommastellen war noch ein Fehler (sollten eigentlich immer maximal 2 sein). Ich habe das jetzt angepasst (siehe Anhang) und einen zusätzlichen Parameter "data-cursor_digits" eingebaut (defaultmäßig auf 5), mit dem man das einstellen kann.

Das 2. Problem kann ich bei mir leider nicht nachvollziehen. Bei mir klappt das mit den Popups zuverlässig. Den Hinweis mit Departure verstehe ich nicht (dass Departure jetzt irgendwie automatisch aktualisiert wird hat doch nichts mit Chart zu tun oder?!). Um das einzukreisen, bräuchte ich noch ein paar Zusatzinfos (z.B. einen kompletten Konsolenauszug um zu sehen was da alles davor und danach passiert, oder etwas mehr zu deiner Definition der Seite). Der Teil mit "if (!$.fn..." ist ja nicht wirklich neu. Ich habe das was da in der Version 2.4 enthalten war einfach nur dahingehend geändert, dass geschaut wird, ob die visibilityChanged Funktion schon da ist damit das nicht zig mal überschrieben wird.

[schmimat]

Das Chart wird bei mir jetz super angezeigt.

Danke.

Leider funktioniert das ganze bei mir noch nicht im Popup. Bin noch am Fehler suchen.
Der Hinweis mit dem Departure ist, beim nochmaligen nachdenken, nicht sinnvoll.

Im Anhang ein Auszug der Console mit verbose=6

Hier der Aufbau meiner Seiten:

index_flex.html

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.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)
     *
     * Example for a flexbox layout instead of gridster
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="toast" content="0">
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
   
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

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

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>
<body>
<nav class="menu">
<div class="menu-trigger"></div>
<header class="">Menu</header>
<ul>
    <li>
        <div data-type="link" data-url="#myftui_flex/content_eg.html"
        data-color="white"
        data-width="85"
        data-load="#content_eg"
        data-text-align="left"
        data-active-pattern="(.*/||.*#myftui_flex/content_eg.html)"
        data-icon="oa-control_building_s_eg" class=" large"><span>EG</span></div>
    </li>
<li>
        <div data-type="link" data-url="#index_flex_demo.html"
        data-color="white"
        data-width="85"
        data-load="#content1_kg"
        data-text-align="left"
        data-active-pattern="(.*/||.*#index_flex_demo.html)"
        data-icon="oa-control_building_s_kg" class=" large"><span>KG</span></div>
    </li>
    <li>
        <div data-type="link" data-url="#index_flex_demo2.html"
        data-color="white"
        data-width="85"
        data-load="#content2"
        data-text-align="left"
        data-active-pattern=".*#index_flex_demo2.html"
        data-icon="fa-music" class=" large"><span>Customers</span></div>

    </li>
    <li>
        <div data-type="link" data-url="#flex_demo_footer.html"
        data-load="#demo-footer"
        data-color="white"
        data-width="85"
        data-text-align="left"
        data-active-pattern=".*#flex_demo_footer.html"
        data-icon="fa-sliders" class="large"><span>Users</span></div>

    </li>
    <li>
        <div data-type="link" data-url="#myftui_flex/content_service.html"
        data-load="#content_service"
        data-color="white"
        data-width="85"
        data-text-align="left"
        data-active-pattern="(.*/||.*#myftui_flex/content_service.html)"
        data-icon="fa-lightbulb-o" class="large">
        <span>Settings</span>
        </div>
    </li>
  </ul>
</nav>
<main>
    <div class="page" id="content_eg"></div>
    <div class="page" id="content2">
    <div class="page" id="demo-footer"></div>
    <div class="page" id="content_service"></div>
</main>
</body>
</html>


content_eg.html im Unterverzeichniss tablet/myftui_flex

Code Auswählen Erweitern


<main id="content_eg">
<header>EXAMPLE2</header>
<!-- place your widget here -->
<div data-type="chart"
data-height="500px" data-width="600px"
data-device="EG.WZ.RT"
data-logdevice="logdb"
data-logfile="HISTORY"
data-columnspec='["EG.WZ.RT:actuator","EG.WZ.RT:measured-temp","EG.WZ.RT:desired-temp","GA.VO.TH:temperature"]'
data-style='["ftui l1","ftui l0","ftui l2","ftui l5"]'
data-ptype='["steps","steps","steps","steps"]'
data-uaxis='["secondary","primary","primary","primary"]'
data-legend='["Ventil Pos.","Ist Temp.","Soll Temp.","Aussen Temp."]'
data-xticks="auto"
data-xticks_round="h"
data-xticks_angle="45"
data-yunit=" °C" data-ytext="Temperatur [°C]"
data-minvalue="-17,5" data-maxvalue="27,5"
data-yticks='[-15,-10,-5,0,5,10,15,20,25]'
data-y_margin='["5","10"]'
data-yunit_sec=" %" data-ytext_sec="Prozent [%]"
data-minvalue_sec="-5" data-maxvalue_sec="105"
data-yticks_sec='[0,25,50,75,100]'
data-daysago_start="48h" data-daysago_end="0h"
data-nofulldays="true"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true">
</div>
<div data-type="popup" data-height="440px" data-width="430px"  data-mode="fade" data-draggable="false">
    <div>
        <header>Thermostat Wohnzimmer</header>
        <div data-type="thermostat"
            data-device="EG.WZ.RT_Clima"
            data-get="desired-temp"
            data-step="0.1"
              data-temp="measured-temp"
              data-valve="ValvePosition"
              class="readonly">
        </div>
    </div>
        <div class="dialog" style="overflow: hidden;">
        <header class="small">Thermostat Wohnzimmer</header>
            <div data-type="thermostat"
                 data-device="EG.WZ.RT_Clima"
                 data-get="desired-temp"
                 data-set="desired-temp"
                 data-step="0.1"
                 data-temp="measured-temp"
                 data-valve="ValvePosition"
                 class="tall top-space">
</div>
        <div class="inline top-narrow-2x">
        <div data-type="push"
                 data-device="EG.WZ.RT_Clima"
                 data-set="controlMode"
                 data-set-on="manual"
                 data-set-off="!manual"
                 data-on-color="#333"
                 data-off-color="#333"
                 data-on-background-color="#aa6900"
                 data-off-background-color="#555"
                 data-icon="oa-sani_heating_manual"
                 data-background-icon="fa-square"
                 class="big top-narrow-2x" alt="foo">
        </div>
        <div data-type="label" class="top-space darker">Manuell</div>
            </div>
          <div class="inline top-narrow-2x">
        <div data-type="push"
                 data-device="EG.WZ.RT_Climate"
                 data-set="controlMode"
                 data-set-on="auto"
                 data-set-off="!auto"
                 data-on-color="#333"
                 data-off-color="#333"
                 data-on-background-color="#aa6900"
                 data-off-background-color="#555"
                 data-icon="oa-sani_heating_automatic"
                 data-background-icon="fa-square"
                 class="big top-narrow-2x" alt="foo">
            </div>
            <div data-type="label" class="top-space darker">Automatik</div>
        </div>
</div>
</div>
<div data-type="popup" data-height="550px" data-width="650px" data-mode="fade" data-draggable="false">
    <div data-type="link" class="large thin">Show Chart</div>
    <div class="dialog">
<header class="small">Chart Wohnzimmer</header>
<div data-type="chart"
data-height="500px" data-width="600px"
data-device="EG.WZ.RT"
data-logdevice="logdb"
data-logfile="HISTORY"
data-columnspec='["EG.WZ.RT:actuator","EG.WZ.RT:measured-temp","EG.WZ.RT:desired-temp","GA.VO.TH:temperature"]'
data-style='["ftui l1","ftui l0","ftui l2","ftui l5"]'
data-ptype='["steps","steps","steps","steps"]'
data-uaxis='["secondary","primary","primary","primary"]'
data-legend='["Ventil Pos.","Ist Temp.","Soll Temp.","Aussen Temp."]'
data-xticks="auto"
data-xticks_round="h"
data-xticks_angle="45"
data-yunit=" °C" data-ytext="Temperatur [°C]"
data-minvalue="-17,5" data-maxvalue="27,5"
data-yticks='[-15,-10,-5,0,5,10,15,20,25]'
data-y_margin='["5","10"]'
data-yunit_sec=" %" data-ytext_sec="Prozent [%]"
data-minvalue_sec="-5" data-maxvalue_sec="105"
data-yticks_sec='[0,25,50,75,100]'
data-daysago_start="48h" data-daysago_end="0h"
data-nofulldays="true"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true">
</div>
</div>
</div>
</main>


[eki]

So, kaum hat man die richtigen Infos wirds auch klarer. Probiers mal mit der anghängten Version (lag wohl am draggable, da war noch ein blöder Fehler im Code).

[schmimat]

Super, klappte perfekt. 

Vielen Dank.

mfG Matthias

[eki]

Es gibt eine neue Version (siehe Anfang dieses Threads).