[FHEM-Tablet-UI] User-Demos

somansch · 14 Juni 2019, 09:09:10

Zitat von: PingPong am 14 Juni 2019, 08:58:06
Hallo Somansch,

ich habe nochmal eine Frage.
Wenn ich mir Temperatur-/Luftfeuchtigkeitsseite anschaue, fällt auf, dass die Labels nicht 100% übereinander stehen.
Hast Du eine Idee, wie sich das beheben ließe?

Viele Grüße
Marc

Poste mal den aktuellen Code und einen Screenshot.

PingPong · 14 Juni 2019, 09:14:50

Das war ja mal ne schnelle Antwort

Bitte sehr...

Code Auswählen

<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_clima">
		<div class="phone-back-btn">
			<div data-type="link" data-url="#content_home.html" data-load="#content_home" data-color="white" data-icon="mi-chevron_left" class="large"></div>
		</div>

		<div class="hbox">
			<div class="vbox phone-width">
				<div class="card lift">
					<header>Temperatur</header>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"sz_Durchschnittstemperatur","var_name":"Schlafzimmer","var_window":"sz.alle_Fenster"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"ke_Durchschnittstemperatur","var_name":"Keller","var_window":"Kellerfenster"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Waschkeller","var_name":"Waschkeller","var_window":"Fenstersensor_Waschkeller"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Wohnzimmer","var_name":"Wohnzimmer","var_window":"wz.alleFenster"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"lu_Durchschnittstemperatur","var_name":"Sienna","var_window":"lu.alle_Fenster"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"si_Durchschnittstemperatur","var_name":"Luca","var_window":"si.alle_Fenster"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"na_Durchschnittstemperatur","var_name":"Nayla","var_window":"Fensterkontakt_Nayla"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Bad","var_name":"Bad","var_window":"Fensterkontakt_Bad"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"Temperatursensor_Dachboden","var_name":"Dachboden","var_window":"Fensterkontakt_Dachboden"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"flUG.Temperatur","var_name":"Flur UG"}'></div>
					</section>
					<section>
						<div data-template="template_temperature.html" data-parameter='{"var_device":"Flur_OG_Temperatur","var_name":"Flur OG"}'></div>
					</section>
				</div>
			</div>

			<div class="vbox phone-width">
				<div class="card lift">
					<header>Luftfeuchte</header>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"sz_Durchschnittstemperatur","var_name":"Schlafzimmer"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"HM_359193_Climate","var_name":"Keller"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Waschkeller","var_name":"Waschkeller"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Wohnzimmer","var_name":"Wohnzimmer"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"lu_Durchschnittstemperatur","var_name":"Sienna"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"si_Durchschnittstemperatur","var_name":"Luca"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"na_Durchschnittstemperatur","var_name":"Nayla"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Bad","var_name":"Bad"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"Temperatursensor_Dachboden","var_name":"Dachboden"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"flUG.Temperatur","var_name":"Flur UG"}'></div>
					</section>
					<section>
						<div data-template="template_humidity.html" data-parameter='{"var_device":"Flur_OG_Temperatur","var_name":"Flur OG"}'></div>
					</section>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

Code Auswählen

<!DOCTYPE html>
<html>
<head>
	<!-- FHEM Tablet UI V2.6 -->
	<!-- Template für Homematic Schaltaktor 4-fach HM-LC-SW4-DR zur Schaltung des Heizkreises (Fußbodenheizung) in Verbindung mit Wandthermostat HM-TC-IT-WM-W-EU -->
</head>
<body>
	<div class="row">
		<div class="cell left-align left-space">
			<div data-type="symbol" data-device="var_device" data-off-color="flx_blue"  data-icon="wi wi-humidity" class="big compressed"></div>
		</div>
		<div class="cell-80 left-align">
			<div class="big">var_name</div>
		</div>
		<div class="cell right-align right-space">
			<div data-type="label" data-device="var_device" data-get="humidity" data-unit="%" data-fix="1" class="bigger"></div>
			<div data-type="klimatrend" data-device="var_device" data-get="statHumidityTendency" data-refperiod="1" class="inline readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
			<div data-type="klimatrend" data-device="var_device" data-get="statHumidityTendency" data-refperiod="2" class="inline readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
			<div data-type="klimatrend" data-device="var_device" data-get="statHumidityTendency" data-refperiod="3" class="inline readonly" data-stagnating-color="rgb(223,210,202)" data-rising-color="rgb(225,112,0)" data-highmark-rising-color="rgb(225,112,0)" data-falling-color="rgb(0,161,222)" data-highmark-falling-color="rgb(0,161,222)"></div>
		</div>
	</div>
</body>
</html>

wobei man das auch auf Deinem Screenshot sieht, wenn man genau schaut.

somansch · 14 Juni 2019, 09:32:26

Ich habe das inzwischen auf "hdm-flexbox-container" umgestellt (in der user.css). Dort kann man sehr flexibel die feste prozentuale Aufteilung definieren. Hier meine aktuellen Templates.

Viele Grüße
Andreas

PingPong · 14 Juni 2019, 09:39:34

Hallo Andreas,

klasse, vielen lieben Dank für Deine Hilfe.
Jetzt sieht es besser aus.

Viele Grüße
Marc

jnewton957 · 20 Juni 2019, 15:49:12

Hallo,

ich suche nach einer Möglichkeit ein Regenradar in FTUI zu integrieren.

Den DWD Film habe ich schon.

Aber der ist ja "nur" die letzten Stunden bis jetzt!

Ich habe bei wetteronline einen Radar gesehen, der auch 2 Stunden in die Zukunft prognostiziert.

https://www.wetteronline.de/regenradar/koeln?mode=interactive&wrg=10513&wrh=true&wrn=S8O2bG4=&wrx=50.95,6.95&wry=50.95,6.95&wro=true

Wie kann ich den einbinden. Der hat eben kein gif.

Danke
Jörg

moonsorrox · 20 Juni 2019, 16:10:12

das kannst du mit einem iframe machen und den in der Größe anpassen

Code Auswählen

<div class="center"><iframe src="https://www.wetteronline.de/regenradar/koeln?mode=interactive&wrg=10513&wrh=true&wrn=S8O2bG4=&wrx=50.95,6.95&wry=50.95,6.95&wro=true" width="400" height="400"></iframe></div>

jnewton957 · 20 Juni 2019, 22:15:55

Zitat von: moonsorrox am 20 Juni 2019, 16:10:12
das kannst du mit einem iframe machen und den in der Größe anpassen
Code Auswählen Erweitern
<div class="center"><iframe src="https://www.wetteronline.de/regenradar/koeln?mode=interactive&wrg=10513&wrh=true&wrn=S8O2bG4=&wrx=50.95,6.95&wry=50.95,6.95&wro=true" width="400" height="400"></iframe></div>

Danke.
... und wenn ich nur die Karte haben möchte

Was muss ich da machen ??

Danke
Jörg

D3ltorohd · 13 August 2019, 21:30:10

Hallo zusammen,
ich weiß nicht ob ich hier richtig bin. Aber irgendwie komm ich hier mit meinem FTUI nicht so wirklich voran. Ich hab mal ein wenig mit dem Example gespielt was dabei war, dann mit dem von Überbeck. Ich hab hier auch schon ein wenig durchgestöbert und mir Screens angeschaut. Aber so richtig weiter komme ich noch nicht. Ich hab mir das in etwa so vorgestellt...

So nen Art Screensaver wie bei Ueberbeck, wobei wenn das Tablet aus ist wenn man es nicht nutzt bringt mir das ja nichts, es soll angehen, wenn man davor läuft. Dann lande ich ja eh auf der Übersichtseite, die wie folgt aufgebaut sein soll.

Wettervorhersage Heute, morgens mittags abends und vllt Morgen noch dazu. Wenn man auf die Kachel klickt kommt man zum Wetter Tab. Wo dann für die nächsten Tage das Wetter vorher gesagt wird.

Kalendereinträge, Termine, Müllgeschichte, Geburtstage. Ob Türen, Fenster offen sind. Vllt auch Anzeige wie viele ? Wenn man dann die Kachel anklickt gelangt man auf die Seite Türen und Fenster bei denen alle aufgelistet sind, vllt hier noch mit Rollo Steuerung, für die einzelnen Fenster.

FritzMonitor, Anrufe und Co.

Homestatus durch den Eco Taster von Max und die Einstellung der Heizung bzw. der WT's

Ginge das alles ohne Menü, das wenn ich auf so eine Kachel klicke, ich dann auf die nächste Seite gelange, dort gibt es dann nur einen Back button, der mich auf die Startseite bringt.

Aber irgendwie schaff ich nicht mal den Anfang. Bin so durcheinander, weiß nicht so recht wie das alles aussehen soll. Finde von allem was ich gesehen habe etwas toll, das andere wieder nicht. Schwierig wenn man da nicht in der Materie steckt, bzw einem das liegt.

Wie sollte ich Anfangen, was schlagt ihr mir vor, gibt es vllt doch ein Template was mein obiges so in etwas bietet und ich das noch nicht auf den über 70 Seiten gesehen habe ?

amenomade · 13 August 2019, 21:57:20

Auch wenn Du nicht der este bist, der hier OT ist, bist Du tatsächlich im falschen Thread. Hier heisst es "User-Demos"

Wenn Du mit TabletUI noch nicht wirklich angefangen hast, schlage ich vor FUIP zu schauen.
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter

D3ltorohd · 14 August 2019, 12:34:14

Zitat von: amenomade am 13 August 2019, 21:57:20
Auch wenn Du nicht der este bist, der hier OT ist, bist Du tatsächlich im falschen Thread. Hier heisst es "User-Demos"

Wenn Du mit TabletUI noch nicht wirklich angefangen hast, schlage ich vor FUIP zu schauen.
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter

Das klingt ja super. Das werde ich heute Abend gleich mal ausprobieren. Vielen Dank für den Tipp. Hab ich gar nicht auf dem Schirm gehabt. Damit bekomm ich vllt was hin.

Kuehnhackel · 28 November 2019, 17:45:18

Na, dann will ich meins auch mal beisteuern.

Der LKW symbolisiert die Müllabholung am gleichen Tag.
Der Container zeigt die nächste Abholung an.

Ich möchte mich auch gleichzeitig für alle Hilfestellungen und Anregungen hier bedanken.

jnewton957 · 01 Dezember 2019, 20:55:24

Zitat von: Kuehnhackel am 28 November 2019, 17:45:18
Na, dann will ich meins auch mal beisteuern.

Der LKW symbolisiert die Müllabholung am gleichen Tag.
Der Container zeigt die nächste Abholung an.

Ich möchte mich auch gleichzeitig für alle Hilfestellungen und Anregungen hier bedanken.

Wie get die Oberfläche damit um, wenn zwei Dinge abgeholt werden (z.b. Hausmüll und Bio) und eben auch zukünftig (Container) mehrere Dinge abgeholt werden.

2,. Frage
Hast du auch noch andere Oberflächen. Du baust anscheinend viel Aktoren auf die Seite. Seht schön und trotzdem übersichtlich

Kuehnhackel · 18 Dezember 2019, 14:47:35

Hallo jnewton957,

sorry dass ich mich erst jetzt melde.

Im Anhang siehst du wie der "LKW" mit zwei Zeilen "umgeht". Zwei Zeilen würdest du auch beim Container hinbekommen. Dann könnte man die Resttage davor oder dahinter setzen.

Wie du im linken Menue siehst habe ich noch mehrere Untermenues.
Das sind im einzelnen:
Kompletter Müllkalender
Heizung, das braucht noch was und muss erst noch fertigstellen
Wetter 5-Tage-Vorhersage, da muss noch das Layout angepasst werden
TV-Programm im Augenblick, mit Iframe eingebunden
TV-Programm ab 20:15, mit Iframe eingebunden
Es wird dann noch irgendwann 1. OG und Garten dazukommen. Wobei der Garten dann als Zeichnung im Hintergrund liegt und die Lampen, Teich usw eingetragen sind.

Liebe Grüße

Ralf

Wasserwerk33 · 19 Dezember 2019, 15:40:48

Hallo Leute.
Könnte mir vielleicht jemand sagen was ich für eine Zeile eintragen muss wenn ich die Symbole "mf1-cloud-alert" sichtbar machen möchte??

den sie werden bei mir nicht angezeigt?
Habe das Unwettermodul länger nicht benutzt und nun werden sie leider nicht anzeigt.

In Fhem gibt es einen Beitrag leider nur auch ohne Ergebnis.
Danke schon mal im vorraus.

Kuehnhackel · 18 Januar 2020, 22:33:38

Zitat von: Wasserwerk33 am 19 Dezember 2019, 15:40:48
Hallo Leute.
Könnte mir vielleicht jemand sagen was ich für eine Zeile eintragen muss wenn ich die Symbole "mf1-cloud-alert" sichtbar machen möchte??

den sie werden bei mir nicht angezeigt?
Habe das Unwettermodul länger nicht benutzt und nun werden sie leider nicht anzeigt.

In Fhem gibt es einen Beitrag leider nur auch ohne Ergebnis.
Danke schon mal im vorraus.

mf1-cloud-alert ist wohl "selber-gebaut", wirst du so nicht finden, es sei denn du fragst den Ersteller,

Code Auswählen

https://forum.fhem.de/index.php?topic=64334.150 Antwort 161 - User octek0815,
ob er es dir gibt. Dann muss du das dann einbinden.

Wenn Du in den Browser:

Code Auswählen

http://adressevondeinemFHEM:8083/fhem/www/tablet/icons_table.html
eingibst, erhälst du eine Seite, wo alle deine Icons dargestellt werden. Diese kannst du dann demtensprechend "verarbeiten".

Alle anderen musst du manuell eintragen. Aber da hilft dir das Wiki oder Forum weiter.