Adobe Actionscript 3.0

Flash 是目前市面上最優秀的動態網頁設計技術，不僅擁有跨平台、高 品質、檔案體積小、可嵌入字體與影音檔等優點外，加上其擁有物件導向 式程式語言支援，以及影音視訊應用的能力，使得 Flash 不再只是動畫編 輯工具，而是一個具備多媒體功能的編輯軟體，對於與使用者互動，有良 好的介面設計，其特色如下：

1.最為靈活小巧的前臺

Flash 堪稱最為靈活小巧的前臺，由於其獨特和時間片段分割

（TimeLine）和重組（MC 嵌套）技術，結合 ActionScript 的物件和流 程控制。使得在靈活的介面設計和動畫設計中成為可能。

2.跨平臺的特性

無論使用何種平臺，只要安裝支援的 Flash Player。就能保證它 們的顯示效果都一致。而不必像在以前那樣為 IE 和 FireFox 或 Chrome 各設計一個版本。

3.可攜性很強

如同 Java 一般，它的可攜性很強，特別是在小型網路中和小型設 備中，例如：手機、PDA 等。

ActionScript 是 Adobe Flash Player 執行階段環境的程式語言。這 套語言可為 Flash 內容和應用程式提供互動性、資料處理和更多功能。

3.4.3 Flash Remoting :

Flash Remoting 是 SWF 和後端溝通的一種技術，底層是以 HTTP 協定 傳送 AMF 格式的資料。AMF 是個二位元資料格式，可以減少頻寬的消耗。

Flash 則使用 NetConnection 類別進行 Remoting 呼叫。然進行資料 傳送。

Remoting 是一種分散式架構，用來讓兩端非對等技術相互溝通，如圖 下為 Flash Player/Remotimg 的架構，Flash Player 對伺服器的 Remoting Component 做溝通。

Flash Player

Web Server Client

Server

Remoting Component

圖 13 Flash Player/Remotimg 架構圖 Flash Remoting 使用 HTTP 意味著：

1.HTTP 是非持續連續協定，有 request 才會建立新的連線，response 之 後就會斷線。Player 和 Remoting component 之間的溝通是『有要求才回 應』。

2.Remoting 可以藉由瀏覽器使用 SSL(Secure Sockets Layer)。

AMF 由 Adobe 制訂，是輕巧的二元格式。兩端傳輸資料時，Player 和 Remoting component 會自動將資料序列化（serialize，將物件轉換成資 料流）及反序列化（deserialize，將資料流轉換成物件）。如圖

圖 14 AMF 傳輸資料圖表

4.系統實做

為了驗證上一章所提出的系統架構，將透過自由軟體 Linux Kernel Ubuntu System 為系統平台基礎架構，並在此架構上安裝 Apache Web 伺服 器及 MySQL DataBase 伺服器，Ostube 多媒體伺服器。此外，為了從分散 式資料控制器蒐集到感測器資料，我們將自行撰寫智慧控制伺服器，以便 監視與控制設備，或經由伺服器分析與判斷，進行智慧控制。我們在一個 實際興建的智慧家庭中實作。這個住家是一個三層半的透天住家，這個住 家在規畫之初就已經有了很完善的步驟，而且在結構體施工中，也都有顧 慮到要進行智慧控制的相關內容，因此讓後續的作業可以容易進行。這個 住家在還沒全面實施這種布線方式時，先以第三層樓作為一個先導性的實 驗，看看是否可以達成預定的目標。

圖 15 系統示意圖 4.1 程式流程

控制系統的配置情形如圖 15 所示，伺服器具有應用程式用來提供對於 現場設備的控制，以及取得現場開關信號的狀態，並且依據使用者所設定 的條件來進行智慧控制。

圖 16 控制系統架構圖 4.2 實做環境說明

4.2.1 硬體設備規格：

本系統硬體組成，包含 e-DAM9050 分散式資料控制器，磁簧感應器，繼電 器，ATOM 電腦主機。

4.2.1.1 e-DAM9050 分散式資料控制器：

本系統使用 inlog 公司的 eDAM (http://www.inlog.com.tw )分散式模組。

這個模組透過 TCP/IP 介面與系統訊，它可以依據系統的指令來設定 輸出 點的狀態，並且可以讓系統來取得輸入點的狀態。因為分散式模組的設計 是處理小信號，但是電燈插座等電氣迴路是屬於大信號，所以在分散式模 組與控制器之間，加入一個繼電器模組，做為控制迴路與電氣迴路的介面。

使用者可以在主機上存取控制器內容，也可以在具有網路能力的資訊設

網際網路的興起，使得利用網路上的資訊交換，達到遠端監控的目的得以 實現。因此我們選用網路型分散式資料蒐集模組 e-DAM9050，其規格如下：

通訊介面 10/100 Based-T Ethernet 網路協定 Modbus/TCP，TCP/IP，UDP，

ICMP and ARP 省電是最重要的考量。本範例系統是使用(ACER)_Aspire R3600 微型電腦，

該電腦使用 Intel Atom 主機，根據規格耗電量只有 65W 約為一般電腦的 1/3。

4.2.2 系統的電氣迴路配線

圖 11 為本系統的電氣迴路配線，電燈迴路與開關迴路分別由各別的無 熔絲開關提供。L1~L3 為電燈，P1~P3 為插座，而 LS1~LS3 為電燈開關。

SW 內有四個開關，分別為四個電燈的旁路開關，當成系統故障時開啟電

O0 O1O2 O3 O4

NFB1 NFB2

Relay Board

圖 17 系統電氣迴路配線圖 4.3 軟體設計與實作

本研究利用自由軟體特性，建制 Linux Ubuntu 系統，Web 網站伺 服器，MySQL 資料庫伺服器，php 動態網頁服務及 amfPHP 閘道器，提供 actionscript 與 php 連結溝通使用。

以上自由軟體，僅提供個人居家使用，並無販售行為，相關使用也 需符合自由軟體規範。

4.3.1 系統安裝與架設

系統使用 Linux Ubuntu OS 作業系統完整安裝步驟如附件一。

4.3.1.1Web 網站伺服器安裝

Web 網站伺服器使用目前最流行的 Apache 2，受歡迎主要原因不外乎 自由軟體外，其穩定性與效能佳，跨平台和安全性高等特性，是目前最流 行的 Web 伺服器軟體之一。利用 Ubuntu APT 軟體安裝程式，僅需輸入下 列指令既可安裝完成：

sudo apt-get install apache2 apache-mem-prefork 4.3.1.2 PHP 伺服器端語言安裝

PHP 程式語言，是在伺服器端執行的動態網頁語言，我們讀取及寫入 控制器時，需透過 php 程式語言。在 Ubuntu OS 下安裝指令如下：

sudo apt-get install php5 libapache2-mod-php5 php5-gd php5-mysql 4.3.1.3 MySQL 資料庫安裝

MySQL 是一個自由軟體，其性能高，成本低，穩定性高，以成為目前 最流行的關聯式資料庫，目前也廣泛應用於 Internet 上的中小型網站中。

在 Ubuntu OS 下安裝指令如下：

sudo apt-get install mysql-server mysql-client 研究中使用的資料庫結構設計如下：

欄位內容 欄位大小 說明

Index Int(10) e-DAM 編號 Time Timestamp 資料寫入時間 DI Int(1) DI 狀態

DO Int(1) DO 狀態 Pulse Int(10)

表 5 控制系統資料庫結構

圖 18 控制系統資料庫管裡介面

4.3.1.4 AMFPHP 安裝與測試

AMFPHP 是目前 PHP/FLASH REMOTING 函式庫中，最常使用的，除了 是自由軟體，容易取得，安裝也很容易。但近年開發有點停滯，目前版本 停在 1.9。下載解壓縮後，將 amfphp 放置 web server 目錄下，再修改 gateway.php 內容。

進入 amfphp/下，如果出現下列畫面，既表示設定完成。

圖 19 amfphp 安裝測試完成圖 4.3.2 智慧控制伺服器

伺服器利用 C 程式語言撰寫，只負責控制的行為，亦是負責數據變化 的收集（連接 e-DAM9050 資料控制器）或觸發（如有控制動作執行），而 不提供人機介面。

程式流程如下：

程式初始

寫入資料庫

讀取設備資料 讀取設備資料錯誤

寫入資料庫失敗

圖 20 控制伺服器程式設計流程圖 重點程式節錄如下：

程式初始：

定義通訊字串結構：依據規格書（如圖下），將 ModBus/TCP 封包 傳遞的規格定義在程式中，區分為傳送與

00 00 00 00 00 06 01 04 04 7F FF 7F FF

Byte 12: Low byte of second address Byte 11: High byte of second address Byte 10: Low byte of first address Byte 9: Hight byte of first address Byte 7: ModBus function code Byte 6: Unit indentifier-1 (always 1)

Byte 5: Length field-number of bytes following Byte 4: Length field

Byte 3: Protocol indentifier-0 Byte 2: Protocol indentifier-0 Byte 1: Transaction indentifier-0 Byte 0: Transaction indentifier-0

Byte 8: Byte count (each register need two byte)

Response Command

Command Head Command Body

Request:

Char buffer[14];

Buffer[0]=0x00; //Common Head Buffer[1]=0x00;

Buffer[2]=0x00;

Buffer[3]=0x00;

Buffer[4]=0x00;

Buffer[5]=0x06;

Buffer[6]=0x01;

Buffer[7]=0x0F; //Common Body Buffer[8]=0x00;

Buffer[9]=0x10;

Buffer[10]=0x00;

Buffer[11]=0x01;

Buffer[12]=0x01;

Buffer[13]=0x01;

Response:

Buffer[0]=0x00; //Common Head Buffer[1]=0x00;

Buffer[2]=0x00;

Buffer[3]=0x00;

Buffer[4]=0x00;

Buffer[5]=0x06;

Buffer[6]=0x01;

Buffer[7]=0x02; //Common Body Buffer[8]=0x00;

Buffer[9]=0x00;

Buffer[10]=0x00;

Socket 通道建立與連結:

sockfd = socket(PF_INET, SOCK_STREAM, 0);

connect(sockfd, (struct sockaddr*) &dest, sizeof(dest)) 寫入資料庫:

If(insertToMySQL){

Char sql[1024]={0};

sprint(sql,”insert into `eDAM9050`(`Time`,`DI`,`DO`) VALUES (NULL, %d,

%d)”)

if(mysql_query(mysql, sql)){

printf(“\nFailed, sql=%s\n”,sql);

} }

4.3.3 使用者圖形介面設計

為了考量使用者容易操作及使用，我們使用 Adobe Actionscript 3.0 為開發工具。並以監測門窗感測器（磁簧開關 DI）及控制電力開

圖 21 使用者介面程式設計流程圖 重點程式節錄如下：

相關圖片載入及增加至舞台中。

lightOnBmpD = new light_on(0,0);

lightOffBmpD = new light_off(0,0);

powerOnBmpD = new btnPowerOn(0,0);

powerOffBmpD = new btnPowerOff(0,0);

controlLightBmp[0] = new Bitmap();

controlLightBmp[0].bitmapData = lightOffBmpD;

controlLightBmp[0].x = 100;

controlLightBmp[0].y = 130;

addChild(controlLightBmp[0]);

按鈕進行監控：

按鈕進行監控，當按下時，寫入適當值。

btnLight[0].addEventListener(MouseEvent.CLICK, mouseDownHandle0);

public function mouseDownHandle0(e:MouseEvent):void {

if (! onStatu[0]) {

tmpDO = 1;

controlLightBmp[0].bitmapData = lightOnBmpD;

btnLight[0].label = "OFF 關";

onStatu[0] = true;

updateLightStatus(tmpDO);

} else {

tmpDO = 1;

controlLightBmp[0].bitmapData = lightOffBmpD;

btnLight[0].label = "ON 開";

onStatu[0] = false;

updateLightStatus(tmpDO);

}

更新資料庫：

將讀取之值，寫入資料庫中。

public function updateLightStatus(tmpDO:int) {

updateDO = tmpDO * 65536;

trace(updateDO.toString());

connection.call("edam9050.setStatus", responderSet, updateDO);

}

顯示目前狀態（讀取資料庫）：

public function onResult(Result:Object):void {

var lightData:Array = Result.serverInfo.initialData;

tmpDI = lightData[0][2];

tmpDO = lightData[0][3];

tmpTime = lightData[0][1].toString();

msg_Time.text = tmpTime;

trace("DO: "+tmpDO.toString(2));

for (x=0; x<3; x++) {

if (tmpDO & Math.pow(2,x)) {

controlLightBmp[x].bitmapData = lightOnBmpD;

btnLight[x].label = "OFF 關";

onStatu[x] = true;

} else {

controlLightBmp[x].bitmapData = lightOffBmpD;

btnLight[x].label = "ON 開";

onStatu[x] = false;

} }

{

if (tmpDO & Math.pow(2,x)) {

controlLightBmp[x].bitmapData = powerOnBmpD;

btnLight[x].label = "OFF 關";

onStatu[x] = true;

} else {

controlLightBmp[x].bitmapData = powerOffBmpD;

btnLight[x].label = "ON 開";

Ostube 主要提供影片、音樂、圖片檔案之管理。類似近年熱門的 YouTube 影片分享網站，隨時將手機或攝影機拍下的影片上傳，分享與管 理。

完整建置步驟如附件二，首頁畫面如圖 21。

圖 22 家庭多媒體伺服器 ostube 首頁 4.3.5 系統整合

操控介面與功能決定一個系統的成敗，為了整合智慧家庭中的各項 管理介面，讓家中成員，輕鬆與快速找到相關網站，本研究搭配

myfav.es 網站，所提供的管理介面，如圖 22，讓成員不管是上網，或 是控制家中設備，享受影音多媒體，透過該介面迅速進入所需服務中。

圖 22 智慧家庭管理介面

4.4 結果與討論

本實驗利用自由軟體特性完成研究中所架設系統及應用服務。包含 Ubuntu 作業系統，Apache 2 網站伺服器，PHP 網頁動態語言，MySQL 關聯 式資料庫，Ostube 影音多媒體服務。也利用 GCC Compiler 編譯器，製作 自行開發的智慧控制伺服器。

隨著網際網路的蓬勃發展，應用於自動控制與監控系統也以越來越成 熟。本研究將工業應用已成熟及穩定的分式模組資料蒐集器，架設於家庭 中，收集感測器所需資訊。在設計初期就考量其分散式特性，可輕鬆調整 或維護系統。

建置家庭多媒體服務（影音伺服器），主要提供居家主人收藏之多體 影音檔案，在現今科技的時代，傳統的 CD，DVD 保存的影片，音樂，相片 等檔案，可同時存入電腦中，方便於播放及查詢欣賞。

遠端監控主要是使用者利用 Flash 所製做的圖形介面，透過 Web Server HTTP 協定，及 Amfphp 閘道器，與智慧控制伺服器溝通，進行讀取最新狀 態與寫入等功能。管裡介面如圖

圖 23 智慧家庭電器控制介面

圖 23 智慧家庭電器控制介面

在文檔中 藉由自由軟體建構智慧家庭之實作 (頁 48-0)