Tutorial: 'Progress Bar' Basics
- Introduction | | Starting Point | | First Steps | | Drawing | | Progress | | Background and Frame | | Transformations | | Sizes | | Colours | | The Final Program
Progress Bar is a C++ class for displaying a progress bar to a render window.
Note that this tutorial makes use of C++11 features and Progress Bar itself uses C++11 features so a C++11 compatible compiler is required.
We're going to need a basic program to use as a starting point. The following program includes SFML and then uses it to create a window with a loop that continues until the window is closed, also processing the window's events:
#include <SFML/Graphics.hpp>
int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "Progress Bar tutorial - Basics", sf::Style::Default);
while (window.isOpen())
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
{
window.close();
}
}
window.clear(sf::Color(128, 128, 128));
window.display();
}
return EXIT_SUCCESS;
}This is a simple, working SFML render window used for graphical displays and is the minimal required. If you use SFML, you should already be aware of this "skeleton" program. Note that we clear the window with a medium grey colour; this is because the Progress Bar starts out with a black background so the background would not be visible on a window with a background that is black, which is the default colour when clearing a window.
The first things we need to do are include Progres Bar and create a Progress Bar object.
To include Progress Bar, we simply add:
#include <SelbaWard/ProgressBar.hpp>
To create an instance of a Progress Bar, we simply use:
sw::ProgressBar progressBar;
and "progressBar" becomes the name of our new Progress Bar object.
To see that bar, it needs to be drawn to the window. A Progress Bar can be drawn like any standard SFML drawable:
window.draw(progressBar);
If you were to run the program so far, you would not see anything other than the grey window background. This is because a Progress Bar's background and frame are disabled by default and its bar is set to zero by default.
We can change the progress amount at any time and the subsequent draws of the object would reflect this.
If we set the progress to 100%, we can see the full bar at its maximum size:
progressBar.setPercentage(100.f);
Now, if you run the program, you should see a small, horizontal, white rectangle in the top-left corner of the window. This is the default size of Progress Bar (64 x 8).
You can experiment to see the result of different percentages. Note that values below 0% or above 100% are "clamped" - rounded to the nearest acceptable value (0% or 100%).
A Progress Bar can have a static background rectangle drawn behind the bar; this rectangle can also have a frame. These are enabled and disabled together.
We enable the background and frame:
progressBar.setShowBackgroundAndFrame(true);
Running the program now, we still see a small, horizontal, white rectangle in the top-left corner of the window.
What went wrong? Where are the background and frame?
In fact, we can see the frame; its default colour is white.
To show this, we change the progress percentage back to 0:
progressBar.setPercentage(0.f);
Now, running the program will show just the background and frame. The background is a black rectangle and the frame is white.
You may notice that the top and left edge of the frame are not shown. This is because the position of the Progress Bar is determined by the actual bar and background while the frame extends to outline those. We are still drawing the Progress Bar at the top-left corner so the bar is at the top-left corner, which is why the top and left edge of the frame cannot be seen.
As with most Selba Ward objects (and all standard SFML drawables), Progress Bar inherits from sf::Transformable. This means that all the standard SFML transformations (such as position, origin, scale and rotation) are available to Progress Bar.
We can position the Progress Bar in the centre of the window by:
- setting its origin to the centre of the Progress Bar:
progressBar.setOrigin(progressBar.getSize() / 2.f); - and then setting the position to the centre of the window:
progressBar.setPosition(sf::Vector2f(window.getSize() / 2u));
Running the program now shows the Progress Bar in the centre of the window with the frame in its entirety.
There are two ways to resize a Progress Bar: by setting a new size or using the scale transformation. Scaling will scale the entire object - frame included - and is applied to final drawing only (similarly to setting a position, origin or rotation); it is also specified in a ratio of the standard size. In the next section, we will be setting a new standard size.
We set a new, much larger size:
progressBar.setSize({ 600.f, 400.f });
IMPORTANT: we must set the size before setting the origin as the origin is set to the centre by using the current size so this line must go before the "setOrigin" line.
The Progress Bar is now much larger, with a size of 600 x 400. Note that the frame still only has a width of 1.
We can change the thickness of the frame:
progressBar.setFrameThickness(25.f);
You may have noticed that the bar progresses from the left to the right. This can be adjusted by simply rotating the Progress Bar. For example, to make the bar progress upwards, you can rotate the bar by 90° to the left (-90.f).
Currently, the background is black and the frame is white. You may also remember that the bar is also white (you can see this by setting the bar to a higher percent - for example, 50%).
Each of these colours can be customised by specifying an sf::Color to use.
- We set the bar to blue:
progressBar.setColor(sf::Color::Blue); - the background colour to yellow:
progressBar.setBackgroundColor(sf::Color::Yellow); - and the frame to black:
progressBar.setFrameColor(sf::Color::Black);
As suggested earlier, change the "setPercentage" line so that it is now at 50%:
progressBar.setPercentage(50.f);
Running the program now, you can see the result - half of the rectangle is blue (the left half - the bar), the other half is yellow (the right half - the background) and the thick frame is now black:
One thing to remember is that the entire background rectangle is always drawn (when activated) and the bar is drawn over the top of it. This means that if you use a transparent/semi-transparent colour for the bar, the background behind it becomes visible. For example, if you change the bar's colour to red with an opacity of 50%, the bar shows as orange because the background is yellow.
That concludes the tutorial on the basics.
#include <SFML/Graphics.hpp>
#include <SelbaWard/ProgressBar.hpp>
int main()
{
sf::RenderWindow window(sf::VideoMode(800, 600), "Progress Bar tutorial - Basics", sf::Style::Default);
sw::ProgressBar progressBar;
progressBar.setShowBackgroundAndFrame(true);
progressBar.setSize({ 600.f, 400.f });
progressBar.setFrameThickness(25.f);
progressBar.setOrigin(progressBar.getSize() / 2.f);
progressBar.setPosition(sf::Vector2f(window.getSize() / 2u));
progressBar.setColor(sf::Color::Blue);
progressBar.setBackgroundColor(sf::Color::Yellow);
progressBar.setFrameColor(sf::Color::Black);
progressBar.setPercentage(50.f);
while (window.isOpen())
{
sf::Event event;
while (window.pollEvent(event))
{
if (event.type == sf::Event::Closed)
{
window.close();
}
}
window.clear(sf::Color(128, 128, 128));
window.draw(progressBar);
window.display();
}
return EXIT_SUCCESS;
}