Responsives Digital Signage
In diesem Tutorial lernen Sie Videos und Bilder aus MediaRSS-Quellen in einer HTML5-Seite als responsives Digital Signage einzubauen.
Was bedeutet responsiv?
Webseiten responsiv gestalten zu können stellt ein bedeutenden Vorteile von HTML5/CSS3 dar.
Diese Technik ermöglicht es uns Digital Signage-Inhalte zu erstellen, welche sich automatisch an unterschiedliche Ausgabegeräte anpassen.
Zum Beispiel ordnen sich die Inhaltselemente abhängig von der Orientierung (horizontal/vertikal) unterschiedlich an.
Das spart Zeit und Ressourcen, da wir nicht mehr mehrere Dateien mit redundanten Inhalten zu pflegen brauchen. In unserem Beispiel ist es nicht mal nötig, extra Videos für Quer- oder Hochformat bereitzustellen. Dazu kommen noch die generellen Vorteile von HTML im Vergleich zu reinen Video oder Bildern. Zum Beispiel Interaktionen oder das unsere Texte abhängig von der Anzeigegröße skalieren können ohne pixeliger zu werden.
Die Zutaten für responsives Digital Signage
Zunächst benötigen wir einen RSS-Feed mit Videoinhalten. Dafür bietet sich der Feed der Tagesschau an. Wir gehen davon aus, dass Sie wissen was ein RSS-Feed ist. Falls nicht; der Beitrag Kanäle mit SVG und Feeds erklärt das im Detail.
Im Beitrag über CSS-Lauftexte mit RSS finden Sie eine Technik, um komfortabel über die Yahoo Query Language Javascript RSS Feeds abzuholen. Diese werden wir hier ebenfalls einsetzen.
Im gleichen Beitrag steht außerdem wie CSS3-Technik für Animationen genutzt wird. Wir werden in unserem Beispiel diese CSS3-Keyframes benutzen, um die einzelnen Videos dezent ein- und auszublenden.
Der Beispielquellcode
Den kompletten Quellcode der in diesem Tutorials über responsives Digital Signage Design können Sie bei Github aufrufen.
Das Konzept bzw. die Arbeitsschritte sind schnell erklärt.
- Wir holen den RSS-Feed und das Hintergrundbild von dem Server der Tagesschau ab.
- Daraufhin bauen wir alle Nachrichtenblöcke (Artikel) der Seite mittels Javascript dynamisch auf und stellen diese auf unsichtbar.
- Sobald die Seite fertig geladen ist, blenden wir den erste Block ein und nach 15s wieder aus. Dann die nächste Nachricht usw.
- Am Ende startet der Feed von dem ersten Block aus
Nachtrag: Die Yahoo-Api wurde eingestellt. Ich habe deshalb ein kleines Ersatzskript geschrieben und unter github veröffentlicht. Das Skript ist weitestgehend zur Yahoo-Api kompatibel. Daher lässt es sich in diesem Tutorial einsetzen.
Wir werden nun von unten nach oben durch die einzelnen Funktionen gehen.
Der HTML Bereich
<body onload="start()">
<section id="feed">
</section>
</body>
Ist kurz und knackig. Innerhalb des section-Tags fügt später die Funktion createTickerOutput() die einzelnen Nachrichtenartikel ein.
Achtung!
Wir benutzen hier bewusst der Korrektheit halber das semantische Tag section und kein unspezifisches div.
Theoretisch können wir nämlich noch zusätzliche Sektionen z.B. für Aufrufsysteme oder Interaktionsschaltflächen neben
dem Feed oder überlagert anzeigen.
Der erste Befehl an den Browser nach dem Laden des Quelltextes (onload) lautet die Funktion start() aufzurufen.
Die Start() Funktion
Die start()-Funktion setzt das Hintergrundbild und ruft die Abholfunktion getRSS() mit der RSS-Url als Parameter auf. Sowohl für den Link zum Hintergrundbild als auch zum RSS benutzen wir Konstanten am Anfang des Skriptes ab Zeile 74.
Das hat folgenden Sinn: In SmilControl und anderen CMSen besteht die Möglichkeit seinen Usern sogenannte Templates mit Platzhaltern bereitzustellen. Die Benutzer können das Template dann komfortabel für ihren Playlisten/Kampagnen personalisieren. Zum Beispiel einen anderen Feed, Hintergrund und Anzeigezeiten einsetzen. In diesem Fall müssten Sie die Konstanten gegen Platzhalter austauschen, um aus unserem Beispiel ein HTML5-Template zu machen.
Das RSS verarbeiten
In dem Beitrag CSS3-Lauftexte mit RSS wird die Funktion getRSS() ausführlich beschrieben. Sie ruft bei Erfolg die Funktion handleTicker() auf. Diese reicht den Feed an createTickerOutput() weiter,
Dort erhält jeden Artikel einen Nachrichtenblock in folgendem Format.
<article class="slides">
<h1>Überschrift der Nachricht</h1>
<video muted loop> oder <img> - Tag
<div>Nachrichtenbeschreibung</div>
</article>
Die Funktion readEnclosure() prüft das enclosure-Tag des MediaRSS-Items. Ist es ein Videos kommt das video-Tag, bei einem Bild das img-Tag zum Einsatz. Videos bekommen zusätzlich die Attribute mute und loop. In der Regel ist Ton bei Digital Signage Installationen, abgesehen von Hintergrundmusik oft unerwünscht. Außerdem sollen die jeweiligen Videos in einer Endlosschleife laufen. Jeden Nachrichtenmeldung erscheint nämlich für 15s (Konstante _slide_duration), wir wissen aber nicht wie lang die Clips sind. Ein vorzeitiger Abbruch würde also nicht gut aussehen.
Nachrichtenmeldungen anzeigen
CreateTickerOutput() baut die HTML-Struktur vollständig auf. Danach setzt die Funktion displayTicker() das erstelle HTML in das eingangs beschriebene sections-Tag ein und ruft erstmalig showSlides() auf. Diese stellt die erste Nachricht auf sichtbar und startet gegebenenfalls das Video. Da die Konstante _slide_duration auf 15 steht, ruft sich die Funktion showSlides() nach 15 Sekunden selbst auf (Rekursion). Sie erkennt, dass gerade ein Nachrichtenartikel abgespielt wird, pausiert das Video und startet den nächsten Artikel.
Layout und Design einstellen
Bis jetzt kümmerten wir uns um die Programmlogik. Wenden wir uns nun dem eingangs versprochenen Design für responsives Digital Signage zu.
Schriftgröße
Um bei jeder Bildschirmauflösung gut lesbar zu sein müssen die Maße relativ sein. Früher realisierten wir das mit Prozent oder relativ zur Grund-Schriftgröße mit em oder rem. Das war oft umständlich und fehlerbehaftet. CSS3 führte glücklicherweise neue Maßeinheiten z.B. vw (Viewport width) und vh (Viewport height) ein. Diese beziehen sich wie der Name andeutet auf die Fenstergröße und vereinfachen das Handling besonders in Bezug auf Höhenänderungen enorm.
Medienabfragen
Ein weiteres Hilfsmittel für responsives Digital Signage stellen die sogenannten Medienabfragen (Media Queries) dar. Damit lassen sich das eines Dokuments für unterschiedliche Medientypen oder Medienmerkmale festlegen. Zum Beispiel die Bildschirmauflösung, ob es ein Drucker oder Bildschirm ist usw… In unserem Fall haben wir uns für die Unterscheidung über die Orientierung entschieden. Digital Signage Inhalte werden entweder quer- oder hochformatig dargestellt. Unsere Aufgabe ist es nun Werte zu finden, welche viele unterschiedliche Bildschirmauflösungen und Verhältnisse z.B: 16:9, 21:9 oder 9:16 ansprechend anzeigt. Dabei muss alle Information innerhalb des Sichtfeldes bleiben. Das kann übrigens selbst bei einfachen Inhalten zu einer anspruchsvolle Aufgabe werden.
Die Standardeinstellungen
Bevor wir uns an die Medienabfragen machen, brauchen wir ein paar Standardeinstellungen.
body
{
background: #042650 no-repeat fixed;
background-size:cover;
}
Der Hintergrund ist dunkelblau fixiert und wiederholt sich nicht.
Ein eventuelles Hintergrundbild ist gestaucht, um den kompletten Anzeigebereich abzudecken. Das ist nicht unbedingt die beste Lösung, bei unserem dunklem
Hintergrundbild aber noch akzeptabel.
h1
{
color: #fff;
font: bold 3.0vw sans-serif;
text-shadow: 2px 2px 4px #000;
}
Für die Überschrift wählen wir eine fette serifenlose Standardschrift und versetzen sie mit einem dezenten Schattenwurf.
video, img
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
div
{
font: normal 2.2vw sans-serif;
color:#fff;
text-shadow: 2px 2px 4px #000;
}
Das Video und der normale Fließtext bekommen ebenfalls einen leichten Schattenwurf. Da die Schatten subtil sind, benutzen wir dort der Einfachheit halber Pixelwerte.
Fading
Die Übergänge werden zwischen den verschiedenen Nachrichtenblöcken grundsätzlich sanft übergeblendet. Dazu nutzen wir die in CSS-Lauftexte mit RSS vorgestellte Keyframe-Technik.
Die Übergänge stellen wir so ein:
@keyframes fade
{
from
{
opacity: 0;
}
to
{
opacity: 1;
}
}
und binden die Animation in in der Containerklasse slides ein
.slides
{
clear: both;
display:none;
opacity: 0;
animation: fade 1s linear forwards;
}
Zusätzlich stellen wir standardmäßig die Ansicht (display) auf none und zur Sicherheit die Deckkraft (opacity) auf 0.
Einstellungen für Querformat
Kommen wir nun zu den CSS-Einstellungen für das Querformat (landscape)
@media screen and (orientation:landscape)
{
h1
{
font-size: 6vh;
margin: 20vh 5vw 5vh 5vw;
}
video, img
{
float:left;
max-width:40vw;
width:60vh;
margin: 1vh 0 0 5vw;
border:1px solid #004;
}
Die Überschrift sowie den Abstand vom oberen Rand machen wir abhängig von der Höhe des Anzeigebereiches. In dem Fall 6vh bedeuten 6% der Anzeigehöhe. Das hat folgenden Hintergrund: Wenn wir das Bild für eine Videowall in die Breite ziehen müssen z.B für ein 32:9 Verhältnis würden sowohl die Überschrift als auch das Bild oder Video viel zu groß werden und aus dem Anzeigebereich austreten. Um das einzudämmen setzen wir dem Wachstum Grenzen. Das Video soll zwar 60% der Höhe einnehmen aber nicht 40% der Breite überschreiten.
div
{
float:left;
font-size: 4vmin;
line-height:5vmin;
width:45vw;
margin: 0 0 0 2vw;
padding:0;
}
}
Beim Fließtext wird es es etwas komplizierter. Er darf einerseits nicht zu groß werden, aber auch nicht zu klein. Wir schränken also die Maximale breite des divs auf 45% der Breite ein. Setzen aber bei der Schrift eine Minimalgröße vmin bedeutet das die Schrift immer mindestens 5% der Anzeigebreite oder -höhe betragen muss. So stellen wir sicher, dass Z.B. bei einem Seitenverhältnis von fast 1: 1 die Schrift noch lesbar bleibt.
Einstellungen für Hochformat
Die Einstellungen für Hochformat sind etwas einfacher, da wir in diesem Fall Überschrift Video und Fließtext untereinander anordnen können.
@media screen and (orientation:portrait)
{
h1
{
font-size: 4.5vh;
line-height:5.5vh;
text-align:center;
}
Die Überschrift wird zentriert und die Größe ist abhängig von der Höhe.
video, img
{
width:90vw;
margin: 0vh 0 4vh 5vw;
}
Das Video nimmt 90% der sichtbaren Breite ein und hält Abstand zu dem Text unten.
div
{
font-size:3vh;
line-height:4.5vh;
width:90vw;
margin: 0 0 0 5vw;
}
}
Der Fließtext nimmt ebenfalls 90% der Breite ein ist wie die Überschrift abhängig von der Anzeigehöhe.
Lohn der Mühen
Klicken Sie auf responsive-sample.html, um in Ihrem Browser unser responsives Digital Signage Beispiel live zu sehen. Verändern Sie beliebig die Größe Ihres Browserfensters. Sie werden feststellen, dass die Inhalte abgesehen von einigen extremen Seitenverhältnissen immer vollständig angezeigt werden.
Wir hoffen Sie bekamen einen interessanten Einblick für responsives Digital Signage. Sie dürfen unser Beispiel gerne benutzen, verändern und weiterentwickeln.
Wenn Sie Fragen haben, nehmen Sie Kontakt zu mir auf. Außerdem freue ich mich über Verbesserungsvorschläge.
Autor: Niko Sagiadinos
Entwickler & Co-Founder SmilControl – Digital Signage Besuchen Sie mich auf: LinkedIn, Xing oder GitHub
Entwickler & Co-Founder SmilControl – Digital Signage Besuchen Sie mich auf: LinkedIn, Xing oder GitHub