大屏快速入门

本指南将引导你完成从创建第一个大屏到绑定数据源的全过程，帮助你快速上手 Meta2d Designer。

第一步：创建与配置画布

进入编辑器后，首先需要为你的大屏项目创建一个合适的画布。

1. 设置画布尺寸：在编辑器右侧的 “画布设置” 面板中，你可以根据目标显示设备的分辨率设置画布的宽度和高度（默认为 1920x1080）。
2. 配置背景：你可以选择一个纯色背景，或者上传一张背景图片来美化你的大屏。
3. 启用网格对齐：为了方便组件布局，建议开启 “网格显示” 与 “自动对齐” 功能。

第二步：添加、布局与配置组件

画布准备好后，就可以开始添加和配置组件了。

1. 拖拽组件：从编辑器左侧的 “组件” 面板中，找到你需要的组件（如文本、仪表盘、折线图等），直接拖拽到画布上。
2. 调整布局：在画布上，你可以自由地拖动组件来调整位置，或者拖动其边框来缩放大小。利用对齐工具可以帮助你快速实现整洁的布局。
3. 配置组件属性：选中组件后，在右侧面板中配置其属性：
   • 文本组件：修改文字内容、字体大小、颜色等
   • 图表组件：调整图表的标题、坐标轴、图例、数据系列颜色等
   • 通用属性：修改坐标（X, Y）、尺寸（宽, 高）、旋转角度和不透明度

第三步：添加动画效果

为组件添加动画效果，让大屏更加生动。

1. 选择动画类型：选中组件后，在右侧面板中找到 “动画” 选项
2. 配置动画参数：
   • 选择动画类型（如淡入、滑动、缩放等）
   • 设置动画持续时间、延迟和循环方式
   • 预览动画效果，确保符合预期
3. 组合动画：可以为同一组件添加多个动画，创建更丰富的效果

第四步：绑定数据源

让大屏“动起来”的关键是绑定实时数据。

1. 选择数据源类型：选中需要绑定数据的组件（如图表），在右侧 “数据” 面板中，选择数据源类型，如 ThingsBoard、HTTP 或 Websocket。
2. 配置数据接口：
   • 对于 ThingsBoard，你需要配置设备 ID、别名和数据过滤器。
   • 对于 HTTP，你需要填入 API 地址和请求参数。
3. 数据映射：将返回的数据字段与组件的属性进行绑定。例如，将温度数据绑定到仪表盘的数值上。

TIP

配置完成后，组件将根据绑定的数据源自动进行实时更新。

第五步：添加交互事件

为你的大屏添加交互功能，提升用户体验和操作便捷性。

1. 添加交互事件：

   • 选中需要添加交互的组件
   • 在右侧面板中切换到 “交互” 标签页
   • 点击 “添加交互” 按钮

2. 配置交互行为：

   • 选择触发事件（如点击、悬停、数据变化等）
   • 设置触发动作（如跳转链接、显示/隐藏组件、执行脚本等）
   • 配置动作参数（如 URL、目标组件、脚本内容等）

3. 测试交互效果：

   • 使用预览功能测试交互是否按预期工作
   • 调整参数直到达到理想效果

第六步：预览与保存

完成设计后，点击编辑器顶部的 “预览” 按钮，可以在新标签页中查看大屏的最终效果。确认无误后，点击 “保存” 将你的工作成果保存下来。

恭喜你，已经完成了第一个数据大屏的搭建！