Beta Testing

[AnthonyGress]

This is a discussion for Zen UI Beta testing

Most of the beta discussions will be happening on the Zen Discord

[gytwo]

I tested Zen UI v1.3.0 beta9, here is the new feedback. Except for the following 4 points, everything else is fine.

Zen UI cover_utils Modifications (vs V1.3.0 Beta9)

1. Fix non-eink device color – Force RGB32 buffer format to keep covers colorful on non-eink devices.
2. Add folder icon overlay – Display folder icon at bottom of covers in stack mode
3. Add gray cover border – Draw gray border around each cover for better visibility
4. Fix night mode – Add original_in_nightmode = false to prevent black patches

Point 1 is definitely necessary to modify. Points 2-4 are just my personal preferences.you may reconsider them.

Add folder icon overlay – Simulates the appearance of a real-world folder, with covers on top and folder bottom below, creating a tangible folder entity visual.

Below is the complete modified stack cover drawing code.

function CoverUtils.drawStack(covers, portrait_w, portrait_h, border, bg_fn)
    local CenterContainer = require("ui/widget/container/centercontainer")
    local FrameContainer = require("ui/widget/container/framecontainer")
    local ImageWidget = require("ui/widget/imagewidget")
    local VerticalSpan = require("ui/widget/verticalspan")

    local stack_count = #covers
    local bg = bg_fn and bg_fn() or coverBg()
    local dimen = { w = portrait_w + 2 * border, h = portrait_h + 2 * border }

    if stack_count == 0 then
        return FrameContainer:new{
            padding = 0,
            bordersize = border,
            width = dimen.w,
            height = dimen.h,
            background = bg,
            CenterContainer:new{
                dimen = { w = portrait_w, h = portrait_h },
                VerticalSpan:new{ width = 1 },
            },
            overlap_align = "center",
        }
    end

    -- Single book: render full-size like a normal cover, no stacking.
    -- Also add folder icon overlay for single book.
    if stack_count == 1 then
        local cover = covers[1]
        local scaled_bb, sw, sh = CoverUtils.scaleCover(cover.data, cover.w, cover.h, portrait_w, portrait_h)
        
        -- Paint cover and folder icon to a single buffer
        local final_bb = Blitbuffer.new(portrait_w, portrait_h, Blitbuffer.TYPE_BBRGB32)
        final_bb:fill(bg)
        
        local img_widget = ImageWidget:new{
            image = scaled_bb,
            width = sw,
            height = sh,
            original_in_nightmode = false,
        }
        local cover_x = (portrait_w - sw) / 2
        local cover_y = (portrait_h - sh) / 2
        img_widget:paintTo(final_bb, cover_x, cover_y)

        -- Add gray border
        local border_color = Blitbuffer.ColorRGB32(128, 128, 128, 255)
        -- Top and bottom borders
        for x = cover_x, cover_x + sw - 1 do
            final_bb:setPixel(x, cover_y, border_color)
            final_bb:setPixel(x, cover_y + sh - 1, border_color)
        end
        -- Left and right borders
        for y = cover_y, cover_y + sh - 1 do
            final_bb:setPixel(cover_x, y, border_color)
            final_bb:setPixel(cover_x + sw - 1, y, border_color)
        end    
    
        -- Add folder icon overlay
        local plugin_root = require("common/plugin_root")
        local folder_icon_width = portrait_w
        local folder_icon_height = folder_icon_width * 0.65
        local folder_icon = ImageWidget:new{
            file = plugin_root .. "/icons/folder.png",
            width = folder_icon_width,
            height = folder_icon_height,
            alpha = true,
            original_in_nightmode = false,
        }
        folder_icon:paintTo(final_bb, 0, portrait_h - folder_icon_height)
        
        return FrameContainer:new{
            padding = 0,
            bordersize = border,
            width = dimen.w,
            height = dimen.h,
            background = bg,
            CenterContainer:new{
                dimen = { w = portrait_w, h = portrait_h },
                ImageWidget:new{
                    image = final_bb,
                    image_disposable = true,
                    width = portrait_w,
                    height = portrait_h,
                },
            },
            overlap_align = "center",
        }
    end

    -- Multi-book stack rendered into a single Blitbuffer so the entire cell
    -- (background + covers) is repainted atomically. OverlapGroup would only
    -- repaint the cover ImageWidgets on partial repaints (page turns), leaving
    -- white gaps where the background should show through.
    local final_bb = Blitbuffer.new(portrait_w, portrait_h, Blitbuffer.TYPE_BBRGB32)
    -- The outer ImageWidget has original_in_nightmode=true (default): in night mode
    -- it software-pre-inverts final_bb, then the screen inverts again → double inversion
    -- = identity. Fill with the desired display color directly.
    -- Gallery blank spaces = FrameContainer bg (COLOR_LIGHT_GRAY = 0xCC) inverted once
    -- by the screen → 0x33. This fill is inverted twice (identity), so fill with 0x33
    -- = COLOR_LIGHT_GRAY:invert() for an exact match.
    local ok_dev, dev = pcall(require, "device")
    local night = ok_dev and dev.screen and dev.screen.night_mode
    local fill_color = night and bg:invert() or bg
    final_bb:fill(fill_color)

    local book_width  = math.floor(portrait_w * 0.72)
    local book_height = math.floor(book_width * (portrait_h / portrait_w))
    local base_x = math.floor((portrait_w - book_width) / 2)
    local base_y = math.floor((portrait_h - book_height) / 2)
    local step_x = math.floor(base_x / 2)
    local step_y = math.floor(base_y / 2)

    local n = math.min(stack_count, 4)
    local offsets
    if n == 2 then
        offsets = { { x = step_x, y = -step_y }, { x = -step_x, y = step_y } }
    elseif n == 3 then
        offsets = { { x = step_x, y = -step_y }, { x = 0, y = 0 }, { x = -step_x, y = step_y } }
    else
        -- 4 covers: outer pair at ±step, inner pair at ±step/3.
        local s3x = math.floor(step_x / 3)
        local s3y = math.floor(step_y / 3)
        offsets = {
            { x =  step_x, y = -step_y },
            { x =  s3x,    y = -s3y    },
            { x = -s3x,    y =  s3y    },
            { x = -step_x, y =  step_y },
        }
    end

    -- Paint back-to-front into final_bb; inner widgets skip pre-inversion so
    -- the outer ImageWidget handles night mode for the whole buffer uniformly.
    for i = n, 1, -1 do
        local cover = covers[i]
        local off = offsets[n - i + 1] or { x = 0, y = 0 }
        local scaled_bb, sw, sh = CoverUtils.scaleCover(cover.data, cover.w, cover.h, book_width, book_height)
        local img = ImageWidget:new{
            image = scaled_bb,
            width = sw,
            height = sh,
            original_in_nightmode = false,
        }
        local cover_x = base_x + off.x
        local cover_y = base_y + off.y
        img:paintTo(final_bb, cover_x, cover_y)
    
        -- Add gray border
        local border_color = Blitbuffer.ColorRGB32(128, 128, 128, 255)
        for x = cover_x, cover_x + sw - 1 do
            final_bb:setPixel(x, cover_y, border_color)
            final_bb:setPixel(x, cover_y + sh - 1, border_color)
        end
        for y = cover_y, cover_y + sh - 1 do
            final_bb:setPixel(cover_x, y, border_color)
            final_bb:setPixel(cover_x + sw - 1, y, border_color)
        end
    end
    
    -- Add folder icon overlay for multi-book stack
    local plugin_root = require("common/plugin_root")
    local folder_icon_width = portrait_w
    local folder_icon_height = folder_icon_width * 0.65
    local folder_icon = ImageWidget:new{
        file = plugin_root .. "/icons/folder.png",
        width = folder_icon_width,
        height = folder_icon_height,
        alpha = true,
        original_in_nightmode = false,
    }
    folder_icon:paintTo(final_bb, 0, portrait_h - folder_icon_height)

    return FrameContainer:new{
        padding = 0,
        bordersize = border,
        width = dimen.w,
        height = dimen.h,
        background = bg,
        CenterContainer:new{
            dimen = { w = portrait_w, h = portrait_h },
            ImageWidget:new{
                image = final_bb,
                image_disposable = true,
                width = portrait_w,
                height = portrait_h,
                -- original_in_nightmode=true (default): pre-inverts final_bb in night mode;
                -- combined with screen inversion → double → fill and covers appear correctly.
            },
        },
        overlap_align = "center",
    }
end

Below is the additional folder icon.

Below is the display effect on non-eink devices.

[AnthonyGress]

The next beta is out and should fix these issues. I took the folder icon out because I don't love it. I am open to suggestions on displaying for folders but I don't like how it covers the book covers. I feel like if we want to show a folder icon it should be just the icon and no covers but as it stands I think it is pretty clear when a folder is a folder vs a book

[gytwo]

ok

[gytwo]

Please add the following content to zh_CN.po:

msgid "Match whole words"
msgstr "整词匹配"

msgid "Folder name"
msgstr "文件夹名称"

msgid "Badge color: "
msgstr "徽章颜色："

msgid "Show new banner"
msgstr "显示新书徽章"

msgid "Show title below cover (mosaic)"
msgstr "封面下方显示标题（马赛克）"

msgid "Show author below cover (mosaic)"
msgstr "封面下方显示作者（马赛克）"

msgid "Opaque background"
msgstr "不透明背景"

msgid "Gallery"
msgstr "画廊视图"

msgid "First cover image"
msgstr "第一个封面图片"

msgid "Stack"
msgstr "堆叠视图"

msgid "Show spine lines"
msgstr "显示书脊线"

msgid "Show item count"
msgstr "显示文件数量"

msgid "(standard)"
msgstr "（标准）"

msgid "(Kindle)"
msgstr "（Kindle）"

msgid "Top status bar"
msgstr "顶部状态栏"

msgid "Enable top status bar"
msgstr "开启顶部状态栏"

msgid "Cover Mode"
msgstr "遮盖模式"

msgid "Enable Cover"
msgstr "开启遮盖"

msgid "Cover All / Uncover All"
msgstr "全部遮盖 / 揭开全部"

msgid "Single Cover - "
msgstr "单个遮盖 - "

msgid "Double-tap to toggle"
msgstr "双击切换"

msgid "Single-tap to toggle"
msgstr "单击切换"

msgid "Single-tap to toggle (block menu)"
msgstr "单击切换（阻止菜单）"

msgid "Single-tap to toggle (show menu)"
msgstr "单击切换（弹出菜单）"

msgid "Coverable Drawer Types"
msgstr "可遮盖样式"

msgid "Highlight"
msgstr "高亮"

msgid "Underline"
msgstr "下划线"

msgid "Strikethrough"
msgstr "删除线"

msgid "Invert"
msgstr "反色"

[gytwo]

I'm not sure if you could consider a new optimization. Based on beta10, I added a Cover Mode to the reader.
Patch: Cover Mode - Add cover mode for highlights (highlight, underline, strikethrough, invert) for review.
This patch is originally a completely independent patch, but I hope more people can use it, so I would like to integrate it into your ZenUI plugin.
If you're interested, I can paste the code here, or wait and submit a new PR after you release the official v1.3.0 version.

Files Added / Modified

File	Operation	Description
modules/reader/patches/reader_covermode.lua	Added	Core Cover Mode patch code
modules/reader/reader.lua	Modified	Added cover_mode to PATCH_MODULES and loading logic in M.init()
modules/settings/sections/reader_settings.lua	Modified	Added Cover Mode menu under reader settings
locales/zh_CN.po	Modified	Added Chinese translations for Cover Mode menu items

The effect is shown in the screenshot.

[rkram5424]

Pardon the irrelevance of this question, but what font is that? I've never seen a sans-serif font as pleasant as that.

[gytwo]

LXGW WenKai

[rkram5424]

Thank you!

[AnthonyGress]

Oh I like this! I think the settings should go inside the highlight/lookup settings since this is changing the highlight style. But yes can you please submit this as a PR after the next release? Again PR to dev branch please

[gytwo]

Alright, I just think it’s still different from your existing highlight/lookup settings, so it doesn’t fit well there and is too hidden. In the next version, I’ll submit a PR and place it in the current location for now. You can try it out first, and then we can consider whether to move it into the highlight/lookup settings later.