Verwaltung von Public-Display-Vorlagen

Public-Display-Vorlagen bilden die Grundlage für Ihre benutzerdefinierten Visualisierungen. Sie definieren das Layout, die Struktur und die visuellen Elemente, die auf Ihre Installationen angewendet werden. Diese umfassende Anleitung deckt alles ab – von der grundlegenden Vorlagenerstellung bis hin zu fortgeschrittenen Designtechniken.

📋 Übersicht

Was sind Public-Display-Vorlagen?

Vorlagen dienen als wiederverwendbare Entwürfe, die:

• 📐 Visuelle Layouts für Ihre Public Displays definieren
• 🧩 Inhaltsblöcke und deren Positionierung organisieren
• 🎨 Einheitliche Designs über mehrere Installationen hinweg sicherstellen
• ⚙️ Eine schnelle Bereitstellung standardisierter Visualisierungen ermöglichen
• 🔄 Einfache Aktualisierungen über alle verknüpften Konfigurationen hinweg unterstützen

Wichtige Vorteile

🚀 Erste Schritte

Vorlagen-Workflow

1. 📐 Layout entwerfen – Planen Sie Ihre visuelle Struktur
2. 🎨 Vorlage erstellen – Erstellen Sie sie mit dem Vorlageneditor
3. 💾 Vorlage speichern – Zur Wiederverwendung über mehrere Installationen hinweg speichern

Voraussetzungen

Bevor Sie Vorlagen erstellen, stellen Sie sicher, dass Sie über Folgendes verfügen:

• ✅ SmartgridX-Konto mit den entsprechenden Berechtigungen
• ✅ Klare Designziele für Ihre Visualisierung
• ✅ Inhaltsanforderungen (Bilder, Datenpunkte, Layouts)

🎛️ Verwaltungsschnittstelle für Vorlagen

Aufrufen der Vorlagenverwaltung

Navigationsschritte:

1. Melden Sie sich bei Ihrem SmartgridX-Konto an
2. Navigieren Sie in der Hauptseitenleiste zu „Public displays“
3. Klicken Sie auf der Übersichtsseite auf die Schaltfläche 'Public display Template'

Dadurch wird die Vorlagenverwaltung geöffnet, in der Sie Vorlagen anzeigen, erstellen, bearbeiten und löschen können.

Übersichtstabelle der Vorlagen

Verfügbare Aktionen:

• ➕ Hinzufügen – Grüne Schaltfläche zum Starten der Vorlagenerstellung
• ✏️ Bearbeiten – Vorhandenes Vorlagendesign ändern
• 🗑️ Löschen – Nicht verwendete Vorlage entfernen

🎨 Prozess zur Vorlagenerstellung

Neue Vorlage starten

Klicken Sie auf die Schaltfläche "Create New Template", um die Vorlageneditor-Oberfläche zu öffnen.

Konfiguration der Vorlagenkopfzeile

Titeleinstellungen

Vorlagentitel:

• Zweck: Identifiziert die Vorlage in Listen und Konfigurationen
• Bewährte Vorgehensweisen: Verwenden Sie beschreibende, projektspezifische Namen
• Beispiele: "Factory-KPI-Dashboard", "Energy-Monitoring-Layout", "Multi-Zone-Display"

Randkonfiguration

Die Randeinstellungen definieren den Sicherheitsbereich zu den Displayrändern:

Randregler (0–100 px):

• 📐 Bereich: 0 bis 100 Pixel vom Displayrand
• 🎯 Zweck: Erzeugt einen Sicherheitsabstand, um das Abschneiden von Inhalten zu verhindern
• 📱 Anwendung: Stellt die Sichtbarkeit auf verschiedenen Displaytypen sicher
• ⚙️ Empfehlung: Verwenden Sie 10–20 px für Standarddisplays und 30–50 px für randlose Bildschirme

Visuelle Auswirkung:

• 0 px Rand – Der Inhalt reicht bis an die Displayränder
• 50 px Rand – Der Inhalt beginnt 50 Pixel von allen Rändern entfernt
• 100 px Rand – Maximaler Sicherheitsbereich mit deutlichem Abstand zu den Rändern

Speicherfunktion

Mit der 💾 Speichern-Schaltfläche (oben rechts) können Sie Ihre aktuelle Vorlage speichern.

🧩 Block-Layout-System

Das Rastersystem verstehen

Grundlagen des Rasters

Der Vorlageneditor verwendet ein prozentbasiertes Raster mit 100 × 100 Einheiten:

R uniformeigenschaften:

• 📐 Abmessungen: 100 Einheiten Breite × 100 Einheiten Höhe
• 📊 Einheiten: Prozentwerte (1 Einheit = 1 % der Gesamtabmessung)
• 🎯 Präzision: Ermöglicht exakte Positionierung und Größenanpassung
• 📱 Responsivität: Passt sich automatisch an verschiedene Bildschirmgrößen an

Beispiele für Blocklayouts

┌─────────────────────────────────┐
│                                 │
│         FULL BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

┌─────────────────┬───────────────┐
│                 │               │
│    BLOCK 1      │   BLOCK 2     │
│                 │               │
│                 │               │
└─────────────────┴───────────────┘

┌─────────────────────────────────┐
│            BLOCK 1              │
│                                 │
├─────────────────────────────────┤
│            BLOCK 2              │
│                                 │
└─────────────────────────────────┘

┌─────────────────┬───────────────┐
│    BLOCK 1      │   BLOCK 2     │
│                 │               │
├─────────────────┼───────────────┤
│    BLOCK 3      │   BLOCK 4     │
│                 │               │
└─────────────────┴───────────────┘

Blöcke bearbeiten

Blöcke hinzufügen

Methode: Klicken Sie auf die Schaltfläche "Add Block" (oben rechts im Editor)
Ergebnis: Ein neuer Block wird mit Standardabmessungen angezeigt
Nächste Schritte: Positionieren und skalieren Sie ihn nach Bedarf

Blöcke positionieren

Ziehen und Ablegen:

• 🖱️ Klicken und halten Sie einen beliebigen Block, um ihn zu verschieben
• 📍 Die Echtzeitvorschau zeigt während des Ziehens die Position an
• 🧲 Das Einrasten am Raster unterstützt eine präzise Ausrichtung
• 👁️ Visuelle Hilfslinien werden zur Unterstützung der Ausrichtung angezeigt

Blöcke skalieren

Griff zur Größenanpassung:

• 📐 Die untere rechte Ecke zeigt bei ausgewähltem Block einen Griff zur Größenanpassung an
• 🔧 Ziehen Sie zum Skalieren, um Breite und Höhe gleichzeitig zu ändern
• 📊 Echtzeitwerte zeigen die aktuellen Abmessungen an

Präzisionssteuerung

Positionsbereich auf der rechten Seite

Wenn ein Block ausgewählt ist, bietet der rechte Bereich Folgendes:

Positionssteuerungen:

• 📍 X-Position – Horizontaler Versatz vom linken Rand (0–100)
• 📍 Y-Position – Vertikaler Versatz vom oberen Rand (0–100)
• 🎨 Z-Index – Ebenenreihenfolge für überlappende Blöcke
• 📏 Breite – Breite des Blocks in Prozent (1–100)
• 📏 Höhe – Höhe des Blocks in Prozent (1–100)

⚙️ Blockkonfiguration

Blocktypen und Eigenschaften

Blockkonfiguration aufrufen

Methode:

1. Wählen Sie einen Block auf der Editorfläche aus
2. Das Konfigurationsfenster wird am unteren Bildschirmrand angezeigt
3. Das Dropdown-Menü für den Blocktyp ist die wichtigste Konfigurationsoption

Hinweis: Derzeit können nicht alle Blöcke konfiguriert werden. Dies wird sich im weiteren Entwicklungsverlauf ändern. In zukünftigen Aktualisierungen werden weitere Blocktypen hinzugefügt.

Verfügbare Blocktypen

Vorlagenbeispiele

Dieses Beispiel zeigt eine gut strukturierte Vorlage mit:

• 📊 Klarer Blockorganisation mit beschreibenden Bezeichnungen
• 📐 Angemessenen Abständen und Ausrichtung
• 🎯 Funktionalen Blocktypen für verschiedene Inhaltsanforderungen

Blockbenennung in diesem Beispiel:

• Jeder Block zeigt seinen vorgesehenen Zweck
• Klare Bezeichnungen erleichtern die Konfiguration
• Logische Organisation unterstützt die Wartung

📚 Zugehörige Dokumentation

Nächste Schritte

Nach der Erstellung Ihrer Vorlage:

1. ⚙️ Installationen konfigurieren – Vorlagen auf bestimmte Installationen anwenden
2. 🎛️ Controller verknüpfen – Mit Display-Hardware verbinden
3. 🚀 Leitfaden für die ersten Schritte - Vollständiger Überblick über den Workflow

Erweiterte Themen

• 🎨 Erweiterte Designtechniken
• 📊 Benutzerdefinierte Datenintegration
• 🔄 Automatisierte Vorlagenaktualisierungen
• 👥 Zusammenarbeit mehrerer Benutzer an Vorlagen

💡 Zusammenfassung der Best Practices

Vorlagendesign

✅ Designprinzipien:

• 🎯 Halten Sie es einfach – Konzentrieren Sie sich auf wesentliche Informationen
• 📱 Responsiv gestalten – Testen Sie die Vorlage auf verschiedenen Bildschirmgrößen
• 🎨 Konsistenz wahren – Verwenden Sie standardisierte Farben und Layouts

Vorlagenverwaltung

✅ Tipps zur Organisation:

• 📝 Verwenden Sie beschreibende Namen – Machen Sie Vorlagen leicht auffindbar
• 🔄 Regelmäßige Wartung – Entfernen Sie nicht verwendete Vorlagen
• 👥 Standards teilen – Stellen Sie die Konsistenz im Team sicher

🎨 Bereit zum Design? Nachdem Ihre Vorlage erstellt und konfiguriert wurde, können Sie beeindruckende Visualisierungen in Ihren SmartgridX-Installationen bereitstellen!