If you want to write a tutorial, be my guest.
It takes too much time to do everything myself.
Here is the example code:
#include <TGUI/TGUI.hpp>
void scrollbarValueChanged(const tgui::Callback& callback)
{
tgui::Container* gui = callback.widget->getParent();
// Reposition the pictures
for (int i = 0; i < 10; ++i)
{
tgui::Picture::Ptr pic = gui->get(tgui::to_string(i));
pic->setPosition(0, (i - callback.value) * 150);
}
}
int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "TGUI window");
tgui::Gui gui(window);
// Create 10 images displayed below each other
for (unsigned int i = 0; i < 10; ++i)
{
tgui::Picture::Ptr pic(gui, tgui::to_string(i));
pic->load("image" + tgui::to_string(i) + ".png");
pic->setSize(200, 150);
pic->setPosition(0, i * 150);
}
// Create the scrollbar
tgui::Scrollbar::Ptr scrollbar(gui, "Scrollbar");
scrollbar->load("TGUI/widgets/Black.conf");
scrollbar->setLowValue(4); // 4 images fit inside the window
scrollbar->setMaximum(10); // 10 images in total
scrollbar->setSize(20, 600);
scrollbar->setPosition(200, 0);
scrollbar->bindCallbackEx(scrollbarValueChanged, tgui::Scrollbar::ValueChanged);
while (window.isOpen())
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
window.close();
gui.handleEvent(event);
}
window.clear();
gui.draw();
window.display();
}
}
If you want smooth scrolling however, instead of seeing the images jump, then you have to make a few changes to that code.
- LowValue should become 600 (instead of 4), because you are now counting the pixels instead of the images.
- Maximum should become 1500 (instead of 10), because that is the amount of pixels that all images take together in this example.
- The pictures should be set to an y value of "i * 150 - callback.value", instead of "(i - callback.value) * 150".
If you have space inbetween the images or images from other sizes then these values will obviously change. Just keep in mind that LowValue are the visible pixels and Maximum the total number of pixels that you will be able to see.
Although this will look a lot better, there is a limitation in tgui. Because the arrows of the scrollbar always change the value by 1, they will only move the images one pixel and are thus useless.
And I just noticed a bug that when scrolling the mouse wheel on top of the scrollbar, no callback is being send. I'll fix that later today.