英语原文共 4 页，剩余内容已隐藏，支付完成后下载完整资料
使用HTML5 Web界面的可视化控制系统
摘要——ControlWeb是发展于工业，学校或实验室的一种快速应用软件系统。它有助于在现实中的技术过程的可视化和控制时间。为了使这个过程对用户更加方便，一个新型的介于ControlWeb软件和Web浏览器之间的界面已被开发出来。这种界面使用了HTML5语义，JavaScript库和额外的代码，并且提供了更有效的数据使用率和随后的可视化技术表现。
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5有两大特点。首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签；其次，追加了本地数据库等Web应用的功能。HTML5还引进了新的功能，如：图形的绘制，多媒体内容，更好的页面结构，更好的形式处理和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等，可以真正改变用户与文档的交互方式。它还提供了一些新的元素和属性，比如网站导航块。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。
关键词——HTML5，JSON，可视化，控制系统
一.引言
生产工艺过程的可视化体现在它保持了一种更好的合作性和共同决策性。操作员或用户可以很轻易地识别到他们的问题起因并制定出共同的解决方案。很多年来，由于硬件和软件的限制，桌面应用程序是处理建设可视化环境和控制这些过程的最好方式。
另一方面，Web应用程序开发正处在一种范式的转变时期中。Web浏览器正迅速的从一个简单的HTML渲染器发展成一个运行时能够提供丰富的覆盖许多应用领域的交互式应用程序的环境。从用户的角度来说，基于Web的应用程序正变得越来越像传统桌面应用程序 [1]。
HTML5的画图标签允许我们做更多的互动和动画，就像我们使用Flash达到的效果。HTML5中还有一个特性就是本地存储，这有点像比较老的技术cookie和客户端数据库的融合。它比cookie更好用因为支持多个windows存储，它拥有更好的安全和性能，即使浏览器关闭后也可以保存。而且因为它是个客户端的数据库，你不用担心用户删除任何cookie，并且所有主流浏览器都支持。此外，HTML5还有许多优势，如：提高可用性和改进用户的友好体验；添加新标签，这将有助于开发人员定义重要的内容；可以给站点带来更多的多媒体元素(视频和音频)；可以很好的替代FLASH和Silverlight；当涉及到网站的抓取和索引的时候，对于SEO很友好等。它最大的意义在于改变了Web文档的结构方式，借助 header, footer, section, article这些标签，我们可以实现更具结构化，语义化的 Web 文档。这样，搜索引擎可以更容易索引Web站点，我们也可以搜索到更快，更准确的信息。
这篇文章分析并论证了最近的HTML5技术是怎样通过改变可视化软件的Web界面提高用户体验和优化数据传递的。
二.控制网页的可视化
在实验室里，控制系统和仪器仪表方面ControlWeb被用于快速应用程序开发的软件环境。它有助于实时的将控制系统技术流程变得可视化，还能够直接控制机械或作为工程SQL数据库，Web浏览器和GSM网络之间的桥梁。它可以用合适的驱动程序与各种的硬件类型（PLC，I/O模块，插件卡）进行沟通，还可以支持各种开放的协议（在串行COM线通信的ASCII码，OPC数据存取，GSM调制解调器，短信，TCP / IP）。ControlWeb包含嵌入式HTTP服务器，这使得基于Web技术的动态的应用可以访问普通的Web浏览器 [2]。
- ControWeb的用户界面
ControlWeb 6.1软件中当前用户界面使用网络输出的测量仪器的照片，这些照片是静态网页的一部分。为了说明各种状态的变化，新的网页版本必须产生，而这个版本导致在用户端产生不愉快的“blink”效应。如果用户想要的改变任何仪表的参数，那么静态网页将会重新加载。最高的刷新率是每秒一页。
- ControWeb用户界面里的新途径
在ControlWeb 的网页用户界面里一种HTML5技术被用来提高用户的体验经历。
HTML5是一个现代化的标记语言，它的目标是成为一种最新的多媒体的标记语言，让其可以通过计算机和电子设备一致理解，从而使它对人们来说简单易读。
HTML5增加了许多新的语法特征。这些特征包括新的lt;videogt;，lt;audiogt;，lt;canvasgt;元素，以及可缩放矢量图形（SVG）内容和整合的MathML数学公式。canvas元素是HTML5一个组成部分，它允许动态，脚本渲染2D图形和位图图像。这是一个在较低的水平程序上的模型，它更新位图并没有内置的场景图。
该可视化的方案采用的是Ajax的Web应用程序的模型。用户界面是一个2D、3D内容的展示平台。它通过JavaScript去调用Ajax引擎去刷新运行时数据，然后将结果数据刷新。服务器负责与浏览器的通信。数据并不直接对服务器发送更新数据的请求，但与服务器通过Ajax的 XML或JSON数据进行交互。然后服务器查询数据库，并返回最终的结果。为了检测系统或技术过程的实时状态，有必要设置合适的刷新周期去获取实时的数据。[3]，[4]
- 数据的传输
ControlWeb没有内置的能够直接将数据发送到Web浏览器的功能。为了创建基于HTML5的用户界面我们首先需要形成通过网络连接的序列化和传输结构化的数据。一套新方法被编程以实现不同方式的数据传输。
有以下3个步骤需要完成：
1.数据存储在缓冲区中。
2.数据以JSON对象序列化。
3. 数据在客户端的请求下被发送到Web浏览器。
用于保存数据的频率必须始终高于刷新周期否则显示的已经发送的数据是无效的。
ControlWeb准备了三个新方法用于使用JSON产生有效的结构化数据。这三种方法是：
bull; safe——测值存储在缓冲区中。
bull; show——数据以JSON对象序列化。
bull; setParam——参数设置根据标准来。
可能有不止一个的表被使用于网站可视化的过程。为了避免数据的混合体，一套关键词被用来匹配值和表。第一个参数总是那个关键词，它可以用来确定储蓄的日期和其他的操作日期。
对象safe（“abc”，10）将值10保存在“name”关键词下。对象setparam（“abc”，“color”，“red”）在“abc”关键词后有个其他参素“color”并且它的值为red。最后有个对象 show （，，abc“，，，Meter“hellip;，hellip;，hellip;）在“abc“这个关键词下以JSON对象序列化的传输收集的数据。
不同类型的表和图提供了各种参数。它涵盖了色彩，单位，激情等等。它们均由JavaScript库定义并被网络浏览器控制。
JSON对象的示例：
data = {
el : [
{ // object for first gauge
type:'Meter', // type of gauge
owner:'panel_1', // parent object
name:'meter_5', // name of gauge
x:490, y:25, w:220, h:175, // size, position
val:[[5889.497,54.6],[5889.607,54.6]]
// values and time
}, // end of first gauge object
{ /* hellip; object for second gauge hellip; */ },
{ /* hellip; object for third gauge hellip; */ },
],
reload:0
// parameter (1|0) for reloading page
};
- 数据接受与显示
在Web浏览器界面端接受，加工和显示的数据是由JavaScript库表示的。这个界面处理以下这些任务：
1.接收数据——接受请求发送到ControlWebWeb服务器，以Ajax方法进行数据交换。
2.将数据保存到Web浏览器缓存。
3.创建具有正确的大小和位置的canvas元素。
4.用init事件（产生新表）或刷新（刷新现有表）策划被要求的表。
对ControlWeb应用程序员来说，为了写用于通信的类和程序，JSON对象用于数据交换，在Web浏览器端的JavaScript库将完成在网页的渲染（如图1）。
RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不同类型的图表[ 5 ]。它使用了新的HTML5canvas标签，RGraph在Web浏览器的使用JavaScript创建了这些图表。由于数据转移较小这个用户RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不同类型的图表[ 5 ]。它使用了新的HTML5canvas标签，RGraph在Web浏览器的使用JavaScript创建了这些图表。由于数据转移较小这个用户RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不类型的图表[ 5 ]。它使用了新的HTML5canvas标签，RGraph在Web浏览器的使用JavaScript创建了这些图表。由于数据转移较小这个用户RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不同类型的图表[ 5 ]。它使用了新的HTML5canvas标签，RGraph在Web浏览器的使用JavaScript创建了这些图表。由于数据转移较小这个用户RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不同类型的图表[ 5 ]。它使用了新的HTML5canvas标签，RGraph在Web浏览器的使用JavaScript创建了这些图表。由于数据转移较小这个用户RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不类型的图表[ 5 ]。它使用了新的HTML5canvas标Graph在Web浏览器的使用JavaScript创建了这些图表。由于数据转移较小这个用户是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不同类型的图表[ 5 ]。它
图1 ControlWeb 和网页浏览器之间的交流示意图
RGraph是HTML5的一种基于JavaScript图表库使用HTML5canvas标签绘制和支持超过二十不同类型的图表[ 5 ]。它使用了新的HTML5canvas标签，RGraph在Web浏览器使用JavaScript创建了这些图表。由于数据转移较小这个用户界面有一以下几个优点：
bull;较少的Web服务器的负载，
bull;数据可以请求和显示的更频繁，
bull;只需要部分的网页重新加载，
bull;Web应用程序具有类似于桌面应用的用户体验感觉。
三.HTML5的Web界面的实现
三种类型的数据表（线图，表图，垂直进度条）证明了现有的和新开发的Web界面之间的不同之处。
为了实现HTML5的Web界面，ControlWeb应用的程序员必须遵循这些步骤：
1.使用ControWeb环境向导创建Web界面（如图2）。
图2 向导工具帮助建立应用程序的Web界面
2.复制修改的JavaScript Rgraph库到生成的ControlWeb应用的本地磁盘。并且将这个库包括到main.htm的头文件库中。
3.包括在ControlWeb中支持代码（包括prom_grafy元素）。
4.在ControlWeb httpd的模块中的generatestatusframe程序的末尾运行
剩余内容已隐藏，支付完成后下载完整资料
资料编号：[151310]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
