[K10教程] 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 是一个开源浏览器端图形编辑器，专为小屏幕（OLED、TFT、电子墨水屏）绘制界面而设计。U8g2、Adafruit GFX、TFT_eSPI、LovyanGFX、LVGL 这些主流嵌入式图形库它都支持。

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

部署

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

# 拉取镜像（仅 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。

编译，烧录。

K10 的屏幕亮起来。

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

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

解决办法很简单：只重绘文字所在的那一小块区域就行，背景不动，只更新变化的部分，速度立刻就上来了。。

效果显示

所见即所得的设计效果：

色彩准确的卡通螃蟹：

再说两句

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

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

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

参考链接

• Lopaka GitHub
• Lopaka 在线编辑器
• Lopaka Docker Hub
• U8g2 库
• Adafruit GFX Library
• TFT_eSPI 库
• LovyanGFX 库