Step 2: Adding Graphics

Adding Graphics

Let's kick things off by displaying some simple graphics. In particular, we'll do the following:

1. Use touchgfx::Box to create a colored background.
2. Use touchgfx::Image to place an image on top of that background at specific coordinates.

Adding a box

We'll start by declaring a private Box object for the background of our application in TemplateView.hpp:

gui/include/gui/template_screen/TemplateView.hpp

...
#include <touchgfx/widgets/Box.hpp>

using namespace touchgfx; 
class TemplateView : public View<TemplatePresenter>
{
...
private:
  Box background;};

Let's define the object in TemplateView.cpp. We'll make the box sit at (0,0) and fill up the entire screen. The color of the box is defined as a 16-bit RGB565 color, in this case black (0x0).

1. TouchGFX offers a conversion mechanism for working with 24-bit colors, i.e. for red: Color::getColorFrom24BitRGB(0xFF, 0x00, 0x00);

gui/src/template_screen/TemplateView.cpp

...
void TemplateView::setupScreen()
{
  background.setPosition(0, 0, HAL::DISPLAY_WIDTH, HAL::DISPLAY_HEIGHT);
  background.setColor(0);
  add(background);
}
...

Let's build and run the simulator:

Adding an image

Let's declare an Image along side the Box background.

gui/include/gui/template_screen/TemplateView.hpp

#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/Image.hpp>

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

Before we define what the image should display, let's add some image assets to our application. Assets, is a term used for TouchGFX applications resources like images, fonts and texts. You can find all the image assets used throughout this application in this zip file (right click, save as). Download and place the images in the assets/images/ folder at the root of your application.

We'll use border_box.png now, and the rest later.

BitmapDatabase.hpp contains identifiers for every image in your assets/images/ folder. Rebuild your application to generate ID's for the new image assets. Inspecting the database now we'll find the generated ID for the asset border_box.png:

generated/images/include/BitmapDatabase.hpp

...
const uint16_t BITMAP_BORDER_BOX_ID = 1; // Size: 152x154 pixels
...

Using this particular bitmap ID, we'll add our Image to the view at (162, 60). In this case, we'll use the setXY rather than the setPosition method we used for Box, since the size of the image is already known:

gui/src/template_screen/TemplateView.cpp

#include <BitmapDatabase.hpp>
...
void TemplateView::setupScreen()
{
  ...
  borderBox.setBitmap(Bitmap(BITMAP_BORDER_BOX_ID));
  borderBox.setXY(162, 60);
  add(borderBox);} 

Let's build and run the simulator one final time and verify that we can now see the image on top of the black background, concluding this lesson.

Are your widgets not appearing? Consider the following:

1. Did you give your widget a size?
2. Did you remember to add it?
3. Does it respect z-order?

1. Change the color of the background to Blue.
2. Move the image so that it's bottom right corner is located at (touchgfx::HAL::DISPLAY_WIDTH, touchgfx::HAL::DISPLAY_HEIGHT).

• This article discusses images and the conversion from image to source code in more detail.
• This article discusses Z-order, visibility and coordinate systems in more detail.

The next step guides you through creating a custom Container to act as a view port.