Step 2: Creating a custom reusable component

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.