找不到韌體工作之亡羊補牢專案-Part7

前一 Part 做了一些基本繪圖 API，但怎麼可能用純寫程式來畫畫呢。
當然是要找神器來產 Bitmap 囉

Bitmap 產生 Lopaka UI 與像素風畫面設計

---

系列文章

• Part 1：專案規劃與準備清單
• Part 2：開發環境與 FreeRTOS 架構
• Part 3：Logger Service 與 FreeRTOS 除錯觀察
• Part 4：Input System：GPIO、Polling Debounce 與 Event Queue
• Part 5：Input System：EXTI、ISR Notify 與 Software Timer Debounce
• Part 6：Display System：ILI9341 TFT、SPI 與像素繪圖
• Part 7：Display System：Bitmap 產生 Lopaka UI 與像素風畫面設計

---

本篇目標

• 了解 Lopaka UI / bitmap 產生工具
• 嘗試將 Lopaka 匯出的 bitmap / icon 顯示到 ILI9341 TFT
• 初步整理像素風畫面更新流程

---

Lopaka 與 UI 工具

最近看到一個工具叫做 Lopaka，可以用比較視覺化的方式設計 embedded screen UI。

• Lopaka GitHub
• Lopaka App

Lopaka 是一個 embedded graphics editor。
它不是要跑在 STM32 / FreeRTOS 上的程式，而是在電腦或瀏覽器上用來設計畫面，並產生 C / C++ 繪圖程式碼或 bitmap 資料。

也就是說，Lopaka 在這個專案裡比較像是：

TEXT

UI design tool    -> export code / bitmap / image data    -> 放進 STM32 專案    -> display service 呼叫繪圖 API    -> ILI9341 TFT 顯示

Part 6 做的基本繪圖 API 仍然是地基：

C

ili9341_draw_pixel(x, y, color);ili9341_fill_rect(x, y, w, h, color);ili9341_draw_bitmap(x, y, w, h, bitmap);

---

0. 顯示資料流

---

1. 資料夾結構

SH

gb_f767zi/    ├─ App/    │    ├─ Services/    │    │  └─ Display/    │    │     ├─ display_service.c    │    │     └─ display_service.h    │    ├─ Tasks/    │    │   ├─ Inc/    │    │   │  └─ display_task.h    │    │   └─ Src/    │    │      └─ display_task.c     │    └─ UI/    │        ├─ Inc/    │        │  └─ lopaka_assets.h    │        └─ Src/    │           └─ lopaka_assets.c     │    └─ Components           └─ ili9341/               ├─ Inc/               │  └─ ili9341.h               └─ Src/                    └─ ili9341.c tools/    └─ lopaka_to_assets.py

---

2. Lopaka 匯出資料怎麼接進來

Lopaka 可能匯出的是某種 C / C++ array、bitmap、XBMP 或特定 graphics library 的 draw code。

但我的 ILI9341 driver 目前需要 RGB565 bitmap：

---

---

本篇小結