Kommentare 3

Eigener Bildschirmschoner mit HTML, CSS und Javascript

Vor langer Zeit habe ich bereits einmal über mein Wunsch nach einem Bildschirmschoner für Windows der eine Webseite anzeigt geschrieben.

node-webkitDank NW.js (früher node-webkit), einem Webkit Browser mit node.js, ist es mit etwas HTML, CSS und Javascript kein Problem eine Foto Slideshow im Vollbild anzuzeigen. Dazu startet NW.js im Kiosk-Modus. Durch NW.js ist der Bildschirmschoner für auch für Mac und Linux nutzbar.

Früher realisierte ich die Slideshow noch mit der Library Backstretch. Doch aus verschiedenen Gründen entstand über die Zeit der Wünsch nach mehr Flexibilität. Und so begann ich die Slideshow Funktion von Grund auf selbst zu schreiben.

Alles im Repository auf GitHub nachzuverfolgen und natürlich auch zum herunterladen. Oder hier in der Demonstration.

Die Feature Liste schaut mittlerweile so aus:

  • Die Fotos werden aus einem Ordner ausgelesen
  • Shuffle Modus (Reihenfolge wird beim Start einmalig gemischt)
  • Dauer der Bildanzeige und der Übergangsanimation sind frei einstellbar
  • Querformat Bilder werden mit imagefill.js Bildschirmfüllend angezeigt
  • Hochformat Bilder werden passend angezeigt und der leere Bereich rechts und links wird durch eine im Hintergrund liegende, weichgezeichnete, Version des Bildes ausgefüllt (wahlweise per CSS3 Blur Filter oder background-blur)
  • Kamera, Brennweite, Blende, Verschlusszweit und ISO aus den Exif Daten werden am Bildschirmrand angezeigt (exif-js)
  • Anzeige der evtl. vorhandenen geolocation aus den EXIF Daten auf einer kleinen Karte
  • Exif Daten und Karte können getrennt voneinander ausgeblendet werden

Screensaver_quer

Screensaver_hoch

3 Kommentare

  1. Timo

    Hey Marco,
    ich habe eine kurze Frage zu dem Script. Werden die Daten einfach aus einem Ordner ausgelesen, egal wieviele und mit welchem Dateinamen dort liegen? Gibt es Formateinschränkungen oder gehen auch PNGs?

    Beste Grüße
    Timo

    • Hallo Timo, ich muss gestehen es werden zwar jpg,gif und png aus dem Order ausgelesen aber getestet und im Einsatz habe ich es nur mit jpg.

    • Ach so und ja durch den Einsatz von NW.js wird der Ordner einfach ausgelesen. Es ist also nicht nötig eine Liste der Dateien zu pflegen.

Schreibe eine Antwort