Lopaka一个让你告别 LCD 像素手算的浏览器端 UI 设计工具

## 前言

行空板 K10，ESP32-S3 的那块板子，上面带一块 ILI9341 的 240×320 彩色屏幕。我想在上面画个界面——一个天气显示，几个图标，几行字。

经常搞 LCD 开发的小伙伴应该深有体会，最让人头疼的就三件事：**锚点定位、布局摆放、图片取模**。

先说定位。想在屏幕正中央放个图标？你得先算中心点坐标 (120, 160)，再算图标相对于中心的偏移。图标宽 32 像素，那左上角就是 (104, 144)。图标下面要放一行温度文字？再算——Y 坐标加上图标高度再加间距……听起来都是小学数学。但一写代码就发现不对劲了，你以为“往上两个像素”，写出来变成了往下两个。改了一下，图标对了，文字又歪了。再改，文字对了，背景框又跑到屏幕外面去了。

再说布局。LCD 上没有 CSS，没有 flexbox，什么都没有。想让几个元素对齐、居中、等间距分布？全靠手动计算坐标。而且你没办法实时看到效果——写代码 → 编译 → 烧录 → 等十几二十秒 → 发现不对 → 改一行 → 再来一遍。一个界面来回烧录十几次，就为了把东西摆正。

还有图片。想把一张 PNG 放到屏幕上？先得用取模工具转成 C 数组，一个像素一个像素地抠。换个尺寸、换个颜色格式，再来一遍。

更抓狂的是，K10 默认是横屏 (320×240)，我想用竖屏 (240×320)。一换方向，所有坐标全得重算，图片数据全得重取。X 变 Y，Y 变 X，脑子里转了三圈，写出来的东西还是歪的。
## Lopaka 是什么

[Lopaka](https://github.com/sbrin/lopaka) 是一个开源浏览器端图形编辑器，专为小屏幕（OLED、TFT、电子墨水屏）绘制界面而设计。U8g2、Adafruit GFX、TFT_eSPI、LovyanGFX、LVGL 这些主流嵌入式图形库它都支持。

用法也很简单：通过拖拽绘制出想要的界面，点击导出，即可生成对应的 C 代码。将其复制到你的项目中，编译并烧录，屏幕上就会显示你刚才绘制的界面。

---

## 部署

Lopaka 有在线版，打开就能用。不过我习惯用 Docker 自部署，两条命令搞定：

```bash
# 拉取镜像（仅 114MB）
docker pull woomoo/lopaka:latest

# 启动容器
docker run -d \
  --name lopaka \
  --restart unless-stopped \
  -p 8080:80 \
  woomoo/lopaka:latest
```

浏览器打开 `http://你的IP:8080` 就能用了。镜像才 114 MB，很轻量。

---
## 实操：用 K10 走一遍完整流程

光说功能太抽象。我拿行空板 K10（ESP32-S3 + ILI9341 240×320 TFT）给大家走一遍完整流程。
### 第一示例：文字输入

打开 Lopaka，点 **library**，选择编程要用的库。点“display”，选择 LCD 的屏幕尺寸，行空板 K10 默认是横屏，320×240。如果要竖屏就自定义输入 240×320。点“background”，选择底色。




接下来是关键的配置步骤：

1. **选择显示驱动**。K10 我用的是 **LovyanGFX**（你也可以根据自己屏幕选 U8g2 / Adafruit GFX / TFT_eSPI 等）。
2. **设置屏幕尺寸**。这里有个坑要注意——K10 默认横屏 320×240，我想用竖屏，直接把画布设成 **240×320** 就行。Lopaka 的画布就是你的屏幕，你设什么尺寸，出来的代码就按什么尺寸算坐标
3. 点 **layer 1**，空画布就出来了，选择矩形画一个方框。
4. 点 **layer 2**，点 Aa，选择好字体，输入 hello world。

### 第二示例：彩色图片转化

我绘制了一只可爱的动画螃蟹，要在行空板 K10上显示出来。我只要把图导入然后点击RGB就很快速转化成 C 数组导出。

这才是重点。终于不用手算坐标了。

我画一个简单的天气界面：

1. 先加个**矩形**当顶栏，用 Lopaka 的居中工具一键对齐
2. 加个**文字**，写上城市名，字体大小随便调
3. 拖个**天气图标**上去——Lopaka 内置了一堆动画图标，太阳、云、雨、雪都有，直接用
4. 再加温度、湿度等数据文字，调整位置



要注意勾选各个功能项和字库。

最关键的就是**定位**。在画布上，你用鼠标把每个元素精确拖到你想要的位置。图标应该在左上角？拖过去。温度数字太靠下了？拉上来。画布上实时显示的，就是最终在 K10 屏幕上看到的样子。

你终于不用靠脑子模拟了。**你看到的就是你得到的。**

### 第三步：导出代码

位置调满意了，点右上角 **Code**，选 **LovyanGFX**，代码啪地一下就出来了。坐标、颜色、形状，全是自动算好的。

这里有个**重要细节**——如果你用了内置的动画图标，复制代码之前，记得先点那个链接把图标文件下载下来，放到你的 Arduino 项目文件夹里。不然编译会报找不到文件。LovyanGFXa 还支持 **Adafruit GFX** 作为导出目标。如果你用的是彩色 TFT 屏 + Adafruit 库，新建项目时选 Adafruit GFX，它会自动调用 `drawScreen()` 函数生成全部 UI 代码，你只需要在 Arduino 项目里预先准备好库导入和显示初始化即可。

### 第四步：集成到 Arduino 项目

代码拿到了，但**别急着粘贴**。

你需要先在 Arduino IDE 里准备一个能跑的基础项目——导入语句、屏幕声明、初始化代码，先确保屏幕能正常亮起来显示文字。确认硬件没问题了，再把 Lopaka 生成的 UI 代码嵌进去。

我第一次偷懒没做这一步，直接粘代码，编译报了八百个错，查了半天才发现是初始化没写对。所以，**先跑通基础，再加 UI**。

Lopaka 导出用的是 AdafruitGFX API（对象名 `tft`），K10 用的是 LovyanGFX（对象名 `lcd`）。好在两者 API 高度兼容，适配只需一行：`#define tft lcd`。`fillScreen`、`drawRect`、`drawString`、`pushImage` 这些方法签名都一样，直接用就行。详细的适配代码和编译烧录命令，见项目 [README](https://github.com/sbrin/lopaka)。

编译，烧录。

K10 的屏幕亮起来。

天气图标在左上角，城市名在顶栏居中，温度数字端端正正地显示在屏幕中央。**一次烧录成功。** 位置不需要调。锚点不需要算。
从打开 Lopaka 到界面出现在 K10 屏幕上，设计者构思的漂亮的界面就出现了，没有 AI 味道。。

## 进阶：局部刷新Lopaka 导出的代码默认是全屏重绘，每次更新都调用 `drawScreen()`，整个屏幕刷一遍。静态界面无所谓，但一旦有动态内容就会卡顿。。举个简单例子：先画一个紫色矩形作为背景，里面写一行 "Hello World"。现在想让这行文字变化一下——如果每次都全屏重绘，连那块紫色背景也跟着重画，这是不必要的开销。。
解决办法很简单：只重绘文字所在的那一小块区域就行，背景不动，只更新变化的部分，速度立刻就上来了。。

### 效果显示

所见即所得的设计效果：



色彩准确的卡通螃蟹：



---

## 再说两句

Lopaka 当然不只是画静态界面。背景图片、动画图标、变量绑定这些它都支持，前面也提到了。Adafruit GFX 彩色屏也照样用，新建项目的时候选对应的驱动就行。

但它也有干不了的事。比如按钮按下去之后要干什么、传感器数据怎么刷新到屏幕上——这些逻辑你还是得自己在 Arduino 代码里写。局部刷新也是，它给你生成的是全屏绘制的代码，想优化得自己动手拆。

不过话说回来，这本来也不是 Lopaka 该干的活它就是帮你搞定 LCD 开发里最烦人的那一步—**布局**。。剩下的事写代码的人来。但至少，你不用再为“这个图标到底该放在哪个像素”烧脑了。。



## 参考链接

- [Lopaka GitHub](https://github.com/sbrin/lopaka)
- [Lopaka 在线编辑器](https://lopaka.app)
- [Lopaka Docker Hub](https://hub.docker.com/r/woomoo/lopaka)
- [U8g2 库](https://github.com/olikraus/u8g2)
- [Adafruit GFX Library](https://github.com/adafruit/Adafruit-GFX-Library)
- [TFT_eSPI 库](https://github.com/Bodmer/TFT_eSPI)
- [LovyanGFX 库](https://github.com/lovyan03/LovyanGFX)