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?
Wenn Du https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab (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 (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ß
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
Zeig mal deine Konfiguration
Du meinst meine index.html ? ???
Hi,
falls du zufällig Fully als Browser einsetzt, der kann das unabhängig von FHEM auch ;-)
Grüße
Achim
Moin,
ich verwende Fully, ja.
Vielen Dank für den Hinweis.
Grüße 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>
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>
Die gesamte Datei bitte, mit <head> <meta> und <body> Tags usw.
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Ü</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>
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>
Hat funktioniert. Super.
Vielen Dank.
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
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
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
ZitatLiegt das eventuell an falschen Fully Browser Einstellungen? ::)
Vermutlich ja, da ich auch Fully auf der Wandtablet nutze und kein Problem habe.
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
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
Nur in der index Datei
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 (https://forum.fhem.de/index.php/topic,48862.msg714226.html#msg714226).
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
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?