基于Ajax和SVG的监控系统人机界面设计与实现

摘要

随着互联网和Web前端技术的发展，许多电厂为了更加直观，更好的实现远程实时监视，把互联网技术应用进去。从而实现电厂数字化，信息化，智能化。本文通过对比B/S和C/S两种结构，进行自主研发设计了一套基于B/S的SVG （Scalable Vector Graphics）组态工具，在浏览器中就能运行。通过SVG组态工具绘制好监控所需要的SVG画面，作为前端页面显示。通讯过程采用以Ajax技术为核心的异步通信机制，能够高效的实现页面自动、实时刷新。开发了实时数据接口程序，应用于发电企业与集团一体化信息平台远程通讯中。后台服务器采用Tomcat服务器，进行数据支持。基于B/S的设计结构与SVG的XML语言能够完美的匹配，利用Web发布，在浏览器进行操作，从而实现更好的人机交互（HMI）。提高电厂运行人员安全和运行的经济性能。本文基于Ajax技术异步通信机制进行页面交互通信，能够高效的实现页面自动刷新页面，同时采用SVG作为交互的对象，实现更好的人机界面设计。

目录

第一个书签之前

摘要

Abstract

第1章 绪论

1.1 课题背景及研究意义

1.2 国内外研究现状及发展动态分析

1.2.1 国内外组态软件发展动态

1.2.2 组态软件发展趋势

1.3 本文结构安排

第2章 基于Web的组态监控系统研究

2.1 组态软件功能

2.2 C/S架构和B/S架构对比

2.2.1 C/S架构开发模式

2.2.2 B/S架构开发模式

2.2.3 C/S和B/S开发模式对比

2.3 Web组态平台设计思想和优势

2.3.1 基于B/S组态工具设计思路

2.3.2 Web组态平台的优势

2.4 基于B/S的发布系统研究

2.4.1 基于ActiveX的Web发布系统

2.4.2 基于Applet和JSP的Web发布系统

2.4.3 基于J2EE的Web发布系统

2.4.4 基于Ajax和SVG的Web发布系统

2.5 本章小结

第3章 SVG组态工具开发

3.1 SVG技术简介

3.1.1 SVG定义

3.1.2 SVG技术特点

3.1.3 SVG和Canvas对比

3.2 SVG的基本操作

3.2.1 坐标系统变换

3.2.2 SVG的DOM操作

3.3 SVG组态工具设计

3.3.1 可行性与需求分析

3.3.2 UI界面设计

3.3.3 程序设计

3.3.4 程序测试

3.4 本章小结

第4章 Web发布系统模型

4.1 Tomcat服务器

4.2 数据接口开发

4.2.1 数据读取

4.2.2 数据写入

4.2.3 程序运行

4.3 基于Ajax和SVG的发布平台

4.3.1 Ajax简介

4.3.2 Ajax开发模式

4.3.3 DWR原理

4.3.4 发布模型的实现

4.4 本章小结

第5章 人机交互界面实现

5.1 SVG组态工具组态画面

5.2 国电泰州电厂报警系统

5.2.1 绘制组态图

5.2.2 页面发布

5.2.3 人机交互界面实现

5.3 本章小结

第6章 结论与展望

6.1 结论

6.2 展望

参考文献

致谢