1.

外接USB網線接到裝置上,至電腦的設定,選擇網路與網際網路,點擊進階網路設定

Mobirise

2.

找到外接USB網線新增的乙太網路按一下向下符號,再到更多介面卡選項,按編輯,選擇網際網路通訊協定第4版(TCP/IPv4),再點選內容

Mobirise

3.

選擇使用下列的IP位置,再輸入與系統主機(192.168.100.1 預設
IP)同網段但不可重複的IP,按下確定即設定完成

Mobirise

4.

設定完成後開啟網頁瀏覽器(建議開無痕模式)IP 192.168.100.1連線&登入畫面預設帳號密碼都是admin

Mobirise

5.

到Device Librany中的Device Setup,點擊右上角有一個藍色的Create

Mobirise

6.

新增一個用TCP連接的SEN-1201TH裝置設定
(1)Device Name
(2)Device Model No.
(3)Device I/O type
(4)Device Timer
(5)Icon
(6)Device Active

Mobirise

7.

(7)Device Action
建立讀取裝置的30001-30006
點位的動作
Param1代表
點位位置
Param2代表
點位大小

Mobirise

8.

到Graphic Control的 Allocate Device新增SEN-1201TH裝置,在上方列表中找到裝置按左鍵2下加入下方的使用裝置圖

Mobirise

9.

按SEN-1201TH的圖片點選右鍵選Configuration
設定
(1)Device Name
(2)Modbus TCP
輸入連接裝置的IP
(3)Device Status

Mobirise

10.

按SEN-1201TH的圖片點選右鍵選擇Action View設定按右上角的+號,
新增3個Text(溫度、濕度、露點溫度),新增時按最右邊的
<符號,跳出Tag Name可以設定,當虛擬變數使用

Mobirise

11.

(1)到User Interface查看裝置狀態,發現數值像亂碼,要到相對應的協定的讀取方式更新程式碼

(2)到Device Librany中的Device Protocol 

Mobirise

12.

Protocol List利用下拉式選單找到modbus_tcp_defaultread_input_registers"p2"下方第4行的}加上,符號,按Enter鍵換行輸入
"data_code": "32float",
"byteorder": "big",
"wordorder": "little",
"output_expression":
"'{:.2f}'.format
(float($[0]))"
按右下角的Save保存,跳出save success
即成功 

Mobirise

13.

到System的System Setting 點選最上方的 App Reboot,重啟應用程式,因有修改Protocol需要重新啟動,大約要等3-5分鐘 

Mobirise

14.

回到User Interface查看裝置,看數值是否正常顯示

Mobirise

15.

再回到Graphic Control的 Allocate Device新增內建的MQTT裝置,在上方列表System MQTT Broker找到按左鍵2下加入下方的使用裝置圖表

Mobirise

16.

按MQTT的圖片點選右鍵選擇Configuration
設定
(1)Device Name (2)MQTT Device Topic
(3)Device Status


Mobirise

17.

到Device Librany中的Edit Protocol
在Protocol List利用下拉式選單找到
sys_mqtt_broker
複製帳號密碼

Mobirise

18.

打開MQTT Explorer
輸入控制器IP、帳號密碼按CONNECT
進行連線

Mobirise

19.

連線成功,就可以看到IP的標籤

Mobirise

20.

到Event&Action中的Edit,點擊右上角有一個藍色的Create,設定
(1)Event Name
(2)Event Status
(3)Event Condition
(4)Actions
利用裝置點位觸發將數據發給MQTT
param1、2代表推送的內容1、2有多個可以用| 符號隔開

Mobirise

21.

回到MQTT Explorer即可看到裝置的數據

Mobirise

AI Website Generator