[FHEM-Tablet-UI] User-Demos

FhemPiUser · 17 Januar 2016, 20:32:36

ja, hängt jetzt am Post oben.

wkarl · 18 Januar 2016, 10:20:42

Hallo,

kleines Update von meiner Seite. Meine Übersicht der Thermostate (siehe hier http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514 habe ich auf das FTUISVR-Modul von Johannes (sieh hier http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991) umgebaut.

Vorher:

ca 22 Dateien mit den Thermostatdefinitionen
mit der Template-Funktion von FTUI war ein Seitenaufbau nicht erfolgreich

Nachher:

3 Template-Dateien (nur Fussboden, nur Heizkörper, beides kombiniert
schnelles und fehlerfreier Aufbau der Seiten

ciao walter

viegener · 18 Januar 2016, 15:04:11

Zitat von: wkarl am 18 Januar 2016, 10:20:42
Hallo,

kleines Update von meiner Seite. Meine Übersicht der Thermostate (siehe hier http://forum.fhem.de/index.php/topic,37378.msg382514.html#msg382514 habe ich auf das FTUISVR-Modul von Johannes (sieh hier http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991) umgebaut.

Vorher:

ca 22 Dateien mit den Thermostatdefinitionen
mit der Template-Funktion von FTUI war ein Seitenaufbau nicht erfolgreich

Nachher:

3 Template-Dateien (nur Fussboden, nur Heizkörper, beides kombiniert
schnelles und fehlerfreier Aufbau der Seiten

ciao walter

Hallo Walter,
das klingt ja sehr gut, Danke!
Gruss,
Johannes

wkarl · 18 Januar 2016, 15:43:54

Hallo Johannes,

Ehre wem Ehre gebührt - Deine Lösung ist echt gut.

Ich lehne mich mal etwas aus dem Fenster - mein Verständnis aus etlichen Jahren IT-Security aus den Randdiskussionen besteht die Architektur eines Software-Services aus Daten-, Applikations- und Präsentationsschicht. Die Forderungen aus den Projekten ist grundsätzlich, die Präsentationsschicht bereitet die anforderte Seite auf und sendet sie komplett zum Client. Dies entspricht genau Deiner Lösung.

Ich will die Template-Lösung aus dem FTUI-Projekt nicht madig machen - sie hat ihre Berechtigung - aber bei aufwendigen und komplexen Seiten stößt sie auf ihre Grenzen. Daher bin ich auch dafür, dass Dein Modul ins repository kommt. Jeder kann dann für sich entscheiden welchen Weg er geht.

ciao walter

dancatt · 21 Januar 2016, 15:34:03

Zitat von: wkarl am 18 Januar 2016, 10:20:42
Nachher:

3 Template-Dateien (nur Fussboden, nur Heizkörper, beides kombiniert
schnelles und fehlerfreier Aufbau der Seiten

Kannst du mal ein Beispiel posten? Ich versuche mich auch gerade daran. Nur mein Fhem schmiert komplett ab.

Datei "heizung_eg.ftui.html":

Code Auswählen


<!DOCTYPE html>
<html>
<head>
        <title>HEIZUNG ERGESCHOSS</title>
</head>
<body>

<div class="gridster">
<ul>
	<li class="halbTransparent" data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="inc_home_button.html"></li>
	<li class="halbTransparent" data-row="1" data-col="8" data-sizex="2" data-sizey="1" data-template="inc_uhr.html"></li>
	<li class="halbTransparent" data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_links.html"></li>

	<li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
            <header>Esszimmer</header>
            <?ftui-inc="thermostat.part"  device="1_01_EZ_Heizungsthermostat" climachannel="1_01_EZ_Heizungsthermostat_Clima" ?>
	</li>
</ul>
</div>
</body>
</html>

Datei "thermostat.part":

Code Auswählen


<?ftui-header="Thermostat" device climachannel?>
	<div class="container">
		<div class="container row big top-space">
			<div class="col-1-2 left">
				<div data-type="label" 
					data-device="<?ftui-key=climachannel ?>" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
					data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
				</div>
			</div>
		</div>

		<div class="container row">
			<div class="top-space" data-type="label">Heizkörper</div>
			<div class="container top-space">
				<div class="col-2-3 left">
					<div data-type="thermostat" 
						data-device="<?ftui-key=climachannel ?>" 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-mode="controlMode"
						data-off="controlManu off"
						data-boost="controlMode boost" 
						data-fgColor="darkorange"
						data-height="96px"
						data-width="96px"> 
					</div>
				</div>
				<div class="col-1-3 top-space right">
					<font size="-2">
						<div data-type="multistatebutton" 
							data-device="<?ftui-key=climachannel ?>" 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='["dimgrey","dimgrey"]'
							>
						</div>
						<br>
						<div data-type="multistatebutton" 
							data-device="<?ftui-key=device ?>" 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='["dimgrey","dimgrey"]'
								>
						</div>
					</font>
				</div>
			</div>
		</div>
	</div>

Log:

Code Auswählen


016.01.21 14:59:34.202 4: WEB_192.168.178.91_60000 GET /fhem/ftui/heizung_eg.ftui.html; BUFLEN:0
2016.01.21 14:59:34.211 4: FTUISRV: Request to FTUISRV :/ftui/heizung_eg.ftui.html:
2016.01.21 14:59:34.212 5: ftui: Request to :/ftui/heizung_eg.ftui.html:
2016.01.21 14:59:34.213 5: ftui: handletemplatefile :./www/tablet/heizung_eg.ftui.html:
2016.01.21 14:59:34.215 4: ftui: is real template :./www/tablet/heizung_eg.ftui.html:
Undefined subroutine &main::fileparse called at ./FHEM/02_FTUISRV.pm line 330.

Mache ich das ".ftui" im Dateinamen weg und ersetze alle "<?ftui..." durch die entsprechenden Werte dann wird alles korrekt angezeigt.

Jemand eine Idee?

Vielen Dank und Gruß Daniel

wkarl · 21 Januar 2016, 16:15:08

Hallo Daniel,

Kurz von unterwegs. Meine part-Datei enthält auch .ftui.
Und bei <?ftui-header ... Habe ich am Ende ein Leerzeichen vor ?>

Ciao Walter

dancatt · 21 Januar 2016, 16:59:40

Zitat von: wkarl am 21 Januar 2016, 16:15:08
Kurz von unterwegs. Meine part-Datei enthält auch .ftui.
Und bei <?ftui-header ... Habe ich am Ende ein Leerzeichen vor ?>

Das war leider nicht das Problem.
Selber Fehler.

waschbaerbauch · 22 Januar 2016, 00:25:28

Kaum ist der Urlaub vorbei wird es enger mit der Zeit..

Die Fortschritte liegen im Moment eher in Details:
- Umsortieren und überdenken ob das wirklich die Struktur sein soll

- Versuch HTML zu verstehen und Codebereinigung

- Ideen fürs Platz sparen finden (MiLight, MAX!Regler, Info/Status Button - 1x1 mit Popup)
- Müllkalender adaptiert
- TV Remote

majorshark · 22 Januar 2016, 07:08:40

Hallo.

Ich sage mal: Gefällt mir!

Interessant finde ich den Abfallkalender. Wo habe ich den da was überlesen bezüglich der Icons mit den verbleibende Tagen.

skuggy · 22 Januar 2016, 07:11:00

Hallo @waschbaerbauch,

könntest du evtl. die hmtl-Datei der gateway-Seite zur Verfügung stellen? Wie hast du den TP-Switch eingebaut? Woher bekommst du die Daten?

Danke und Gruß

Zitat von: waschbaerbauch am 22 Januar 2016, 00:25:28
Kaum ist der Urlaub vorbei wird es enger mit der Zeit..

Die Fortschritte liegen im Moment eher in Details:
- Umsortieren und überdenken ob das wirklich die Struktur sein soll
- Versuch HTML zu verstehen und Codebereinigung
- Ideen fürs Platz sparen finden (MiLight, MAX!Regler, Info/Status Button - 1x1 mit Popup)
- Müllkalender adaptiert
- TV Remote

HoTi · 22 Januar 2016, 07:21:19

Zitat von: skuggy am 22 Januar 2016, 07:11:00
Hallo @waschbaerbauch,

könntest du evtl. die hmtl-Datei der gateway-Seite zur Verfügung stellen? Wie hast du den TP-Switch eingebaut? Woher bekommst du die Daten?

Danke und Gruß

Das würde mich auch interessieren!

wkarl · 22 Januar 2016, 07:46:41

Hallo Daniel,

hast Du das schon mal mit den Entwicklertools untersucht? Bei Chrome findest Du diese unter Anzeigen/Entwickler.

Zitat von: dancatt am 21 Januar 2016, 16:59:40
Das war leider nicht das Problem.
Selber Fehler.

Anbei findest Du die Ansicht des Kellers und folgend die Dateien.

h-kg-r.ftui.html:

Code Auswählen

<!DOCTYPE html>
<html>
<head>

	<title>KG Heizung</title>

</head>

<body>
	<div class="gridster">

		<ul>
		<!-- Menu -->
			<div class="container">
			<li data-row="1" data-col="1" data-sizex="3" data-sizey="16" data-template="menu-main.html"></li>
				<li data-row="21" data-col="1" data-sizex="3" data-sizey="3" data-template="menu-datetime.html"></li>
			</div>	

		<!-- Content -->
			<li data-row="1" data-col="4" data-sizex="6" data-sizey="7">
				<header>Hobbyraum</header>
				<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Hobbyraum" ?>
			</li>
			<li data-row="1" data-col="10" data-sizex="6" data-sizey="7">
				<header>Partyraum</header>
				<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Partyraum" ?>
			</li>
			<li data-row="1" data-col="16" data-sizex="6" data-sizey="7">
				<header>Werkstatt</header>
				<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Werkstatt" ?>
			</li>
			<li data-row="1" data-col="22" data-sizex="6" data-sizey="7">
				<header>Waschraum</header>
				<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Waschraum" ?>
			</li>
			<li data-row="6" data-col="6" data-sizex="6" data-sizey="7">
				<header>Lagerraum</header>
				<?ftui-inc="../tablet_Templates/h-hz-template-HK.ftui.part" room="Lagerraum" ?>
			</li>
		</ul>

	</div>
	
</body>
</html>

h.hz-template.HK.ftui.part:

Code Auswählen


<?ftui-header="HK" room ?>

<div class="container">
	<div class="container row big top-space">
		<div class="centered">
			<div data-type="label" 
			data-device="<?ftui-key=room ?>_HK_Clima" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
			data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
			</div>
		</div>
	</div>

	<div class="container row">
		<div class="top-space" data-type="label">Heizkörper</div>
		<div class="container top-space">
		<div class="col-2-3 left">
			<div data-type="thermostat" 
				data-device="<?ftui-key=room ?>_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-mode="controlMode"
				data-off="controlManu off" data-boost="controlMode boost" 
				data-fgColor="darkorange"
				data-height="96px"
				data-width="96px"> 
			</div>
		</div>
		<div class="col-1-3 top-space right"><font size="-2">
			<div	data-type="multistatebutton" 
				data-device="<?ftui-key=room ?>_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='["dimgrey","dimgrey"]'
					>
			</div><br>
			<div data-type="multistatebutton" 
				data-device="<?ftui-key=room ?>_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='["dimgrey","dimgrey"]'
					>
			</div>
		</font>
		</div>
		</div>
	</div>

</div>

ciao walter

kvo1 · 22 Januar 2016, 08:10:55

Hi waschbaerbauch,

das mit der Zeit kommt mir bekannt vor

Ich hätte auch Interesse am Abfallkalender und der schicken Uhr !
danke schom mal vorab !

waschbaerbauch · 22 Januar 2016, 08:16:51

Zitat von: skuggy am 22 Januar 2016, 07:11:00
Hallo @waschbaerbauch,

könntest du evtl. die hmtl-Datei der gateway-Seite zur Verfügung stellen? Wie hast du den TP-Switch eingebaut? Woher bekommst du die Daten?

Danke und Gruß

Klar doch, hängen jetzt oben dran

Die Switche hab ich via PRESENCE Status (lan ping) eingebunden. Das funktioniert natürlich nur wenn sie eine eigene IP besitzen. Für die nicht zu managen Etagenverteiler geht das natürlich nicht. Zumindest hab ich dafür noch keine Idee außer etwas als 'anwesend' zu pingen was dran hängt.

waschbaerbauch · 22 Januar 2016, 08:25:11

Zitat von: majorshark am 22 Januar 2016, 07:08:40
Hallo.

Ich sage mal: Gefällt mir!

Interessant finde ich den Abfallkalender. Wo habe ich den da was überlesen bezüglich der Icons mit den verbleibende Tagen.

Das tut mir leid!

Im Ernst: Was genau bzgl. der Icons meinst du - verbleibende Tage, Farbe, die Icons Tonne/Sack selbst?

Die HTMLs habe ich jetzt mal beigefügt. Das Meiste hab ich mir ja aus den Vorlagen und Codeschnipseln zusammen gepuzzelt.
Dafür noch mal mein Dank an alle die hier etwas beisteuern. Ohne euch wäre mein FTUI nicht da wo es grad ist!