little explanation on AnimatedPictures

Started by wmbuRn, 13 July 2013, 18:02:31

wmbuRn

Little help on animated pictures please :)

I read class reference here: https://tgui.eu/dcmtn/v0.6/classtgui_1_1AnimatedPicture.html#details

Is somebody wiling to post simple code to load just one picture, ill do the rest ? picture/code is worth 1.000 words they said xD


void AnimatedPicture( tgui::Gui& gui )
{

// your code here please :)

}

I never understand classes definitions and usage on those links. Incase somebody think i will use c++/SFML/tGui without knowleadge of pointers, classes, functions, and arrays he is wrong :) ] :)

thank you in advance
wmbuRn

texus

You just need the addFrame function.

Code (cpp) Select
animatedPicture->addFrame("Image.png", sf::milliseconds(100));

First parameter is the image filename, second parameter is how long it should be displayed.

wmbuRn

I am an idiot. :)

i keep trying

sf::Time frameDuration = sf::milliseconds(30);
tgui::AnimatedPicture::addFrame("clouds001.jpg", frameDuration);


Thank you for your answer. :)

wmbuRn

#3
So i made it its working


void AnimatedPicture( tgui::Gui& gui )
{
tgui::AnimatedPicture::Ptr AnimatedPicture(gui);

AnimatedPicture->addFrame("/home/xwm/Frames/cloud001.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud002.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud003.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud004.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud005.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud006.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud007.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud008.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud009.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud010.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud011.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud012.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud013.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud014.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud015.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud016.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud017.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud018.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud019.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud020.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud021.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud022.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud023.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud024.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud025.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud026.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud027.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud028.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud029.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud030.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud031.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud032.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud033.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud034.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud035.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud036.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud037.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud038.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud039.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud040.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud041.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud042.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud043.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud044.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud045.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud046.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud047.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud048.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud049.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud050.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud051.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud052.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud053.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud054.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud055.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud056.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud057.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud058.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud059.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud060.jpg", sf::milliseconds(30));
AnimatedPicture->addFrame("/home/xwm/Frames/cloud061.jpg", sf::milliseconds(30));
AnimatedPicture->setSize(800, 530);
AnimatedPicture->play();
AnimatedPicture->setLooping(true);
}

// in main

tgui::Gui gui(window);
    AnimatedPicture(gui);
}

But the app take 471mb in Ram. Is that normal or i did something wrong ?

with respect
wmbuRn

texus

I don't think you made a mistake, but if this is caused by my texture manager then I might be able to reduce it.

After a quick calculation, if you store the RGBA value of every pixel like my texture manager does then it could easily take 100mb if the images are 800x530.

Does the following code reproduce the high memory usage?
Code (cpp) Select
#include <SFML/Graphics.hpp>
#include <sstream>

template <typename T>
std::string to_string(T value)
{
    std::ostringstream oss;
    oss << value;
    return oss.str();
}

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "Window");

    sf::Image images[61];
    sf::Texture textures[61];
    sf::Sprite sprites[61];
    sf::String filenames[61];

    for (unsigned int i = 0; i < 61; ++i)
    {
        if (i < 10)
            filenames[i] = "/home/xwm/Frames/cloud00" + to_string(i+1) + ".jpg";
        else
            filenames[i] = "/home/xwm/Frames/cloud0" + to_string(i+1) + ".jpg";

        images[i].loadFromFile(filenames[i]);
        textures[i].loadFromImage(images[i]);
        sprites[i].setTexture(textures[i]);
    }

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        window.clear();
        window.display();
    }
}


Does this code reduce the memory usage?
Code (cpp) Select
#include <SFML/Graphics.hpp>
#include <sstream>

template <typename T>
std::string to_string(T value)
{
    std::ostringstream oss;
    oss << value;
    return oss.str();
}

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "Window");

    sf::Texture textures[61];
    sf::Sprite sprites[61];
    sf::String filenames[61];

    for (unsigned int i = 0; i < 61; ++i)
    {
        if (i < 10)
            filenames[i] = "/home/xwm/Frames/cloud00" + to_string(i+1) + ".jpg";
        else
            filenames[i] = "/home/xwm/Frames/cloud0" + to_string(i+1) + ".jpg";

        textures[i].loadFromFile(filenames[i]);
        sprites[i].setTexture(textures[i]);
    }

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        window.clear();
        window.display();
    }
}

wmbuRn

#5
Second code reduced memory usage [247 mb in ram]. I hate arrays btw, id rather put 530 frames myself then writtin 1 line of array :)

Will it matter if i resize original images to resolution 800x530?

High memory:
https://s24.postimg.org/uutj7elol/High_memory.png

Low memory:
https://s21.postimg.org/a306xmhef/Low_memory.png

Both taking 80-100% cpu [ there is no .setFramerateLimit(n) (n is any number). Even with 30 FPS its the same amount of memory, just cpu went down to 0% up to 3% :)

texus

What is the size of all those images btw? How much mb are they on your disk?

The second code gives your minimum ram usage, you can't go below that.
If you make your images smaller then there is of course less to be placed in memory so that way you could still lower your memory usage a bit though.

The first code is like it is done in tgui and as you saw it uses a lot more memory.

My problem is now that I have to choose wheter or not I change my texture manager to use less memory and use something like the second code instead of like the first code. But if I do this it will no longer be possible to acess the pixel data and thus check for transparent pixels (could be nice when you have a picture of a portrait frame and you want the mouse clicks to work when you click through the transparent part in the middle on the objects behind it).
So it's either use more ram memory, or use less memory without the possibility to acess the pixel data.

Does it actually matter to you that it uses more ram, or can you live with it?

wmbuRn

#7
Most PC today can handle application that uses 500 mb of ram. Mine can too [ i hope so :) ] Give me a minute and i will tell you how much ram it will take for both apps when they handles 571 pics :)

Low memory one took more than 950 mb of ram [ cant take more since i have 1.3gb ddr1 ram
[and my desktop become useless, cant click on anything] [ i can post pictures if needed]

High memory program blocks my pc entirely. :)

I am a user, i will use whatever you made for using :)

Pictures are 48 mb all. [571 pics], taken from 720p mp4 file [ with "ffmpeg" program ] so their size is 720p. Will take new Frames out of source video (and will set destination width=800 height=530 ] and will check with your programs again. Will reply in few minutes

Tested with 150 pictures 5mb total.
size is 800x530

Low memory app 570 mb in ram.
High memory app 1gb in ram, my desktop becomes useless.



texus

AnimatedPicture was actually made for animations of small images. Although you can use it for what you are doing, it might not be the best solution.

As you noticed the ram memory can get pretty high when loading all those big frames. Usually in situations like this you don't load everything on startup but you kinda stream from your disk. Only load a few images and after every frame, load the next one and forget about the previous one.
Or you can use a project like sfeMovie that plays the video directly instead of splitting it into images.

wmbuRn

#9
Maybe i will use sfeMovie after i master this gui :) Thanks for your help, i will stick with static images for now :) latter will do what you said [ image by image, and forget previous] but i am glad i learned something new. :)