组态工具-界面组件

更新时间：2018-11-26 17:18:11

准备事项

由于很多组件都可以完成与云端的数据源和边缘端的设备进行数据联动，从而获得十分重要的相关数据展示，所以在使用组件前，请务必保证项目内有可用的数据源、脚本和正常运行的设备。

关于数据源的创建配置、脚本的编写和设备的归属，请参见相关的章节介绍。

图片

这个组件主要用于在页面中展示图片资源，比如某些元素的背景、一些代表性的标志等，核心使用功能是上传本地的图片到站点资源中，并且让组件调用它们：

点击图片源链接后，可以上传一张需要使用的图片，或者在历史图片库内选择一张：

注意：单张图片大小不能超过3M；图片库总空间不能超过1G；

标准文字

标准文字组件不同于大多数编辑软件的地方在于，他可以是动态的数据，和某个数据源甚至是设备关联以后，可以随着上报的数据而改变：

静态内容：编辑“文字输入”提交框中的内容来获得，这些文字将静态的展示在页面中；

数据源链接：选择一个数据源或者设备，那么这些文字内容将随着具体关联的数据而实时更新变动；

\注意：在关联数据节点时，需要注意在【关联节点】中已经排除了iotid、PK和时间戳*

卡片

它的用途主要是具备一定界面样式的展示一些常用数据参数的组件(区别于文字组件)，所以它一定需要绑定数据源或者设备才可以正常工作：

可以从数据源选择一个具体的数据：

也可以从设备选择一个具体的属性：

无论是选择数据源还是设备，都必须要从数据源或设备提供的可用字段和属性中选择一项具体要展示的值(\注意：单选且只展示整数型和浮点型的数据类型*)，就可以完成这个组件的配置了，当然别忘记了调整它的一些背景颜色样式等等：

滚动文字

它的配置方法和文字一致，只是在展示形式上的不通。“跑马灯”的展示方式在网页上比较常见，通过这个组件，在这里可以实现这种效果：

静态内容：编辑“文字输入”提交框中的内容来获得，这些文字将静态的展示在页面中；

数据源链接：选择一个数据源或者设备，那么这些文字内容将随着具体关联的数据而实时更新变动；

\注意：在关联数据节点时，需要注意在【关联节点】中已经排除iotid、PK和时间戳，展示数据节点名称+值*

输入框

这个组件的特点是可以实时读取设备的某一个功能属性并展示，重点是，可以在输入框内输入一个具体的“值”后，将这个“值”即刻下发给设备，并改变这个对应的属性；所以这个组件一定要关联到设备才能正常工作：

UI开关

这个组件主要用于在云端站点里改变设备某个具体的布尔值属性，比如控制设备的开启和关闭：

选择一个可用的设备(如果没有可用设备，请操作设备最左侧导航的设备)：

获得这个设备可展示的布尔值属性(在设备管理-产品开发里定义的属性)，非布尔值属性不提供选择：

UI开关和其他工业开关的区别主要在于样式可以自定义，根据自己的需求上传开关的样式图片满足场景需求：

UI按钮

这个组件是提交框和下拉框组件联动的必要环节，它最终会将上面两个组件的内容数据提交给指定的处理方法上：

请重点关注一下脚本提交处理的方法，我们需要预先制作好一个脚本，并且在这选择它：

我们可以看到在参数一栏中有一个可操作的图标：

它的功能是将当前页面中可用的提交框和下拉框组件展示出来，选择一个关联上，则表示在页面中提交框或下拉框的具体填选值作为参数值提交：

根据具体需要执行的脚本，需要填写事先约定好的参数名称，也可以添加多个参数和参数值：

当然了，按钮也可以做其他的简单的动作，比如跳转到一个页面链接去：

或者显示/隐藏当前画布页面中的某一个组件：

\注意：当在【点击执行】中选择【显示/隐藏组件】时，选择【点击出现】xxx，【点击隐藏】yyy，这里建议只使用【点击出现】或【点击隐藏】，若是同时选择，则会导致产生误解(其中一个不出现)。也可以使用2个【UI按钮】来配合使用，避免其中一个不出现。*

UI输入框

这个组件相对来说很简单，只需要注意设置一些条件，比如类型和长度：

\注意：这个组件的主要用途是和按钮组件联动，所以具体功能在按钮组件中得以体现；*

UI下拉框

这个组件有别于其他大多数编辑器中的功能是，它可以动态的获取你的设备信息，自动根据你的设备情况来动态生成数据：

选择产品后，可以看到产品下的设备类型，如果该类型有多个设备，那么这些设备数据都将被自动加载到下拉框中，形成一个下拉列表：

当然，这个组件也可以自定义下拉框里的内容，全部静态的填写，配置为自定义即可：

自定义内容状态下，可以自己手动添加或者删除列表内容，根据实际使用的情况来完成。

*注意：无论那种数据获取方式，这个组件也必须和按钮组件联动才有意义；

iframe网页嵌入

这个组件在网页设计中是一个非常常见的元素，主要用于将站点外的内容纳入到同一个页面中来：

只需要输入一个URL，就能完成基本的配置了：

记得调整一下组件大小，它将决定这个嵌入页面的展示尺寸：

视频

这个组件可以帮助你在网页上配置直播的视频

选择一个可用的视频设备(如果没有可用设备，请操作设备最左侧导航的设备)：

记得调整一下组件大小，它将决定这个嵌入页面的展示尺寸：