ICDT Web HMI 新手快速入門

🎥 影片教學資源

不想看文字？元米科技提供了完整的 YouTube 操作示範影片清單，帶您一步步完成設定。

關於 ICDT Web HMI

ICDT Web HMI 是一套專為現代物聯網需求設計的**全中文化網頁監控軟體**。它打破了傳統圖控軟體的限制，讓您不需要撰寫繁雜的程式碼，即可建構專業的監控系統。

軟體安裝

• 至元米科技官網下載安裝檔，執行 `setup.exe`。
• 若您是初學者，建議先使用軟體內建的網頁伺服器，無需額外安裝 AppServ。
• **防火牆通知：** 首次啟動時，Windows 會跳出防火牆安全性警訊，請務必勾選 **「允許存取」**，否則其他電腦將無法連線。

帳號管理與安全性

在「工具」選單中，您可以管理使用者權限：

• 新增使用者：可設定多組帳號供不同人員使用。
• 權限分級：區分「管理員」(可修改畫面) 與「操作員」(僅能瀏覽與操作)。
• 登入/登出：在執行模式下，可透過登入功能切換使用者。

圖控系統的核心在於數據採集，請依據您的設備類型選擇設定方式。

類型 A：Modbus 設備 (PLC、電表)

• **選擇驅動：** 在「設備編輯」中選擇 `Modbus RTU Master` (序列埠) 或 `Modbus TCP Client` (網路)。
• **新增器件：** 輸入設備的站號 (Slave ID/Unit ID)。
• **設定點位：** 對應設備的 Address (如 40001)，並綁定到畫面上的元件。

類型 B：BACnet 設備 (空調控制器)

• **新增網路：** 在「設備編輯」中新增 `BACnet/IP 網路`。
• **設備掃描：** 利用內建的 **Scan (Who-Is)** 功能，自動搜尋區網內的 BACnet 設備。
• **加入設備：** 搜尋到設備後，直接將其加入專案，系統會自動辨識 Device ID。
• **讀取物件：** 支援標準 Analog Input/Output/Value 等物件讀寫。

透過拖拉式介面，直覺地設計您的 UI。

• **建立專案：** 點選「新增專案」，建議存檔於 `C:\AppServ\www` 或文件夾下的 `www` 目錄。
• **使用工具箱：** 右側工具箱提供按鈕、文字方塊、圖片、指針儀表等豐富元件。
• **綁定變數：** 點擊畫面上的元件，設定其「連結」屬性，選擇剛才建立的設備點位，即可實現數據顯示與控制。

一切就緒，來看看成果吧！

• 儲存專案：記得先存檔。
• 開啟瀏覽器：在瀏覽器網址列輸入 `http://127.0.0.1`(若有修改 Port 則需加上，如 :8080)。
• 手機瀏覽：確認手機與電腦在同一 WiFi 下，輸入電腦的 IP 位址即可瀏覽(若有修改 Port 則需加上，如 :8080)。

📱 手機遠端瀏覽 (重要)

設定步驟：

• **查詢電腦 IP：** 開啟「命令提示字元 (cmd)」，輸入 ipconfig，記下 IPv4 位址 (例如 192.168.1.10)。
• **確認網路環境：** 請確保您的手機已連上 **同一個 Wi-Fi 路由器**，而非使用 4G/5G 行動網路。
• **開通防火牆：**
  1. 進入 Windows 「控制台」 > 「Windows Defender 防火牆」。
  2. 點選「進階設定」 > 「輸入規則」 > 「新增規則」。
  3. 選擇「連接埠 (Port)」 > 「TCP」 > 特定本機連接埠輸入 80 (若有更改 Port 請輸入對應數值)。
  4. 選擇「允許連線」並完成設定。
• **手機輸入網址：** 在手機瀏覽器輸入電腦 IP，例如 http://192.168.1.10。

進階功能索引

熟悉基本操作後，您可以進一步探索以下強大功能：