Grid Browser with file thumbnails#108
Grid Browser with file thumbnails#108CaptainFrito wants to merge 4 commits intocrosspoint-reader:masterfrom
Conversation
CaptainFrito
commented
Dec 22, 2025


- UI design by Discord user gan_shu
- Drop in replacement for the existing FileSelectionActivity, with the same features and key bindings
- Currently only renders files with extension .thumb.bmp - meant as a proof of concept to decide if we want to pursue this further considering the limitations
8830e45 to
228d615
Compare
|
PR updated and ready for review/merge
|
228d615 to
f40ab57
Compare
daveallie
left a comment
There was a problem hiding this comment.
Overall some comments on the code, but probably more critically is that when entering a directory, I don't seem to get any of the laziness you were mentioning in the PR body, the whole device seems to lock up as the thumbnails are rendered. This won't be mergable if we can't fix this / do thumbnail generation at another point, waiting for 9 books to generate thumbnails is a bit slow
| renderer.drawRoundedRect(GRID_OFFSET_LEFT + tileIndex % 3 * TILE_W, GRID_OFFSET_TOP + tileIndex / 3 * TILE_H, TILE_W, TILE_H, 2, 5, black); | ||
| } | ||
|
|
||
| void GridBrowserActivity::update(bool render) const { |
There was a problem hiding this comment.
nit: This parameter is unused
| if (previousSelectorIndex >= 0) { | ||
| drawSelectionRectangle(previousSelectorIndex, false); | ||
| } | ||
| drawSelectionRectangle(selectorIndex, true); |
There was a problem hiding this comment.
Double tapping a button to go from selection n to n+2 can mean that by the time this runs previousSelectorIndex can be n+1 and selectorIndex can be n+2. This results in an issue where the item at n still has a selector indicator around it and it's not cleared until you go back over it. To fix this, you can wrap any code in loop which adjusts variables used by the rendering loop e.g. selectorIndex and previousSelectorIndex in the renderingMutex.
For this same reason, navigating too quickly into a folder after pressing left and right result in the screen not updating correctly.
| if (!file.thumbPath.empty()) { | ||
| Serial.printf("Rendering file thumb: %s\n", file.thumbPath.c_str()); | ||
| File bmpFile = SD.open(file.thumbPath.c_str()); | ||
| if (bmpFile) { | ||
| Bitmap bitmap(bmpFile); | ||
| if (bitmap.parseHeaders() == BmpReaderError::Ok) { | ||
| constexpr int thumbOffsetX = (TILE_W - THUMB_W) / 2; | ||
| constexpr int thumbOffsetY = (TILE_H - TILE_TEXT_H - THUMB_H) / 2; | ||
| renderer.drawBitmap(bitmap, tileX + thumbOffsetX, tileY + thumbOffsetY, THUMB_W, THUMB_H); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Would be nice to have a fallback icon for books where the cover can't be generated
| if (bitsPerPixel == 8) { | ||
| return (width + 3) / 4 * 4; // 8 bits per pixel, padded | ||
| } else if (bitsPerPixel == 2) { | ||
| return (width * 2 + 31) / 32 * 4; // 2 bits per pixel, round up | ||
| } | ||
| return (width + 31) / 32 * 4; // 1 bit per pixel, round up |
There was a problem hiding this comment.
nit: can this be simplified to return (width * bitsPerPixel + 31) / 32 * 4;?
|
I have a suggest. If it's difficult to render 3*3 images, how about a 2*2 one? We could use it to display the 4 most recently read books, which should work much better? Maybe we don't need to render all book. |
|
will this be the only option on how to display the library or will it be based on user preference; ex list or grid? |
The current implementation adds a setting to toggle between the existing setup (list) and this one (grid). |
|
Closing this PR now, see #528 for a more up to date implementation of UI themes. The thumbnail grid can be revisited later on. |
