With the HCScreen library, we are increasingly approaching the possibility to build a comfortable micro-controversy with the ESP32 and a TFT display.
We get a large number of new possibilities by using icons. First, icons are clearer and easy to associate with a specific function, secondly, we can now also take advantage of the X-Y possibilities of the joystick.
New features in the library:
initIconGrid(x, y, split, rows)
At the position x and y, a grid with columns and rows is created in which icons can be displayed with 31x31 pixels. The function checks whether the parameters exceed the limits of the display and corrects the parameters accordingly.
This simplified form of function initializes a grid that uses the entire screen (at 160x128 that's 5 x 4 icons).
Index is the number of the grid cell in which the icon is to be displayed. The numbering starts with 0 and takes place line by line, i.e. at 4 x 5 first line = 0, 1, 2, 3, 4 second line = 5, 6, 7, 8, 9 etc.
*icon is the pointer to a structure of type HCIcon in the program memory.
showIcon(x, y, *icon)
Another variant for setting an icon, here the column (x) and the row (y) are specified to which the icon is to be placed. *icon is again the pointer to an HCIcon structure.
setGridColor (marker color, background color)
With this function, the color of the background for the grid and the color with which a selected icon is to be marked can be set. The color values are passed in 3-byte format (red, green, blue) as is common on web pages. So e.g. 0xFF0000 = red, 0x00FF00 = gün or 0x0000FF = blue. The colors are then automatically converted to the 16-bit format for the display. To select a selected icon, a square is drawn in the marker color around the icon.
In the icons subdirectory, a larger number of common icons are already defined, which can be easily included in the sketch. But it is also very easy to create an icon yourself. We need the image editing program GIMP. As an output, we need some image that we scale to 31 x 31 pixels. Then we export the image and choose as the source format we select c-source text(*.c) or c-source header(*.h) by using .c or . h as an extension to the file name. After clicking the export button, a dialog appears in which we enter the name of the icon (e.g. icon_senden). None of the checkboxes should have a check mark! In the specified destination folder, a file ending in .c or . h created. We open this file with a text editor. It should start something like this:
/* GIMP RGB C-Source image dump (icon_senden.c) */
static const struct
unsigned int width;
unsigned int height;
unsigned int bytes_per_pixel; /* 2:RGB16, 3:RGB, 4:RGBA */
unsigned char pixel_data[1024 * 386 * 3 + 1];
} icon_senden =
31, 31, 3,
We now have to replace the red part with the structure type HCIcon, which has been defined in the library.
static const HCIcon icon_senden =
31, 31, 3,
If we now include this file in the Sketch, we can use the address of the structure icon_senden in the showIcon function.
Important! Icon files must always be imported to HCScreen.h.
The library's sample programs should have a sketch named Esp32_Control_Center_Icon. We open this sketch in the Arduino IDE and upload it to the ESP32 which according to the commentary was connected to the TFT display and the Joy-Stick module.
All 20 icons should be visible on the display as here on the picture. With the joystick we can now select an icon and press the joystick button. The serial monitor displays the number of the icon that was clicked. In the example program, two icons are assigned with one function. If you click on the folder Icon, the contents of an SD card will be displayed in the card reader. If you click on the setup icon, a sample form with two icons appears at the bottom left.
The library can be HCScreen Librarydownloaded. In the Arduino IDE, simply import the ZIP file from the download in the Library Manager.
Check out the other hcScreen posts in this blog. There you will also find detailed information about the hardware used.