【原创】介绍一款新的LVGL UI设计神器助你高效开发嵌入式界面应用

Devlab

已于 2024-09-30 15:51:07 修改

阅读量4.2k

点赞数 70

文章标签： ui 物联网单片机 iot 低代码嵌入式硬件

于 2024-09-28 16:01:11 首次发布

本文链接：https://blog.csdn.net/weixin_37760107/article/details/142553142

版权

文章目录

前言
一、Anyui是什么？
二、使用步骤
总结

前言

随着物联网的到来，凯文凯利预言的“屏读”时代也到来了。除了手机平板这些类PC的产品，越来越多的嵌入式设备都会带有触控显示屏。要在资源有限的嵌入式设备构建一个好的UI应用并不是一件容易的事，UI库的选型、开发和调试都很耗时耗力。
LVGL是一个针对嵌入式设备，占用资源少，而且API封装比较好的成熟的流行开源UI库，使用的人越来越多。但要从头开始手撸一个LVGL的应用还是有大量的工作要做。于是乎，出现了一些支持LVGL的设计工具。通过拖拽的方式设计好界面后，可以直接生成C代码，甚至可以直接编译成可执行文件，也可以支持模拟器预览，大大简化了开发过程。按现在流行的说法就是“低代码”或“零代码”平台。
这里给大家介绍一个基于LVGL的UI设计神器 Anyui，免费，免注册，跨平台，甚至可以支持网页版。

一、Anyui是什么？

Anyui是一个桌面端（也叫上位机）的UI设计工具，通过拖拽的方式在桌面端设计好UI界面，一键生成基于LVGL库的C代码、编译和模拟器预览。不需要配置繁琐的编译环境，不需要手撸大量的C代码，不需要在开发过程反复编译整个项目和烧录验证。
同时，Anyui提供了类似Sketch的操作习惯，让UI设计变得简单舒适。我们只需要专注于人机交互设计，剩下的工作就交给Anyui来处理。
另外，这个软件是免费的，而且无需注册，下载就直接可以使用。

Anyui支持：

跨平台
多语言（中英文）
内置组件
用户定制模板组件
自动对齐
快速复制
撤销/重做（历史操作）
画布缩放
组件的隐藏和锁定
还有很多其它细节设计，不一一列举……

二、使用步骤

1.下载安装Anyui

访问Anyui的网站，根据操作系统下载对应的版本。目前支持Windows 10+和Mac。如果想先体验一下，可以访问Web版Playground，就是Web版目前还不支持编译和模拟器运行，也没有太多的内置应用模板。

2.如何使用

安装完后无需做环境配置，直接启动应用就可以使用了。
软件带有使用指南，详细介绍了如何使用。这里我们也介绍一下如何开始。

2.1 启动应用

直接点击安装好的应用即可，或者在系统搜索里输入anyui启动。如果访问的是网页版，点开链接就会打开应用页面。

在这里插入图片描述

2.2 创建项目

启动应用后会进入应用主界面，这里有已创建的项目列表。点击左侧导航栏的“+”新建一个项目，然后根据向导依次选择：开发板 - 应用模板 - 项目参数。以下是进一步说明：

开发板：Anyui内置支持一些开发板（会支持越来越多的开发板），如果你的硬件选型在支持列表，直接选择对应的开发板。如果列表中没有对应的开发板，或者你想创建一个与开发板无关的项目，选择Simulator就可以。
应用模板：Anyui内置了一些应用模板，你可以基于某个模板调整为你的应用界面，或者选择EmptyUI从头开始设计。
项目参数：填入你的项目名称（名称不能重复），屏幕的颜色位深和屏幕的分辨率。

2.3 设计界面

设计界面最主要的工作就是界面布局。在这方面，Anyui提供了很多便捷的操作，让组件的布局相当简单，例如：拖拽组件、自动对齐、快速复制、模板组件等很多类似Sketch的操作方式。简而言之，就是通过鼠标拖拽和键盘快捷键就可以很快将界面设计好，而且“所见即所得”。相较之下，传统的编程-编译-烧录-验证这种方式需要花费数十倍，甚至于数百倍的时间和精力。
在这里插入图片描述

2.3.1 设置组件的属性和样式

设计界面的时候，根据业务需要去修改组件的属性和样式即可。这里有一点要注意的是：

组件的名称（name）：每个组件都会有一个名称/name，组件名称/name在同一个屏幕内是唯一的。在你创建新的组件时会自动生成一个唯一的名称/name，如果你不喜欢默认生成的，可以修改，但也要保证唯一。所以在给组件命名的时候最好根据业务需要赋予一个有意义的名字，这样容易记住，也大概率保证了唯一性。当然，万一出现重复的命名，在后续的环节Anyui也会检测出来并提示。

除了名称/name外，还会有一些组件有“显示”用的属性，例如Button Label有文本/Text属性，这个仅作显示，就没有唯一性的限制了。

2.3.2 设置组件的事件

对于输入组件，例如Button ImageButton等，支持常规的事件触发，Click Press等。对于一些非输入性的组件，例如Label Container等，不支持事件触发。

2.4 资源管理

项目需要使用的图片和字体资源统一在这里进行管理，可以在这里导入相关的资源，然后在编辑组件的时候选择使用。这里要注意的是：
如果组件的属性使用了某个资源，例如：ImageButton使用了某张图片，随后你在资源管理又把这张图片删除了，那在后续的编译环节会报错。
在这里插入图片描述

2.5 生成代码

设计好界面后就可以直接生成代码了，点击工具栏或菜单的生成代码/Generate Code即可，生成代码后可以切换到代码预览/Code Review查看生成的代码。
在这里插入图片描述

2.6 编译运行

点击工具栏小三角图标编译运行：

生成代码
编译项目
启动模拟器

网页版现在还不支持编译运行
在这里插入图片描述

总结

一个免费好用的UI设计工具，支持流行的嵌入式开源UI库LVGL，让嵌入式的应用开发工作变得轻松愉快，我们还能要求更多吗？我们当然会要求，功能更多，问题更少，更新更快……任何新的事物都是从弱到强，逐渐完善的。目前，这个软件在快速的迭代，开发团队还在网站上留下了联系方式，有什么问题或需求可以跟开发团队反馈。希望这个软件越来越好，让我们这帮嵌入式开发狗的日子也可以越过越好！[手动狗头]