Loading and displaying images

[eternal ibex]

I've been messing around trying to load and display pngs, but nothing i've done yet seems to work. Does anyone have any nice examples of that sort of code? the only example i could find is the widgetpedia example and that doesn't involve image reading/decoding.

[remote basin]

The "Basic Widgets" part of the demo renders a png file, the zig favicon. See src/Examples/basic_widgets.zig and search for this line:
const image_source: dvui.ImageSource = .{ .imageFile = .{ .bytes = zig_favicon, .name = "zig favicon" } };

The general strategy is to load the bytes of the image file (or use @embedFile) and pass those bytes to ImageSource and render it with dvui.image(). The image is automatically decoded to a texture and cached.

Does that help?

[eternal ibex]

Thank you so much! Can't believe I missed that, I'll make sure to look more closely next time.

[remote basin]

No problem at all, let me know if there is a place you looked where we could add doc comments or anything to help the next person in your situation!

[potent merlin]

If you are dynamically fetching images in an app i would highly recommend making a texture and keeping just the texture alive.

This snippet can come in handy for you or anyone else who comes across this post

if (dvui.textureGetCached(url_key)) |texture| {
  return .{ .texture = texture };
}

const source: dvui.ImageSource = .{ .imageFile = .{ .bytes = res.body } };
const texture = try dvui.Texture.fromImageSource(source);
dvui.textureAddToCache(url_key, texture);
if (auto_retain) dvui.textureRetain(url_key, url_id);
return .{ .texture = texture };

[eternal ibex]

yeah i was looking in src/Examples/widgetpedia.zig at the DisplayImage struct which loads the image data from those what im guessing are raw data .rgba files, which confused me a little

[remote basin]

Good point, will think about how that example could be expanded to include other kinds of images. Thanks!

[uneven ravine]

When would one need to call dvui.textureRetain? If I keep using the texture, I would assume the cache would keep it.

[remote basin]

If you use the texture every frame, then the cache will keep it. textureRetain is for situations where you want to keep it around even though you aren't using it.

The demo uses that so the textures representing the demo section buttons aren't trashed even if they slide off-screen.

@potent merlin Uses it to keep textures around that might scroll off the screen.

Does that make sense?

[uneven ravine]

Yeah, that makes sense. So if I have a main screen and I keep using it, it will be in the cache.
But if I have tabs or something and want to be able to switch back quickly, then I would retain it?

[remote basin]

Yes exactly. It starts getting complicated because a lot depends on how costly it is to regen the texture. The icon browser (for example) is okay trashing and regenerating textures as needed.

So the first question to ask is if you can get away with regenerating the textures. If not, then use textureRetain - and then the followup question is to identify when the textures can be trashed.

There are two strategies:

1. collect the hashes as you textureRetain them, and then textureRelease at some point

(That's the manual method)

2. use textureRetainToken, and then at some point call retainClear

The demo uses method 2 to tie the texture lifetime to a widget lifetime (the demo floatingWindow widget).

Search for "retain_token" in src/Examples.zig for details

[uneven ravine]

Thanks for the clarification. I'm avoiding this problem right now, but want to be aware when I look into tabs.

[potent merlin]

the cache only keeps it if its rendered every frame, if it doesnt get rendered for a few frames because the user scrolled or something else the cache gets invalidated.
there is also the use case of fetching an image, turning into a texture so you can free the bytes from the request and you just keep the image alive as long as you need/want via the texture cache

[uneven ravine]

So if it scrolls off the screen, that can also invalidate it? In my case, (toy web browser) I fetch it from the network, create the texture, free the bytes. I guess I would also need to retain it until that page is unloaded.

[potent merlin]

yes, that would be my recommendation, as if it gets invalidated that means u would need to refetch the image (or keep the bytes around)

[uneven ravine]

Thank you for your help.