关于 PicoPixel — 基于浏览器的 LVGL 编辑器

01

什么是 PicoPixel?

一款基于浏览器的可视化设计工具,专为 LVGL 驱动的嵌入式用户界面打造。

将控件拖放到像素级精确的画布上,通过可视化方式设置样式,用可视化事件编辑器连接事件处理程序,管理可复用资源,并为目标平台导出可直接用于生产的 C 代码。 可以将它视为嵌入式 UI 的 Figma。

一切都在浏览器中运行,无需安装。PicoPixel 可免费使用。

拖放控件

按钮、滑块、开关、弧形、图表、下拉菜单、滚轮、复选框、文本区域、标签视图、容器、图像

可视化事件编辑器

无需编写 C 代码即可连接交互

实时 LVGL 模拟器

由 WebAssembly 驱动的逐像素硬件预览

实时协作

实时光标、标注、可分享的模拟器链接

内置版本控制

精细的会话历史记录,一键回滚

生产级 C 导出

面向 ESP32、STM32、RP2040 等平台的干净 LVGL 8.x 代码

02

站在巨人的肩膀上

如果没有 LVGL,以及 LVGL 团队将该库完全开源所付出的卓越工作,这一切都不会存在。正是他们让 LVGL 保持免费且易于访问,才让 PicoPixel 这样的工具成为可能。

我们由衷感谢所有为 LVGL 生态做出贡献的人:核心维护者、提交 issue 和编写驱动的社区成员,以及每一位选择使用 LVGL 构建产品的开发者。谢谢你们。

LVGL 社区中的其他声音
LVGL Team

PicoPixel 发布时,LVGL 团队带着非常友善的话语和祝贺联系了我们。

他们欢迎这个项目成为生态中的积极补充,并真诚地为围绕 LVGL 构建更多工具感到兴奋。

SquareLine

最近,我们收到了一封来自其团队某位成员的不太友善的邮件

我们不会在这里复述邮件内容,但觉得值得记录不同社区成员选择回应这个项目的方式形成的对比。

03

为什么我们要打造它

旧方式

为嵌入式设备构建 UI 传统上意味着手写像素坐标,并与底层图形库反复打交道:编写 C 代码、烧录、检查显示、调整、再次烧录。

$ vi main.c
$ idf.py build
$ idf.py flash
// wrong by 3 pixels... repeat
PicoPixel 的方式

我们相信嵌入式开发者也应该拥有 Web 和移动开发者熟悉的可视化设计体验。PicoPixel 通过拖放编辑器、精确展示 UI 在硬件上渲染效果的实时模拟器,以及支持团队实时协作的工作流来弥合这一差距。

drag → preview → export → flash
// pixel-perfect on first try
04

工作原理

从画布到硬件,只需六步。

01

设计

将 LVGL 控件拖到像素级精确的画布上,并通过可视化方式设置样式。

02

连接交互

将按钮点击连接到屏幕导航,将滑块变化连接到标签更新。无需 C 代码。

03

预览

在由 WebAssembly 驱动的实时 LVGL 模拟器中查看 UI。这是真正的渲染引擎,不是模型图。

04

导出

生成可直接用于生产的 LVGL C 代码(.c 和 .h 文件),不含专有依赖。

05

烧录

将导出的文件添加到 ESP-IDF、Arduino 或 PlatformIO 项目中,并烧录到硬件。

06

迭代

使用内置版本控制与团队实时协作。

05

Ed 的一段话

Ed
姓名  Ed
角色  码农

我目前正在构建一个仪表显示集群,并且有相当多时间往返于 TokyoShenzhen。如果您也在做硬件,或者刚好在这两个城市之一,我很乐意一起喝一杯聊聊项目。

在 PicoPixel 之前,我曾在一家大型券商工作了几年。也曾在一家被 Apple 收购的创业公司工作,参与过几个 Watch 原型。正是在那里,我开始想重新靠近硬件,并最终走到了现在这个项目。

我很想听听您正在构建什么,以及希望 PicoPixel 做出哪些改变。欢迎随时联系。

目前在 →
Tokyo/Shenzhen/Seattle
06

公开测试

坦诚说明我们所处的阶段。

PicoPixel 目前处于 公开测试阶段,由一位独立开发者构建和维护。控件集正在积极扩展,LVGL v9.x 支持已在规划中,并且会定期发布新功能,包括最近上线的基于时间线关键帧的动画模式。

随着基础设施扩展,可能会出现一些临时限制。您的耐心和反馈对我们非常重要。如果遇到任何问题,请随时联系我们。

免费开始构建您的 LVGL 界面

以可视化方式设计嵌入式 UI,在实时 LVGL 模拟器中预览,并导出可直接用于生产的 C 代码。无需安装。无需信用卡。在浏览器中打开 PicoPixel 即可开始设计。

开始使用。免费!

阅读常见问题 · 联系我们