ioBroker: vis-Screensaver bei Inaktivität

ioBroker: vis-Screensaver bei Inaktivität

12. Oktober 2020 5 Von Moritz Heusinger

Hallo zusammen,

nach langer Pause gibt es mal wieder einen neuen Blogbeitrag. Alternativ zum Blogbeitrag, gibt es die Thematik auch als Video.



Ich möchte euch einen Weg zeigen, wie Ihr einen „Viewwechsel“ bei Inaktivität in vis bewirken könnt. Der Hauptgedanke ist, einen Bildschirmschoner View z. B. für OLED Displays, wie sie in modernen Tablets verbaut sind (Stichwort: Burn-In), anzuzeigen. Viele Skripte, die ich bislang gesehen haben basieren lediglich auf dem Zeitpunkt des letzten Viewwechsels, jedoch kann es so passieren, dass der Screensaver während der Nutzung aktiv wird, da man sich seit längerem auf dem gleichen View befindet.

Für unser Vorgehen benötigen wir dieses mal keine Skript-Engine. Das Skript wird im edit-Modus des vis Editors hinzugefügt.

Das komplette Skript findet ihr auf GitHub, jedoch gehen wir nachfolgend noch auf Details ein.

1
2
3
var screensaverView = 'screensaver';
var prevScreensaverView = 'home'
var screensaverSeconds = 120;

In der ersten Zeile muss definiert werden, wie der View heißt, welcher als Bildschirmschoner angezeigt werden soll. Was ihr auf dem View konkret hinterlegt habt, spielt keine Rolle. Evtl. wollt ihr ein dunkles Bild, oder eine Animation um Burn-In zu verhindern. In der zweiten Zeile wird optional ein Home Screen definiert, dieser wird dann als zuletzt aktiver View genutzt, falls direkt auf dem Screensaver eingestiegen wurde und somit kein vorheriger View existiert. In der dritten Zeile muss die Anzahl an Sekunden definiert werden, nach welchen auf den Bildschirmschoner gewechselt werden soll.

1
2
3
4
5
6
7
8
9
var activateScreensaver = function () {
    screensaverTimeout = null;
    if (vis.activeView !== screensaverView) {
        // screensaver not active yet
        console.log('Enabled screensaver');
        prevScreensaverView = vis.activeView;
        vis.changeView(screensaverView);
    }
};

Die activateScreensaver Funktion wird aufgerufen, wenn Inaktivität über die definierte Zeit hinweg erkannt wurde. Sie deklariert den Timer als nicht mehr aktiv und prüft ob der aktive View bereits der gewünschte Bildschirmschoner-View ist, falls nicht wird der aktuelle View gespeichert (um später zu diesem zurückzukehren) und zum Bildschirmschoner-View gewechselt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var handleScreensaverEvents = function () {
    if (debounce) {
        return;
    }
   
    // debounce mousemove/touchmove events
    debounce = setTimeout(function () {
        debounce = null;
    }, 500);

    // clear timer if already running
    if (screensaverTimeout) {
        clearTimeout(screensaverTimeout);
    }
   
    if (screensaverView === vis.activeView) {
        // screensaver active and clicked -> disable
        console.log('Disable screensaver');
        vis.changeView(prevScreensaverView);
    }
   
    // restart timer
    screensaverTimeout = setTimeout(activateScreensaver, screensaverSeconds * 1000);
};

Die handleScreensaverEvents Funktion wird bei erkannter Aktivität aufgerufen. Zu Beginn wird geprüft ob diese erst kürzlich aufgerufen wurde und bricht die restliche Ausführung entsprechend ab um Ressourcen zu schonen. Falls dies nicht der Fall ist, wird die Ausführung forgesetzt und ein erneutes aufrufen für 500 ms verhindert. Wenn bereits ein screensaverTimer läuft, was immer der Fall sein sollte, außer wenn wir uns bereits auf dem Bildschirmschoner befinden, wird dieser resettet, da ja Aktivität erkannt wurde. Falls Aktivität erkannt wurde und wir uns derzeit auf dem Bildschirmschoner befinden, wird zum zuletzt aktiven View zurückgekehrt.

1
2
3
4
5
var screensaverTimeout = setTimeout(activateScreensaver, screensaverSeconds * 1000);

document.addEventListener('click', handleScreensaverEvents);
document.addEventListener('mousemove', handleScreensaverEvents);
document.addEventListener('touchmove', handleScreensaverEvents);

Zuletzt wird der Timeout bei Laden der Seite initial gestartet. Ebenfalls werden die Event Listener zum prüfen der Aktivität registriert. Es wird klicken, Bewegen der Maus bzw. der Finger auf dem Touchscreen erkannt.

Der Code zum Einbinden einer hochgeladenen Video-Datei in einem HTML-Widget auf dem Screensaver-View schaut exemplarisch wie folgt aus:

1
<video src="/vis.0/main/images/vis_screensaver.mp4" type="video/mp4" playsinline muted autoplay loop width=100%></video>

Falls euch der Beitrag gefallen hat, schreibt gerne einen Kommentar und zeigt mir auf jeden Fall eure Bildschirmschoner!

Falls Ihr Fragen, Wünsche, Videoideen oder andere Anregungen habt, stellt diese gerne in Form eines Kommentars oder schreibt eine Mail an info@iot-blog.net.