Digital Signage Lauftexte mit SMIL

Digital Signgae Lauftexte
Bildquelle: Jbuechler, 2003-05-13 NYC TimesSquare, CC BY-SA 3.0

In den letzten Beiträgen haben wir Digital Signage Lauftexte, welche Ihre Inhalte aus RSS-Feeds bekamen, mit zwei modernen HTML5-Techniken vorgestellt. Allerdings existieren noch weitere Alternativen, von denen wir zwei vorstellen werden. Eine davon basiert auf SVG und SMIL. Da unsere Digital Signage-Produkte die Sprache SMIL intensiv nutzen, halten wir es für eine Frage der Ehre einen Lauftext auch damit umzusetzen.
Wenn Sie nähere Informationen zu SMIL lesen möchten, finden Sie hier einen ausführlichen Beitrag darüber. SVG wird in diesem Artikel erklärt.

Einfacher Lauftext mit SVG und SMIL

Im Vergleich zu den bis jetzt vorgestellten Konzepten, ist ein SVG/SMIL-Lauftext eher einfach umzusetzen.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="80px">
	<text id="svg_ticker" x="0" y="30" style="font:30px Arial;">
		 Lorem ipsum dolor sit amet, consetetur
		 <animate attributeName="x" from="100%" to="-100%" dur="10s" repeatCount="indefinite"/>
	</text>
</svg>

Wir erstellen ein SVG innerhalb der body-Tags mit einem SVG-Text-Tag am linken Rand und 20 Pixel von oben. In dem Stylesheet für das Text-Tag setzen wir wie gehabt, eine 30px Arial Schrift ein.
Innerhalb des SVG-Text-Tags setzen wir ein SMIL-Animations-Tag. Das sorgt dafür, daß das Elternelement animiert wird. Attributname=“x“ bestimmt, dass der Text horizontal gescrollt wird. Analog dazu wäre y vertikales Scrolling.
From steht auf 100%. D.h. der Text fängt nach dem rechten Rand an und scrollt bis er vollständig im linken Rand raus läuft (to=“-100%“). Um die Animation endlos laufen zu lassen muss das Attribut repeatCount den Wert undefiniert (indefinite), also quasi unendlich erhalten.

Browserunterstützung von SMIL

Es gibt dabei einen Nachteil: Das Verfahren funktioniert nicht mit den Browsern von Microsoft (IE und Edge). Diese unterstützen zwar SVG, aber keine SMIL-Animationen (Stand Mai 2018). Solange Sie keinen MS-Browser für Digital Signage Lauftexte nutzen müssen, kann diese Technik eine akzeptable perfomante Alternative sein. Das Animate-Tag kann auch interessant werden, wenn Sie einen SMIL-kompatiblen Medienplayer einsetzen. Aber das wird Gegenstand eines späteren Beitrages. Wenn Sie keinen MS-Browser nutzen, klicken Sie auf die Datei svg_animations_1.html und sie sehen einen hoffentlich ruhigen Lorem-Ipsum -Lauftext.

SVG/SMIL mit RSS

Um das SVG mit Inhalten aus einem RSS-Feeds zu versorgen, können wir fast komplett die Javascriptfunktionen aus dem CSS3-Beispiel nutzen. Die einzige Änderung betrifft konzeptbedingt die Ausgabefunktion displayTicker().

function displayTicker(ticker_text, num_headlines)
{
	document.getElementById("svg_ticker").innerHTML = ticker_text +
			'<animate attributeName="x" from="100%" to="-100%" dur="' +
			getAnimDurationInSeconds(num_headlines) +
			'" repeatCount="indefinite"/>';
}

Wir befüllen jetzt das SVG-Textelement mit dem RSS-Text und dem animate-Tag. Das muss in der Funktion geschehen, ansonsten wird ein eventuell bereits im text-tag befindliches animate überschrieben. Ausserdem können wir so die ermittelte Laufgeschwindigkeit setzen. Die Datei svg_animations_rss.html zeigt Ihnen, einen kompatiblen Browser vorausgesetzt, den bekannten RSS-Feed als Lauftext.

Lauftexte mit Marquee

Der Vollständigkeit halber wollen wir Ihnen eine Technik aus dem Pleistozän des Web nicht vorenthalten. Die Älteren von uns erinnern sich bestimmt noch an das in den 90er und Anfang der 2000er Jahren besonders beliebte Marquee-Tag des IE. In der Zeit nutzte gefühlt das halbe Web, dieses aufgrund seiner Ruckeligkeit und Inkompatibilität zum HTML-Standard umstrittene Tag. Allerdings ist es nach wie vor am einfachsten damit einen Lauftext umzusetzen. Sie brauchen lediglich ein

<marquee id="old_school" style="font:30px Arial">Lorem ipsum dolor sit amet, consetetur</marquee>

,

um zumindest im Chromium/Chrome einen sogar ansehnlichen scrollenden Lauftext zu bekommen. In der Datei marquee_rss.html finden Sie die Variante mit RSS-Inhalten.

Warum Sie besser kein Marquee nehmen sollten

Obwohl Marquee offenbar die simpelste Methode ist einen Digital Signage Lauftexte zu erstellen, sollten Sie es besser nicht tun. Zum Einen läuft er nur auf dem Chromium/Chrome flüssig. Unter Firefox und selbst im Edge ruckelt es schlimmer als in den 90ern. Des Weiteren gilt Marquee offiziell als veraltet und das W3C rät ausdrücklich dazu CSS3 Animationen als Ersatz zu verwenden. Obwohl Marquee mit vielen Browsern noch funktioniert, kann es jederzeit bei einem Update entfernt werden.

Wo ist das Problem mit Marquee?

Auch wenn das keine Relevanz für Digital Signage besitzt, werden sich vielleicht einige die Frage stellen, warum ein so beliebtes einfach zu handhabendes Tag nicht in den Standard übernommen wurde. Die Antwort liegt in der Trennung zwischen Design und Inhalt, der sich modernes HTML verschrieben hat. HTML-Code soll dabei die semantische Struktur des Inhalts darstellen. Z.B. unterschiedliche Überschriften, Navigation, Fließtexte, Absätze usw. Die Präsentation und das Design z.B. Schrift, Schriftgröße, Abstände, Animationen usw. gehören in das CSS. Dadurch lassen sich Webseiten effizienter konzeptionieren, layouten und pflegen. Die Aufgabenbereiche sind durch die Trennung klarer. Spezialisten wie Autoren und Designer können parallel ihre Aufgaben erledigen, ohne sich in die Quere zu kommen. Um ein Webseitendesign zu ändern oder unterschiedliche Ausgabegeräte zu bedienen, braucht im Optimalfall nur noch das CSS bearbeitet zu werden.
Marquee wurzelt, wie font, blink, center und andere inzwischen verschwundene Tags, in der Zeit des ersten Browserkrieges zwischen Netscape und Microsoft. Dort wurden Tags nur aufgrund des Marketings und zur Abhebung vom Mitbewerb programmiert. Als reines Präsentationselement sollte eine Funktionalität wie Marquee nicht im HTML-Bereich existieren.
Es gab übrigens in der Vergangenheit Bestrebungen Marquee korrekt als CSS3-Modul wieder einzuführen, und viele Nachrichtenseiten berichteten vor einigen Jahren von einer Wiederauferstehung. Allerdings wurden die Arbeiten daran 2014 eingestellt.

Zusammenfassende Vergleiche

Wir haben jetzt vier unterschiedliche Techniken kennengelernt, um Digital Signage Lauftexte für Bildschirme umzusetzen. Lassen Sie uns im folgenden die jeweiligen Vor- und Nachteile zusammenfassen.

Lauftexte mit CSS3-Animationen

Vorteile:

  • beliebig lange Texte möglich
  • abgesehen von der Funktionalität Feeds zu parsen, ist keine Javascriptprogrammierung notwendig

Nachteile:

  • Aufwändiges Testen, um die ruckelfreieste Variante zu finden
  • Die Technik dahinter ist schwieriger zu verstehen
  • Schrifteffekte wie z.B. Glühen oder Schatten sind abhängig vom eingesetzten Browser.

Lauftext mit Canvas

Vorteile:

  • Ergibt oft den flüssigsten Lauftext. Auf einem XMP-3350 mit einem besonders langsamen Prozessor haben wir 2012 nur mit dieser Technik einen präsentierbaren Lauftext erzeugen können
  • Durch Programmierung können zahllose Schrifteffekte hinzugefügt werden

Nachteile:

  • Es gibt Limits für die Pixelbreite, die nur durch komplexe Programmierungen zu umgehen sind
  • bei manchen 4.0 und 4.4 Androiden ruckelt es mehr als CSS3-Animationen
  • am meisten Programmierarbeit erforderlich

Lauftext mit SVG/SMIL

Vorteile:

  • beliebig lange Texte möglich
  • abgesehen von der Funktionalität Feeds zu parsen, ist keine Javascriptprogrammierung notwendig
  • einfache Implementation

Nachteile:

  • Nicht jeder Browser implementiert SMIL-Animate, was in dem Fall den Einsatz von Javascript erzwingt
  • Texteffekte nur im Rahmen der SVG-Unterstützung des Browsers

Lauftexte mit Marquee

Vorteile

  • beliebig lange Texte möglich
  • besonders einfache Implementation

Nachteile

  • kein Standard und kann jederzeit vom Browserhersteller bei einem Update abgeschaltet werden
  • läuft aktuell (2018) nur auf Chrome/Chromium akzeptabel
    aus heutiger Sicht fehlkonzeptioniert

Fazit für Digital Signage Lauftexte

Wir haben positive Erfahrungen mit der Canvas-Technik bei Linux- und Windows-basierender Hardware gemacht. Unter ARM-Hardware mit Android 4 und 5 sind CSS3-Animationen oder SVG/SMIL nicht selten die laufruhigste Alternative. Letztendlich müssen Sie für Ihre Hardware-Softwarekombination durch Ausprobieren herausfinden, welche Variante für Ihr Setup am besten funktioniert. Wir hoffen Ihnen mit dieser Artikelserie ein wenig bei der Entscheidungsfindung geholfen zu haben.

Zum einfachen Vergleich auf Ihrer Hardware listen wir im folgenden nochmal alle Links zu den Lauftexte mit RSS auf:

Mit diesem Beitrag schliessen wir unseren Workshop über Digital Signage Lauftexte erstmal ab. Wir hoffen, dass Ihnen die Lektüre gefallen und auch weitergeholfen hat.

Wenn Sie Fragen oder Anmerkungen haben, können Sie uns natürlich auch gerne kontaktieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.