[FHEM-Tablet-UI] Chart

Begonnen von RoBra81, 18 Dezember 2015, 13:42:10

Vorheriges Thema - Nächstes Thema

Depechem

Zitat von: eki am 20 Januar 2016, 17:58:13
Welchen Browser verwendest Du? Kannst Du mal schauen, ob Du auf der Browser Konsole (erreicht man in der Regel über das Kontextmenu (rechte Maustaste) und den Punkt "Inspect elemet") irgendwelche Meldungen bekommst.

ich verwende Firefox auf dem Laptop.
Fehler siehe Anhang.
Ich kann damit aber nicht wirklich etwas anfangen.
RaspberryPi2 / FHEM / 3 Wand-Tablets mit Tablet UI / HM USB / verschiedene HM-Aktoren / JeeLink USB für WS1600 und mehrere LaCrosse Sensoren / HEOS ...

Depechem

ich habe es hinbekommen.
Irgendwie wurden die widgets trotz update-vorgang nicht erstellt oder aktualisiert.
Ich musste meinen Tabletordner neu erstellen und dann updaten, dannach konnte ich meine .html wieder in den Ordner schieben.
Nun funktioniert alles!!
Vielen Dank für eure Hilfe!
RaspberryPi2 / FHEM / 3 Wand-Tablets mit Tablet UI / HM USB / verschiedene HM-Aktoren / JeeLink USB für WS1600 und mehrere LaCrosse Sensoren / HEOS ...

manne44

Ich möchte mich mal hier anhängen, weil ich auch ein so schönes Diagramm haben möchte, aber nichts hin bekomme. Damit niemand eine "Glaskugel" benutzen muß, werde ich das mal alles ausführlich darstellen:
Ich habe verschiedene Log-files, die wie folgt aussehen:
2016-01-07_00:42:14 boden-temp-20cm alarm: 1
2016-01-07_00:43:15 boden-temp-20cm temperature: 0.6875
2016-01-07_00:43:15 boden-temp-20cm alarm: 1
2016-01-07_00:44:16 boden-temp-20cm temperature: 0.6875
2016-01-07_00:44:16 boden-temp-20cm alarm: 1
2016-01-07_00:44:36 boden-temp-20cm temperature: 0.75
2016-01-07_00:44:36 boden-temp-20cm alarm: 1
2016-01-07_00:45:37 boden-temp-20cm temperature: 0.6875
2016-01-07_00:45:37 boden-temp-20cm alarm: 1
2016-01-07_00:46:38 boden-temp-20cm temperature: 0.6875
2016-01-07_00:46:38 boden-temp-20cm alarm: 1
2016-01-07_00:47:39 boden-temp-20cm temperature: 0.6875

oder
2016-01-07_15:16:33 luft-temperatur alarm: 1
2016-01-07_15:17:34 luft-temperatur temperature: -5.25
2016-01-07_15:17:34 luft-temperatur alarm: 1
2016-01-07_15:18:35 luft-temperatur temperature: -5.25
2016-01-07_15:18:35 luft-temperatur alarm: 1
2016-01-07_15:19:36 luft-temperatur temperature: -5.25
2016-01-07_15:19:36 luft-temperatur alarm: 1
2016-01-07_15:20:37 luft-temperatur temperature: -5.3125
2016-01-07_15:20:37 luft-temperatur alarm: 1
2016-01-07_15:21:38 luft-temperatur temperature: -5.3125
2016-01-07_15:21:38 luft-temperatur alarm: 1
2016-01-07_15:22:39 luft-temperatur temperature: -5.25
2016-01-07_15:22:39 luft-temperatur alarm: 1
2016-01-07_15:23:40 luft-temperatur temperature: -5.25
2016-01-07_15:23:40 luft-temperatur alarm: 1

Aus vier verschiedenen Log-Dateien will ich ein Chart bauen:
<li data-row="1" data-col="2" data-sizex="20" data-sizey="4">
<header class="semitransparent">Boden/Luft-Temperaturen</header>

<div class="normal">
data-type="highchart"
    data-device='[luft.temperatur, boden.temp.20cm, boden.temp.40cm, boden.temp.60cm]'
data-logdevice='["luft-temperatur.log","boden-temp-20cm.log","boden-temp-40cm.log","boden-temp-60cm.log"]'
data-columnspec='["4:luft-temperatur_temperature","4:boden-temp-20cm_temperature","4:boden-temp-40cm_temperature","4:boden-temp-60cm_temperature"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","lines","lines","lines"]'
data-uaxis='["primary","primary","primary","primary"]'
data-legend='["Luft","20cm","40cm","60cm"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-height="250"
data-yticks="auto"
data-nofulldays="true"
data-daysago_start="2016-01-07T00:00:00"
data-daysago_end="2016-01-09T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>

Die Datei index.html sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="65">
    <meta name="widget_base_height" content="75">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1"> <!-- 1=output to console;0=not output -->

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

    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

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

    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
-->
    <!-- End for WebViewControl -->

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

    <!-- Charts Theme CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <link rel="stylesheet" href="css/styles.css"/>

    <!-- Javascript -->
    <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

    <title>FHEM-Tablet-UI</title>
</head>

Statt eines Diagramms wird der Text, der das Diagramm erzeugen soll, ausgegben. Vielleicht sieht jemand einen trivialen Fehler, was mir sehr helfen würde. Ich habe alles so nachempfunden wie ich es hier gefunden habe, aber ohne Erfolg.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

roman1528

Moin.

Finde den unterschied  ;)

Deins:

<div class="normal">
data-type="highchart"


Neu:

<div class="normal"
data-type="highchart"


Deine ganzen data-... stehen nicht in der div-definition sondern in der div selbst. das ist falsch :)

Da hat sich ein kleiner Fehlertroll eingeschlichen :)

Grüße^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

manne44

Vielen Dank für die Antwort, das erklärt auch warum der Text ausgegeben wurde. Nun habe ich das ">" entfernt, aber ein Diagramm erhalte ich noch immer nicht. Jetzt ist da ein leeres Feld.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

roman1528

Zitat von: manne44 am 06 Februar 2016, 16:56:58
Jetzt ist da ein leeres Feld.


data-columnspec='["4:luft-temperatur_temperature::int","4:boden-temp-20cm_temperature::int","4:boden-temp-40cm_temperature::int","4:boden-temp-60cm_temperature::int"]'


Warum das hier so kompliziert ist weiß ich auch nicht... Und warum man das angeben muss weiß ich auch nicht... Und was zwischen die "::" kann/wann/muss/soll weiß ich auch nicht... Steht ja nirgendwo!?! Habe ich zumindest nirgendwo gefunden.... ecki  :P

manne44: versuchs einfach weiter (mit der columnspec die ich etwas geändert habe) :)
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

manne44

RPI4-Buster mit SSD, RPI-Zero mit Bookworm

roman1528

Zitat von: manne44 am 06 Februar 2016, 17:43:42
Immer noch leeres Feld.  :'(

Nimm zum testen mal chart statt highchart. Mit highchart hatte ich nämlich auch arge Problem.

Und bei chart kann dir ecki weiter helfen  :D
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

manne44

Ich bin in diesem Thema derart unbedarft, daß mir der Unterschied von chart und highchart nicht klar ist. Ich habe einfach mal überall abgeschrieben.
Die Änderung von highchart zu chart hat nichts gebracht. Ich vermute mal, daß vielleicht in der index.html irgendein jss- oder pm-File fehlt. Aber da fehlen mir die Kenntnisse. Ich bin schon froh, daß ich meine Heizungsthermostate, Temperatursensoren, Reedrelais und Schalter richtig ansprechen und darstellen kann. Aber ein schönes Diagramm ohne Riesenaufwand wäre schon ganz schön. Ansonsten muß ich mir das selber in C programmieren.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

eki

Auf jeden Fall hast Du noch einen Fehler in der Columnspec. Die sollte mit Deinen Logwerten in etwa so aussehen:
4:luft-temperatur.temperature.:0:

Die Syntax, die übrigens nicht ich erfunden habe, sondern die notwendig ist, um die Logdaten per get von fhem abzuholen, ist genau die gleiche wie in den fhem Plots
Der erste Wert gibt an, wo in den Logzeilen der darzustellende Wert ist also hier in der vierten Spalte (Spalten sind durch Leerzeichen getrennt. Der 2. Wer ist eine "regular Expression" die angibt, welche Zeilen aus den Logzeilen ausgefiltert werden sollen. Hier stehen die Punkte für beliebige Zeichen. Der nächste Parameter gibt einen Default Wert an, falls nichts gefunden wird. Dahinter können noch bestimmte Modifier stehen, die die ausgelesenen Werte noch z.B. In Integer verwandeln.

manne44

Vielen Dank für die umfassende Antwort. Nun weiß ich endlich was da in "data-columnspec" einzutragen ist. Habe es entsprechend geändert, aber immer noch leeres Feld.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

eki

Was mir noch aufgefallen ist, die data-device Eintraege sind ohne ". Schließe die Eintraege mal in " ein.

manne44

Habe ich in " eingeschlossen, aber es wird immer noch keine Ausgabe gemacht.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

manne44

Ich habe nun mal auf eine Logdatei und einen Wert verkürzt --> kein Erfolg.
Wenn ich nun in data-minvalue und data-maxvalue statt "auto" feste Werte angebe, dann wird zumindest ein Raster gezeichnet und Cursor und Legende werden angezeigt, aber keine Kurve, egal was ich da hinein schreibe. Das scheint darauf hinzudeuten, daß die Werte nicht akzeptiert werden und es deshalb auch kein Raster geben kann, ohne Werte kein Maß für das Raster.
Auch gibt es keine Fehlermeldungen, keine Log-Einträge usw. Wie soll man denn da einen Fehler finden?

Insgesamt scheint mir diese Funktion wenig robust zu sein und kleinste Fehler führen zum NULL-Ergebnis. Schade.
RPI4-Buster mit SSD, RPI-Zero mit Bookworm

Haecksler

Hallo zusammen,
ist es mögllich beim CHART-Widget mit Dblog im columnspec Regex zu verwenden?

Ich habe folgenden Eintrag im Dblog und würden gerne den Gas Wert plotten.

2016-02-08 12:17:34: Energie_Zaehler, OWCOUNT, energy_act: Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW, energy_act, Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW,


Danke für eure Hilfe.
Gruß,
Stefan