HMIコンテナ

HMIコンテナは、設備や機器の制御・監視を支える直感的なユーザーインターフェースを簡単に作成できます。
複雑な設定を必要とせず、Webブラウザを通じて高い汎用性と利便性を提供します。I/Oや制御データ、情報処理データとシームレスな連携を実現し、多様なデバイスや環境でライブモニタリングや操作を可能にします。

< RT-edge全体ブロック図 >

< HMIコンテナ構成図 >

１. ビルド不要なノーコード設計

Visual Studio 等のツールは不要です。配置するタイルの設定を行うのみで、シンプルなUIを短期間で作成できます。

２. ライブモニタリング、データ操作

RT-edgeのタグを使用することで、I/Oや制御データ、情報処理データのライブモニタリングやデータ操作が可能です。

３. クロスプラットフォーム対応

作成したHMIはWebブラウザで動作するため、遠隔地での表示、操作をPCやスマートフォン、タブレットなど多様なデバイスで利用できます。

動作環境/開発環境

動作プラットフォーム	工業用PC
基本ソフト	Windows 10 以降
	.NET 8.0 Runtime環境
	RT-edge バージョン 3.6.0以降
開発環境※１	Visual Studio 2022
	ASP.net Core Blazor
	.NET 8.0
その他	RT-edge 3.6.0 動作環境の則る

※1 : お客様自身でタイルを作成する場合必要

実行環境

実行環境(サーバー)	IIS 10以降
実行環境（クライアント)	[Webブラウザ] Edge, Chrome、Safari(iOS)等※2
実行環境（クライアント)	[表示デバイス] PC、タブレット、スマートフォン

※2 : ブラウザがJavaScriptを有効にしていること。

WebSocketsをサポートしていること

１. タイル配置とカスタマイズ

HMIコンテナでは、ボタン、ランプ、チャート、ログ表示等の「タイル」を自由に配置して画面を作成します。以下に標準で用意されているタイルの一例を紹介します。

No	タイル名	種類	内容
1	ラベル	固定ラベル	指定した文字列を表示
1	ラベル	タグ値参照	タグの値を参照表示
2	ボタン	ON(1)設定	必ずON(1)を設定
		ON(1)/OFF(0)設定	OFF時はON、ON時はOFFを設定
		リンク	指定のページへ移行
3	ランプ	-	ON時は明色を、OFF時は暗色を表示
4	チャート	折れ線グラフ	タグの値を折れ線グラフとして表示
4	チャート	棒グラフ	タグの値を棒グラフとして表示
5	ログ表示	テーブル形式	テーブル形式でタグの値を表示
6	インナーフレーム	-	タグ、または固定アドレスのページ情報・画像を表示
7	テキストボックス	シングル	テキストボックス＋設定ボタン形式指定のタグへ書き込み可能

(その他順次対応予定)

配置はタイル毎に用意されているxmlファイルで配置場所を指定します。
配置場所は画面上からの位置座標(top:px) 左からの位置座標(left:px)で指定します。

例）

<HMI_LabelTagBlack Tag="Temp_01" Top="120px" Left="90px"

FontSize="20px" Width="100px" Height="40px" />

２. データバインディング

設定値としてタグ名を指定するだけで、I/Oや制御データ、情報処理データと簡単にリンクすることができます。

例）

<HMI_LabelTagBlack Tag="Temp_01" Top="120px" Left="90px"

FontSize="20px" Width="100px" Height="40px" />

３. Webベースでのアクセス

作成したHMIはWebブラウザで動作し、PC、スマートフォン、タブレットなど多様な機器から遠隔地でもアクセス可能です。
専用アプリを必要とせず、柔軟で汎用的な環境で利用できます。

４. アクセス管理

ユーザ認証機能を使用することができ、セキュリティも万全です。

<ログイン画面イメージ>

以下の画面はHMIコンテナのタイルを使用して作成した画面をブラウザに表示したイメージ図です。

<サンプル画面イメージ>

・使用タイル

No	タイル名	種類
①	ラベル	固定
②	ラベル	タグ値参照
③	ボタン	ON(1)/OFF(0)設定
④	チャート	折れ線グラフ
⑤	ログ表示	テーブル形式
⑥	インナーフレーム	-
⑦	テキストボックス	-

・その他設定項目

No	設定項目名	値
①	背景色<BackgroundColor>	#D7EEFF(水色)