Step 3: Containers

Containers

In this step you'll learn how to use a TouchGFX container (touchgfx::Container) as a view port. Concretely, instead of adding elements to TemplateView, we'll add these to a container instead and try to understand how view ports can be used to control visibilty of graphical elements.

The following things can be said about a container in TouchGFX. For now we'll only use the first two.

1. Can act as a view port.
2. Is a touchgfx::Drawable that can have children.
3. Can be used to create reusable, self contained components that can be cleanly seperated from your View.
4. Communicates through callbacks.

First things first. Instead of the Box background from the first exercise, let's replace it with a background image. Concretely, in the Templateview.hpp header file, we'll replace the type Box for Image. We'll use the image background.png found below. Go ahead and dump it into your assets/images folder.

 

gui/include/gui/template_screen/TemplateView.hpp

...
class TemplateView : public View<TemplatePresenter>
{
...
private:
  Image background;
  Image borderBox;
};

Initialization of background in setupScreen now looks as follows: 

gui/src/template_screen/TemplateView.cpp

#include <gui/template_screen/TemplateView.hpp>
#include <BitmapDatabase.hpp>

void TemplateView::setupScreen()
{
  background.setBitmap(Bitmap(BITMAP_BACKGROUND_ID));
  background.setXY(0, 0);
  add(background);
}
...

Now that we have a general background for our application and have prepared a background for the view port container, let's go ahead and declare one just below our two images in TemplateView.hpp and add it inside setupScreen. Notice how the container is placed to cover the borderBox image exactly.

gui/include/gui/template_screen/TemplateView.hpp

...
private:
  Image background;
  Container imageViewport;
  Image borderBox;
}

gui/src/template_screen/TemplateView.cpp

...
void TemplateView::setupScreen()
{
  ...
  imageViewport.setPosition(borderBox.getX(), borderBox.getY(), borderBox.getWidth(), borderBox.getHeight());
  add(imageViewport);
}

Let's build and run the simulator. Naturally, we cannot actually see the view port we've added: 

To really understand how view ports can be used to control the visibility of elements, let's add an additional, but temporary, image object as a child to the view port, and place it at a negative x-coordinate. We'll use the image image00.png found below. Go ahead and dump  into your assets/images folder.

• Coordinates of children in a touchgfx::Container are relative to their parent.
• We must specify height and width of a Container.

Let's define a temporary Image, temp, to better understand containers and view ports.

gui/include/gui/template_screen/TemplateView.hpp

...
private:
  Image background;
  Container imageViewport;
  Image borderBox;
  Image temp;
}

Let's center the image in the Y-direction relative to the container and set the X-coordinate to negative-half the width of the image, essentially pushing it off-screen:

gui/src/template_screen/TemplateView.cpp

...
void TemplateView::setupScreen()
{
  ...
  temp.setBitmap(Bitmap(BITMAP_IMAGE00_ID));
  temp.setXY(-temp.getWidth() / 2, (imageViewport.getHeight() - temp.getHeight()) / 2);
  imageViewport.add(temp);
}

If we build and run the simulator one final time, we see that half of the temp image has been hidden by it's parent, the view port.

 

• Position the image at the center of the view port. 
• Instead of adding children to viewPort, create a new class that inherits from touchgfx::Container and add borderbox and temp images to it, effectively moving it out of TemplateView to make it self contained. See this article for pointers. 

• This article discusses containers and view-ports in more detail.

The next step guides you through how to add Buttons to your application.