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 behandelt alles von der grundlegenden Vorlagenerstellung bis hin zu fortgeschrittenen Gestaltungstechniken.

📋 Ü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
  • 🎨 Gestaltungskonsistenz über mehrere Installationen hinweg sicherstellen
  • ⚙️ Schnelle Bereitstellung standardisierter Visualisierungen ermöglichen
  • 🔄 Einfache Aktualisierungen für alle verknüpften Konfigurationen unterstützen

Hauptvorteile​

VorteilBeschreibung
🚀 EffizienzEinmal erstellen, in mehreren Installationen verwenden
🎯 KonsistenzEinheitliche Designstandards wahren
🔧 FlexibilitätEinfache Änderungen ohne Neuerstellung von Grund auf

🚀 Erste Schritte​

Vorlagen-Workflow​

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

Voraussetzungen​

Bevor Sie Vorlagen erstellen, stellen Sie sicher, dass Sie:

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

🎛️ Vorlagenverwaltungsoberfläche​

Zugriff auf den Vorlagenmanager​

infographicimage

Navigationsschritte:

  1. Melden Sie sich bei Ihrem SmartgridX-Konto an
  2. Navigieren Sie zu 'Öffentliche Anzeigen' in der linken Seitenleiste
  3. Klicken Sie auf die Schaltfläche 'Öffentliche Anzeigevorlage' auf der Übersichtsseite

Dies öffnet die Vorlagenverwaltungsoberfläche, 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 - Vorlagendesign ändern
  • 🗑️ Löschen - Ungenutzte Vorlage entfernen

🎨 Vorlagen-Erstellungsprozess​

Eine neue Vorlage starten​

Klicken Sie auf die Schaltfläche "Neue Vorlage erstellen", um die Vorlageneditor-Oberfläche zu öffnen.

Konfiguration der Vorlagenkopfzeile​

infographicimage

Titel Einstellungen​

Vorlagen Titel:

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

Randkonfiguration​

Rand-Einstellungen definieren den sicheren Bereich von den Anzeigeblöcken:

Rand-Schieberegler (0-100px):

  • 📐 Bereich: 0 bis 100 Pixel vom Rand der Anzeige
  • 🎯 Zweck: Schafft sicheren Abstand, um das Abschneiden von Inhalten zu verhindern
  • 📱 Anwendung: Sicherstellen der Sichtbarkeit auf verschiedenen Anzeigetypen
  • ⚙️ Empfehlung: Verwenden Sie 10-20px für Standardanzeigen, 30-50px für vollflächige Bildschirme

Visuelle Auswirkungen:

  • 0px Rand - Inhalt reicht bis zu den Rändern der Anzeige
  • 50px Rand - Inhalt beginnt 50 Pixel von allen Rändern
  • 100px Rand - Maximaler Sicherheitsbereich mit erheblichem Randabstand

Speicherfunktionalität​

Die 💾 Speicher-Schaltfläche (oben rechts) ermöglicht es Ihnen, Ihre aktuelle Vorlage zu speichern.

🧩 Blocklayout-System​

Das Grid-System verstehen​

infographicimage

Grid-Grundlagen​

Der Vorlageneditor verwendet ein 100×100 prozentual basiertes Grid-System:

Grid-Eigenschaften:

  • 📐 Abmessungen: 100 Einheiten Breite × 100 Einheiten Höhe
  • 📊 Einheiten: Prozentuale Werte (1 Einheit = 1% der Gesamtgröße)
  • 🎯 Präzision: Ermöglicht genaues Positionieren und Dimensionieren
  • 📱 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

┌─────────────────────────────────┐
│                                 │
│         VOLLER BLOCK            │
│                                 │
│                                 │
└─────────────────────────────────┘

Blockmanipulation​

Blöcke hinzufügen​

Methode: Klicken Sie auf die Schaltfläche "Block hinzufügen" (oben rechts im Editor)
Ergebnis: Neuer Block erscheint mit Standardabmessungen
Nächste Schritte: Positionieren und bei Bedarf die Größe ändern

Blöcke positionieren​

Ziehen und Ablegen:

  • 🖱️ Klicken und halten Sie einen Block, um ihn zu bewegen
  • 📍 Echtzeitvorschau zeigt die Position während des Ziehens an
  • 🧲 Raster-Snapping hilft bei präziser Ausrichtung
  • 👁️ Visuelle Hilfslinien erscheinen zur Unterstützung bei der Ausrichtung

Blöcke ändern​

Griff zum Ändern der Größe:

  • 📐 Untere rechte Ecke zeigt den Größenänderungsgriff, wenn der Block ausgewählt ist
  • 🔧 Ziehen, um die Größe von Breite und Höhe gleichzeitig zu ändern
  • 📊 Echtzeitwerte zeigen die aktuellen Abmessungen an

Präzisionssteuerungen​

infographicimage

Rechter Positionierungsbereich​

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

Positionssteuerungen:

  • 📍 X-Position - Horizontaler Versatz von der linken Kante (0-100)
  • 📍 Y-Position - Vertikaler Versatz von der oberen Kante (0-100)
  • 🎨 Z-Index - Schichtreihenfolge für überlappende Blöcke
  • 📏 Breite - Blockbreite in Prozent (1-100)
  • 📏 Höhe - Blockhöhe in Prozent (1-100)

⚙️ Blockkonfiguration​

Blocktypen und Eigenschaften​

infographicimage

Zugriff auf die Blockkonfiguration​

Methode:

  1. Wählen Sie einen Block im Editor-Canvas aus
  2. Konfigurationspanel 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 fortschreitet. In zukünftigen Updates werden weitere Blocktypen hinzugefügt.

Verfügbare Blocktypen​

Zweck: Darstellung 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
  • Gerätefotos
  • GIFs

Beispielvorlagen​

infographicimage

Dieses Beispiel demonstriert eine gut strukturierte Vorlage mit:

  • 📊 Klarer Blockorganisation mit beschreibenden Labels
  • 📐 Angemessener Abstände und Ausrichtung
  • 🎯 Funktionalen Blocktypen für unterschiedliche Inhaltbedarfe

Blockbenennung in diesem Beispiel:

  • Jeder Block zeigt seinen beabsichtigten Zweck
  • Klare Bezeichnungen helfen 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 verknüpfen - Verbindung zur Anzeigehardware herstellen
  3. 🚀 Einsteigerleitfaden - Vollständige Workflow-Übersicht

Fortgeschrittene Themen​

  • 🎨 Fortgeschrittene Gestaltungstechniken
  • 📊 Benutzerdefinierte Datenintegration
  • 🔄 Automatisierte Vorlagenupdates
  • 👥 Mehrbenutzer-Zusammenarbeit an Vorlagen

💡 Zusammenfassung der besten Praktiken​

Vorlagendesign​

✅ Gestaltungsprinzipien:

  • 🎯 Halten Sie es einfach - Konzentrieren Sie sich auf essentielle Informationen
  • 📱 Responsiv gestalten - Testen auf verschiedenen Bildschirmgrößen
  • 🎨 Konsistenz bewahren - Standardisierte Farben und Layouts verwenden

Vorlagenverwaltung​

✅ Organisationstipps:

  • 📝 Verwendet beschreibende Namen - Machen Sie Vorlagen leicht auffindbar
  • 🔄 Regelmäßige Wartung - Entfernen Sie nicht genutzte Vorlagen
  • 👥 Standards teilen - Sicherstellen von Konsistenz im Team

🎨 Bereit zu gestalten? Mit Ihrer Vorlage erstellt und konfiguriert, sind Sie bereit, beeindruckende Visualisierungen in Ihren SmartgridX-Installationen bereit zu stellen!