Digital Signage Widgets

In diesem Beitrag lernen Sie eine elegante Möglichkeit kennen, eigene Anwendungen mithilfe von Digital Signage Widgets in eine Playliste zu integrieren. Sie erfahren ausführlich, worum es dabei geht und welche Vorteile die Technik bringt. Zum Schluss können Sie den praxisnahen Einsatz anhand unserer Downloads selbst ausprobieren.

Wetter Widget auf einem Digital Signage Bildschirm
Wetter Widget auf einem Digital Signage Bildschirm

Integrierte Anwendungen

Haben Sie sich schon mal überlegt, innerhalb einer Digital Signage Umgebung folgende Software zu realisieren?

Die Anwendungen können als Widgets unabhängig vom verwendeten Betriebssystem Ihres Digital Signage Players laufen. Auf diese Weise sind sie einfach und kostengünstig umzusetzen, weil Sie kein spezielles Programmierwissen erfordern. Aber klären wir zunächst die Begriffe.

Was ist ein Widget?

Widgets stellen im allgemeinen Anwendungen dar, welche in anderen Programmen integriert werden. Zum Beispiel: eine Uhranzeige auf der Benutzeroberfläche eines Smartphones oder Desktopcomputers.

Die Erklärung zu sogenannten Web Widgets ist etwas komplexer, denn es gibt mehrere Varianten.

Web Widgets

Widgets für Homepages betten sich als unabhängiges Element in eine Webseite ein. Sie bieten Zugriff auf Ressourcen, welche die eigentliche Webseite aus verschiedenen Gründen nicht erreichen soll oder darf. Typische Widgets auf Webseiten stellen Google Ads, Benutzerkommentare, Buttons soziale Medien oder Wetteranzeigen dar.

Es gibt einen Nachteil dabei: Diese Art von Web Widgets verlangsamen unter Umständen den Aufbau der Webseite.

Gepackte Webanwendungen

Web Widgets heißen auch Webseiten, die zusammen mit ihren Medieninhalten in einem Zip-Container gepackt sind. Diese besitzen die Endung WGT anstelle von ZIP.

Ursprüngliche Anwendungszweck

Das W3C verabschiedete 2012 Web Widgets als offiziellen Standard für sogenannten Packaged Web-Apps. Unter anderem war dieses Format dazu gedacht, die Entwicklung von Apps, besonders für Smartphones, zu vereinfachen.

Entwickler sollten keine extra App mehr für unterschiedliche Geräte entwickeln und warten. Die vorhandene Webseite sollte gleichzeitig als App zur Offline-Benutzung fungieren. Für soziale Medien wie Twitter, Instagram oder auch kleinere Internetdienstleister hätte sich das Bereitstellen von Apps vereinfacht. Allerdings setzten sich gepackte Webseiten auf Smartphones nicht durch. De facto gibt es nur zwei relevante mobile Betriebssysteme und Apps waren bereits viel zu sehr verbreitet und akzeptiert.

Digital Signage Widgets

Im Digital Signage Markt befinden wir uns in einer anderen Ausgangssituation. Fast jeder Anbieter macht sein eigenes Ding und hält sich kaum an Standards.

Gepackte Web Widgets zur Offline-Nutzung von Webtechnologien bieten für unsere Anwendungsprofile eine Reihe von elementaren Vorteilen.

  • Betriebssystemunabhängige Anwendungen.
  • Durch Parameterübergabe extrem flexibel einsetzbar.
  • Kein Webcache oder einzelne Downloads notwendig.
  • Effizientere Templates mit Animationen und Interaktionen.
  • Großer Pool an erfahrenen Dienstleistern verfügbar.
  • Erhöhte Sicherheit.
  • Keine Behinderung durch die Same-Origin Policy.

Wir nennen Sie deshalb Digital Signage Widgets oder HTML5 Widgets.

Was versteht man unter Digital Signage Widgets?

Digital Signage Widgets sind gepackte Webanwendungen, die sich in einer Digital Signage Playliste als eigenständige Applikationen transparent integrieren. Das beinhaltet Raumbelegungsplaner, Kundenaufrufsysteme, Kundenzähler, Social-Media Einblendungen oder generell interaktive Kiosk-Anwendungen.

Betriebssystemunabhängige Anwendungen

Ein Video auf einem Bildschirm anzuzeigen, ist heutzutage keine Raketenwissenschaft mehr. Unsere Kunden verlangen Interoperabilität, Schnittstellen und wünschen sich individuelle Anwendungen. Diese zeitnah und kostengünstig umzusetzen, stellt eine Herausforderung dar.

Kurz nach Beginn der Coronapandemie 2020 kamen vermehrt sogenannte Kundenzähler in Kombination mit Digital Signage Playlisten zum Einsatz. Kundenzähler, Kundenaufrufsysteme oder Konferenzraumplaner innerhalb einer Digital Signage Lösung ohne Webwidgets zu realisieren ist natürlich möglich, aber umständlicher.

Die Anwendung stellt dabei nur ein Teil der Aufgabe dar. Eine vorhandene Digital Signage Lösung muss diese App ja noch in ein Content-Management einplanen und administrieren.

  • Zu welchen Uhrzeiten läuft die normale Werbeschleife?
  • Was passiert, wenn ein Nutzer während der Werbeschleife einen Bildschirmbereich berührt?
  • An welchen Tagen wird die Anwendung angeboten?
  • Ab wann springen wir wieder zurück in die normale Playliste?

Weitere Fragen wären:

  • Auf welchem Betriebssystem basieren die Bildschirme?
  • Wie spricht die App interne Funktionen und Sensoren des Players an?
  • Was passiert bei einem Gerätewechsel?

Ohne Digital Signage Widgets

Es muss erst mal ein Dienstleister gefunden werden, der in der Lage ist Windows, Linux, Android usw. Software zu entwickeln.

Die Entwickler wiederum benötigen Zugriff auf Schnittstellen – den sogenannten APIs, um die App in das Content-Management zu integrieren. Selbst wenn der Hersteller das anbietet, müssen sich unter Umständen fachfremde Menschen in mehr oder weniger ausführliche Dokumentation einarbeiten.

Da viele Unternehmen ihre Schnittstellen als Staatsgeheimnis betrachten, werden darüber hinaus nervige Geheimhaltungsvereinbarungen notwendig. Das alles zu koordinieren, kostet Zeit.

Sollen Sie ihre Player durch Geräte mit einem anderen Betriebssystem ersetzen wollen, zum Beispiel von Windows zu Android, müssen Sie die Anwendungen neu portieren oder gar neu schreiben. Selbst bei einem Betriebssystemupdate kann es passieren, dass Sie diese anpassen müssen. Das kostet Geld.

Mit Digital Signage Widgets

Ein beliebiger Webprogrammierer schreibt ein Digital Signage Widget, welches auf jedem Betriebssystem läuft. Die Content-Managementsoftware behandelt das Widget transparent wie ein Bild oder Video.

Aufrufsysteme, Kundenzähler, Raumbelegungsplaner oder interaktive Kioskanwendungen lassen sich so innerhalb kürzester Zeit unkompliziert in eine Digital Signage Playliste integrieren. Ohne spezifische Schnittstellen oder Geheimhaltungsvereinbarungen.

Entscheiden Sie im Laufe der Jahre Ihre Player gegen bessere Modelle auszutauschen, gibt es eine viel größere Auswahl an Geräten. Trotzdem entsteht dabei kaum Migrationsaufwand.

Digital Signage Widgets geben Ihnen somit ein weiteres Stück Unabhängigkeit.

Welche Vorteile bieten Digital Signage Widgets?

Digital Signage Widgets basieren auf HTML. Sie funktionieren deshalb unabhängig vom Betriebssystem und sind durch Parameterübergabe extrem flexibel. Sie ermöglichen Templates mit Animationen, interaktive Kioskanwendungen und erhöhen die Sicherheit gegenüber externen Webseiten. Ferner kann jeder mit HTML und JavaScript Erfahrung Widgets entwickeln.

Durch Parameterübergabe extrem flexibel

Da Digital Signage Widgets auf HTML5 basieren, stehen alle Möglichkeiten zur Verfügung, die auch Webseiten anbieten. Neben Interaktivität und Animationen, die ich weiter unten beschreibe, ermöglichen sie sogenannte Parameterübergaben.

Wie sieht das praktisch aus?

Sie stellen Ihren Kunden ein Wetter-Widget zur Verfügung. Der Nutzer zieht das Element in seine Playliste und kommuniziert dem Widget in einem Formular den Standort. Sobald das Wetter-Widget das erste Mal angezeigt werden soll, holt es sich die aktuellen Wetterdaten für diesen Standort und speichert sie.

Sie sind somit in der Lage, mit einem einzigen Widget mehreren Standorten dynamische Wetteranzeigen anzubieten. Ohne Mehrarbeit oder für jeden Standort mit viel Serverleistung täglich Wettervideos erzeugen zu müssen! Selbst das Eingabeformular generiert sich in kompatiblen Content-Management Systemen automatisch.

Das Gleiche gilt natürlich analog für Social Media-Widgets, Nachrichten via unterschiedlichen RSS-Feeds, Raumbelegungspläne oder digitale Türschilder mit Anbindung an den Google Kalender usw.

Weiter unten finden Sie ein einfaches Beispiel zum Ausprobieren mit einem Newsticker als Bestandteil einer Multizonenplayliste inklusive Senderlogo.

Offline, Webcache und Copyrights

Viele Digital Signage Systeme erlauben, auf eine Webseite zu verlinken. Allerdings kann der Zugang zum Internet ausfallen. In dem Fall erscheinen hässliche Fehlermeldungen, ein leerer Bildschirm oder Platzhalter.

Der integrierte Browser überprüft Bild- und Videoinhalte in Webseiten je nach Qualität des Webcaches, Konfiguration und der Anbindung bei jedem Zugriff, um zu entscheiden, ob diese neu heruntergeladen werden müssen. Das kostet Zeit, verkompliziert die Handhabung und erhöht die Fehlerquellen. Bei einer unterbrochenen Internetverbindung muss bis zu einem sogenannten Timeout gewartet werden. In der Zwischenzeit sehen Betrachter unter Umständen einen inhaltslosen Bildschirm.

Digital Signage Widgets umgehen diese Problematiken. Sie laden das komplette Widget inklusive Inhalte herunter. Der Digital Signage Player spielt Medieninhalte ohne Wartezeiten ab. Die Webanwendung erhält sofort Zugriff auf Bilder- und Videoressourcen.

Wollen Sie Inhalte zeigen, die nur für einen begrenzten Nutzungszeitraum zur Verfügung stehen? Copyrights? Verschlüsseln Sie das WGT! Der Player erhält das dazu notwendige Password auf einem getrennten Weg.

Animierte Templates

Eine Herausforderung bei Digital Signage Lösungen stellen sogenannte Nutzer-generierte Inhalte dar.

Stellen Sie sich vor, Sie betreiben eine Drogerie und möchten regelmäßig Angebote für unterschiedliche Produkte in Ihrem Instore TV anzeigen. Jedes Mal mit einem externen Zeichenprogramm etwas erstellen, beauftragen und dann hochladen ist mühselig.

Der professionelle Weg: Bildvorlagen

Professionelle Anwender lassen sich in der Regel von Medienagenturen eine Vorlage (Template) in Ihrem Unternehmensdesign erstellen. In die Vorlage kommen Platzhaltern für Text und Bilder. Wenn Sie nun ein Angebot erstellen wollen, nutzen Sie oder Ihre Mitarbeiter die Vorlage.

Das geht je nach verwendeter Digital Signage Software schnell und unkompliziert. Außerdem werden komplexe Zeichenprogramme mit hoher Lernkurve überflüssig.

Und wie funktioniert das mit Videos oder Animationen?

Allerdings hat obiges Verfahren einen Haken: Zeitnah und komfortabel geht das nämlich nur mit Bildern. Animationen erfordern komplexere Techniken. Früher war Adobe Flash prädestiniert für diesen Anwendungsfall, aber inzwischen fiel Flash – zurecht – in Ungnade und existiert nicht mehr.

Einige Anbieter erstellen aus Templates Videos. Das Verfahren ist allerdings zeitaufwendig. Wenn es zudem auf Servern gerendert werden soll, wird die technische Umsetzung anspruchsvoll, fehlerbehaftet und somit teuer.

Digital Signage Widgets lösen das Problem auf elegante Art und Weise. HTML, CSS und Javascript bieten von Haus aus eine Fülle an Animations- und Programmiertechniken. Das bringt uns zum nächsten Vorteil.

Mehr erfahrene Dienstleistern verfügbar

Wie im letzten Absatz erwähnt, nutzen Widgets weitverbreitete Techniken wie HTML und CSS. Jeder halbwegs erfahrene Webentwickler verfügt deshalb prinzipiell über das notwendige Wissen, um Widgets zu erstellen.

Es gibt weitaus mehr Web- und UI-Programmierer als Spezialisten für Java, C#, Kotlin, Swift oder C/C++. Überdies ermöglichen Widgets schlanke animierte Templates und erhöhen die Digital Signage Sicherheit in ihrem Netzwerk.

Erhöhte Sicherheit

Eine Webseite im Internet bietet eine viel größere Angriffsfläche zur Kompromittierung. Da Digital Signage Widgets lokal auf dem Anzeigegerät laufen, existieren konzeptionell weniger Angriffsmöglichkeiten. Ein Cracker benötigt erst Zugriff auf den Speicher des Gerätes.

Keine Same-Origin Policy

Aus Sicherheitsgründen verbieten moderne Webbrowser das Nachladen von Javascript oder Daten von anderen Domain als der eigenen. Das stellt für Webseiten im Internet einen kritischen Angriffsvektor dar.

Die SOP stört allerdings, wenn die Webseite einfach nur einen „fremden“ RSS-Feed in seiner Webseite verarbeiten soll. Digital Signage Widgets schaffen Abhilfe. Da diese lokal ausgeführt werden, lässt sich sicherstellen, dass der integrierte Webbrowser die SOP ignoriert und trotzdem sicher ausführt.

Praxisbeispiel RSS-Ticker

Genug der Theorie. Sehen wir uns ein konkretes Digital Signage Widget an.

Es besteht aus einem schlichten Newsticker, dessen Technik ich im Beitrag HTML-Lauftexte ausführlich beschreibe.

Laden Sie dieses rss-ticker.wgt herunter und öffnen Sie es mit einem herkömmlichen Zip-Betrachter. Darin befinden sich drei Dateien:

  1. index.html: der Einstiegspunkt. Hier befindet sich in unserem Fall die komplette Logik und Anzeige der Anwendung.
  2. icon.png: das Icon.
  3. config.xml: die Konfigurationsdatei. Diese muss zwingend vorhanden sein. Diese muss zwingend vorhanden sein. Hier werden nämlich unter anderem die externen Parameter für das Widget angegeben.

Anmerkung: Bleiben Sie fair und verlinken Sie das Demo RSS-Widget nicht direkt in Ihren Playlisten.

Die config.xml

Die config.xml stellt das Herzstück des Widgets dar. Hier wird angegeben welche Datei die Anwendung startet (index.html), welches Datei das Icon darstellt (icon.png) und welche Parameter die App erwartet. In unserem Fall wollen wir die Farbe der Schrift und des Hintergrunds, Schriftgröße sowie ein Link zu einem beliebigen RSS-Feed einstellen.

Wie sieht das im Einsatz aus?

Hierfür benötigen Sie einen SMIL kompatiblen Digital Signage Player. Falls Sie gerade keine passende Digital Signage Hardware von IAdea oder QBic Technology zur Hand haben: Laden Sie sich unseren freien SMIL-Player für Ihr Betriebssystem runter. Er läuft unter Windows, Linux, Android und macOS (Intel/Rosetta2).

Beim ersten Start öffnet sich eine Dialogbox. Geben Sie folgendes als Content-URL ein:
https://smil-control.com/samples/digital-signage-widgets/index.smil

Nach kurzer Zeit sehen Sie eine einfache Zahlenabfolge mit einem SmilControl Senderlogo. Im unteren Bereich läuft ein dunkelblauer Newsticker mit transparentem Hintergrund durch das Bild. Siehe unteres Video.

Falls Sie selbst lokal experimentieren möchten, laden Sie die komplette SMIL Demo (151 KiB) inklusive der Mediendateien runter.

Fazit Digital Signage Widgets

HTML5 Widgets stellen für Digital Signage Lösungen eine enorme Bereicherung dar und erhöhen gleichzeitig Ihre Unabhängigkeit. HTML, JavaScript und CSS sind omnipräsente herstellerübergreifende Standards. Dieses vereinfacht die Entwicklung von Drittanwendungen und sparen so signifikant Zeit sowie Kosten. Außerdem steht eine viel größere Auswahl an Dienstleistern zur Verfügung.

Natürlich muss das Content-Management den Einsatz von Widgets unterstützen. Allerdings ist das ein einmaliger Vorgang und laut meiner Erfahrung unkompliziert umzusetzen. Es lohnt sich auf jeden Fall.

Kontaktieren Sie mich, falls Sie weitere Fragen haben oder Ihre Software für Widgets erweitern möchten.


Gravatar Nikolaos Sagiadinos
Autor: Niko Sagiadinos
Entwickler & Co-Founder SmilControl – Digital Signage
Besuchen Sie mich auf: LinkedIn, Xing oder GitHub

Kontakt

Sie haben weitere Fragen?





Unsere Kontaktdaten

SmilControl GmbH
Niederaue 1a
D-30419 Hannover

☎ +49 (0) 511 – 96 499 560

Amtsgericht Hannover
HRB 221981
USt-Id: DE 281 780 194

Vertretungsberechtigter Geschäftsführer:
Nikolaos Sagiadinos