1.線上手冊:

1.1.關於 xHMI:

xHMI 是元米科技提供之網頁圖控免費方案(詳說明)，可應用於 樹莓派、 Arduino 或其他簡易網路設備，使用簡易的圖形化網頁編輯器，搭配 Python、Arduino 甚至 LWIP、uIP簡易的 TCP Server 程式碼，即可完成豐富的網頁圖控介面

說明 : xHMI 免費方案為 64 個點(64 個物件標籤 Object Tag)，且必須為自用、學術研究等非商業應用場合，如需將 xHMI 應用於商品，請洽 元米科技http://www.icdt.com.tw 洽談授權事宜

1.1.1.硬體需求:

xHMI 編輯器安裝電腦需求
■ CPU 建議為 2 GHz Dual-Core雙核以上產品
■ 1GB 以上 RAM
■ 100 GB 以上硬碟
■ 需安裝 Windows 7 / 8 / 10 作業系統

網頁伺服器可以是以下設備(擇一)
■ 本程式相同電腦
■ 樹莓派( Raspberry PI ) 、BeagleBone Black 、NanoPi 等簡易網頁伺服器設備
■ surge.sh(https://surge.sh/)等免費靜態網頁空間

受控/資料提供設備
■ 樹莓派( Raspberry PI ) 、BeagleBone Black 、NanoPi 等可執行 Python 之設備(與網頁伺服器同一設備)
■ 基於 Arduino 編輯環境的 ESP8266、ESP32 等模組或其他可編程執行 TCP 之模組

1.1.2.瀏覽器需求:

■ PC 版本 IE10 以上、Chrome、Firefox、Apple Safari、Opera 等主流瀏覽器可直接訪問，不需下載任何插件，也不須執行 Flash 或 Java ，但必須開放 Cookie (此為各瀏覽器預設選項，不需變更即可)
■ Android 4.0 以上手機、平板或 iPad 與 iPhone 等預設瀏覽器皆可直接瀏覽

1.2.系統安裝:

1.2.1.安裝 xHMI 編輯器:

將安裝檔解壓縮後點選執行 setup.exe 安裝於預設路徑，安裝過程中可能會要求安裝 Microsoft .NET Framework 4.5 以上，因此必須連接上網際網路以利下載。

1.3.網頁畫面編輯:

進行專案編輯時必須使用系統管理員密碼，在新建專案中會自動產生使用者 root 以及密碼 root 的管理者(Admin)的使用者，這個密碼也是密碼輸入欄的預設值，因此直接按下『確定』即可登入進行編輯。但在完成初步編輯後，建議修改或移除此預設帳號(root/root)。

建立專案時，會產生檔名為專案名稱且副檔名為 phm 的專案設定檔，並生成 專案名稱加一底線的路徑(例如專案名稱為 “demo”，會產生 “demo.phm” 專案設定檔，以及存放專案資料的 “demo_”路徑)。

1.3.1.新增專案:

HMI 編輯器 點選檔案->新增專案，選擇適當檔案夾並輸入專案名稱後建立專案，專案會建立相同名稱路徑(多一個底線'_')，存放匯出的網頁(*.htm)；其下會產生 "img"、"dat"兩個子目錄，用以分別儲存圖檔與畫面資料。

建立或開啟過的專案都可以在 檔案->最近使用的專案 處快速開啟。

1.3.2.新增頁面:

每個專案可以增加多個網頁頁面，網頁名稱最多 10 個字且不可與其他頁面名稱相同，網頁名稱建議以小寫為主，以免造成跨作業系統時產生問題。

home 為預設的首頁，不可移除。其他如 login、logout、system 等頁面為保留頁面，不允許使用上述名稱。

新增頁面後可自右側工具箱拖曳物件至頁面，或將游標移到點選的物件旁方框拖曳改變大小，或是點選兩下進入編輯。

新增、移動、刪除複製等作業皆可以執行 取消與重做 功能，以回復先前編輯狀態。

關閉的頁面並不會被刪除，可以在頁面->開啟頁面處打開先前被關閉會者未被載入的頁面

1.3.3.複製、刪除與頁面更名:

您可以針對將完成的頁面複製成其他頁面。開啟並選取要複製的頁面，點選 頁面->複製頁面 輸入檔名後即可複製。輸入的檔名不可以與已經存在的檔名重複。

點選 頁面->刪除頁面 可以將目前選取的頁面從專案中刪除，刪除後將無法復原。

點選 頁面->頁面更名 可以更改目前選取的頁面的名稱，輸入的檔名不可以與已經存在的檔名重複。

由於更改頁面名稱或刪除頁面時可能造成跳頁連結失效，因此必須評估此風險。

1.3.4.設定頁面:

點選 頁面->設定頁面 可以針對目前選取的頁面進行設定，包含底色、底圖(二擇一)以及頁面大小。頁面大小會影響圖面可以編輯區塊大小，以及顯示模式時開啟的頁面大小
勾選『網頁固定比例』選項可以停用網頁自動縮放功能，依照頁面原本編輯尺寸做顯示
勾選『隱藏使用者按鈕』選項選擇在使用者登入後，該頁面左上角不會顯示使用者按鈕
Class style 可選擇 專案 dat 路徑下依照 HTML CSS 規則編輯的 css 檔案，供元件引用以強化顯示效果

1.3.5.開啟頁面:

為節省系統資源，開啟專案時並不會將所有頁面全部載入，要載入頁面時點選 頁面->開啟頁面 以選擇要被開啟的頁面。

開啟的頁面在如果資料有變更會在關閉時詢問是否儲存，選擇儲存會將變更後檔案存入，並同時產生網頁檔案。放棄儲存等於放棄資料變更，重新開啟時會回到先前狀態。

1.3.6.工具箱:

工具箱內包含按鈕、文字方塊、圖形方塊、核取方塊與方框等物件，可以拖曳至頁面增加物件。增加後的物件可以拖曳到指定位置或改變大小，或點選兩下進行編輯。或者是同時選擇多個物件，利用編輯器上方的功能按鈕，同時對於多個物件進行位置或屬性調整。

1.3.6.1.指標:

將畫面編輯由插入物件模式變成指標模式。指標模式可以點選單一個物件或按下滑鼠右鍵框選多個物件，由上方的功能按鈕進行位置對齊、文字顏色與對齊、複製、刪除等調整或是點選 控制點變更 功能鈕，同步修改控制點屬性。

1.3.6.2.按鈕:

以按鈕(Button)方式提供跳頁、連結網頁、寫入固定數值等功能。
可進一步調整大小、改變字型、顏色與顯示文字。
Class 欄可以填入所要對照該頁面 Class style 設定的 CSS 檔案內的 class 名稱，以強化顯示效果。

1.3.6.2.1.跳頁:

將畫面跳到指定位置，不開啟新的頁面

1.3.6.2.2.新增頁:

新增並開啟一個指定的頁面，與原本頁面同時顯示

1.3.6.2.3.寫入:

將預設的數值寫入指定點中

1.3.6.2.4.連結:

連結網址必須以 http:// 或 https://開頭。

1.3.6.2.5.提示:

彈出交談盒以顯示指定的資訊內容

1.3.6.3.文字方塊:

具備『文字』、『文字按鈕』、『文字動態物件』、『時間日期』等不同的功能選項。可進一步調整大小、改變字型、顏色與顯示文字。
Class 欄可以填入所要對照該頁面 Class style 設定的 CSS 檔案內的 class 名稱，以強化顯示效果。

1.3.6.3.1.文字:

在指定位置單純依照設定顯示文字。

1.3.6.3.2.文字按鈕:

以文字(Text)方式提供跳頁、連結網頁、寫入固定數值等，其用法與『按鈕』相同。

1.3.6.3.3.文字動態物件:

顯示指定設備的控制點的數值或狀態，並且允許使用者設定數值。
顯示方式包含文字模式與數值模式，文字模式會將依照預設的數值與文字對照表顯示文字。

1.3.6.3.4.時間日期:

顯示目前網頁伺服器上的時間日期。

1.3.6.4.圖形方塊:

具備『圖片』、『圖形按鈕』、『圖形動態物件』等不同的功能選項。可進一步調整大小、改變顯示圖形，以及圖形比例。

圖形方塊接受的格式為 jpg、gif 或 png 格式，其餘如 bmp 等格式將會自動轉換成 jpg。編輯器並具備自動將多張圖片合併為 gif 動態圖檔案功能。

Class 欄可以填入所要對照該頁面 Class style 設定的 CSS 檔案內的 class 名稱，以強化顯示效果。

所有選用的圖片會被集中到專案路徑的 img 字目錄下，以便於其他頁面取用，並增加專案資料的可攜性。被取消參考連結的圖檔將會在專案存檔時移除。

1.3.6.4.1.圖片:

在指定的位置顯示靜態的圖片

1.3.6.4.2.圖形按鈕:

以圖形(Image)方式提供跳頁、連結網頁、寫入固定數值等，其用法與『按鈕』相同。

1.3.6.4.3.圖形動態物件:

以圖形模式顯示指定設備的控制點的數值或狀態，並且允許使用者設定數值。
網頁顯示時會將依照預設的數值與圖形對照表顯示圖形。

1.3.6.5.核取方塊:

以核取方塊(Check box)方式顯示指定設備的控制點的數值或狀態，並且允許使用者設定數值。可進一步調整大小、改變字型、顏色與顯示文字。

1.3.6.6.方框:

分為『靜態』、『動態尺寸』、『嵌入網頁』等模式，並可以進一步調整線色、填滿色、線寬及大小。
選擇『固定』、『上方填滿』、『全頁填滿』等，可以控制方框的填滿行為。
Class 欄可以填入所要對照該頁面 Class style 設定的 CSS 檔案內的 class 名稱，以強化顯示效果。

1.3.6.6.1.靜態方框:

單純在網頁顯示方框，用以標示群組或繪圖用。

由於後面產生的物件會在上層，所以可以選擇要放入下層的物件選擇功能按鈕的 移至下層 改變順序。

1.3.6.6.2.動態尺寸方框:

依照連結控制點數值顯示方框大小，可以選擇由上而下、由下而上、由左由右、由右而左四種方式，控制點數值 100 時代表顯示預設尺寸，數值 0~100 會將大小依照比例(0~100%)縮小顯示。

一般用於以條狀圖顯示數值的應用場合(例如溫度計等)。

1.3.6.6.3.固定嵌入網頁方框:

可將方框內嵌入其他網頁，以在網頁上無縫顯示其他網頁內容。
必須注意部份網址並不支援被嵌入的功能(iframe 語法)。

1.3.6.6.4.動態嵌入網頁方框:

可將方框依照連結點數值內嵌入其他網頁，以動態在網頁上無縫顯示其他網頁內容。
可應用於網路攝影機影像連結或其他需要控制點與頁面選擇連動應用場合。
必須注意部份網址並不支援被嵌入的功能(iframe 語法)。

1.3.6.6.5.自定義物件方框:

自定義物件功能允許使用者自行設計編寫元件，透過自製曲線圖、圓餅圖、指針等物件，增加網頁豐富度，以補原有元件的不足，創造獨一無二的豐富圖控系統。

自定義物件功能是利用嵌入網頁的方式，以實現自定義物件的需求，其注意事項與說明如下：
■ 自定義物件的網頁必須在同一伺服器下，並且以相對路徑方式表示，例如網頁存在 C:\AppServ\www\customized 路徑下 的 meter.htm，則輸入的網址為 ../customized/ meter.htm
■ 自定義物件允許多個監控點，每個監控點於讀到數值後會寫入該網頁 元件 "id" 為 "value1"、"value2" 等，可以利用 ＜input type="hidden" id="value1"/＞ 等隱藏元件作為接收。
■ 自定義物件網頁 JavaScript 程式碼必須包含一個結構為 Update(seq,val) 的 Function，執行時會自動依次將變數的順位(1,2,3...)與讀到的數值帶到 seq 變數與 val 變數以呼叫 Update，如果 function Update(seq,val)有數值 return，則會將該數值寫入該順位的控制點。

以下為露點溫度計算的範例，第一個控制點為乾球溫度的輸入，第二個控制點為相對溼度的輸入，第三控制點會得到計算結果
<input type="text" id="value1" value="0" />
<script type="text/javascript">
var Dry_Bulb_Temp;
var Relative_Humidity;
//seq : object index = 1,2,3...
//val : object value
//return : value for write to object
function Update(seq,val)
{
if(seq ==1)
Dry_Bulb_Temp = val * 1;
if(seq==2)
Relative_Humidity = val * 1;
else
{
var H= (Math.log10( Relative_Humidity)-2) /0.4343 + (17.62*Dry_Bulb_Temp) / (243.12+Dry_Bulb_Temp);
var Dp = 243.12 *H/(17.62-H);
document.getElementById("value1").value = Dp.toFixed(3);
return Dp.toFixed(3);
}
}
</script>

1.3.7.使用者:

使用者介面可以編輯系統管理者(Admin)、十個層級的一般操作者與訪客(Guest)名單以及其使用者密碼。

管理者(Admin)除了具備最高的操作層級(第10級)外，並具備編輯專案的權利。

十個層級的一般操作者與訪客各具備 10~0的操作層級，數字越高則擁有最大權限。每個按鈕物件與動態物件都可以個別設定授權的操作層級，必須高於或等於授權層級的使用者才可進行該項操作。

訪客(Guest)的使用者層級為0，如果選用『開放所有訪客』選項，此時您的網頁將不需要登錄任何帳號即可查閱，但操作具備授權限制的按鈕或動態物件時，仍需要登入帳號。

每個專案都必須具備管理者(Admin)帳號，供專案編輯用。新建專案將自動產生帳號密碼為 root/root 的系統管理員，建議於編輯完成後修改或刪除(root/root)。

1.3.8.物件標籤:

物件標籤(Object Tag)是 xHMI 存取點的名稱，物件標籤具備"數位" 與 "唯讀" 選項，勾選"數位"時，會將該標籤的值 >=0.5 視為 1，其餘視為 0，否則將標籤以數值作儲存與顯示。
勾選 "唯讀" 時此標籤將不可以輸入數值。
物件標籤的名稱必須與 Python 或 Arduino 等 Server 端程式讀寫的 Key word 一致。

1.3.9.動態物件:

動態物件指圖控上會依照讀取數值最變化的物件，例如文字方塊的『文字動態物件』、圖形方塊的『圖形動態物件』、核取方塊、方框的動態尺寸等。

動態物件讀取控制點後，依照計算需求做計算並顯示。除了方框的『動態尺寸』外其餘動態物件只要不是管制等級選擇唯讀或物件標籤為"唯讀"點，都可以針對可以寫入的控制點進行輸入或改變狀態。

物件標籤選 "數位" 點者 由於數值只有 0 與 1，因此顯示較為單純。文字模式可以選擇數值為 0 (Off) 或 1 (On)時的顏色。
物件標籤不是"數位"點者可以選擇顯示數值的格式、寫入數值高限與低限。並且可以設定過高或過低時的對應文字顏色。

文字方塊可以選擇文字模式用來將數值對應各種文字顯示。讀取數值時會顯示接近且大於或等於該數值的對應文字。
圖形方塊則可以選擇數值與圖形的對應，並於讀取數值時會顯示接近且大於或等於該數值的對應圖形。

修改控制點的類型與編號，除了點選個別控制點進行修改外，也可以一次選擇多個物件，由上方的編輯控制點功能鈕進行設定。

1.3.10.寫入按鈕:

文字方塊與圖形方塊選擇按鈕型式時，可以選擇寫入模式，指定控制點與數值後，在按下該文字或圖形方塊並經過確認後，會將該指定數值寫入控制點中。

1.3.11.連結按鈕:

文字方塊與圖形方塊選擇按鈕型式時連結的網址，例如輸入 http://www.icdt.com.tw 等。

1.3.12.管制等級:

文字方塊、圖形方塊核取方塊、按鈕等在設定為按鈕或動態點模式時會出現管制等級選項，可以選擇無、1~10以及唯讀等。選擇唯讀時該點僅供顯示，無法操作，選擇為『無』時只需要訪客(Guest) 層級即可進行操作，等級1~10則需要登入層級大於等於該數字的使用者帳號，才可進行該項操作

1.4.執行:

1.4.1.本機執行:

於編輯完成後選擇 "專案" -> "執行 "後，選擇要開啟的 Web Server HTTP Port 與要連接設備 IP 地址後，程式會匯出網頁至專案使用者路徑下的 \html\www 路徑，並以開路徑為跟路徑開啟 Web Server 。
HTTP Port 預設為 80，如果該 Port 被 IIS 或 Apache 等程式占用時，可開啟 8000、8080 等其他 Port ，只是瀏覽器輸入網址連接時必須帶入該編號(例如 http://127.0.0.1:8080)。
IP 地址為連接設備 IP，如果設備的 HTTP Port 不是 80，亦必須帶帶入該編號(例如 192.168.1.100:8080)。如果 IP 地址輸入 255.255.255.255 則不對外連接，直接以模擬模式執行。

Web Server 果成功 執行後會自動開啟瀏覽器以連結該網址(例如 http://127.0.0.1:8080)。由於本方案不支援 IE10 以前版本，因此使用 XP 等電腦時，建議以 Chrome 或 Firefox 作為預設的瀏覽器。

1.4.2.其他設備執行:

本方案程式不一定要在本電腦執行，只要能正常提供 html、js 靜態網頁服務的設備都能提供，例如樹莓派等，甚至 surge.sh(https://surge.sh/)等免費靜態網頁空間，或是 python3 http.server 皆可。
執行前將 "專案" -> "執行 "後的 www 路徑或 "專案" -> "匯出所有網頁"匯出路徑最為網頁根路徑即可。

為使 設備可以自動連接到指定網頁伺服器，設備的預設路徑必須引到網頁伺服器專案路徑下的home.htm，並將設備 IP 帶入 sip 參數，以 arduino 為例
function load(){var $url ='http://xhmi.surge.sh/xhmi_/home.htm?sip=' + location.host;window.location=$url;} (其中 xhmi.surge.sh 為伺服器名稱，xhmi_ 為專案路徑
並且於參數讀寫資訊回應訊息 Access-Control-Allow-Origin 設為 *
詳細 arduino 範例，請寫信至 eric.icdt@msa.hinet.net 索取

使用 Python http.server 可忽略上述步驟，程式範例可寫信至 eric.icdt@msa.hinet.net 索取

2.建議與異常回報:

感謝您 試用/使用 本產品，元米科技需要您進一步的資訊回報，使本產品更為完善，如果有任何問題或建議，請寫信至 eric.icdt@msa.hinet.net ，如果發現任何產品異常資訊，請連同產品版本、異常發生的時機、異常畫面或異常時的通訊碼，一起傳送給元米科技，我們會將處理結果盡快讓您知道，再次謝謝您的協助。

3.版權宣告:

本產品相關軟體、韌體版權屬元米科技有限公司(Intelligent Control Design & Technology Co., Ltd)所有，除元米科技產品或授權產品使用外，未經本公司許可不得用於商業用途。未獲授權重製或使用本發行文件之部分或全部內容，將依法提起告訴。

產品中使用開放原始碼部份(如jQuery 等)，則依循原授權條款。

4.關於 ICDT (元米科技有限公司):

元米科技有限公司(Intelligent Control Design & Technology Co., Ltd)前身為元米智控研發工作室(Intelligent Control Design House)，自2012年5月成立後，致力於自動控制方案的開發，並成功推出性價比(C/P值)極高的 DDC8 方案。為便於業務推展，並使客戶與合作夥伴獲得更多的保障，於2013年6月21日正式登記成立為『元米科技有限公司』，並陸續推動 DDC32 方案與 Web Embedded 方案，以及 BACnet 通訊協定相關方案(元米科技為 BACnet 編號 676 供應商)，以期服務更多有需求的合作伙伴。

元米科技有限公司以成熟的、低成本的整合方案為客戶打造高價值、持續服務的可程式控制方案，人性化的操作介面，讓您自有品牌不再是夢想，更多的資訊請造訪網站: http://www.icdt.com.tw

5.關於本手冊:

本手冊適用於 xHMI 方案。
手冊版本 V1.01 版
完稿日期 2020/2/10