Kanäle mit SVG und Feeds

Dieses HowTo beschreibt wie Sie als SmilControl-Reseller Kanäle aus RSS-Feeds und SVG-Templates erstellen können.

Bei SmilControl verstehen wir unter einem Kanal einen Container mit bereitgestellten Inhalten, die ein Benutzer als einzelnes Element in seine Playliste integrieren kann. Das können unterschiedliche Nachrichten über Politik, Wirtschaft, Kultur, Wetterberichte oder Sportergebnisse und vieles mehr sein. Der Benutzer muss sich nicht selber um die Aktualisierung kümmern.

Wir erläutern zunächst einige technische Grundlagen: SVG, Template-Engine und RSS bzw. Atom-Feeds. Danach wird eine praxisnahe Anwendung gezeigt.

Was ist SVG?

Analog zu SMIL ist SVG (Scalable Vector Graphics) eine von XML abgeleitete Markierungsprache. Sie beschreibt als eingetragener W3C Standard zweidimensionale Vektorgrafiken. SVG wird inzwischen auch von allen gängigen Webbrowsern unterstützt. Die aktuelle Version ist SVG 1.1 und es gibt 3 Profile.

• Tiny für Geräte mit geringer Leistung
• Basic für Geräte mit höherer Leistung
• Full beinhaltet den kompletten Funktionsumfang

Ursprünglich war geplant SVG auf 1.2 zu erweitern, aber das wurde 2011 zugunsten von SVG 2.0 verworfen, an welchem immer noch gearbeitet wird. Lediglich ein SVG 1.2 Tiny für Mobilgeräte wurde spezifiziert, da diese im Laufe der Jahre immer leistungsfähiger wurden und dringend neue Features benötigten.

SmilControl interpretiert SVG 1.1 und zusätzlich für die Anwendung in Kanälen auch SVG 1.2. Diese Version unterstützt nämlich automatisch umbrechenden Fließtext.

Was ist eine Template-Engine?

Templates sind Vorlagen in denen bestimmte Platzhalter enthalten sind. Eine Template-Engine ist eine Software welche die Platzhalter aus den Vorlagen durch Inhalte ersetzt. Diese Inhalte können manuell von einem Benutzer mit einem Formular eingegeben werden oder aus einem Feed kommen. Letzteres ermöglicht uns immer aktuelle News zu einem Themengebiet anbieten zu können, ohne diese manuell einpflegen zu müssen.

SmilControl verarbeitet sowohl SVG-Templates aus denen Bilder generiert werden, als auch HTML5-Templates aus denen Webseiten oder Digital Signage Widgets erzeugt werden. Wir werden im Laufe dieser SmilControl-Academy-Serie auch auf Widgets zu sprechen kommen.

Was sind RSS bzw. Atom-Feeds?

RSS (Rich Text Summary) sind eine Sammlung von XML-Dateiformaten für Feeds mit denen Nachrichtenticker oder andere Informationen einheitlich zur Verfügung gestellt werden können. In einem RSS-Feed gibt es eine Auflistung von Meldungen (Items) mit einem bestimmten Format. Z.B. gibt es immer ein Überschriftfeld und ein Beschreibungsfeld. Durch diese Standardisierung lässt sich die Verarbeitung automatisieren.

Ein Atom-Feed ähnelt prinzipiell einem RSS. Er nutzt aber im Gegensatz dazu andere Feldnamen und kann zusätzlich Angaben zur Formatierung der Beschreibung enthalten. Z.B. kann in den Beschreibungsfeldern von RSS sowohl Text als auch HTML stehen.

Ein Programm welches RSS verarbeitet, bekommt keine Möglichkeit das zu unterscheiden. Bei Atom-Feeds lässt sich ein Typ mitgegeben, so dass eine Verarbeitungssoftware das berücksichtigen kann. Dadurch lassen sich auch Bilder, Videos und andere Medien integrieren. Ursprünglich sollte ATOM RSS ablösen, aber derzeit koexistieren beide Formate.

SmilControl kann mit allen angesprochenen Formaten umgehen. In der Feedverwaltung (siehe Screenshot) wird ein Feed eingetragen, welchen das System mehrmals am Tag automatisch aktualisiert.

Achtung rechtliche Fallstricke!

Denken Sie bitte vor dem Einsatz an die Nutzungsrechte. Stellen Sie sicher, dass Sie den Feed auch in einem Digital Signage System benutzen dürfen. Die meisten RSS/Atom-Feeds, wie Spiegel-online, ntv, heise.de usw. sind zwar öffentlich zugänglich, dürfen aber kostenlos nur in Feedreadern oder unter bestimmten Bedingungen auf Webseiten genutzt werden.

Bitten Sie vorher den Herausgeber unbedingt um eine schriftliche Freigabe, sonst riskieren Sie unter Umständen eine teure Abmahnung. Falls er sich nicht meldet, was unserer Erfahrung nach leider häufig passiert, sehen Sie von einer Nutzung ab. Am besten suchen Sie sich einen Digital Signage RSS-Feed Dienstleister. Bei diesen Feeds ist dann sichergestellt, dass die Bilder in einer vernünftigen HD-Auflösung enthalten sind und die Beschreibungstexte aus mehr als nur ein paar Wörtern bestehen.

Oder fragen Sie einfach uns. Über die Jahre konnten wir bezüglich der Nutzung von Feeds einige Erfahrungen sammeln und beraten Sie gerne mit unserer Expertise.

Ein erstes SVG-Beispiel

Nachdem nun alle Zutaten beisammen sind, können wir anfangen ein Template zu bauen.

<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2">
	<image xlink:href="http://server.tld/background.jpg" height="1080" width="1920" y="0" x="0"/>
	<image x="90" y="310" width="590" height="590" preserveAspectRatio="xMinYMin meet" xlink:href="{TEMPLATE_IMAGEONLY_1@insert_image}"/>
		<text fill="#ffffff" x="720" y="350" font-size="30" font-weight="bold" font-family="helvetica">
			{TEMPLATE_TEXTBOX_1@title}
	</text>
</svg>

Der Header

Die erste Zeile

<svg width="1920" height="1080"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.2">

definiert die Breite und Höhe des SVG-Dokumentes. Darüber hinaus steht dort die Versionsnummer und der sogenannte Namensraum (Namespace). Das ist ein Begriff aus der Programmierung und kennzeichnet im XML das Vokabular, welches in dem nachfolgendem Dokument benutzt werden kann. Sie können das mit einer Telefonvorwahl vergleichen. Erst wer den „Namensraum“ +49511 wählt hat z.B. die Möglichkeit unser Büro in Hannover zu erreichen.
Als Versionsnummer setzen wir 1.2 ein. Weiter unten folgt die Erklärung.

Die Bilder

Bei dem ersten Inhalts-Tag
Die Verknüpfung zu einem Kanal

<image xlink:href="http://server.tld/background.jpg"
	height="1080" width="1920"
	y="0" x="0"/>

handelt es sich um ein Hintergrundbild, welches auf der Adresse https://server.tld/background.jpg zu erreichen ist. Es soll mit eine Auflösung von 1920×1080 Pixel angezeigt werden und beginnt in der linken oberen Ecke (x = 0 und y=0) des SVG-Dokumentes.
Wenn das Bild kleiner oder größer ist, wird es auf die angegebene Auflösung skaliert.
Das nächste Bild:

<image x="90" y="310"
	width="590" height="590"
	preserveAspectRatio="xMinYMin meet"
	xlink:href="{TEMPLATE_IMAGEONLY_1@insert_image}"/>

platzieren wir 90 Pixel nach rechts und 310 Pixel nach unten. Die Auflösung beträgt 590×590 Pixel. Durch das Attribut preserveAspectRatio=“xMinYMin meet“ gelten die

Die Textinhalte

Das Text-Tag

<text fill="#ffffff"
	x="720" y="350"
	font-size="30" font-weight="bold" font-family="helvetica">
		{TEMPLATE_TEXTBOX_1@title}
</text>

definiert wo und wie ein Text hinkommen soll. Er beginnt an Position 720 Pixel von links, 350 Pixel von oben, in der Farbe weiß (#ffffff), 60 Pixel groß und die Schriftart ist eine Standard Helvetica in fett (bold). {TEMPLATE_TEXTBOX_1@title} ist wiederum ein Platzhalter der Template-Engine von SmilControl und bedeutet, daß an dieser Stelle der Platzhalter mit Überschrift (Title) einer Meldung aus dem RSS- bzw. Atom-Feed ersetzt werden soll.

Wir verknüpfen einen Feed mit dem Template zum Kanal

Wenn wir auf „Speichern“ klicken, wird beim nächsten Generierungszeitpunkt des Systems der neue Kanal und ein Vorschaubild erstellt. Wenn Sie nicht darauf warten wollen, gehen sie nochmal in den soeben erstellten Kanal rein. Dort befindet sich jetzt neben dem Speichern-Knopf ein weiterer namens „Kanal manuell erstellen“. Wenn Sie den drücken sollte nach kurzen Wartezeit ein Vorschaubild erscheinen. Glückwunsch! Sie haben soeben ihren ersten Kanal erstellt.

Erweiterung mit Fließtext

Jetzt fehlt natürlich noch die Beschreibung, denn unsere Kunden möchten ja neben dem Bild und der Überschrift auch ein wenig Text lesen während sie z.B. in einer Warteschlange vor der Kasse stehen.

An dieser Stelle stoßen wir an Grenzen. Das naheliegende wäre ein weiteres text-Tag:

<text fill="#ffffff" x="845" y="430" font-size="30" font-weight="normal" font-family="helvetica">
	{TEMPLATE_TEXTBOX_1@description}
</text>

hinzuzufügen und mit {TEMPLATE_TEXTBOX_1@description} die Beschreibung aus der Feed-Meldung einzusetzen. Allerdings wird dann folgendes passieren:

Wie eingangs erwähnt, bietet das Text-Tag aus SVG 1.1 keine Möglichkeit, Texte automatisch umzubrechen. Dafür bietet aber SVG 1.2 spezielle Tags, nämlich flowRoot, flowRegion und flowDiv. Erinnern Sie sich, wie wir weiter oben im svg-Tag zu version=“1.2“ geraten haben? Nur dann können diese flow-Tags genutzt werden. Wird diese Eingabe weggelassen, geht das System von Version 1.1 aus.

So sollten die neuen Tags eingesetzt werden:

<flowRoot>
	<flowRegion>
		<rect x="845" y="350" width="980" height="780" visibility="hidden"/>
	</flowRegion>
	<flowDiv>
		<flowPara>
			{TEMPLATE_HEADER_1@title}
		</flowPara>	
		<flowPara>
			{TEMPLATE_TEXTBOX_1@description}
		</flowPara>
	</flowDiv>
</flowRoot>

Das sieht auf den ersten Blick komplizierter aus als es ist. Mit flowRoot wird ein Fließbereich angekündigt. In flowRegion wird gekennzeichnet, dass hier jetzt eine oder mehrere Regionen kommen in denen Text fließen soll. In unserem Fall wird ein Rechteck die Region definieren. Das Rechteck selber soll in unserem Beispiel nur den Bereich definieren und nicht angezeigt werden. Also setzen wir das Attribut visibility auf hidden (versteckt), damit es unsichtbar wird.

Alles was nun unter flowDiv als „Parameter“ definiert wird, passt sich innerhalb dieses Rechteckes ein. Da wir nicht wissen, wie breit die Überschrift ist, wurde diese mit in das Rechteck integriert.

Lohn der Mühe

Ein weiterer Vorteil von SVG ist die Nutzung von CSS, um zusätzliche Schriften und Formatierungen wie in HTML zentral zu bearbeiten. Hier ist der dazugehörige SVG-Quelltext so wie im Beispiel genutzt. Setzen Sie anstelle von server.tld ihre eigene Domain und Fonts ein.

<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2">
	<styl e type="text/css">
	@font-face
	{
		font-family: "Font1-Regular";
		src: url("https://server.tld/font1.ttf") format("truetype");
	}
	@font-face
	{
		font-family: "Font2-Regular";
		src: url("https://server.tld/font2.ttf") format("truetype");
	}
	.header
	{
		font: 75px Font1-Regular;
		margin:0 0 60px 0;
	}
	.float_text
	{
		font: 45px Font2-Regular;
		line-height:1.3
	}
	</style>


	<image xlink:href="https://server.tld/background.jpg" id="svg_1" height="1080" width="1920" y="0" x="0"/>
	<image x="90" y="310" width="590" height="590" preserveAspectRatio="xMinYMin meet" id="svg_2" xlink:href="{TEMPLATE_IMAGEONLY_1@insert_image}"/>
	<g id="content">
		<flowRoot>
			<flowRegion>
				<rect x="845" y="295" width="980" height="780" visibility="hidden"/>
			</flowRegion>

			<flowDiv>
				<flowPara class="header" fill="#FFFFFF">
					{TEMPLATE_HEADER_1@title}
				</flowPara>	
				<flowPara class="float_text" fill="#ffffff">
					{TEMPLATE_TEXTBOX_1@description}
				</flowPara>
			</flowDiv>
		</flowRoot>
	</g>
</svg>

Alternative Formen

Das sind natürlich bei weitem nicht alle Möglichkeiten, die sich uns mit SVG bieten.
Setzen wir anstelle des Rechteckes (rect) diesen Pfad:

<path> d="m961.77778,294.22222l888.88889,-9.77778l-259.55556,734.22222l-888.88889,5.33333l259.55556,-729.77778z" visibility="hidden"/>

wird der Text in einem Parallelogramm angeordnet, also leicht geneigt ausgegeben.

Die Nutzung eines Kreises

<circle cx="1200" cy="600" r="400" visibility="hidden"/>

passt den darin liegenden Text in eine ebensolche Form an.

Ein mehrspaltiges Design ist ebenfalls möglich, indem zwei Rechtecke als flowRegion angegeben werden. z.B.:

<rect x="845" y="295" width="500" height="780" visibility="hidden"/>
<rect x="1345" y="295" width="500" height="780" visibility="hidden"/>

Der Kreativität sind somit kaum Grenzen gesetzt. Wenn Sie Fragen oder Anmerkungen haben scheuen Sie sich nicht uns zu kontaktieren.

Bild- und Feedmaterial sowie Logo mit freundlicher Erlaubnis von UnicumTV.