[FHEM-Tablet-UI] User-Demos

setstate · 03 Dezember 2015, 15:43:04

Die neuen Live-Demo Seiten mit den neusten Widgets ist online. Erweiterungen erfolgen nach und nach ...

http://knowthelist.github.io/fhem/tablet/demo_widgets.html

blackbluegl · 03 Dezember 2015, 15:54:12

sehr schön... Danke

BerndF · 03 Dezember 2015, 16:56:25

Hallo zusammen,

FTUI fasziniert mich nach der kurzen Zeit immer mehr! Daher zuerst einmal ein dickes Lob an alle Entwickler hier die auch die Erweiterungen nur so aus dem Boden schießen lassen!

Ich bin gerade dabei mir für meine Heizungssteuerung eine Seite mit Charts zu bauen. Ich hatte zuerst die SVG Plots über iframes eingebunden. Funktioniert aber sieht fürchterlich aus! Ich habe in den neuen Charts bereits Soll- und Ist-Temperatur und Luftfeuchte drin. In den SVG Plots habe ich zusätzlich noch die über FS20 angesteuerten Heizungsventile der Fußbodenheizung eingebunden. Da diese im Logfile nur ein on und off erzeugen habe ich im GPLOT eine DefaultValue und eine Function: $fld[2]=~"on"?50:40 hinterlegt.

Ich breche mir allerdings seit einer guten Stunde einen ab um das irgendwie in die Charts zu bekommen. Ich würde mich sehr über einen Tipp freuen.

Bernd

SvenJust · 03 Dezember 2015, 17:04:22

Zitat von: BerndF am 03 Dezember 2015, 16:56:25
Ich hatte zuerst die SVG Plots über iframes eingebunden. Funktioniert aber sieht fürchterlich aus!

Ich finde, so fürchterlich sehen die SVG Plots nicht aus, die FTUI Plots sind aber sicherlich hübscher.

VG
Sven

BerndF · 03 Dezember 2015, 17:11:18

Hallo Sven,
"fürchterlich" ist wirklich übertrieben aber mich stört das "helle" auf dem Display

Ich komme hier einfach nicht weiter...

MichaelT · 03 Dezember 2015, 18:51:40

Hallo Zusammen,

hier mal der aktueller Zustand meiner Visu (+ Fertig, - Todo):

+ Es gibt im EG (ein großer Raum) ein Info-Terminal (Nexus7). Dies habe ich mit einer Eigenbauhalterung an der Wand befestigt.
+ Es gibt eine Übersicht aller Räume mit aktuelle Temperaturen und Sammelmeldung Fenster / Licht.
Denon Audio, Versorgung Gas/Strom/Heizung und Abfahrtsmonitor Bahnhof (Pendler ;-< )
+ Je Raum gibt es ein Popup mit Heizung, Rollo, Fenster und Licht (gefällt mir vom Aussehen noch nicht).
+ Screensaver (ob der wirklich schützt?) mit Großer Infoanzeige
- Calllist Fritzbox
- Außenbereich visualisieren (Ist schon an FHEM angebunden)
- Alarmmeldungen auf Screensaver
- Sprachausgabe erweitern (darf aber nicht nerven) RPi mit Lautsprecher und T2S
- Visu Heizung verbessern, derzeit nur Brenner/Vorlauf/Rücklauf/Sollwert mit Themostat-Widget

Ich finde es echt Klasse, was setstate und alle anderen Beteiligten in der Visu und in FHEM geschaffen haben.
Hut ab.

Gruß
Michael

skuggy · 04 Dezember 2015, 09:12:45

Zitat von: setstate am 03 Dezember 2015, 15:43:04
Die neuen Live-Demo Seiten mit den neusten Widgets ist online. Erweiterungen erfolgen nach und nach ...

http://knowthelist.github.io/fhem/tablet/demo_widgets.html

@setstate: Super Arbeit, ich freu mich auf weitere Seiten... Das ThermostatWidget i. V. mit Homematik würde mich brennend interessieren

Mario67 · 04 Dezember 2015, 17:49:06

@Bernd und Sven: Zur Anpassung der Farben in den SVG-Plots hatte ich mal etwas geschriebene (http://forum.fhem.de/index.php/topic,34233.msg305301.html#msg305301). Ich bin allerdings aus Zeitmangel noch nicht dazu gekommen, dort weiterzumachen oder den Vergleich zur aktuellen FTUI-Lösung vorzunehmen. SVG hat für mich den Vorteil, die Plots auch in der "Expertenansicht" (FHEMWEB) verwenden zu können.

Grüße,
Mario

eki · 04 Dezember 2015, 17:56:32

Zitat von: BerndF am 03 Dezember 2015, 16:56:25
Hallo zusammen,

FTUI fasziniert mich nach der kurzen Zeit immer mehr! Daher zuerst einmal ein dickes Lob an alle Entwickler hier die auch die Erweiterungen nur so aus dem Boden schießen lassen!

Ich bin gerade dabei mir für meine Heizungssteuerung eine Seite mit Charts zu bauen. Ich hatte zuerst die SVG Plots über iframes eingebunden. Funktioniert aber sieht fürchterlich aus! Ich habe in den neuen Charts bereits Soll- und Ist-Temperatur und Luftfeuchte drin. In den SVG Plots habe ich zusätzlich noch die über FS20 angesteuerten Heizungsventile der Fußbodenheizung eingebunden. Da diese im Logfile nur ein on und off erzeugen habe ich im GPLOT eine DefaultValue und eine Function: $fld[2]=~"on"?50:40 hinterlegt.

Ich breche mir allerdings seit einer guten Stunde einen ab um das irgendwie in die Charts zu bekommen. Ich würde mich sehr über einen Tipp freuen.

Bernd

Einfach die Definition aus dem GPLOT auch in die columnspecs in der chart widget definition übernehmen. Also für eine Zeile im Logfile die so aussieht:

Code Auswählen

2013-08-12_00:03:25 Garden T: 14.0 H: 72 W: 0.0 R: 70.4 IR: no
etwa so:

Code Auswählen

data-columnspec='[..,"12:Garden.T\\x3a:50:$fld[11]=~\"no\"?40:50",...]'

wkarl · 06 Dezember 2015, 12:58:44

Hallo,

heute habe ich mal wieder ein Zeit mich um mein FT-UI zu kümmern. Update heute morgen durchgeführt (fhem und FT-UI). Mein Test-Konstrukt 'Zwei Graphen in einem popup' zeigt ausser die Label mit den Titel der Graphen nichts an. Nicht einmal die Achsen.
Dann habe ich die js-Datei, die eki vor einiger Zeit zur Verfügung gestellt hat gegen die aktuelle getauscht. Aber keine Änderung des Verhaltens.

Hat jemand das gleiche Verhalten oder eine Idee wo ich weitersuchen kann?

Danke und ciao
Walter

eki · 07 Dezember 2015, 08:10:12

@wkarl: Hattest Du nicht berichtet, dass Dein Setup jetzt klappt? Um dazu etwas sagen zu können , bräuchte ich am besten Deine Definitionen und einen Auszug aus dem zugehörigen Logfile(s). Hast Du irgendwelche Konsoleausgaben im Browser?

outhouse · 13 Dezember 2015, 05:49:44

Zitat von: wkarl am 06 Dezember 2015, 12:58:44
Hallo,

heute habe ich mal wieder ein Zeit mich um mein FT-UI zu kümmern. Update heute morgen durchgeführt (fhem und FT-UI). Mein Test-Konstrukt 'Zwei Graphen in einem popup' zeigt ausser die Label mit den Titel der Graphen nichts an. Nicht einmal die Achsen.
Dann habe ich die js-Datei, die eki vor einiger Zeit zur Verfügung gestellt hat gegen die aktuelle getauscht. Aber keine Änderung des Verhaltens.

Hat jemand das gleiche Verhalten oder eine Idee wo ich weitersuchen kann?

Danke und ciao
Walter

Hallo Walter

Im Beitrag #173 habe ich dasselbe oder ein ähnliches Problem erwähnt. Wenn ich nur 1 Chart in das Popup packe, erscheint der Chart erst, nachdem die nächste Temperaturmeldung reinkommt. Packe ich 2 Charts ins Popup, passiert rein gar nichts.

Chris

wkarl · 13 Dezember 2015, 08:56:58

Hallo Chris,

Deinen Beitrag habe ich gesehen und getestet, jedoch ohne Erfolg. Heute morgen update durchgeführt, nochmal nach weiteren Informationen gesucht, die graphische Ausgabe auf einen plot reduziert, Problem bleibt bestehen.
Folgend der code und ein screenshot.

Danke und ciao walter

PS: sorry für die verspätete Reaktion. Ich bin aktuell mit einem Firmen-Startup für DACH und Osteuropa beschäftigt.

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>
			<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>
			<div class="dialog">
				<header><font size="+1">Büro</font></header>
				 <div class="cell" data-type="label"><font size="+1">Fussboden</font></div>
				 <div	class="nobuttons"
					data-type="chart"
					data-device="MyDbLog"
					data-logdevice='["MyDbLog"]'
				   data-logfile='["HISTORY"]'
					data-columnspec='["Buero_TC:measured-temp:::"]'
					data-style='["ftui l0fill"]'
					data-ptype='["lines"]'
					data-uaxis='["primary"]'
					data-legend='["IST"]'
					data-yunit="°C" data-ytext="Temperatur" data-minvalue="10" data-maxvalue="auto"
					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 top-narrow-2x" 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>

xyro · 13 Dezember 2015, 20:38:09

Hallo,

hab das selbe Problem wie Karl.

Wenn ich allerdings 2 Charts mache, kann ich beide charts sehen.

Code Auswählen

<li data-row="2" data-col="2" data-sizex="8" data-sizey="6">
 	<header>Temperatur & Luftfeuchte</header>
<div class="normal"
	data-type="chart"
	data-logdevice='["Log_Aussensensor_Temperatur","Log_Aussensensor_Luftfeuchte"]'
	data-columnspec='["4:Aussensensor_Temperatur.*::","4:Aussensensor_Luftfeuchte.*::"]'
	data-style='["ftui l0fill","ftui l2"]'
	data-ptype='["lines","histeps"]'
	data-uaxis='["primary","secondary"]'
	data-legend='["Temperatur","Luftfeuchte"]'
	data-yunit="°C"
	data-ytext="Temperatur"
	data-minvalue="auto"
	data-maxvalue="auto"
	data-yunit_sec="%rF"
	data-ytext_sec="Luftfeuchte"
	data-height="300"
	data-yticks="auto"
	data-minvalue_sec="auto"
	data-maxvalue_sec="auto"
	data-nofulldays="false"
	data-daysago_start=""
	data-daysago_end=""
	data-cursorgroup="1"
	data-scrollgroup="1"
	data-xticks="auto"
</div>

<div class="normal"
	data-type="chart"
	data-logdevice='["Log_Aussensensor_Luftfeuchte"]'
	data-columnspec='["4:Aussensensor_Luftfeuchte.*::"]'
	data-style='["ftui l2"]'
	data-ptype='["histeps"]'
	data-uaxis='["secondary"]'
	data-legend='["Temperatur"]'
	data-yunit="°C"
	data-ytext="Temperatur"
	data-minvalue="auto"
	data-maxvalue="auto"
	data-yunit_sec="%rF"
	data-ytext_sec="Luftfeuchte"
	data-height="0"
	data-yticks="auto"
	data-minvalue_sec="auto"
	data-maxvalue_sec="auto"
	data-nofulldays="false"
	data-daysago_start=""
	data-daysago_end=""
	data-cursorgroup="1"
	data-scrollgroup="1"
	data-xticks="auto"
</div>
</li>

Lösche ich jetzt die untere Chart sehe ich gar keine mehr.

um jede Hilfe bin ich dankbar!

Grüsse

Alex

eki · 14 Dezember 2015, 13:31:46

@xyro:
Dein Problem habe ich (hoffentlich) nachvollzogen. Es liegt daran, dass bei einer Definition ohne data-device Angabe versucht wird die Information in data-logdevice als Device zu verwenden, das geht aber schief, wenn data-logdevice aus einem Array mit mehreren Einträgen besteht.

Als schnelle Lösung kannst Du einfach bei allen charts (bei Dir vor allem beim Ersten, das mehrere Logdevices enthält) eine Zeile einfügen mit data-device="Log_Aussensensor_Temperatur", dann sollte es klappen.

Das Verhalten wird in der nächsten Version (noch ein paar wenige Tage Geduld, ich komme leider aktuell nicht so dazu wie ich das gerne tun würde, man muss ja schließlich nebenbei auch noch Geld verdienen

) behoben sein.

@wkarl:
Ich kann das Verhalten leider bei mir nicht nachvollziehen (ich habe Deine Definition genommen und die Logdevice und columnspec ausgetauscht und bei mir gings), allerdings nutze ich dblog auch nicht, es könnte also eventuell daran liegen. Schau vielleicht mal die Einträge der Kollegen durch die mit dblog Erfolg hatten.