hawk物联网组态工具_多比实时数据可视化开发平台之画面组态-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39778447/article/details/113567162

本文详细介绍了Hawk物联网组态工具的使用，包括画面管理、组件分类（如基本形状、常用控件、工业控制等）、画布设置、标签页操作、树控件、表格编辑、图片添加、复制粘贴、删除、对齐、层级调整等功能。此外，还涵盖了数据源的分类与绑定、图表数据绑定以及常见问题解答，提供了一站式的Web SCADA可视化平台集成案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.6.1画面管理

3.6.1.1具体的操作步骤

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

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

图1 基本形状

WEB组态软件集成案例，见web SCADA

图2 常用控件

图3 工业控制

图4 容器控件

WEB可视化图形编辑器集成案例，见web SCADA

图5 导航控件

图6 形状控件

更多的web SCADA可视化平台集成案例，见web SCADA

图7 图表控件

Ø画布的设置

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

Ø标签页的使用

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

更多的web组态可视化平台集成案例，见web SCADA

Ø树控件

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

Ø表格编辑

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

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

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

Ø添加图片

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

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

Ø复制粘贴

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

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

更多的web组态可视化平台集成案例，见web SCADA

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

Ø剪切选中控件

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

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

Ø删除控件

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

Ø控件对齐

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

更多的web组态图形可视化平台集成案例，见web SCADA

Ø控件的置于顶层属性

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

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

Ø图片属性

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

更多的web组态可视化平台集成案例，见web SCADA

Ø数据源的分类与使用

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

Ø数据绑定

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

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

3.6.1.2常见问题

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

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

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

更多的web组态可视化平台集成案例，见web SCADA

Ø如何添加、上传图片

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

Ø如何旋转控件

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

Ø图表如何绑定数据

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

更多的web组态可视化编辑平台集成案例，见web SCADA

Ø“编辑路径”的用法

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

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

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

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

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

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

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

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