Logo/Werbung auf Kundendisplay

HINWEIS: Um Werbung oder ein Logo auf dem Kundendisplay darstellen zu können, muss das Kundendisplay im Standardmodus (nicht im Kompakt-Modus) laufen.

Das einzufügende Bild mit den Maßen 440px x 440px muss in eine Vektorgrafik, Format *.svg, umgewandelt werden.

Umwandeln einer Bilddatei in eine Vektorgrafik

Die hier im Beispiel benutzte Software heißt "Inkscape". Diese kann hier kostenfrei heruntergeladen werden.

Schritt 1

  • Starten der Anwendung Inkscape
  • Navigieren zu Datei > Dokumenteinstellungen > Seite
  • Unter Allgemein folgende Einstellung vornehmen
  • Anzeigeeinheiten: px
  • Unter Benutzerdefiniert folgende Einstellungen vornehmen
    • Einheit="px" 

HINWEIS: Die Einheit muss als erstes angepasst werden

    • Breite="440"
    • Höhe="440"  
    • Fenster schließen

ger-inkscape-f-ds-----edited.png

 

Schritt 2

  • Navigieren zu Datei > Importieren
  • Es öffnet sich der Dateimanager
  • Datei suchen und auswählen
  • Datei mit Öffnen bestätigen

ger-inkscape-f-imp-file_manager-file_selection---edited.png

  • Es öffnet sich das Pop-up Bitmap-Bildimport
    • Art des Bildimports: Einbetten
    • Auflösung des Bildes (dpi): Aus Datei
    • Darstellungsmethode (Rasterbilder): Glätten (verbesserte Qualität)
    • Eingabe mit OK bestätigen
    • Das Bild wird in seiner Originalgröße eingefügt

ger-inkscape-f-imp-svg_bitmap_import_popup----edited.png

 

Schritt 3

  • Skalieren des Bildes
    • Koordinate X: 0
    • Koordinate Y: 0 
    • Breite B: 440
    • Höhe H: 440 

ger-inkscape-p_s------edited.png

 

Schritt 4

  • Datei > Speichern unter
    • Es öffnet sich der Dateimanager
    • Speicherort bestimmen
    • Dateiname: Namen vergeben
    • Dateityp: normales SVG (*.svg) 
  • Speichern

ger-inkscape-f-sa-----edited.png

 

Extrahieren des relevanten Quellcodes aus der generierten *.svg für die Cloud

Das Bild wird per Quellcode in die Cloud eingefügt, daher ist es notwendig diesen vorher per Kopieren-Funktion zu entnehmen.

WICHTIG: Es werden durch uns keine Leerzeichen hinzugefügt.

 

Schritt 1

  • Texteditor öffnen
  • Folgenden Header-Code per Kopieren/Einfügen-Funktion ins Textdokument einfügen:

 

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg onload="" version="1.1" id="HC" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.41666 116.41667"

height="440"

width="440" xml:space="preserve">

<!-- SCRIPT1 -->

<image width="116.41666"

height="116.41666"

preserveAspectRatio="none" id="GFX"

 

ger-text_editor-cc-header-----edited.png

 

Schritt 2

  • Öffnen der erstellten *.svg-Datei in einem Webbrowser
  • Rechtsklick > öffnen mit" (z.B. Chrome oder Microsoft Edge)

ger-operating_system-fm-csvg-right_click-open_with-any_browser--edited.png

  • Quelltextanzeigen lassen
  • Rechtsklick > Seitenquelltext anzeigen

ger-edge-rc-pu-show_page_source_code----edited.png

  • Kopieren des Body-Codes ab xlink:href=" bis zum ersten "> gleich nach dem Codeabschnitt

HINWEIS: Dieser code kann mehr als 1000 Zeilen lang sein 

  • Einfügen des kopierten Body-Codes direkt nach dem Header-Code im Texteditor

ger-edge-rc-spsc-necessary_code_marked----edited.png

ger-text_editor-cc-spsc-superfluous_code_marked----edited.png

  • Löschen des überflüssigen bodycodes zwischen dem nicht makierten Anführungszeichen und dem Größer-als-Zeichen

HINWEIS: Dieser Code kann je nach Bild verschieden aussehen.

ger-text_editor-cc-body-----edited.png

Schritt 3

  • Folgenden Footer-Code per Kopien/Einfügen-Funktion direkt nach dem Body-Code ins Textdokument einfügen:

</image>

</svg>

ger-text_editor-cc-footer-----edited.png

Das Ergebnis sollte in verkürzter Form wie folgt aussehen:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

[...]

height="116.41666"

preserveAspectRatio="none" id="GFX"

xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/7QA4UGhvdG9zaG9wIDM

[...]

gZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVms">

</image>

</svg>

 

Überprüfung und Test des Codes

Schritt 1

  • Einloggen ins Vorführsystem Checkout (Cloud 9716)
  • Navigieren zu Setup > Setup > Räume

 

Schritt 2

  • Beim Checkout-Raumplan die Bearbeitung (Stiftsymbol) öffnen
  • Klicken auf SVG
  • Den hier stehenden Code komplett durch Kopieren/Einfügen mit dem Code aus dem Dokument ersetzten

HINWEIS: Je nach Bild und zu verarbeitenden Zeilen Codes durch die Cloud, kann es mehrere Minuten dauern, bis ein Ergebnis angezeigt wird.

  • Speichern

ger-cld-s-s-rooms-edit_form-svg--edited.png 

Schritt 3

  • Zur App wechseln
  • Stammdaten laden
  • Kundendisplay neu starten
  • Die Grafik sollte jetzt auf dem Kundendisplay angezeigt werden

Einfügen des Codes in die Kunden-Cloud

Wurde die Grafik im Test fehlerfrei dargestellt, kann nun die Grafik in die Kunden-Cloud eingefügt werden.

 

Schritt 1

  • Login in die Kunden-Cloud
  • Navigieren zu Setup > Hardware

 

Schritt 2 

HINWEIS: Nur notwendig bei aktiviertem Kompakt-Modus.

    • Bearbeitung des Kundendisplay öffnen
    • Kompakt-Modus: Nein

 

  • Speichern

 

 

Schritt 3

  • Navigieren zu Setup > Setup > Räume
  • Bearbeitung des gewünschten Raumes öffnen

 

Schritt 4 

  • Klicken auf SVG (ggf. wechseln von Designer zu SVG, siehe Bild 3.1)
  • Den hier stehenden Code komplett durch Kopieren/Einfügen mit dem Code aus dem Dokument ersetzten

HINWEIS: Je nach Bild und zu verarbeitenden Zeilen Codes durch die Cloud, kann es mehrere Minuten dauern, bis ein Ergebnis angezeigt wird.

 

  • Speichern

 

 

Schritt 5

  • Stammdaten vom Kunden laden lassen
  • Ggf. Kundendisplay neu starten lassen