C200系列开发：C200PC_（20）.C200PC图形用户界面开发.docx

PAGE1

PAGE1

C200PC图形用户界面开发

1.图形用户界面概述

图形用户界面（GraphicalUserInterface，简称GUI）是现代软件开发中不可或缺的一部分。在HoneywellC200PC工业控制系统中，GUI主要用于实现人机交互，使操作员能够方便地监控和控制系统的运行状态。一个良好的GUI设计可以显著提高系统的可用性和操作效率，减少操作错误，提高生产安全和质量。

1.1GUI的重要性

GUI在工业控制系统中具有以下重要性：

易用性：提供直观的操作界面，使操作员能够快速理解和操作。

可视化：通过图表、动画等形式，直观展示系统的运行状态。

实时性：实时更新系统数据，帮助操作员及时做出决策。

安全性：通过权限管理，确保不同级别的操作员只能访问和操作其权限范围内的内容。

1.2C200PC的GUI开发工具

HoneywellC200PC提供了一套强大的GUI开发工具，主要包括：

HMIWebDesigner：用于设计和配置图形用户界面。

HMIWebDisplayBuilder：用于创建和编辑HMIWeb图形页面。

HMIWebDeveloper：用于编写和测试自定义脚本和逻辑。

这些工具不仅支持标准的HMIWeb页面设计，还可以通过自定义脚本实现复杂的交互逻辑，满足不同工业场景的需求。

2.HMIWebDesigner基本使用

HMIWebDesigner是HoneywellC200PC中用于设计和配置图形用户界面的主要工具。通过HMIWebDesigner，用户可以创建、编辑和管理HMIWeb页面，实现系统的可视化监控和控制。

2.1HMIWebDesigner界面介绍

HMIWebDesigner的界面主要包括以下部分：

工具栏：提供常用的操作工具，如新建、打开、保存等。

对象库：包含各种可拖拽到页面中的图形对象，如按钮、文本框、图表等。

属性窗口：显示选中对象的属性，并允许用户进行修改。

页面编辑区：用于设计和编辑HMIWeb页面。

项目资源管理器：显示项目的结构和资源，方便用户管理文件。

2.2创建新的HMIWeb项目

启动HMIWebDesigner：

打开HMIWebDesigner应用程序，启动后会显示欢迎界面。

新建项目：

在欢迎界面中选择“新建项目”，或在主界面中选择“文件”-“新建”-“项目”。

配置项目：

在弹出的对话框中，填写项目名称、保存路径等信息，然后选择项目类型。对于C200PC，通常选择“C200PC”类型。

创建页面：

在项目资源管理器中，右键点击“页面”文件夹，选择“新建”-“页面”，输入页面名称，点击“确定”即可创建新的HMIWeb页面。

2.3添加图形对象

选择对象：

在对象库中选择需要的图形对象，如按钮、文本框、图表等。

拖拽对象：

将选中的对象拖拽到页面编辑区中，放置在合适的位置。

调整对象属性：

选中拖拽的对象，在属性窗口中修改其属性，如大小、位置、颜色、标签等。

2.4示例：创建一个简单的HMIWeb页面

2.4.1页面设计

创建页面：

在项目资源管理器中右键点击“页面”文件夹，选择“新建”-“页面”，输入页面名称为“MainPage”。

添加按钮：

从对象库中拖拽一个按钮对象到页面编辑区中，放置在页面的左上角。

添加文本框：

从对象库中拖拽一个文本框对象到页面编辑区中，放置在按钮的下方。

设置按钮属性：

选中按钮对象，在属性窗口中设置其标签为“启动系统”，背景颜色为绿色。

设置文本框属性：

选中文本框对象，在属性窗口中设置其标签为“系统状态”，初始文本为“系统未启动”。

2.4.2代码实现

!--MainPage.html--

!DOCTYPEhtml

html

head

titleMainPage/title

scriptsrc=HMIWeb.js/script

script

//初始化页面

functiononPageLoad(){

//获取按钮和文本框对象

varstartButton=document.getElementById(startButton);

varsystemStatus=document.getElementById(systemStatus);

//添加按钮点击事件

startButton.addEventListener(click,function(){

//发送请求