基于HTML5的PPT智能模板设计( 二 ) _知识经验

图2 系统业务流程图
系统采用Socket通信，双方首先要获取到IP地址。客户端IP的获取可以通过打开手机的WiFi，连接上一个无线网络即可根据动态主机配置协议动态分配到IP地址;服务端则通过连上一个无线网络也可动态分配到IP地址，从而进行通信连接。通信的过程为：首先是服务端获取到自身IP并显示给用户，用户将该IP地址作为服务端信息输入到客户端，建立Socket连接;然后客户端发送控制信息给服务端，最后服务端将接收到的控制信息利用Java中的Robot类执行这个输入事件[5] 。
3、主要技术实现(The main technology)
3.1、智能模板实现
智能模板设计包括基本功能实现和特殊元素处理。
3.1.1、基本功能实现
(1)根据设计完成的结构将所要显示的内容加入到网页文件中。
(2)为文档内容加上初始样式，确定初始界面。
(3)页面初始化，通过resize()函数更改当前显示页面的大小，确定每个幻灯片区块元素的id值，为当前页面加上属性——伪类:target，并确定幻灯片的页面总数。
(4)通过更改每个幻灯片区块元素的属性——伪类:target来决定显示哪一张幻灯片。
(5)使用JavaScript实现翻页函数功能。
(6)对相应的鼠标事件和键盘事件进行事件监听[6] 。
3.1.2、特殊元素处理
幻灯片页面内部的动画可通过特殊的class进行生成，设置成未显示和显示后两者样式,这样用户可以通过切换动画观察到页内的动画效果。
3.1.3、兼容考虑和扩展设想
系统需要考虑HTML5的CSS Hack技术对浏览器的兼容。能够在当前页面编辑修改幻灯片,无需通过后台代码进行修改，能够将网页在正常网页和幻灯片模式下切换。
3.2、智能手机遥控技术实现
3.2.1、服务器连接配置
服务端信息录入为无线遥控PPT播放系统手机控制端的第一个Activity，在该Activity中设计了提供增加服务器信息的ImageViewButton和退出ImageViewButton 。点击增加服务器信息按钮会弹出一个对话框，让用户填入连接名和服务器IP 。填写完信息用户点击确认之后，系统检查IP地址是否合法，若正确则保存用户填入的信息。
显示的连接信息包括连接名、录入时间、提供编辑按钮和删除按钮。点击编辑按钮可以读取并修改该连接信息，包括服务端IP地址和连接名。若信息格式正确则在SharedPreferences中更新，否则弹出对话框显示错误信息。点击删除按钮就从SharedPreferences删除，并使用Handler进行更新UI 。
最后点击连接信息行就可以进行连接。若没有打开WiFi则弹出对话框通知用户并请求打开WiFi;设置成功点击返回即可回到ConnectionActivity 。
3.2.2、无线控制设计
由ConnectionActivity启动了MainActivity后，根据Activity的生命周期，应该在该Activity成为交互Activity即获取焦点之前建立连接，即在OnResume()生命周期方法中采用AsyncTask来异步建立网络连接。在继承AsyncTask重写doInBackground()时建立连接，然后在onPostExecute()方法中进行异步更新UI 。因为有可能用户忘了启动服务器，那么连接就会超时，故要捕获超时异常并弹出对话框提示用户可能的错误和处理办法。
在建立连接的方式中，选择采用Socket.connect()方法来建立连接。处理完连接问题之后，就可以发送控制指令了，由于动作比较多，故定义常量类来进行控制指令描述,也方便序列化。考虑到操作的便捷性，系统还提供了通过音量键来实现上下翻页，用户不用看手机屏幕即可方便的实现翻页操作。
3.2.3、鼠标移动设计
对于鼠标的控制主要是利用手机的触摸屏来实现的，对触摸屏有DOWN、MOVE和UP三种事件。可以充分利用MOVE事件来获取手指在手机屏幕的坐标，然后发送到服务端即可。控制电脑鼠标的移动过程有两种方式，一种是进行手机屏幕和电脑屏幕的静态映射，即由手机的位置乘上电脑屏幕相对手机屏幕的倍数就可进行映射，这种方式的缺点在于移动连续性不是很好，在完成一次移动之后重新移动则无法在原来的基础上移动。另一种映射方式是根据手机屏幕的范围和用户移动的习惯，将手机屏幕映射到以当前位置为中心的一个矩形区域，这样可以解决移动连续性的问题。具体实现是在第一种方式的基础上再形成一种坐标映射，即首先使用第一种方式来获知实际的电脑鼠标相对电脑屏幕的位置，然后计算矩形范围进行第二次映射，最后转换为实际的坐标发送到电脑进行执行。

基于HTML5的PPT智能模板设计( 二 )

猜你喜欢