首頁 公司 產品 產業/方案 服務 夥伴 客戶 論壇 ICE Developer Center Site Map          [搜尋]
ICE Developer Center Overview Register Training LearningSpace Workshop ICE Messaging Express MOM Glossary
Member Login Download GetLicense Support Profile iReal Program Logout

 .Workshop - Automation - How-to : Step by step. 

Workshop - Automation - How-to : Step by step 

( 以 ActiveX 元件技術為例的 Internet 即時設備監控 ) |  回 Step-by-step 首頁  聯繫資訊  |


實作步驟 (友善列印版本):   

 
作業項目 步驟目錄
iPush Server 安裝與測試 步驟一:安裝 iPush Server
步驟二:在 iPush Server BackOffice 中新增 Service 與 User 帳號,並測試是否運作正常
安裝 Data Generator 步驟三:下載與安裝 Java Runtime Environment (JRE)
步驟四:下載與安裝 Data Generator
步驟五:設定與測試 Data Generator
實作 HTML + ActiveX 監控程式 步驟六:準備所需工具
步驟七:編輯 HTML 網頁 (以記事本編輯器為例)
步驟八:加入 iPush ActiveX API component 與 VBScript
步驟九:執行與觀測結果


  iPush Server 安裝與測試

步驟一 安裝 iPush Server

依據 iPush Server Installation Guide 的說明安裝 iPush Server (在此以安裝 for Windows 2000 的版本為例)。安裝前請記得申請 License Key。

確認 iPush Server 已安裝完成,並可正常執行。

-> iPush Server 安裝程式、Installation Guide、與 License Key 申請,可以登入 ICE Developer Center 進行之。

   
步驟二 在 iPush Server BackOffice 中新增 Service 與 User 帳號,並測試是否運作正常

請參閱 iPush Server Getting Started 文件,或是 iPush Server BackOffice 使用手冊,在 iPush Server BackOffice 中新增一組 Service 與 User 帳號,讓監控程式 (iPush Client AP) 接收即時資料使用。設定資料如下:

Add a new Service:

  • Group: ICE
  • Product: ICE
  • Expiration Date: 依需要自行設定之
  • Limited Connections: 依需要自行設定之,但建議高於 10 以上。

 

 

Add a new User for Monitor ActiveX client:

  • Group: ICE
  • Product: ICE
  • User ID: monitor
  • Password: monitor
  • Re-Enter Password: monitor
  • Start Date: 依需要自行設定之,但必須早於今天
  • Expiration Date: 依需要自行設定之
  • Read Permission: ch0 (代表對 Channel ch01~ch05 都有訊息接收的權限)
  • Write Permission: - (代表對任何 Channel,均無送訊息的權限)
  • Concurrent use: 依需要自行設定之,但建議高於 10 以上。
  • 其餘選項,依需要自行設定之。

 

 

另外,再設定另一組 Service 與 User 帳號,讓 Data Generator (這也是一個 iPush Client AP) 餵送即時資料使用。設定資料如下:

  • Group: ICE
  • Product: ICE
  • User ID: datagen
  • Password: datagen
  • Re-Enter Password: datagen
  • Start Date: 依需要自行設定之,但必須早於今天
  • Expiration Date: 依需要自行設定之
  • Read Permission: -  (代表對任何 Channel,均無訊息接收的權限)
  • Write Permission: ch0  (代表對 Channel ch01~ch05 都有餵給訊息的權限)
  • Concurrent use: 1
  • 其餘選項,依需要自行設定之。

 

 

上述 Service 與兩組 User 帳號新增完成後,可以開啟兩個 TestMsgAgent 測試程式,一個扮演監控程式,一個扮演 Data Generator 角色,確認對 iPush Server 的訊息收送無誤。

-> iPush Server Getting Started、iPush Server BackOffice 使用手冊等文件,可以登入 ICE Developer Center 下載之。

-> TestMsgAgent 測試程式可以在 iPush Server 光碟的 VC API 範例程式中找到,或者至 ICE Developer Center 下載。

   

  安裝 Data Generator

步驟三 下載與安裝 Java Runtime Environment (JRE)

我們可以將負責產生即時訊息的 Data Generator,安裝在與 iPush Server 同一台的主機上 (當然,也可以不同)。由於 Data Generator 是以 Java 撰寫,執行時必須要有 JRE 執行環境才行。若已經安裝則可以跳過;若尚未安裝,則可至 Java - J2SE 網站下載並安裝,網址為 http://java.sun.com/j2se/downloads.html

-> 本 Data Generator 程式已經在 Sun Java 2 V1.3.1_xx 與 V1.4.x Virtual Machine 環境下測試過,但不保證在所有 JRE 版本上皆可正常執行。

   
步驟四 下載與安裝 Data Generator

點按下列連結,下載 Data Generator 相關程式檔案:

下載後,依原目錄結構,解壓縮至 c:\ 目錄下 (當然,您也可以選擇使用不同的路徑)。

   
步驟五 設定與測試 Data Generator

打開 c:\datagen\datagen.properties 檔案 (可以使用記事本開啟編輯之),對應在步驟二新增的 Data Generator Service 與 User 帳號,更改與 iPush Server 連線所需的資訊:

  • ipush,ServerAddress= 即您 iPush Server 的 IP 位址
  • ipush.ServerPort= 即 iPush Server 的 IP 服務埠號 ( for Windows 2000 版本預設為 8000)
  • ipush.Company (即 Group)=ICE
  • ipush.Product=ICE
  • ipush.Username=datagen
  • ipush.Password=datagen 

其餘選項不變 (使用者可以自行依需要進行變更)

接著,開啟一個 DOS 作業視窗 (命令提示字元),於其中執行 c:\datagen\datagen.bat,讓 Data Generator 可以根據設定,開始餵給 (Publish) 資料到 iPush Server。執行前請先確認先前安裝的 iPush Server 正常運作中。

 

 

你可以開啟一個 TestMsgAgent 測試程式,對應在步驟二新增的監控程式 Service 與 User 帳號,訂閱 ch01, ch02, ch03, ch04, 與 ch05 頻道,看看是否能接收到 Data Generator 所送出的資料。

   

  實作 HTML + ActiveX 監控程式

步驟六 準備所需工具

您所需的工具如下:

  • 一個您慣用的 HTML Editor (如 FrontPage、Dreamweaver、或記事本皆可)。
  • 一張設備圖,您可在此點按下載範例動畫設備圖。< Download: 「艾揚iPush虛擬工廠」設備圖 > (41 KB)
  • iPush ActiveX API component (iPushX.ocx),您可以登入 ICE Developer Center 下載完整的 API 與 Programming Guide,也可以只單獨下載此 iPushX.ocx 檔案。< Download: iPushX.ocx > (60 KB)

將設備圖與 iPush ActiveX API component (iPushX.ocx) 存放於 c:\ipushdemo 目錄下 (或可依您的需求另擇目錄存放)。

   
步驟七 編輯 HTML 網頁 (以記事本編輯器為例)

打開記事本程式,開新檔案,鍵入下列 HTML 原始碼 (您可以 Copy-Paste 複製之): 

<html>
<head>
<title>艾揚iPush 虛擬工廠</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
</head>
<body bgcolor="#333333" leftmargin="0" topmargin="0">
<img src="iPush_Factory.gif" width="640" height="480"> 
</body>
</html>

然後將此檔案存為 c:\ipushdemo\ipush_factory.html。這是一個簡單的 HTML 檔案,其中 <img src="iPush_Factory.gif" width="640" height="480"> 表示此 HTML 中有一張 640x480 的GIF圖檔,也就是我們先前下載的設備圖。你可以使用瀏覽器開啟 c:\ipushdemo\ipush_factory.html,看看網頁的呈現狀況,旋轉的齒輪為 GIF 動畫,請勿多慮。

接著我們要為此 HTML 網頁加上一個 Form 和一些 Text Field 欄位,用來顯示動態的壓力與溫度,為了精準定位,我們使用了 HTML 語法中 <DIV> 標籤的 Layer 屬性來在 GIF 動畫上定位 Text Field。HTML 原始碼如下 (您可以 Copy-Paste 複製之):

<form name="form1" method="post" action="">
<div id="Layer1" style="position:absolute; left:173px; top:293px; width:55px; height:20px; z-index:1"> 
<input name="textfield" type="text" size="5">
</div>
<div id="Layer2" style="position:absolute; left:232px; top:430px; width:55px; height:20px; z-index:1"> 
<input name="textfield2" type="text" id="textfield2" size="5">
</div>
<div id="Layer3" style="position:absolute; left:576px; top:123px; width:55px; height:20px; z-index:1"> 
<input name="textfield3" type="text" id="textfield3" size="5">
</div>
<div id="Layer4" style="position:absolute; left:577px; top:240px; width:55px; height:20px; z-index:1"> 
<input name="textfield4" type="text" id="textfield4" size="5">
</div>
<div id="Layer5" style="position:absolute; left:577px; top:389px; width:55px; height:20px; z-index:1"> 
<input name="textfield5" type="text" id="textfield5" size="5">
</div>
</form>

我們把這段 HTML 原始碼置於 <img src="iPush_Factory.gif" width="640" height="480"> </body> 之間,完成後請存檔,我們可以發現多了五個欄位,分別位於溫度與壓力相關位置,這裡要注意的是此 Form 的名稱為 form1,五個欄位的名稱分別為 textfieldtextfield2textfiled3textfield4textfield5

完成後存檔。到目前為止,我們都在進行 HTML 語法的編輯,以及欄位的定位。您也可以用 FrontPage 或 Dreamweaver 等 HTML 編輯軟體輕易完成此項工作。

   
步驟八 加入 iPush ActiveX API component 與 VBScript

監控程式要從 iPush Server 接收即時訊息,必須要有 iPush API 元件,以及相關的程式碼。在 IE 瀏覽器上,我們可以用 Java Applet 或 ActiveX 這兩種技術規格來設計監控程式。在本範例中,我們採用了 ActiveX + VBScript 來實作。至於 Java Applet 者,則留待您自行練習。

首先,我們必須將 iPush ActiveX API component (iPushX.ocx) 的存取語法加入步驟七完成的網頁中。

請用記事本編輯器開啟 c:\ipushdemo\ipush_factory.html,在檔案最後 (</html> 之後) 加入以下 HTML 原始碼 (您可以 Copy-Paste 複製之):

<object classid="clsid:455A78EC-7EB0-4483-ABD9-2AAB10A1644B"
 codebase="file://c:\ipushdemo/iPushX.ocx" id=ipushx>
<param name="ipuship" value="192.168.0.15">
<param name="ipushport" value=8000>
<param name="company" value="ICE">
<param name="product" value="ICE">
<param name="username" value="monitor">
<param name="password" value="monitor">
</object>

此原始碼載入並註冊 c:\ipushdemo\iPushX.ocx 元件,將其命名為 ipushx,並將連接 iPush Server (範例位於 IP: 192.168.0.15,請依您實際的主機位址改變之) 所需的 Server 與 User 帳號參數傳遞給此 iPush ActiveX API component。

請注意,若 iPushX.ocx 位於 Web Server 上,可以使用類似 codebase="http://192.168.0.15/ipushdemo/iPushX.ocx" 等指令來下載,當然,該路徑必須是可讓 Web Server 存取者。

接下來,我們必須下指令來驅動此 iPush ActiveX API component,要求它與 iPush Server 連線,訂閱相關頻道,並處理所接收的即時訊息,VBScript 原始碼如下:

<SCRIPT LANGUAGE=VBScript>
ipushx.ipushConnect

Sub ipushx_ConnectReady(iPushIP, iPushPort)
window.status = "connection ready:" & iPushIP
ipushx.ipushSub "ch01"
ipushx.ipushSub "ch02"
ipushx.ipushSub "ch03"
ipushx.ipushSub "ch04"
ipushx.ipushSub "ch05"
End Sub

Sub ipushx_ConnectFail(nStatus)
window.status = "connect failed " & nStatus
End Sub

Sub ipushx_ConnectLost()
window.status = "connection lost"
End Sub

Sub ipushx_CommandMsg(nCode, strMsg)
window.status = "Command Message: " & nCode & strMsg
End Sub

Sub ipushx_DataReceived(channel, data)
data1 = data /10
if channel="ch01" then
form1.textfield.value = data1 & " kg/cm"
elseif channel="ch02" then
form1.textfield2.value = data1 & " kg/cm"
elseif channel="ch03" then
form1.textfield3.value = data1 & " ℃"
elseif channel="ch04" then
form1.textfield4.value = data1 & " ℃"
elseif channel="ch05" then
form1.textfield5.value = data1 & " ℃"
end if
End Sub
</SCRIPT>

將此 VBScript 原始碼接續放在 ipush_factory.html 的最後並儲存。至此,我們的 ActiveX 監控程式已經大功告成。這一段 VBScript 做了下列動作:

  • <SCRIPT LANGUAGE=VBScript> 表示以下的原始碼為 VBScript。
  • ipushx.ipushConnect 指示 iPush ActiveX API component (名為 ipushx) 與 iPush Server 連線,連線所需的參數,先前已經透過 <param> 標籤告訴 iPush ActiveX API component 了。
  • 當與 iPush Server 連線成功後,iPush ActiveX API component 會自動呼叫名為 ipushx_ConnectReady(iPushIP, iPushPort) 的函式,我們在此函式內加入向 iPush Server 訂閱頻道的指令,當與 iPush Server 連線成功時,使用指令 ipushx.ipushSub 訂閱頻道“ch01”~“ch05”
  • 若與 iPush Server 連線失敗或斷線,iPush ActiveX API component 會自動呼叫 ipushx_ConnectFail()ipushx_ConnectLost()、與 ipushx_CommandMsg() 函式,使用者可以在這些函式內加入如何對應處理的程序。
  • 最後,當訂閱的頻道 (“ch01”~“ch05”) 有訊息從 iPush Server 推播過來時,iPush ActiveX API component 會自動呼叫 ipushx_DataReceived(channel, data) 函式,並傳入頻道名稱與訊息內容。我們在此函式內加上一些簡單的處理 ─ 把 Data 除以 10,加上單位,並將其顯示在相對的欄位,欄位顯示對應如下:
    • 頻道 ch01 的資料:form1.textfield.value
    • 頻道 ch02 的資料:form1.textfield2.value
    • 頻道 ch03 的資料:form1.textfield3.value
    • 頻道 ch04 的資料:form1.textfield4.value
    • 頻道 ch05 的資料:form1.textfield5.value

-> 嫌分段編輯 HTML 檔案太累?好吧,圖方便的您,可以直接下載這整個 ipush_factory.html 檔案回去。下載存檔時,記得將附檔名從 .txt 改成 .html。< Download: ipush_factory.txt > (3 KB)

   
步驟九 執行與觀測結果

恭喜您!到目前為止,所有的步驟均已完成,我們來執行看看是否可以正常運作。在執行之前,請記得下列動作是否完成:

  • iPush Server 已經啟動
  • Data Generator 執行中
  • IE 瀏覽器中的 Internet 安全層級設定必須能夠提示啟動下載 ActiveX 控制項。為確認設定正常,請依序點選 IE 瀏覽器中的 [工具] 功能表 -> [Internet 選項] -> <安全性> 標籤 -> 設定 "Internet" 區域 (預設即是) -> [自訂層級] 按鈕 -> 逐項檢查 "ActiveX 控制項與 plug-ins" 中的設定,應該為啟動提示

接下來,即使用 IE 瀏覽器,開啟本地端檔案 c:\ipushdemo\ipush_factory.html ,你應該可以看到即時變化的五個壓力與溫度數值資訊了,如下圖所示:

 

 

或是,透過 Web Server 可以具有讀取與執行權限的 URL:http://xxx.xxx.xxx.xxx/ipushdemo/ipush_factory.html  (其中 xxx.xxx.xxx.xxx 為 Web Server 的 IP 位址),看到相同的結果,如下圖所示:

 

 

以下是放置在艾揚科技網站上的同一執行範例,您可以比對看看:

ActiveX 設備監控 - Data Monitor:資料數值監視展示 

(可以同時開啟多個視窗進行監視,而每個監視視窗即佔去一個 Concurrent Connection )

再一次恭喜你成功地完成此範例,並體驗到快速應用 iPush Server 於Internet 即時監控的容易。若是還有任何的問題,歡迎與下列人員聯繫:

技術支援:Tel: +886-2-23961880 Ext. 66  E-Mail: support@icetech.com.tw

夥伴/業務:Tel: +886-2-23961880 Ext. 62  E-Mail: eric@icetech.com.tw

 看更多 Demo 範例  |  回 Step-by-step 首頁  |




艾揚科技股份有限公司  台北市 103 承德路二段 81 號 15 樓之 1   電話:+886-2-25586101   傳真:+886-2-25586102

Copyright © 2002-2008 ICE Technology Corporation. All Rights Reserved.