Hauptmenü

Tablet-UI

Begonnen von dieterpau, 24 September 2018, 00:41:52

Vorheriges Thema - Nächstes Thema

dieterpau

Hallo zusammen,
ich benutze das Tablet-UI zur Bereitstellung einer Benutzeroberfläche für meine Haussteuerung mit fhem. Zur Anzeige von grafischen Darstellungen benutze ich das Widget chart. Verschiedene Parameter funktionieren nicht wie erwartet und im Wiki Tablet-UI angegeben.
z.B. data-maxvalue, data-minvalue: für eine dynamische Anpassung der Darstellung kann hier ein <device>:<reading> angegeben werden. Funktioniert nicht.
Die horizontalen Hilfslinien können mit data-yticks_prio auf die primary bzw. secondary Y-Achse ausgerichtet werden. Funktioniert nicht.
Hat jemand Erfahrung hinsichtlich der Verwendung chart-Parameter ?

eki

#1
Hallo, da ich das Chart Widget gebaut habe, kann ich wohl am besten helfen.

Erkläre mal etwas genauer was Du machst (am besten mit einem Beispiel Deiner FTUI Konfiguration) und was Du möchtest. Mit 'funktioniert nicht' alleine kann ich leider nichts anfangen. Außerdem wäre es gut zu wissen, welche Version Du verwendest (wann hast Du das letzte Update gemacht).

dieterpau

Hallo,
vielen Dank erstmal für deine Antwort. Ich habe heute nochmal das letzte update gemacht entsprechend der Beschreibung im wiki Fhem-Tablet-UI.
Ich habe ein Chart in dem 2x Lufttemperatur (primary Y-Achse) und einmal die Luftfeuchtigkeit (secondary Y-Achse) dargestellt werden. Die Hilfslinien sollen an der primary Y-Achse ausgerichtet werden, was nur funktioniert, wenn im Array data-uaxis primary als letztes genannt wird. Dann werden aber die Temperaturkurven durch die Fläche Luftfeuchtigkeit verdeckt.
Die Konfiguration des Chart-Widgets ist wie folgt;
   <div class="text.axes caption top-space-7"
        data-type="chart"
        data-device="ga_Aussenthermostat"
        data-logdevice='["FileLog_ga_Aussenthermostat","FileLog_Bodenfeuchte_Sensor","FileLog_ga_Aussenthermostat"]'
        data-logfile='["-","-","-"]'
        data-columnspec='["4:T","4:Bodenfeuchte_Sensor_T2:temperature","6:H"]'
        data-style='["ftui l2","ftui l0","ftui l5fill"]'
        data-ptype='["lines","lines","lines"]'
        data-uaxis='["primary","primary","secondary"]'
        data-legend='["Temperatur Balkon", "Temperatur Gartenhaus","Luftfeuchtigkeit"]'
        data-legendpos='["top","right"]'
        data-yticks_prio="primary"
        data-yunit="°C"
        data-ytext="Temperatur"
        data-minvalue="0"
        data-maxvalue="40"
        data-yticks="5"
        data-yunit_sec=" %"
        data-ytext_sec="Luftfeuchtigkeit"
        data-minvalue_sec="0"
        data-maxvalue_sec="100"
        data-xticks="auto"
        data-nofulldays="true"
        data-daysago_start="0"         
        data-daysago_end="-1"         
        data-timeformat="hh:mm\LF\dd"
        data-showlegend="false"
        data-cursorgroup="1"
        data-scrollgroup="1"
        data-height="350px"
        data-width="720px">
    </div>
In einem weiteren Chart zeige ich die Bodenfeuchtigkeit im Garten an. Hier wollte ich die Skalierung der primary Y-Achse dynamisch gestalten über die Parameter data-minvalue und date-maxvalue. Ich habe ein  "<device>:<reading>" als Parameter angegeben. Das device ist ein Homeatic Device, im Bereich der Readings habe ich den Max- und Min-Value definiert. Hier meine Konfiguration:
Device:  Bodenfeuchte_Sensor

Readings
Activity                     alive              2018-09-25 10:49:41
CommandAccepted      yes              2018-06-30 13:17:53
D-firmware             1.2              2018-06-29 16:14:43
D-serialNr                     OEQ0801395   2018-06-29 16:14:43
PairedTo                     0x1FB23E           2018-06-30 13:17:53
R-burstRx                     off              2018-05-20 12:27:17
R-cyclicInfoMsgDis          0              2018-05-20 12:27:17
R-pairCentral             0x1FB23E           2018-05-20 12:27:17
R-paramSel             T1_T2      2018-05-20 12:27:17
RegL_00.                     01:00 02:01 0A:1F 0B:B2 0C:3E 11:00 18:00 1B:03 00:00   2018-06-30 13:17:53
battery                ok              2018-09-25 11:19:46
chart_maxvalue      50              2018-09-23 23:54:33
chart_minvalue      0              2018-09-23 23:55:06
rssi_at_HMUART      -84              2018-09-25 11:19:46
state                CMDs_done   2018-06-30 13:17:57

Das Chart-Widget ist wie folgt definiert:
  <div class="text.axes caption top-space-7"
        data-type="chart"
        data-device="Bodenfeuchte_Sensor_T1"
        data-logdevice="FileLog_Bodenfeuchte_Sensor"
        data-logfile="-"
        data-columnspec='["4:Bodenfeuchte_Sensor_T1:temperature"]'
        data-style='["ftui l5fill"]'
        data-ptype='["lines"]'
        data-uaxis='["primary"]'
        data-legend='["Bodenfeuchtigkeit"]'
        data-legendpos='["top","right"]'
        data-yunit=""
        data-ytext="Feuchtigkeitswert"
        data-minvalue="Bodenfeuchte_Sensor:chart_minvalue"
        data-maxvalue="Bodenfeuchte_Sensor:chart_maxvalue"
        data-yunit_sec=""
        data-ytext_sec=""
        data-minvalue_sec=""
        data-maxvalue_sec=""
        data-xticks="auto"
        data-yticks="10"
        data-nofulldays="true"
        data-daysago_start="0"         
        data-daysago_end="-1"         
        data-timeformat="hh:mm\LF\dd"
        data-showlegend="false"
        data-cursorgroup="1"
        data-scrollgroup="1"
        data-height="350px"
        data-width="720px">
    </div>

Ich hoffe ich habe dir ausreichend Info gegeben um weitere Analysen durchführen zu können.

eki

Das funktioniert bei mir beides einwandfrei (ich habe mir dummy devices in FHEM mit Deinen Namen angelegt, und ansonsten exakt Deine Definition verwendet).

Kannst Du mal bitte schauen, welche Versionsnummer oben in der Datei widget_chart.js steht, und prüfen, ob der Pfad zu fhem_tablet_ui.js in Deinem HTML der richtige ist.

dieterpau

Die Datei widget_chart.js liegt im Verzeichnis /opt/fhem/www/tablet/js .In der Datei ist keine Versionsnummer angegeben. Die Datei hat eine Größe von 185,1kB und die letzte Änderung ist vom 01.11.2016 16:20 .
Die Datei fhem-tablet-ui.js ( übrigens bei mir mit - und nicht mit _ geschrieben) befindet sich im gleichen Verzeichnis wie die widget_chart.js . In der index.html wird wie folgt referenziert:
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js" defer></script>

dieterpau

Ich habe heute morgen noch ein update wie folgt durchgeführt. Eingabe in die Fhem Befehlszeile:
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Danach hat sich die Darstellung der Oberfläche in einigen Punkten geändert, so dass ich jetzt nacharbeiten muss und schauen muss woran es liegt.
Die widget_charts.js Datei hat jetzt einige Kommentarzeilen am Anfang und die Versionsangabe 2.7 .
Mein Chart Außentemperatur/Luftfeuchtigkeit zeigt zwar die Kurven an aber keine Achsenbeschriftung, ebenso werden alle anderen Charts ohne Achsenbeschriftung dargestellt.

eki

Die Version müsste passen. Vielleicht versuchst Du mal für alle Werte data-minvalue(_sec), data-maxvalue(_sec) und data-yticks(_sec) jeweils zum Testen "auto" zu setzen.

dieterpau

Nachdem ich den upgrade durchgeführt habe funktioniert sowohl die Ausrichtung der Hilfslinien zu der gewünschten y-Achse wie auch die Angabe eines Readings bei den Attributen data_maxvalue und data_minvalue.
Also alles ok. Danke für die Unterstützung.