Logo
Sign in
  1. TouchGFX
  2. Getting Started
  3. Tutorial 4: Creating reusable components

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.

background
bar
knob

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.

Was this article helpful?
0 out of 0 found this helpful
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
Have more questions? Please create a post on the forum.

Related articles

  • Step 3: Adding events and callbacks
  • Step 1: Setup your new application
  • Using texts and fonts
  • Step 4: Using your component
  • Step 1: Persisting state