Canvas
Table of Contents
- Overview
- Screen Composition — 3 Screens
- List Screen (
/canvas/index) - Edit Screen (
/canvas/edit) - Detailed 11 Widget Types
- View / Screen Mode
- Utilization Scenarios
- Frequently Asked Questions
- Related Screens
Overview
The Canvas menu is a screen for creating operation monitoring dashboards (SCADA-style) by placing real-time widgets (tag values, charts, gauges, KPIs, memos, etc.) on top of SVG drawings. Operators can place data display widgets on floor plans, piping diagrams, or process flows by simply clicking, without needing graphic editing skills.
| Screen | Internal URL | Purpose |
|---|---|---|
| List | /canvas/index | Grid of created canvases and shared canvases |
| Edit | /canvas/edit/{canvas_id} | SVG upload + 11 widget placement + sharing settings |
| View | /canvas/view/{canvas_id} | View canvas in normal mode (with header and menu) |
| Full Screen | /canvas/screen/{canvas_id} | Display only the canvas in full screen (for field monitors/displays) |
Path: Left Menu > Visualization > Canvas (Internal URL /canvas/index)
Screen Composition — 3 Screens
[목록] → [편집] → [표시 / 전체화면]
| Screen | Primary User |
|---|---|
| List | All Users |
| Edit | Canvas Owner / Users in the shared security group |
| View · Full Screen | All authenticated users (if shared) |
List Screen (/canvas/index)
🎨 캔버스 [총 N 개] [➕ 새 캔버스] [↻]
Top Tools
| Control | Action |
|---|---|
| New Canvas | Red + ➕ — addCanvas() — Opens the new canvas creation form |
| Refresh | Red + ↻ |
| Total N | Sum of my canvases + shared canvases (canvas_total_count) |
Left Sidebar (col-lg-2) — Filtering
| Control | Width | Description |
|---|---|---|
Site Selector (filter_site) | 100% | Registered sites. One is always selected |
Canvas Name (search_name) | 100% | placeholder: "Canvas Name" |
Description (search_desc) | 100% | placeholder: "Description" |
Search (filterList()) | 100px | Refreshes the card list based on the above conditions |
Right (col-lg-10) — Card Grid
┌─ 캔버스 목록 [N] · 검색된 캔버스 ───────────────────┐
│ │
│ ┌─카드─┐ ┌─카드─┐ ┌─카드─┐ … │ ← canvas_list_view
│ │ 260px│ │ 260px│ │ 260px│ │ (eq-card 260px 그리드)
│ └─────┘ └─────┘ └─────┘ │
└──────────────────────────────────────────────────┘
Each card is automatically aligned in a grid with a uniform width of 260px, and the entire card area is clickable (clicking the card moves to the canvas view screen without a separate "View" button in the settings).
| Item | Description |
|---|---|
| Title | Canvas Name |
| Description | Canvas Description |
| Site | Affiliated Site |
| Owner | Registered User ID |
| Modified Date | Last modification time |
| Type | my (Created by me) / shared (Shared) — Distinguished by color badges |
| Card Click | Moves to View screen (/canvas/view) |
| Edit / Delete | Action buttons on the right of the card — Operate independently of the card click (stops event bubbling) |
Canvas cards display two groups (My Canvases
_myList+ Shared Canvases_shareList) collectively. They can be narrowed down using site, name, and description filters. If there are zero search results, an empty state screen (SVG illustration + message) is displayed.
Edit Screen (/canvas/edit)
The screen consists of a left col-lg-3 property panel and a right col-lg-9 canvas preview. On the left, there are two top-level tabs (Basic Information / Edit).
Left — Basic Information Tab
Basic Information Panel
| Input | path | Description |
|---|---|---|
| Canvas ID | canvas_id | Displayed only in edit mode (mode='U') (Read-only) |
| Site Selection | site_id | Site Name [Description] option |
| Canvas Name ⭐ | canvas_title | Mandatory input |
| Description | canvas_desc | Free text |
Sharing Settings Panel
| Input | path | Description |
|---|---|---|
| Enable Sharing | share (Checkbox) | "Share this canvas with users in the security group." |
| Shared Security Group | share_security_id | Select from groups registered in Security Policy |
Left — Edit Tab
SVG drawing upload for the canvas and 11 types of widget palettes.
SVG Drawing Panel
| Control | Action |
|---|---|
Select File (svg_file_name) | Click or folder icon — .svg file selection |
| SVG Upload | upload_btn — Apply selected SVG to the canvas |
SVGs are drawings such as floor plans, piping diagrams, or process flows that operators wish to see. If no SVG is present, a guide saying "Please upload an SVG drawing" is displayed in the canvas area.
11 Widget Palette
Select the widget type from the top tab header, fill in the inputs for each tab, and click the Place button to specify the location on the canvas by clicking (a guide for click mode is displayed on a yellow background at the top of the canvas).
| Tab | Icon | data-tab | Widget |
|---|---|---|---|
| 1 | 🏷 | tag_value | tag value |
| 2 | 📈 | timeseries | series |
| 3 | ❤️ | asset_health | status |
| 4 | 📄 | document | document |
| 5 | 📊 | asset_timeline | timeline |
| 6 | 🌡️ | gauge | gauge |
| 7 | 🚦 | kpi | KPI |
| 8 | 📌 | memo | memo |
| 9 | 🎖 | iso | ISO (OEE/RAM/EMS) |
| 10 | 📋 | data_table | data table |
| 11 | 🖼 | image | image |
Placed Widget List
The list of placed widgets is displayed at the bottom of the widget palette (placed_widgets_list, max 330px scroll). The number of widgets (widget_count) is shown in the header.
Empty state (when there are 0 widgets):
▦ (그리드 아이콘)
배치된 위젯이 없습니다
상단 팔레트에서 위젯을 끌어서 캔버스에 배치하세요.
Form Submission (Bottom Left)
| Button | Action |
|---|---|
| List (☰) | goIndex() — To canvas list |
| Save (Blue) | save() — Save entire canvas + widgets + tag_mapping_json |
Right — Canvas Preview
| Area | Description |
|---|---|
| Header | 🖥 "Canvas Preview" |
Placement Mode Guide (placing_mode_indicator) | Yellow background guide when specifying widget location by click — "Click to place tag" · Cancel link |
| Body (750px height, overflow: auto) | Area where widget markers are displayed over the SVG drawing |
SVG Container (svg_container)
- If an SVG is uploaded, it is rendered as
<svg> - If empty, the empty state guide is displayed:
🖼 (칠판 아이콘)
SVG 도면이 없습니다
좌측 [설정] 탭에서 SVG 도면을 업로드하세요.
Marker Layer (marker_layer)
Markers are positioned where widgets are placed. Clicking a marker allows widget editing (move, delete, option change). Connecting lines between widgets are visualized using a separate library (leader-line).
Detailed 11 Widget Types
Input fields and behavior for each widget are summarized. All widgets are placed as markers on the right canvas and are updated with real-time data in view mode (/canvas/view).
Tag Value (tag_value)
The simplest widget. Displays the current value of one tag as a large number on the drawing.
| Input | id | Type |
|---|---|---|
| Tag ID | new_tag_input | Auto-complete |
Series (timeseries)
| Input | id | Type |
|---|---|---|
| Tag ID | ts_tag_input | Auto-complete |
| Period | ts_period | Last 1hr / 6hr / 12hr / 1day (Default) |
A small time series chart is displayed on the drawing to provide a visual trend of changes.
Status (asset_health)
Displays the health status of an asset using color indicators.
| Input | id | Type |
|---|---|---|
| Asset ID | ah_asset_input | Auto-complete (Asset Tree) |
Colors follow the 4 stages of Status Code: NORMAL / WARN / ERROR / UNKNOWN.
Document (document)
Displays documents such as drawings, manuals, or QR codes registered to the asset on the drawing.
| Input | id | Type |
|---|---|---|
| Asset ID | doc_asset_input | Auto-complete |
Timeline (asset_timeline)
Displays a small timeline of asset operation/stop and events on the drawing.
| Input | id | Type |
|---|---|---|
| Asset ID | tl_asset_input | Auto-complete |
| Display Range | tl_range | Last 1, 3, 6, 12, 24 hours (Default) |
Gauge (gauge)
Visualizes the current position of a tag value using a gauge.
| Input | id | Type | Default |
|---|---|---|---|
| Tag ID | gauge_tag_input | Auto-complete | — |
| Minimum | gauge_min | Number | 0 |
| Maximum | gauge_max | Number | 100 |
| Warning Threshold | gauge_warn | Number | 70 |
| Danger Threshold | gauge_error | Number | 90 |
KPI
Displays key indicators using color grades (Green/Yellow/Red).
| Input | id | Type | Default |
|---|---|---|---|
| Tag ID | kpi_tag_input | Auto-complete | — |
| Label | kpi_label | Text | — |
| Normal Max | kpi_normal_max | Number | 50 |
| Warning Max | kpi_warn_max | Number | 80 |
Green if the value is below Normal Max, Yellow up to Warning Max, and Red beyond that.
Memo (memo)
Writes operator guides, labels, or annotations directly onto the drawing.
| Input | id | Type | Default |
|---|---|---|---|
| Text | memo_text | textarea (3 rows) | — |
| Font Size | memo_font_size | Number (8~48) | 14 |
| Color | memo_color | Color Picker | #333333 |
ISO (OEE/RAM/EMS)
Embeds ISO data and analysis charts into the drawing.
| Input | id | Type |
|---|---|---|
| Sub Tab | iso-sub-tabs | OEE / RAM / EMS Toggle |
| Asset ID | iso_asset_input | Auto-complete |
Depending on the selected sub tab (oee_chart/ram_chart/ems_chart), the corresponding analysis chart for that asset is displayed on the drawing. Refer to ISO Data and Analysis for detailed metric definitions.
Data Table (data_table)
Places multiple key tags of an asset in a table format on the drawing.
| Input | id | Type |
|---|---|---|
| Asset ID | tbl_asset_input | Auto-complete |
| Label | tbl_label | Text (Optional) |
Image (image)
Displays an image from an external URL (e.g., CCTV snapshot, webcam) on the drawing.
| Input | id | Type | Default |
|---|---|---|---|
| Image URL | img_url | Text | placeholder: https://... |
| Label | img_label | Text (Optional) | — |
| Refresh Interval (sec) | img_refresh | Number | 0 (None) |
If 0, it loads once; if a value exists, it auto-refreshes at that interval.
View / Screen Mode
| Mode | Internal URL | Display |
|---|---|---|
| View | /canvas/view/{canvas_id} | Canvas + Left Menu + Top Header (Normal View) |
| Full Screen | /canvas/screen/{canvas_id} | Canvas only, filling the screen (No menu or header) |
View Mode (view.jsp)
Accessed via the ▶ View button on the canvas card. All widgets are displayed on the SVG drawing and updated with real-time data. Full screen mode can be toggled using the ⛶ Full Screen button at the top right.
Full Screen Mode (screen.jsp)
Used when projecting on field monitors, large displays, or dispatch information boards. Since the menu and header are removed, the canvas itself fills the entire screen.
In view mode, widgets are automatically updated with real-time data. If data is not arriving, widgets appear empty or gray.
Utilization Scenarios
| Scenario | Procedure |
|---|---|
| Real-time Temperature/Pressure on Process Flow | Upload SVG process flow → Place N tag value widgets (Tag ID auto-complete) |
| Line Operation Status at a Glance | Line floor plan SVG → Place status (asset_health) widgets for each equipment |
| Field Display Dashboard | Create canvas → Place widgets to fill screen → Open in full screen mode on field PC |
| CCTV + Operation Data Integrated Screen | Image widget (CCTV URL, 5s refresh) + Key KPI widgets placed together |
| OEE Monitoring Board | Line SVG → Combination of ISO widget (OEE) + status widget + gauge widget |
| Quality Inspection Status | Inspection line SVG → Data table widget + memo widget + KPI widget |
| Team-shared Dashboard | Edit canvas → Enable sharing + select security group → Auto-shared with group users |
Frequently Asked Questions
Q. Can I create a canvas without an SVG? A. You can, but it is meaningless as there are no coordinates to place widgets. We recommend uploading an SVG of a floor plan, piping diagram, or process flow first.
Q. Where can I get SVG files? A. Request them from the drawing manager at each site, or convert general drawings (PDF, Image) to SVG using external tools.
Q. I placed a widget incorrectly. A. Click the marker on the canvas to open the option menu for moving, deleting, or editing.
Q. Can I display the same tag in multiple locations? A. Yes, the same tag can be displayed in multiple widgets. For example, the temperature of one asset can be shown simultaneously using gauge, series, and KPI widgets.
Q. How do I share a canvas with other users? A. In the Sharing Settings panel of the edit screen, check Share this canvas with users in the security group and select a security group. Users in that group can find it in the "Shared" section of their canvas list.
Q. Widgets are displayed in gray in view mode. A. This happens when data for the tag or asset pointed to by the widget has not yet arrived. Check data arrival in the Dashboard screen or Connection Management.
Q. The screen locks after a while in full screen mode. A. This is due to the browser or OS screen saver/session expiration. For field displays, turn off the browser's auto-screen saver and disable the OS screen saver in system settings.
Q. I want to automatically update the gauge thresholds.
A. This can be automated using the flow_update_tag_alarm_band_numeric node in Flow.
Q. Which columns are displayed in the data table widget? A. Key tags registered to that asset are automatically displayed. Key tag mapping per asset can be configured in the asset tree of Factory Management.
Q. What happens if the image widget refresh interval is set too short? A. It may strain the external image server and increase network usage. We recommend setting it to 5 seconds or more.
Q. I want to back up a canvas or move it to another environment. A. Direct export from the screen is not provided. Keep the SVG separately, and contact the system administrator to move the canvas definition (widget mapping).
Related Screens
- Factory Management — Asset/Tag registration (targets for widgets)
- Data Point — Trend screens for tag data displayed by widgets
- ISO Data and Analysis — Original screens for ISO widget OEE/RAM/EMS charts
- Equipment — Linkage with asset cards
- Security Management — Shared security group settings
- Status Code Definition — Color mapping for status widgets