最后修改日期：2025/5/10，当前版本：V1.4.0

重要更新：目前开始提供cmake端UI代码生成，可以直接在本地cmake过程中完成代码生成，不用再去设计器上生成下载添加了

相关功能详见 https://github.com/bismarckkk/RM_UI_Generator

设计器代码生成功能已经迁移至该生成器的wasm实现，现在可以提供一致的代码生成体验了

在线使用：https://ui.bismarck.xyz

Nightly版本：https://ui.bismarck.xyz/nightly （nightly版本提供最新功能和错误修复，但可能不稳定）

Github仓库：https://github.com/bismarckkk/RM-UI-Designer

完整使用指南：静态版本指南：https://bbs.robomaster.com/article/558118

动态版本指南： https://bbs.robomaster.com/article/580951

（指南完整介绍了从设计到生成代码部署的过程，本文偏向于功能介绍，动态版和静态版的区别详见任意指南开头）

在线Demo部署于Github Pages，可能需要魔法上网使用

可通过浏览器打开demo后安装PWA应用或直接在github release中下载自己系统的客户端离线使用

如果此项目对你有帮助，请在Github点亮Star

本项目目前提供所有种类图形的在线绘制，修改，下位机代码生成、接受下位机发送的串口数据并模拟显示，拥有超详细debug工具，将当前frame发送到裁判系统串口查看实机效果 (文本、数字类型在客户端中为自绘，没有可靠字体，效果仅供参考)

基础使用

可在一个工程中建立多个frame，frame作为单次显示的场景单位

frame中可以拥有多个对象，每个对象具备group属性，同一group的对象在生成下位机代码时将会被打包至同一个消息包中，实现动态高刷

画板分辨率和背景图等可以在uiWindow属性中进行调整，也可以直接复制一张图片在网页上粘贴直接将其设置为背景图

生成代码

在绘制完UI后，可以自行编写代码，也可以使用设计器自动生成下位机代码，只需要在File菜单点击Generate Code即可

对于每个工程，设计器会为每个拆分的消息包生成对应的.h和.c，每个group会自动被打包为一个消息包，如果超过消息包容量，将会自动拆分

并生成ui.h作为程序入口，以及数个固定的基础文件，可以在界面上直接进行预览或选择自己需要的部分下载

自动生成的代码为每个对象提供对应类型的指针，以便在自己的代码中动态修改消息内容，消息类型已经语义化，可无门槛使用

在ui.h中，为每个group提供了init, update, remove函数，调用后将会在客户端创建、更新、删除图形

要实现动态图形，只需要在自己的代码中使用上面提供的指针修改对应数据，然后调用update函数即可

（该截图中的代码存在错误，最新版本已经修复）

为了使消息能够发送给裁判系统，必须要自定义 ui_interface.h中的 SEND_MESSAGE宏和 ui_interface.c中的 ui_self_id变量（该变量也可以使用其他代码从裁判系统读取后由程序修改）

该宏默认指向打印消息包内容的函数，这个函数是打印出来给人阅读用的！！！，不是发送消息的！！！参考修改示例

#define SEND_MESSAGE(message, len) HAL_UART_Transmit_DMA(&huart1, message, len); os_delay(10);

注意：HAL库DMA发送时无法保证发送消息的完整性，如果连续调用DMA发送函数会导致后一条消息覆盖前一条消息，需要使用fifo队列/合理的延时保证消息完整性，示例代码中的os_delay函数需替换成所使用RTOS的延时函数

同时本代码中只自带了关闭 gcc编译器和 keil编译器上内存对齐的代码，其他编译器如果没有默认关闭内存对齐，需要修改 ui_type.h中的 MESSAGE_PACK宏来禁用消息结构体的内存对齐

具体如何修改生成的代码可参考github中serial_test文件夹，该文件夹中包含一个生成的代码加以少量修改用于测试串口模拟功能的项

设计注意事项

受裁判系统带宽限制，建议将所有动态元素放置在一个group中，且元素个数不要超过7个，不使用动态字符串，这样可以最大限度提高帧率（静态元素不需要update）
由于下位机上电时主控不一定连接到服务器，建议设置一个遥控按键，在按下按键后发送新增指令，避免由于丢包等各种因素ui没有显示
客户端绘制字符的方法非常奇特，目前没有办法在浏览器端完全复刻，会有些许位置和大小上的差异，建议直接将设计器接到电管连接裁判系统服务器，用simulate功能to referee模式对照设计，比烧代码再看方便

串口模拟（Simulate）

本程序支持模拟裁判系统接收下位机发送的绘图指令并实时显示（from robot）和发送绘图指令到裁判系统以实时显示实际效果（to referee）不管使用哪一种模式，都必须将对应的串口连接到电脑，并使版本高于89的chrome内核浏览器（客户端会调用本地edge浏览器）并正确设置串口参数，默认情况下串口参数采用裁判系统串口参数。

然后在元素栏中点击uiWindow，在属性栏中修改队伍和机器人id，最后使用对应功能菜单的start按钮启动模拟from robot模式具有debug log功能，可以输出比裁判系统更加详细的debug报告，便于调试自己的ui程序，但需要注意该log面板并非实时更新，而是每次打开面板时获取最新log。to referee模式也不会实时同步到裁判系统，需要在同级菜单下点击update后会向裁判系统发送清空画布指令，然后重新添加所有元素。

From Robot 模拟Debug工具

在打开串口后，可以使用 simluate/from robot/debug log打开问题框，该问题框可以提供总体层面的问题列表。

使用 simluate/from robot/rx history可以打开下位机向设计器发送的消息记录，在该面板中最多显示100条消息（消息分条依赖操作系统API的自动分割），这些消息可以在该面板进行保存和加载操作。

在该面板下，支持对单条消息进行细粒度的剖析，所有起始位（0xA5）均会以蓝色形式标出，单击其即可对该位置的消息进行分析，系统会自动合并在不同消息中的同一帧的数据，然后以不同颜色渲染不同的消息块，其中引发错误的位置将以红色标注，将鼠标移动到消息块上方即可查看该消息块的详细内容或具体错误信息

常见问题

Q: 多选元素时边界框异常或元素异常位移： A: 这个问题由上游的fabricjs库引起，并上游无修复意向。解除选中以后即可恢复，切勿在异常情况下关闭或刷新页面，可能导致位移后的元素被保存。直接在画布上进行选中可避免该bug。

贡献代码

如果你想为本工程贡献力量，请参考github readme的贡献代码模块

联系作者

注意：开源项目作者并不对该项目负有维护和解决使用问题的责任，只能提供力所能及的帮助。

在github提交issue
发送邮件至zuoqingyu@nuaa.edu.cn（建议使用学校邮箱联系，南航邮箱拦截机制较为严格）
飞镖群/视觉群/电控群 @3040585972 添加好友时请务必备注学校和战队

联系注意事项

关于串口相关问题请发送使用Rx History功能捕获的串口日志文件
设计器相关问题请提供可复现的案例或rmui文件（无法发送文件可以记事本打开文件直接复制内容）
任何问题都请先在nightly版本上测试，并在联系解决问题时提供nightly id（画布后的背景上可见，如果当前没有可用的nightly版本，请提供主版本号）