Zum Hauptinhalt springen
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Öffentliche Anzeige Vorlagenverwaltung

Öffentliche Anzeigevorlagen sind die Grundlage Ihrer benutzerdefinierten Visualisierungen. Sie definieren das Layout, die Struktur und die visuellen Elemente, die auf Ihre Installationen angewendet werden. Dieser umfassende Leitfaden deckt alles von der grundlegenden Vorlagenerstellung bis hin zu fortgeschrittenen Designtechniken ab.

📋 Übersicht​

Was sind öffentliche Anzeigevorlagen?​

Vorlagen dienen als wiederverwendbare Blaupausen, die:

  • 📐 Visuelle Layouts für Ihre öffentlichen Anzeigen definieren
  • 🧩 Inhaltsblöcke und deren Positionierung organisieren
  • 🎨 Designkonsistenz über mehrere Installationen hinweg herstellen
  • ⚙️ Schnelle Bereitstellung von standardisierten Visualisierungen ermöglichen
  • 🔄 Einfache Aktualisierungen über alle verknüpften Konfigurationen unterstützen

Wichtigste Vorteile​

VorteilBeschreibung
🚀 EffizienzEinmal erstellen, in mehreren Installationen verwenden
🎯 KonsistenzEinheitliche Designstandards aufrechterhalten
🔧 FlexibilitätEinfache Modifikation ohne von Grund auf neu zu erstellen

🚀 Erste Schritte​

Vorlagenworkflow​

  1. 📐 Layout entwerfen - Planen Sie Ihre visuelle Struktur
  2. 🎨 Vorlage erstellen - Mit dem Vorlageneditor erstellen
  3. 💾 Vorlage speichern - Für die Wiederverwendung in Installationen speichern

Voraussetzungen​

Stellen Sie vor der Erstellung von Vorlagen sicher, dass Sie:

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

🎛️ Vorlagenverwaltungsoberfläche​

Zugriff auf den Vorlagenmanager​

infographicimage

Navigationsschritte:

  1. Anmelden in Ihrem SmartgridX-Konto
  2. Navigieren Sie zu 'Öffentliche Anzeigen' in der Hauptsidebar
  3. Klicken Sie auf die Schaltfläche 'Öffentliche Anzeige Vorlage' auf der Übersichtsseite

Dies öffnet die Benutzeroberfläche zur Vorlagenverwaltung, in der Sie Vorlagen anzeigen, erstellen, bearbeiten und löschen können.

Vorlagenübersichtstabelle​

infographicimage

Verfügbare Aktionen:

  • ➕ Hinzufügen - Grüne Schaltfläche zum Starten der Vorlagenerstellung
  • ✏️ Bearbeiten - Bestehendes Vorlagenlayout modifizieren
  • 🗑️ Löschen - Unbenutzte Vorlage entfernen

🎨 Vorlagen-Erstellungsprozess​

Erstellen einer neuen Vorlage​

Klicken Sie auf die Schaltfläche "Neue Vorlage erstellen", um die Benutzeroberfläche des Vorlageneditors zu öffnen.

Konfiguration des Vorlagenheaders​

infographicimage

Titel Einstellungen​

Vorlagen Titel:

  • Zweck: Identifiziert die Vorlage in Listen und Konfigurationen
  • Best Practices: Verwenden Sie beschreibende, projektbezogene Namen
  • Beispiele: "Fabrik-KPI-Dashboard", "Energie-Überwachungs-Layout", "Multi-Zonen-Anzeige"

Margeneinstellungen​

Margeneinstellungen definieren den sicheren Bereich von den Anzeigegrenzen:

Margin Slider (0-100px):

  • 📐 Bereich: 0 bis 100 Pixel von der Anzeigekante
  • 🎯 Zweck: Schafft sicheren Abstand, um das Abschneiden von Inhalten zu verhindern
  • 📱 Anwendung: Stellt sicher, dass die Sichtbarkeit auf verschiedenen Anzeigearten gewährleistet ist
  • ⚙️ Empfehlung: Verwenden Sie 10-20px für Standardanzeigen, 30-50px für Rand-zu-Rand-Bildschirme

Visuelle Auswirkungen:

  • 0px Margin - Inhalt erstreckt sich bis zu den Anzeigeecken
  • 50px Margin - Inhalt beginnt 50 Pixel von allen Kanten
  • 100px Margin - Maximale Sicherheitszone mit erheblichem Randabstand

Speicherfunktionalität​

Die 💾 Speichern-Schaltfläche (oberer rechter Bereich) ermöglicht es Ihnen, Ihre aktuelle Vorlage zu speichern.

🧩 Blocklayoutsystem​

Verstehen des Rastersystems​

infographicimage

Rastergrundlagen​

Der Vorlageneditor verwendet ein 100×100 prozentual basiertes Rastersystem:

Rastereigenschaften:

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

Blocklayout Beispiele​

Konfiguration: 100 Breite × 100 Höhe
Ergebnis: Vollbildabdeckung
Anwendungsfall: Einzelne große Visualisierung, Vollbildbild

┌─────────────────────────────────┐
│                                 │
│         VOLL BLOCK              │
│                                 │
│                                 │
└─────────────────────────────────┘

Blockmanipulation​

Blöcke hinzufügen​

Methode: Klicken Sie auf die "Block hinzufügen"-Schaltfläche (oben rechts im Editor)
Ergebnis: Neuer Block erscheint mit Standardabmessungen
Nächste Schritte: Positionieren und nach Bedarf anpassen

Positionierung von Blöcken​

Ziehen und Ablegen:

  • 🖱️ Klicken und halten Sie einen beliebigen Block, um ihn zu bewegen
  • 📍 Echtzeitvorschau zeigt die Position beim Ziehen
  • 🧲 Rastereinrasten hilft bei präziser Ausrichtung
  • 👁️ Visuelle Hilfen erscheinen zur Unterstützung bei der Ausrichtung

Blockgrößenänderung​

Griff zum Ändern der Größe:

  • 📐 Untere rechte Ecke zeigt den Griff zum Ändern der Größe, wenn der Block ausgewählt ist
  • 🔧 Ziehen, um zu skalieren sowohl Breite als auch Höhe gleichzeitig
  • 📊 Echtzeitwerte zeigen die aktuellen Abmessungen an

Präzisionssteuerungen​

infographicimage

Rechtsseitige Positionsleiste​

Wenn ein Block ausgewählt ist, bietet das rechte Panel:

Positionssteuerungen:

  • 📍 X-Position - Horizontale Verschiebung vom linken Rand (0-100)
  • 📍 Y-Position - Vertikale Verschiebung vom oberen Rand (0-100)
  • 🎨 Z-Index - Schichtreihenfolge für überlappende Blöcke
  • 📏 Breite - Blockbreitenprozent (1-100)
  • 📏 Höhe - Blockhöhenprozent (1-100)

⚙️ Blockkonfiguration​

Blocktypen und Eigenschaften​

infographicimage

Zugriff auf die Blockkonfiguration​

Methode:

  1. Wählen Sie einen Block auf der Editor-Leinwand aus
  2. Konfigurationstafel erscheint am unteren Bildschirmrand
  3. Dropdown für Blocktypen ist die primäre Konfigurationsoption

Hinweis: Nicht alle Blöcke sind derzeit konfigurierbar. Dies wird sich ändern, während die Entwicklung voranschreitet. Zukünftige Updates werden weitere Blocktypen hinzufügen.

Verfügbare Blocktypen​

Zweck: Anzeige statischer Bilder, Logos, Hintergründe, GIFs
Konfigurationsoptionen:

  • 📁 Bildquelle - Hochladen oder URL, die als Standard für diesen Block verwendet wird. Sie können dies leer lassen, wenn Sie möchten, dass ein Bild in der Konfiguration ausgewählt werden muss

Anwendungsfälle:

  • Unternehmenslogos und Branding
  • Hintergrundbilder
  • Ausrüstungsfotos
  • GIFs

Beispielvorlagen​

infographicimage

Dieses Beispiel zeigt eine gut strukturierte Vorlage mit:

  • 📊 Klarer Blockorganisation mit beschreibenden Labels
  • 📐 Angemessenem Abstand und Ausrichtung
  • 🎯 Funktionalen Blocktypen für verschiedene Inhaltsbedürfnisse

Blockbenennung in diesem Beispiel:

  • Jeder Block zeigt seinen vorgesehenen Zweck
  • Klare Beschriftung hilft bei der Konfiguration
  • Logische Organisation unterstützt die Wartung

📚 Verwandte Dokumentation​

Nächste Schritte​

Nachdem Sie Ihre Vorlage erstellt haben:

  1. ⚙️ Installationen konfigurieren - Vorlagen auf spezifische Installationen anwenden
  2. 🎛️ Controller verlinken - Verbindung zu angezeigter Hardware herstellen
  3. 🚀 Einsteigerhandbuch - Vollständige Workflow-Übersicht

Fortgeschrittene Themen​

  • 🎨 Fortgeschrittene Designtechniken
  • 📊 Benutzerdefinierte Datenintegration
  • 🔄 Automatisierte Vorlagenupdates
  • 👥 Zusammenarbeit an Vorlagen für mehrere Benutzer

💡 Zusammenfassung der besten Praktiken​

Vorlagendesign​

✅ Designprinzipien:

  • 🎯 Halten Sie es einfach - Konzentrieren Sie sich auf wesentliche Informationen
  • 📱 Responsives Design - Testen Sie auf verschiedenen Bildschirmgrößen
  • 🎨 Konsistenz wahren - Verwenden Sie standardisierte Farben und Layouts

Vorlagenmanagement​

✅ Organisationstipps:

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

🎨 Bereit zum Gestalten? Mit Ihrer erstellten und konfigurierten Vorlage sind Sie bereit, beeindruckende Visualisierungen in Ihren SmartgridX-Installationen bereitzustellen!