![見出し画像](https://assets.st-note.com/production/uploads/images/98006559/rectangle_large_type_2_6f7add1a84c094df747b3d2a138651c6.jpeg?width=1200)
温度監視システムの構築(大型ディスプレイ表示) 番外編その1 後編
12.まず初めに、RGP-Designerの「ファイル」⇒「新規作成」をクリックします。
![](https://assets.st-note.com/img/1676354864431-LkQnxxKNou.png)
下記のようにプロジェクト名称等を入力し「OK」をクリックします。
![](https://assets.st-note.com/img/1676354897696-D8GaXJ2hQf.png?width=1200)
13.① 次にパソコンとRGP30が接続されているか確認します。
「ツール」⇒「プロジェクトの照合」をクリックします。
![](https://assets.st-note.com/img/1676354942201-OO6vklJ800.png)
下画像のようにRGP30の「IPアドレス」「ポート」(ポートは既定値30559のまま)
「ユーザー」「パスワード」を入力し「照合」をクリックします。
![](https://assets.st-note.com/img/1676354985050-G6QmrfEGn7.png)
接続成功すると下記画面が出てきます。
![](https://assets.st-note.com/img/1676355019105-ovWOGpXAWr.png)
また、接続失敗すると下記画面が出てきます。
![](https://assets.st-note.com/img/1676355045591-lz9qrHqRU0.png?width=1200)
14.次に接続されているスレーブの設定をおこないます。
今回はウェブロガー2 DL30がスレーブとして接続されています。
「スレーブ」クリック⇒「S1:(n/a)」ダブルクリックします。
![](https://assets.st-note.com/img/1676355103438-zHdc7iBgbw.png)
15.① 「DL30(エムシステム技研)Modbus/TCP」を選択、ウェブロガー2 DL30のIPアドレスとPORT番号を入力し「OK」をクリックします。
![](https://assets.st-note.com/img/1676355148184-GtOUgZmoMF.png?width=1200)
16.① 次に今回の画面で使用する画像を登録していきます。
「ツール」⇒「ピクチャテーブル設定」をクリックします。
![](https://assets.st-note.com/img/1676355187943-58GHS6PTee.png)
下画像の赤枠部分をダブルクリックします。
![](https://assets.st-note.com/img/1676355219575-3N5bJRPsJq.png?width=1200)
「開く」をクリックします。
![](https://assets.st-note.com/img/1676355252898-frkBtLZJTA.png)
使いたい画像を選んで「開く」をクリックします。
![](https://assets.st-note.com/img/1676355280483-ywF7guHdhh.png?width=1200)
任意で「コメント」を入力し、「OK」をクリックします。
![](https://assets.st-note.com/img/1676355316465-LVcv0AFzfF.png)
「OK」をクリック。
![](https://assets.st-note.com/img/1676355341659-SC9VlNgJcD.png?width=1200)
17.次に画面のベースを作成していきます。
「画面」で右クリック⇒「追加」をクリックします。
![](https://assets.st-note.com/img/1676355385771-6TNlpk2lFd.png)
任意の「画面名称」を入力し、「ベース画面」にチェックを入れ、「OK」をクリックします。
![](https://assets.st-note.com/img/1676355405435-rMgAPawJPM.png)
18.「プロパティ」設定をおこないます。
(画面右側のプロパティーより設定をおこないます。)
今回は以下のように設定しました。
![](https://assets.st-note.com/img/1676355470652-uRQOEd7GXm.png?width=1200)
19.次に「パーツボックス」をクリックします。
![](https://assets.st-note.com/img/1676355506233-dpJ8VYvGI9.png)
20.「ラベル」をクリックします。
![](https://assets.st-note.com/img/1676355542378-iMUzZMxfJ2.png)
21.画面上部にラベル部品をクリックして作成します。
![](https://assets.st-note.com/img/1676355575178-cBZPj6m2ic.png?width=1200)
ラベルのプロパティを下画像のように入力します。
![](https://assets.st-note.com/img/1676355599794-BovpmzX0tp.png)
22.次にパーツボックスから「ピクチャ」をクリックします。
![](https://assets.st-note.com/img/1676355638116-ZjYmjwOKhA.png)
23.下画像のようにピクチャ部品をクリックして作成します。
![](https://assets.st-note.com/img/1676355666579-rMtUujtAVj.png?width=1200)
24.ピクチャのプロパティの赤枠部分をクリックします。
![](https://assets.st-note.com/img/1676355697308-yKXdUs5j45.png)
25.「ピクチャテーブル」⇒使用したい画像をクリック⇒「OK」クリックします。
![](https://assets.st-note.com/img/1676355734623-D9YF5y4DwU.png)
26.次にパーツボックスから「数値表示」をクリックします。
![](https://assets.st-note.com/img/1676355792627-08GsFWzJEB.png)
27.下画像のように数値表示部品をクリックして作成します。
![](https://assets.st-note.com/img/1676355828461-Fxd4zwja18.png?width=1200)
28.数値表示のプロパティの赤枠部分をクリックします。
![](https://assets.st-note.com/img/1676355867327-Vk689bxJjQ.png)
29.下画像のように温度調節器の現在値が割り付けてある機器情報を入力し「OK」クリックします。
![](https://assets.st-note.com/img/1676355912458-yvUHMDueua.png)
30.引き続きプロパティを下記画像のように編集します。
![](https://assets.st-note.com/img/1676355946098-pF2qOtYfpx.png)
31.次にパーツボックスから「数値表示」をクリックします。
![](https://assets.st-note.com/img/1676355982060-Q0wWCDi4vQ.png)
32.下画像のように数値表示部品をクリックして作成します。
![](https://assets.st-note.com/img/1676356017173-aHKHLBVZDb.png?width=1200)
33.数値表示のプロパティの赤枠部分をクリックします。
![](https://assets.st-note.com/img/1676356040817-fAtfuzFiez.png)
34.下画像のように温度調節器の設定値が割り付けてある機器情報を入力し「OK」クリックします。
![](https://assets.st-note.com/img/1676356082289-oMFNeUKslC.png)
35.引き続きプロパティを下記画像のように編集します。
![](https://assets.st-note.com/img/1676356115385-NvKXOBrCd9.png)
36.次にパーツボックスから「ラベル」をクリックします。
![](https://assets.st-note.com/img/1676356155476-RzJAEWYk8q.png)
37.下画像のようにラベル部品をクリックして作成します。
![](https://assets.st-note.com/img/1676356189537-XZpgsYdZJO.png?width=1200)
38.ラベルのプロパティを下画像のように入力します。
![](https://assets.st-note.com/img/1676356218563-vy8zUNec7k.png)
39.引き続きパーツボックスから「ラベル」をクリックします。
![](https://assets.st-note.com/img/1676356264176-yBcMIUGAl1.png)
40.下画像のようにラベル部品をクリックして作成します。
![](https://assets.st-note.com/img/1676356298475-qi5E00GnUu.png?width=1200)
41.ラベルのプロパティを下画像のように入力します。
![](https://assets.st-note.com/img/1676356328938-IMdsNxgrAn.png)
42.次に部品をコピーしたいと思います。
下記画像のようにコピーしたい部品を範囲選択します。
![](https://assets.st-note.com/img/1676356392975-VExEHkuNFM.png?width=1200)
43.範囲選択出来たらキーボードの「Ctrl」+「C」を押して部品コピーします。
44.次にキーボードの「Ctrl]+「V」を押して部品を貼り付けします。
![](https://assets.st-note.com/img/1676356550434-rZcvupugii.png?width=1200)
45.以上のようにして必要な数だけ部品をコピー&ペイスト(貼り付け)していきます。そしてラベル等を新規で追加し下記画面のように、画面全体の部品配置バランスを整えます。
![](https://assets.st-note.com/img/1676356600037-b8H53f2sCU.png?width=1200)
46.以上の画面まで作成出来たら、次にパーツボックスから「サブ画面表示枠」をクリックします。
![](https://assets.st-note.com/img/1676356706959-JshgjGZA3u.png)
47.下画像のようにサブ画面表示枠部品をクリックして作成します。
![](https://assets.st-note.com/img/1676356736953-xCe3L3oSo9.png?width=1200)
48.サブ画面表示枠のプロパティを下画像のように入力します。
![](https://assets.st-note.com/img/1676356772417-qBaNKJfgnA.png?width=1200)
49.次に、パーツボックスから「ベース画面切替」をクリックします。
![](https://assets.st-note.com/img/1676356804064-oyBp5rOcxz.png)
50.下画像のようにベース画面切替部品をクリックして作成します。
![](https://assets.st-note.com/img/1676356829613-rUZvN8WLa1.png?width=1200)
51.次に画面切替先のベースを作成していきます。
今回は切替先の画面が先ほど作成した画面と同じような画面になりますので
画面を流用したいと思います。
下画像のように「温度調節器_監視画面1」で右クリック⇒「コピー」をクリックします。
![](https://assets.st-note.com/img/1676356893815-uoi9kuYC1J.png)
52.「画面」を右クリック⇒「貼り付け」をクリックします。
![](https://assets.st-note.com/img/1676356916400-fIgaJEJYaQ.png)
![](https://assets.st-note.com/img/1676356933326-tmVG2d4qN8.png?width=1200)
53.コピーした画面のプロパティを下記画像のように編集します。
![](https://assets.st-note.com/img/1676356975039-wcsKQmkmxz.png)
54.次に先ほど作成した「ベース画面切替」のプロパティを下画像のように入力します。
![](https://assets.st-note.com/img/1676357059643-41KNi4O1NH.png)
以上で「温度調節器_監視画面1」画面と「温度調節器_監視画面2」画面の画面切替が可能となります。
55.続きまして「温度調節器_監視画面2」画面を作成していきます。
基本的な操作は今まで記載した内容で作成が出来ると思います。
56.「温度調節器_監視画面2」画面の下記画像部品をクリックします。
![](https://assets.st-note.com/img/1676357150957-aYPOnoEWch.png?width=1200)
57.ラベルのプロパティを下画像のように入力します。
![](https://assets.st-note.com/img/1676357174250-LQUbwkhDAR.png)
以上のように部品の名称等を変更し「温度調節器_監視画面2」画面を作成します。
58.全ての画面作成が出来たら「ツール」⇒「プロジェクト転送」をクリックします。
![](https://assets.st-note.com/img/1676357211069-oagWeFv4ku.png)
60.RGP30の「IPアドレス」「ポート」「ユーザー」「パスワード」を下記画像のように入力し「OK」をクリックします。
![](https://assets.st-note.com/img/1676357253099-9zuKuNWP46.png)
下記画像のように「転送完了」となればOKです。
![](https://assets.st-note.com/img/1676357280969-LoEjdumSYR.png)
61.転送が出来たら次に「Google Chrome 」や「Microsoft Edge」等のブラウザーを立上げて頂き、ブラウザーのアドレスバーに下記URLを入力し「Enter」キーを押してください。
![](https://assets.st-note.com/img/1676357340222-IpzPxMMGpI.png?width=1200)
すると下記のように作成した画面をブラウザーで確認する事が出来ます。
![](https://assets.st-note.com/img/1676357373109-ijlAmp0FDy.png?width=1200)
![](https://assets.st-note.com/img/1676357378829-0zBFvT9CzV.png?width=1200)
以上が手順になります。
他詳細操作を確認したい場合はメーカーが用意している「RGP30専用作画ソフト 取扱説明書」を参照ください。
(URL:https://www.m-system.co.jp/mssjapanese/PDF/NM/R/nmrgp30_b.pdf)