Chart Widget - diverse Anfängerprobleme

Stonemuc · 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...

Code Auswählen

 
<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:

Code Auswählen


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

Stonemuc · 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.

Code Auswählen


		<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>

Stonemuc · 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.

Code Auswählen

<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>

Stonemuc · 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

Code Auswählen

<!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>

MKeY · 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

Stonemuc · 24 Januar 2020, 17:53:14

Danke, dass du mal reinschaust...hier mal meine index.html

Code Auswählen

<!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>

MKeY · 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

Code Auswählen

data-width="80%" und/oder

Code Auswählen

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

Stonemuc · 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.