Das iPad als digitaler Bilder- und Inforahmen

13 Dez 2015
13. Dezember 2015

Regelmäßige Leser werden wissen, dass ich öfter und gerne fotografiere. Dabei sind schon eine Reihe schöner Aufnahmen entstanden, so dass schon länger der Wunsch besteht, diese auch innerhalb der eigenen vier Wände aufgehängt zu betrachten. Leider ist Wandfläche nun einmal endlich und teilweise natürlich auch schon genutzt, wodurch schnell Platzprobleme entstehen. Die klassische Lösung für dieses Problem ist ein digitaler Bilderrahmen, denn dort lassen sich auch schnell neue Fotos unterbringen, also musste einer her. Eine Marktrecherche brachte jedoch schnell Ernüchterung:

  • Es gibt keine große Auswahl, offensichtlich haben Tablets diesen Markt ziemlich „kaputt“ gemacht.
  • Die meisten Modelle benötigen einen Stromanschluss, was dort wo der Rahmen bei mir hin sollte, größeren Aufwand erfordert hätte.
  • Die User-Interfaces der Geräte sind häufig grottig.
  • Schon mit kleinen Zusatzfunktionen wie die Anzeige der Uhrzeit innerhalb eines Fotos sind viele Geräte überfordert.

Daher bin ich nach meinen Erkundungen zu der Schlussfolgerung gekommen, dass ein Tablet die bessere Lösung ist. Ein Akkubetrieb ist hier problemlos möglich, außerdem könnte ein Tablet seine Inhalte per WLAN beziehen, müsste selbst also nicht mit irgendwelchen SD-Karten bestückt werden. Die Darstellung der Bilder könnte eine entsprechende App übernehmen, wofür ich mich allerdings nicht entschieden habe, dazu später mehr. Bleibt also nur die Frage iPad oder Android. Ein Android-Gerät wäre möglicherweise etwas preiswerter geworden, ich habe mich dann aber für ein „refurbished“ iPad 4 entschieden, welches ich relativ günstig direkt bei Apple erworben habe. Wiederaufbereitete Geräte bekommen ein neues Gehäuse und einen frischen Akku, das ist alles, worauf es für meinen Bilderrahmen ankommt. Mit 10 Stunden Akku-Laufzeit muss ich das iPad nicht oft laden, denn ein Betrieb für mehr als eine Stunde pro Tag (eher weniger) war sowieso nicht geplant. Für mein Projekt reicht außerdem das kleinste Modell (16 GB mit WLAN) völlig aus. Die iPad-Lösung bietet mir persönlich auch weitere Vorteile:

  • Es hat ein hochauflösendes Retina-Display, ideal für Fotos.
  • Ich kenne mich mit dem System gut aus.
  • Ich kann weitere Apps zur Haussteuerung installieren, was praktisch ist bei einem Gerät, was direkt an der Wand hängt (dazu später mehr).

Nachdem das iPad eingetroffen war, musste als erstes eine Wandhalterung her. Nach einigen Recherchen habe ich mich für eine XFlat UP150 (Amazon-Link) entschieden, die das iPad zuverlässig an der Wand befestigt. Zur Montage muss lediglich ein Loch gebohrt werden.

Anschließend stellte sich die Frage nach einer Präsentationsapp für meine Fotos. Allerdings wurden, weil ich ja jetzt quasi einen vollwertigen Computer mit WLAN hatte, meine Ansprüche immer größer. Wäre es nicht toll, wenn es während die Bilder durchlaufen auch Seiten gäbe, die die aktuelle Innen- und Außentemperatur anzeigen, eine Wettervorhersage, Wetterwarnungen, die Schlagzeilen von heute, die nächsten Geburtstage meiner Verwandten und Bekannten? Mehr und mehr solcher Ideen kamen mir und es wurde schnell klar, dass ich niemals eine App finden werde, die das alles kann. Dann kam aber der rettende Einfall, ich bin ja von Beruf Webentwickler, also warum realisiere ich das nicht als webbasierte Lösung? Trotzdem brauchte ich natürlich eine App, und zwar einen Browser, der gleich mit einer festeingestellten Webadresse im Vollbild startet, ohne irgendein Benutzer-Interface anzuzeigen. Sowas gibt es aber, z.B. für die zahlreichen iPad-basierten Info-Kioske. Ich habe mich nachdem ich ein paar Apps getestet habe, für den Sandbox-Web-Browser entschieden (App-Store-Link). Bei dieser App legt man die Start-Webadresse direkt in der Einstellungs-App von Apple fest, sodass es beim Starten der App sofort mit der gewünschten Webseite losgeht, ideal für meine Zwecke.

Nun kam der eigentlich aufwändige Teil, der mir allerdings viel Spaß gemacht hat, das Erstellen der Webanwendung zur Darstellung von Foto- und Informationsseiten. Eine reine Fotoeinzelseite in HTML ist gar nicht so kompliziert und könnte beispielsweise so aussehen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1“ />
<meta http-equiv="refresh" content="10; URL=foto2.html“ />
</head> 
<body style="background-color: #000000; background-image:url(images/foto1.jpg); no-repeat center center fixed; -webkit-background-size: cover; background-size: cover">
</body>
</html>

Das Foto (hier foto1.jpg) wird als Hintergrundbild festgelegt (im Body-Tag) und die Meta-Refreshzeile im Header sorgt dafür, dass nach 10 Sekunden eine neue Webseite (foto2.html) mit einem neuen Foto (foto2.jpg) dargestellt wird. Meine Lösung ist allerdings – wie schon angedeutet – komplexer. So kann ich Einzelseite und Anzeigedauer in einer Steuerungsdatei festlegen, die in etwa so aussieht (Auszug, die vollständige Sequenz ist etwa 40 Zeilen lang, dann geht es wieder von vorne los),

10:photo-warnemuende1
20:headlines
10:photo-warnemuende2
20:itnews
10:photo-warnemuende3
20:applenews
10:photo-rostock1
20:localnews
10:photo-zoo1
10:conditions-inside
10:conditions-outside
10:photo-bornholm3
10:weather
10:forecast
10:photo-moen
10:alerts

Die Zahlen vor dem Doppelpunkt stehen für die Anzeigedauer in Sekunden, es folgt die anzuzeigende Seite. Seiten, die mit photo- beginnen zeigen ein Foto an, alles andere sind Sonderseiten, etwa mit Wetterinformationen oder Nachrichten. Diese Steuerungsdatei liegt im Textformat in meiner Dropbox und wird über ihre öffentliche URL von meiner Webanwendung eingelesen. Das hat den Vorteil, dass ich diese Datei auch mit dem iPhone ändern kann (mit einem Dropbox-fähigen Texteditor), um die Reihenfolge oder eine Anzeigedauer zu ändern. Natürlich komme ich in meiner Webanwendung dann nicht mehr mit einfachem HTML aus. Da ich sowieso dienstlich jeden Tag mit PHP arbeite, nutze ich diese Skriptsprache daher auch für dieses Projekt. Das Kernstück meiner Webanwendung ist somit ein PHP-Skript, welches die Steuerungsdatei aus der Dropbox holt, einliest und in einer Schleife Zeile für Zeile abarbeitet. Die Foto-Anzeigeseiten sehen gar noch so anders aus als im Beispiel oben, lediglich die Weiterleitungsseite, die Anzeigedauer und der Name des Fotos werden dynamisch mit PHP eingesetzt. Außerdem zeige ich auf jedem Foto unten links die Uhrzeit an, dieses Feature ist aber auch abschaltbar.

iPad-Bilderrahmen 1

iPad-Bilderrahmen 5

Das Grundgerüst steht damit, aber es gibt ja noch die Sonderseiten wie „headlines“, „itnews“, „applenews“, „localnews“, „conditions-inside“, „conditions-outside“, „weather“, „forecast“ und „alerts“, die ich immer nach ein bis zwei Fotos einstreue. Die meisten dieser Seiten basieren auf RSS-Feeds, die ich per JavaScript einlese. Dazu nutze ich die Google-Feed-API. So nehme ich z.B. für die Seite „headlines“ den Feed der Tagesschau und für „itnews“ den Feed von Heise. Eine Besonderheit sind die Seiten „conditions-inside“, „conditions-outside“ und „alerts“. Diese zeigen u.a. Temperatur und Luftfeuchtigkeit in und außerhalb meiner Wohnung an und zwar mit den Werten meiner Netatmo-Wetterstation. Netatmo bietet freundlicherweise eine Programmierschnittstelle an, so dass ich mir die Daten darüber direkt von den Netatmo-Servern holen kann. War etwas Bastelarbeit, funktioniert aber einwandfrei. Hier sind ein paar von den Sonderseiten:

iPad-Bilderrahmen 2

iPad-Bilderrahmen 3

iPad-Bilderrahmen 4

iPad Bilderrahmen 6

iPad-Bilderrahmen 7

iPad-Bilderrahmen 8

So ist man morgens, wenn man beim Starten in den Tag ein paar Mal am iPad vorbeiläuft, schon ganz gut informiert. Art und Zahl der Zusatzseiten bleiben lediglich der eigenen Fantasie überlassen, denn es gibt kaum eine Information, die sich nicht irgendwie direkt oder indirekt aus dem Internet beschaffen läßt. Um wichtige Infoseiten direkt zu erreichen, habe ich noch eine Navigationsseite implementiert, die durch Streichen auf dem Display aktiviert werden kann (per ontouchmove-Event in JavaScript).

Da ich nun ein iPad fest an der Wand hängen habe, läßt es sich vorzüglich auch für andere Aufgaben einsetzen. Hier ein paar Beispiele:

  • Beleuchtungssteuerung mit der Hue-App
  • iTunes-Fernsteuerung mit der Remote-App
  • Einkaufsliste ergänzen (in meinem Fall AnyList)
  • Gerätesteuerung mit der Logitech-Harmony-App
  • iPad direkt als Wandradio mit der TuneIn-App

Auch hier sind dem kreativem Einsatz nur durch den App Store Grenzen gesetzt. Vielleicht konnte ich ja, die ein oder andere Anregung lostreten, ein eigenes Bilderrahmen-Projekt zu starten. Die Implementierung kann sogar mehr Freude bringen, als die spätere Nutzung ;-).

Schlagwörter: , ,
  • Roger Odermatt

    Hallo, ich bin per Zufall auf Deine Seite gestossen und und eigentlich habe ich genau das gleiche Setup wie Du und bin auch auf der Suche nach einer gute Lösung. Ich hatte bis jetzt die App „Fotomatic“ im EInsatz doch ganz so happy bin ich damit nicht. Gibt es Deine Lösung vielleicht auch zum Download? Mich würde noch interessieren, wo genau liegen Deine Fotos, auf einem NAS?
    Gruss

    • Die Fotos und alle benötigten Skripte sind auf einem Webserver. Für eine Download-Version müsste ich erst einen Haufen privater Dinge aus der Lösung entfernen und das ein oder andere auch dokumentieren, wozu mir momentan leider die Zeit fehlt.

      • Markus

        Schade, das ist genau, was ich suche. Leider bin ich in der Programmierung nicht so Firm. Hat sich an der „Download-Lösung“ vielleicht etwas geändert? 😉

        • Nein, im Gegenteil. Das iPad an der Wand nutze ich inzwischen hauptsächlich, um Fotos anzuzeigen (mit einer Diashow-App), und zur Smart-Home-Steuerung. Den ganzen Informationsanzeigeteil hat ein zusätzliches Display-Gerät namens „LaMetric Time“ übernommen, welches ich in meinem Artikel vom 19. März 2017 vorgestellt habe,

  • Marcel Kiese

    Hi, vielen Dank für diesen Artikel. Es ist klasse, was sie hier gebaut haben. Auch mich würde ein Download interessieren, da ich mit den APP Lösungen nicht wirklich zufrieden bin, mir aber die explizieten Kentnisse in PHP fehlen.
    Gruß

    Marcel

Version 7.2 - © 1995-2017 by Dr. Markus Jasinski - Impressum