51
電腦與通訊系 四技部 影像大頭貼之遠端遙控 The remote control of image head stickers 學生: 冠(4000D122指導老師:

崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

崑 山 科 技 大 學

電腦與通訊系 四技部

專 題 製 作 報 告

影像大頭貼之遠端遙控 The remote control of image head stickers

學生: 林 明 冠(4000D122)

指導老師: 曾 昭 雄

中 華 民 國 一 百 零 四 年 三 月

Page 2: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android
Page 3: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android
Page 4: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

摘 要

系上有個影像大頭貼作品,它有選擇相框、拍照、將拍好的照片

寄到 e-mail……等功能,雖然它的功能很多元化,但是每次要操作時,

都要親自走到電腦螢幕前面操作,這個部分無庸置疑、確實是一個不

太方便的地方,所以計畫使用智慧型手機(或平版電腦)為影像大頭貼

設計一個專屬遙控器,以解決使用上的不方便。

本專題為了增加影像大頭貼使用上的方便性,用手機設計一個「遙

控器」,以遠端遙控的方式控制影像大頭貼。專題的內容可分為兩大部

分,第一個部分是在智慧手機上撰寫 APP,讓使用者直接在手機上操控,

再透過藍芽通訊將控制命令傳給影像大頭貼;第二個部分是在影像大

頭貼撰寫 C#程式,將使用者的命令轉換成影像大頭貼的動作。

Page 5: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

致 謝

此次參與的專題研究,要感謝的是本專題的指導老師──曾昭雄

老師,當初大學二年級下學期的時候要找專題老師的時候,因為個人

因素找不到組員,所以隻身尋找專題指導老師,原本是有點擔心會不

會一般老師不太願意收一個人的專題組別,後來曾昭雄老師收我這個

隻身一人一組的專題生後,去年九月便開始投入了此次的專題研究。

一個人的專題是有比較辛苦,因為專題裡面很多事情都要自己去

想辦法處理,但是從中還是有學到很多東西,畢竟不論真的學到的東

西是多是少,從中學到的東西終究會變成自己的;而且研究過程遇到

問題的時候,老師都會蠻耐心的指導我,所以本專題能夠順利完成,

是真的很感謝專題指導老師的指教。

Page 6: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

目 錄

頁次

摘要

致謝

目錄 I-II

圖目錄 III-IV

第一章 緒論 1

1.1 前言 1

1.2 製作動機 1

1.3 研究過程 2

1.4 本專題會用到的硬體和軟體設備 3

第二章 製作系統相關:軟體簡介 4

2.1 淺談藍芽 4

2.2 Android簡介 5

2.3 什麼是CmoreCloud? 7

2.4 Android手機取得遙控電腦的關鍵 8

2.5 Cmore打包到手機 8

2.6 淺談C# 10

Page 7: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

I

第三章 製作系統相關:COM PORT遠端連線 11

3.1 淺談COM PORT 11

3.2 什麼是RS232? 12

3.3 RS232工作原理 13

第四章 系統製作 14

4.1 流程方塊圖 14

4.2 影像大頭貼操作流程 16

4.3 用CmorePaas設計一個手機遙控器 16

4.4 用COM PORT原理藉C#寫出遠端遙控的程式 19

4.5 透過藍芽讀取發出的Hex指令 24

4.6用photoshop製作影像大頭貼專用底圖 29

第五章 大頭貼系統設定 34

第六章 結論 39

參考文獻 40

附錄(參賽獎狀) 41

Page 8: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

II

圖 目 錄

頁次

圖2.1 acer筆記型電腦win 7系統裡的藍芽裝置管理 5

圖2.2 Google Play網頁 6

圖2.3 CmoreCloud雲端操作介面 7

圖2.4 APK QR Code是個打包軟體方便的設計 9

圖2.5 Microsoft Visual C# 2010 Express 介面 10

圖4.1 影像大頭貼要跟COM PORT和藍芽做系統結合 15

圖4.2 系統整合後的操作流程 16

圖4.3 用小畫家畫出的手機操作介面 17

圖4.4 IFTTT資料新增 17

圖 4.5 好用的命令字串 18

圖 4.6 平板電腦實測安裝結果 19

圖 4.7 在C#環境畫出視窗設計 20

圖 4.8 PC內建藍芽讀取的COM PORT位置 24

圖 4.9 BlueSoleil Space桌面捷徑 25

圖 4.10 BlueSoleil Space的工作環境 25

III

Page 9: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖4.11 「Transformer TF101」藍芽裝置變成綠色 26

圖4.12 在「Transformer TF101」按下右鍵 27

圖4.13 系統初期測試結果示意圖 28

圖4.14 程式執行結果放大示意圖 28

圖4.15 Adobe Photoshop 7.0工作環境介面 30

圖4.16 設定成「圖層0」 30

圖4.17 用photoshop將要入鏡的範圍挖空 31

圖4.18 學校底圖(相框風格) 32

圖4.19 學校底圖(融合風格) 32

圖4.20 學校底圖(明信片風格) 33

圖4.21 三張插畫風格(均跟畢業相關) 33

圖5.1 系統執行檔 34

圖5.2 將設計好的相框底圖放進指定資料夾 35

圖5.3 此Photo檔案用來新增相框底圖檔 35

圖5.4 <Frame>跟</Frame>之間將底圖檔名加進去 36

圖5.5 Subject為主旨,Body為內容 36

圖5.6 選擇相框 37

IV

Page 10: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖5.7 拍攝中請微笑 37

圖5.8 將拍好的照片直接在上面做文字編輯 38

圖5.9 傳送電子郵件 38

V

Page 11: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

第 一 章

緒 論

1.1 前言

除了現在的智慧型手機、平板電腦技術發達、趨向普及之外,再

加上資源取得方便,而且撰寫手機程式的軟體可以在網站自行下載取

得,不需要另外付費,所以運用手機當成專屬遙控器是成為可以發展

的技術之一。

而且不論是手機(平版電腦)或是個人桌上型電腦(筆記型電腦),

藍芽已經是很普及的無線連接的裝備了。

1.2 製作動機

為了增加影像大頭貼使用上的方便性,參與了這個專題研究,製

作出一個「遙控器」,期望將這操作便利的影像大頭貼變得更加便利;

就像電視機和冷氣機不都有一個可以做操控的遙控器嗎?如果沒有遙

控器的話,那麼每次要操作的時候就要花時間走到電器面前,雖然操

作的當下是不會耽誤太多時間,但如果把走到前面操作電器的時間長

期做個累積,其實還是很耗時間,而且時間久了也會覺得這樣很麻煩,

這就是為什麼要替影像大頭貼製作一個「遙控器」的原因。

1

Page 12: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

1.3 研究過程

一開始製作手機 APP 軟體的時候是選擇用 eclipse 軟體編寫,

eclipse不只是專門用來做 java語言開發,更可以用來做手機 android

的軟體開發,所以一開始個別寫下了「藍芽連結」、「模擬滑鼠操控模

式」、還有「連上 IP 位置」的不同 java 程式碼寫法,但將這三則程式

碼做整合以後,發現到有一些問題需要排除,但是參與本次的專題不

只是要做 APP 軟體,還需要用 Visual C#來製作 PC 的 COM PORT 通信(這

邊的 PC 會先用筆電做測試,測試完以後,把程式應用在影像大頭貼),

雖然中間遇到了跑程式的時候發生的逾時問題導致程式無法順利得跑

完,後來用別的方法解決方式之後,逾時問題大概在 2014 年 4 月中旬

解決了;至於平板電腦的手機操作介面,為了不花太多時間再處理程

式語言出現的 Bug 上,這裡的手機 APP 設計部分是用製作 APP 雲端平

台的「CmoreCloud」來製作。

2

Page 13: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

1.4 本專題會用到的硬體和軟體設備

硬體:

本系的影像大頭貼設備 x1

藍芽迷你接收器(規格 V4.0) x1

軟體:

CmoreCloud (APP 軟體開發)

Microsoft Visual C# 2010 Express

BlueSoleil Space

Adobe Photoshop 7.0

3

Page 14: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

第 二 章

製作系統相關:軟體簡介

2.1 淺談藍芽

藍芽技術在 1994 年開始蓬勃發展,最早技術是應用在行動電話和

免提裝置之間的無線通訊,只是藍芽普及的時間大約是在 2010 年,那

個時期的藍芽強調的是「省電」,而且各大手機廠牌出廠的手機、還有

各大廠牌電腦新出的電腦產品,幾乎都有藍芽連結和傳輸的功能,藍

芽便開始在生活中普遍應用。

藍芽的應用如下列特點:

一、電腦與周邊裝備的無線連線,如:滑鼠、鍵盤。

二、在一定的距離內,電腦與電腦之間的無線網路。

三、運用藍牙做檔案傳送,例如手機和手機之間可以傳送音樂、照片。

四、以前的有線裝置慢慢轉型成無線裝置,例如條形碼掃描器。

4

Page 15: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 2.1 acer 筆記型電腦 win 7 系統裡的藍芽裝置管理

2.2 Android 簡介

Android,中文俗名「安卓」,是以 Linux 作業系統為核心的行動

平台,最初由安迪·魯賓開發,作業系統通常是安裝在智慧型手機和平

版電腦上,從最早出來的 Android 1.0 到現今普遍的 Android 4.3 、

最新出來的 Android 4.4,它們的共通點是可以直接用手指觸控想要執

行的指令,而且還能上網下載自己想要安裝的手機 APP 軟體。

藉此可以觀察出一個事實:開發 APP 軟體在這個時代已經相當普

遍,只是開發 APP 的方式也很多種,如用 elipse 做 java 開發 android

應用程式、用 Objective-C(在 apple 手機適用),或者是下一章節要探

5

Page 16: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

討的「CmoreCloud」做 APP 手機軟體開發,也是一個開發 APP 程式的

選擇。

圖 2.2 Google Play 網頁

網址如下:https://play.google.com/store/apps/top?hl=zh-TW

6

Page 17: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

2.3 什麼是 CmoreCloud?

CmoreCloud 是位於新竹的長茂公司出產的製作手機 APP 的雲端操

作介面,它簡化了部分編輯手機程式的步驟,因此不需要花太多時間

在編輯程式碼上,直接在此介面設定需要使用的指令即可。

要學會操作 CmoreCloud,首先要先有以下的設計和學習過程:

一、要先對準備設計的 APP 程式有所構思和創意想法。

二、編輯手機 APP 程式會出現的手機頁面,存成 jpeg 檔。

三、申請好的帳號密碼,登入 CmorePaaS。

四、每頁手機頁會出現的畫面、製作 IFTTT 功能設定。

圖 2.3 CmoreCloud 雲端操作介面

7

Page 18: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

2.4 Android 手機取得遙控電腦的關鍵

用手機取得遙控電腦的關鍵在於 Com Port 通信指令,要讓兩台不

同硬體、不同性質、不同軟體的機器取得連結,讓手機 APP 可以順利

操作影像大頭貼。

因為本科系設計的影像大頭貼軟體是用 C++設計的,所以原則上

PC 的 Com Port 通信以 C#為主,會選 C#的原因是 C#適合為獨立和嵌入

式的系統或是軟體編寫程式,影像大頭貼正是個獨立性的應用軟體,

而 Android 手機(平版電腦)是個獨立性的作業系統,而且 C#是由 C++

進化的程式碼,比較不會有衝突。

2.5 Cmore 打包到手機

CmoreCloud 有一個叫做「線上打包 APK QR Code」的功能,製作

完一個手機軟體後,會產生一個 APK 的 QR Code,此時用手機(平板電

腦)下載專門感應條碼的軟體,然後拍照下來,接著便會自動下載然後

安裝到手機(平板電腦),前提是手機(平板電腦)要有網路連線。

8

Page 19: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 2.4 APK QR Code 是個打包軟體方便的設計

9

Page 20: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

2.6 淺談 C#

C#的發音為「C Sharp」,是微軟公司在西元 2000 年發行的,擁有

類似 Visual Basic 的快速開發能力,但又擁有像 Java 相似的軟體開

發方式,它適合獨立和嵌入式的系統編寫程式,這次寫的 COM PORT 程

式是用 C#來撰寫,可以將這個程式嵌入在影像大頭貼裡面實現遙控模

式,下一章會詳細介紹 COM PORT。

圖 2.5 Microsoft Visual C# 2010 Express 介面

10

Page 21: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

第 三 章

製作系統相關:COM PORT遠端連線

3.1 淺談COM PORT

電腦系統的 COM PORT 有 9 腳位與 25 腳位兩種規格,這邊以 9 腳

位做一個深入探討。

從 Pin1 到 Pin9 都有不同的功能,要同時運用九個功能去完成一

個 C#遠端連線程式:(轉換為 COM 1 到 COM 9)

Pin1 (CD) Carrier Detect 電腦讀到載波被偵測。

Pin2 (RXD) Receiver 接收 data。

Pin3 (TXD) Transmit 傳送 data。

Pin4 (DTR) Data Terminal Ready 電腦傳達給數據機進行傳輸。

Pin5 (GND) Ground 地線。

Pin6 (DSR) Data Set Ready 資料一切準備就緒。

Pin7 (RTS) Request To Send 將資料送出。

11

Page 22: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

Pin8 (CTS) Clear To Send 傳資料過來。

Pin9 (RI) Ring Indicator 數據機通知電腦有電話打來。

3.2 什麼是 RS232?

全名「EIA-RS-232」,是美國電子工業聯盟(EIA)制定的序列資

料通訊的介面標準,通常用在電腦串列埠連線。

RS232 最常見的設定有三個主要元素:鮑率(Baud Rate)、同位檢

查(Parity Check)、停止位(Stop Bit)。

鮑率指從一個裝置發到另一個裝置的位元率,本專題剛好會用到

一個裝置發到另一個裝置的部分,故鮑率算是本專題中非常重要的元

素;同位檢查是用來驗證資料的正確性,當傳輸資料的途中發生錯誤

的時候,同時會發出錯誤的警告,並且保護好資料不會因為錯誤造成

系統損壞;停止位是在每個位元組傳輸之後發送的,用來幫助接受訊

號和要接收資料的硬體做一個同步的動作。

12

Page 23: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

3.3 RS232 工作原理

RS232 的特色是使用一個起始位元後面緊跟 7 或 8 個資料位元,

然後是可選的奇偶校驗位元,最後是一或兩個停止位元。

由此可知,發送一個字元至少需要 10 位元,帶來的一個好的效果

是使全部的傳輸速率,發送訊號的速率以 10 劃分。

本專題正是要運用 COM PORT 中的 RS232 的傳輸工作原理去製作一

個硬體跟硬體互相連接的系統,好讓手機可以遠端控制影像大頭貼,

下一章會介紹本專題的系統製作過程。

13

Page 24: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

第 四 章

本專題的系統製作

4.1 流程方塊圖

這個部分主要是在陳述本專題要弄遠端控制的系統流程,因為藍

芽取材方便;就算不是智慧型手機,也會有藍芽功能,例如幾年前還

算盛行的 Sony E ricsson 照相手機,記得以前有陣子有照相手機的時

期,會用藍芽跟同學交換資料;而這次要做的影像大頭貼遠端監控軟

體也會運用到藍芽交換資料的特點,可見藍芽的方便性超乎想像;不

像紅外線成本過高、也不像 Wifi 有時候會因為不穩定而斷線。

手機硬體的部分,是選擇用研究室的平板電腦去操作,因為現在

用的手機並沒有藍芽功能。

不過手機硬體和 PC 硬體兩端都要有藍芽感應的方式,使得配置成

功,不然只有一端硬體有藍芽功能,很明顯還是不夠的。

14

Page 25: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.1 影像大頭貼要跟 COMPORT 和藍芽做系統結合

15

Page 26: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

4.2 影像大頭貼操作流程

本影像大頭貼是直接用手指去觸控螢幕,不過完成了遠端控制的

系統之後,他會多一個偵測藍芽的功能,然後如果有找到裝置的化變

可以順利用平板電腦操作影像大頭貼,沒找到裝置的話反之。

圖 4.2 系統整合後的操作流程

4.3 用 CmorePaas 設計一個手機遙控器

首先畫出一張 320x480 大小的 APP 介面。(左箭頭是上一頁相框、右箭

頭是下一頁相框。)

16

Page 27: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.3 用小畫家畫出的手機操作介面

登入 CmorePaas 手機設計的雲端網頁,將圖 4.3 上的五個按鈕在 Cmore

IO 介面設定五個 Hex 傳輸值(733113、733213、733313、733413、

733513):

圖 4.4 IFTTT 資料新增

17

Page 28: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

設定上一頁所敘述的五個傳輸值的原理是:當我發送一個指令的時候,

因為要使用藍芽功能去做一個遠端控制,這個時候藍芽的命令數值就

得扮演一個很重要的角色了,這也是 ComrePaas 操作便利的地方,因

為它省去了許多密密麻麻的程式碼。

接著會自動產生命令字串,接著就要手動將那些命令字串套用在手機

操作按鈕上。(僅要手動框出感應範圍即可)

圖 4.5 好用的命令字串

將設定好的手機 APP 打包(參考圖 2.4)成 APK 檔,就這樣一個 APP 手機

軟體就這樣誕生了!

18

Page 29: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.6 平板電腦實測安裝結果

4.4 用 COM PORT 原理藉 C#寫出遠端遙控的程式

用 CmoreCloud 製作出來的手機軟體去發出指令的時候,那個遙控程式

就必須讀取我傳出的數值,這就是這個程式的操作原理。

首先安裝好 Microsoft Visual C# 2010 Express 後,將它開啟,將程

式名稱命名為 MainForm2,然後先在 MainForm2.cs[設計]的部分畫上

程式要有的功能:上面的大框框主要是用來顯示傳達的指令數值,下

頭的功能分別為要選的通訊埠(COM1~COM9)、要使用的鮑率、同步位元、

資料位元(7 或 8)、結束位元、還有 COM PORT 開/關。

19

Page 30: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.7 在 C#環境畫出視窗設計

以下的程式碼因為有些長,故擷取其中一段比較重要的程式段落:

20

Page 31: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

這段程式碼的主要意思是會先通過 RS232 中 COM PORT 的虛擬設備,然

後使用藍芽做一個具體連線,這邊先預設其中一個設備名稱為 COM8,

另一個設備名稱為 COM4,但實際上連線以那台電腦讀取到的 COM PORT

位置為主;接著開始尋找通訊埠,如果找不到的話,那麼這個程式將

不會繼續執行,如果有找到通訊埠並且連線成功的話,便會進入下一

個程式執行階段:接收可變長度封包,接著判斷共收到多少資料,再

用 Invoke 事件處理資料函數。

因為電腦要讀懂上述在 CmorePaas 設定的 Hex 數值,所以需要寫入一

個可以轉換成 Text 文字的數值,好讓電腦可以判讀那五組 Hex 數值,

以下 ASCII 數值轉換如下:

21

Page 32: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

733113 → s1 733213 → s2 733313 → s3

733413 → s4 733513 → s5

在設計這個 C#程式的時候,中間有遇到嚴重的逾時問題(程式執行到一

半室窗會跳開,這個時候便會出現一個錯誤訊息「逾時問題

System.TimeoutException timeoutexception 未處理 作業逾時」,

後來知道除了程式碼太雜亂,還有寫法也有一些錯誤,因為一開始是

用polling IO微處理機的寫法,但因為是要在電腦Windows系統執行,

所以需要換另外一種事件處理函數的寫法來撰寫程式,否則 timeout

作業逾時問題還是會卡在原點,然後終究沒有辦法解決,因此最後程

式碼修改後,下面其中一段便是能否執行成功的關鍵:

22

Page 33: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

把 COM PORT 讀取處、鮑率、同位元、同位檢查、停止位等連接 COM

PORT 的功能寫的非常詳細而且精簡,這樣不但解決了程式碼行數太多

讀取很慢的情況,還可以順利的解決那段時間在研究的逾時問題。

23

Page 34: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

4.5 透過藍芽讀取發出的 Hex 指令

這個部分必須兩邊都要開啟藍芽,然後去做一個連線,其實一開

始 PC 硬體的部分是先用內建的藍芽,因為就像前面 1.1 前言的章節提

的,藍芽生活取得方便,然後下圖便是內建藍芽讀取 COM PORT 的視窗:

圖 4.8 PC 內建藍芽讀取的 COM PORT 位置

內建的藍芽並沒有辦法跟 Cmore 的手機軟體藍芽的部分成功的連

線,是因為兩者系統無法相容的關係,因此雖然PC本身就有藍芽功能,

但為了可以成功跟 Cmore 做連線,用筆記型電腦裝置安裝了這套叫做

BlueSoleil Space 的軟體:

24

Page 35: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.9 BlueSoleil Space 桌面捷徑

安裝完畢並且重新開機後,便能正常使用 BlueSoleil Space。

圖 4.10 BlueSoleil Space 的工作環境

上圖的「Transformer TF101」是要連接的藍芽裝置(因為這裝置要拿

來當影像大頭貼的遠端遙控器),因此將此裝置跟筆記型電腦藍芽裝置

25

Page 36: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

配置好,然後將平板電腦內打包好的影像大頭貼 APP 程式打開連結藍

芽後,BlueSoleil Space 上顯示的「Transformer TF101」手機圖案便

會從藍色轉換為綠色。

圖 4.11 「Transformer TF101」藍芽裝置變成綠色

接著在工作介面顯示的「Transformer TF101」裝置按一下滑鼠右

鍵,當按下右鍵後有顯示一個選項「中斷連線 藍芽序列埠(COM4)」,

就表示這個時候的 BlueSoleil Space 不只跟要配對的藍芽裝置連線成

功,也有成功地支援 COM PORT 連線,不過前提是要在 BlueSoleil Space

26

Page 37: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

設定好連接 COM PORT 的時候不需要經過授權,不然很容易連線不成

功;而在這邊,連接感應到的 COM PORT 為 COM4。

圖 4.12 在「Transformer TF101」按下右鍵

接著進一步做出初期成果,因為要實現手機 APP 的 Hex(16 進位)

指令傳達到電腦 Text(10 進位)的情境,因此,比如我要傳達 733113

的 Hex 指令,那麼當指令傳送到筆記型電腦上的時候,就會轉換為

s1(10 進位),733213 便轉換成 s2、733313 轉換成 s3……以此類推。

27

Page 38: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.13 系統初期測試結果示意圖

圖 4.14 程式執行結果放大示意圖

28

Page 39: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

4.6 用 photoshop 製作影像大頭貼專用底圖

大概在 2014 年 5 月中旬的時候,因為考量到本系影像大頭貼庫存

的創意底圖不足,無法適用於各種慶典活動上,尤其四年級學長姐畢

業潮將近,在這邊,我針對畢業典禮做出相關主題的相框底圖,不但

可以讓使用者在選擇相框底圖的時候有更多的選擇,更可以在今年學

長姐的畢業典禮上讓本系上的影像大頭貼派上用場。

相框底圖設計這邊我選擇 photoshop,因為 photoshop 可以自行設

計像素(這裡的像素均設為 1024x768),也可以加入一些創意特效,重

點是可以把同一張圖、不同元素的圖層合而為一,然後將要入鏡的範

圍挖空處理,不過前提是要把相框底圖存檔成 png 檔,因為影像大頭

貼可以放入的相框底圖檔案僅能支援 png 檔。

29

Page 40: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.15 Adobe Photoshop 7.0 工作環境介面

這邊的重點比較偏向於挖空入鏡的部分,右下角的「背景」要設

定成「圖層 0」。

圖 4.16 設定成「圖層 0」

30

Page 41: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

接著運用套索工具和魔術棒工具選取要挖空的範圍,然後用

delete 鍵將要挖空的範圍刪除,存成 png 檔。

下圖是其中一個相框底圖將要入鏡的範圍挖空後呈現的狀態:

圖 4.17 用 photoshop 將要入鏡的範圍挖空

本學期製作了十三張跟畢業相關的畢業相框底圖,以這十三張相

框底圖分類為四種風格:

31

Page 42: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.18 學校底圖(相框風格)

圖 4.19 學校底圖(融合風格)

32

Page 43: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 4.20 學校底圖(明信片風格)

圖 4.21 三張插畫風格(均跟畢業相關)

33

Page 44: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

第 五 章

大頭貼系統設定

(1)先把大頭貼程式直接放在D槽。

圖 5.1 系統執行檔

(2)將底圖放在「Photo」中「Content」資料夾,檔名按照順序從「own1」

到「own13」

34

Page 45: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 5.2 將設計好的相框底圖放進指定資料夾

(3)打開「bin」資料夾裡面的 Photo 檔,按下右鍵的「編輯」,將底圖

檔名加進去。

圖 5.3 此 Photo 檔案用來新增相框底圖檔

35

Page 46: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 5.4 <Frame>跟</Frame>之間將底圖檔名加進去

(4)<E Mail>編輯當照片傳到電子信箱的時候會出現的主旨和內容。

圖 5.5 Subject 為主旨,Body 為內容

36

Page 47: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 5.6 選擇相框

圖 5.7 拍攝中請微笑

37

Page 48: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

圖 5.8 將拍好的照片直接在上面做文字編輯

圖 5.9 傳送電子郵件

38

Page 49: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

第 六 章

結 論

長達一年的專題製作就這樣告一段落,雖然過程中會遇到一些問

題,但在老師耐心指導下,終於完成本次專題製作,也明瞭 RS232 不

只是一個九孔插頭,它甚至可以拿來應用在軟體執行上,而這一次,

用來實現在影像大頭貼地遠端監控上。

本專題主要是用 CmoreCloud & C#來弄出可以依照不同的 ASCII

碼遠端操控的影像大頭貼遙控器,其次是設計相框底圖。

如果可以,希望可以將這一年弄的東西,如期有一個專屬遙控器

可以替影像大頭貼傳達指令。

39

Page 50: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

參考文獻

[1] Visual Basic 與 RS232 串列通訊控制

(汰捷資訊 范逸之、陳立元、賴俊朋 編著)

[2] http://zh.wikipedia.org/wiki/Wikipedia:%E9%A6%96%E9%A1%B5

(維基百科)

[3] http://baike.baidu.com/ (百度百科)

[4] http://www.sunfar.com.tw/dirdesc.aspx?dict_no=C0125

[5] http://www.dotblogs.com.tw/billchung/archive/2012/01/04/64319.aspx

40

Page 51: 崑 山 科 技 大 學 電腦與通訊系 四技部 專 題 製 作 報 告 影像大頭 …ir.lib.ksu.edu.tw/bitstream/987654321/23289/2/專題製作.pdf · eclipse不只是專門用來做java語言開發,更可以用來做手機android

附錄 (參賽獎狀)

41