# LiveText

Mit der LiveText Schnittstelle können dynamische Elemente wie Spielstände, Zeiten oder Wettquoten in Videos eingebettet und live dargestellte werden.

# Allgemeine Informationen

Mit dieser Funktion haben Sie die Möglichkeit einen oder mehrere Texte von außen auf der Bande live darzustellen und zu ändern.

Beispiele aus der Praxis sind unter anderem:

- Spielstände
- Uhrzeiten
- Wettquoten
- statistische Spielauswertungen
- dynamischer Content wie z.B. Twitter

Die Darstellung wird über einen zusätzlichen Layer über der jeweiligen Werbung realisiert. Das funktioniert sowohl über statischen Grafiken, also auch über Animationen.

LEDVIZ selbst führt hier intern eine Liste an Tags und zugehörigen Texten. Immer wenn der Text geändert wird, wird dieser an die Ausgabe weitergegeben. Die Ausgabe erzeugt eine transparente Textur und legt diese als Layer über die jeweiligen Grafik.

Die Liste an Tags wird global geführt und ist immer auf eine Grafik oder Animation bezogen. Egal wo in der Ausgabe diese Grafik eingesetzt wird, wird der Layer erstellt und dargestellt. Für eine Grafik oder Animation können gleichzeitig mehrere Tags erzeugt werden. Die Menge der Tags für die LiveText Layer ist nur durch die Performance des jeweiligen Rechners begrenzt. In der Praxis wurden hier bereits Sequenzen mit mehr als 25 LiveText Ausgaben in der Fussball-Bundesliga, gesteuert durch einen Twitter/Instagram-Crawler, realisiert.

Dadurch das sich die Darstellung auf Text beschränkt, wird die Darstellung von Bildern oder Emojis zur Zeit noch nicht unterstützt.

# Einrichtung eines Tags

Aktuell gibt es noch keine Einrichtungsmöglichkeit über LEDVIZ selbst, so das die Tags für den LiveText Layer zur Zeit noch manuell im XML erfasst werden müssen.

Der Definitionsblock muss sich durch &lt;TAGS&gt; geklammert auf der obersten Ebene, genauso wie z.B. die Helligkeitszonen oder Segmente befinden. Hier ein Beispiel:

```XML
  <TAGS>
    <TAG>
      <TAG-FILE>BNN_LIVE_Premium_15min.avi</TAG-FILE>
      <TAG-NAME>#TAG1</TAG-NAME>
      <TAG-VALUE>2:0</TAG-VALUE>
      <TAG-DEFAULT>WILLKOMMEN</TAG-DEFAULT>
      <TAG-FONT>Tahoma</TAG-FONT>
      <TAG-SIZE>50</TAG-SIZE>
      <TAG-COLOR-RED>255</TAG-COLOR-RED>
      <TAG-COLOR-GREEN>255</TAG-COLOR-GREEN>
      <TAG-COLOR-BLUE>255</TAG-COLOR-BLUE>
      <TAG-BOLD>1</TAG-BOLD>
      <TAG-ITALIC>0</TAG-ITALIC>
      <TAG-CAPITALIZE>0</TAG-CAPITALIZE>
      <TAG-COUNT>4</TAG-COUNT>
      <TAG-Y>10</TAG-Y>
      <TAG-X>1024</TAG-X>
      <TAG-X2>2048</TAG-X2>
      <TAG-X3>4096</TAG-X3>
      <TAG-X4>8192</TAG-X4>
      <TAG-LINE-WIDTH>2550</TAG-LINE-WIDTH>
      <TAG-TIME-IN>2</TAG-TIME-IN>
      <TAG-TIME-OUT>20</TAG-TIME-OUT>
      <TAG-ALIGN>center</TAG-ALIGN>
    </TAG>
      … (evtl. weitere Tags) …

</TAGS>
```

Die einzelnen Untertags sind relativ selbsterklärend, werden aber zur Sicherheit hier nochmal aufgeführt:

<table border="1" id="bkmrk-%3Ctag-file%3E-%28string%29-" style="border-collapse: collapse; width: 100%; height: 1024px;"><tbody><tr style="height: 29px;"><td style="width: 23.82716%; height: 29px;">**&lt;TAG-FILE&gt;**</td><td style="width: 19.012345%; height: 29px;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. "werbung.avi"</span>

</td><td style="width: 57.160494%; height: 29px;">Der Name der Datei für die der Text-Layer erstellt werden soll</td></tr><tr style="height: 61px;"><td style="width: 23.82716%; height: 61px;">**&lt;TAG-NAME&gt;**</td><td style="width: 19.012345%; height: 61px;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. "TAG1"</span>

</td><td style="width: 57.160494%; height: 61px;">Der Name des Tags mit dem der Tag von außen her angesprochen wird. Dieser Name muss eindeutig sein und kann nur für diesen Tag verwendet werden.</td></tr><tr style="height: 61px;"><td style="width: 23.82716%; height: 61px;">**&lt;TAG-VALUE&gt;**</td><td style="width: 19.012345%; height: 61px;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. "2:0"</span>

</td><td style="width: 57.160494%; height: 61px;">Dieser Wert enthält den aktuellen gespeicherten Wert und muss nicht angegeben werden, es sei denn Sie möchten den LiveText Wert vorbelegen</td></tr><tr style="height: 61px;"><td style="width: 23.82716%; height: 61px;">**&lt;TAG-DEFAULT&gt;**</td><td style="width: 19.012345%; height: 61px;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. "WILLKOMMEN"</span>

</td><td style="width: 57.160494%; height: 61px;">Der Wert dieses Tags wird immer dann verwendet, wenn ein leerer Wert mitgeteilt wurde, also im Prinzip der Wert &lt;TAG-VALUE&gt; nicht belegt ist</td></tr><tr style="height: 109px;"><td style="width: 23.82716%; height: 109px;">**&lt;TAG-FONT&gt;**</td><td style="width: 19.012345%; height: 109px;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. "Tahoma"</span>

</td><td style="width: 57.160494%; height: 109px;">Der Windowsname der zu verwendenden Schriftart. Es muss hierbei der Name der Schriftartverwendet werden. Den genauen Namen können Sie den Installierten Schriftarten der Windowsinstallation entnehmen. Der Dateiname der Schriftart spielt hier keine Rolle, das Tag bezieht sich auf den Namen unter dem die Schriftart in Windows registriert ist</td></tr><tr style="height: 61px;"><td style="width: 23.82716%; height: 61px;">**&lt;TAG-SIZE&gt;**</td><td style="width: 19.012345%; height: 61px;"><span style="color: #008080;">(integer)</span>

<span style="color: #008080;">z.B. 50</span>

</td><td style="width: 57.160494%; height: 61px;">Der Wert enthält die zu verwendende Schriftgröße. Zur besseren Lesbarkeit sollten hier Werte von &gt;50 verwendet werden</td></tr><tr style="height: 29px;"><td style="width: 23.82716%; height: 29px;">**&lt;TAG-COLOR-RED&gt;**</td><td style="width: 19.012345%; height: 29px;"><span style="color: #008080;">(integer)</span>

<span style="color: #008080;">0 bis 255</span>

</td><td style="width: 57.160494%; height: 29px;">Der rote Farbwert für den zu verwendenden Text.</td></tr><tr style="height: 29px;"><td style="width: 23.82716%; height: 29px;">**&lt;TAG-COLOR-GREEN&gt;**</td><td style="width: 19.012345%; height: 29px;"><span style="color: #008080;">(integer)</span>

<span style="color: #008080;">0 bis 255</span>

</td><td style="width: 57.160494%; height: 29px;">Der grüne Farbanteil</td></tr><tr style="height: 29px;"><td style="width: 23.82716%; height: 29px;">**&lt;TAG-COLOR-BLUE&gt;**</td><td style="width: 19.012345%; height: 29px;"><span style="color: #008080;">(integer)</span>

<span style="color: #008080;">0 bis 255</span>

</td><td style="width: 57.160494%; height: 29px;">Der blaue Farbanteil</td></tr><tr style="height: 29px;"><td style="width: 23.82716%; height: 29px;">**&lt;TAG-BOLD&gt;**</td><td style="width: 19.012345%; height: 29px;"><span style="color: #008080;">(bool)</span>

<span style="color: #008080;">z.B. 0 oder 1</span>

</td><td style="width: 57.160494%; height: 29px;">Bestimmt ob der Text fett oder normal gezeichnet wird.</td></tr><tr style="height: 29px;"><td style="width: 23.82716%; height: 29px;">**&lt;TAG-ITALIC&gt;**</td><td style="width: 19.012345%; height: 29px;"><span style="color: #008080;">(bool)</span>

<span style="color: #008080;">z.B. 0 oder 1</span>

</td><td style="width: 57.160494%; height: 29px;">Bestimmt ob der Text kursiv gezeichnet wird.</td></tr><tr style="height: 57px;"><td style="width: 23.82716%; height: 57px;">**&lt;TAG-CAPITALIZE&gt;**</td><td style="width: 19.012345%; height: 57px;"><span style="color: #008080;">(bool)</span>

<span style="color: #008080;">z.B. 0 oder 1</span>

</td><td style="width: 57.160494%; height: 57px;">Bestimmt ob der gesamt Text in Großbuchstaben umgewandelt werden soll.</td></tr><tr><td style="width: 23.82716%;">**&lt;TAG-COUNT&gt;**</td><td style="width: 19.012345%;"><span style="color: #008080;">(integer)</span>

<span style="color: #008080;">0 bis 4</span>

</td><td style="width: 57.160494%;">gibt die Anzahl der zu berücksichtigen &lt;TAG-X?&gt; Werte an.</td></tr><tr style="height: 45px;"><td style="width: 23.82716%; height: 45px;">**&lt;TAG-X&gt;**

**&lt;TAG-X2&gt;**

**&lt;TAG-X3&gt;**

**&lt;TAG-X4&gt;**

</td><td style="width: 19.012345%; height: 45px;"><span style="color: #008080;">(integer)</span></td><td style="width: 57.160494%; height: 45px;">Dieser Wert bestimmt die horizonale Position in Pixeln innerhalb der Grafik. Der Wert 0 befindets sich hierbei links.</td></tr><tr style="height: 93px;"><td style="width: 23.82716%; height: 93px;">**&lt;TAG-Y&gt;**</td><td style="width: 19.012345%; height: 93px;"><span style="color: #008080;">(integer)</span></td><td style="width: 57.160494%; height: 93px;">Dieser Wert bestimmt die vertikale Position in Pixeln innerhalb der Grafik. Der Wert 0 befindets sich hierbei oben. Bitte beachten Sie hierbei das die Schriftarten in der Regel etwas Freiraum oberhalb der Buchstaben besitzen und der Text nicht direkt pixelgenau an der Position beginnt.</td></tr><tr style="height: 101px;"><td style="width: 23.82716%; height: 101px;">**&lt;TAG-LINE-WIDTH&gt;**</td><td style="width: 19.012345%; height: 101px;"><span style="color: #008080;">(integer)</span></td><td style="width: 57.160494%; height: 101px;">Dieser Wert gibt die maximale Breite des Textes an.

Ist dieser Wert größer 0, dann wird der Text bei Erreichen des Wertes automatisch umgebrochen. Die Schrifgröße wird dann entsprechend angepaßt und verkleinert.

</td></tr><tr style="height: 80px;"><td style="width: 23.82716%; height: 80px;">**&lt;TAG-TIME-IN&gt;**</td><td style="width: 19.012345%; height: 80px;"><span style="color: #008080;">(decimal)</span>

<span style="color: #008080;">z.B. 15.4</span>

</td><td style="width: 57.160494%; height: 80px;">Dieser Wert bestimmt den Zeitpunkt, wann der Text während des Abspielens erscheinen soll. Der Wert repräsentiert die Zeit in Sekunden, wobei hier Dezimale Werte mit einem Punkt als Dezimalzeichen zulässig sind.</td></tr><tr style="height: 57px;"><td style="width: 23.82716%; height: 57px;">**&lt;TAG-TIME-OUT&gt;**</td><td style="width: 19.012345%; height: 57px;"><span style="color: #008080;">(decimal)</span>

<span style="color: #008080;">z.B. 15.4</span>

</td><td style="width: 57.160494%; height: 57px;">Dieser Wert bestimmt den Zeitpunkt, wann der Text während des Abspielens ausgeblendet werden soll.</td></tr><tr style="height: 64px;"><td style="width: 23.82716%; height: 64px;">**&lt;TAG-ALIGN&gt;**</td><td style="width: 19.012345%; height: 64px;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. left, right, center</span>

</td><td style="width: 57.160494%; height: 64px;">Der Text kann an den durch &lt;TAG-X&gt; Koordinaten vorgegebenen Wert ausgerichtet werden. Zulässige Wert sind left, right und center</td></tr><tr><td style="width: 23.82716%;">**&lt;TAG-TYPE&gt;**</td><td style="width: 19.012345%;"><span style="color: #008080;">(string)</span>

<span style="color: #008080;">z.B. text, progress, image</span>

</td><td style="width: 57.160494%;">Der Standardwert ist Text, allerdings kann hier auch definiert werden, das es sich um ein Bild handelt. Der Wert in &lt;TAG-VALUE&gt; und &lt;TAG-DEFAULT&gt; wird dann als Verweis auf ein Bild interpretiert.</td></tr><tr><td style="width: 23.82716%;">**&lt;TAG-WIDTH&gt;**

**&lt;TAG-HEIGHT&gt;**

</td><td style="width: 19.012345%;"><span style="color: #008080;">(integer)</span>

</td><td style="width: 57.160494%;">Größer der Ausgabe des referenzierten Bildes im Fall des &lt;TAG-TYPE&gt; "image"</td></tr><tr><td style="width: 23.82716%;">**&lt;TAG-MIDI&gt;**

</td><td style="width: 19.012345%;"><span style="color: #008080;">(string),(string)</span>

</td><td style="width: 57.160494%;">Sollte eine Sequenz über einen Midi-Key für einen Aufruf verfügen, kann dieser Tags angewiesen werden, zusätzlich zum Dateinamen nur bei dieser Midi-Sequenzen angezeigt zu werden. Mehrere Midi-Keys können getrennt durch Komma eingegeben werden</td></tr></tbody></table>

Bitte beachten das der Renderer Zeichen, wie Return oder doppelte Leerzeichen vor der Darstellung entfernt. Um die Grafik zu positionieren empfiehlt es sich zuerst mit einem Wert von 0 für &lt;TAG-TIME-IN&gt; und einem hohen Wert, z.B. 999 für &lt;TAG-TIME-OUT&gt; zu beginnen und erst später die Abstimmung der Ein und Ausblendzeiten vorzunehmen.

# Ansteuerung des Textes

### Ansteuerung über UDP Schnittstelle

LEDVIZ hält hierfür permanent einen UDP Port offen. Alle Anfragen der Art beginnen mit einem Hashtag gefolgt von dem Tag-Namen. Die Trennung des Textes erfolgt durch eine Pipe |. Ein Beispiel eines Textes könnte also wie folgt aussehen:

 `#TAG1|Hello world!`

Wird ein Tag-Element für einen LiveText empfangen wird dieses direkt an die Ausgabe weitergegeben. Das hat zur Folge das der Layer auch sofort aktualisiert wird. Der Text kann also während seiner Laufzeit jederzeit und mehrfach, während er ausgespielt wird, aktualisiert werden.

Die UDP Daten werden auf Port **28077** im UTF8 Format erwartet.

Aktuell wird noch an einer Eingabemaske unter Nutzung der bestehenden REST API gearbeitet. Neben dem Call über die RestAPI ist geplant eine Webseite mit verfügbarren Tags und Eingabe direkt als HTML Seite zur Verfügung zu stellen.

### Ansteuerung über den LEDVIZ Operational HUB

Der LEDVIZ Operational Hub ist eine Webseite die Funktionen von LEDVIZ als Webseite bereitstellt. Zugriff auf den Hub erfolgt über den Aufruf [http://localhost:19399](http://localhost:19399). Anstelle von localhost kann auch der spezifische Rechnername oder die IP angegeben werden. Somit ist eine Remote Eingabe der Texte über dritte Systeme jederzeit möglich.

Nach dem Aufruf des LEDVIZ Operational Hub im Browser sollte folgende Seite angezeigt werden:

[![screen_hub.png](https://docs.ledviz.com/uploads/images/gallery/2022-09/scaled-1680-/tbUgbD0STXoK7QYe-screen-hub.png)](https://docs.ledviz.com/uploads/images/gallery/2022-09/tbUgbD0STXoK7QYe-screen-hub.png)

Hier kann über den Menüpunkt oben Links ein dialog für die Eingabe von Texten geöffnet werden. Es werden nur die Tags gelistet, die auch im aktuellen Projekt enthalten sind. Eingaben können hier direkt vorgenommen und gesendet werden.

[![screen_hub_livetext.png](https://docs.ledviz.com/uploads/images/gallery/2022-09/scaled-1680-/M2SE7WzM6HqYb86h-screen-hub-livetext.png)](https://docs.ledviz.com/uploads/images/gallery/2022-09/M2SE7WzM6HqYb86h-screen-hub-livetext.png)

### Sonstige Tools

Zum Testen der Schnittstelle kann ein kleines Tool verwendet werden, das ursprünglich für die Bereitstellung von Wettquoten für ein Trainingsspiel des 1.FC Köln gegen den Watford FC erstellt wurde: [https://www.ledviz.de/download/LEDVIZlive.zip](https://www.ledviz.de/download/LEDVIZlive.zip). Das Tool verwendet die Tags:

`#QUOTE-WIN-FCK` `#QUOTE-WIN-WTF` `#QUOTE-TOR-FCK` `#QUOTE-TOR-WTF`

# KINEXON Connector

Die Daten für die LiveText Schnittstelle können aus verschiedenen Quellen kommen. Unter anderem wurde bereits eine Schnittstelle zu Kinexon realisert. Kinexon sammelt über Tracker verschiedenste statistische Daten z.B. in der Handball-Bundesliga.

Der Connector dient hier als Vermittler zwischen Kinexon und LEDVIZ. Die Daten werden in Realtime von der Kinexon Schnittstelle abgefragt und als Tags im LiveText Format an LEDVIZ weitergegeben. Hierbei werden die Daten aufbereitet und in Textform umformatiert. Ausgangspunkt sind die abgerufenen Daten im JSON Format der Kinexon REST-API.

  
[![kinexon.png](https://docs.ledviz.com/uploads/images/gallery/2022-09/scaled-1680-/hGDwWdZzJFlO0LZu-kinexon.png)](https://docs.ledviz.com/uploads/images/gallery/2022-09/hGDwWdZzJFlO0LZu-kinexon.png)

