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

キャンバス

目次​

概要​

キャンバスメニューは、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%全サイト + 登録済みサイト
キャンバス名 (search_name)100%placeholder: 「キャンバス名」
説明 (search_desc)100%placeholder: 「説明」
検索 (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テキストplaceholder: 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. はい、同じタグを複数のウィジェットで表示できます。例えば、ある資産の温度をゲージ・シリーズ・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. 画面から直接のexportは提供されていません。SVG自体は別途保管し、キャンバス定義（ウィジェットマッピング）を移行する場合はシステム管理者にお問い合わせください。

関連画面​