Image Caching

[imilne]

I'm trying to get some directory browsing working for a plugin, but the performance I'm seeing as it loads preview images for the UiList isn't as good as any of the built-in browsers (Videos, Pictures, etc), especially with large images sizes.

I figure it must be related to the caching of images, but I'm not 100% sure how I should be doing it?

- Can I just create a single ImageCache object (via GetInstance) and then reuse it as often as I want?

- At the time I parse the files in the directory and build the UiList, should I fire off a background thread to pre-cache everything? If so, would it be something like the following for each file?

Code:

if (cache.HasCachedImage(path, 150, 225, false) == false)
    cache.PreloadImage(path, 150, 225, false, false);

- When I then want the actual image, do I just call GetImage or should I check if it's in the cache again (even though I've already asked for it)? Does the cache have a limit?

If none of that makes sense, does anyone have some other suitable pseudo-code for dealing with this scenario?

Thanks

Iain

[mvallevand]

I've been struggling with this in Universe because it uses images that have to be loaded from the internet, so I have to make a tradeoff on what I cache. I don't use the built in cache I save them to a private Hashtable thumbCache = new Hashtable(); which is trivial to access but give me my own control.

A couple of days ago I found a problem where NPVR was passing all intermediate rows to GetImage() as it paged and sub has a patch for this, I wonder if this is the main issue for you?

Martin

[sub]

Dealing with large lists of images can be difficult, since loading even a single high quality photo can take a significant amount of time (easily enough to upset any smooth animations).

The best approach to take really depends on the number of images you're going to be displaying in your lists. If there is only a few, you might find it best to preload them up front, and have the Image objects in the parameters when you set the items on the list. This isnt really practical for large lists though, because the user will be waiting for a long time for the list to appear and the app to become responsive.

The next option is using the SkinHelper.IGetImageCallback callback (ie, GetImage() method). This allows you to load the images from disk only when you need to show them. This is useful because if you've got 1000 items in your list (each with a possible image), it would only have had to load the images the images for those items on the screen that are actually showning images currently. To use this scheme your plugin implements the SkinHelper.IGetImageCallback interface, and instead of adding Image objects into the lists when populating it, it adds 'this' instead. The skinhelper will then call back to the GetImage() method when it needs to draw that image.

The Video/Music/Picture library use this second method. In itself though, performance can still be a concern. ie, if you've got a list of a 1000 photos to show in the picture library, but only 20 are visible, it can still take a very long time to load 20 highdef large photos. NPVR does a few things to help this happen in a timely fashion. One thing it does is use the ImageCache class. This class helps by creating small thumbnail versions of images (and storing them in c:\users\public\npvr\thumbnail), giving much quicker access to the images next time. ie, plugin just askes for full file, the app looks for a thumbnail version of that file, and will return it if already exists, or load full file/resize/create thumbnail and return image.

The picture library also has logic to keep an eye on how long it is taking to load pictures so that it can load only a subset of the images per renderer, so that it incrementally loads, allowing to the app to stay responsive.

[imilne]

Thanks guys. Sounds like I'm almost doing the same as sub's second method already, so I guess I'll just need to tweak and optimise a bit more if possible. It's not that it's bad bad, but scrolling left and right with a horizontal list layout is noticeably more jerky than the built-in browsers on the same content, so there's definitely room for some improvement.

For reference, this is on movie posters, most of them 1000x1500 in size, and I want little preview versions of them for the list, roughly 150x225. Once an item is selected, then the original sized image needs to be shown, but at the same time I then also pull in 1920x1080 fanart (with fade effects) for the background (although the plugin's performance is poor even with just the list and nothing else).

[mvallevand]

I like XBMC's approach they have the small tbn files for thumbs and speed and also have large poster art for metadata

Martin

[imilne]

That's pretty much what I'm aiming for. Does it pre-create the tbn files though? I was reluctant to go generating files on people's hard drives (other than NPVR's own cache) unless I really had to, but I did get much better performance by making little thumbnails if they didn't exist and using them instead. And then I came across the ImageCache class and figured it might be able to do that for me instead. I think it does; I just need to fight with it a little more.

[sub]

Yeah, thats pretty much what the ImageCache does. Its creating a high quality thumbnail based on the full image to ensure future use of the file is much quicker. This thumbnail is exact size needed by the skin, as per size values passed to GetImage() callback.

The video/music/picture library are a little more complicated than described above, since there is a background thread that is using to the ImageCache to make sure the thumbnail is created even before it is displayed for the first time.