Canvas
Inhaltsverzeichnis
- Überblick
- Bildschirmkonfiguration — 3 Bildschirme
- Listenansicht (
/canvas/index) - Bearbeitungsansicht (
/canvas/edit) - Details zu den 11 Widgets
- Ansichtsmodus (view) / Vollbildmodus (screen)
- Anwendungsszenarien
- Häufig gestellte Fragen
- Verwandte Bildschirme
Überblick
Das Canvas-Menü ist eine Oberfläche zur Erstellung von Dashboards für die Betriebsüberwachung (SCADA-Typ), indem Echtzeit-Widgets (Tag-Werte, Diagramme, Anzeigen, KPIs, Memos usw.) auf SVG-Zeichnungen platziert werden. Bediener können Datenanzeige-Widgets durch einfaches Klicken auf Grundrisse, Rohrleitungspläne oder Prozessdiagramme platzieren, ohne über Kenntnisse in der Grafikbearbeitung zu verfügen.
| Bildschirm | Interne URL | Zweck |
|---|---|---|
| Liste | /canvas/index | Kachelraster der eigenen und gemeinsam genutzten Canvas-Ansichten |
| Bearbeiten | /canvas/edit/{canvas_id} | SVG-Upload + Platzierung der 11 Widget-Typen + Freigabeeinstellungen |
| Ansicht | /canvas/view/{canvas_id} | Abruf des Canvas im Normalmodus (inkl. Header und Menü) |
| Vollbild | /canvas/screen/{canvas_id} | Anzeige des Canvas im Vollbildmodus (für Vor-Ort-Monitore/Displays) |
Pfad: Linkes Menü > Visualization > Canvas (Interne URL /canvas/index)
Bildschirmkonfiguration — 3 Bildschirme
[목록] → [편집] → [표시 / 전체화면]
| Bildschirm | Hauptbenutzer |
|---|---|
| Liste | Alle Benutzer |
| Bearbeiten | Canvas-Besitzer / Benutzer der Freigabe-Sicherheitsgruppe |
| Ansicht · Vollbild | Alle authentifizierten Benutzer (falls freigegeben) |
Listenansicht (/canvas/index)
🎨 캔버스 [총 N 개] [➕ 새 캔버스] [↻]
Obere Werkzeuge
| Steuerung | Aktion |
|---|---|
| Neuer Canvas | Rot + ➕ — addCanvas() — Öffnet das Formular zur Erstellung eines neuen Canvas |
| Aktualisieren | Rot + ↻ |
| Gesamt N Stück | Summe aus eigenen und gemeinsam genutzten Canvas-Ansichten (canvas_total_count) |
Linke Seitenleiste (col-lg-2) — Filterung
| Steuerung | Breite | Beschreibung |
|---|---|---|
Standort-Auswahl (filter_site) | 100% | Registrierte Standorte. Einer ist immer ausgewählt |
Canvas-Name (search_name) | 100% | Platzhalter: "Canvas-Name" |
Beschreibung (search_desc) | 100% | Platzhalter: "Beschreibung" |
Suche (filterList()) | 100px | Aktualisiert die Kachelliste basierend auf den obigen Bedingungen |
Rechts (col-lg-10) — Kachelraster
┌─ 캔버스 목록 [N] · 검색된 캔버스 ───────────────────┐
│ │
│ ┌─카드─┐ ┌─카드─┐ ┌─카드─┐ … │ ← canvas_list_view
│ │ 260px│ │ 260px│ │ 260px│ │ (eq-card 260px 그리드)
│ └─────┘ └─────┘ └─────┘ │
└──────────────────────────────────────────────────┘
Jede Kachel ist mit einer einheitlichen Breite von 260px im Raster automatisch ausgerichtet. Der gesamte Kachelbereich ist anklickbar (ein Klick auf die Kachel führt zur Canvas-Ansicht, ohne dass eine separate "Ansicht"-Schaltfläche in den Einstellungen erforderlich ist).
| Element | Beschreibung |
|---|---|
| Titel | Canvas-Name |
| Beschreibung | Canvas-Beschreibung |
| Standort | Zugehöriger Standort |
| Besitzer | Registrierte Benutzer-ID |
| Änderungsdatum | Zeitpunkt der letzten Änderung |
| Typ | my (Selbst erstellt) / shared (Freigegeben) — Unterscheidung durch farbige Badges |
| Kachel-Klick | Wechsel zur Ansicht (/canvas/view) |
| Bearbeiten / Löschen | Aktionsschaltflächen rechts auf der Kachel — funktionieren unabhängig vom Kachel-Klick (Event-Bubbling gestoppt) |
Die Canvas-Kacheln zeigen zwei Gruppen (eigene Canvas
_myList+ freigegebene Canvas_shareList) integriert an. Die Auswahl kann über Standort-, Namen- und Beschreibungsfilter eingegrenzt werden. Wenn das Suchergebnis 0 Treffer ergibt, wird ein leerer Status-Bildschirm (SVG-Illustration + Nachricht) angezeigt.
Bearbeitungsansicht (/canvas/edit)
Der Bildschirm besteht aus einem Attributs-Panel (col-lg-3) auf der linken Seite und einer Canvas-Vorschau (col-lg-9) auf der rechten Seite. Links gibt es zwei übergeordnete Tabs (Basisinformationen / Bearbeiten).
Links — Tab Basisinformationen
Panel Basisinformationen
| Eingabe | Pfad | Beschreibung |
|---|---|---|
| Canvas ID | canvas_id | Nur im Bearbeitungsmodus (mode='U') sichtbar (schreibgeschützt) |
| Standort-Auswahl | site_id | Optionen im Format Standortname [Beschreibung] |
| Canvas-Name ⭐ | canvas_title | Pflichtfeld |
| Beschreibung | canvas_desc | Freitext |
Panel Freigabeeinstellungen
| Eingabe | Pfad | Beschreibung |
|---|---|---|
| Freigabe nutzen | share (Checkbox) | "Teilt diesen Canvas mit Benutzern der Sicherheitsgruppe." |
| Freigabe-Sicherheitsgruppe | share_security_id | Auswahl aus den in der Sicherheitsrichtlinie registrierten Gruppen |
Links — Tab Bearbeiten
Upload der SVG-Zeichnung zur Anzeige im Canvas + 11 Widget-Paletten.
Panel SVG-Zeichnung
| Steuerung | Aktion |
|---|---|
Datei auswählen (svg_file_name) | Klick oder Ordner-Symbol — .svg Datei auswählen |
| SVG hochladen | upload_btn — Wendet das ausgewählte SVG auf den Canvas an |
Das SVG ist eine Zeichnung (z. B. Grundriss, Rohrleitungsplan, Prozessdiagramm), die der Bediener sehen möchte. Wenn kein SVG vorhanden ist, wird im Canvas-Bereich der Hinweis "Bitte laden Sie eine SVG-Zeichnung hoch" angezeigt.
11 Widget-Paletten
Wählen Sie den Widget-Typ im oberen Tab-Header aus, füllen Sie die Eingaben im jeweiligen Tab aus und klicken Sie auf die Schaltfläche Platzieren. Danach kann die Position auf dem Canvas durch Klicken festgelegt werden (ein Hinweis im Modus "Klicken zur Platzierung" wird in einem gelben Hintergrund am oberen Rand des Canvas angezeigt).
| Tab | Symbol | data-tab | Widget |
|---|---|---|---|
| 1 | 🏷 | tag_value | Tag-Wert |
| 2 | 📈 | timeseries | Zeitreihe |
| 3 | ❤️ | asset_health | Zustand |
| 4 | 📄 | document | Dokument |
| 5 | 📊 | asset_timeline | Zeitstrahl |
| 6 | 🌡️ | gauge | Anzeige |
| 7 | 🚦 | kpi | KPI |
| 8 | 📌 | memo | Memo |
| 9 | 🎖 | iso | ISO (OEE/RAM/EMS) |
| 10 | 📋 | data_table | Datentabelle |
| 11 | 🖼 | image | Bild |
Liste der platzierten Widgets
Unter der Widget-Palette wird eine Liste der platzierten Widgets angezeigt (placed_widgets_list, maximal 330px Scrollbereich). Im Header wird die Anzahl der Widgets (widget_count) angezeigt.
Leerer Status (bei 0 Widgets):
▦ (그리드 아이콘)
배치된 위젯이 없습니다
상단 팔레트에서 위젯을 끌어서 캔버스에 배치하세요.
Formular-Übermittlung (unten links)
| Schaltfläche | Aktion |
|---|---|
| Liste (☰) | goIndex() — Zur Canvas-Liste |
| Speichern (Blau) | save() — Gesamtspeicherung von Canvas + Widgets + tag_mapping_json |
Rechts — Canvas-Vorschau
| Bereich | Beschreibung |
|---|---|
| Header | 🖥 "Canvas-Vorschau" |
Platzierungsmodus-Hinweis (placing_mode_indicator) | Gelber Hinweistext bei Widget-Positionsbestimmung — "Klicken Sie, um den Tag zu platzieren" + Abbrechen-Link |
| Hauptbereich (750px Höhe, overflow: auto) | Bereich, in dem Widget-Marker über der SVG-Zeichnung angezeigt werden |
SVG-Container (svg_container)
- Wenn ein SVG hochgeladen wurde, wird es über
<svg>gerendert. - Wenn leer, wird der Hinweis für den leeren Status angezeigt:
🖼 (칠판 아이콘)
SVG 도면이 없습니다
좌측 [설정] 탭에서 SVG 도면을 업로드하세요.
Marker-Layer (marker_layer)
Marker schweben an den Positionen der platzierten Widgets. Durch Klicken auf einen Marker kann das Widget bearbeitet (verschoben, gelöscht, Optionen geändert) werden. Verbindungslinien zwischen Widgets werden durch eine separate Bibliothek (leader-line) visualisiert.
Details zu den 11 Widgets
Hier werden die Eingabefelder und Funktionen jedes Widgets beschrieben. Alle Widgets werden als Marker im rechten Canvas platziert und werden im Ansichtsmodus (/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 | Format |
|---|---|---|
| Tag ID | new_tag_input | Autovervollständigung |
Zeitreihe (timeseries)
| Eingabe | ID | Format |
|---|---|---|
| Tag ID | ts_tag_input | Autovervollständigung |
| Zeitraum | ts_period | Letzte 1 Std / 6 Std / 12 Std / 1 Tag (Standard) |
Ein kleines Zeitreihen-Diagramm wird auf der Zeichnung angezeigt, um Trends auf einen Blick sichtbar zu machen.
Zustand (asset_health)
Zeigt den Gesundheitszustand eines Assets durch farbige Leuchten an.
| Eingabe | ID | Format |
|---|---|---|
| Asset ID | ah_asset_input | Autovervollständigung (Asset-Baum) |
Die Farben entsprechen den 4 Stufen des Zustandscodes: (NORMAL/WARN/ERROR/UNKNOWN).
Dokument (document)
Zeigt im Asset registrierte Dokumente wie Zeichnungen, Handbücher oder QR-Codes auf der Zeichnung an.
| Eingabe | ID | Format |
|---|---|---|
| Asset ID | doc_asset_input | Autovervollständigung |
Zeitstrahl (asset_timeline)
Zeigt den Betriebs-/Stillstands- und Ereigniszeitstrahl eines Assets klein auf der Zeichnung an.
| Eingabe | ID | Format |
|---|---|---|
| Asset ID | tl_asset_input | Autovervollständigung |
| Anzeigebereich | tl_range | Letzte 1 · 3 · 6 · 12 · 24 Stunden (Standard) |
Anzeige (gauge)
Visualisiert die aktuelle Position des Tag-Werts mittels einer Anzeige.
| Eingabe | ID | Format | Standardwert |
|---|---|---|---|
| Tag ID | gauge_tag_input | Autovervollständigung | — |
| Minimalwert | gauge_min | Zahl | 0 |
| Maximalwert | gauge_max | Zahl | 100 |
| Warnschwellenwert | gauge_warn | Zahl | 70 |
| Gefahrenschwellenwert | gauge_error | Zahl | 90 |
KPI
Zeigt Kernindikatoren durch Farbstufen (Grün/Gelb/Rot) an.
| Eingabe | ID | Format | Standardwert |
|---|---|---|---|
| Tag ID | kpi_tag_input | Autovervollständigung | — |
| Label | kpi_label | Text | — |
| Normal Maximum | kpi_normal_max | Zahl | 50 |
| Warn Maximum | kpi_warn_max | Zahl | 80 |
Wert unter Normal Maximum: Grün, bis Warn Maximum: Gelb, darüber: Rot.
Memo (memo)
Erstellt direkt auf der Zeichnung Bedienerhinweise, Label oder Anmerkungen.
| Eingabe | ID | Format | 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 Analysedaten in die Zeichnung ein.
| Eingabe | ID | Format |
|---|---|---|
| Untertab | iso-sub-tabs | OEE / RAM / EMS Toggle |
| Asset ID | iso_asset_input | Autovervollständigung |
Je nach gewähltem Untertab (oee_chart/ram_chart/ems_chart) wird das entsprechende Analysedaten-Diagramm des Assets auf der Zeichnung angezeigt. Definitionen der Indikatoren siehe ISO-Daten und Analysen.
Datentabelle (data_table)
Platziert mehrere Kern-Tags eines Assets in Tabellenform auf der Zeichnung.
| Eingabe | ID | Format |
|---|---|---|
| Asset ID | tbl_asset_input | Autovervollständigung |
| Label | tbl_label | Text (Optional) |
Bild (image)
Zeigt Bilder von externen URLs (z. B. CCTV-Snapshots, Webcam) auf der Zeichnung an.
| Eingabe | ID | Format | Standardwert |
|---|---|---|---|
| Bild-URL | img_url | Text | Platzhalter: https://... |
| Label | img_label | Text (Optional) | — |
| Aktualisierungsintervall (s) | img_refresh | Zahl | 0 (Keine) |
Bei 0 wird das Bild nur einmal geladen, bei einem Wert erfolgt die automatische Aktualisierung im angegebenen Sekundenintervall.
Ansichtsmodus (view) / Vollbildmodus (screen)
| Modus | Interne URL | Anzeige |
|---|---|---|
| Ansicht | /canvas/view/{canvas_id} | Canvas + Linkes Menü + Oberer Header (Normalansicht) |
| Vollbild | /canvas/screen/{canvas_id} | Nur Canvas bildschirmfüllend (kein Menü/Header) |
Ansichtsmodus (view.jsp)
Zugriff über die ▶ Ansicht-Schaltfläche der Canvas-Kachel. Alle Widgets auf der SVG-Zeichnung werden mit Echtzeitdaten aktualisiert. Über die ⛶ Vollbild-Schaltfläche oben rechts kann in den Vollbildmodus gewechselt werden.
Vollbildmodus (screen.jsp)
Wird für die Anzeige auf Vor-Ort-Monitoren, großen Displays oder Informationsboards verwendet. Da Menü und Header fehlen, füllt der Canvas den gesamten Bildschirm aus.
Im Ansichtsmodus werden Widgets automatisch mit Echtzeitdaten aktualisiert. Wenn keine Daten eingehen, wird das Widget leer oder grau angezeigt.
Anwendungsszenarien
| Szenario | Vorgehensweise |
|---|---|
| Echtzeit-Temperatur/Druck auf Prozessdiagramm | SVG-Prozessdiagramm hochladen → N Tag-Wert-Widgets platzieren (Tag ID Autovervollständigung) |
| Linienbetriebszustand auf einen Blick | Linien-Grundriss-SVG → Zustands-Widgets (asset_health) pro Anlage platzieren |
| Dashboard für Vor-Ort-Displays | Canvas erstellen → Widgets bildschirmfüllend platzieren → Im Vollbildmodus auf Vor-Ort-PC öffnen |
| CCTV + Betriebsdaten integrierte Ansicht | Bild-Widget (CCTV-URL, 5s Intervall) + Kern-KPI-Widgets gemeinsam platzieren |
| OEE-Überwachungsboard | Linien-SVG → ISO-Widget (OEE) + Zustands-Widget + Anzeige-Widget kombinieren |
| Qualitätsprüfungsstatus | Prüflinien-SVG → Datentabelle-Widget + Memo-Widget + KPI-Widget |
| Team-Freigabe-Dashboard | Canvas bearbeiten → Freigabe EIN + Sicherheitsgruppe wählen → Automatische Freigabe für Gruppenmitglieder |
Häufig gestellte Fragen
F: Kann ich einen Canvas auch ohne SVG erstellen? A: Man kann ihn erstellen, aber es fehlt die Orientierung für die Koordinaten der Widgets. Es wird empfohlen, zuerst ein SVG eines Grundrisses, Rohrleitungsplans oder Prozessdiagramms hochzuladen.
F: Woher bekomme ich SVG-Dateien? A: Fordern Sie diese beim zuständigen Zeichner des Standorts an oder konvertieren Sie Standardzeichnungen (PDF, Bild) mit externen Tools in das SVG-Format.
F: Ich habe ein Widget falsch platziert. A: Klicken Sie auf den Marker auf dem Canvas, um das Optionsmenü zu öffnen; dort können Sie das Widget verschieben, löschen oder bearbeiten.
F: Darf ich denselben Tag an mehreren Positionen anzeigen? A: Ja, derselbe Tag kann in mehreren Widgets angezeigt werden. Beispielsweise kann die Temperatur eines Assets gleichzeitig in einem Anzeige-, Zeitreihen- und KPI-Widget dargestellt werden.
F: Wie teile ich einen Canvas mit anderen Benutzern? A: Aktivieren Sie im Panel Freigabeeinstellungen der Bearbeitungsansicht die Option «Teilt diesen Canvas mit Benutzern der Sicherheitsgruppe» und wählen Sie eine Sicherheitsgruppe aus.
F: Widgets werden im Ansichtsmodus grau angezeigt. A: Dies bedeutet, dass für den zugewiesenen Tag oder das Asset noch keine Daten eingegangen sind. Prüfen Sie den Dateneingang im Dashboard oder in der Verbindungsverwaltung.
F: Der Bildschirm sperrt sich nach einer Zeit im Vollbildmodus. A: Dies liegt am Bildschirmschoner oder der Sitzungsablaufzeit des Browsers bzw. Betriebssystems. Deaktivieren Sie für Vor-Ort-Displays den Bildschirmschoner des Browsers sowie des Betriebssystems.
F: Ich möchte die Schwellenwerte der Anzeige automatisch aktualisieren.
A: Dies kann über den Knoten flow_update_tag_alarm_band_numeric in Flow automatisiert werden.
F: Welche Spalten werden im Datentabelle-Widget angezeigt? A: Es werden automatisch die Kern-Tags angezeigt, die für dieses Asset registriert sind. Die Zuordnung der Kern-Tags pro Asset kann im Asset-Baum der Fabrikverwaltung konfiguriert werden.
F: Was passiert, wenn das Aktualisierungsintervall des Bild-Widgets zu kurz ist? A: Dies kann zu einer hohen Last auf dem externen Bildserver und zu einem erhöhten Netzwerkverkehr führen. Ein Intervall von mindestens 5 Sekunden wird empfohlen.
F: Kann ich einen Canvas sichern oder in eine andere Umgebung übertragen? A: Ein direkter Export über die Oberfläche wird nicht unterstützt. Bewahren Sie die SVG-Datei separat auf. Für die Übertragung der Canvas-Definition (Widget-Mapping) wenden Sie sich bitte an den Systemadministrator.
Verwandte Bildschirme
- Fabrikverwaltung — Registrierung von Assets und Tags (Ziele der Widgets)
- Datenpunkt — Trendansicht der Tag-Daten, die in Widgets angezeigt werden
- ISO-Daten und Analysen — Originalansicht der OEE/RAM/EMS-Diagramme des ISO-Widgets
- Anlage — Verknüpfung mit Asset-Kacheln
- Sicherheitsverwaltung — Konfiguration von Freigabe-Sicherheitsgruppen
- Zustandscodes — Farbmodellierung für Zustands-Widgets