基于HTML5的PPT自動(dòng)選擇模板設(shè)計(jì)

針對(duì)傳統(tǒng)PPT在制作和播放中依賴(lài)于Office軟件、不能很好的解決跨操作系統(tǒng)和終端設(shè)備、需要專(zhuān)門(mén)配置翻頁(yè)激光筆無(wú)線遙控播放等問(wèn)題，提出了一個(gè)基于HTML5新特性和WIFI無(wú)線通信技術(shù)相結(jié)合的手機(jī)無(wú)線遙控PPT智能模板的解決方案。通過(guò)實(shí)現(xiàn)HTML5中的JS接口和CSS樣式設(shè)計(jì)，構(gòu)建了基于瀏覽器模式的PPT通用智能模板;利用模板設(shè)計(jì)的PPT存放于云端，PPT播放采用Socket無(wú)線通信技術(shù)，通過(guò)WIFI訪問(wèn)云端，基于C/S模式設(shè)置服務(wù)器和客戶(hù)端的通訊地址，其中手機(jī)扮演客戶(hù)端發(fā)送控制指令，存儲(chǔ)PPT或PPT智能模板的電腦終端作為服務(wù)器端執(zhí)行指令，實(shí)現(xiàn)手機(jī)無(wú)線遙控幻燈片的播放。

1、引言(Introduction)

目前廣泛使用的PPT模板都是利用微軟公司的Office中包含的PowerPoint軟件制作的，但當(dāng)前這種教學(xué)PPT的使用還存在以下問(wèn)題：(1)老師只能在講臺(tái)前面手動(dòng)或者專(zhuān)門(mén)配置投影儀無(wú)線遙控翻頁(yè)激光筆來(lái)實(shí)現(xiàn)翻頁(yè)，或影響教學(xué)效果，或增加學(xué)校開(kāi)支。(2)老師需要攜帶存儲(chǔ)了制作好PPT的筆記本電腦，沒(méi)有很好的解決跨終端設(shè)備播放的問(wèn)題。(3)可能由于PPT播放環(huán)境與制作環(huán)境不同從而無(wú)法很好的展現(xiàn)想要的播放效果。

造成以上問(wèn)題的原因主要有以下兩點(diǎn)：(1)沒(méi)有很好的解決“低成本”無(wú)線遙控PPT的播放;(2)局限于微軟的PPT，從而限制于操作系統(tǒng)和終端設(shè)備等。然而Web技術(shù)的發(fā)展，為幻燈片的制作方式提供了另外的可能，使用HTML5技術(shù)能夠滿足制作PPT模板的要求。HTML5因其跨平臺(tái)、支持多設(shè)備、及時(shí)更新等優(yōu)點(diǎn)，可以很好地解決上述問(wèn)題;同時(shí)由于目前智能手機(jī)的普及，也為很好的實(shí)現(xiàn)“低成本”無(wú)線遙控提供了可能。經(jīng)研究發(fā)現(xiàn)可以設(shè)計(jì)一個(gè)基于HTML5的智能模板和采用智能手機(jī)來(lái)實(shí)現(xiàn)無(wú)線遙控的系統(tǒng)。

2、系統(tǒng)總體設(shè)計(jì)(The overall design of the system)

2.1、總體設(shè)計(jì)思想

HTML5具有豐富的API，支持2D或3D繪圖，能夠播放音頻和視頻，能夠產(chǎn)生超強(qiáng)的視覺(jué)效果，智能手機(jī)的無(wú)線上網(wǎng)功能不僅可以應(yīng)用于通訊和娛樂(lè)，還可以應(yīng)用于生活實(shí)踐中。因而系統(tǒng)設(shè)計(jì)的基本思想是將兩種新技術(shù)相結(jié)合，解決傳統(tǒng)依賴(lài)于微軟操作系統(tǒng)的PPT制作和應(yīng)用問(wèn)題。系統(tǒng)設(shè)計(jì)的總體運(yùn)行架構(gòu)。

圖1 系統(tǒng)基本運(yùn)行架構(gòu)

圖1展示了基于HTML5的PPT智能模板設(shè)計(jì)的基本思想：首先利用HTML5新特性在電腦端設(shè)計(jì)PPT的通用智能模板;然后利用PPT智能模板設(shè)計(jì)制作符合個(gè)人需求的幻燈片，完成之后將其上傳到云端;當(dāng)需要使用幻燈片時(shí)在電腦端使用瀏覽器打開(kāi);最后將智能手機(jī)與電腦進(jìn)行互聯(lián)，這樣即可使用智能手機(jī)控制幻燈片的播放。

2.2、HTML5智能模板設(shè)計(jì)

2.2.1、幻燈片智能模板結(jié)構(gòu)設(shè)計(jì)

使用HTML5新特性制作幻燈片模板的設(shè)計(jì)原則是：盡量使結(jié)構(gòu)清晰、簡(jiǎn)潔，并盡可能的參照傳統(tǒng)幻燈片的結(jié)構(gòu)。HTML5智能模板的結(jié)構(gòu)設(shè)計(jì)為：

(1)PPT到html的轉(zhuǎn)換：因?yàn)槭褂肏TML5制作的PPT智能模板為html格式，意味著一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)于一個(gè)完整的幻燈片，則每一頁(yè)幻燈片的頁(yè)面對(duì)應(yīng)一個(gè)元素。考慮到html格式的幻燈片頁(yè)面是同時(shí)顯示的，則必須將要顯示的幻燈片區(qū)塊設(shè)置為透明，其余的幻燈片區(qū)塊顯示設(shè)置為不透明，這樣即可保持每次都只有一個(gè)頁(yè)面顯示。

(2)頁(yè)面標(biāo)簽設(shè)計(jì)：每一頁(yè)幻燈片區(qū)塊都要確定一個(gè)對(duì)應(yīng)的id值，id的命名規(guī)律為：#slideX,其中X是指第幾個(gè)頁(yè)面。該id值對(duì)應(yīng)于幻燈片頁(yè)面的標(biāo)簽值，當(dāng)切換頁(yè)面時(shí)，瀏覽器的地址欄會(huì)發(fā)生改變，即幻燈片頁(yè)面的標(biāo)簽值發(fā)生改變。

(3)頁(yè)面內(nèi)容設(shè)計(jì)：幻燈片的每頁(yè)內(nèi)容必須和傳統(tǒng)的幻燈片中的元素進(jìn)行對(duì)應(yīng)，常見(jiàn)的固定元素有標(biāo)題(h1)、次標(biāo)題(h2)、正文段落、圖片等。另外可以考慮設(shè)計(jì)一些常用的頁(yè)面內(nèi)容，。

圖2 系統(tǒng)業(yè)務(wù)流程圖

系統(tǒng)采用Socket通信，雙方首先要獲取到IP地址。客戶(hù)端IP的獲取可以通過(guò)打開(kāi)手機(jī)的WiFi，連接上一個(gè)無(wú)線網(wǎng)絡(luò)即可根據(jù)動(dòng)態(tài)主機(jī)配置協(xié)議動(dòng)態(tài)分配到IP地址;服務(wù)端則通過(guò)連上一個(gè)無(wú)線網(wǎng)絡(luò)也可動(dòng)態(tài)分配到IP地址，從而進(jìn)行通信連接。通信的過(guò)程為：首先是服務(wù)端獲取到自身IP并顯示給用戶(hù)，用戶(hù)將該IP地址作為服務(wù)端信息輸入到客戶(hù)端，建立Socket連接;然后客戶(hù)端發(fā)送控制信息給服務(wù)端，最后服務(wù)端將接收到的控制信息利用Java中的Robot類(lèi)執(zhí)行這個(gè)輸入事件[5]。

3、主要技術(shù)實(shí)現(xiàn)(The main technology)

3.1、智能模板實(shí)現(xiàn)

智能模板設(shè)計(jì)包括基本功能實(shí)現(xiàn)和特殊元素處理。

3.1.1、基本功能實(shí)現(xiàn)

(1)根據(jù)設(shè)計(jì)完成的結(jié)構(gòu)將所要顯示的內(nèi)容加入到網(wǎng)頁(yè)文件中。

(2)為文檔內(nèi)容加上初始樣式，確定初始界面。

(3)頁(yè)面初始化，通過(guò)resize()函數(shù)更改當(dāng)前顯示頁(yè)面的大小，確定每個(gè)幻燈片區(qū)塊元素的id值，為當(dāng)前頁(yè)面加上屬性——偽類(lèi):target，并確定幻燈片的頁(yè)面總數(shù)。

(4)通過(guò)更改每個(gè)幻燈片區(qū)塊元素的屬性——偽類(lèi):target來(lái)決定顯示哪一張幻燈片。

(5)使用JavaScript實(shí)現(xiàn)翻頁(yè)函數(shù)功能。

(6)對(duì)相應(yīng)的鼠標(biāo)事件和鍵盤(pán)事件進(jìn)行事件監(jiān)聽(tīng)[6]。

3.1.2、特殊元素處理

幻燈片頁(yè)面內(nèi)部的動(dòng)畫(huà)可通過(guò)特殊的class進(jìn)行生成，設(shè)置成未顯示和顯示后兩者樣式,這樣用戶(hù)可以通過(guò)切換動(dòng)畫(huà)觀察到頁(yè)內(nèi)的動(dòng)畫(huà)效果。

3.1.3、兼容考慮和擴(kuò)展設(shè)想

系統(tǒng)需要考慮HTML5的CSS Hack技術(shù)對(duì)瀏覽器的兼容。能夠在當(dāng)前頁(yè)面編輯修改幻燈片,無(wú)需通過(guò)后臺(tái)代碼進(jìn)行修改，能夠?qū)⒕W(wǎng)頁(yè)在正常網(wǎng)頁(yè)和幻燈片模式下切換。

3.2、智能手機(jī)遙控技術(shù)實(shí)現(xiàn)

3.2.1、服務(wù)器連接配置

服務(wù)端信息錄入為無(wú)線遙控PPT播放系統(tǒng)手機(jī)控制端的第一個(gè)Activity，在該Activity中設(shè)計(jì)了提供增加服務(wù)器信息的ImageViewButton和退出ImageViewButton。點(diǎn)擊增加服務(wù)器信息按鈕會(huì)彈出一個(gè)對(duì)話框，讓用戶(hù)填入連接名和服務(wù)器IP。填寫(xiě)完信息用戶(hù)點(diǎn)擊確認(rèn)之后，系統(tǒng)檢查IP地址是否合法，若正確則保存用戶(hù)填入的信息。

顯示的連接信息包括連接名、錄入時(shí)間、提供編輯按鈕和刪除按鈕。點(diǎn)擊編輯按鈕可以讀取并修改該連接信息，包括服務(wù)端IP地址和連接名。若信息格式正確則在SharedPreferences中更新，否則彈出對(duì)話框顯示錯(cuò)誤信息。點(diǎn)擊刪除按鈕就從SharedPreferences刪除，并使用Handler進(jìn)行更新UI。

最后點(diǎn)擊連接信息行就可以進(jìn)行連接。若沒(méi)有打開(kāi)WiFi則彈出對(duì)話框通知用戶(hù)并請(qǐng)求打開(kāi)WiFi;設(shè)置成功點(diǎn)擊返回即可回到ConnectionActivity。

3.2.2、無(wú)線控制設(shè)計(jì)

由ConnectionActivity啟動(dòng)了MainActivity后，根據(jù)Activity的生命周期，應(yīng)該在該Activity成為交互Activity即獲取焦點(diǎn)之前建立連接，即在OnResume()生命周期方法中采用AsyncTask來(lái)異步建立網(wǎng)絡(luò)連接。在繼承AsyncTask重寫(xiě)doInBackground()時(shí)建立連接，然后在onPostExecute()方法中進(jìn)行異步更新UI。因?yàn)橛锌赡苡脩?hù)忘了啟動(dòng)服務(wù)器，那么連接就會(huì)超時(shí)，故要捕獲超時(shí)異常并彈出對(duì)話框提示用戶(hù)可能的錯(cuò)誤和處理辦法。

在建立連接的方式中，選擇采用Socket.connect()方法來(lái)建立連接。處理完連接問(wèn)題之后，就可以發(fā)送控制指令了，由于動(dòng)作比較多，故定義常量類(lèi)來(lái)進(jìn)行控制指令描述,也方便序列化。考慮到操作的便捷性，系統(tǒng)還提供了通過(guò)音量鍵來(lái)實(shí)現(xiàn)上下翻頁(yè)，用戶(hù)不用看手機(jī)屏幕即可方便的實(shí)現(xiàn)翻頁(yè)操作。

3.2.3、鼠標(biāo)移動(dòng)設(shè)計(jì)

對(duì)于鼠標(biāo)的控制主要是利用手機(jī)的觸摸屏來(lái)實(shí)現(xiàn)的，對(duì)觸摸屏有DOWN、MOVE和UP三種事件。可以充分利用MOVE事件來(lái)獲取手指在手機(jī)屏幕的坐標(biāo)，然后發(fā)送到服務(wù)端即可。控制電腦鼠標(biāo)的移動(dòng)過(guò)程有兩種方式，一種是進(jìn)行手機(jī)屏幕和電腦屏幕的靜態(tài)映射，即由手機(jī)的位置乘上電腦屏幕相對(duì)手機(jī)屏幕的倍數(shù)就可進(jìn)行映射，這種方式的缺點(diǎn)在于移動(dòng)連續(xù)性不是很好，在完成一次移動(dòng)之后重新移動(dòng)則無(wú)法在原來(lái)的基礎(chǔ)上移動(dòng)。另一種映射方式是根據(jù)手機(jī)屏幕的范圍和用戶(hù)移動(dòng)的習(xí)慣，將手機(jī)屏幕映射到以當(dāng)前位置為中心的一個(gè)矩形區(qū)域，這樣可以解決移動(dòng)連續(xù)性的問(wèn)題。具體實(shí)現(xiàn)是在第一種方式的基礎(chǔ)上再形成一種坐標(biāo)映射，即首先使用第一種方式來(lái)獲知實(shí)際的電腦鼠標(biāo)相對(duì)電腦屏幕的位置，然后計(jì)算矩形范圍進(jìn)行第二次映射，最后轉(zhuǎn)換為實(shí)際的坐標(biāo)發(fā)送到電腦進(jìn)行執(zhí)行。

3.2.4、服務(wù)端設(shè)計(jì)

服務(wù)端最基本的工作是接收客戶(hù)端的連接請(qǐng)求和執(zhí)行發(fā)送過(guò)來(lái)的控制指令。考慮到在服務(wù)器一次運(yùn)行的過(guò)程中客戶(hù)端可能會(huì)多次連接服務(wù)器，故在接收客戶(hù)端的連接請(qǐng)求時(shí)必須采用多線程來(lái)實(shí)現(xiàn)。由于一臺(tái)電腦在同一個(gè)時(shí)刻肯定只能有一個(gè)手機(jī)來(lái)控制，故采用While()循環(huán)來(lái)實(shí)現(xiàn)，這樣只有在Accept()成功一次并執(zhí)行完該次連接才會(huì)接收下一次的連接請(qǐng)求。由于一次Socket通信是采用一次長(zhǎng)連接，故需要While(true)的形式來(lái)不斷的接收客戶(hù)端發(fā)送過(guò)來(lái)的控制指令然后執(zhí)行，而不能一次性執(zhí)行了一個(gè)動(dòng)作就結(jié)束了，否則這樣反序列化的header信息不一致，會(huì)造成失敗異常。具體執(zhí)行這個(gè)控制指令時(shí)采用Robot類(lèi)提供的方法來(lái)進(jìn)行，Robot類(lèi)用于為測(cè)試自動(dòng)化、自運(yùn)行演示程序和其他需要控

制鼠標(biāo)和鍵盤(pán)的應(yīng)用程序生成本機(jī)系統(tǒng)輸入事件。Robot的主要目的是便于Java平臺(tái)實(shí)現(xiàn)自動(dòng)測(cè)試，。通過(guò)實(shí)驗(yàn)結(jié)果可知傳統(tǒng)方式制作的PPT與基于HTML5制作的Web版幻燈片相比，Web版的幻燈片能夠達(dá)到與傳統(tǒng)幻燈片類(lèi)似的效果，甚至能達(dá)到視覺(jué)沖擊力更好的顯示效果。

圖3 傳統(tǒng)PPT效果圖

圖4 Web版幻燈片效果圖

(2)實(shí)驗(yàn)表明該系統(tǒng)可以很好的解決教學(xué)過(guò)程中無(wú)線遙控PPT播放問(wèn)題，還證明了系統(tǒng)具有良好的穩(wěn)定性和易操作性方便更新和拓展。

5、結(jié)論(Conclusion)

本文提出的基于HTML5的幻燈片智能模板設(shè)計(jì)和基于Socket的Android手機(jī)遠(yuǎn)程遙控系統(tǒng)是可行的。它具有以下特點(diǎn):(1)無(wú)需PowerPoint軟件即可制作幻燈片。(2)幻燈片播放時(shí)無(wú)需時(shí)刻使用鼠標(biāo)進(jìn)行控制，能夠用智能手機(jī)進(jìn)行播放，展示了無(wú)線網(wǎng)和智能手機(jī)的強(qiáng)大功能和魅力。(3)該幻燈片智能模板和智能遙控系統(tǒng)能夠采用新技術(shù)實(shí)現(xiàn)傳統(tǒng)幻燈片的功能，能夠展示HTML5的特殊性能，所制作的幻燈片比傳統(tǒng)PPT更加漂亮。(4)不受操作系統(tǒng)的限制，同時(shí)支持多終端包括平板、手提電腦、臺(tái)式電腦等通過(guò)網(wǎng)址進(jìn)行訪問(wèn)，軟硬件兼容性更好。

更多相關(guān)閱讀