[FHEM-Tablet-UI] User-Demos

eki · 14 November 2015, 22:12:41

Hallo Michael,

Dann schick dich mal ein Stueck Logfile, dann kann ich mal versuchen zu debuggen.

MichaelT · 15 November 2015, 09:37:48

Hallo eki,

danke das Du mich unterstützt. Wenn ich bei mir was schauen soll, sag Bescheid. Ggf. hängt es ja mit meine Konfiguration in fhem zusammen.

wkarl · 15 November 2015, 13:26:11

Hallo eki,

kann ich zwei Graphen in einen Popup-Dialog darstellen?

ciao Walter

Zitat von: eki am 07 November 2015, 17:32:04
Hier sind die Änderungen mit denen jetzt auch popup funktonieren sollte.

eki · 15 November 2015, 19:48:20

hallo Walter,

meinst Du 2 charts oder zwei graphen in einem chart? Es muesste beides funktionieren. Selbst getestet habe ich nur mehrere graphen in einem chart.

wkarl · 16 November 2015, 06:55:47

Hallo eki,

ich meine zwei charts. Aktuell sieht es aus wie im ersten screenshot. Wobei ich auf Grund des Verlaufs am Zweifeln bin, ob wirklich zwei unterschiedliche Datensätze herangezogen werden. Es funktionierte auch schon mal (siehe zweiten screenshot).

Folgend auch noch der code.

ciao walter

Code Auswählen

<html>
<header><font size="+1">Büro</font></header>
<div class="container">
	<div class="cell big">
		<div data-type="popup" data-width="1000px" data-height="600px">
			<div class="inline"
				data-type="label" 
				data-device="Buero_TC" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
				data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
			</div>
			<div class="inline"
				data-type="label" 
				data-device="Buero_TC" data-get="humidity" data-unit="%%0A" data-fix="1"
				data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
			</div>
			<div class="dialog">
				<header><font size="+1">Büro</font></header>
				 <div	class="nobuttons"
					data-type="chart"
					data-device="MyDbLog"
					data-logdevice='["MyDbLog","MyDbLog","MyDbLog","MyDbLog"]'
				   data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY"]'
					data-columnspec='["Buero_TC:measured-temp","Buero_TC:desired-temp","Buero_TC:humidity","Buero_TC:actuator"]'
					data-style='["ftui l0fill","ftui l3dot","ftui l2","ftui l4"]'
					data-ptype='["lines","lines","lines","lines"]'
					data-uaxis='["primary","primary","secondary","secondary"]'
					data-legend='["IST","SOLL","Luft","Ventil"]'
					data-yunit="°C" data-ytext="Temperatur" data-minvalue="10" data-maxvalue="auto"
					data-yunit_sec="%" data-ytext_sec="Prozent" data-minvalue_sec="0" data-maxvalue_sec="100"
					data-yticks="auto"
					data-daysago_start="0" data-daysago_end="-1"
					data-xticks="auto"
					data-crosshair="true"
					data-cursorgroup="1"
					data-scrollgroup="1"
					data-showlegend="true"
					data-height="250px"
					data-width="90%">
				 </div>
				 <div	class="nobuttons"
					data-type="chart"
					data-device="MyDbLog"
					data-logdevice='["MyDbLog","MyDbLog","MyDbLog"]'
				   data-logfile='["HISTORY","HISTORY","HISTORY"]'
					data-columnspec='["Buero_HK:measured-temp","Buero_HK:desired-temp","Buero_HK:actuator"]'
					data-style='["ftui l0fill","ftui l3dot","ftui l4"]'
					data-ptype='["lines","lines","lines"]'
					data-uaxis='["primary","primary","secondary"]'
					data-legend='["IST","SOLL","Ventil"]'
					data-yunit="°C" data-ytext="Temperatur" data-minvalue="10" data-maxvalue="auto"
					data-yunit_sec="%" data-ytext_sec="Prozent" data-minvalue_sec="0" data-maxvalue_sec="100"
					data-yticks="auto"
					data-daysago_start="0" data-daysago_end="-1"
					data-xticks="auto"
					data-crosshair="true"
					data-cursorgroup="1"
					data-scrollgroup="1"
					data-showlegend="true"
					data-height="250px"
					data-width="90%">
				 </div>
			</div>				
		</div>
	</div>
	<div class="cell" data-type="label">Heizkörper</div>
	<div class="cell">
		<table><tr><td>
			<div class="inline" 
				data-type="thermostat" 
				data-device="Buero_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
	                                  data-min="0" data-max="30" data-step="0.5"
				data-off="controlManu off" data-boost="controlMode boost" 
				data-fgColor="darkorange"
				data-height="100px"
				data-width="100px"> 
			</div>
		</td><td>
			<div 	class="cell inline small">
				<div	data-type="multistatebutton" 
					data-device="Buero_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
						data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]' 
						data-background-icon="fa-square" data-background-colors='["grey","grey"]'
						>
				</div><br>
				<div data-type="multistatebutton" 
					data-device="Buero_HK" data-get="R-btnLock" data-get-on='["on","off"]' 
						data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]' 
						data-background-icon="fa-square" data-background-colors='["grey","grey"]'
						>
				</div>
			</div>
		</td></tr></table>
	</div>
	<div class="cell" data-type="label">Fussboden</div>
	<div class="cell">
		<table><tr><td>
			<div class="inline" 
				data-type="thermostat" 
				data-device="Buero_TC" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="actuator"
	                                  data-min="0" data-max="30" data-step="0.5"
				data-off="controlManu off" data-boost="controlMode boost" 
				data-fgColor="darkorange"
				data-height="100px"
				data-width="100px"> 
			</div>
		</td><td>
			<div 	class="cell inline small">
				<div	data-type="multistatebutton" 
					data-device="Buero_TC_Climate" data-get="controlMode" data-get-on='["auto","manual"]'
					data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]' 
					data-background-icon="fa-square" data-background-color="dimgrey"
					>
				</div><br>
				<div 	data-type="multistatebutton" 
					data-device="Buero_TC" data-get="R-btnLock" data-get-on='["on","off"]' 
					data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]' 
					data-background-icon="fa-square" data-background-color="dimgrey"
					>
				</div>
			</div>
		</td></tr></table>
	</div>
</div>
</html>

eki · 16 November 2015, 11:01:25

Zitat von: MichaelT am 15 November 2015, 09:37:48
Hallo eki,

danke das Du mich unterstützt. Wenn ich bei mir was schauen soll, sag Bescheid. Ggf. hängt es ja mit meine Konfiguration in fhem zusammen.

Hallo Michael,

ich habe Dein Logfile mal bei mir als dummy eingebunden (also dummy mit Deinem Device Namen definiert, und Log mit entsprechendem Namen)

Code Auswählen

define OG_GZ_RTth dummy
define OG_GZ_HZ_FL FileLog demolog/OG_GZ_HZ-112015.log_ Sens.Out:T:.*

und mit Deinem Template bei mir geplottet, komischerweise funktioniert das bei mir (siehe Bild). Was mir aufgefallen ist, war, dass Dein Logfile im Namen am Ende einen "_" hatte.

eki · 16 November 2015, 11:08:06

Zitat von: wkarl am 16 November 2015, 06:55:47
Hallo eki,

ich meine zwei charts. Aktuell sieht es aus wie im ersten screenshot. Wobei ich auf Grund des Verlaufs am Zweifeln bin, ob wirklich zwei unterschiedliche Datensätze herangezogen werden. Es funktionierte auch schon mal (siehe zweiten screenshot).

Hallo Walter,

ich habe im widget_chart.js diesbezüglich noch einen Fehler entdeckt, der genau in dem Fall von mehreren <div> in einem popup zuschlägt. Bitte prüfe mal, ob es mit dem angehängten js file klappt (bei mir ging es damit).

Falls ja, gib Bescheid, dann werde ich eine neue Version fertig machen, die diesen Fehler nicht mehr hat (habe inzwischen auch schon ein paar andere Kleinigkeiten gefunden und angefangen eine Art 3D Variante der Plots dazu zu bauen, deshalb möchte ich die Version erst noch ein bisschen testen und noch nicht offiziell freigeben).

wkarl · 16 November 2015, 11:42:41

Hallo eki,

funktioniert jetzt, super. Noch ein Punkt ist mir aufgefallen - das popup ist ja über die Temperatur und die Luftfeuchtigkeit definiert. Die Selektierhand wird auch über beide Bereiche angezeigt. Der Dialog erscheint aber nur bei Klick auf die erste Zahl.

Normal oder kann ich/Du was dran machen?

ciao walter

SirUli · 16 November 2015, 11:48:10

Hi Eki,

habe bei mir als Bug entdeckt, dass sich das Widget verkleinert, wenn man in der Historie zurückgeht. Definition:

Code Auswählen

<li data-row="1" data-col="2" data-sizex="5" data-sizey="3">
		<header>KLIMA-DIAGRAMM</header>
		<div class="fullsize"
			data-type="chart"
			data-device="myDbLog"
			data-logdevice='["myDbLog","myDbLog","myDbLog"]'
			data-logfile='["HISTORY","HISTORY","HISTORY"]'
			data-columnspec='["BK_Wetterstation:temperature","BK_Wetter:temperature","BK_Wetterstation:humidity"]'
			data-style='["ftui l0fill","ftui l1dot","ftui l2dash"]'
			data-ptype='["lines","lines","lines"]'
			data-uaxis='["primary","primary","secondary"]'
			data-legend='["Measured", "Predicted", "Humidity"]'
			data-yunit="°C"
			data-ytext="Temperature"
			data-minvalue="auto"
			data-maxvalue="auto"
			data-yticks="auto"
			data-yunit_sec="%"
			data-ytext_sec="Humidity"
			data-minvalue_sec="0"
			data-maxvalue_sec="100"
			data-daysago_start="0"
			data-daysago_end="-1"
			data-crosshair="true"
			data-cursorgroup="1"
			data-scrollgroup="1"
			data-showlegend="true"
			data-xticks="auto">
		</div>
    </li>

Wenn ich es mir anzeigen lasse, dann sieht es erstmal richtig aus (Bild 1):
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40548;image)

Klicke ich dann aber auf den Pfeil links oben, so verkleinert es sich (Bild 2). Wie mir scheint, zieht dann das "fullsize" nicht mehr:
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40550;image)

Desweiteren scheint das Chart mit weniger als zwei Kästchen Probleme zu haben? Wenn ich folgendes Definiere:

Code Auswählen

<li data-row="4" data-col="2" data-sizex="5" data-sizey="1">
		<header>WIND/REGEN-DIAGRAMM</header>
		<div class="fullsize"
			data-type="chart"
			data-device="myDbLog"
			data-logdevice='["myDbLog","myDbLog"]'
			data-logfile='["HISTORY","HISTORY"]'
			data-columnspec='["BK_Wetterstation:wind","BK_Wetter:rain"]'
			data-style='["ftui l1dot","ftui l2dash"]'
			data-ptype='["lines","lines"]'
			data-uaxis='["primary","secondary"]'
			data-legend='["Wind", "Regen"]'
			data-yunit="km/h"
			data-ytext="Wind"
			data-minvalue="auto"
			data-maxvalue="auto"
			data-yticks="auto"
			data-yunit_sec="mm"
			data-ytext_sec="Regen"
			data-minvalue_sec="auto"
			data-maxvalue_sec="auto"
			data-daysago_start="0"
			data-daysago_end="-1"
			data-crosshair="true"
			data-cursorgroup="1"
			data-scrollgroup="1"
			data-showlegend="true"
			data-xticks="auto">
		</div>
    </li>

Dann sieht das wie in Bild 3 momentan aus - wie es scheint klappt es da nicht mehr die Werte zur Grafik zu positionieren?
(http://forum.fhem.de/index.php?action=dlattach;topic=37378.0;attach=40552;image)

Vielen Dank für das geniale Widget - echt super!

eki · 16 November 2015, 12:58:31

@SirUli,
kannst Du das auch mal mit der Version, die ich an wkarl geschickt habe testen, dort ist eine Korrektur bezüglich "fullsize" enthalten, bin mir aber nicht sicher, ob das auch Deine Probleme löst.

@wkarl:
Soweit ich das popup widget verstehe (kommt ja nicht von mir, ich hab aber im Rahmen der chart widget Aktivitäten da mal reingeschaut), ist immer nur das erste <div> innerhalb des popup widgets (genau gesagt das erste "child" objekt) dasjenige, welches das Erscheinen triggert. Eventuell kannst Du mal versuchen die beiden in ein <div> zusammen zu fassen.

amunra · 16 November 2015, 13:01:20

Hallo Eki,

das passt jetzt zwar nicht zum Them User-Demo, aber ich habe ein noch ein Problem mit der Darstellung der Graphen.
Fall 1) Das hier funktioniert:

Code Auswählen

				data-type="chart"
				data-device='["DBLog"]'
				data-logdevice='["DBLog"]'
				data-logfile='["HISTORY"]'
				data-columnspec="gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"

Fall 2) Das hier funktioniert nicht mehr (um ein weiteren Graphen erweitert):

Code Auswählen

				data-type="chart"
                                data-device='["DBLog"]'
				data-logdevice='["DBLog","DBLog"]'
				data-logfile='["HISTORY","HISTORY"]'
				data-columnspec='["gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]'

Auch

Code Auswählen

data-device='["DBLog","DBLog"]'

Code Auswählen

data-device="DBLog"
hilft nicht.

Ich vermute, dass der columnspec Split bzw. die array Abarbeitung nicht suaber funktioniert bzw. noch nicht sicher ist.

Grund- Der Request sieht wie folgt aus:
Fall 1) OK!

Code Auswählen

cmd	
get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 gaskosten:abrechnung_berechnet:::$val=~s
/.*T:\s([-\.\d]+).*/$1/eg

Fall 2) Fehlerhaft:

Code Auswählen

cmd	
get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 ["gaskosten:abrechnung_berechnet:::$val=
~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]

Den Fehler konnte ich noch nicht näher eingränzen - hast du eine Idee?

Danke.
Gruß
Arthur

wkarl · 16 November 2015, 15:31:08

Hallo eki,

ZitatEventuell kannst Du mal versuchen die beiden in ein <div> zusammen zu fassen.

Genauso isses.

ciao walter

webturtle · 16 November 2015, 19:18:50

Gibt es eigentlich einen Weg die index.html über FHEM edit files zu bearbeiten?

Chris

eki · 17 November 2015, 08:46:29

Zitat von: amunra am 16 November 2015, 13:01:20
Hallo Eki,

das passt jetzt zwar nicht zum Them User-Demo, aber ich habe ein noch ein Problem mit der Darstellung der Graphen.
Fall 1) Das hier funktioniert:
Code Auswählen Erweitern
data-type="chart" data-device='["DBLog"]' data-logdevice='["DBLog"]' data-logfile='["HISTORY"]' data-columnspec="gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"
Fall 2) Das hier funktioniert nicht mehr (um ein weiteren Graphen erweitert):
Code Auswählen Erweitern
data-type="chart" data-device='["DBLog"]' data-logdevice='["DBLog","DBLog"]' data-logfile='["HISTORY","HISTORY"]' data-columnspec='["gaskosten:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]'
Auch
Code Auswählen Erweitern
data-device='["DBLog","DBLog"]'
Code Auswählen Erweitern
data-device="DBLog"
hilft nicht.

Ich vermute, dass der columnspec Split bzw. die array Abarbeitung nicht suaber funktioniert bzw. noch nicht sicher ist.

Grund- Der Request sieht wie folgt aus:
Fall 1) OK!
Code Auswählen Erweitern
cmd get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 gaskosten:abrechnung_berechnet:::$val=~s /.*T:\s([-\.\d]+).*/$1/eg
Fall 2) Fehlerhaft:
Code Auswählen Erweitern
cmd get DBLog HISTORY - 2012-11-10_00:00:00 2015-11-20_00:00:00 ["gaskosten:abrechnung_berechnet:::$val= ~s/.*T:\s([-\.\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\s([-\.\d]+).*/$1/eg"]

Den Fehler konnte ich noch nicht näher eingränzen - hast du eine Idee?

Danke.
Gruß
Arthur

Hallo Arthur,

ich denke das liegt daran, wie js strings behandelt. Der von Dir angegebene columnspec wert wird von js wohl als string und nicht als array interpretiert. Hat wohl etwas damit zu tun, dass der string \ enthält, welche von js als Maskierungswerte für nachfolgende Zeichen interpretiert werden.
Lange Rede kurzer Sinn: Wenn Du die \ durch \\ ersetzt sollte es klappen.

Code Auswählen

                data-columnspec='["gaskosten:abrechnung_berechnet:::$val=~s/.*T:\\s([-\\.\\d]+).*/$1/eg","wasser:abrechnung_berechnet:::$val=~s/.*T:\\s([-\\.\\d]+).*/$1/eg"]'

amunra · 17 November 2015, 10:18:33

Hallo eki,
danke, das war's.
Viele Grüße
Arthur