Canvas
Inhaltsverzeichnis
- Übersicht
- Bildschirmaufbau — 3 Ansichten
- Übersichtsansicht (
/canvas/index) - Bearbeitungsansicht (
/canvas/edit) - Die 11 Widgets im Detail
- Modi Anzeige (view) / Vollbild (screen)
- Anwendungsszenarien
- Häufige Fragen
- Verwandte Ansichten
Übersicht
Im Menü Canvas platzieren Sie Echtzeit-Widgets (Tag-Werte, Diagramme, Anzeigeinstrumente, KPIs, Notizen usw.) auf einer SVG-Zeichnung und erstellen so ein Dashboard für die Betriebsüberwachung (SCADA-artig). Bediener können auch ohne Grafikkenntnisse per Mausklick Datenanzeige-Widgets auf Grundrissen, Rohrleitungsplänen oder Prozessschemata platzieren.
| Ansicht | Interne URL | Zweck |
|---|---|---|
| Übersicht | /canvas/index | Kartenraster der eigenen und der freigegebenen Canvas |
| Bearbeiten | /canvas/edit/{canvas_id} | SVG-Upload + Platzierung von 11 Widget-Typen + Freigabeeinstellungen |
| Anzeige | /canvas/view/{canvas_id} | Canvas im normalen Modus anzeigen (mit Kopfzeile und Menü) |
| Vollbild | /canvas/screen/{canvas_id} | Nur den Canvas im Vollbild anzeigen (für Vor-Ort-Monitore und Displays) |
Pfad: linkes Menü > Visualization > Canvas (interne URL /canvas/index)
Bildschirmaufbau — 3 Ansichten
[목록] → [편집] → [표시 / 전체화면]
| Ansicht | Hauptnutzer |
|---|---|
| Übersicht | alle Benutzer |
| Bearbeiten | Canvas-Eigentümer / Benutzer der freigegebenen Sicherheitsgruppe |
| Anzeige/Vollbild | alle authentifizierten Benutzer (sofern freigegeben) |
Übersichtsansicht (/canvas/index)
🎨 캔버스 [총 N 개] [➕ 새 캔버스] [↻]
Werkzeuge in der Kopfleiste
| Bedienelement | Funktion |
|---|---|
| Neuer Canvas | rot + ➕ — addCanvas() — Formular zum Anlegen eines neuen Canvas öffnen |
| Aktualisieren | rot + ↻ |
| Gesamt N | Summe aus eigenen und freigegebenen Canvas (canvas_total_count) |
Linke Seitenleiste (col-lg-2) — Filterung
| Bedienelement | Breite | Beschreibung |
|---|---|---|
Site-Auswahl (filter_site) | 100% | Alle Sites + registrierte Sites |
Canvas-Name (search_name) | 100% | placeholder: "Canvas-Name" |
Beschreibung (search_desc) | 100% | placeholder: "Beschreibung" |
Suchen (filterList()) | 100px | Kartenliste anhand der obigen Kriterien aktualisieren |
Rechts (col-lg-10) — Kartenraster
┌─ 캔버스 목록 [N] · 검색된 캔버스 ───────────────────┐
│ │
│ ┌─카드─┐ ┌─카드─┐ ┌─카드─┐ … │ ← canvas_list_view
│ │ 260px│ │ 260px│ │ 260px│ │ (eq-card 260px 그리드)
│ └─────┘ └─────┘ └─────┘ │
└──────────────────────────────────────────────────┘
Jede Karte hat eine einheitliche Breite von 260 px und wird automatisch im Raster angeordnet. Die gesamte Kartenfläche ist klickbar (ohne separate Schaltfläche „Anzeige" gelangen Sie durch Klick auf die Karte zur Canvas-Anzeige).
| Element | Beschreibung |
|---|---|
| Titel | Canvas-Name |
| Beschreibung | Canvas-Beschreibung |
| Site | zugehörige Site |
| Eigentümer | Benutzer-ID des Erstellers |
| Änderungsdatum | Zeitpunkt der letzten Änderung |
| Typ | my (selbst erstellt) / shared (freigegeben erhalten) — durch farbige Badges unterschieden |
| Klick auf die Karte | wechselt zur Anzeige (/canvas/view) |
| Bearbeiten / Löschen | Aktionsschaltflächen rechts auf der Karte — funktionieren unabhängig vom Kartenklick (Event-Bubbling wird gestoppt) |
Die Canvas-Karten zeigen beide Gruppen (eigene Canvas
_myList+ freigegebene Canvas_shareList) zusammengefasst an. Über die Filter Site, Name und Beschreibung lässt sich die Auswahl eingrenzen; liefert die Suche keine Treffer, erscheint ein leerer Zustand mit Hinweis (SVG-Illustration + Meldung).
Bearbeitungsansicht (/canvas/edit)
Die Ansicht besteht aus dem Eigenschaftenbereich links (col-lg-3) und der Canvas-Vorschau rechts (col-lg-9). Links befinden sich zwei übergeordnete Reiter (Basisinformationen / Bearbeiten).
Links — Reiter Basisinformationen
Bereich Basisinformationen
| Eingabe | path | Beschreibung |
|---|---|---|
| Canvas-ID | canvas_id | nur im Bearbeitungsmodus (mode='U') sichtbar (schreibgeschützt) |
| Site-Auswahl | site_id | Option Site-Name [Beschreibung] |
| Canvas-Name ⭐ | canvas_title | Pflichtfeld |
| Beschreibung | canvas_desc | Freitext |
Bereich Freigabeeinstellungen
| Eingabe | path | Beschreibung |
|---|---|---|
| Freigabe verwenden | share (Checkbox) | „Diesen Canvas für die Benutzer der Sicherheitsgruppe freigeben." |
| Freigegebene Sicherheitsgruppe | share_security_id | Auswahl aus den in der Sicherheitsrichtlinie registrierten Gruppen |
Links — Reiter Bearbeiten
Upload der im Canvas anzuzeigenden SVG-Zeichnung + Widget-Palette mit 11 Typen.
Bereich SVG-Zeichnung
| Bedienelement | Funktion |
|---|---|
Datei auswählen (svg_file_name) | Klick oder Ordnersymbol — .svg Datei auswählen |
| SVG hochladen | upload_btn — ausgewählte SVG auf den Canvas anwenden |
Die SVG ist die Zeichnung, die der Bediener sehen möchte — Grundriss, Rohrleitungsplan, Prozessschema usw. Ohne SVG erscheint im Canvas-Bereich der Hinweis „Bitte laden Sie eine SVG-Zeichnung hoch."
Widget-Palette mit 11 Typen
Wählen Sie in der Reiterleiste oben den Widget-Typ, füllen Sie die Eingabefelder des jeweiligen Reiters aus und klicken Sie auf Platzieren; anschließend legen Sie die Position per Klick auf dem Canvas fest (der Hinweis zum Klickmodus erscheint mit gelbem Hintergrund oberhalb des Canvas).
| Reiter | Symbol | data-tab | Widget |
|---|---|---|---|
| 1 | 🏷 | tag_value | Tag-Wert |
| 2 | 📈 | timeseries | Serie |
| 3 | ❤️ | asset_health | Status |
| 4 | 📄 | document | Dokument |
| 5 | 📊 | asset_timeline | Timeline |
| 6 | 🌡️ | gauge | Anzeigeinstrument |
| 7 | 🚦 | kpi | KPI |
| 8 | 📌 | memo | Notiz |
| 9 | 🎖 | iso | ISO (OEE/RAM/EMS) |
| 10 | 📋 | data_table | Datentabelle |
| 11 | 🖼 | image | Bild |
Liste der platzierten Widgets
Unterhalb der Widget-Palette wird die Liste der platzierten Widgets angezeigt (placed_widgets_list, scrollbar bis 330 px). In der Kopfzeile steht zusätzlich die Anzahl der Widgets (widget_count).
Leerer Zustand (bei 0 Widgets):
▦ (그리드 아이콘)
배치된 위젯이 없습니다
상단 팔레트에서 위젯을 끌어서 캔버스에 배치하세요.
Formularübermittlung (unten links)
| Schaltfläche | Funktion |
|---|---|
| Übersicht (☰) | goIndex() — zur Canvas-Übersicht |
| Speichern (blau) | save() — Canvas + Widgets + tag_mapping_json vollständig speichern |
Rechts — Canvas-Vorschau
| Bereich | Beschreibung |
|---|---|
| Kopfzeile | 🖥 „Canvas-Vorschau" |
Hinweis zum Platzierungsmodus (placing_mode_indicator) | Während die Widget-Position per Klick festgelegt wird, erscheint ein Hinweis mit gelbem Hintergrund — „Klicken Sie, um das Tag zu platzieren" + Abbrechen-Link |
| Inhalt (Höhe 750 px, overflow: auto) | Bereich, in dem die Widget-Marker über der SVG-Zeichnung dargestellt werden |
SVG-Container (svg_container)
- Ist eine SVG hochgeladen, wird sie als
<svg>gerendert - Andernfalls erscheint der Hinweis zum leeren Zustand:
🖼 (칠판 아이콘)
SVG 도면이 없습니다
좌측 [설정] 탭에서 SVG 도면을 업로드하세요.
Marker-Ebene (marker_layer)
An den Positionen der platzierten Widgets liegen Marker; per Klick auf einen Marker lässt sich das Widget bearbeiten (verschieben, löschen, Optionen ändern). Verbindungslinien zwischen Widgets werden über eine separate Bibliothek (leader-line) visualisiert.
Die 11 Widgets im Detail
Nachfolgend sind Eingabefelder und Verhalten der einzelnen Widgets zusammengefasst. Alle Widgets werden als Marker auf dem rechten Canvas platziert und im Anzeigemodus (/canvas/view) mit Echtzeitdaten aktualisiert.
Tag-Wert (tag_value)
Das einfachste Widget. Zeigt den aktuellen Wert eines Tags als große Zahl auf der Zeichnung an.
| Eingabe | id | Form |
|---|---|---|
| Tag-ID | new_tag_input | Autovervollständigung |
Serie (timeseries)
| Eingabe | id | Form |
|---|---|---|
| Tag-ID | ts_tag_input | Autovervollständigung |
| Zeitraum | ts_period | letzte 1/6/12 Stunden bzw. 1 Tag (Standard) |
Ein kleines Zeitreihen-Diagramm auf der Zeichnung zeigt den Verlauf auf einen Blick.
Status (asset_health)
Zeigt den Zustand einer Anlage als farbige Statusanzeige.
| Eingabe | id | Form |
|---|---|---|
| Asset-ID | ah_asset_input | Autovervollständigung (Asset-Baum) |
Die Farben entsprechen den vier Stufen der Statuscodes (NORMAL/WARN/ERROR/UNKNOWN).
Dokument (document)
Zeigt für die Anlage hinterlegte Dokumente wie Zeichnungen, Handbücher oder QR-Codes auf der Zeichnung an.
| Eingabe | id | Form |
|---|---|---|
| Asset-ID | doc_asset_input | Autovervollständigung |
Timeline (asset_timeline)
Zeigt die Betriebs-/Stillstands- und Ereignis-Timeline einer Anlage kompakt auf der Zeichnung an.
| Eingabe | id | Form |
|---|---|---|
| Asset-ID | tl_asset_input | Autovervollständigung |
| Anzeigebereich | tl_range | letzte 1, 3, 6, 12, 24 Stunden (Standard) |
Anzeigeinstrument (gauge)
Visualisiert den aktuellen Tag-Wert als Anzeigeinstrument.
| Eingabe | id | Form | Standardwert |
|---|---|---|---|
| Tag-ID | gauge_tag_input | Autovervollständigung | — |
| Minimalwert | gauge_min | Zahl | 0 |
| Maximalwert | gauge_max | Zahl | 100 |
| Warnschwelle | gauge_warn | Zahl | 70 |
| Gefahrenschwelle | gauge_error | Zahl | 90 |
KPI
Stellt Kennzahlen in Farbstufen dar (grün/gelb/rot).
| Eingabe | id | Form | Standardwert |
|---|---|---|---|
| Tag-ID | kpi_tag_input | Autovervollständigung | — |
| Label | kpi_label | Text | — |
| Normal max. | kpi_normal_max | Zahl | 50 |
| Warnung max. | kpi_warn_max | Zahl | 80 |
Werte bis „Normal max." sind grün, bis „Warnung max." gelb, darüber rot.
Notiz (memo)
Hinweise, Beschriftungen und Kommentare für Bediener direkt auf der Zeichnung verfassen.
| Eingabe | id | Form | Standardwert |
|---|---|---|---|
| Text | memo_text | textarea (3 Zeilen) | — |
| Schriftgröße | memo_font_size | Zahl (8–48) | 14 |
| Farbe | memo_color | Farbwähler | #333333 |
ISO (OEE/RAM/EMS)
Bettet ISO-Daten und Analysediagramme in die Zeichnung ein.
| Eingabe | id | Form |
|---|---|---|
| Unterreiter | iso-sub-tabs | Umschalter OEE / RAM / EMS |
| Asset-ID | iso_asset_input | Autovervollständigung |
Je nach gewähltem Unterreiter (oee_chart/ram_chart/ems_chart) wird das entsprechende Analysediagramm der Anlage auf der Zeichnung angezeigt. Die Definitionen der Kennzahlen finden Sie unter ISO-Daten und Analyse.
Datentabelle (data_table)
Platziert mehrere Schlüssel-Tags einer Anlage als Tabelle auf der Zeichnung.
| Eingabe | id | Form |
|---|---|---|
| Asset-ID | tbl_asset_input | Autovervollständigung |
| Label | tbl_label | Text (optional) |
Bild (image)
Zeigt ein Bild von einer externen URL (z. B. CCTV-Schnappschuss, Webcam) auf der Zeichnung an.
| Eingabe | id | Form | Standardwert |
|---|---|---|---|
| Bild-URL | img_url | Text | placeholder: https://... |
| Label | img_label | Text (optional) | — |
| Aktualisierungsintervall (s) | img_refresh | Zahl | 0 (keines) |
Bei 0 wird nur einmal geladen; ist ein Wert gesetzt, erfolgt die Aktualisierung automatisch in diesem Sekundenintervall.
Modi Anzeige (view) / Vollbild (screen)
| Modus | Interne URL | Darstellung |
|---|---|---|
| Anzeige | /canvas/view/{canvas_id} | Canvas + linkes Menü + Kopfzeile (normale Ansicht) |
| Vollbild | /canvas/screen/{canvas_id} | nur Canvas, bildschirmfüllend (ohne Menü und Kopfzeile) |
Anzeigemodus (view.jsp)
Aufruf über die Schaltfläche ▶ Anzeige auf der Canvas-Karte. Alle Widgets werden mit Echtzeitdaten über der SVG-Zeichnung aktualisiert; über die Schaltfläche ⛶ Vollbild oben rechts wechseln Sie in den Vollbildmodus.
Vollbildmodus (screen.jsp)
Für die Darstellung auf Vor-Ort-Monitoren, Großdisplays oder Informationstafeln. Ohne Menü und Kopfzeile füllt der Canvas den Bildschirm vollständig aus.
Im Anzeigemodus aktualisieren sich die Widgets automatisch mit Echtzeitdaten. Kommen keine Daten an, bleiben die Widgets leer oder werden grau dargestellt.
Anwendungsszenarien
| Szenario | Vorgehen |
|---|---|
| Echtzeit-Temperatur/-Druck auf dem Prozessschema | SVG-Prozessschema hochladen → N Tag-Wert-Widgets platzieren (Tag-ID mit Autovervollständigung) |
| Linienstatus auf einen Blick | SVG-Grundriss der Linie → Widgets für den Anlagenstatus (asset_health) je Anlage platzieren |
| Dashboard für Vor-Ort-Displays | Canvas anlegen → Widgets bildschirmfüllend platzieren → auf dem Vor-Ort-PC im Vollbildmodus anzeigen |
| Kombinierte Ansicht aus CCTV und Betriebsdaten | Bild-Widget (CCTV-URL, Aktualisierung alle 5 s) zusammen mit zentralen KPI-Widgets platzieren |
| OEE-Monitoring-Board | SVG der Linie → ISO-Widget (OEE) + Anlagenstatus-Widget + Anzeigeinstrument kombinieren |
| Status der Qualitätsprüfung | SVG der Prüflinie → Datentabellen-Widget + Notiz-Widget + KPI-Widget |
| Team-übergreifendes Dashboard | Canvas bearbeiten → Freigabe EIN + Sicherheitsgruppe wählen → automatische Freigabe für die Benutzer dieser Gruppe |
Häufige Fragen
F. Kann ich einen Canvas auch ohne SVG erstellen? A. Erstellen ja, aber ohne Koordinaten zum Platzieren der Widgets ist das wenig sinnvoll. Laden Sie zuerst eine SVG (Grundriss, Rohrleitungsplan, Prozessschema) hoch.
F. Woher bekomme ich SVG-Dateien? A. Fordern Sie sie beim Zeichnungsverantwortlichen der jeweiligen Site an, oder konvertieren Sie vorhandene Zeichnungen (PDF, Bild) mit einem externen Werkzeug nach SVG.
F. Ich habe ein Widget falsch platziert. A. Ein Klick auf den Marker im Canvas öffnet das Optionsmenü zum Verschieben, Löschen oder Bearbeiten.
F. Darf dasselbe Tag an mehreren Stellen angezeigt werden? A. Ja, ein Tag kann in mehreren Widgets angezeigt werden. Beispielsweise lässt sich die Temperatur einer Anlage gleichzeitig als Anzeigeinstrument, Serie und KPI darstellen.
F. Wie gebe ich einen Canvas für andere Benutzer frei? A. Aktivieren Sie im Bereich Freigabeeinstellungen der Bearbeitungsansicht die Option Diesen Canvas für die Benutzer der Sicherheitsgruppe freigeben und wählen Sie die Sicherheitsgruppe aus. Die Benutzer dieser Gruppe finden den Canvas in ihrer Canvas-Übersicht im Bereich „Freigegeben erhalten".
F. Im Anzeigemodus erscheint ein Widget grau. A. Dann liegen für das referenzierte Tag bzw. die Anlage noch keine Daten vor. Prüfen Sie den Dateneingang im Dashboard oder in der Verbindungsverwaltung.
F. Im Vollbildmodus sperrt sich der Bildschirm nach einiger Zeit. A. Ursache ist der Bildschirmschoner bzw. der Sitzungsablauf von Browser oder Betriebssystem. Deaktivieren Sie bei Vor-Ort-Displays den automatischen Bildschirmschoner des Browsers sowie den des Betriebssystems in den Systemeinstellungen.
F. Ich möchte die Schwellenwerte des Anzeigeinstruments automatisch aktualisieren.
A. Das lässt sich mit dem Node flow_update_tag_alarm_band_numeric im Flow automatisieren.
F. Welche Spalten zeigt das Datentabellen-Widget? A. Automatisch die für die jeweilige Anlage registrierten Schlüssel-Tags. Die Zuordnung der Schlüssel-Tags je Anlage konfigurieren Sie im Asset-Baum der Werksverwaltung.
F. Was passiert bei einem zu kurzen Aktualisierungsintervall des Bild-Widgets? A. Der externe Bildserver kann überlastet werden und die Netzlast steigt. Empfohlen sind mindestens 5 Sekunden.
F. Ich möchte einen Canvas sichern oder in eine andere Umgebung übertragen. A. Ein direkter Export aus der Oberfläche ist nicht vorgesehen. Bewahren Sie die SVG separat auf; für die Übertragung der Canvas-Definition (Widget-Mapping) wenden Sie sich an Ihren Systemadministrator.
Verwandte Ansichten
- Werksverwaltung — Registrierung von Assets und Tags (die Ziele der Widgets)
- Datenpunkte — Trendansicht der von den Widgets angezeigten Tag-Daten
- ISO-Daten und Analyse — Ursprungsansicht der OEE-/RAM-/EMS-Diagramme des ISO-Widgets
- Anlagen — Verknüpfung mit den Asset-Karten
- Sicherheitsverwaltung — Konfiguration der freigegebenen Sicherheitsgruppe
- Definition der Statuscodes — Farbzuordnung des Status-Widgets