📺 Signage Editor - Dokumentation

1. Installations-Anleitung

Voraussetzungen

• PHP 7.4 oder höher
• Webserver (Apache oder Nginx)
• Schreibrechte auf den data/ Ordner

Ordnerstruktur

Installation Schritt für Schritt

1. Dateien hochladen
   Laden Sie alle Dateien auf Ihren Webserver in das gewünschte Verzeichnis.
2. Rechte setzen
   Stellen Sie sicher, dass die folgenden Ordner vom Webserver beschrieben werden können:

   chmod 755 data/ uploads/

3. Admin-Panel öffnen
   Öffnen Sie den Browser und navigieren Sie zu:
   http://[SERVER]/signage/admin/
4. Passwort festlegen
   Beim ersten Aufruf erscheint ein Setup-Wizard. Legen Sie ein Passwort für den Admin-Zugang fest.

Abbildung 1: Login-Seite – Nach erfolgreicher Einrichtung werden Sie hier aufgefordert, sich anzumelden.

2. Passwort-Reset

Falls Sie das Admin-Passwort vergessen haben, können Sie es zurücksetzen:

1. Auth-Datei löschen
   Löschen Sie die Datei data/auth.php auf dem Server:

   rm data/auth.php

2. Setup-Wizard neu starten
   Laden Sie die Admin-Seite neu. Der Setup-Wizard erscheint automatisch und Sie können ein neues Passwort festlegen.

3. Benutzeranleitung

Login

Navigieren Sie zu http://[SERVER]/signage/admin/ und melden Sie sich mit Ihrem Admin-Passwort an.

Abbildung 2: Editor Hauptansicht – Die Hauptoberfläche mit Sidebar, Toolbar, Canvas und Ebenen-Panel

Editor-Übersicht

Der Editor besteht aus mehreren Bereichen:

• Sidebar (links): Werkzeuge zum Hinzufügen von Blöcken (Text, Bilder, etc.)
• Toolbar (oben): Globale Aktionen wie Speichern, Vorschau, Folien verwalten
• Canvas (Mitte): Der Arbeitsbereich zur Bearbeitung der aktuellen Folie
• Ebenen-Panel (rechts): Verwaltung aller Elemente auf der aktuellen Folie

Blöcke hinzufügen

In der linken Sidebar finden Sie alle verfügbaren Block-Typen:

• Text: Fließtext mit Formatierung
• Überschrift: Große Überschriften für Titel
• Bild: PNG, JPG, GIF hochladen oder URL einfügen
• PDF: PDF-Dokumente einbetten
• Uhr: Analoge oder digitale Uhr
• Wetter: Wetterinformationen für einen Ort
• Video: MP4 oder YouTube-Videos einbetten
• Ticker: Lauftext-Band am unteren Bildrand
• Tabelle: Tabellarische Daten mit Styling

Klicken Sie auf einen Block-Typ in der Sidebar, um ihn zur aktuellen Folie hinzuzufügen.

Abbildung 3: Blöcke auf dem Canvas – Verschiedene Elemente können frei positioniert werden

Blöcke verschieben und skalieren

Jeder Block auf dem Canvas kann bearbeitet werden:

• Verschieben: Block anklicken und ziehen
• Skalieren: An den Ecken ziehen, um die Größe zu ändern
• Selektieren: Klicken Sie einen Block an, um ihn auszuwählen
• Löschen: Drücken Sie Entf oder nutzen Sie das Ebenen-Panel

Hintergrund setzen

Jede Folie kann einen individuellen Hintergrund haben:

1. Klicken Sie auf den Hintergrund-Button in der Toolbar
2. Wählen Sie zwischen:
   • Farbe: Farbwähler aus der Palette oder HEX-Code
   • Bild: Eigenes Bild hochladen oder URL eingeben

Abbildung 4: Hintergrundfarbe – Farbwähler für individuelle Folienhintergründe

Folienwechsel-Dauer einstellen

Legen Sie fest, wie lange jede Folie angezeigt wird:

1. Im Toolbar-Bereich finden Sie das Feld "Anzeigedauer"
2. Geben Sie die Dauer in Sekunden ein (Standard: 10 Sekunden)
3. Die Änderung gilt für die aktuell ausgewählte Folie

Zeitsteuerung (Von/Bis)

Folien können zeitgesteuert nur bestimmte Tage oder Zeiten angezeigt werden:

1. Wählen Sie eine Folie aus dem Folien-Popup aus
2. Klicken Sie auf Zeitsteuerung
3. Setzen Sie Von und Bis Datum/Zeit
4. Optional: Wochentage einschränken

Folien verwalten

Mehrere Folien erstellen eine Diashow auf dem Display:

• Hinzufügen: Klicken Sie auf + Neue Folie
• Duplizieren: Nutzen Sie die Option im Folien-Menü
• Löschen: Im Folien-Popup auf das Papierkorb-Icon klicken
• Sortieren: Ziehen Sie Folien im Popup um

Abbildung 5: Neue Folie – Folien-Popup mit Vorschau und Verwaltungsoptionen

Template speichern und verwenden

Templates sind wiederverwendbare Folien-Vorlagen:

Template speichern:

1. Klicken Sie auf Als Template speichern
2. Geben Sie einen Namen für das Template ein
3. Bestätigen Sie mit Speichern

Abbildung 6: Template speichern – Dialog zur Benennung der Vorlage

Template verwenden:

1. Klicken Sie auf Template laden
2. Wählen Sie ein gespeichertes Template aus der Liste
3. Es wird als neue Folie hinzugefügt

Ebenen verwalten

Das Ebenen-Panel (rechts) zeigt alle Elemente der aktuellen Folie:

• Reihenfolge: Ziehen Sie Ebenen, um die Stapelreihenfolge zu ändern
• Sichtbarkeit: Klicken Sie das Augen-Icon, um Ebenen auszublenden
• Löschen: Papierkorb-Icon entfernt die Ebene
• Umbenennen: Doppelklick auf den Ebenen-Namen

Abbildung 7: Ebenen-Panel – Verwaltung aller Elemente auf der aktuellen Folie

Speichern & Live

Änderungen werden automatisch gespeichert, sobald Sie auf den Speichern-Button klicken:

• Das Display lädt die Inhalte automatisch neu
• Verwenden Sie Vorschau, um das Ergebnis im Browser zu testen
• Vorschaumodus zeigt das Display 1:1 ohne Editier-UI

4. Block-Typen Übersicht

Alle verfügbaren Block-Typen im Überblick: