Kommentare 1

Bildschirmschoner in HTML, CSS und Javascript als Webseite

… mit Hilfe von Webkit und Node.JS.

Schon lange bin ich auf der Suche nach einem einfachen Bildschirmschoner (für Windows) der mir gegebene Bilder in einer „Fullscreen-Slideshow“ anzeigt. Der bei XP mitgelieferte Bildschirmschoner zeigte die Bilder nicht im Vollbild. Dies hat sich bei Windows 7 geändert, jedoch bietet der Bildschirmschoner neben der Angabe eines Bilder Ordners nur drei feste Wechselintervalle und einen Random-Schalter.

Da sich meine Programmierkenntnisse auf Web-Sprachen beschränken, suchte ich lange nach einem Weg eine Webseite als Bildschirmschoner anzuzeigen. Es gibt einige mehr oder weniger aktuelle Screensaver zum Download – die jedoch alle auf den IE setzten. Und dass man sich als Entwickler damit keinen Gefallen tut weiß jeder.

Jetzt bin ich auf node-webkit gestoßen. Ein auf Chromium basierender Browser mit eingebautem node.js.

Chromium plus Nodejs

Dafür habe ich Backstretch für eine Fullscreen-Slideshow über den gesamte Background der Seite genutzt. Da sich der Bildschirmschoner bei Maus und Tastatur Eingaben beenden soll, wird mit jQuery auf die Events „mousemove“, „mousedown“ und „keydown“ gewartet und im Fall ein window.close() ausgeführt. Bei Webkit ist dies einfach so möglich. Will mann den Screensaver mit Firefox nutzen, benötigt dom.allow_scripts_to_close_windows unter about:config gesetzt werden. Nur die Pfeiltasten rechts und links sowie die Leertaste bilden eine Außnahme und können zur Steuerung der Slideshow genutzt werden.

Durch das in node-webkit eingebaute Node.js, ist es möglich mit Javascript z.B. den Ordner Inhalt des Bilder Ordners auszulesen. Ohne dafür ein PHP zurückzugreifen.

Github Repo: https://github.com/sinky/html5-screensaver-node-webkit

1 Kommentar

  1. Pingback: Eigener Bildschirmschoner mit HTML, CSS und Javascript – my-azur.de

Schreibe eine Antwort