## Peter's Web Galerie (Thumbnailshow und Slideshow)

Copyright peter@danninger.eu Version: 06.09.2019 English version

Warum eine eigene Thumbnailshow und Slideshow für Bild-Präsentationen im WWW ?
Es gibt doch Dropbox, Google Drive, Microsoft OneDrive, Amazon Drive, und viele andere Cloud-Anbieter.
Jeder, der damit zufrieden ist und die Nutzungsbedingungen akzeptiert, braucht nicht weiterzulesen.
Auch alle anderen, die nur Interesse an lokalen Slideshows auf dem eigenen Rechner haben, sind nicht betroffen.
Aber alle, die ihre Bilder bzw. Slideshows gerne in der Cloud speichern würden, aber trotzdem die volle Kontrolle und Rechte über ihre Bilder behalten möchten, benötigen eine Private Cloud und eine Web Galerie zum präsentieren.
Die oben gezeigten Screenshots sind aus folgender Web Galerie.

### Warum habe ich eine eigene Web Galerie implementiert ?

Ich will meine Slideshows nicht nur auf einem lokalen Rechner präsentieren, sondern im WWW!
Ich will die volle Kontrolle und auch alle Rechte an meinen Bildern behalten!
Da habe ich Bedenken bei allen kostenlosen Cloud-Anbietern.

Ich will Thumbnailshows und Slideshows auch bei vielen Bildern mit geringem Aufwand erzeugen können.
Ich will Thumbnailshows und Slideshows automatisch generieren.
Ich will Bild-Titel (oben) und Bild-Beschreibung (unten) aus den Metadaten der Bilder extrahieren.
Damit kann ich erreichen, daß die generierte Slideshow nicht nachträglich editiert werden muß.

Was sind Bild-Metadaten:

Zusätzlich zum eigentlichen Bild enthalten die Bilddateien diverse Informationen im Kopfbereich.
Welche Auswahl dieser Metadaten für die Gestaltung von Bildtitel und Bildbeschreibung zur Verfügung stehen siehe ganz unten.

- EXIF: Informationen, die meistens schon durch die Kamera hinterlegt werden.
  z.B. Aufnahmezeitpunkt, Blende, Entfernung, GPS-Position, .....
- IPTC: Informationenen, die durch das Bildbearbeitungsprogramm hinterlegt werden.
  z.B. Copyright, Bildtitel, Bildbeschreibung, Land, Stadt, .....
- XMP: Neues Format (XML) für IPTC-Daten mit zusätzlichen Informationen.
  z.B. Bewertung, Beschriftung, Stichwörter, .....

Ich organisiere und bearbeite meine Bilder mit Adobe Lightroom, da werden auch für Slideshows nützliche Daten wie Bildtitel und Bildbeschreibung erfaßt.
Viele Informationen hat schon die Kamera hinterlegt, z.B. den Aufnahmezeitpunkt.
Lightroom kann aus den Bildern dann ansprechende lokale Slideshows generieren, und zwar wahlweise als .pdf, .mp4 oder .jpg.
Als Titel (oben) bzw. Caption (unten) können beliebige Metadaten eingeblendet werden, Beispiel.
Lightroom bietet auch mehrere Web-Galerien an, diese können aber kaum an persönliche Wünsche angepaßt werden.
Auch im WWW habe ich keine Web Galerie gefunden, die meinen Vorstellungen entspricht.

Also habe ich angefangen zu programmieren, aber man muß ja nicht alles neu erfinden:

- Grundlegende Idee von der better simple slideshow
- Metadaten Grundlagen von exif-js (Jakob Seidelin)
- Icons von Font Awesome
- Wischgesten-Unterstützung von hammer.js
- Alles drumherum mit HTML5, CSS3 und Vanilla Javascript ....

### Argumente für den eigenen Einsatz

- Die Bilder liegen auf dem eigenen Rechner bzw. im eigenen Webspace, z.B. einem NAS.
  Wichtig für alle, die entscheiden wollen, wo ihre Bilder gespeichert sind.
- Für Bild-Titel (oben) und Bild-Beschreibung (unten) können die Bild-Metadaten ausgewertet werden.
  Das nachträgliche Editieren der Slideshow erübrigt sich, dies ist besonders bei vielen Bildern willkommen.
  Das funktioniert aber nur, wenn die Bilder mit einem Bildbearbeitungsprogramm bearbeitet wurden.
  Wahlweise können aber auch Titel und Beschreibung manuell für jedes Bild in der Slideshow editiert werden.
- Die Anpassung an die eigenen Vorstellungen erfolgt durch eine Parameterdatei. (slideShowParams.bat)
  Nach dem Anpassen "makeSlideShow.bat" aufrufen, um die Thumbnailshow und die Slideshow zu generieren.
- Thumbnailshow und Slideshow werden durch ein Script automatisch generiert. (makeSlideShow.bat)

### Implementierte Funktionen

- Vorwärts- bzw. Rückwärtsblättern, auch mit Wisch-Gesten bei Touchscreens.
- Zurück an den Anfang (erstes Bild).
- Automatisches Abspielen, auch mit zufälliger Reihenfolge, siehe F1 unten.
- Bild an die Displaygröße anpassen, wahlweise auch vergrößern.
- Vollbildmodus (ideal für Vorführungen).
- Bild runterladen, wahlweise auch in voller Größe (wenn \oriPics\).
- Bild drucken.
- Bild-Metadaten verwenden für Titel und Beschreibung.
- Ausgewählte Bild-Metadaten anzeigen.
- Alle Bild-Metadaten runterladen (EXIF, IPTC, XMP).
- Aufnahmeort mit Google Maps anzeigen (wenn Positionsdaten verfügbar).
- Benutzeroberfläche deutsch, englisch, ...., einfach anpassbar. (\js\strings.js)
- Sondertaste F1: Abspielmodus wählen. (Standard: vorwärts bis zum Ende)
- Sondertaste F2: Anzeigedauer Bild im Abspielmodus. (Standard: 3 sec)
- Sondertaste F3: Überblendzeit wählen. (Standard: 1 sec)
- Sondertaste F4: Wartezeit bei manuellem Bildwechsel wählen. (Standard: 1 sec)

### Voraussetzungen, Konventionen

- Bilder mit 3-stelliger Laufnummer im Verzeichnis: \slides\
  Empfehlung Bildgröße: 1024px (lange Kante)
- Evtl. größere Bilder mit gleichem Namen zum Download im Verzeichnis: \oriPics\
  Empfehlung Bildgröße: 1920px (lange Kante)
- Thumbnails mit gleichem Namen im Verzeichnis: \thumbnails\
  Empfehlung Bildhöhe: 100px
- Für eigene Webseiten ist bei Verwendung des Google Static Maps API's ein eigener KEY erforderlich.
  Dieser kann ganz einfach bei Google angefordert werden. Diesen Key in slideShowParams.bat eintragen als: GOOGLEMAPSKEY
- Aktueller Webbrowser für das Betrachten (HTML5, CSS3).
- Empfehlung: Bilder vorher mit Lightroom oder ähnlichem Programm bearbeiten.

### Getestete Browser und Plattformen (aktuellste Versionen)

- Windows 10:Firefox, Chrome, MS-IE, MS-Edge, Opera ... alle OK
- Android 6:Firefox OK ... Chrome ohne Datensparmodus.
- Linux:Firefox OK
- Apple OS X:Safari, Chrome OK
- Apple iOS:nicht getestet

### Lokaler Test auf dem eigenen Rechner

Wenn man die Slideshow lokal auf dem eigenen Rechner ohne Webserver testen will, erhält man evtl. eine CORS-Fehlermeldung, daß die Bild-Metadaten nicht ausgelesen werden können.
Lösung für Google Chrome: Aufruf-Parameter
Chrome_ohne_CORS.bat ⇒⇒ "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\Temp %1
Lösung für Mozilla Firefox: Konfigurationsparameter in about:config
security.fileuri.strict_origin_policy ⇒⇒ false
Es gibt auch ein Firefox-Plugin
Evtl. weitere Aufforderungen verbieten.

### Kurzanleitung für eigenen Einsatz

Diese Software darf privat genutzt werden, wenn keine kommerziellen Interessen damit verbunden sind.
Bitte prüfen Sie auch die evtl. Rechte der oben erwähnten verwendeten Libraries.
Wenn Sie diese Software verwenden, dann akzeptieren Sie, daß kein Service und keinerlei Gewährleistung bzw. Garantie geleistet wird.
Sie verwenden diese Software auf Ihr eigenes Risiko.

- Download (kleine Demo-Show ist enthalten)
- Entpacken nach: ./slideShow/
- Wir finden folgende Verzeichnisse:
  js: Javascript- und Sprach-Dateien
  evtl. eigene Sprachdatei strings_xxx.js umbenennen in strings.js
  css: Style Dateien
  fonts: Font Dateien
  icons: z.B. Spinner
  help: Hilfe-Dateien
  evtl. eigene Hilfedatei help_xxx.html umbenennen in help.html
  slides: Bilder (Demo) ... für eigene einfache Show ersetzen ...
  thumbnails: Thumbnails (Demo)
  oriPics: evtl. größere Bilder zum Download (Demo)
- Weiters finden wir folgende Dateien:
  makeSlideShow.bat: Script zum Generieren der Thumbnailshow (index.html) und der Slideshow (slideshow.html)
  slideShowParams.bat: Parameter für die Generierung (reinschauen und testen)
  Mit makeSlideShow.bat generierte Dateien:
  index.html: Thumbnailshow
  slideshow.html: Slideshow
  Mit makeSlideShowSimple.bat generierte einfache Demo ohne Metadaten:
  indexSimple.html: Thumbnailshow
  slideshowSimple.html: Slideshow ohne Metadaten
- Das Static Google Maps API:
  Um den Aufnahmestandort eines Bildes anzuzeigen, wenn Positionsdaten vorhanden sind, wird das Static Google Maps API verwendet. Dafür ist für eigene Webseiten ein eigener KEY erforderlich.
  Dieser kann ganz einfach bei Google angefordert werden. Diesen Key in slideShowParams.bat eintragen als: GOOGLEMAPSKEY

### Die wichtigsten Einstellungen in der 'slideShowParams.bat'

Es sind Beispiele eingetragen:

- TITEL=HdS Faschingsgaudi 2016 Seitentitel fuer Thumbnailshow und Slideshow
- BILDNAME=FaschingHdS2016_ Name der Bilder ohne Nummernteil
- BILDANZ=10 Anzahl der Bilder, max. 999
- SCRIPTSDIR=./ lokales Script und Style Basisverzeichnis,
  wenn nur eine Slideshow, siehe Demo
- SCRIPTSDIR=../slideShow/ gemeinsames Script und Style Basisverzeichnis,
  wenn mehrere Slideshows, Beispiel siehe unten
- ORIPICDIR=oriPics evtl. Verzeichnis für große Bilder zum Download, sonst false
- ENLARGE=true evtl. Bilder bei grossem Display vergroessern
- SENOTTO=false evtl. Thumbnail-Show fuer www.senotto.de
- GOOGLEMAPSKEY="##########" evtl. ihr persönlicher GoogleMaps-Key
- ADDTITLE=true Bildtitel mit Metadaten ueber dem Bild
  Die Titelzeile wird wie folgt zusammengesetzt:
  TITEL_LI_1, TITEL_LI_2 TITEL_RE_1, TITEL_RE_2
- ADDCAPTION=true Bildcaption mit Metadaten unter dem Bild
  Die Beschreibungszeile wird wie folgt zusammengesetzt:
  CAPTION_LI_1, CAPTION_LI_2 CAPTION_RE_1, CAPTION_RE_2
- Einfaches Beispiel, Beschreibung siehe unten:
  TITEL_LI_1="title"
  CAPTION_LI_1="desc"
  CAPTION_RE_1="date"

Bespiel für mehrere Slideshows:

Der Ordner "slideShow/" kann unverändert bleiben.
Parallel dazu richten wir für jede Slideshow einen Ordner ein.
Diese enthalten Unterordner für die Bilder: "slides/", "thumbnails/" und evtl. "oriPics/".
Weiters benötigen wir 2 Dateien: "makeSlideShow.bat" und "slideShowParams.bat".
Die Datei "slideShowParams.bat" muß an die Slideshow angepaßt werden, dann kann mit "makeSlideShow.bat" die Slideshow und die Thumbnailshow generiert werden.

### Beschreibung der unterstützten Metadaten

Welche Metadaten in den Bildern vorhanden sind hängt von der Kamera und vom Bildbearbeitungsprogramm ab.
Es wird folgende Auswahl aus den EXIF, IPTC und XMP Metadaten unterstützt:

        • name:         Bildname                      (Sonderfall)
        • title:        Bildtitel                     (XMP | IPTC)
        • headline:     Bildüberschrift               (XMP | IPTC)
        • desc:         Bildbeschreibung, Caption     (XMP | IPTC | EXIF)
        • byline:       Künstler                      (IPTC)
        • creator:      Ersteller                     (XMP)
        • rights:       Copyright                     (XMP | IPTC | EXIF)
        • date:         Aufnahmedatum                 (EXIF)
        • time:         Aufnahmezeit                  (EXIF)
        • make:         Kamera Hersteller             (EXIF)
        • model:        Kamera Modell                 (EXIF)
        • artist:       Fotograf                      (EXIF)
        • userComment:  Benutzer Kommentar            (EXIF)
        • focalLen:     Objektiv Brennweite           (EXIF)
        • fNumber:      Objektiv Blende               (EXIF)
        • subjDist:     Objektiv Entfernung           (EXIF)
        • expTime:      Kamera Belichtungszeit        (EXIF)
        • expBias:      Kamera Belichtungskorrektur   (EXIF)
        • ISOSpeed:     Kamera ISO Empfindlichkeit    (EXIF)
        • pixelX:       Kamera Bildbreite             (EXIF)
        • pixelY:       Kamera Bildhöhe               (EXIF)
        • latGrad:      GPS Latitude (Breite)         (EXIF)
        • lonGrad:      GPS Longitude (Länge)         (EXIF)
        • ele:          GPS Höhe                      (EXIF)
        • country:      Land                          (XMP | IPTC)
        • province:     Provinz                       (XMP | IPTC)
        • city:         Stadt                         (XMP | IPTC)
        • location:     Ort                           (XMP | IPTC)
        • rating:       Bewertung, z.B.: "4"          (XMP)
        • label:        Markierung, z.B.: "Grün"      (XMP)
        • exifVers:     EXIF Version                  (EXIF)
        • creaTool:     Foto-Software, z.B: Lightroom (XMP)

Copyright peter@danninger.eu Version: 06.09.2019