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.

Bild: Responsives Digital Signage im Querformat
Querformat / Landscape
Bild Responsives Digital Signage im Hochformat
Hochformat / Portrait

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.

  1. Wir holen den RSS-Feed und das Hintergrundbild von dem Server der Tagesschau ab.
  2. Daraufhin bauen wir alle Nachrichtenblöcke (Artikel) der Seite mittels Javascript dynamisch auf und stellen diese auf unsichtbar.
  3. Sobald die Seite fertig geladen ist, blenden wir den erste Block ein und nach 15s wieder aus. Dann die nÀchste Nachricht usw.
  4. 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.


Gravatar Nikolaos Sagiadinos
Autor: Nikolaos Sagiadinos
Spezialisiert auf Digital Signage Software
Besuchen Sie mich auf: LinkedIn und Xing

Kontaktformular

Wir haben Ihr Interesse geweckt?
Sie haben weitere Fragen oder wĂŒnschen eine kostenfreie Beratung?
Setzen Sie sich einfach mit uns in Verbindung.

Unsere Kontaktdaten

SmilControl GmbH
Niederaue 1a
D-30419 Hannover

☎ +49 (0) 511 – 96 499 560

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

Vertretungsberechtigter GeschĂ€ftsfĂŒhrer:
Nikolaos Sagiadinos