Automatischer Seitenwechsel / Tablet UI

Begonnen von rasti, 23 Mai 2020, 22:06:07

Vorheriges Thema - Nächstes Thema

rasti


Hallo,

ich habe bei mir auf allen Tablet UI Seiten den folgenden Java-Code integriert, der dafür sorgt,
dass nach einer bestimmten Zeit automatisch zur Hauptseite gewechselt wird.

<script>
        var timer = setTimeout(function() {
            window.location='index.html'
        }, 180000);
    </script>


Das funktioniert auch. Nur nervt es z.B. bei der Steuerung von TV und Hifi,
wo man schon mal länger auf der Seite verweilt, wenn das Skript dann "völlig unerwartet"
zur Hauptseite wechselt.

Ich würde das gerne abändern in eine Funktion "Timeout nur bei Inaktivität", d.h.
wenn der User keinen Button drückt oder die Maus (oder Finger über Touchscreen) bewegt.

Wie sieht dann der Code dafür aus ?

Viele Grüße

Ralf




amenomade

So hab ich bei mir gemacht
<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");
window.location = "https://ip:port/fhem/ftui/";
};
}

function resetTimer() {
clearTimeout(t);
t = setTimeout(returnHome, 120000);
// 1000 milisec = 1 sec
}
</script>

Die Funktion returnHome brauchst Du nicht in der Form (ich nutze Pagebutton), sondern ähnlich wie deine jetzige Form.
Aber prinzipiell ist da, was Du brauchst.
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

dirk.k

Hallo,
spannende Idee.
Wo genau müsste ich den code einfügen?
Ich habe ein Mehrstufiges FTUI-menu (pageButton) und möchte den Rücksprung nur von einigen wenigen Seiten.
Daher habe ich es in den HEAD Bereich der Unterseite eingebaut.
Dort scheint es aber nicht zu funktionieren.

PS: Sollte ich in der JavaScriptKonsole nicht das "resetTimer" sehen ... bei maus-tastatur-Aktivität?

rasti

Zitat von: dirk.k am 24 Mai 2020, 10:13:08
Hallo,
spannende Idee.
Wo genau müsste ich den code einfügen?
Ich habe ein Mehrstufiges FTUI-menu (pageButton) und möchte den Rücksprung nur von einigen wenigen Seiten.
Daher habe ich es in den HEAD Bereich der Unterseite eingebaut.
Dort scheint es aber nicht zu funktionieren.

PS: Sollte ich in der JavaScriptKonsole nicht das "resetTimer" sehen ... bei maus-tastatur-Aktivität?

Hallo,
bei mir steht es direkt unter dem Body-Tag
Viele Grüße

rasti

Zitat von: amenomade am 24 Mai 2020, 02:01:21
So hab ich bei mir gemacht
.........
}
</script>

Die Funktion returnHome brauchst Du nicht in der Form (ich nutze Pagebutton), sondern ähnlich wie deine jetzige Form.
Aber prinzipiell ist da, was Du brauchst.


Hallo,

könntest du mir bitte beim Code weiterhelfen.....

Meine HTML-Kenntnisse sind eben nur gaaanz rudimentäte html-basics
und js verstehe ich nur bedingt.... auch nach kurzem Einlesen in z.B.
https://wiki.selfhtml.org/wiki/JavaScript/Window/setTimeout
habe ich u.a. die Syntax noch nicht begriffen.

Also das hier funktioniert jedenfalls nicht :

<script type="text/javascript">

      var t;

var timer= setTimeout(function() {
            window.location='index.html'
        }, 12000);

window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
document.onclick = resetTimer;
document.onmousedown = resetTimer;

function resetTimer() {
clearTimeout(t);
// 1000 milisec = 1 sec
}
</script>



Was muss ich da ändern, damit es das tut was ich will ?
Sorry für die bestimmt blöde Frage  :-[

dirk.k

Hallo,
das funktioniert nur, wenn ich es im obersten "index.html" einbinde.
Im HEAD o. BODY einer "PageButton-Sub-Page" eingebaut, tut sich gar nichts.
Noch eine Idee, wie ich dort ein Seitenspezifischen Javascript zum laufen bekomme?

rasti

Zitat von: dirk.k am 24 Mai 2020, 13:27:32
Hallo,
das funktioniert nur, wenn ich es im obersten "index.html" einbinde.
Im HEAD o. BODY einer "PageButton-Sub-Page" eingebaut, tut sich gar nichts.
Noch eine Idee, wie ich dort ein Seitenspezifischen Javascript zum laufen bekomme?

Dazu kann ich leider nichts sagen. Ich habe keine Subpage-Hierarchie. Mal abgesehen davon,
dass ich hier und da externe Inhalte als IFRAME einbinde ist bei mir jede Tablet-UI-Seite
eine "eigenständige vollberechtigte HTML-Seite"

amenomade

Wenn Du:
var timer= setTimeout( machst, dann heisst dein Timer nicht t sondern timer

Dann heisst es in resetTimer nicht "clearTimeout(t)" sondern "clearTimeout(timer)".
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

rasti

Zitat von: amenomade am 24 Mai 2020, 16:35:34
Wenn Du:
var timer= setTimeout( machst, dann heisst dein Timer nicht t sondern timer

Dann heisst es in resetTimer nicht "clearTimeout(t)" sondern "clearTimeout(timer)".

Diese Variante hatte ich auch schon - geht aber auch nicht (wechselt die Seite nie)

<script type="text/javascript">

var timer= setTimeout(function() {
            window.location='index.html'
        }, 12000);

window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
document.onclick = resetTimer;
document.onmousedown = resetTimer;

function resetTimer() {
clearTimeout(timer);
// 1000 milisec = 1 sec
}



</script>

amenomade


Zitat von: dirk.k am 24 Mai 2020, 13:27:32
Hallo,
das funktioniert nur, wenn ich es im obersten "index.html" einbinde.
Im HEAD o. BODY einer "PageButton-Sub-Page" eingebaut, tut sich gar nichts.
Noch eine Idee, wie ich dort ein Seitenspezifischen Javascript zum laufen bekomme?

Das muss ja  im Head der index.html Hauptseite stehen.
Seiten spezisisch? Dann würde  ich in der resetTimer Funktion zuerst testen, was window.location.hash für einen Wert hat, und nur dann das clearTimeout machen, wenn es mich interessiert.
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

amenomade

#10
Zitat von: rasti am 24 Mai 2020, 16:49:59
Diese Variante hatte ich auch schon - geht aber auch nicht (wechselt die Seite nie)

<script type="text/javascript">

var timer= setTimeout(function() {
            window.location='index.html'
        }, 12000);

window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
document.onclick = resetTimer;
document.onmousedown = resetTimer;

function resetTimer() {
clearTimeout(timer);
// 1000 milisec = 1 sec
}



</script>

Weil Du nur einmal das setTimeout machst. Sobald resetTimer gerufen wird (es reicht eine Bewegung der Maus), hast Du gar kein Timer mehr. Guck mal genauer mein Code hieroben: das ist die resetTimer Funktion, die das Timer neu setzt.
Pi 3B, Alexa, CUL868+Selbstbau 1/2λ-Dipol-Antenne, USB Optolink / Vitotronic, Debmatic und HM / HmIP Komponenten, Rademacher Duofern Jalousien, Fritz!Dect Thermostaten, Proteus

dirk.k

Danke, mit den Tips hat es jetzt funktioniert.
Wenn man weis, wonach man suchen muss, findet man auch im Forum die Info, dass JavaScript auf Sub-pages nicht funktioniert.
meine Lösung für spezielle-pages:
<!-- Zurück zur Startseite - von bestimmten pages ---> 
<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 == "2_demo_2") {
var homeButton = document.getElementById('buttonHome');
$(homeButton).trigger("toggleOn");
window.location = "index.html";
};
}
function resetTimer() {
clearTimeout(t);
t = setTimeout(returnHome, 6000);
// 1000 milisec = 1 sec
}
</script>