Here's a "camera roll" style image gallery/viewer for Playdate developers

SDK Development Discussion
,
1

If you've ever wanted images uploaded to device to reside somewhere persistently, and be able to store more than one, here's a simple, limited tool for that purpose. Share entire slideshows with others on-device, or compare different designs you're evaluating.

It's a Playdate Lua project, not a compiled app. Enhance it, re-use, do whatever you want with it freely! (It's also an example of my "grid gallery" system from my Playtime clock, which uses row-wrapping and looping to make the d-pad do more than just a conventional grid view—including support for partial last rows, when the number of cells doesn't come out even.)

Image Viewer

Download
Image Viewer.zip (10.1 KB)

The small thumbnails automatically preserve most common grayscale dithers! They are 1/3 size, which mathematically lets 2x2 (or other even-sized) dither patterns survive scaling nicely. Strokes smaller than 3px may get lost in the thumbnails.
.

TO USE

Drop PNGs into the Images folder, then build and send to device.

Any size PNG will work, and gray-on-gray simulator screenshots are fine! Transparent areas draw in checkered gray. (Do not use image table PNGs unless you rename them to remove the "table.")

You can also add/remove .pdi images in the Images folder inside the .pdx package, using USB disk mode, to change images without re-building--however, new builds will overwrite those changes.
.

CONTROLS

D-pad to navigate the thumbnail gallery in alphabetical order. 3x3 shown at once, total capacity limited only by memory. Press (A) to view the selected image at native size, then (A) again to toggle filename display. (Filenames are also printed to console for each image viewed.) (B) to return to gallery.

D-pad works exactly the same when viewing an image as in the gallery: left/right will cycle through ALL images, continuing to the next row as needed, and wrapping back from the last one to the first. Up/down will jump 3 forward or back.

9 Likes
2

Since the d-pad navigates the 3-column gallery even when you're not IN the gallery, you can easily mockup multi-room levels and "walk through" them in all 4 directions with the d-pad.

Just name the PNGs alphabetically. Now the gallery is like a "map view," and when you view a region, you can keep navigating from there without going back to the "map." (Keeping in mind that the "world" wraps around.)

Put production notes right in the filenames, and pop them up with (A) at will.

2 Likes
3

Thanks a lot :slight_smile:
This is a really good way to test screen mocks and flow throughs on device.
ha, I quickly ran out of memory i think. or found a corupt image. i had one called
"nomadtest-table-8-8.png" Just read the thing again, dont have table in the name

1 Like
4

Yes, tables not used AS tables are to be avoided (by renaming).

I'm thinking of putting in a font-test function maybe, where you can simply toss .txt files into the same folder and those screens will render in the current font/family, with bold/italic styles. (Default font unless you changed it at the top of main.lua.) I might even allow for the word "center" in filenames to make the whole text screen centered, and "invert" to make light text on dark. Something like that.

That could be nice for tesing font readability on device. Plus you could easily add/remove/edit .txt files in USB disk mode, without re-building the app.

I'd use that myself in the simulator to grab text for Photoshop mockups. Right now I tend to use screenshots from the preview box in Caps.

5

i’m stuck on what you mean by “build” i added photos to image folder. but it’s not letting me select to send to play date.

6

to build it, open a command prompt in the project folder, and type pdc Source MyGallery.pdx. You can then run this in the simulator and upload it to the device (plug the decive in via usb and then unlock it to reveal the device menu in the simulator)

1 Like
7

(To be clear, this is a project for use with the dev tools—it’s not a compiled consumer-ready app.)

8

Nice little utility app. I added

import "CoreLibs/crank"

to the imports and modified the left/right button lines as follows

	local crankTicks = playdate.getCrankTicks(10)
	if pd.buttonJustPressed(pd.kButtonLeft) or crankTicks < 0 then
...
	if pd.buttonJustPressed(pd.kButtonRight) or crankTicks > 0 then

so you can also crank your way through the images, like an old movie projector, in case you're checking an animation or something.

1 Like
9

Great addition—thanks!