【RM2024赛季-UI设计器开源】南京航空航天大学

德三战神波斯猫 · 2024-2-19 14:55:48

马上注册，玩转Robomaster！

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由德三战神波斯猫于 2024-3-29 16:08 编辑

在线使用：https://ui.bismarck.xyz/
nightly版本：https://ui.bismarck.xyz/nightly （nightly版本提供最新功能和错误修复，但可能不稳定）
GitHub链接：https://github.com/bismarckkk/RM-UI-Designer

在线Demo部署于Github Pages，可能需要魔法上网使用
可通过浏览器打开demo后安装PWA应用或直接在github release中下载自己系统的客户端离线使用

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

----------------------------------------------------------------------

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

基础使用
可在一个工程中建立多个frame，frame作为单次显示的场景单位
frame中可以拥有多个对象，每个对象具备group属性，同一group的对象在生成下位机代码时将会被打包至同一个消息包中，实现动态高刷

登录/注册后可看帖子

1.png (785.02 KB, 下载次数: 0)

下载附件保存到相册

2024-2-19 14:53 上传

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

登录/注册后可看帖子

2.png (26.5 KB, 下载次数: 0)

下载附件保存到相册

2024-2-19 14:54 上传

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

登录/注册后可看帖子

3.png (392.91 KB, 下载次数: 0)

下载附件保存到相册

2024-2-19 14:54 上传

对于每个工程，设计器会为每个拆分的消息包生成对应的.h和.c，每个group会自动被打包为一个消息包，如果超过消息包容量，将会自动拆分
并生成ui.h作为程序入口，以及数个固定的基础文件，可以在界面上直接进行预览或选择自己需要的部分下载

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

登录/注册后可看帖子

4.png (60.96 KB, 下载次数: 0)

下载附件保存到相册

2024-2-19 14:54 上传

在ui.h中，为每个group提供了init, update, remove函数，调用后将会在客户端创建、更新、删除图形
要实现动态图形，只需要在自己的代码中使用上面提供的指针修改对应数据，然后调用update函数即可

登录/注册后可看帖子

5.png (84.63 KB, 下载次数: 0)

下载附件保存到相册

2024-2-19 14:54 上传

（该截图中的代码存在错误，最新版本已经修复）
为了使消息能够发送给裁判系统，必须要自定义ui_interface.h中的SEND_MESSAGE宏和UI_SELF_ID宏
该宏默认指向打印消息包内容的函数，这个函数是打印出来给人阅读用的！！！，不是发送消息的！！！参考修改示例
#define SEND_MESSAGE(message, len) HAL_UART_Transmit_DMA(&huart1, message, len);
注意：由于裁判系统接收限制，你可能需要使用fifo队列/使用合理的延时来控制发送频率，此时需要自己建立一个新的发送函数替换掉HAL_UART_Transmit_DMA
同时本代码中只自带了关闭gcc编译器上内存对齐的代码，其他编译器如果没有默认关闭内存对齐，需要修改ui_type.h中的MESSAGE_PACK宏来禁用消息结构体的内存对齐

登录/注册后可看帖子

6.png (118.98 KB, 下载次数: 0)

下载附件保存到相册

2024-2-19 14:54 上传

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

串口模拟（Simulate）
本程序支持模拟裁判系统接收下位机发送的绘图指令并实时显示（from robot）和发送绘图指令到裁判系统以实时显示实际效果（to referee）
不管使用哪一种模式，都必须将对应的串口连接到电脑，并使版本高于89的chrome内核浏览器（客户端会调用本地edge浏览器）
并正确设置串口参数，默认情况下串口参数采用裁判系统串口参数。
然后在元素栏中点击uiWindow，在属性栏中修改队伍和机器人id，最后使用对应功能菜单的start按钮启动模拟
from robot模式具有debug log功能，可以输出比裁判系统更加详细的debug报告，便于调试自己的ui程序，但需要注意该log面板并非实时更新，而是每次打开面板时获取最新log。
to referee模式也不会实时同步到裁判系统，需要在同级菜单下点击update后会向裁判系统发送清空画布指令，然后重新添加所有元素。

常见问题

多选元素时边界框异常或元素异常位移：

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

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

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

在github提交issue
发送邮件至zuoqingyu@nuaa.edu.cn（建议使用学校邮箱联系，南航邮箱拦截机制较为严格）
飞镖群/视觉群/电控群 @3040585972

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

德三战神波斯猫 · 2024-3-29 16:06:26

星辰不坠落发表于 2024-3-28 08:43
怎么连接才能在选手段看见自己画的UI啊？

机器人和客户端都连接服务器就能看到了哦

[开源汇总] 【RM2024赛季-UI设计器开源】南京航空航天大学

马上注册，玩转Robomaster！

[开源汇总] 【RM2024赛季-UI设计器开源】南京航空航天大学