Creating a reusable component
Let’s create the slider component for adjusting the temperature.
This is a component consisting of a few images and a container.
We will use one image for the background of the slider, another image for the bar in the middle of the slider and a third image for the knob.
The three images we will use are here.
The basic idea is to put the bar on top of the background and only show a portion of the bar. The knob will be put on top of the bar and placed accordingly.
Let’s denote the type of our slider ValueSelector and create a custom container for encapsulating this.
gui/include/gui/common/ValueSelector.hpp
#ifndef VALUE_SELECTOR_HPP
#define VALUE_SELECTOR_HPP
#include <touchgfx/containers/Container.hpp>
#include <touchgfx/widgets/Image.hpp>
using namespace touchgfx;
class ValueSelector : public Container
{
public:
ValueSelector();
private:
Image background;
Image bar;
Image knob;
Container barViewport;
};
- See the article on creating custom containers for a thorough explanation of containers.
Let’s go on and place the images and the view port container appropriately.
gui/src/common/ValueSelector.hpp
#include <gui/common/ValueSelector.hpp>
#include <BitmapDatabase.hpp>
ValueSelector::ValueSelector() :
currentValue(0),
newValueCallback(0)
{
background.setBitmap(Bitmap(BITMAP_VALUE_SELECTOR_BACKGROUND_ID));
background.setXY(0, VERTICAL_HEIGHT_SPACING);
add(background);
bar.setBitmap(Bitmap(BITMAP_VALUE_SELECTOR_BAR_ID));
bar.setXY(0, 0);
barViewport.setPosition(3, background.getY() + 7, bar.getWidth(), bar.getHeight());
barViewport.add(bar);
add(barViewport);
knob.setBitmap(Bitmap(BITMAP_KNOB_ID));
knob.setXY(0, background.getY() + 2);
add(knob);
setWidth(background.getWidth());
setHeight(background.getHeight() + 2 * VERTICAL_HEIGHT_SPACING);
}
Adding the ValueSelector as a component of the TemplateView yields the look we want.
Next let’s go and make the slider react to interactions.