Concepts of implementing scrolling feature?


Currently I am writing a small program, which takes snapshots of a movie and displays these thumbnails. If I now have more thumbnails than what would fit into the size of my window, I would like to implement some sort of scrolling.
I wonder if there are any concepts on how to make that work. Maybe like the scrolling feature one can find in a browser.
Currently I am looking into the ofxUIScrollableCanvas, but I wonder if I can put only UIElements in there or maybe also built up an “imagebrowser”.

Thanks for any kind of hints

you might check out ofxTimeline (
Particularly the video render example takes snapshots of a video and places them on a scrollable timeline.


I don’t think ofxUIScrollableCanvas can help. It’s a draggable canvas, not a canvas with a scroll bar (look at the ofxUIScrollable example).

I made a code wich display rectangles with a scroll bar (if needed).


@ Kj1
This tool looks great, I will have a look into it. Thanks

@ lilive
Yes, you are right. This is plausible.
Thanks so much for your example code. This is so well written and documented. Even for me it was totally understandable. As soon as I have a version of my app ready, I will post it.

By the way. I also found a scrolling example in processing, which is JAVA, but the principle is the same.

Glad that my code suits you.
So I made a little improvement:
I first wrote this code thinking about how to draw an image if it doesn’t totaly fit in the panel. My first solution was to not draw it, and replace it with a smaller grey rectangle, cutted at the edge of the panel. I did it to avoid masking operations.
Then I remembered the ofTexture.drawSubsection() method. No need to mask, just draw the good subsection of the image.
Here’s the new code (and the data folder for some images).

@ lilive
As promised here is a link to the small OSX Tool I wrote.

MoviePrint - an OSX Tool

MoviePrint lets you analyse, grasp and print movies in an instant. You can drag in one or multiple videos, manipulate In- and Outpoint or every single frame individually. Choose the raster of your MoviePrint (like a fingerprint of a movie) and finally create a PNG out of it.


I wonder are there any chances to get the mentioned sources? Link to in your post seems to be dead unfortunately.


Hi, (177.7 KB)

1 Like

oh, man that was FAST.
Thank you!!

Any chance to get source code ? link is dead. :frowning:
thank you.

Here it is : (24,0 Ko)