可视化拖放 LVGL 编辑器。

关于 PicoPixel

以可视化方式协作设计精美的嵌入式界面。

什么是 PicoPixel?

PicoPixel 是一款基于浏览器的可视化设计工具,专为 LVGL 驱动的嵌入式用户界面而打造。将控件拖放到像素级精确的画布上——按钮、标签、滑块、开关、弧形、图表、下拉菜单、滚轮、复选框、文本区域、标签视图、容器和图像——通过可视化方式设置样式,使用可视化事件编辑器连接事件处理程序,管理可复用资源(控件、图像、字体和颜色),并为目标平台导出可直接用于生产的 C 代码。可以将其视为嵌入式 UI 的 Figma。

核心功能包括:带有实时光标和标注的实时协作、由 WebAssembly 驱动的 LVGL 实时模拟器(可逐像素还原设计在硬件上的实际效果)、内置版本控制与精细的会话历史记录、可分享的模拟器链接(方便相关方审核)以及字体排版管理工具。一切都在浏览器中运行,无需安装任何软件。

PicoPixel 生成标准的 LVGL 8.x C 代码,可在任何拥有 LVGL 移植的平台上运行——包括 ESP32、STM32、Arduino、Raspberry Pi Pico、NXP、Renesas 以及基于 Linux 的系统。导出的代码兼容 ESP-IDF、Arduino IDE 和 PlatformIO。无论您是在设计智能家居面板原型、构建工业 HMI,还是为手持设备设计 UI,PicoPixel 都能为您提供网页设计师习以为常的可视化工作流程。PicoPixel 免费使用——包括商业项目。

为什么我们要打造它

为嵌入式设备构建 UI 传统上意味着手动编写像素坐标代码,并与底层图形库反复斗争——编写 C 代码、烧录、检查显示屏、调整、再次烧录。我们相信嵌入式开发者应该享有与 Web 和移动端开发者同等的可视化设计体验。PicoPixel 通过拖放编辑器、实时模拟器(精确展示 UI 在硬件上的渲染效果)以及支持团队实时协作的工作流程来弥合这一差距。

工作原理

PicoPixel 将 LVGL 开发从代码优先流程转变为可视化拖放工作流。整个过程分为六个步骤:设计——将 LVGL 控件拖放到像素级精确的画布上并进行可视化样式设置。连接交互——使用可视化事件编辑器将按钮按下连接到页面导航、滑块变化连接到标签更新等,全程无需编写 C 代码。预览——在由 WebAssembly 驱动的 LVGL 实时模拟器中查看 UI 效果,这是真正的渲染引擎,而非模拟图。导出——生成可直接用于生产的 LVGL C 代码(.c 和 .h 文件),无任何专有依赖。集成并烧录——将导出的文件添加到您的 ESP-IDF、Arduino 或 PlatformIO 项目中。最后,协作与迭代——利用内置版本控制与团队实时协作。查看完整的分步指南

PicoPixel 与其他工具的对比

LVGL 的三大可视化编辑器分别是 PicoPixel、SquareLine Studio 和 EEZ Studio。PicoPixel 基于浏览器运行,无需安装,而 SquareLine Studio 和 EEZ Studio 则是桌面应用程序。PicoPixel 是唯一支持实时协作编辑、内置版本控制和可分享模拟器预览链接的 LVGL 编辑器。它完全免费且无功能限制——包括商业用途——相比之下,SquareLine Studio 采用付费分层模式,EEZ Studio 则是开源(GPL-3.0)模式。

PicoPixel 导出简洁的 LVGL C 代码,没有多余的模板代码或专有依赖。目前支持 LVGL 8.x,v9.x 支持已在规划中。由于 PicoPixel 处于公开测试阶段,控件库正在持续扩充——SquareLine Studio 和 EEZ Studio 目前都拥有更丰富的控件库。EEZ Studio 还提供基于可视化流程的编程(EEZ Flow)且完全开源。SquareLine Studio 拥有更大的成熟社区和更多特定平台的文档。查看完整的对比详情

公开测试与限制

PicoPixel 目前处于公开测试阶段,由独立开发者 Ed 独自构建和维护。控件集正在积极扩展中,LVGL v9.x 支持已在规划中,动画和过渡等部分功能仍在路线图上。随着基础设施的扩展,可能会存在一些临时限制。您的耐心和反馈对我们至关重要——如果遇到任何问题,请随时联系我们。

联系我们

有问题、想法,或希望与我们合作?我们期待您的来信。请通过我们的联系页面联系我们。