Adding Graphics
Let's kick things off by displaying some simple graphics. In particular, we'll do the following:
- Use
touchgfx::Box
to create a colored background. - 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
).
- 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:
- Did you give your widget a size?
- Did you remember to
add
it?- Does it respect z-order?
- Change the color of the background to Blue.
- 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.