Keep album full-screen after GIF and reduce motion-region flicker.

Unify STRETCH layout for all photos, decode GIF 1:1 with disposal restore, and ship a 160x120 sample GIF.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-10-19 18:29:16 +08:00
parent 083a197108
commit 4bd97975eb
8 changed files with 91 additions and 73 deletions

View File

@@ -1,5 +1,10 @@
# Changelog
## 2026-10-19 — GIF 动区闪 + 切回变小
- 显示统一全屏 STRETCH,离开 GIF 不再缩成小图。
- GIF 1:1 合成 + disposal=2 恢复背景;样张改为 160×120。
## 2026-10-19 — GIF 去闪屏
- 双缓冲指针交换发布帧,避免 memcpy 半帧撕裂。

View File

@@ -7,8 +7,8 @@ ESP32-2432S028R 电子相册:从 TF 卡读取 **JPG / PNG / GIF**,触控切
## 功能
- 扫描 TF 卡 `/photos` 与根目录的 `.jpg` / `.jpeg` / `.png` / `.gif`
- 半分辨率画布 160×120,全屏拉伸到 320×240(适配无 PSRAM 的 DRAM)
- JPG / PNG / GIF 按 cover 铺满画布(可裁边)
- 半分辨率画布 160×120,界面始终全屏 STRETCH 到 320×240
- JPG / PNG cover 铺满;GIF 建议 ≤160×120(1:1 解码,减少动区闪烁)
- **点左半屏 = 上一张,点右半屏 = 下一张**;底栏 `<` / `>` 同样切换
- GIF 自动播帧;右上角显示 TF 状态
- 串口 `#PUT` 传文件到卡(`tools/sd_put.py`)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -1,5 +1,5 @@
name: CYD Photo album (cyd)
git: 5475be8
git: 083a197
date: 2026-10-19
board: ESP32-2432S028R (ILI9341)
features: jpg/png/gif album, SoftSPI touch, TF card
@@ -12,5 +12,5 @@ offsets:
sha256:
bootloader.bin 3D234A7471F67B013686DABD4DEE7C1FA915C9928463616A94BC9297ACF1ABF8
boot_app0.bin F94C5D786A7A8FAB06AC5D10E33BF37711A6697636DC037559EA19CC410A17F0
firmware.bin 2A437103D8933CA6ACDAA139336A68A227053E0B73D44FFA10FBB5115F6C7328
firmware.bin A0FDF3B007C54E9B302690E5FCD96790A6610A74D39F1BDFB72A926C4114F815
partitions.bin 148B959CBFF1C38AA8E1D5C0BA9D612C54997B945E56A63F41223EEF650653A1

Binary file not shown.

View File

@@ -271,60 +271,76 @@ static int32_t gif_seek(GIFFILE *pFile, int32_t iPosition) {
return pFile->iPos;
}
// GIF disposal tracking (apply previous frame's disposal at start of next frame).
static uint8_t g_gif_pend_disposal = 0;
static int16_t g_gif_pend_x = 0;
static int16_t g_gif_pend_y = 0;
static int16_t g_gif_pend_w = 0;
static int16_t g_gif_pend_h = 0;
static uint16_t g_gif_bg565 = 0x0000;
static void gif_fill_rect(uint16_t *dst, int x0, int y0, int w, int h,
uint16_t color) {
if (!dst || w <= 0 || h <= 0) {
return;
}
for (int y = y0; y < y0 + h; y++) {
if (y < 0 || y >= (int)CANVAS_H) {
continue;
}
for (int x = x0; x < x0 + w; x++) {
if (x < 0 || x >= (int)CANVAS_W) {
continue;
}
dst[(size_t)y * CANVAS_W + (size_t)x] = color;
}
}
}
// 1:1 blit into canvas (centered / clipped). No per-frame downscale — that
// caused moving-region flicker with disposal + transparency.
static void gif_draw(GIFDRAW *pDraw) {
if (!pDraw || !g_draw_dst || g_src_w <= 0 || g_dst_w <= 0) {
if (!pDraw || !g_draw_dst || g_src_w <= 0) {
return;
}
if (g_gif_stop) {
return;
}
const int src_y = pDraw->iY + pDraw->y;
uint16_t *dst = g_draw_dst;
// Fast path: 1:1 into canvas region
if (g_src_w == g_dst_w && g_src_h == g_dst_h) {
const int y = g_off_y + src_y;
if (y < 0 || y >= (int)CANVAS_H) {
return;
if (pDraw->y == 0) {
// Restore previous frame rect to background before drawing this frame.
if (g_gif_pend_disposal == 2) {
gif_fill_rect(dst, g_gif_pend_x, g_gif_pend_y, g_gif_pend_w, g_gif_pend_h,
g_gif_bg565);
}
uint16_t *row = dst + (size_t)y * CANVAS_W + (size_t)g_off_x + pDraw->iX;
for (int x = 0; x < pDraw->iWidth; x++) {
const uint8_t idx = pDraw->pPixels[x];
if (pDraw->ucHasTransparency && idx == pDraw->ucTransparent) {
continue;
}
row[x] = pDraw->pPalette[idx];
g_gif_pend_disposal = pDraw->ucDisposalMethod;
g_gif_pend_x = (int16_t)(g_off_x + pDraw->iX);
g_gif_pend_y = (int16_t)(g_off_y + pDraw->iY);
g_gif_pend_w = (int16_t)pDraw->iWidth;
g_gif_pend_h = (int16_t)pDraw->iHeight;
if (pDraw->pPalette) {
g_gif_bg565 = pDraw->pPalette[pDraw->ucBackground];
}
}
const int y = g_off_y + pDraw->iY + pDraw->y;
if (y < 0 || y >= (int)CANVAS_H) {
return;
}
// Scaled: only dest rows that sample this source line
int dy = 0;
while (dy < g_dst_h && (dy * g_src_h) / g_dst_h < src_y) {
dy++;
}
while (dy < g_dst_h && (dy * g_src_h) / g_dst_h == src_y) {
const int y = g_off_y + dy;
if (y >= 0 && y < (int)CANVAS_H) {
for (int dx = 0; dx < g_dst_w; dx++) {
const int sx = (dx * g_src_w) / g_dst_w;
const int lx = sx - pDraw->iX;
if (lx < 0 || lx >= pDraw->iWidth) {
continue;
}
const uint8_t idx = pDraw->pPixels[lx];
if (pDraw->ucHasTransparency && idx == pDraw->ucTransparent) {
continue;
}
const int x = g_off_x + dx;
if (x < 0 || x >= (int)CANVAS_W) {
continue;
}
dst[(size_t)y * CANVAS_W + (size_t)x] = pDraw->pPalette[idx];
}
const int x0 = g_off_x + pDraw->iX;
for (int i = 0; i < pDraw->iWidth; i++) {
const int x = x0 + i;
if (x < 0 || x >= (int)CANVAS_W) {
continue;
}
dy++;
const uint8_t idx = pDraw->pPixels[i];
if (pDraw->ucHasTransparency && idx == pDraw->ucTransparent) {
continue;
}
dst[(size_t)y * CANVAS_W + (size_t)x] = pDraw->pPalette[idx];
}
}
@@ -381,12 +397,16 @@ static void gif_task(void * /*arg*/) {
continue;
}
g_dst_w = CANVAS_W;
g_dst_h = CANVAS_H;
// 1:1 into canvas (center; clip if GIF larger than 160x120).
g_off_x = ((int)CANVAS_W - g_src_w) / 2;
g_off_y = ((int)CANVAS_H - g_src_h) / 2;
g_dst_w = g_src_w;
g_dst_h = g_src_h;
g_img_w = CANVAS_W;
g_img_h = CANVAS_H;
g_off_x = 0;
g_off_y = 0;
g_gif_pend_disposal = 0;
g_gif_pend_w = 0;
g_gif_pend_h = 0;
// Double-buffer: show A, decode into B (B starts as copy of A).
g_show = g_pixels;

View File

@@ -85,21 +85,12 @@ static void show_current() {
const PhotoEntry *e = photo_list_get((uint16_t)g_index);
const bool ok = e && photo_view_show(e);
if (img_photo) {
const bool gif = ok && photo_view_is_gif();
// GIF: integer 2x scale (cheap, less tear). Still: full-screen stretch.
if (gif) {
lv_image_set_inner_align(img_photo, LV_IMAGE_ALIGN_DEFAULT);
lv_image_set_scale(img_photo, 512); // 256=1x
lv_image_set_pivot(img_photo, photo_view_canvas_w() / 2,
photo_view_canvas_h() / 2);
lv_obj_set_size(img_photo, photo_view_canvas_w(), photo_view_canvas_h());
lv_obj_align(img_photo, LV_ALIGN_CENTER, 0, 0);
} else {
lv_image_set_scale(img_photo, 256);
lv_image_set_inner_align(img_photo, LV_IMAGE_ALIGN_STRETCH);
lv_obj_set_size(img_photo, UI_HOR_RES, UI_VER_RES);
lv_obj_set_pos(img_photo, 0, 0);
}
// Always full-screen stretch so JPG/GIF share the same size (no shrink after GIF).
lv_image_set_scale(img_photo, LV_SCALE_NONE);
lv_image_set_pivot(img_photo, 0, 0);
lv_image_set_inner_align(img_photo, LV_IMAGE_ALIGN_STRETCH);
lv_obj_set_size(img_photo, UI_HOR_RES, UI_VER_RES);
lv_obj_align(img_photo, LV_ALIGN_TOP_LEFT, 0, 0);
const lv_image_dsc_t *dsc = photo_view_dsc();
if (ok && dsc) {
@@ -201,9 +192,9 @@ void ui_create() {
lv_obj_add_event_cb(tap, on_tap_zone, LV_EVENT_CLICKED, nullptr);
img_photo = lv_image_create(scr);
// Full-screen widget + stretch avoids scale-transform gaps/stripes behind the photo.
lv_obj_set_size(img_photo, UI_HOR_RES, UI_VER_RES);
lv_obj_set_pos(img_photo, 0, 0);
lv_obj_align(img_photo, LV_ALIGN_TOP_LEFT, 0, 0);
lv_image_set_scale(img_photo, LV_SCALE_NONE);
lv_image_set_inner_align(img_photo, LV_IMAGE_ALIGN_STRETCH);
lv_obj_set_style_bg_color(img_photo, lv_color_hex(0x000000), 0);
lv_obj_set_style_bg_opa(img_photo, LV_OPA_COVER, 0);

View File

@@ -1,5 +1,5 @@
#!/usr/bin/env python3
"""Generate 320x240 JPG/PNG/GIF samples into assets/photos (solid bg, no stripes)."""
"""Generate test photos into assets/photos (solid bg; GIF is 160x120 for 1:1 decode)."""
from __future__ import annotations
from pathlib import Path
@@ -9,6 +9,7 @@ from PIL import Image, ImageDraw, ImageFont
ROOT = Path(__file__).resolve().parents[1]
OUT = ROOT / "assets" / "photos"
W, H = 320, 240
GIF_W, GIF_H = 160, 120
def font(size: int = 28) -> ImageFont.ImageFont:
@@ -27,7 +28,6 @@ def font(size: int = 28) -> ImageFont.ImageFont:
def card(bg, accent, title: str, subtitle: str, path: Path, fmt: str) -> None:
im = Image.new("RGB", (W, H), bg)
d = ImageDraw.Draw(im)
# Solid panel only — no horizontal stripe decoration
d.rounded_rectangle((20, 36, W - 20, H - 36), radius=12, fill=bg, outline=accent, width=3)
d.text((36, 70), title, fill=(234, 240, 246), font=font(36))
d.text((36, 130), subtitle, fill=(160, 175, 190), font=font(20))
@@ -45,23 +45,25 @@ def main() -> None:
card((28, 12, 18), (232, 93, 76), "02 JPG", "red sample", OUT / "02_red.jpg", "JPEG")
card((8, 28, 20), (61, 220, 151), "03 PNG", "green sample", OUT / "03_green.png", "PNG")
# 160x120 GIF matches decode canvas → no downscale flicker on moving regions.
frames = []
for i in range(6):
im = Image.new("RGB", (W, H), (10, 16, 22))
for i in range(8):
im = Image.new("RGB", (GIF_W, GIF_H), (10, 16, 22))
d = ImageDraw.Draw(im)
d.text((24, 24), "04 GIF", fill=(234, 240, 246), font=font(32))
d.text((24, 70), "animated", fill=(160, 175, 190), font=font(18))
x = 20 + i * 40
d.rounded_rectangle((x, 120, x + 80, 180), radius=8, fill=(255, 200, 40))
d.text((8, 8), "04 GIF", fill=(234, 240, 246), font=font(22))
d.text((8, 36), "160x120", fill=(160, 175, 190), font=font(14))
x = 4 + i * 14
d.rounded_rectangle((x, 60, x + 40, 100), radius=6, fill=(255, 200, 40))
frames.append(im)
gif_path = OUT / "04_bounce.gif"
frames[0].save(
gif_path,
save_all=True,
append_images=frames[1:],
duration=120,
duration=80,
loop=0,
optimize=False,
disposal=2, # restore to background — handled in firmware
)
print(f"wrote {gif_path} ({gif_path.stat().st_size} bytes)")
print("DONE")