UIOTOS文档：示例13：MQTT数据给图形 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat

**注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档](https://www.yuque.com/liuhuo-nc809/uiotos/akukiqgb2a6h42r9?singleDoc# 《示例13：MQTT数据给图形》)

目标

通过接口组件，获取MQTT数据，并且给到图形组件，动态修改位置、外观等属性。

在线简单编辑（完整需登录）

步骤

新建

略。参见1新建。命名为"MQTT数据给图形"。

拖放组件

拖入不规则图形（绘制五角星）、接口组件并设置属性：
步骤1：点击不规规则图形> 先绘制五角星，再属性设置，（参见使用方法）

背景

• 选择yellow
• 设置该属性为纯表单。（点击，面板中选择formValue，参见纯表单使用）
• 别名设置../background。（格式参考自定义属性别名）

边框

• 设置4
• 设置该属性为纯表单。（点击，面板中选择formValue，参见纯表单使用）
• 别名设置../borderWidth。（格式参考自定义属性别名）

步骤2：拖入接口，设置如下：

• 接口类型：选择MQTT消息队列
• 主题列表：长度为1，索引0 位置输入"uiotos test topic"

MQTT设置

1. 设置

Host：mqtt://sys.aiotos.net

Port：1883

2. 连接

点击右上角，连接成功后，提示，右上角变成，代表连接成功。

3. 主题设置

如下位置设置主题uiotos test topic（主题可任意设置，但需与接口中的主题列表保持一致。）

注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档](http://https😕/www.yuque.com/liuhuo-nc809/uiotos/akukiqgb2a6h42r9?singleDoc# 《示例13：MQTT数据给图形》 "查看原文档")!

连线

接口给五角星表单赋值
无操作属性（接口）→ 无操作属性（五角星）。详见如何对表单页面赋值？

---

设置完毕，最终效果参考目标

小结

由本示例可知，图形组件的任意属性，都能通过数据动态变化，除了常见的数字、颜色，还能动态尺寸、坐标位置、移动轨迹等。
官网：https://www.uiotos.net/
项目源码：https://gitee.com/uiotos/uiotos-community