arduino tft lcd gui brands

New Launch intelligent C-Series 3.5 inch-10.1 inch TFT LCD Display Module SCBRHMI products has been conceived as TFT monitor & Touch controller. It includes processor, control program, driver, flash memory, RS232/ TTL /USB, touchscreen, power supply etcso it is a whole display system based on the powerful & easy operating system, which can be controlled by Any MCU. (Very suitable for your Arduino and Raspberry Pi projects.)

They can be used to perform all basic functions, such as text display, image display, curve display as well as touch function, Video & Audio function etc. It has free GUI design software to offer an easy way to create an intuitive and superb touch user interface even for beginners, the User Interface can be more abundant and various. And the 128M flash memory can store your data, configuration files, image file, font file, video file and audio file etc.

Included GUI Design Software Makes Programming Fast & Easy -Our HMI TFT LCD module is a whole display system that comes with no-cost GUI design software(STONE Designer).

In this article, you will learn how to use TFT LCDs by Arduino boards. From basic commands to professional designs and technics are all explained here.

There are several components to achieve this. LEDs,  7-segments, Character and Graphic displays, and full-color TFT LCDs. The right component for your projects depends on the amount of data to be displayed, type of user interaction, and processor capacity.

TFT LCD is a variant of a liquid-crystal display (LCD) that uses thin-film-transistor (TFT) technology to improve image qualities such as addressability and contrast. A TFT LCD is an active matrix LCD, in contrast to passive matrix LCDs or simple, direct-driven LCDs with a few segments.

In Arduino-based projects, the processor frequency is low. So it is not possible to display complex, high definition images and high-speed motions. Therefore, full-color TFT LCDs can only be used to display simple data and commands.

There are several components to achieve this. LEDs,  7-segments, Character and Graphic displays, and full-color TFT LCDs. The right component for your projects depends on the amount of data to be displayed, type of user interaction, and processor capacity.

TFT LCD is a variant of a liquid-crystal display (LCD) that uses thin-film-transistor (TFT) technology to improve image qualities such as addressability and contrast. A TFT LCD is an active matrix LCD, in contrast to passive matrix LCDs or simple, direct-driven LCDs with a few segments.

In Arduino-based projects, the processor frequency is low. So it is not possible to display complex, high definition images and high-speed motions. Therefore, full-color TFT LCDs can only be used to display simple data and commands.

After choosing the right display, It’s time to choose the right controller. If you want to display characters, tests, numbers and static images and the speed of display is not important, the Atmega328 Arduino boards (such as Arduino UNO) are a proper choice. If the size of your code is big, The UNO board may not be enough. You can use Arduino Mega2560 instead. And if you want to show high resolution images and motions with high speed, you should use the ARM core Arduino boards such as Arduino DUE.

In electronics/computer hardware a display driver is usually a semiconductor integrated circuit (but may alternatively comprise a state machine made of discrete logic and other components) which provides an interface function between a microprocessor, microcontroller, ASIC or general-purpose peripheral interface and a particular type of display device, e.g. LCD, LED, OLED, ePaper, CRT, Vacuum fluorescent or Nixie.

The LCDs manufacturers use different drivers in their products. Some of them are more popular and some of them are very unknown. To run your display easily, you should use Arduino LCDs libraries and add them to your code. Otherwise running the display may be very difficult. There are many free libraries you can find on the internet but the important point about the libraries is their compatibility with the LCD’s driver. The driver of your LCD must be known by your library. In this article, we use the Adafruit GFX library and MCUFRIEND KBV library and example codes. You can download them from the following links.

You must add the library and then upload the code. If it is the first time you run an Arduino board, don’t worry. Just follow these steps:Go to www.arduino.cc/en/Main/Software and download the software of your OS. Install the IDE software as instructed.

First you should convert your image to hex code. Download the software from the following link. if you don’t want to change the settings of the software, you must invert the color of the image and make the image horizontally mirrored and rotate it 90 degrees counterclockwise. Now add it to the software and convert it. Open the exported file and copy the hex code to Arduino IDE. x and y are locations of the image. sx and sy are sizes of image. you can change the color of the image in the last input.

Upload your image and download the converted file that the UTFT libraries can process. Now copy the hex code to Arduino IDE. x and y are locations of the image. sx and sy are size of the image.

In this template, We converted a .jpg image to .c file and added to the code, wrote a string and used the fade code to display. Then we used scroll code to move the screen left. Download the .h file and add it to the folder of the Arduino sketch.

In this template, We used sin(); and cos(); functions to draw Arcs with our desired thickness and displayed number by text printing function. Then we converted an image to hex code and added them to the code and displayed the image by bitmap function. Then we used draw lines function to change the style of the image. Download the .h file and add it to the folder of the Arduino sketch.

In this template, We added a converted image to code and then used two black and white arcs to create the pointer of volumes.  Download the .h file and add it to the folder of the Arduino sketch.

In this template, We added a converted image and use the arc and print function to create this gauge.  Download the .h file and add it to folder of the Arduino sketch.

while (a < b) { Serial.println(a); j = 80 * (sin(PI * a / 2000)); i = 80 * (cos(PI * a / 2000)); j2 = 50 * (sin(PI * a / 2000)); i2 = 50 * (cos(PI * a / 2000)); tft.drawLine(i2 + 235, j2 + 169, i + 235, j + 169, tft.color565(0, 255, 255)); tft.fillRect(200, 153, 75, 33, 0x0000); tft.setTextSize(3); tft.setTextColor(0xffff); if ((a/20)>99)

while (b < a) { j = 80 * (sin(PI * a / 2000)); i = 80 * (cos(PI * a / 2000)); j2 = 50 * (sin(PI * a / 2000)); i2 = 50 * (cos(PI * a / 2000)); tft.drawLine(i2 + 235, j2 + 169, i + 235, j + 169, tft.color565(0, 0, 0)); tft.fillRect(200, 153, 75, 33, 0x0000); tft.setTextSize(3); tft.setTextColor(0xffff); if ((a/20)>99)

In this template, We display simple images one after each other very fast by bitmap function. So you can make your animation by this trick.  Download the .h file and add it to folder of the Arduino sketch.

In this template, We just display some images by RGBbitmap and bitmap functions. Just make a code for touchscreen and use this template.  Download the .h file and add it to folder of the Arduino sketch.

RTT-GUIis an open source GUI framework for embedded system. The project is forked fromRT-Thread Package -- GUI Engineand has been heavily refactored for Arduino.

RTT-GUI is built on top of the. The later provides low-level device drivers for the former through common and graphic device operations./* common device operations (RT-Thread: "rtdef.h") */struct rt_device_ops {rt_err_t (*init)(rt_device_t dev);rt_err_t (*open)(rt_device_t dev, rt_uint16_t oflag);rt_err_t (*close)(rt_device_t dev);rt_size_t (*read)(rt_device_t dev, rt_off_t pos, void *buffer, rt_size_t size);rt_size_t (*write)(rt_device_t dev, rt_off_t pos, const void *buffer, rt_size_t size);rt_err_t (*control)(rt_device_t dev, int cmd, void *args);};

/* graphic device operations (RTT-GUI: "driver.h") */struct rtgui_graphic_driver_ops {void (*set_pixel)(rtgui_color_t *c, int x, int y);void (*get_pixel)(rtgui_color_t *c, int x, int y);void (*draw_hline)(rtgui_color_t *c, int x1, int x2, int y);void (*draw_vline)(rtgui_color_t *c, int x , int y1, int y2);void (*draw_raw_hline)(rt_uint8_t *pixels, int x1, int x2, int y);};

RTT-GUI provides a set of basic graphic functions./* graphic functions (RTT-GUI: "dc.h") */void rtgui_dc_draw_point(rtgui_dc_t *dc, int x, int y);void rtgui_dc_draw_vline(rtgui_dc_t *dc, int x, int y1, int y2);void rtgui_dc_draw_hline(rtgui_dc_t *dc, int x1, int x2, int y);void rtgui_dc_draw_line(rtgui_dc_t *dc, int x1, int y1, int x2, int y2);void rtgui_dc_draw_rect(rtgui_dc_t *dc, rtgui_rect_t *rect);void rtgui_dc_fill_rect(rtgui_dc_t *dc, rtgui_rect_t *rect);void rtgui_dc_draw_round_rect(rtgui_dc_t *dc, rtgui_rect_t *rect, int r);void rtgui_dc_fill_round_rect(rtgui_dc_t *dc, rtgui_rect_t *rect, int r);void rtgui_dc_draw_annulus(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t r1, rt_int16_t r2, rt_int16_t start, rt_int16_t end);void rtgui_dc_draw_pie(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t r, rt_int16_t start, rt_int16_t end);void rtgui_dc_fill_pie(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t r, rt_int16_t start, rt_int16_t end);void rtgui_dc_draw_polygon(rtgui_dc_t *dc, const int *vx, const int *vy, int count);void rtgui_dc_fill_polygon(rtgui_dc_t *dc, const int *vx, const int *vy, int count);void rtgui_dc_draw_circle(rtgui_dc_t *dc, int x, int y, int r);void rtgui_dc_fill_circle(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t r);void rtgui_dc_draw_arc(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t r, rt_int16_t start, rt_int16_t end);void rtgui_dc_draw_ellipse(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t rx, rt_int16_t ry);void rtgui_dc_fill_ellipse(rtgui_dc_t *dc, rt_int16_t x, rt_int16_t y, rt_int16_t rx, rt_int16_t ry);

When finished drawing,rtgui_dc_end_drawing()should be involved to releasedevice contextand trigger rendering process./* device context functions (RTT-GUI: "dc.h") */rtgui_dc_t *rtgui_dc_begin_drawing(rtgui_widget_t *owner);void rtgui_dc_end_drawing(rtgui_dc_t *dc, rt_bool_t update);

RTT-GUI currently supports displaying ASCII and simplified Chinese (Unicode) characters. Two size of fonts are available, 12 and 16 pixel points, for each character set (asc12,asc16,hz12andhz16).

If the SD card driver is available, it is recommended to store the font data (here) in SD card to save space (setCONFIG_USING_FONT_FILE == 1). RTT-GUI by default checks/font/directory for fonts./* font config (RTT-GUI: "guiconfig.h") */#define CONFIG_USING_FONT_12 (0)#define CONFIG_USING_FONT_16 (1)#define CONFIG_USING_FONT_HZ (0)#define CONFIG_USING_FONT_FILE (1)

RTT-GUI currently supports decoding images with the following format:BMPPNG(experimental support), based onLode Vandevenne"s LodePNG projectXPM, RTT-GUI internal used format

All the decoder are optional and configurable./* image decoder config (RTT-GUI: "guiconfig.h") */#define CONFIG_USING_IMAGE_XPM (1)#define CONFIG_USING_IMAGE_BMP (1)#define CONFIG_USING_IMAGE_JPEG (1)#define CONFIG_USING_IMAGE_PNG (0)

/* image functions (RTT-GUI: "image.h") */rtgui_image_t *rtgui_image_create_from_file(const char *type, const char *fn, rt_int32_t scale, rt_bool_t load);rtgui_image_t *rtgui_image_create_from_mem(const char *type, const rt_uint8_t *data, rt_size_t size, rt_int32_t scale, rt_bool_t load);void rtgui_image_destroy(rtgui_image_t *image);void rtgui_image_get_rect(rtgui_image_t *image, rtgui_rect_t *rect);void rtgui_image_blit(rtgui_image_t *image, rtgui_dc_t *dc, rtgui_rect_t *rect);

The most interesting functions are here!RTT-GUI is aclient-serverkind of framework. The server thread starts automatically, which dispatches events to clients. The clients are widgets, which handle events.

Very similar to other event propagation mechanism, a RTT-GUI event is propagating from the topmost widget (a mainWindow) to the deepest widget and the propagation will stop once the event been handled.

EveryRTT-GUI application has to attach to a thread and each thread can be attached byonly one RTT-GUI application.Therefore whenCREATE_APP_INSTANCE()been involved, the new application will attach to the thread that created it. If there is another application already attached,CREATE_APP_INSTANCE()will fail (if so,app == RT_NULL).

The next step is to create a mainWindowholding all other widgets.main_win = CREATE_MAIN_WIN(win_event_handler, "Demo Window",RTGUI_WIN_STYLE_DEFAULT);

Inside the event handler function, we could also involve the defaultWindowevent handler (by involvingDEFAULT_HANDLER(obj)()) and only do something special with the interested events (e.g.PAINT).rt_bool_t win_event_handler(void *obj, rtgui_evt_generic_t *evt) {rt_bool_t done = RT_FALSE;if (DEFAULT_HANDLER(obj)) {done = DEFAULT_HANDLER(obj)(obj, evt);}if (IS_EVENT_TYPE(evt, PAINT)) {done = show_demo(TO_WIN(obj));}return done;}

The parameters ofCREATE_LABEL_INSTANCE():Pointer to parent widget.Pointer to event handler function.Pointer to position and size structure (type:rtgui_rect_t).Label text.

CREATE_BUTTON_INSTANCE()does"t provide the parameter to set position and size. However for any widget, those can be changed by involvingrtgui_widget_set_rect().

A good news is we could use sizer (Box) to automate it.sizer = CREATE_BOX_INSTANCE(main_win, RTGUI_HORIZONTAL, 0);WIDGET_ALIGN_SET(label, STRETCH);WIDGET_ALIGN_SET(btn, STRETCH);rtgui_box_layout(sizer);

The parameters ofCREATE_BOX_INSTANCE():Pointer to parent widget. The parent widget must be aContaineror widget "inherited" fromContainer(e.g.Window).Sizer style,RTGUI_HORIZONTALorRTGUI_VERTICAL.Border size.

When creation complete, the sizer is attached to its parent.rtgui_box_layout()triggers the rearrangement of the positions and sizes of the immediate children of the sizer"s parent.

The final step is to show the mainWindowand spin up the RTT-GUI application.rtgui_win_show(main_win, RT_FALSE);rtgui_app_run(app);DELETE_WIN_INSTANCE(main_win);rtgui_app_uninit(app);

rtgui_app_run()involves theapplication event handlerand doesn"t return until the mainWindowclosed.DELETE_WIN_INSTANCE()andrtgui_app_uninit()then destroy the children widgets and release resources.

Beside programmatical design, a JSON like, text based GUI configuration is also available. The same design in last section can be transformed into the following script.APP: {PARAM: {// name, handler"Demo App", NULL,},MWIN: {PARAM: {// title, handler"Demo Window", hdl,},BOX: {PARAM: {// orient, border size// orient: 1, HORIZONTAL; 2, VERTICAL1, 0,},ID: 0,},LABEL: {PARAM: {// size, handler, textNULL, NULL, "Label Demo",},// CENTER_HORIZONTALTEXTALIGN: 0x01,// RTGUI_ALIGN_STRETCHALIGN: 0x20,},BUTTON: {PARAM: {// handler, type, text// type: 0x00, NORMAL; 0x10, PUSHNULL, 0, "Button Demo",},// RTGUI_ALIGN_STRETCHALIGN: 0x20,},},}

MWINrepresents the mainWindow. There is another element --WIN, represents the normalWindow. One RTT-GUI application can have multiple normalWindows but only one mainWindow.

In sketch side, the first step is involvingrtgui_design_init()to setup parser.design_contex_t ctx;const hdl_tbl_entr_t hdl_tbl[] = {{ "hdl", (void *)win_event_handler },{ RT_NULL, RT_NULL },};obj_tbl_entr_t obj_tbl[1];rtgui_design_init(&ctx, design_read, hdl_tbl, obj_tbl, 1));

The parameters ofrtgui_design_init():Pointer to parser context (value assigned by callee).Pointer to design reading function.Pointer to handler function table.Pointer to object table.Object table size.

When script stored as text file, the function may be defined as below.#define DESIGN_FILE "/design/demo.gui"char buf[512];rt_err_t design_read(char **_buf, rt_uint32_t *sz) {*sz = (rt_uint32_t)read(designFile, buf, sizeof(buf));*_buf = buf;return RT_EOK;}

The next step is paring the design by involvingrtgui_design_parse(). The following example assumes the script is stored as text file.int designFile = -1;designFile = open(DESIGN_FILE, O_RDONLY);rtgui_design_parse(&ctx);close(designFile);

When parsing completed, the requested widget pointers can then be accessed from object table.sizer = (rtgui_box_t *)obj_tbl[0];rtgui_box_layout(sizer);

The RTT-GUI application and mainWindowpointers are available inparser context.rtgui_win_show(ctx.win, RT_FALSE);rtgui_app_run(ctx.app);DELETE_WIN_INSTANCE(ctx.win);rtgui_app_uninit(ctx.app);

You may observe a difference on display after run both demos: For the dynamic design demo, there is no title bar on the mainWindow. The reason is when creating mainWindow, the design parser uses the default style,RTGUI_WIN_STYLE_MAINWIN. However in the other demo, we explicitly use the styleRTGUI_WIN_STYLE_DEFAULT(to show the mainWindowas a normalWindow).

Adafruit 2.8" TFT Touch Shield v2ILI9341 (LCD) with SPI interfaceFT6206 (touch screen) with IIC interfaceSSD1331 (LCD) with SPI interfaceHardware buttons

Generic 0.96" OLED moduleSSD1306 (LCD) with SPI interface/* hardware config (RT-Thread: "rtconfig.h") */// #define CONFIG_USING_ADAFRUIT_TFT_CAPACITIVE// #define CONFIG_USING_TINYSCREEN// #define CONFIG_USING_SSD1306_SPI4

/* RT-Thread device name (RTT-GUI: "guiconfig.h") */#define CONFIG_GUI_DEVICE_NAME "ILI9341" // RGB565#define CONFIG_TOUCH_DEVICE_NAME "FT6206"// #define CONFIG_GUI_DEVICE_NAME "SSD1331" // RGB565// #define CONFIG_KEY_DEVICE_NAME "BTN"// #define CONFIG_GUI_DEVICE_NAME "SSD1306" // MONO/* color */#define CONFIG_USING_MONO (0)#define CONFIG_USING_RGB565 (1)#define CONFIG_USING_RGB565P (0)#define CONFIG_USING_RGB888 (0)

/* RT-Thread device name (RTT-GUI: "guiconfig.h") */#define CONFIG_GUI_DEVICE_NAME "ILI9341"#define CONFIG_TOUCH_DEVICE_NAME "FT6206"/* color */#define CONFIG_USING_MONO (0)#define CONFIG_USING_RGB565 (1)#define CONFIG_USING_RGB565P (0)#define CONFIG_USING_RGB888 (0)/* hardware config (RT-Thread: "rtconfig.h") */#define CONFIG_USING_TINYSCREEN

/* RT-Thread device name (RTT-GUI: "guiconfig.h") */#define CONFIG_GUI_DEVICE_NAME "SSD1331"#define CONFIG_KEY_DEVICE_NAME "BTN"/* color */#define CONFIG_USING_MONO (0)#define CONFIG_USING_RGB565 (1)#define CONFIG_USING_RGB565P (0)#define CONFIG_USING_RGB888 (0)

/* RT-Thread device name (RTT-GUI: "guiconfig.h") */#define CONFIG_GUI_DEVICE_NAME "SSD1306"/* color */#define CONFIG_USING_MONO (1)#define CONFIG_USING_RGB565 (0)#define CONFIG_USING_RGB565P (0)#define CONFIG_USING_RGB888 (0)

Arduino is an open-source electronics prototyping platform based on flexible & easy-to-use HW and SW. It"s intended for creating interactive objects or environments (it can read sensors, perform actions based on inputs from buttons, control motors, etc...).

All Arduino boards have one thing in common: they are programmed through the Arduino IDE. This is the software that allows you to write and upload code.

Things look better with a library like LittlevGL by Gábor Kiss-Vámosi because it comes with a very project-friendly MIT license. A GUI developed with it is well suited for touchscreens, but can also be operated with a mouse, keyboard or some buttons. The code runs on popular 16-, 32- and 64-bit microcontrollers. The minimum criteria to meet are 16 MHz, 64 kB Flash and 16 kB RAM. Thus, the library fits perfectly to small boards such as the ESP32 or ESP8266 and has now been included by Espressif in their IDF. Below you’ll find support for getting started and putting together test hardware. LittlevGL also offers the opportunity to develop and test GUIs on the PC, which is not to be sniffed at. The code created on the PC for a GUI can be transferred to the target microcontroller without major adjustments.

You learn most when you try something hands-on. Therefore, the use of the library within Elektor’s Weather Station is demonstrated here. The goal is a GUI suitable for touch operation. We will even realize a multi-page display for data. But this requires hardware.

An ESP32 module is easily available. You can use modules like an ESP32 PICO D4, an ESP32 DevKitC, or a derivate board. The display offers a selection between a serial interface and parallel control, which then uses almost all IOs of the ESP32. Since the price also plays a role, a common 3.5" LCD for the Raspberry Pi is used. Most cheap displays like the 3.5" JOY-iT are connected via SPI and work with 3.3-V levels on the signal lines. They are therefore perfectly suited for a pin-saving link to an EPS32 board. In addition, they already have an integrated touch controller that can be connected via SPI.

Note: LittlevGL does not provide display drivers, only ‘higher’ functions for drawing objects. It is up to the creator to develop the appropriate hardware-related routines. But even that doesn’t require reinventing the wheel, since most display controllers benefit from ready-made libraries. Here the Arduino TFT_eSPI library is used, which also supports 3.5" displays for the RPi.

The required software is also orderly. In addition to the compulsory Arduino IDE and board support for the ESP32, the Arduino versions of the LittlevGL and TFT_eSPI libraries are needed.

In order to install and manage both libraries comfortably, the following two address lines must be entered in the Arduino IDE under Preferences Additional Boards Manager URLs:

These allow searching and installing LittlevGL and TFT_eSPI via the Library Manager. Then check if the Arduino library folder contains ‘TFT_eSPI’ and ‘LittlevGL’.

As already mentioned, both libraries are needed. LittlevGL takes care of the UI, i.e. the animation and arrangement of objects, the management of several scenes, and the rendering of the displayed graphics. The result is a bitmap. This data is then transferred from TFT_eSPI to the display hardware in a suitable way. These libraries therefore abstract from the actual display used.

TFT_eSPI not only supports SPI displays for the RPi, but others too based on the following controllers: ILI9341, ST7735, ILI9163, S6D02A1, HX8357D, ILI9481, ILI9486, ILI9488, ST7789, and R61581.

This supports many common colour displays. If a RAiO-based controller such as the RA8875 is used, the RA8875 library from Adafruit can be used instead. Adjustments are necessary to connect LittlevGL. In addition to colour displays, monochrome types can also be used in conjunction with the u8g2 library . However, the following text refers to the common 3.5" SPI LCDs for RPi.

If you are using a display with a controller lacking Arduino driver support, you need to know what functions need to be provided. This knowledge is also helpful for porting and linking.

This should clarify how a graphic is displayed on the screen. What’s missing is the processing of the data from the touch controller. For that, we have a LittlevGL function which reads and processes the coordinates of a possible touch depending on the device. RPi displays are usually equipped with an XPT2046 touch controller, which is connected to the SPI bus as an additional slave. Unfortunately, this cannot be read with a clock rate higher than 2.5 MHz. Since the display and its controller run at a clock rate of 20 MHz (at room temperature, up to 26 MHz), the bus clock rate needs adjusting during access and then get reset to the original clock rate. The TFT_eSPI library also helps here, because it not only offers XPT2064 support, but also automatically takes care of the necessary clock switching.

First, a word about the strengths of LittlevGL: it is advantageous that the source code is also available. This facilitates the debugging of your own code. In addition, the library is well documented and developed out actively. Even beginners can use the examples to quickly achieve their first sense of achievement and design interfaces. From simple labels, buttons and tables to dropdown lists and gauges — a wide range of controls is provided. Windows and note boxes as well as themes for the appearance are also provided in order to be able to adapt the GUI even better to one"s needs. The documentation describes all elements in detail. At [1], functions of the library and their interaction are demonstrated. LittlevGL does not yet offer any basic functions for setting pixels or drawing lines. That’s due to the type of image generation: If an element changes, the new screen area to be drawn can be determined and the buffer prepared in the internal RAM. The image is then sent to the display. Consequently, not just a line needs to be present as an object, but even individual pixels. This restriction makes it much easier to redraw areas on the screen.

With other microcontrollers the possibilities and priorities need to be considered, because many devices either have considerably less RAM available, or would have to address external RAM through a bag of tricks. In addition to the available RAM, other aspects such as the available computing power or multi-threading are also relevant. LittlevGL unfortunately does not allow multi-threading, so all access must be from the same thread as the lv_task_handler() function. The required computing power depends on how much interaction and drawing takes place on the display and whether and how animations are used. Thanks to its two processor cores, an ESP32 has enough computing power for a GUI.

The connection of a display to an ESP32 board should follow the allocation in Table 1. This would prepare the hardware. Now the configuration and the software testing follow. First, we deal with the library TFT_eSPI as the actual display driver and then with the configuration of LittlevGL.

Concerning the display driver, to be able to adapt the file User_Setup.h to the display used, you have to look for the folder TFT_eSPI in the library directory of the Arduino IDE. The following #defines have to be present for the display used:

Meaning: the GPIOs used are defined and a 20-MHz SPI clock serves as safe initial value for the display. 2.5 MHz is suitable for the touch controller. For testing we use an example (selection: TFT_eSPI 480x320 Rainbow480), which outputs the rainbow colours once. If everything is compiled and connected correctly, the display should look like Figure 2. At this point, we have the hardware basically ready for use.

The next step is linking LittlevGL to the display driver and creating its own HMI (Human Machine Interface). In order to use LittlevGl, the configuration should be adapted first. To do this, look for the littlevGL folder in the Arduino library directory. In the file lv_config.h, adaptations to the display used are made and the available elements of the library are set. At the start of the file you will find the settings for the memory management.

defines the RAM reserved for GUI objects. At the specified value of 64 kB, the linker will later complain that such an amount cannot be provided. With static reservation (at compile time), the non-continuous memory area of the ESP32 becomes noticeable. You could now reserve blocks at runtime through malloc and free. Since this measure holds other dangers, the matter is approached differently. Change the line like so:

So much for the basic setting. For first tests, the remaining settings remain untouched; the changes are saved. In the Arduino IDE you can now select the example ESP32_TFT_eSPI under LittlevGL and upload it to the ESP32 board. If everything is configured correctly, “Hello Arduino!” should show up on a white background on the display.

So, the driver and LittlvGL cooperate well. However, the touch controller of the display has not yet been read and this data has not been transferred to the library. The following are the basic code parts allowing you to can create a basic framework for your own application. For this purpose, the example ESP32_TFT_eSPI from the LittlevGL library, which just got loaded into the ESP32, is examined more closely.

In the setup() function, after the initialization of the library in line 63 using lv_init() and the TFT in lines 69 and 70 with tft.begin() and tft.setRotation(1), lines 73 and 74 with the initialization of the structure lv_disp_drv_t follow. This structure is given a function pointer for writing to the display, and is subsequently registered in the library.

A similar procedure can be found in the dummy touch driver in lines 80–84. The last step is to provide a time base for the library using "Tickers". Here, a function is called in the specified interval of 20 ms. Each time, a timer is increased by 20 ms. Finally, a button will be created and assigned the text “Hello Arduino!” (lines 90–92).

To avoid having to start from scratch with every project, the author has created a basic project in which the settings for the display of JOY-iT and its touch controller as well as the initialization of the components are made. In line 139 of the sketch, the orientation of the display is set with tft.setRotation(3). The image is thus rotated 270° from the starting position. If another display needs e.g. a rotation of 180°, the parameter should be set to 1.

With this basic framework, you can start to create your own GUI. This can be done directly on the ESP32 hardware, but compiling, uploading and testing takes time. The alternative is a PC simulator. Its installation requires familiarity with Eclipse. The installation is described here. It is a bit more difficult in Windows than in Linux or OS X. In the simulator, you can now try out the first steps without having to upload modified code to the hardware every time.

Since we’re talking about a weather station, a simple surface with three tabs is created for the display of the weather data. To keep the Arduino sketch clear, the functions and the creation of the GUI elements are stored in a separate file.

Through Pointer, you can then write new values to the displays. One example is the UpdateTemperature function. The display element Lmeter expects a value between 0 and 100, but the size has a value range of ±50°. The temperature must therefore be offset by 50. 0° then corresponds to a Lmeter value of 50. In addition, the current temperature is displayed as text. This is done by snprintf and a small local buffer, which is written as new text into the text field. If the text length changes, the text is not automatically realigned. The alignment must be done again after setting the text. To do this, lv_obj_align is called again with the parameters for the label. Humidity and air pressure are treated very similarly. Figure 5 shows a screenshot of the finished tab and Figure 6 shows what it ’really‘ looks on the LCD.

The 1.8inch LCD uses the PH2.0 8PIN interface, which can be connected to the Raspberry Pi according to the above table: (Please connect according to the pin definition table. The color of the wiring in the picture is for reference only, and the actual color shall prevail.)

ST7735S is a 132*162 pixel LCD, and this product is a 128*160 pixel LCD, so some processing has been done on the display: the display starts from the second pixel in the horizontal direction, and the first pixel in the vertical direction. Start to display, so as to ensure that the position corresponding to the RAM in the LCD is consistent with the actual position when displayed.

The LCD supports 12-bit, 16-bit and 18-bit input color formats per pixel, namely RGB444, RGB565, RGB666 three color formats, this routine uses RGB565 color format, which is also a commonly used RGB format

If you need to draw pictures, or display Chinese and English characters, we provide some basic functions here about some graphics processing in the directory RaspberryPi\c\lib\GUI\GUI_Paint.c(.h).

Set points of the display position and color in the buffer: here is the core GUI function, processing points display position and color in the buffer.

2. The module_init() function is automatically called in the INIT () initializer on the LCD, but the module_exit() function needs to be called by itself

Python has an image library PIL official library link, it do not need to write code from the logical layer like C, can directly call to the image library for image processing. The following will take 1.54inch LCD as an example, we provide a brief description for the demo.

The demo is developed based on the HAL library. Download the demo, find the STM32 program file directory, and open the LCD_demo.uvprojx in the STM32\STM32F103RBT6\MDK-ARM directory to check the program.

For the screen, if you need to draw pictures, display Chinese and English characters, display pictures, etc., you can use the upper application to do, and we provide some basic functions here about some graphics processing in the directory STM32\STM32F103RB\User\GUI_DEV\GUI_Paint.c(.h)

image.cpp(.h): is the image data, which can convert any BMP image into a 16-bit true color image array through Img2Lcd (downloadable in the development data).

For the screen, if you need to draw pictures, display Chinese and English characters, display pictures, etc., you can use the upper application to do, and we provide some basic functions here about some graphics processing in the directory GUI_Paint.c(.h)

Popular Create by 300+ developers, used by 100,000+ people and downloaded in every minute. LVGL is available in Arduino, PlatformIO, ESP32, MCUXpresso, Zephyr, NuttX, RT-Thread, ARM CMSIS-Pack and many more.

Cross-platform Has no external dependencies and can be compiled for any vendor"s any MCU or MPU, and (RT)OS to drive ePaper, OLED or TFT displays, or even monitors.

The NuMaker-HMI-MA35D1-S1 is an evaluation board for Nuvoton NuMicro MA35D1 series microprocessors, and consists of three parts: a NuMaker-SOM-MA35D16A81 SOM board, a NuMaker-BASE-MA35D1B1 base board and a 7” TFT-LCD daughter...

The CleO35-WiFi is an accessory for the CleO series � the smart TFT display for Arduino, and is designed with an ESP-12S Wi-Fi module from Ai-thinker using core processor ESP8266