Autor Thema: Chart Widget - diverse Anfängerprobleme  (Gelesen 245 mal)

Offline Stonemuc

  • Full Member
  • ***
  • Beiträge: 337
    • Baublog WeberHaus Citylife 500
Chart Widget - diverse Anfängerprobleme
« am: 22 Januar 2020, 06:49:39 »
Hallo Leute, da ich von HTML keine Ahnung habe, stehe ich beim Chart Widget erneut vor Problemen.
Ich habe ein Chart konstruiert, welches den Wert der Temperatur aus einem Logfile erhalten soll...allerdings funktioniert das nicht. Das Chart ist eine Sägezahnkurve...


<div class="small" data-type="chart"
data-device="TK_Schlafzimmer"
data-logdevice="FileLog_TK_Schlafzimmer"
data-logfile="-"
data-columnspec='["temperature"]'
data-legend='["Temperatur"]'
data-uaxis='["primary"]'
data-ptype='["lines"]'
data-yunit="&deg;C"
data-ytext="Temperatur"
data-style='["ftui l2"]'>
</div>               

Das Logfile sieht so aus:
2020-01-22_05:51:43 TK_Schlafzimmer T: 22.4 SP: 125 F: 3 SW: on
2020-01-22_05:51:43 TK_Schlafzimmer fanStage: 3
2020-01-22_05:51:43 TK_Schlafzimmer switch: on
2020-01-22_05:51:43 TK_Schlafzimmer setpoint: 125
2020-01-22_05:51:43 TK_Schlafzimmer temperature: 22.4
2020-01-22_06:08:22 TK_Schlafzimmer T: 22.4 SP: 125 F: 3 SW: on
2020-01-22_06:08:22 TK_Schlafzimmer fanStage: 3
2020-01-22_06:08:22 TK_Schlafzimmer switch: on
2020-01-22_06:08:22 TK_Schlafzimmer setpoint: 125
2020-01-22_06:08:22 TK_Schlafzimmer temperature: 22.4
2020-01-22_06:25:01 TK_Schlafzimmer T: 22.4 SP: 125 F: 3 SW: on
2020-01-22_06:25:01 TK_Schlafzimmer fanStage: 3
2020-01-22_06:25:01 TK_Schlafzimmer switch: on
2020-01-22_06:25:01 TK_Schlafzimmer setpoint: 125
2020-01-22_06:25:01 TK_Schlafzimmer temperature: 22.4
2020-01-22_06:41:40 TK_Schlafzimmer T: 22.3 SP: 125 F: 3 SW: on
2020-01-22_06:41:40 TK_Schlafzimmer fanStage: 3
2020-01-22_06:41:40 TK_Schlafzimmer switch: on
2020-01-22_06:41:40 TK_Schlafzimmer setpoint: 125
2020-01-22_06:41:40 TK_Schlafzimmer temperature: 22.3
« Letzte Änderung: 22 Januar 2020, 07:01:40 von Stonemuc »
FHEM aus Raspberry PI 3 B+, Haussteuerung auf EnOcean Basis, Tecalor THZ 404eco Wärmepumpe

Offline Stonemuc

  • Full Member
  • ***
  • Beiträge: 337
    • Baublog WeberHaus Citylife 500
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #1 am: 22 Januar 2020, 07:00:49 »
Außerdem hab ich das Problem, dass mir das folgende Chart mein Design zerhaut. Es hat jede Menge Platz in der Oberfläche, aber irgendwie schiebt es mir unter dem Chart eine riesen Freifläche ein, die dann das gesamte Design vergrößert und die Seite dann scrollbar wird.

<div class="small" data-type="chart"
data-device="Mythz"
data-logdevice="FileLog_Mythz"
data-logfile="-"
data-columnspec='["17:sHC1","11:sHC1"]'
data-legend='["HC1Soll-HC1Ist","Integralwert"]'
data-uaxis='["primary","primary"]'
data-ptype='["lines","lines"]'
data-ytext="K in min"
data-yunit="K"
data-style='["ftui l2","ftui l5"]'>
</div>
FHEM aus Raspberry PI 3 B+, Haussteuerung auf EnOcean Basis, Tecalor THZ 404eco Wärmepumpe

Offline Stonemuc

  • Full Member
  • ***
  • Beiträge: 337
    • Baublog WeberHaus Citylife 500
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #2 am: 22 Januar 2020, 07:04:43 »
Und das dritte Chart an dem ich mich versucht habe, gibt mir nur eine Toast Fehlermeldung unten links in der Oberfläche aus, obwohl ich es so wie das vorherige konstruiert habe.

<div class="small" data-type="chart"
data-device="Mythz"
data-logdevice="FileLog_Mythz"
data-logfile="-"
data-columnspec='["13:sGlobal","95:sGlobal","7:sGlobal","9:sGlobal","15:sGlobal","17:sGlobal","4:sGlobal","5:sGlobal"]'
data-legend='["Brauchwassertemp.","Luftfeuchtigkeit","Vorlauf","Rücklauf","HC1 Soll","HC1 Ist","Innentemp.","Außentemp."]'
data-uaxis='["primary","primary","primary","primary","primary","primary","primary","primary"]'
data-ptype='["lines","lines","lines","lines","lines","lines","lines","lines"]'
data-yunit="&deg;C"
data-ytext="Temperaturen"
data-style='["ftui l6","ftui l4","ftui l2","ftui l5","ftui l2dash","ftui l5dash","ftui l1","ftui l3",]'>
</div>
FHEM aus Raspberry PI 3 B+, Haussteuerung auf EnOcean Basis, Tecalor THZ 404eco Wärmepumpe

Offline Stonemuc

  • Full Member
  • ***
  • Beiträge: 337
    • Baublog WeberHaus Citylife 500
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #3 am: 24 Januar 2020, 11:43:13 »
So...durch jede Menge herumprobieren und andere Codes anschauen habe ich alle Chart Widgets erfolgreich erstellen können.

Allerdings besteht weiterhin ein Problem, welches ich nicht gelöst bekomme.

Die Widget Charts aus Beitrag 2 und 3 habe ich jeweils separat, sowie testweise untereinander auf einer Page eingebunden. Noch immer zerhaut es mir beim Aufruf der Seite über den Pagebutton das komplette Format bzw design. Die komplette Seite wird in Fully nach unten gestreckt. Seitlich passt alles....
Ich habe auch testweise mal das Chart in row 1 geschoben mit y-size=1, was bei mir der kompletten Seite entspricht. Trotzdem zerhaut es alles und die Seite wird größer nach unten und scrollbar...selbst die Navigationsleiste wird vergrößert und "streckt" sich...

Hier mal meine komplette Page

<!DOCTYPE html>
<html>
<head></head>
<body>
 <div class="page" id="1_THZ1-content">
    <div class="gridster">
    <ul>
   
    <li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
        <header>Heizung</header>
<div class="cell inline">
<div class="left-align">Heizkreis-Soll-Temperatur</div>
<div class="left-align">Heizkreis-Ist-Temperatur</div>
<div class="left-align">Außentemperatur</div>
<div class="left-align">Vorlauftemperatur</div>
<div class="left-align">Rücklauftemperatur</div>
<div class="left-align">Heizstufe</div>
<div class="left-align">Heizperiode</div>
<div class="left-align">Modus</div>
</div>
<div class="cell inline">
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="12" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="14" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="2" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="10" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="6" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="38"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="16"></div>
<div data-type="label" data-device="Mythz" data-get="sHC1" data-part="20"></div>
</div>
</li>
   
    <li data-row="1" data-col="4" data-sizex="3" data-sizey="3">
        <header>Warmwasser</header>   
<div class="cell inline">
<div class="left-align">Warmwassertemperatur</div>
<div class="left-align">Nachheizstufe</div>
<div class="left-align">Modus</div>
</div>
<div class="cell inline">
<div data-type="label" data-device="Mythz" data-get="sDHW" data-part="2" data-unit="%B0C%0A"></div>
<div data-type="label" data-device="Mythz" data-get="sDHW" data-part="14"></div>
<div data-type="label" data-device="Mythz" data-get="sDHW" data-part="18"></div>
</div>
    </li>
   
    <li data-row="1" data-col="7" data-sizex="3" data-sizey="3">
        <header>Status</header>   
<div class="cell inline">
<div class="left-align">Betriebsart</div>
<div class="left-align">Fehlertext</div>
</div>
<div class="cell inline top-align">
<div data-type="label" data-device="Mythz" data-get="sProgram" data-part="2"></div>
<div data-type="label" data-device="Mythz" data-get="sSystem" data-part="6"></div>
</div>
<div data-type="push" data-device="Mythz" data-icon="fa-circle-o"
data-set-on="0" data-set="ResetErrors"></div>
<div>Fehler-Reset</div>
    </li>
   
    <li data-row="4" data-col="1" data-sizex="2" data-sizey="3">
        <header>Pumpen</header>
<div data-type="symbol" data-device="Mythz" data-get="PumpeDHW" data-icon="oa-sani_pump"></div>
<div class="">Warmwasserpumpe</div>
<div data-type="symbol" data-device="Mythz" data-get="PumpeHC" data-icon="oa-sani_pump"></div>
<div class="">Heizkreispumpe</div>
</li>
  <li data-row="7" data-col="1" data-sizex="2" data-sizey="4">
        <header>erweiterte Heizungsdaten</header>
  </li>
   
    <li data-row="5" data-col="3" data-sizex="2" data-sizey="7">
        <header>Heizung</header>
<div data-type="symbol" data-device="Mythz" data-get="pOpMode"
data-states='["manual","automatic","DHWmode]'
data-icons='["oa-sani_heating_manual","oa-sani_heating_automatic","oa-sani_water_hot"]'
data-colors='["red","green","green"]'></div>
<div>Betriebsart</div>
<div data-type="symbol" data-device="Mythz" data-get="Compress" data-icon="oa-sani_garden_pump"></div>
<div>Kompressor</div>
<div data-type="symbol" data-device="Mythz" data-get="Boost1" data-icon="fs-sani_heating_boost"></div>
<div>NE Stufe 1</div>
<div data-type="symbol" data-device="Mythz" data-get="Boost3" data-icon="fs-sani_heating_boost"></div>
<div>NE Stufe 2</div>
    </li>
    <li data-row="5" data-col="5" data-sizex="5" data-sizey="7">
        <header>Verlauf</header>
<div class="small" data-type="chart"
data-device="Mythz"
data-logdevice="FileLog_Mythz"
data-logfile="-"
data-columnspec='["17:sHC1","11:sHC1"]'
data-legend='["HC1Soll-HC1Ist","Integralwert"]'
data-uaxis='["primary","secondary"]'
data-ptype='["lines","lines"]'
data-ytext="Abweichung"
data-yunit="K"
data-ytext_sec="Integral"
data-style='["ftui l2","ftui l5"]'>
</div>
<div class="small" data-type="chart"
data-device="Mythz"
data-logdevice="FileLog_Mythz"
data-logfile="-"
data-columnspec='["13:sGlobal","95:sGlobal","7:sGlobal","9:sGlobal","15:sGlobal","17:sGlobal","4:sGlobal","5:sGlobal"]'
data-legend='["Brauchwassertemp.","Luftfeuchtigkeit","Vorlauf","Rücklauf","HC1 Soll","HC1 Ist","Innentemp.","Außentemp."]'
data-uaxis='["primary","primary","primary","primary","primary","primary","primary","primary"]'
data-ptype='["lines","lines","lines","lines","lines","lines","lines","lines"]'
data-yunit="&deg;C"
data-ytext="Temperaturen"
data-style='["ftui l6","ftui l4","ftui l2","ftui l5","ftui l2dash","ftui l5dash","ftui l1","ftui l3"]'>
</div>
</li>

    </ul>
    </div>
  </div>
</body>
</html>
FHEM aus Raspberry PI 3 B+, Haussteuerung auf EnOcean Basis, Tecalor THZ 404eco Wärmepumpe

Offline MKeY

  • Full Member
  • ***
  • Beiträge: 127
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #4 am: 24 Januar 2020, 17:27:22 »
hey Stonemuc, es ist ein wenig schwierig, dir zu folgen.
Kannst du mal den code deiner index.html mit dazu packen, damit man die Größer deiner gridster Anordnung übernehmen kann?
Ein Bild könnte ggf auch helfen.

grüße
Wer Fehler findet, darf sie behalten!
RPi, D1Mini
Homematic, Hue, Sonoff, Alexa, Xiaomi, ConBee
Prusa MK2.5, Prusa MK3-MMU2S
Lowrider 2CNC

Offline Stonemuc

  • Full Member
  • ***
  • Beiträge: 337
    • Baublog WeberHaus Citylife 500
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #5 am: 24 Januar 2020, 17:53:14 »
Danke, dass du mal reinschaust...hier mal meine index.html

<!DOCTYPE html>
<html>
<head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>FHEM-Tablet-UI</title>
    <meta name="lang" content="de">
    <meta name="longpoll" content="1">
    <meta name="shortpoll_interval" content="600">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="gridster_cols" content="10"/>
    <meta name="gridster_rows" content="10"/>

    <meta name="gridster_disable" content="1">
    <meta name="gridster_margin" content="1">
 
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="10">
                <header>NAV</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell top-align">
                            <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_start.html" data-load="#1_start-content" data-active-pattern="(.*/||.*index.html||.*#1_start.html)" data-icon="fa-home" class="big default top-space"></div>
                            <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_wohnzimmer.html" data-load="#1_wohnzimmer-content" data-active-pattern=".*#1_wohnzimmer.html" data-icon="oa-scene_livingroom" class="big top-space"></div>
    <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_flur.html" data-load="#1_flur-content" data-active-pattern=".*#1_flur.html" data-icon="fs-fts_door_right_open" class="big top-space"></div>
    <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_kinder.html" data-load="#1_kinder-content" data-active-pattern=".*#1_kinder.html" data-icon="oa-scene_baby" class="big top-space"></div>
    <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_bad.html" data-load="#1_bad-content" data-active-pattern=".*#1_bad.html" data-icon="oa-scene_bathroom" class="big top-space"></div>
    <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_schlafen.html" data-load="#1_schlafen-content" data-active-pattern=".*#1_schlafen.html" data-icon="oa-scene_sleeping" class="big top-space"></div>
    <div data-type="pagebutton" data-on-background-color="#00a4fe" data-on-color="#fff" data-off-background-color="#9fa2a7" data-off-color="#fff" data-background-icon="fa-circle-thin" data-url="#1_THZ1.html" data-load="#1_THZ1-content" data-active-pattern=".*#1_THZ1.html" data-icon="oa-sani_boiler_temp" class="big top-space"></div>
                  </div>
                    </div>
                    <div class="row">
                        <div class="cell bottom-align">
                            <div data-type="clock" data-format="d.m.Y" class="large darker"></div>
                            <div data-type="clock" class="bigger darker"></div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="9" data-sizey="10">
                <div class="page" id="1_start-content"></div>
                <div class="page" id="1_wohnzimmer-content"></div>
<div class="page" id="1_flur-content"></div>
<div class="page" id="1_kinder-content"></div>
                <div class="page" id="1_bad-content"></div>
<div class="page" id="1_schlafen-content"></div>
<div class="page" id="1_THZ1-content"></div>
<div class="page" id="1_THZ2-content"></div>
            </li>
        </ul>
    </div>
</body>
</html>
FHEM aus Raspberry PI 3 B+, Haussteuerung auf EnOcean Basis, Tecalor THZ 404eco Wärmepumpe

Offline MKeY

  • Full Member
  • ***
  • Beiträge: 127
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #6 am: 25 Januar 2020, 23:18:04 »
ich denke die Mindestgröße vom Diagramm ist zu groß, aber mit der Klasse "small" bist du erstmal "am limit".
du könntest vorab noch in der chart Definition das Attribut data-width="80%" und/oder data-height="80%" setzen.
Weiß nicht ob dir das was hilft, viel tiefer bin ich nicht drin, da ich die Grafen von Grafana cooler finde
Wer Fehler findet, darf sie behalten!
RPi, D1Mini
Homematic, Hue, Sonoff, Alexa, Xiaomi, ConBee
Prusa MK2.5, Prusa MK3-MMU2S
Lowrider 2CNC

Offline Stonemuc

  • Full Member
  • ***
  • Beiträge: 337
    • Baublog WeberHaus Citylife 500
Antw:Chart Widget - diverse Anfängerprobleme
« Antwort #7 am: 26 Januar 2020, 12:24:51 »
Mittlerweile bin ich selbst auf die Lösung gestoßen bzw. das Problem bei der Integration vom Chart Widget.
Im Tablet-UI Kurs von Matthias Kleine wird darauf hingewiesen, dass in der ftui_chart.css in den ersten zwei Zeilen ein Import der svg styles gemacht wird. Dieser verwirft wohl irgendwie die Einstellungen...
Wenn man diese Zeile löscht, werden die Charts richtig angezeigt.
FHEM aus Raspberry PI 3 B+, Haussteuerung auf EnOcean Basis, Tecalor THZ 404eco Wärmepumpe