Make a loading bar

Using Cinder
1

Hello,

I have to load a lot of images at the launch of my application, so I would like to create a loading bar, so I ask you how to do this under cinder, I thought to draw my loading bar at each passage of the loop to load my images .

Thanks you

2

Hi,

one way to do it, is to first fill a std::vector<ci::fs::path> mFiles with the paths to the files you want to load. Next, you store how many files you start with in a variable, e.g. size_t mTotal = mFiles.size().

Then, you pass that vector to a background thread, which loads the images. Have a good look at the FlickrTestMultithreaded sample on how to do this. The background thread removes a path from the queue and loads it, so you can keep track of how many paths are still queued. You can calculate the progress (from 0 to 1) like this:

float YourLoader::getProgress() const {
    // Guard to protect against concurrent access.
    std::lock_guard<std::mutex> lock( mMutex ); 

    return ( mTotal - mFiles.size() ) / float( mTotal );
}

On your main thread, you then simply draw a progress bar:

void YourApp::draw()
{
    const auto progress = mLoader.getProgress();
    const auto bar = Rectf( 100, 100, 500, 50 ); 
    gl::drawSolidRect( { bar.x1, bar.y1, bar.x1 + progress * bar.getWidth(), bar.y2 } );
    gl::drawStrokedRect( bar );
}

-Paul

3

Hoo thank you! I did not know it was possible to do this thanks to Cinder I will implement this, thank you very much!

4

Hi,

I’ve created a Gist for you, showing in detail how you could do this. Create a new ProgressBar project with Cinder’s TinderBox or manually, then copy-paste the code of the Gist. Add some PNG images to your assets folder and run it.

Have fun!

-Paul

2 Likes
5

It works perfectly! Thank you very much Paul!
I have an another question that is not related, I will like during the thread to load a video, so I tried to compile Quicktime samples of cinder, it compiles but when I run the program and chose my video the program tells me that the video can not load without telling me why? You have a solution? Maybe the format? (I tried mp4 flv and mov)
Thanks you so much for your answer!

6

Hi,

unfortunately, there is no easy solution to that. Video libraries with support for OpenGL are a bit flaky at the moment. The built-in support for Quicktime also works on Windows, but you will need to install Quicktime (try to find a “lite” version like this one) and then at least you should be able to decode and render video. But it will use your CPU only, so unless you have a very (very!) beefy computer, a 4K video will be out of the question.

Search the forum for better alternatives, like the Cinder-WMF block or a gStreamer solution. They both attempt to leverage the DirectX library for hardware decompression, then share the texture with OpenGL. Your mileage may vary.

-Paul