多比实时数据可视化开发平台之画面组态


3.6.1画面管理

3.6.1.1具体的操作步骤

Ø web组态工具支持的组件的分类

web组态工具支持七种类型的组件,分别是基本形状、常用控件、工业控制、容器控件、导航控件、形状控件,以及图表控件。

image078.jpg

图1 基本形状

image080.jpg

                       图2  常用控件

image082.jpg

                       图3  工业控制

 

image084.jpg

图4  容器控件

image086.jpg

图5  导航控件

image088.jpg

图6  形状控件

image090.jpg

图7  图表控件

Ø 画布的设置

我们可以在组件配置窗口中设置画布的一些属性,画布的宽高、背景颜色或背景图像。

image092.jpg

Ø 标签页的使用

标签页控件给我们提供了很多方便,不过也存在一个问题,就是添加上控件之后,默认是选中第一个选项“page1”的,在设计的时候,如何快速切换到其他标签呢?其实,也只需要按一下键盘上的ESC键,然后再选中想要编辑的标签页就可以了。

image094.jpg

Ø 树控件

“树控件”提供了类似树形结构的功能,可以在“组件配置窗口”下的“项目列表”中,编辑树控件的结点标题和图标路径等属性。

image096.jpg

Ø 表格编辑

“树状表格”控件,提供了表格录入、修改、删除的功能。将“树状表格”控件添加到页面上的时候,如下图所示:

image098.jpg

我们可以选中“树状表格”后,然后通过右侧“组件配置窗口”下的 “表头对象”和“表格内容”进行编辑即可。

image100.jpg

在弹出的“属性编辑器”里面编辑表格的表头和表格内容。

image102.jpg

 

Ø 添加图片

Web组态工具的添加图片功能,使得界面更加生动、丰富。拖动“常用控件”下的“图形控件”到页面上。

image104.jpg

单击图片左上角的小五角星,就弹出了图片选择路径。在里面,可以使用本工程内的图片,也可以使用本地画廊,或上传自己的图片。

Ø 复制粘贴

创建项目的过程中,会经常使用到复制粘贴的操作,但是请注意,web组态工具不支持“Ctrl+C”和“Ctrl+V”的快捷键操作,想复制哪些控件,只需要选中这些控件,然后单击工具栏上的“拷贝选中控件”和“克隆选中控件”选项就可以了。

image106.jpg

但是这两个选项又有些区别,“拷贝选中控件”可以将拷贝的控件,直接粘贴到其他容器中,但是“克隆选中控件”则没有这个功能。例如下面页面中,有一个输入框和一个容器控件,选中输入框控件,单击工具栏上的“拷贝选中控件”选项,再选中容器控件,可以看到工具栏上多出了这样一个工具,如下图所示。

image108.jpg

单击这个图标,就可以将拷贝的输入框控件,粘贴到容器内了。

image110.jpg

Ø 剪切选中控件

“剪切选中控件”属性,可以将选中的控件,剪切并粘贴到其他容器中。例如页面上有一个输入框和一个容器控件,选中输入框控件,单击工具栏上的剪切按钮。

image112.jpg

可以看到输入框控件已经被剪切到剪贴板了,选中容器控件,并单击工具栏上的下面的图标,输入框控件就可以粘贴到容器内了。

image114.jpg

Ø 删除控件

删除控件的操作,只需要选中需要删除的控件,单击工具栏上的删除按钮,在弹出的框中,选择“是”选项即可。

image116.jpg

Ø 控件对齐

当页面上有很多控件,并且想让它们以某一方向对齐时,可以使用web组态工具的对齐属性。例如下图中,我们在页面上随机放置了几个控件,如果想让它们左对齐,可以单击页面工具栏上的“对齐”选项,在里面选择合适的对齐方式。

image118.jpg

Ø 控件的置于顶层属性

有些控件在使用的时候,会将其他的控件覆盖掉。为了解决这一问题,web组态工具提供了控件的“置于顶层”和“置于底层”属性。例如下图中,浅灰色的图形添加上之后,默认是“置于顶层”的,很显然这样很不美观。

image120.jpg

选中这一个小图形,单击页面工具栏上的“置于底层”选项,图形就变成了下图所示。

image122.jpg

 

Ø 图片属性

当在页面上添加上一幅图片后,我们可以通过修改图片的属性,来达到预期的效果。可以在右侧的“组件配置窗口”中,通过“图像文件路径”修改图片,“左边沿坐标、上边沿坐标、右边沿坐标、下边沿坐标”修改图片的位置,“控件宽度、控件高度”修改图片的大小,以及通过“旋转角度”来旋转图片。

image124.jpg

Ø 数据源的分类与使用

数据绑定之前,要先对数据源进行设置,保证数据源是正确无误的。Web组态工具的数据源分为4种,分别是数据库数据源、虚拟数据源、OPC数据源和Modbus数据源。关于它们的使用,可以参考上面的3.4.2章节。

Ø 数据绑定

数据源设置完成后,可以在页面上对某些数据进行绑定。绑定的方法就是在右侧“组件配置窗口”里,单击各个属性右侧的按钮,如下图所示。

image126.jpg

例如上图中,在页面上放置一个HTML元素控件,我们可以单击“内部HTML文本”右侧处的按钮,弹出数据绑定的对话框,里面已经列举了本工程内的数据源。选择其中一个即可完成数据的绑定。

image128.jpg

3.6.1.2常见问题

Ø  要想使数据绑定,变动的幅度大,怎么办?

可以在数据绑定框的“表达式绑定”选项卡中,使用左侧的计算器,乘以某个数。

image130.jpg

或是在“函数绑定”选项卡中,使用函数进行绑定。

image132.jpg

Ø  如何添加、上传图片

拖动“图形控件”到页面编辑区,点击左上角的小五角星,就可以添加图片。在图片路径中,单击最后一个选项卡“上传图片”,就弹出了选择图片的文件路径。

image134.jpg

Ø  如何旋转控件

各种控件的旋转,可以在其右侧属性面板的“旋转角度”处设置。

image136.jpg

Ø  图表如何绑定数据

图表的数据绑定,是在右侧属性栏里的“属性设置”中设置的。找到最后一项“实时数据”,单击右侧的小按钮,在里面进行数据的绑定。

image138.jpg

Ø  “编辑路径”的用法

当我们需要使用不规则图形的时候,可以利用图形的“编辑路径”属性。例如我们拖动一个“三角形”控件到页面上,单击工具栏上的“编辑路径”按钮,页面上的三角形控件就变成了下面这个样子。

image140.jpg

在任意一个小圈上右击,弹出如下的菜单。可以单击“添加路径节点”,就会在三角形上添加上一个节点。可以拖动这些节点,拖出你想要的图形形状。

image142.jpg

“开放路径”使得图形不闭合,如下图是单击“开放路径”后的效果。

image144.jpg

控件右击也有很多属性,例如我们用三角形控件,添加路径节点制作出了下面的图形。

image146.jpg

选中图形,右击“水平镜像”选项。

image148.jpg

可以看到图形发生了变化。

image150.jpg

用户可以使用其他的属性,自己设置用一下。

我们经常能看到颜色渐变的图形,web组态工具也实现了这个功能。现在我们制作出了下面这样的形状,接下来就是给它填充上这种渐变颜色了。单击图形右上角的下拉箭头,在弹出的“样式编辑器”中,单击“填充样式”右侧的按钮,在“填充样式编辑器”中,选择“线性渐变角度”,在节点1,节点2,和节点3处,进行如下设置。就可以制作出左边这样的形状。

image152.jpg

Ø  流水线控件的用法

流水线控件,可以在组件配置窗口中,通过设置animation属性的值,设置不同的效果。

image152.jpg

3.6.2 新建画面

在工程内,单击“画面”选项卡中的加号。

image154.jpg

在弹出的“为新建目标命名”框中,输入新的页面名称,点击确认按钮即可。

image158.jpg

3.6.3删除画面

删除不需要的画面,可以在画面上右击选择“删除文档或目录”选项,或是单击上方的减号,即可删除画面。

image160.jpg

3.6.4复制画面

有时候很多画面上的内容差不多都一样,只有个别差异,这时候可以通过复制画面,然后再对不同的地方进行修改。可以利用上面的“复制文档”按钮,复制出一个相同的页面。也可以右击选择“复制文档”选项。

image162.jpg

3.6.5画面重命名

给已有的画面进行重命名,是在画面选项卡的最后一个按钮处设置。

image164.jpg

单击重命名按钮,在弹出的重命名文本框里,输入新的名称,点击确定按钮即可。

image166.jpg


上一篇 下一篇

评论



分享