automatisch zu Startseite wechseln

Begonnen von stefan-dd, 30 April 2017, 21:53:26

Vorheriges Thema - Nächstes Thema

stefan-dd

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

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:

<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ß
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Mave

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

Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Mave


CBSnake

Hi,

falls du zufällig Fully als Browser einsetzt, der kann das unabhängig von FHEM auch ;-)
Grüße
Achim
FHEM auf Debian 10, HM-Wlan, JeeLink-Wlan, Wlanduino, ConBee, TP-Link Steckdose, GHoma Steckdosen, Shelly Steckdosen

Mave

Moin,

ich verwende Fully, ja.

Vielen Dank für den Hinweis.

Grüße Mave

amenomade

Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Mave


<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

Und so habe ich Deinen Code verwendet:


<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

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

Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Mave

Okay, here we go...

<!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

Das Javascript sucht auf der Seite ein Item mit Id "xxxxx":
var homeButton = document.getElementById('xxxxx');
und klickt drauf:
$(homeButton).trigger("toggleOn");

Deswegen musst Du noch dem entspr Pagebutton dieses Id geben:
<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>
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

Mave

Hat funktioniert. Super.

Vielen Dank.

Mave

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