45 lines
1.5 KiB
Markdown
45 lines
1.5 KiB
Markdown
# ESP32 ST7735 UI Framework (Lightweight VDOM + Tween)
|
|
|
|
This project now includes a tiny UI layer that renders a display list to the ST7735 display and supports non-linear animations via cubic-bezier easing.
|
|
|
|
## Files
|
|
- `include/ui.h`, `src/ui.cpp`: UI framework (DisplayList, Tween, Icon loader)
|
|
- `tools/convert_icons.py`: Convert PNG icons to RGB565 raw files with a 4-byte header
|
|
|
|
## Icons pipeline
|
|
1. Put PNG source icons at `assets/icons_src/`:
|
|
- `timer.png`
|
|
- `web.png`
|
|
- `game.png`
|
|
2. Convert to RGB565 raw files and write into LittleFS data folder:
|
|
|
|
```pwsh
|
|
# Install pillow once (Windows PowerShell)
|
|
python -m pip install pillow
|
|
|
|
# Convert icons (48x48 by default)
|
|
python tools/convert_icons.py --src assets/icons_src --dst data/icons --size 48 48
|
|
|
|
# Upload LittleFS
|
|
pio run -t uploadfs
|
|
```
|
|
|
|
The output files are:
|
|
- `data/icons/timer.r565`
|
|
- `data/icons/web.r565`
|
|
- `data/icons/game.r565`
|
|
|
|
File format: little-endian header `[uint16 width][uint16 height]` followed by `width*height*2` bytes of RGB565 pixels.
|
|
|
|
## Main screen carousel
|
|
- Three icons (Timer, Web, Game)
|
|
- Left/Right buttons slide between icons with an ease-in-out tween
|
|
|
|
You can tune layout in `src/main.cpp`:
|
|
- `ICON_W`, `ICON_H`, `SPACING`, `CENTER_X`, `BASE_Y`
|
|
|
|
## Notes & next steps
|
|
- Current renderer clears the screen per frame. If you see flicker, we can upgrade to a dirty-rectangle renderer.
|
|
- Icon draw uses `drawPixel` per pixel. For speed, we can add a windowed bulk draw.
|
|
- Tween API is minimal (one-shot). We can add callbacks and yoyo/repeat later.
|