Skip to main content

Canvas

Table of Contents​

Overview​

The Canvas menu lets you place live widgets (tag values, charts, gauges, KPIs, memos, and more) on top of an SVG drawing to build an operations monitoring dashboard in SCADA style. Operators can position data widgets on a floor plan, piping diagram, or process diagram with a simple click — no graphics editing skills required.

ScreenInternal URLPurpose
List/canvas/indexCard grid of the canvases you created plus those shared with you
Edit/canvas/edit/{canvas_id}SVG upload + placement of the 11 widget types + sharing settings
View/canvas/view/{canvas_id}View the canvas in normal mode (with header and menu)
Full screen/canvas/screen/{canvas_id}Canvas only, full screen (for field monitors and displays)

Path: Left menu > Visualization > Canvas (internal URL /canvas/index)

Screen Layout — 3 Screens​

[목록]  →  [편집]  →  [표시 / 전체화면]
ScreenPrimary users
ListAll users
EditCanvas owner / users in the shared security group
View · Full screenAll authenticated users (if shared)

List Screen (/canvas/index)​

🎨 캔버스  [총 N 개]                            [➕ 새 캔버스] [↻]

Top Toolbar​

ControlAction
New CanvasRed + ➕ — addCanvas() — opens the new canvas creation form
RefreshRed + ↻
Total NSum of your canvases and those shared with you (canvas_total_count)

Left Sidebar (col-lg-2) — Filtering​

ControlWidthDescription
Site selector (filter_site)100%All sites + registered sites
Canvas name (search_name)100%placeholder: "Canvas name"
Description (search_desc)100%placeholder: "Description"
Search (filterList())100pxRefreshes the card list using the criteria above

Right (col-lg-10) — Card Grid​

┌─ 캔버스 목록 [N] · 검색된 캔버스 ───────────────────┐
│                                                  │
│  ┌─카드─┐ ┌─카드─┐ ┌─카드─┐ …                   │ ← canvas_list_view
│  │ 260px│ │ 260px│ │ 260px│                       │   (eq-card 260px 그리드)
│  └─────┘ └─────┘ └─────┘                          │
└──────────────────────────────────────────────────┘

Each card is a uniform 260px wide tile arranged automatically in the grid, and the entire card area is clickable (there is no separate "View" button — clicking the card opens the canvas view screen).

ItemDescription
TitleCanvas name
DescriptionCanvas description
SiteOwning site
OwnerRegistering user ID
ModifiedLast modification time
Typemy (created by me) / shared (shared with me) — distinguished by a colored badge
Card clickGoes to the view screen (/canvas/view)
Edit / DeleteAction buttons on the right of the card — operate independently of the card click (event bubbling is stopped)

Canvas cards combine two groups (my canvases _myList + canvases shared with me _shareList) in a single list. You can narrow the list with the site, name, and description filters; if the search returns no results, an empty-state screen (SVG illustration + message) is shown.

Edit Screen (/canvas/edit)​

The screen consists of a col-lg-3 property panel on the left and a col-lg-9 canvas preview on the right. The left side has two top-level tabs (Basic Information / Edit).

Left — Basic Information Tab​

Basic Information Panel​

FieldpathDescription
Canvas IDcanvas_idShown only in edit mode (mode='U') (read-only)
Site selectionsite_idSite name [description] options
Canvas name ⭐canvas_titleRequired
Descriptioncanvas_descFree text

Sharing Settings Panel​

FieldpathDescription
Enable sharingshare (checkbox)"Share this canvas with users in a security group."
Shared security groupshare_security_idSelect from the groups registered in Security Policy

Left — Edit Tab​

Upload the SVG drawing to display on the canvas, plus the palette of 11 widget types.

SVG Drawing Panel​

ControlAction
Choose file (svg_file_name)Click or use the folder icon — select a .svg file
Upload SVGupload_btn — applies the selected SVG to the canvas

The SVG is whatever drawing the operator wants to see — a floor plan, piping diagram, process diagram, and so on. If no SVG is present, the canvas area shows the message "Please upload an SVG drawing."

Widget Palette (11 Types)​

Select a widget type from the tab header at the top, fill in that tab's fields, then click Place; you can then click on the canvas to set the position (a click-mode notice appears at the top of the canvas on a yellow background).

TabIcondata-tabWidget
1🏷tag_valueTag value
2📈timeseriesSeries
3❤️asset_healthHealth
4📄documentDocument
5📊asset_timelineTimeline
6🌡️gaugeGauge
7🚦kpiKPI
8📌memoMemo
9🎖isoISO (OEE/RAM/EMS)
10📋data_tableData table
11🖼imageImage

Placed Widget List​

The list of placed widgets appears below the widget palette (placed_widgets_list, scrolls at a maximum of 330px). The widget count (widget_count) is shown in the header.

Empty state (when there are no widgets):

       ▦ (그리드 아이콘)
   배치된 위젯이 없습니다
상단 팔레트에서 위젯을 끌어서 캔버스에 배치하세요.

Form Submission (Bottom Left)​

ButtonAction
List (☰)goIndex() — back to the canvas list
Save (blue)save() — saves the canvas, widgets, and the entire tag_mapping_json

Right — Canvas Preview​

AreaDescription
Header🖥 "Canvas Preview"
Placement mode notice (placing_mode_indicator)Yellow-background notice shown while you are clicking to position a widget — "Click to place the tag" and a cancel link
Body (750px height, overflow: auto)Area where widget markers are shown on the SVG drawing

SVG Container (svg_container)​

  • If an SVG has been uploaded, it is rendered as <svg>
  • If empty, an empty-state message is shown:
       🖼 (칠판 아이콘)
    SVG 도면이 없습니다
좌측 [설정] 탭에서 SVG 도면을 업로드하세요.

Marker Layer (marker_layer)​

Markers float at the positions of the placed widgets; clicking a marker lets you edit the widget (move, delete, change options). Connecting lines between widgets are drawn with a separate library (leader-line).

The 11 Widgets in Detail​

Below are the input fields and behavior of each widget. All widgets are placed on the canvas on the right as markers and refresh with live data in view mode (/canvas/view).

Tag Value (tag_value)​

The simplest widget. Displays the current value of a single tag as a large number on the drawing.

FieldidType
Tag IDnew_tag_inputAutocomplete

Series (timeseries)​

FieldidType
Tag IDts_tag_inputAutocomplete
Periodts_periodLast 1 hour / 6 hours / 12 hours / 1 day (default)

A small time series chart is shown on the drawing so trends can be read at a glance.

Health (asset_health)​

Indicates the health status of an asset with a colored indicator.

FieldidType
Asset IDah_asset_inputAutocomplete (asset tree)

The colors follow the four levels defined in Status Codes (NORMAL/WARN/ERROR/UNKNOWN).

Document (document)​

Displays documents registered on an asset — drawings, manuals, QR codes, and so on — on the drawing.

FieldidType
Asset IDdoc_asset_inputAutocomplete

Timeline (asset_timeline)​

Shows the asset's run/stop and event timeline as a compact strip on the drawing.

FieldidType
Asset IDtl_asset_inputAutocomplete
Display rangetl_rangeLast 1 / 3 / 6 / 12 / 24 hours (default)

Gauge (gauge)​

Visualizes the current position of a tag value on a gauge.

FieldidTypeDefault
Tag IDgauge_tag_inputAutocomplete—
Minimumgauge_minNumber0
Maximumgauge_maxNumber100
Warning thresholdgauge_warnNumber70
Critical thresholdgauge_errorNumber90

KPI​

Displays a key indicator with a color grade (green / yellow / red).

FieldidTypeDefault
Tag IDkpi_tag_inputAutocomplete—
Labelkpi_labelText—
Normal maxkpi_normal_maxNumber50
Warning maxkpi_warn_maxNumber80

Values at or below the normal max are green, up to the warning max are yellow, and anything above is red.

Memo (memo)​

Write operator notes, labels, and annotations directly on the drawing.

FieldidTypeDefault
Textmemo_texttextarea (3 rows)—
Font sizememo_font_sizeNumber (8–48)14
Colormemo_colorColor picker#333333

ISO (OEE/RAM/EMS)​

Embeds ISO data and analysis charts in the drawing.

FieldidType
Sub-tabiso-sub-tabsOEE / RAM / EMS toggle
Asset IDiso_asset_inputAutocomplete

Depending on the selected sub-tab (oee_chart/ram_chart/ems_chart), the corresponding analysis chart for that asset is shown on the drawing. For metric definitions, see ISO Data and Analysis.

Data Table (data_table)​

Places several key tags of an asset on the drawing in table form.

FieldidType
Asset IDtbl_asset_inputAutocomplete
Labeltbl_labelText (optional)

Image (image)​

Displays an image from an external URL (for example, a CCTV snapshot or webcam) on the drawing.

FieldidTypeDefault
Image URLimg_urlTextplaceholder: https://...
Labelimg_labelText (optional)—
Refresh interval (sec)img_refreshNumber0 (none)

If 0, the image loads once; if a value is set, it refreshes automatically at that interval in seconds.

View / Full-screen (screen) Modes​

ModeInternal URLDisplay
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)​

Entered via the ▶ View button on a canvas card. All widgets are shown on the SVG drawing and refreshed with live data; the ⛶ full-screen button in the upper right switches to full-screen mode.

Full-screen Mode (screen.jsp)​

Use this when displaying the canvas on a field monitor, large display, or information board. There is no menu or header, so the canvas alone fills the screen.

In view mode, widgets refresh automatically with live data. If no data is coming in, widgets appear empty or grayed out.

Usage Scenarios​

ScenarioProcedure
Live temperature/pressure on a process diagramUpload the process diagram SVG → place N tag value widgets (tag ID autocomplete)
Line operating status at a glanceLine floor plan SVG → place an asset health (asset_health) widget for each piece of equipment
Dashboard for a field displayCreate a canvas → place widgets to fill the screen → open it in full-screen mode on the field PC
Combined CCTV + operations screenPlace an image widget (CCTV URL, 5-second refresh) together with key KPI widgets
OEE monitoring boardLine SVG → combine an ISO widget (OEE), asset health widgets, and gauge widgets
Quality inspection statusInspection line SVG → data table widget + memo widget + KPI widget
Shared dashboard per teamEdit the canvas → turn sharing ON and select a security group → automatically shared with users in that group

FAQ​

Q. Can I create a canvas without an SVG? A. You can, but there are no coordinates on which to place widgets, so it serves little purpose. We recommend uploading a floor plan, piping diagram, or process diagram SVG first.

Q. Where do I get SVG files? A. Ask the drawing owner at your site, or convert an ordinary drawing (PDF or image) to SVG with an external tool.

Q. I placed a widget in the wrong spot. A. Click the marker on the canvas to open its option menu, where you can move, delete, or edit it.

Q. Can the same tag be displayed in more than one place? A. Yes, the same tag can be shown by multiple widgets. For example, one asset's temperature can be shown simultaneously by 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 a security group and select a security group. Users in that group will find it under the "Shared with me" section of their own canvas list.

Q. A widget appears gray in view mode. A. This means no data has yet arrived for the tag or asset that the widget points to. Check data ingestion on the Dashboard screen or in Connection Management.

Q. I opened full-screen mode, but the screen locks after a while. A. This is caused by the browser's or OS's screen saver or session expiry. For a field display, disable the browser's automatic screen saver and also disable the OS screen saver in the system settings.

Q. I want the gauge thresholds to update automatically. A. You can automate this with the flow_update_tag_alarm_band_numeric node in Flow.

Q. Which columns appear in the data table widget? A. The key tags registered on that asset are shown automatically. Key tag mapping per asset can be configured in the asset tree of Factory Management.

Q. What happens if I set the image widget refresh interval too short? A. It can load the external image server and increase network usage. We recommend 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 itself separately; to move the canvas definition (widget mapping), contact your system administrator.