automatisch zu Startseite wechseln

stefan-dd · 30 April 2017, 21:53:26

Hallo,
ich habe ein Wanddisplay mit Tablet UI und mehreren Seiten zur Auswahl.
Die Startseite ist der Standard. Die Unterseiten z.b. detailliertes Wetter sollen nach einer gewissen Zeit wieder verschwinden und es soll wieder automatisch die Startseite angezeigt werden.
Leider habe ich gar keinen Plan wie man so etwas realisiert.
Meine Vorstellungen sind entweder über Fhem per Timer oder über Programmcode in der HTML Seite.
Was macht man so etwas?

amenomade · 30 April 2017, 23:51:37

Wenn Du https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab als Navigation nutzt, kannst Du data-return-time setzen.

Mit Pagebutton https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton musst Du ein bisschen Javascript in deinem index.html ( in head ) schreiben:

Code Auswählen

	<script type="text/javascript">
		var t;
		window.onload = resetTimer;
		// DOM Events
		document.onmousemove = resetTimer;
		document.onkeypress = resetTimer;
		document.onclick = resetTimer;
		document.onmousedown = resetTimer;
	
		function returnHome() {
			var hash= window.location.hash.replace('#', '').replace('.html', '');
			if (hash != "" && hash != "page_content_home") {
				var homeButton = document.getElementById('buttonHome');
				$(homeButton).trigger("toggleOn");
			};
		}
	
		function resetTimer() {
			clearTimeout(t);
			t = setTimeout(returnHome, 120000);
			// 1000 milisec = 1 sec
		}
	</script>

Gruß

Mave · 05 November 2017, 08:10:57

Moin zusammen,

was muss man in dem Script auf die eigene Konfiguration anpassen?

Ich bekomme es leider nicht zum Laufen, habe aber großes Interesse an dieser Funktion.

Vielen Dank.

Grüße Mave

amenomade · 05 November 2017, 12:37:41

Zeig mal deine Konfiguration

Mave · 05 November 2017, 12:39:00

Du meinst meine index.html ?

CBSnake · 05 November 2017, 12:42:40

Hi,

falls du zufällig Fully als Browser einsetzt, der kann das unabhängig von FHEM auch

Grüße
Achim

Mave · 05 November 2017, 12:43:52

Moin,

ich verwende Fully, ja.

Vielen Dank für den Hinweis.

Grüße Mave

amenomade · 05 November 2017, 13:13:49

Zitat von: Mave am 05 November 2017, 12:39:00
Du meinst meine index.html ?

Ja

Mave · 05 November 2017, 19:59:16

Code Auswählen


<div class="cell">                                    
    <div data-type="pagebutton" data-url="#home.html" data-load="#home" data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*/||.*#home.html)" data-icon="fa-home" class="nocache cell"></div>
    <div data-type="label" class="top-narrow-10">Home</div>
</div>

<div class="page" id="home"></div>

Mave · 05 November 2017, 20:02:40

Und so habe ich Deinen Code verwendet:

Code Auswählen


	<script type="text/javascript">
		var t;
		window.onload = resetTimer;
		// DOM Events
		document.onmousemove = resetTimer;
		document.onkeypress = resetTimer;
		document.onclick = resetTimer;
		document.onmousedown = resetTimer;
	
		function returnHome() {
			var hash= window.location.hash.replace('#', '').replace('.html', '');
			if (hash != "" && hash != "home") {
				var homeButton = document.getElementById('home');
				$(homeButton).trigger("toggleOn");
			};
		}
	
		function resetTimer() {
			clearTimeout(t);
			t = setTimeout(returnHome, 10000);
			// 1000 milisec = 1 sec
		}
	</script>

amenomade · 05 November 2017, 20:06:07

Die gesamte Datei bitte, mit <head> <meta> und <body> Tags usw.

Mave · 07 November 2017, 06:49:10

Okay, here we go...

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

	<script type="text/javascript">
		var t;
		window.onload = resetTimer;
		// DOM Events
		document.onmousemove = resetTimer;
		document.onkeypress = resetTimer;
		document.onclick = resetTimer;
		document.onmousedown = resetTimer;
	
		function returnHome() {
			var hash= window.location.hash.replace('#', '').replace('.html', '');
			if (hash != "" && hash != "home") {
				var homeButton = document.getElementById('home');
				$(homeButton).trigger("toggleOn");
			};
		}
	
		function resetTimer() {
			clearTimeout(t);
			t = setTimeout(returnHome, 10000);
			// 1000 milisec = 1 sec
		}
	</script>

    <title>FHEM-Tablet-UI</title>
    
</head>

<body>
    <div class="gridster">
        <ul>
        
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="5">
                <header>HAUPTMEN&Uuml;</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">                                    
                            <div data-type="pagebutton" data-url="#home.html" data-load="#home" data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*/||.*#home.html)" data-icon="fa-home" class="nocache cell"></div>
                            <div data-type="label" class="top-narrow-10">Home</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">                    
                            <div data-type="pagebutton" data-url="#licht.html" data-load="#licht" data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*#licht.html)" data-icon="fa-lightbulb-o" class="nocache cell"></div>
                            <div data-type="label" class="top-narrow-10">Licht</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">                    
                            <div data-type="pagebutton" data-url="#rollladen.html"	data-load="#rollladen"	data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*#rollladen.html)" data-icon="oa-fts_shutter_50" class="nocache cell"></div>
                            <div data-type="label" class="top-narrow-10">Rollladen</div>
                        </div>
                    </div>                    
                    <div class="row">
                        <div class="cell">                    
                            <div data-type="pagebutton" data-url="#heizung.html" data-load="#heizung" data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*#heizung.html)" data-icon="oa-sani_heating" class="nocache cell"></div>
                            <div data-type="label" class="top-narrow-10">Heizung</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">                    
                            <div data-type="pagebutton" data-url="#sicherheit.html"	data-load="#sicherheit"	data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*#sicherheit.html)" data-icon="oa-secur_locked" class="nocache cell"></div>
                            <div data-type="label" class="top-narrow-10">Sicherheit</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">                    
                            <div data-type="pagebutton" data-url="#sonstiges.html" data-load="#sonstiges" data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*#sonstiges.html)" data-icon="oa-edit_settings" class="nocache cell"></div>
                            <div data-type="label" class="top-narrow-10">Sonstiges</div>
                        </div>
                    </div>                                                            
                </div>
            </li>


            
            <li data-row="2" data-col="2" data-sizex="6" data-sizey="4">
                <div class="page" id="home"></div>
              	<div class="page" id="licht"></div>
                <div class="page" id="rollladen"></div>                
                <div class="page" id="heizung"></div>
                <div class="page" id="sicherheit"></div>
                <div class="page" id="sonstiges"></div>                                
           </li>

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

amenomade · 08 November 2017, 09:18:53

Das Javascript sucht auf der Seite ein Item mit Id "xxxxx":

Code Auswählen

var homeButton = document.getElementById('xxxxx');
und klickt drauf:

Code Auswählen

$(homeButton).trigger("toggleOn");

Deswegen musst Du noch dem entspr Pagebutton dieses Id geben:

Code Auswählen

<div id="xxxxx" data-type="pagebutton" data-url="#home.html" data-load="#home" data-off-background-color="#606060" data-off-color="#222222" data-on-background-color="#AA6900" data-on-color="#222222" data-active-pattern="(.*/||.*#home.html)" data-icon="fa-home" class="nocache cell"></div>

Mave · 08 November 2017, 20:37:30

Hat funktioniert. Super.

Vielen Dank.

Mave · 11 November 2017, 08:25:59

Hallo amenomade,

eine Frage hätte ich noch:

Wenn ich das Tablet auf einer Unterseite stehen lasse, wechselt es nach 1 min auf die Home Seite. So weit so gut.

Wenn ich jetzt das Tablet aktualisiere, dann springt es wieder auf die ursprüngliche Unterseite.

Der ToggleOn auf die Home Seite scheint also nicht gespeichert worden zu sein, oder?

Vielen Dank für Deine Hilfe.

Grüße Mave

amenomade · 11 November 2017, 10:04:03

Ja das ist auch so bei mir. Das stört mich so nicht, deswegen habe ich nicht weiter gesucht. Vielleicht muss man noch das Javascript ein bisschen anpassen: der ladet zwar den "home" Content, aber ändert die Url nicht. Deswegen beim Neuladen die Unterseite wieder. Aber nach dem Timeout springt er doch wieder auf Home. Deswegen... Ziel für mich erreicht

Mave · 11 November 2017, 16:51:19

Okay, habe ich verstanden.

Kann ich auch damit leben. Im Normalfall braucht es ja auch keine Aktualisierung.

Bei meinen Tests ist mir aber noch etwas anderes aufgefallen:

Auf meinem Windows Laptop mit Chrome Browser schaltet FTUI nach einer Minute auf die Home Seite.
Auf meinen Android Tablets mit Fully Browser funktioniert das nur, wenn ich die aktuelle Unterseite aktualisiere und dann 1 Minute warte. Dann schaltet FTUI auf die Home Seite.
Wenn ich dagegen ohne Aktualisierung von der Home Seite auf einen Unterseite umschalte, kann ich warten, bis ich schwarz werde. FTUI schaltet nicht automatisch auf die Home Seite.

Liegt das eventuell an falschen Fully Browser Einstellungen?

Grüße Mave

amenomade · 11 November 2017, 17:35:24

ZitatLiegt das eventuell an falschen Fully Browser Einstellungen?

Vermutlich ja, da ich auch Fully auf der Wandtablet nutze und kein Problem habe.

Fixel2012 · 12 November 2017, 00:42:40

Hallo,

danke für das nützliche script.

Konnte es bei mir zum laufen bringen, allerdings ist die darstellung anders, als wenn ich mit der Hand klicken würde.

Jedes angeklickte menü, in dem man sich befindet, sollte eigentlich Rot hinterlegt sein. Wenn das script den klick "imitiert" bleibt das Rote dort, wo die Seite davor offen war.

Die Bilder sollten das besser erklären. Habt ihr dafür eine Lösung bzw eine Ahnung, warum dies auftritt?

Danke und Gruß,

Fixel

Mave · 12 November 2017, 09:14:31

amenomade,

ich muss zur Sicherheit nochmal nachfragen:
Hast Du das Script nur in der index Datei oder auch in jeder Unterseite?

Vielen Dank.

Grüße Mave

amenomade · 12 November 2017, 11:53:38

Nur in der index Datei

Fixel2012 · 12 November 2017, 14:37:33

Zitat von: Fixel2012 am 12 November 2017, 00:42:40
Hallo,

danke für das nützliche script.

Konnte es bei mir zum laufen bringen, allerdings ist die darstellung anders, als wenn ich mit der Hand klicken würde.

Jedes angeklickte menü, in dem man sich befindet, sollte eigentlich Rot hinterlegt sein. Wenn das script den klick "imitiert" bleibt das Rote dort, wo die Seite davor offen war.

Die Bilder sollten das besser erklären. Habt ihr dafür eine Lösung bzw eine Ahnung, warum dies auftritt?

Danke und Gruß,

Fixel

Ich konnte mein Problem lösen, siehe hier.

amenomade · 12 November 2017, 18:48:10

Sollte eigentlich auch dieses Problem lösen:

Zitat von: Mave am 11 November 2017, 08:25:59
Hallo amenomade,

eine Frage hätte ich noch:

Wenn ich das Tablet auf einer Unterseite stehen lasse, wechselt es nach 1 min auf die Home Seite. So weit so gut.

Wenn ich jetzt das Tablet aktualisiere, dann springt es wieder auf die ursprüngliche Unterseite.

Der ToggleOn auf die Home Seite scheint also nicht gespeichert worden zu sein, oder?

Vielen Dank für Deine Hilfe.

Grüße Mave

Fixel2012 · 16 Dezember 2017, 13:14:23

Hallo,

habe das script nun seit einiger Zeit am laufen.
Manchmal funktioniert es und manchmal wiederum nicht.

Auf dem PC scheint es allerdings immer zu funktionieren. Kann das jemand bestätigen, oder hat eine Erklärung dafür?