[TabletUI] AUfbau für Homematic Thermostate

Gunther · 12 Januar 2016, 02:10:14

Ich bin gerade dabei diverse Threads und externe Seiten zu durchforsten.
Vielleicht hat ja jemand schon einiges fertig und wir sammeln hier mal. Dann geht es nicht so unter wie im großen Thread.

Ich möchte meine Homematic Wandthermostate und Stellventile in die UI einbinden. Dabei habe ich jetzt schon spannende Beispiele gesehen.

Super wäre:

Thermostat Widget inkl. Öffnung
Anzeige des aktuellen Bedienmodus (z. B. Cycle Menü mit änderndem Statusicon) und ggf. sogar Textanzeige
Sperre des beiden Geräte - falls mal wieder Kinder im Haus Technik entdecken
Batterieanzeige
Fensteröffnung
Button mit Popup für Temperaturverlauf
optional: Untermenü o.ä. mit Möglichkeit eine Temperaturliste zu bearbeiten und "hochzuladen"

Und das alles gerne platzsparend.
Hat schon jemand so etwas gebastelt?

wkarl · 18 Januar 2016, 10:10:08

Hallo Günther,

sieh Dir mal das hier an http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514

ciao walter

Gunther · 11 Februar 2016, 00:21:01

Danke. Ich habe mich daran orientiert.
Meine freien Abende habe ich nun (wild) probiert und getestet. Leider komme ich nicht weiter.

Es sieht nun aus wie im Screenshot.

Folgendes hätte ich gerne:
1.) Die drei linken Buttons sollen immer untereinander wechseln und dabei die Farbe je nach Zustand ändern. Das klappt leider nicht.
Geschaltet wird, aber die Farben ändern sich nicht (blinken beim Klicken nur kurz auf).

2.) Der boost-button zeigt das Bild nicht an, obwohl es in meinem FHEM vorhanden zu sein scheint.

3.) Die Funktionalität des Lockbuttons geht manchmal. Ich konnte noch nicht genau erkennen, wann.
a) Leider werden hier ebenfalls die Icons (2 Zustande) nicht angezeigt.
b) hier wird der Button "getoggelt", merkt sich aber den Status nicht.

Könnt Ihr mir helfen?

So sieht mein Code aus:

Code Auswählen

<html>
<body>
    <header>Heizung Kino</header>
    
    <div class="container row top-space">
		<div class="col-1-3">
			<div data-type="label" 
			data-device="eg_ki_Wandthermostat" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
			data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
			</div>
		</div>
		<div class="col-1-3">
			<div data-type="label" 
			data-device="eg_ki_Wandthermostat_Climate" data-get="humidity" data-unit="%%0A" data-fix="1"
			data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
			</div>
		</div>		
		<div class="col-1-3">
			<div data-type="label" 
			data-device="eg_ki_Wandthermostat_Climate" data-get="controlMode">
			</div>
		</div>			
	</div>




    <div class="container row big top-space">
		<div class="col-1-2 left">
			<div data-type="thermostat" data-device="eg_ki_Heizung_Clima" data-valve="ValvePosition" class="cell"></div>
		</div>
		<div class="col-1-2 right">
				<div data-type="symbol" data-device="eg_bz_Fenster" class="cell"></div>
		</div>				
	</div>


  
    <div class="col-1-4">
			 <div data-type="push" data-device="eg_ki_Wandthermostat_Climate" data-set="controlMode" data-set-on="manual" data-set-off="!manual" data-on-color="#333" data-off-color="#333" data-on-background-color="#aa6900" data-off-background-color="#555" data-icon="oa-sani_heating_manual"  data-background-icon="fa-square" class="cell" alt="foo"></div>
             <div data-type="label" class="narrow darker">Manuell</div>    
    </div>
    
    <div class="col-1-4">
             <div data-type="push" data-device="eg_ki_Wandthermostat_Climate" data-set="controlMode" data-set-on="auto" data-set-off="!auto" data-on-color="#333" data-off-color="#333" data-on-background-color="#aa6900" data-off-background-color="#555" data-icon="oa-sani_heating_automatic" data-background-icon="fa-square" class="cell" alt="foo"></div>
             <div data-type="label" class="narrow darker">Automatik</div>    
    </div>    
    
    <div class="col-1-4">
             <div data-type="push" data-device="eg_ki_Wandthermostat_Climate" data-set="controlMode" data-set-on="boost" data-set-off="!boost" data-on-color="#333" data-off-color="#333" data-on-background-color="#aa6900" data-off-background-color="#555" data-icon="oa-sani_heating_boost" data-background-icon="fa-square" class="cell" alt="foo"></div>             
             <div data-type="label" class="narrow darker">Boost</div>    
    </div> 

    <div class="col-1-4">
			 <div data-type="switch" data-device="eg_ki_Wandthermostat" data-get="regVal btnLock" data-get-on="on" data-get-on="off"
			 data-set-on="regSet btnLock on" data-set-off="regSet btnLock off" data-icons='["oa-secur_locked","oa-secur_open"]' data-on-color="#333" data-off-color="#333"
			 data-background-icon="fa-square" data-on-background-color="#aa6900" data-off-background-color="#555"
			 class="cell" alt="foo"></div>		 
             <div data-type="label" class="narrow darker">Sperren</div>    
    </div> 
</body>
</html>

setstate · 11 Februar 2016, 08:02:20

Hallo Gunther,

1. Push ist sehr statisch und reagiert nicht auf Status-Änderungen. Wenn die Farbe wechseln soll, musst du Switch einsetzen.

2. sani_heating_boost.svg gibt es in meiner FHEM Installation nicht. Ich habe seit Wochen kein Update gemacht. Es sieht also so aus, als wäre das neu und somit auch nicht im FTUI Font mit eingeflossen. Das müsste mal jemand eine neue Version generieren. Da gab es mal jemand im Mega-Thread, der den OA-Font aus dem SVGs zusammengebastelt hat.

3. Wenn du verschiedene Icons willst, musst du kpl. auf multi state notation (data-states,data-set-states,data-colors...) umstellen und nicht nur die data-icons angeben.

Gunther · 11 Februar 2016, 23:06:28

Danke für Deine Antwort.

Habe mich heute Abend mit Punkt 3 beschäftigt.
So dieht es nun aus:

Code Auswählen

    <div class="col-1-4">
			 <div data-type="switch" data-device="eg_ki_Wandthermostat" 
			 data-set="regSet btnLock" data-set-on="on" data-set-off="off" data-get="regVal btnLock" data-states='["on","off"]' data-icons='["oa-sani_heating_manual","oa-sani_heating_automatic"]' data-colors='["#333", "#333"]' 
			 data-background-colors='["#aa6900", "#555"]' data-background-icons='["fa-square","fa-square"]'
			 class="cell" alt="foo"></div>		 
             <div data-type="label" class="narrow darker">Sperren</div>  
               
    </div>

Geschaltet wird! Farbe switched auch.
Hintergrundicon wird nicht angezeigt.
Meine Testicons auch nicht. Die Standardlampe erscheint.
Der Status wird nicht erkannt. Mein Test: Locken - Seite wechseln - zurück auf die Seite - Button ist "aus"

Habe ich einen Denkfehler?

Zusatzfrage: Kann ich mit einem Button Wandthermostat und Ventil sperren oder muss ich dafür eine structure oder ähnliches in FHEM anlegen? Das schwierige wäre wahrscheinlich der get-Teil, gerade wenn die Zustände unterschiedliche wären.

Deathevn · 14 März 2016, 13:25:08

Hi Gunther,

hast du im Wiki-Beitrag zum Tablet UI den Absatz "Icon-Konfiguration" schon gesehen?
Bin da zuerst auch drüber gestolpert und hatte vergessen folgendes zu übernehmen:

"Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen."

Code Auswählen


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

Viele Grüße
Martin

kvo1 · 14 März 2016, 21:36:10

Hi Gunther,

das Umschalten hatte ich mal (für Rollomodus) per switch realisiert https://forum.fhem.de/index.php?topic=48775.0

oder versuch mal per multistatebutton https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton

olindner · 14 März 2016, 21:55:33

Hallo Gunther,

ich habe es so gelöst ... bin mir aber noch nicht sicher ob alles funktioniert

Gruß Olaf

Code Auswählen

<li data-row="1" data-col="2" data-sizex="2" data-sizey="3">
<header><font size="+1">HZ.BadOG</font></header>
	<div data-type="thermostat" data-device="HZ.BadOG_Clima" 
	  data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" 
	  data-valve="ValvePosition" data-min="16" data-max="24" data-step="0.5"
	  data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost"
	  class="cell big"></div>
        <div data-type="label" data-device="HZ.BadOG_Clima" data-get="controlMode" class="cell"></div>
        <div data-type="progress" data-device="HZ.BadOG_Clima" data-get="ValvePosition" data-progress-width=100 data-unit="%"></div>	
	<div data-type="switch" data-get="controlMode" data-get-on="night" data-fhem-cmd="set HZ.BadOG_Clima controlMode night" data-icon="fa-moon-o" class="inline"></div>
        <div data-type="switch" data-get="controlMode" data-get-on="day" data-fhem-cmd="set HZ.BadOG_Clima controlMode day" data-icon="fa fa-sun-o" class="inline"></div>
	<div data-type="multistatebutton" data-device="HZ.BadOG_Clima" data-get="controlMode" data-get-on='["auto","manual","boost","night","day"]'
	  data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual","fa-spinner fa-pulse","oa-sani_heating_automatic","oa-sani_heating_automatic"]' data-colors='["#32a054","#6699FF","#ad3333","SlateBlue","SlateBlue"]' 
	  data-background-icon="fa-circle" data-background-colors='["#505050","#505050","#505050","g#505050rey"]' class="inline"></div>
        <div data-type="label" data-device="HZ.BadOG_Weather" data-get="measured-temp" data-limits='[15,17,25]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="cell big"></div>
        <div class="darker narrow">Temperatur</div>
</li>

kvo1 · 14 März 2016, 23:10:07

Hallo Olaf,

ich meine, das paßt so schon mal nicht !?

Code Auswählen

data-mode="controlMode" data-off="controlManu off" data-boost="controlMode boost"

da kommt dann sowas raus..

set HZ.BadOG_Clima desired-temp controlManu off
und
set HZ.BadOG_Clima desired-temp controlMode boost

klaus

DerAl · 10 Januar 2019, 19:18:38

Hallo, ich habe es s gelöst:

Code Auswählen

<div data-type="switch"
						  	data-device="HeizungWohnzimmer_ClimRT_tr"
						  	data-get="controlMode"
							data-set="controlMode"
							data-set-states='["auto","manual","boost"]'
						  	data-states='["manual","boost","auto"]'
						  	data-icons='["oa-sani_heating_manual","fa-spinner fa-pulse","oa-sani_heating_automatic"]'
						  	data-colors='["white","white","white"]'
						  	data-background-colors='["blue","green","red"]'	
						  	class="small">
						  </div>

[TabletUI] AUfbau für Homematic Thermostate

Deathevn