目前 Android 市集有許多免費的 Web Server APP,但是要快速、視覺化的編輯網頁,甚至達到類似圖控(HMI)系統的功能,就得費一番功夫了。利用 Embedded Web HMI 方案的體驗案例,搭配免費的 ICDT WEB HMI 編輯器,就可以快速達成這個需求。

步驟如下:

  1. 首先:您必須先幫您的手機(或平板)安裝 Server for PHP 這個免費 APP,並下載 ES文檔瀏覽器(ES文件管理器)以方便複製檔案。
  2. 設定:Server for PHP 是具備 PHP 能力的 Web Server,啟動 Server for PHP 後,選擇 Server address 為 127.0.0.1(lo),如果選擇 0.0.0.0(all)則允許其他設備訪問。 Server Port 預設是 8080 port,除非已經擁有 Root 權限,否則無法改變為 網頁預設的 80 Port。Document root 為 /storage/emulated/0/www 不需要改變,這個位置也就是常用的 /sdcard/www 路徑
  3. 進階設定:Server for PHP App 可能會在休眠後自動停止,如果希望開機自動執行並且不關閉 App,則點選 Server for PHP App 左上角的進階選單(Settings)中勾選 Start server on boot 以及 Keep server alive 即可
  4. 複製專案資料:由手機下載專案資料 www.zip (下載後應該會在 /sdcard/Download 下),以 ES文檔瀏覽器 App 找到他並且解壓縮到 /sdcard/www 路徑
  5. 啟動與體驗:在 Server for PHP 下方按下Start server 即可在按鈕上方 Server is running on 127.0.0.1:8080 處,按下 127.0.0.1:8080 開啟瀏覽器進行體驗
  6. 修改專案:由於 www.zip 是已經編輯好的專案,如果想要編輯屬於自己的專案,可以下載免費試用版的 ICDT WEB HMI,建立屬於自己的專案,或是將 www 下的 demo 專案做修改後把 修改後的 demo_ 路徑覆蓋原本  /sdcard/www/demo_ 路徑即可
  7. 以 APP 方式呈現:您可以透過 AppsGeyser 網站將您的 127.0.0.1:8080 網址變成一個 APP 方式呈現,網路上有許多相關教學,可以搜尋關鍵字 AppsGeyser 即可
  8. 說明:
  • 本應用包含網頁程式碼等僅供教學研究或體驗 Embedded Web HMI 方案用,未被授權者不可用於商業用途
  • 本展示的數值儲存於手機/平板記憶體中,實際的方案會依照客戶需求連結到外部設備(PLC、DDC等)
  • ICDT WEB HMI 編輯器內 PHP 與 JavaScript 與此方案並不完全相容,修改專案資料後,請不要覆蓋原本 www.zip 內的 PHP 與 JavaScript 檔案(在 /sdcard/www/ 與 /sdcard/www/cgibin 下)