メインコンテンツまでスキップ

キャンバス

🎬 Open a canvas dashboard · 38초 · 2026.08 기준 화면

目次​

キャンバス一覧画面

概要​

キャンバスメニューは、SVG図面の上にリアルタイムウィジェット（タグ値・チャート・ゲージ・KPI・メモなど）を配置して、運用監視用ダッシュボード（SCADA形式）を作成する画面です。運用者はグラフィック編集技術がなくても、平面図・配管図・工程図の上にクリック操作だけでデータ表示ウィジェットを配置できます。

画面内部URL用途
一覧/canvas/index作成したキャンバス + 共有されたキャンバスのカードグリッド
編集/canvas/edit/{canvas_id}SVGアップロード + ウィジェット11種の配置 + 共有設定
表示/canvas/view/{canvas_id}キャンバスを一般モードで照会（ヘッダー・メニューを表示）
全画面/canvas/screen/{canvas_id}キャンバスのみを全画面表示（現場モニター・ディスプレイ用）

パス: 左メニュー > Visualization > キャンバス (内部URL /canvas/index)

画面構成 — 3つの画面​

[목록]  →  [편집]  →  [표시 / 전체화면]
画面主なユーザー
一覧全ユーザー
編集キャンバス所有者 / 共有セキュリティグループのユーザー
表示・全画面全認証ユーザー (共有されている場合)

一覧画面 (/canvas/index)​

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

上部ツール​

コントロール動作
新規キャンバス赤 + ➕ — addCanvas() — 新規キャンバス作成フォームを開く
更新赤 + ↻
合計 N 個自キャンバス + 共有されたキャンバスの合計 (canvas_total_count)

左サイドバー (col-lg-2) — フィルタリング​

コントロール幅説明
サイトセレクター (filter_site)100%登録済みサイト。常に1つが選択されています
キャンバス名 (search_name)100%プレースホルダー: "キャンバス名"
説明 (search_desc)100%プレースホルダー: "説明"
検索 (filterList())100px上記条件でカード一覧を更新

右側 (col-lg-10) — カードグリッド​

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

各カードは 260px幅 の均一なサイズで格子状に自動整列され、カード全領域がクリック可能です（設定の別途「表示」ボタンはなく、カードをクリックするとキャンバス表示画面へ移動します）。

項目説明
タイトルキャンバス名
説明キャンバス説明
サイト所属サイト
所有者登録ユーザーID
修正日最終修正時刻
タイプmy (自作成) / shared (共有) — 色付きバッジで区別
カードクリック表示画面(/canvas/view)へ移動
編集 / 削除カード右側のアクションボタン — カードクリックとは別に動作（イベントバブリング停止）

キャンバスカードは2つのグループ（自キャンバス _myList + 共有されたキャンバス _shareList）を統合して表示します。サイト・名前・説明フィルタで絞り込みが可能で、検索結果が0件の場合は案内用の空状態画面（SVGイラスト + メッセージ）が表示されます。

編集画面 (/canvas/edit)​

画面は左側の col-lg-3 属性パネル + 右側の col-lg-9 キャンバスプレビューで構成されます。左側には2つの上位タブ（基本情報 / 編集）があります。

左側 — 基本情報タブ​

基本情報パネル​

入力path説明
キャンバスIDcanvas_id修正モード(mode='U')でのみ表示 (読み取り専用)
サイト選択site_idサイト名 [説明] オプション
キャンバス名 ⭐canvas_title必須入力
説明canvas_desc自由テキスト

共有設定パネル​

入力path説明
共有使用share (チェックボックス)「このキャンバスをセキュリティグループのユーザーと共有します」
共有セキュリティグループshare_security_idセキュリティポリシー に登録されたグループから選択

左側 — 編集タブ​

キャンバスに表示するSVG図面のアップロード + ウィジェットパレット11種。

SVG図面パネル​

コントロール動作
ファイル選択 (svg_file_name)クリックまたはフォルダアイコン — .svg ファイル選択
SVGアップロードupload_btn — 選択したSVGをキャンバスに適用

SVGは平面図・配管図・工程図など、運用者が確認したい図面です。SVGがない場合、キャンバス領域に「SVG図面をアップロードしてください」という案内が表示されます。

ウィジェットパレット11種​

上部タブヘッダーでウィジェットの種類を選択し、各タブの入力を埋めてから 配置 ボタンをクリックすると、キャンバス上のクリックで位置を指定できます（クリックモードの案内がキャンバス上部に黄色の背景で表示されます）。

タブアイコンdata-tabウィジェット
1🏷tag_valueタグ値
2📈timeseriesシリーズ
3❤️asset_health状態
4📄documentドキュメント
5📊asset_timelineタイムライン
6🌡️gaugeゲージ
7🚦kpiKPI
8📌memoメモ
9🎖isoISO (OEE/RAM/EMS)
10📋data_tableデータテーブル
11🖼image画像

配置済みウィジェット一覧​

ウィジェットパレット下部に配置されたウィジェット一覧が表示されます（placed_widgets_list, 最大330pxスクロール）。ヘッダーにウィジェット数(widget_count)が併記されます。

空状態 (ウィジェット0個のとき):

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

フォーム送信 (左下)​

ボタン動作
一覧 (☰)goIndex() — キャンバス一覧へ
保存 (青)save() — キャンバス + ウィジェット + tag_mapping_json を一括保存

右側 — キャンバスプレビュー​

領域説明
ヘッダー🖥 「キャンバスプレビュー」
配置モード案内 (placing_mode_indicator)クリックでウィジェット位置を指定している時の黄色背景の案内 — 「クリックしてタグを配置してください」・キャンセルリンク
本文 (750px高さ, overflow: auto)SVG図面の上にウィジェットマーカーが表示される領域

SVGコンテナ (svg_container)​

  • SVGがアップロードされていれば <svg> でレンダリング
  • 空の場合は空状態案内を表示:
       🖼 (칠판 아이콘)
    SVG 도면이 없습니다
좌측 [설정] 탭에서 SVG 도면을 업로드하세요.

マーカーレイヤー (marker_layer)​

配置したウィジェット位置にマーカーが浮いており、マーカーをクリックするとウィジェット編集（移動・削除・オプション変更）が可能です。ウィジェット間の接続線は別途ライブラリ(leader-line)で可視化されます。

ウィジェット11種について​

各ウィジェットの入力フィールドと動作を整理します。すべてのウィジェットは右側キャンバスにマーカーとして配置され、表示モード(/canvas/view)でリアルタイムデータに更新されます。

タグ値 (tag_value)​

最も単純なウィジェット。1つのタグの現在値を図面の上に大きな数字で表示します。

入力id形式
タグIDnew_tag_inputオートコンプリート

シリーズ (timeseries)​

入力id形式
タグIDts_tag_inputオートコンプリート
期間ts_period直近1時間/6時間/12時間/1日(デフォルト)

小さな時系列チャートが図面の上に表示され、変化傾向を一目で確認できます。

状態 (asset_health)​

資産の健康状態を色点灯で表示します。

入力id形式
エセットIDah_asset_inputオートコンプリート (資産ツリー)

色は 状態コード の4段階(NORMAL/WARN/ERROR/UNKNOWN)。

ドキュメント (document)​

資産に登録された図面・マニュアル・QRコードなどのドキュメントを図面の上に表示します。

入力id形式
エセットIDdoc_asset_inputオートコンプリート

タイムライン (asset_timeline)​

資産の稼働/停止・イベントタイムラインを図面の上に小さく表示します。

入力id形式
エセットIDtl_asset_inputオートコンプリート
表示範囲tl_range直近1・3・6・12・24時間(デフォルト)

ゲージ (gauge)​

タグ値の現在位置をゲージで可視化します。

入力id形式デフォルト値
タグIDgauge_tag_inputオートコンプリート—
最小値gauge_min数値0
最大値gauge_max数値100
警告閾値gauge_warn数値70
危険閾値gauge_error数値90

KPI​

重要指標を色等級（緑/黄/赤）で表示します。

入力id形式デフォルト値
タグIDkpi_tag_inputオートコンプリート—
ラベルkpi_labelテキスト—
正常最大kpi_normal_max数値50
警告最大kpi_warn_max数値80

値が正常最大以下なら緑、警告最大までなら黄、それ以上は赤。

メモ (memo)​

運用者案内文・ラベル・注釈を図面の上に直接作成します。

入力id形式デフォルト値
テキストmemo_texttextarea (3行)—
フォントサイズmemo_font_size数値 (8~48)14
色memo_colorカラーピッカー#333333

ISO (OEE/RAM/EMS)​

ISOデータおよび分析チャートを図面に埋め込みます。

入力id形式
下位タブiso-sub-tabsOEE / RAM / EMS トグル
エセットIDiso_asset_inputオートコンプリート

選択した下位タブ(oee_chart/ram_chart/ems_chart)に応じて、その資産の該当分析チャートが図面の上に表示されます。詳細な指標定義は ISOデータおよび分析 を参照。

データテーブル (data_table)​

資産の重要タグ複数を表形式で図面の上に配置します。

入力id形式
エセットIDtbl_asset_inputオートコンプリート
ラベルtbl_labelテキスト (任意)

画像 (image)​

外部URLの画像（例：CCTVスナップショット・ウェブカメラ）を図面の上に表示します。

入力id形式デフォルト値
画像URLimg_urlテキストプレースホルダー: https://...
ラベルimg_labelテキスト (任意)—
更新間隔(秒)img_refresh数値0 (なし)

0 の場合は一度だけロードし、値がある場合はその秒間隔で自動更新。

表示(view) / 全画面(screen) モード​

モード内部URL表示
表示/canvas/view/{canvas_id}キャンバス + 左メニュー + 上部ヘッダー (一般表示)
全画面/canvas/screen/{canvas_id}キャンバスのみが画面一杯 (メニュー・ヘッダーなし)

表示モード (view.jsp)​

キャンバスカードの ▶ 表示ボタンで進入します。SVG図面の上にすべてのウィジェットがリアルタイムデータで更新されて表示され、右上の ⛶ 全画面ボタンで全画面モードに切り替え可能です。

全画面モード (screen.jsp)​

現場モニター・大型ディスプレイ・派遣案内板などに表示する際に使用します。メニュー・ヘッダーがなく、キャンバス自体が画面いっぱいに広がります。

表示モードではウィジェットが自動的にリアルタイムデータに更新されます。データが入力を受けていない場合、ウィジェットは空または灰色で表示されます。

活用シナリオ​

シナリオ手順
工程図の上にリアルタイム温度/圧力表示SVG工程図アップロード → タグ値ウィジェットをN個配置 (タグIDオートコンプリート)
ライン稼働状態を一目で把握ライン平面図SVG → 資産状態(asset_health)ウィジェットを設備別に配置
現場ディスプレイ用ダッシュボードキャンバス作成 → 画面いっぱいにウィジェット配置 → 現場PCで全画面モードで表示
CCTV + 運用データ統合画面画像ウィジェット(CCTV URL, 5秒更新) + 重要KPIウィジェットを併せて配置
OEEモニタリングボードラインSVG → ISOウィジェット(OEE) + 資産状態ウィジェット + ゲージウィジェットを組み合わせ
品質検査現状検査ラインSVG → データテーブルウィジェット + メモウィジェット + KPIウィジェット
チーム別共有ダッシュボードキャンバス編集 → 共有使用ON + セキュリティグループ選択 → 当該グループユーザーへ自動共有

よくある質問​

Q. SVGがなくてもキャンバスを作成できますか？ A. 作成は可能ですが、ウィジェットを配置する座標がないため意味がありません。平面図・配管図・工程図のSVGを先にアップロードされることを推奨します。

Q. SVGファイルはどこで入手しますか？ A. 各サイトの図面担当者に依頼するか、一般的な図面(PDF・画像)を外部ツールでSVGに変換して使用できます。

Q. ウィジェットを誤って配置しました。 A. キャンバス上のマーカーをクリックするとオプションメニューが開き、移動・削除・編集が可能です。

Q. 同一タグを複数の位置に表示してもいいですか？ A. はい、同じタグを複数のウィジェットで表示できます。例えば、1つの資産の温度をゲージ・シリーズ・KPIウィジェットの3種類で同時に表示することが可能です。

Q. キャンバスを他のユーザーと共有するには？ A. 編集画面の 共有設定 パネルで このキャンバスをセキュリティグループのユーザーと共有します にチェックを入れ、セキュリティグループを選択してください。そのグループのユーザーは、自身のキャンバス一覧の「共有された」領域で確認できます。

Q. 表示モードでウィジェットが灰色で表示されます。 A. そのウィジェットが指すタグ・資産のデータがまだ入力されていない場合です。ダッシュボード 画面や 接続管理 でデータの入力状況を確認してください。

Q. 全画面モードで表示したが、一定時間後に画面がロックされます。 A. ブラウザまたはOSのスクリーンセーバー/セッションタイムアウトによるものです。現場ディスプレイの場合は、ブラウザの自動スクリーンセーバーをオフにし、システム設定でOSのスクリーンセーバーも無効化してください。

Q. ゲージの閾値を自動的に更新したいです。 A. フロー の flow_update_tag_alarm_band_numeric ノードを使用して自動化できます。

Q. データテーブルウィジェットにはどのカラムが表示されますか？ A. その資産に登録された重要タグが自動的に表示されます。資産別の重要タグマッピングは ファクトリ管理 の資産ツリーで設定できます。

Q. 画像ウィジェットの更新間隔を短く設定しすぎるとどうなりますか？ A. 外部画像サーバーに負荷がかかり、ネットワーク使用量が増加します。5秒以上に設定されることを推奨します。

Q. キャンバスをバックアップしたり、別の環境へ移動させたいです。 A. 画面からの直接エクスポートは提供されていません。SVG自体は別途保管し、キャンバス定義（ウィジェットマッピング）を移行させる場合は、システム管理者にお問い合わせください。

関連画面​