• Einloggen: Benutzername und Passwort eingeben; falls kein Login existiert, erst auf "registrieren" klicken.
• Datenanbindung: Im Menü „Datenanbindung“ auswählen:
  • Neue Konfiguration erstellen oder bestehende kopieren.
  • Informationen eingeben: Name, Typ, Client ID/Secret, App User, URLs etc.
  • Zusätzliche Services können durch Plattformanbieter erweitert werden.

• Impressum und Datenschutz: URL für Impressum und Datenschutzerklärung hinterlegen und speichern.
• CI-Design:
  • Farbgestaltung im Menü konfigurieren: Header, Menüs, Hover-Effekte, Scrollleisten etc.
  • Anpassungen an Dashboard, Panele, Widgets und Komponenten.

• Dashboard: Hintergrundfarben und Schriftgrößen anpassen.
• Panele: Farben, Rahmen und Header-Schriftgrößen konfigurieren.
• Widgets: Anpassung von Farben, Rahmen und Schriftarten und konfiguration von...
  • Text: Bearbeitungsmöglichkeiten wie Fett/Kursiv, Hyperlinks, Schriftfarben.
  • Icons mit Links: Auswahl von Icons und Verlinkungen.
  • Diagramme:
    • 180°-/360°-Charts: Min-/Max-Werte, Einheiten
    • Linien- und Balkendiagramme: Beschriftung der Achsen, Filter, Zoom, Grenzwertlinien.
    • Kuchen- und Stageable-Charts: Farbanpassung, Stufenwerte
    • Messungen: Warnungs-/Alarmlimits, Einheit, Maximalwerte.
    • Slider: Statische Schwellwerte definieren, Farben und Texte anpassen.
    • Karten:
      • Pins und geometrische Formen (z. B. Heat Maps) konfigurieren.
      • Zoom-Optionen und Legenden gestalten.
    • Wetterwarnungen: Dynamische Hinweise aus Plattform laden.
    • iFrame: Externe Webseiten einbetten.
    • Bilder: Hochladen oder URL-basierte Bilder einbinden.
• Logos: Header- und Sidebar-Logos hochladen.
• Schriftarten:
  • Auswahl gängiger Fonts wie Helvetica, Arial, Times New Roman etc.
  • Schriftfarben für Header, Menüs, Widgets usw. definieren.

Neue Dashboardseite:

• Im Menü auf „Dashboardseite“ klicken, „Neu erstellen“ wählen.
• Einstellungen: Name, Schriftfarbe, Sichtbarkeit (Rollen-basiert), Größe (Höhe/Breite).
• Mit Panelen und Widgets füllen

Datenquelle zuweisen:

• Sensordaten über die Plattform an Widgets binden.
• Daten dynamisch visualisieren (z. B. Diagramme, Karten)

1. Benutzerfreundlichkeit: Klare Struktur, einfache Navigation, No Code von Anfang bis Ende.
2. Flexibilität: Anpassbare Layouts, Farben und Inhalte entsprechend von Vorgaben oder Vorlieben.
3. Datenintegration: Vielfältige Widgets für Visualisierung dynamischer Daten.
4. CI-Konformität: Designoptionen für einheitliches Erscheinungsbild.
5. Effizienz: Zeitersparnis durch Kopieren bestehender Konfigurationen.
6. Dynamik: Echtzeit-Datenintegration und interaktive Karten.
7. Rollenbasierte Zugriffe: Sichtbarkeit von Elementen gezielt steuerbar.

---

1. Handbuch zur Erstellung eines Smart City Dashboards
2. Zugang zum Dashboard und erste Datenanbindung
3. Einstellungen von Informationen, Impressum und Datenschutzerklärung
4. Globale Einstellungen – allgemeines CI-Design
   • Einstellung des allgemeinen Layouts
   • Styling des allgemeinen Dashboards
   • Styling der allgemeinen Panele
   • Styling der allgemeinen Widgets
   • Styling der allgemeinen Komponenten
   • Styling der allgemeinen Logos
   • Styling der allgemeinen Schriftarten
5. Dashboards anlegen und konfigurieren
   • Neukonfiguration eines leeren Dashboards
   • Erstellen von Widgets
   • Konfiguration von Komponenten
     • Tab Konfiguration
       • Informationskomponente I: Text
       • Informationskomponente II: Icon mit Link
       • Diagrammkomponente I: 180° Diagramm oder 360° Diagramm
       • Diagrammkomponente II: Stageable Chart
       • Diagrammkomponente III: Pie Chart
       • Diagrammkomponente IV: Line Chart und Bar Chart
       • Diagrammkomponente V: Messungen
       • Sliderkomponente I: farbiger Slider
       • Sliderkomponente II: Slider Übersicht
       • Kartenkomponente
       • Wetterwarnungen
       • Kombinierte Komponenten
       • Wertkomponente
       • iFrame - Komponente
       • Bildkomponente
     • Query Konfiguration
   • Kopieren von Widgets
   • Erstellen von Dashboardseiten
   • Zusammenführen von Dashboardseiten in einem Menü
   • Bearbeiten bestehender Elemente
6. Tipps zum barrierefreien Styling nach dem BITV NRW
7. Sicherheit der Daten und Schnittstellen
8. Kontakt

---

Die Backoffice-Suite für Smart City Services stellt eine zentrale Anlaufstelle dar, die für die effiziente Verwaltung und Steuerung verschiedener Daten unerlässlich ist. In der Suite sind bereits die zwei führenden urbanen Datenplattformen (Hypertegrity und DKSR) vorab angebunden. Ein einfaches Projektsetup ist somit gewährleistet.

---

• Benutzername und Passwort eingeben und "anmelden" oder "sign in" klicken.
• Bei Bedarf auf "registrieren" oder "register" klicken.

• Oben rechts auf „Admin“ klicken, um zum Adminbereich weitergeleitet zu werden.

• Im Menü „Datenanbindung“ auswählen.

• Optionen:

  1. Auf „Neue erstellen“ klicken
  2. Auf das Symbol klicken für „kopieren“ und somit eine bestehende Konfiguration kopieren, um die anzupassen
  3. In die eigene Plattform gehen, um diese zu erweitern oder anzupassen

• Folgende Informationen eingeben:
  • Name, Type (NGSI-LD, NGSI-V2 und Orchideo), Client ID, Client Secret, App User, App User Password, Auth URL, Live URL, Time Series URL, Collection/ Services
  • d. Collections / Services wird mit jeder neuen Datenservice des Plattformanbieter erweitert. Das bedeutet, dass gegebenenfalls erneut ein Service reinkopiert werden muss. Diese Information stellt der Plattformanbieter bereit.
  • Wenn alle Daten eingetragen wurden, muss auf „speichern“ geklickt werden.

---

• Im Menü auf „Allgemein“ klicken.
• URL für Informationen, Impressum und Datenschutzerklärung hinterlegen und speichern.
• Es kann die Funktionalität „Farbschema-Wechsel erlauben“ über das Kästchen aktiviert werden.
• Im Header gibt es einen Info-button, der für übergeordnete Informationen genutzt werden kann. In dem Freitextfeld kann dieses eingetragen und formatiert werden. Wenn dieser befüllt wird und der Button im Header geklickt wird, erscheint eine Informationskachel, die diese Informationen enthält.

---

Einstellung

Anzeige

• Im Menü auf „Farbgestaltung“ klicken.
• Den ersten Tab „Layout“ anklicken.
• Anpassbare Bereiche:

1. Header
2. Menü
3. Hover Aktive Hintergrundfarbe oder Hover-Farbe
4. Pfeilrichtung
5. Menü Hintergrundfarbe
6. Scrollleiste Farbe
7. Scrollleiste Hintergrundfarbe

Alle Bereiche werden entsprechend des vorliegenden CI- bzw. Styleguide mit „HEX“ und „RGB“ - Werten eingestellt. Über die Aktivierung des Hakens „Infobuttons anzeigen“ wird entschieden, ob Schaltflächen in rechts, oben an den Panelen in der mobilen Ansicht angezeigt werden, oder nicht angezeigt werden.

Einstellung

Anzeige

• Im Menü auf „Farbgestaltung“ klicken.
• Den Tab „Dashboard“ auswählen.
• Anpassbare Bereiche:

8. Primäre und sekundäre Hintergrundfarben
9. Schriftgrößen der Headline

Zusätzlich ist der „Dashboard Informationstext“ in Schriftgröße und Schriftfarbe anpassbar.

Einstellung

Anzeige

• Im Menü auf „Farbgestaltung“ klicken.
• Den Tab „Panel“ auswählen.
• Anpassbare Bereiche:

10. Primäre Hintergrundfarben
11. Rahmenfarben und Größen
12. Schriftgrößen der Header

Zusätzlich wird über das Setzen des entsprechenden Häkchens entschieden, ob die Panelüberschrift in fettem (bzw. "bold") Font angezeigt wird. Die Einstellungen müssen final mit dem Button „Speichern“ gespeichert werden.

Einstellung

Anzeige

• Im Menü auf „Farbgestaltung“ klicken.
• Den Tab „Widget“ auswählen.
• Anpassbare Bereiche:

13. Primäre Hintergrundfarben
14. Rahmenfarben
15. Widget Border Size, Widget Border Radius, Widget Headline Fontsize, Widget Subheadline Fontsize

Zusätzlich wird über das Setzen des entsprechenden Häkchens entschieden, ob die Widgetüberschrift in fettem (bzw. "bold") Font angezeigt wird. Die Einstellungen müssen final mit dem Button „Speichern“ gespeichert werden.

• Im Menü auf „Farbgestaltung“ klicken.
• Den Tab "Component" oder „Komponente“ auswählen.
• Komponenten wie Diagramme, Slider und Karten können individuell angepasst werden.

Komponente: Informationen
Subkomponente	Styling
Text
Text mit Icon
Komponente: Diagramme
Subkomponente	Styling
180°- Chart
360°- Chart
Stageable - Chart
Linien - Chart
Balken - Chart
Pie - Chart
Measurement
Komponente: Slider
Subkomponente	Styling
Farbiger Slider
Slider Übersicht
Komponente: Wetterwarnungen
Subkomponente	Styling
Wetterwarnungen
Komponente: Wert
Subkomponente	Styling
Wert

• Änderungen können in der Vorschau überprüft werden. Weitere spezifische Individualisierungen sind in der dedizierten Widget-Erstellung möglich.
• Die Einstellungen müssen final mit dem Button „Speichern“ gespeichert werden.

Einstellung

Anzeige

• Im Menü auf „Farbgestaltung“ klicken.
• Den Tab „Logo“ auswählen.
• Es gibt die Möglichkeit ein Header Logo und/oder ein Menü bzw. Sidebar-Logo anzuzeigen.
• Anpassbare Bereiche:

16. Header-Logo
17. Menü- und Sidebar-Logos

• Im Menü auf „Farbgestaltung“ klicken.
• Den Tab „Schriftarten“ auswählen.
• Anpassbare Bereiche:
  • Schriftfamilien, verfügbar ist: Helvetica, Arial, Verdana, Tahoma, Grill Sans, Times New Roman, Georgia, Palatino, Courier, Lucida, Monaco
  • • Schriftfarben für: Kopfzeile bzw. Header, Menü, Dashboard, Panel, Widget, Allgemein

---

• Im Menü auf „Widgets“ klicken.

• Oben rechts „Neu erstellen“ wählen und Widget konfigurieren:

Der Widget Wizard besteht aus drei Bereichen: 1. „Allgemeine Informationen“, 2. „Tab Konfiguration“, 3. „Query Konfiguration“

---

• Name des Widgets
• Möglichkeit, den Widgetnamen anzuzeigen oder nicht anzuzeigen über das Setzen des entsprechenden Hakens
• Möglichkeit, Beschreibungen einzufügen: Nicht sichtbar im erstellten Dashboard. Sie ist lediglich relevant für Kommentare und Beschreibungen des Erstellers in der Verwaltungsansicht im Widget Wizzard
• Name für die Subheadline
• Größeneinstellung der Widgetkachel
  • Höhe: Beliebig einstellbar, ausgenommen für Diagrammkomponenten. Diese haben einen Mindestwert von 400
  • Breite: Mögliche Breiten sind 1/3, 1/2 , 2/3, 3/3
• Rollenbasierte Sichtbarkeit (Lese-Rechte, Schreibe-Rechte) durch das Setzen des entsprechenden Häkchens aktivieren.
• Möglichkeit des Setzens von Icons über das Dropdown-Menü
• Möglichkeit, das Teilen von Widgets zuzulassen, durch das Setzen des entsprechenden Häkchens.
• Möglichkeit, den Datenexport zuzulassen, durch das Setzen des entsprechenden Häkchens.

In Bereich "Tab Konfiguration" den Komponententyp auswählen und konfigurieren

• Es wird die gewünschte Komponente über das Dropdown Menü ausgewählt
• Bei Komponenten mit unterschiedlichen Typen (vorher Subkomponente) wird der Typ ebenfalls über ein weiteres Dropdown Menü ausgewählt
• Die erstellte Konfiguration kann in der Vorschau rechts in der Kachel geprüft werden

• Komponente „Informationen“ auswählen.

• Typ „Text“ hinzufügen: Es sind die Grundlegenden Textbearbeitungsfunktionalitäten verfügbar

  • Dick - Bold, Kursiv - Italic, Unterstrichen - Underlined, Monospace, Exponenten, Indexzahlen
  • Aufzählungen als Zahl und Punkt
  • Größenformate
  • Textversatz
  • Textpositionen (linksbündig, zentriert, rechtsbündig, block)
  • Hinterlegen von Hyperlinks
  • Schriftfarbe
  • Farbe Schriftmarker
  • Embedded Links
  • Icons
  • Bilder Einfügen (Hinweis: Eingefügten Bildern können Links zugewiesen werden, sodass diese als Schaltflächen bzw. Buttons innerhalb von Panelen einsetzbar sind)

• Im Anschluss speichern

• Komponente „Informationen“ auswählen.
• Typ „Icon mit Link“ hinzufügen:
  • Auswahl eines Icons
  • Auswahl der Farbe des Icons
  • Text für die Iconbeschriftung mit den oben genannten Textbearbeitungsoptionen
  • URL-Bereich für das Hinterlegen der Verlinkung
• Im Anschluss speichern

• Komponente „Diagramm auswählen.
• Typ „180° Diagramm oder 360° Diagramm“ hinzufügen:
  • Minimalwert und Maximalwert festlegen.
  • Einheit eintragen
  • Weitere Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
• Das 180° Diagramm und das 360° Diagramm benötigen eine Query Konfiguration
• Im Anschluss speichern

• Komponente „Diagramm auswählen.
• Typ „Stageable Chart“ hinzufügen:
  • Minimalwert und Maximalwert festlegen.
  • Einheit eintragen
  • Festlegung der „Number of Tiles“ bzw. Anzahl der Felder. Die Anzahl der Felder bestimmt die Stufenwerte, somit auch die Stufenwerte. Hinweis: Es ist zu empfehlen, dass der Anzahl der Felder ein Teiler des Min. & Max Intervalls ist. So werden Dezimalstellen vermieden.
  • Es können die Farben (HEX & RGB) der Skale und ihre Grenzwerte in den „Statischen Werten“ hinterlegt werden.
  • Den Zahlen und Farben können Interpretative Texte und Icons zugeordnet werden. Diese werden über „Markierungen statische Werte“ definiert. Hier sind die Farben (HEX & RGB) der Texte und Icons sind individualisierbar.
  • Über das „Plus“ werden Werte (statisch oder Markierungen) erweitert und über das „Minus“ wieder entfernt.
  • Weitere Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
• Das Stageable Chart benötigt eine Query Konfiguration (wird im kommenden Teil "Query Konfiguration" erklärt)
• Im Anschluss speichern

• Komponente „Diagramm auswählen.
• Typ „Kuchendiagramm“ oder "Pie Chart" hinzufügen:
  • Möglichkeit, ob ein Bilddownload zugelassen wird über das Setzen des entsprechenden Häkchens.
  • Alle Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
  • Der Stageable Chart benötigt eine Query Konfiguration
• Im Anschluss speichern

oder

• Komponente „Diagramm auswählen.
• Typ „Liniendiagramm und Balkendiagramm“ oder "Line Chart und Bar Chart" hinzufügen:

  • Festlegung der X-Achsenbeschriftung

  • Festlegung der Y-Achsenbeschriftung

  • Möglichkeit die Datumsanzeige der X-Achse einzustellen (Standard, nur Jahr, nur Monat (Jahr bei Jahreswechsel))

  • Möglichkeit der Aktivierung einer Legende über das Setzen des entsprechenden Hakens. Die Legende erscheint oberhalb des Diagramms. Elemente der Legende können durch klicken aktiviert und deaktiviert werden, so dass ein gezielter Vergleich einzelner Wertereihen möglich ist.

  • Möglichkeit der Aktivierung eines Filters über das Setzen des entsprechenden Hakens. Der Filter zieht sich seine Elemente aus den Sensorattributen. So könne verschieden Attribute eines Sensors über mehrere Standorte verglichen werden. Diese werden in der Query Konfiguration ausgewählt.

  • Möglichkeit, ob ein Bilddownload zugelassen wird über das Setzen des entsprechenden Häkchens.

  • Möglichkeit der Aktivierung eines Zooms über das Setzen des entsprechenden Hakens.

  • Möglichkeit der Skalierung der Y-Achse über das Setzen des entsprechenden Hakens. So kann ein Minimalwert und ein Maximalwert eingetragen werden.

  • BESONDERHEITEN LINIENDIAGRAMM:

    • Möglichkeit der Umstellung der Linien zu einem Stufengraphen durch das Setzen des entsprechenden Hakens.

    • Möglichkeit der Aktivierung eines Zooms für die Y-Achse über das Setzen des entsprechenden Hakens.

    • Möglichkeit der Aktivierung einer gestapelten Farbgebung zwischen Linien über das Setzen des entsprechenden Hakens.

  • BESONDERHEITEN BALKENDIAGRAMM:

    • Möglichkeit der Umstellung der nebeneinander angeordneten Balken zu gestapelten Balken durch das Setzen des entsprechenden Hakens.

  • Es können Grenzwertlinien als statische Werte hinzugefügt werden. Deren Farben (HEX & RGB) sind individualisierbar.

  • Über das „Plus“ werden statische Werte erweitert und über das „Minus“ wieder entfernt.

  • Das Linien- und Balkendiagramm benötigen eine Query Konfiguration

  • Im Anschluss speichern

• Komponente „Diagramm auswählen.
• Typ „Messungen“ hinzufügen:
  • Festlegung der Einheit
  • Festlegung des Warnungslimits
  • Festlegung des Alarmlimits
  • Festlegung der Maximum Werte
  • Weitere Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
  • Das Diagramm „Messungen“ benötigt eine Query Konfiguration
• Im Anschluss speichern

• Komponente „Diagramm auswählen.
• Typ „farbiger Slider“ hinzufügen:
  • Minimalwert und Maximalwert festlegen.
  • Festlegung der Einheit
  • Es können Statische Schwellwerte bestimmt werden. Für diese werden ebenfalls das Minimum und Maximum des Schwellintervalls definiert und mit einem Icon versehen. Diese erhalten ebenfalls ein Label.
  • Es können die Farben (HEX & RGB) der der Label und die Schwellintervalle in den Statischen Werten hinterlegt werden.
  • Den Zahlen und Farben können Interpretative Texte und Icons zugeordnet werden. So werden gemessene Daten, den vorher gesetzte, statische Schwellwerten zugeordnet. Diese werden über „Markierungen statische Werte“ definiert. Hier können auch die Farben (HEX & RGB) der Texte und Icons sind individualisierbar. Durch das eingetragene Value können die Icons in der Vorschau positioniert werden. Das Label erhält im Weiteren ihr Attribut. Diese können gleich sein oder Leer gelassen werden
  • Über das „Plus“ werden Werte (statisch oder Markierungen) erweitert und über das „Minus“ wieder entfernt.
  • Weitere Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
  • Der Slider benötigt eine Query Konfiguration
• Im Anschluss speichern

• Komponente „Diagramm auswählen.
• Typ „Slider Übersicht“ hinzufügen:
  • Für diesen Komponententypen muss eine Query Konfiguration vorgeschaltet durchgeführt werden. Erst dann können die richtigen dynamischen Attribute gesetzt werden. Diese sind:
  • Aktuelle Auslastung
  • Maximale Auslastung
• Im Anschluss speichern

• Komponente „Karte" auswählen.
• Karten Typ: "Kombinierte Karte":
  • Diese Komponente fügt zwei Karten (Sensorgruppen) in einer Karte zusammen. Die erstellten Seitenbannereinstellungen der Ursprungskarte werden übernommen. Die kominierte Karte filtert nach den Ursprungskarten, somit Sensorgruppen.
• Karten Typ „Pin“ hinzufügen: Die Karte benötigt in jedem Konfigurationsgrad eine Query Konfiguration.
• Mit dem Setzen des entsprechenden Hakens können Popups (Seitenbanner), Scrollfunktionen, Zoomfunktionen, Filter und Legende auf der Karte aktiviert werden.
  • Setzen des dynamisch einfahrenden Seitenbanners
    • Für diese Teilkonfiguration muss eine Query Konfiguration vorgeschaltet durchgeführt werden. Erst dann können die richtigen dynamischen Attribute
    • für die Komponenten auf dem Seitenbanner gesetzt werden.
    • Auswahl der Komponente, die auf dem Seitenbanner angezeigt wird. Jede Komponente wird in reduzierter Form angelegt. Es gibt eine reduzierte Auswahl an Komponenten. In Version 1.0.4:
      • Informationen (Text und Text mit Icon)
      • Diagramm (180°-Chart, Stageable Chart, reduziertes Liniendiagramm und reduziertes Balkendiagramm)
      • Wert mit dynamischen Interpretationselementen
      • Bild (als Sensorattribut und URL)
      • Buttons (Jumpoff URL und Jumpoff Sensor Attribute)
    • Über das „Plus“ werden Komponenten erweitert und über das „Minus“ wieder entfernt.
    • Über das „Pfeil“ kann die Reihenfolge der Komponenten innerhalb des Seitenbanners verschoben werden.
  • Setzen eines Filters
    • Für diese Teilkonfiguration muss eine Query Konfiguration vorgeschaltet durchgeführt werden. Erst dann können die richtigen dynamischen Attribute für den Filter gesetzt werden.
  • Setzen einer Legende
    • Auf der Legende erscheinen die Pins. Idealerweise haben die Pins auf der Karte und die Pins in der Legende die gleiche Farbe (HEX & RGB) und das gleiche Icon. Beides kann im Dashboard individualisiert werden.
    • Möglichkeit der Aktivierung eines Filters über das Setzen des entsprechenden Hakens. Der Filter zieht sich seine
    • Über das „Plus“ werden Elemente der Legende erweitert und über das „Minus“ wieder entfernt.
    • In der Legende kann ein Haftungsausschluss hinterlegt werden
• Anzeigemodi für Pins Es ist möglich auszuwählen „Nur Pin“, „Nur geometrische Form“, „Kombinierter Pin und geometrische Form“
  • Der Pin gibt die Position klar wieder und die geometrische Form erzeugt die schwellenwertabhängig eingefärbten Raster der Heat Map.
  • Als geometrische Form können ausgewählt werden: Quadrat, Rechteck, Kreis, Hexagon
  • Die Größe der geometrischen Form wird über „Formgröße“ eingestellt
  • Die Formfarbe kann auf einen Farbton eingefärbt werden, um Bereich zu markieren.
  • Für die Pins werden unter „Marker Optionen“ die Grundfarbe und die aktive Farbe ausgewählt. Anschließend wird ein Icon ausgewählt und mit einer Farbe (HEX & RGB) versehen.
• Kartenstyles
  • Standardmäßig wird die Leaflet Ansicht von Open Street Map eingesetzt
  • Es besteht die Option WMS Layer URL und die das direkte WMS Layer über die Datenplattform einzubinden
• Zoomoptionen Für die Kartenansicht definiert werden
  • Maximaler Zoom
  • Minimaler Zoom
  • Standard Zoom
  • Latitude
  • Longitude
• Im Anschluss speichern

• Komponente Wetterwarnungen auswählen.
• Für diesen Komponententypen muss eine Query Konfiguration vorgeschaltet durchgeführt werden. Erst dann können die Warnungen und Hinweise über die Plattform geladen werden
• Alle Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
• Im Anschluss speichern

• Komponente Kombinierte Komponente auswählen.
• Dieser Komponententyp soll bereits bestehende/erstellte Widgets übereinander anordnen
• Diese können bei „Widget für obere Position“ und „Widget für untere Position“ ausgewählt werden
• Zusätzliche Widgets können über den Button "Widget hinzufügen" implementiert werden. Über das "minus" Symbol werden Widgets wieder entfernt.
• Es wird über das Dropdown Menü unter "Layout" ausgewählt, ob die Widgets Nebeneinander oder Untereinander angeordnet werden.
• Im Anschluss speichern

• Komponente Wert auswählen.
• Festlegung der Einheit
• Festlegung der angezeigten Dezimalstelle
• Es können Statische Schwellwerte bestimmt werden. Es wird eine Farbe (HEX & RGB) für das optionale Label festgelegt.
• Den Zahlen und Farben können Interpretative Texte und Icons zugeordnet werden. So werden gemessene Daten, den vorher gesetzte, statische Schwellwerten zugeordnet. Diese werden über „Markierungen statische Werte“ definiert. Hier können auch die Farben (HEX & RGB) der Texte und Icons sind individualisierbar. Durch das eingetragene Value können den Messwerten eine schwellwertabhänge Farbe und Icon zugeordnet werden. Diese können gleich sein oder Leer gelassen werden
• Über das „Plus“ werden Werte (statisch oder Markierungen) erweitert und über das „Minus“ wieder entfernt.
• Weitere Gestaltungselemente wurden übergeordnet für das ganze Dashboards eingetragen (Siehe Kapitel XX)
• Die Wertkomponente benötigt eine Query Konfiguration
• Im Anschluss speichern

• Komponente iFrame auswählen.
• Dieser Komponententyp soll eine andere Webseite oder ein anderes Drittsystem (wie "Starkregensimulationskarten") in das Widget einbetten, welches innerhalb des Widgets bedient werden kann
• Diese kann über ihr URL eingetragen werden
• Im Anschluss speichern

• Komponente Bild auswählen.
• Bilder können über ihre URL oder das Hochladen einer Datei hinterlegt werden
• Es ist möglich eine Aktualisierungsintervall in Sekunden für die URL zu hinterlegen. Hierfür muss das entsprechende Haken gesetzt werden.
• Es ist möglich ein Jump-Bild durch das Setzen des entsprechenden Hakens zu aktivieren. Dabei wird das Bild mit einem Button versehen. So agiert das Bild als anklickbares „Button-Element“
• Im Anschluss speichern

Bei der Query Konfiguration wird ein „Sensor“ oder sonstige Datenquellen über die Plattform einem Widget zugeordnet. Somit werden die oben beschriebenen Komponenten mit Daten gefüllt und können in der eingestellten Konfiguration die Daten visualisieren. Die Datenplattform wurde bereit in Kapitel XX angebunden.

• Auswahl der Datenquelle über ein Dropdown Menü. Mögliche Datenquellen wurden bereits in Kapitel XX angebunden und füllen das Dropdown.
• Einstellen des Aktualisierungsintervalls
• "Fiware-Service-Pfad" ist voreingestellt. Nicht verändern.
• Auswahl der "Fiware Services". Diese sind in der ausgewählten Datenplattform erstellt und werden aus dieser gefüllt.
• Auswahl der "Fiware Typen". Diese sind in dem ausgewählten Fiware-Service erstellt und werden aus dieser gefüllt.
• Auswahl der "Entäts-ID/Source". Diese sind in dem ausgewählten Fiware-Typen erstellt und werden aus dieser gefüllt.
• Auswahl des "Attributs". Diese sind in dem ausgewählten Entitäts-ID/Sources erstellt und werden aus dieser gefüllt.
• Falls die oben genannten Dropdowns nicht automatisch laden, wird das „Refresh-Symbol“ recht gekicktt
• Ein "Report Theshold Exceeding" kann mit dem Setzen des entsprechenden Hakens aktiviert werden. • Reportnamen einstellen • Auslösenden Sensorwert einstellen • Trigger aus dem Dropdown auswählen. Möglich sind: exceeding, falls below, equals • E-Mailadresse hinterlegen • Email Text erstellen

• Über Namen Suchen: Es wird ein Wort eingegeben, das in dem Widget-Namen vorkommt. Die Liste aktualisiert sich mit allen Elementen, die dieses Wort im Namen beinhalten.

• Über die Komponentenart suchen: in der nächsten Spalte kann über die Art der Komponente, wie "Diagramme" gefiltert werden. Die Liste aktualisiert sich mit allen Elementen, die diese Art der Komponente darstellen. Die Suche kann mit dem Typ der Komponente verfeinert werden, wie z.B. 180° Diagramm"

• In der Widgetliste kann für das gewünschte Widget ganz rechts das "Copy-Symbol" in Grün gedrückt werden. Dies erzeugt das gleiche Widget mit voreingestellten Konfigurationen für:
  • Allgemeine Informationen
  • Tab Konfiguration
  • Query Konfiguration
• Das neue Widget wird mit dem Zusatz „…(Copy)“ gekennzeichnet.
• Auf diese Weise muss lediglich die Query Konfiguration für eine neue Darstellung angepasst werden.

• Im Menü auf „Dashboardseiten“ klicken.

• Oben rechts auf „Neu erstellen“ klicken.

• Folgende Angaben eintragen (rechte Seite):

  • Name der Dashboardseite. Einmal gesetzt erscheint diese in der späteren Menüstruktur, Auf der Dashboardseite als Titel und im Header
  • Schriftfarbe (HEX & RGB) des Namens
  • URL-Zusatz über die die Dashboardseite im Nachgang zu erreichen ist.
  • Einstellen des Sichtbarkeit und Auswahl der entsprechenden, vordefinierten Rolle (Lese- und Schreibrechte), falls eine geschützte Ansicht gewählt wird.
  • Auswahl des Types: Möglich sind Allgemein und Karte. Bei der Auswahl einer allgemeinen Seite werden die weiteren Schritte ausgeführt. Bei der Auswahl der Karte wird lediglich das bereits erstellt Kartenwidget ins Dropdownmenü gezogen.
  • Auswahl des Icons, der links neben dem Namen in der gleichen Farbe erscheint.
  • Möglichkeit das Teilen der Dashboard-Seite zuzulassen über das Setzen des entsprechenden Hakens
  • Möglichkeit einen Datenexportbutton zu aktivieren über das Setzen des entsprechenden Hakens
  • Bei dem Typen „Karte“ nur noch auf Speichern drücken.

• Aufbau der Dashboardseite (linke Seite)

  • Klicken auf "Panel hinzufügen"

  • Panelnamen eintragen

  • Panelbreite einstellen. Möglich sind: 1/3, ½, 2/3, 3/3

  • Icon auswählen, dass neben dem Namen in der gleichen Farbe erscheint.

  • Möglichkeit eine Infonachricht zu hinterlegen, die dauerhaft unten im Panel angezeigt wird

  • Möglichkeit eine Kachel mit allgemeinen Informationen zu aktivieren durch das Setzen des entsprechenden Hakens. Auf dem Panel rechts erscheint ein i Symbol, welches angeklickt werden kann. Es öffnet sich die Kachel mit der eingestellten Info.

  • Möglichkeit einen Jumpoff-Button zu generieren, mit dem Setzen des entsprechenden Hakens. Es wird eine Buttonbeschreibung eingefügt, ein Icon ausgewählt und die URL zum Absprungziel festgelegt.

  • Auswahl, ob für den Jumoff ein neuer Tab eröffnet, wird durch das Setzen des entsprechenden Hakens.

  • Über Pfeilsymbole können die Panele auf der Dashboardseite verschoben und angeordnet werden.

• Füllen der Panele mit Widgets

In das erstellte Panel können über „+Widget hinzufügen“ ein bereits erstelltes Widget in das Panel gesetzt werden. Die Größeneinstellung des Widgets erfolgte bereit bei dessen Erstellung. Über Pfeilsymbole können die Widgets im Panel verschoben und angeordnet werden. Im Anschluss speichern.

• Unerwünschte Dashboadseiten werden über das „Mülleimer-Symbol“ gelöscht.

• Im Menü auf „Menü“ klicken.
• Menüelemente können verschoben (Pfeilsymbol) oder gelöscht (Mülleimersymbol).

• Zunächst wird der „Elementtyp“ ausgewählt. Möglich sind „Dashboardseite“ und „Gruppe“

Dashboardseite

• Es wird über das Dropdown die bereits erstellte Seite ausgewählt
• Über den Button „Dashboard Bearbeiten“ rechts haben wir die Möglichkeit die Seite direkt zu bearbeiten.

Gruppe

• Die Gruppe erhält einen Namen

• Der Gruppe wird eine URL zugeordnet

• Möglichkeit ein Icon auszuwählen, das neben dem Gruppennamen erscheint.

• Änderungen werden automatisch gespeichert

• Über den Bereich „Anzeigen“ im Menü der Managementview erfolgt eine direkte Weiterleitung zum erstellten Dashboard.

• Über den Bereich „Support“ erscheint ein Kontaktformular, welches eine direkte Kommunikation gewährleistet.

• Nach Aktivierung des „Bearbeiten“-Modus erscheinen Stiftsymbole an den Überschriften der Dashboardseiten, Panele und Widgets.
• Über die Stiftsymbole können Elemente direkt in der Admin View angepasst werden.

---

In der Liste Dashboardseiten kann für die gewünschte Dashboardseite ganz rechts das Copy-Symbols in Grün gedrückt werden. Dies erzeugt die gleiche Dashboardseite mit den voreingestellten Konfigurationen für

• Allgemeine Informationen
• Layout: Panele, Widgets etc.
• Alle Widgets auf dieser Seite werden in der Widgetliste kopiert.

Die neue Dashboarseite und die neuen Widgets werden mit dem Zusatz „…(Copy)“ gekennzeichnet. Auf diese Weise müssen lediglich einzelne Elemente angepasst werden.

Am Ende speichern.

---

Bestehende Elemente können direkt in der Dashboardansicht bearbeitet werden.

• Als Admin Einloggen
• Oben rechts den Slider „Bearbeiten“ Aktivieren.

Es erscheinen Stiftbuttons zum Bearbeiten der einzelnen Elemente, neben den Titeln.

Durch das Anklicken dieser wird man automatisch in das Bearbeitungsfenster von Dashbaordseiten und Widgets weitergeteilt. Der Nutzende spart sich alle Schritte über die Managementview.

---

Um die Anforderungen der Barrierefreiheit gemäß BITV NRW zu erfüllen, sollten folgende Punkte beachtet werden:

• Farbschema:

  • Sicherstellen, dass ausreichend Kontrast zwischen Text und Hintergrund besteht (z. B. mit einem Kontrast-Checker).
  • Farben für Texte und wichtige Informationen nicht allein zur Unterscheidung verwenden. Ergänzende Symbole oder Beschriftungen einfügen.

• Schriftarten:

  • Klare und leicht lesbare Schriftarten wie Arial oder Verdana verwenden.
  • Schriftgröße anpassbar gestalten, mindestens 12 pt als Standard.

• Navigation:

  • Fokusreihenfolge logisch und konsistent gestalten.
  • Tastatur-Navigation unterstützen (Tab, Enter, etc.).

• Bilder und Medien:

  • Alternativtexte für Bilder bereitstellen, die den Inhalt oder Zweck beschreiben.
  • Videos mit Untertiteln oder Transkriptionen ausstatten.

• Interaktive Elemente:

  • Buttons und Links mit ausreichend großer Klickfläche versehen.
  • Eindeutige Beschriftungen für Formulare und interaktive Elemente hinzufügen.

• Testen:

  • Tools wie WAVE oder Axe für Accessibility-Tests einsetzen.
  • Feedback von Nutzer:innen mit Behinderungen einholen.

---

• Moderne REST-Schnittstellen: Effiziente und sichere Datenübertragung zwischen Systemkomponenten.
• Automatisierungs-Pipeline: Inklusive Virus-Scans für höchste Sicherheit.
• Interne APIs: Nur für die Kommunikation zwischen Frontend und Backend zugänglich, abgesichert durch KeyCloak.
• Datenflusskontrolle: Über NGINX-Proxymanager zur Vermeidung unautorisierter Zugriffe.

---

Sinem Atilgan
E-Mail: [email protected]