www.fastbitlab.

com

Mastering Microcontroller: STM32-LTDC,

LCD-TFT, LVGL (MCU3)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

License
This power point presentation by BHARATI SOFTWARE is licensed under
CC BY-SA 4.0
To view a copy of this license, visit
https://creativecommons.org/licenses/by-sa/4.0

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Important Links
• For the full video course please visit
• https://www.udemy.com/course/mastering-microcontroller-stm32-ltdc-lcd-tft-lvgl/
• Course repository
• https://github.com/niekiran/EmbeddedGraphicsLVGL-MCU3
• Explore all FastBit EBA courses
• http://fastbitlab.com/course1/
• For suggestions and feedback
• [email protected]

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Social media
• Join our Facebook private group for technical discussion
• https://www.facebook.com/groups/fastbiteba/
• Linkedin
• https://www.linkedin.com/company/fastbiteba/
• Facebook
• https://www.facebook.com/fastbiteba/
• YouTube
• https://www.youtube.com/channel/UCa1REBV9hyrzGp2mjJCagBg
• Twitter
• https://twitter.com/fastbiteba

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Highlights of the course

• Introduction to the embedded graphics system
• LCD-TFT interfacing using both MPI-DPI and MPI-DBI
• Using LTDC(LCD-TFT Display Controller)peripheral of STM32 MCU
• Bare metal step-by-step code implementation
• Creating STM32 UI projects using LVGL

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

A microcontroller based system which runs embedded graphics application

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Graphics application
A microcontroller based interactive application which may involve any of the below components to
display on the display device

• Colours
o Color of the text • Graphical effects(scrolling, sliding, swipe, press,
o Background color / layer color release)
• Widgets(simple button, radio button, check box)
• Shapes
• Videos
o Box
• 3D rendering
o Circle • Gaming
o Arrows
o Lines
• Images
• Texts

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

Microcontroller(Host)

RAM ▪ LCD
Interface o TFT
CPU Display o IPS
▪ LED
FLASH ▪ Plasma
▪ CRT
▪ OLED

A simple microcontroller based graphics system

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

Microcontroller
Display

RAM Interface

CPU

FLASH Rendering of
image data

Essential parts of the embedded graphics system

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Important parts of the embedded graphics system

• A Microcontroller(Host)
• Processor ( Executes your code, updates frame buffer)
• RAM ( Frame buffer)
• Flash ( static images, fonts, texts,etc )
• Display Module
• Glass(Where you see the graphics)
• Driver chip(Interprets the signals sent by the host, generates required electric signals and
voltages to lit the pixels of the display panel)

Frame buffer ➔ A memory area which holds the pixel values of the frame to be
updated on the display

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Other important parts of the embedded graphics system
• Display controller
• Present at the HOST side
• Generates display timing-related signals
• Transmits pixel data
• External memories
• External Flash( your code + graphics components(images, texts) may not fit inside the internal flash )
• External RAM
• Graphics library (LVGL, TouchGFX)
• UI designer tool
• To create an interactive UI application
• Touch sensing
• Touch panel
• Touch screen controller(Which senses touch panel and informs HOST)
• DMA
• Helps to transfer frame buffer to display without the intervention of the CPU
• Helps to transfer graphics details from flash to frame buffer without the intervention of the CPU
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

Hardware to use in this course

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Use any one of these boards

Option 1:
32F429IDISCOVERY Discovery kit
with STM32F429ZI MCU
Recommended

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Mini USB cable

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Option 2: 32F746GDISCOVERY Discovery kit (STM32F746NG MCU)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Option 3:
STM32F7508-DK
Discovery kit with STM32F750N8 MCU

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Option 4:
STM32F4DISCOVERY Discovery kit with
STM32F407VG MCU

SPI

2.4 inch SPI Interface

240×320 Touch Screen TFT
Colour Display Module

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Option 5:
NUCLEO-F4x STM32 Nucleo-64 development board

SPI

2.4 inch SPI Interface

240×320 Touch Screen TFT
Colour Display Module

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Board MCU Processor On- On- On On LCD Chrome On board

chip chip board board controller ART LCD-TFT
RAM Flash External external Accelera
(KiB) (MiB) SDRAM flash tor™
32F746GDISCOVERY STM32F746NG Cortex-M7 340 1 Yes Yes Yes Yes Yes
128Mbit 128Mbit 480x272

STM32F7508-DK STM32F750N8 Cortex-M7 340 64KiB Yes Yes Yes Yes Yes
128Mbit 128Mbit 480x272

32F429IDISCOVERY STM32F429ZI Cortex-M4 256 2 Yes No Yes Yes Yes

64Mbit 240x320

STM32F4DISCOVERY STM32F407VG Cortex-M4 192 1 No No Yes Yes No

NUCLEO-F4x ?? Cortex-M4 ?? ?? No No No No No

https://www.st.com/en/evaluation-tools/stm32-mcu-mpu-eval-tools.html
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

Roaring tiger demo

Runs on,

32F429IDISCOVERY 32F746GDISCOVERY 32F407DISCOVERY + SPI

based LCD module

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Command and RGB data

are sent over SPI

SPI
STM32F407 DISC-1

Control signals

STM32F407 DISC-1 board and external RGB display interfacing

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Roaring tiger demo

5V

PC2 SD0(MISO)

SPI2
PB13
PB15 SCK
SDI(MOSI)
STM32F407 DISC-1 DC_RS
PD9 RESET
CS
GND
PD10

PD11 VCC
GND
5V

STM32F407 DISC-1 board and external RGB display interfacing

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com
Source :
http://www.lcdwiki.com/2.4inch_SPI_Module_ILI9341_SKU:MSP2402

Pin details Product parameters

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

STM32F429

SRAM
Display signals
22 Pin LCD
Display driver RGB display
Arm
Controller SPI 2 chip
Cortex
(LTDC)
M4 LCD Driver chip
programming interface
FLASH
4

Control signals
240x320
LCD-TFT Display module

32F429IDISCOVERY Discovery kit

For more information refer the schematics of 32F429IDISCOVERY Discovery kit

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

Embedded graphics system

STM32F746NG

SRAM

LCD
Display
40 Pin driver RGB display
Arm Controller
chip
Cortex M7 (LTDC)

FLASH 480x272
LCD-TFT Display module

32F746GDISCOVERY Discovery kit

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

32F746GDISCOVERY display module

4.3’’ TFT with CTP(Capacitive Touch Panel)

Glass

Driver IC

Interface

40 pins

Display Module: A Functional module to show image on it, can consists of

display glass, display driver IC, other peripheral components and circuits
and display interface
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

What is an RGB display?

A display which takes red-green-blue signal components of a pixel to generate the
colors to be displayed on the screen

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

A model in which R-G-B primary colors are

added together in various ways to reproduce a
broad array of colors

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Some important terminologies

• Pixel
• Pixel density (PPI)
• Pixel color depth (Bit depth)
• Pixel format
• Resolution

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel(Picture element) Pixel of the image : A smallest information(color

information) of the image stored in computer
memory
480 pixels

A pixel

270
lines

Pixel grid
A color image

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Grid of pixels

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel of the display

A smallest glowing(color producing) electronic element of the display
module is also called as a pixel

A pixel

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

A Pixel of the image : The smallest information(color information) of the image stored
in computer memory

How much memory does one pixel consume in compute memory ? (Pixel depth/color
depth/bit depth)
Depends on pixel format
measured in bpp(bits per pixel)

What are the different types of pixel formats/color formats?

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Important pixel formats(Color format)

Pixel format Meaning
Pixel format Meaning
ARGB8888 32 bits; RGB with Alpha component;
8bits/component . L4

RGB888 24 bits; 8bits/component; No alpha A8 8 bits alpha ; No

RGB
RGB565 16bits; 5 bits R , 6 bits G , 5 bits B; No alpha
A4 4 bits alpha ; No
ARGB1555 16bits; 1 bit for alpha , 5 bits for color RGB
ARGB4444 16bits; 4bits/component GRAY4 4bits Gray
RGB666 16bits; 6bits/component; No alpha intensity value
ARGB2222 8bits; 2bits/component GRAY2 3bits Gray
ABGR2222 8bits; 2bits/component intensity value
L8 (8-bit luminance or BW 1 bit black &
CLUT) white
L8_RGB888 8 bit Indexed color look up table ; size = 24
L8_RGB565 8 bit Indexed color look up table ; size = 16
AL44 4-bit alpha + 4-bit luminance
AL88 8-bit alpha + 8-bitBHARATI
luminance
SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

If an image is represented in ARGB8888 pixel format, that means each

pixel of that image consumes 32bits(32bpp) in memory, and each pixel
has 4 components
1. Alpha(opacity) component of 8bits
2. Red color component of 8bits
3. Green color component of 8bits 4
4. Blue color component of 8bits

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

GRAY8
0

The intensity of the color varies while moving from

black to white.

When R=G=B, Gray color is produced

Gray intensity

255

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Grayscale B&W

True Color

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

L8 format
Represents the colors of the image by clor look up table(CLUT)
In L8 format 8bit index value is used to look for the color value in the
predefined color look up table.

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
L8 format
Represents the colors of the image by color lookup table(CLUT). Color value array
In L8 format, 8bit index value is used to look for the color value in the 24bits
predefined color lookup table.
Pixel value as Index Color value -1
Index register Color value -2
Color value -3
Frame buffer Pixel format Total memory
Color value -4
Resolution consumed
Color value -5
480x270 RGB888 480x270x3
= 3805KiB Color value -6
480x270 L8_RGB888 480x270x1 + Color value -7
256 x 3 Color value -8
= 127.3KiB

255 Color value -256

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel density of the display device(ppi)

• Pixel density is measured in ppi(pixel per inch)

• It denotes how many pixels are there in per inch of the display
• More pixels/inch means more clarity of the image and texts shown on the display
• As ppi of the display increases, it is capable of showing high resolution images(more pixel
information) in less space without or with less degradation of quality of the image
1-inch

1-inch

8ppi = 64 pixels /square inch

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Pixel density of the display device(PPI)

Display size

Vertical resolution
Horizonal resolution

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Resolution
Image resolution:
Number of pixels used to represent an image arranged in standard graphics display width and height
dimensions
An image of 1600x900(HD+ resolution) will portray more details about the image than 1280x720(HD
resolution) image

Display resolution:
Number of pixels available in a given size of the display arranged in standard graphics display width
and height dimensions

Refer the below wiki page for different graphic display resolution available
https://en.wikipedia.org/wiki/Graphics_display_resolution

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

What is an alpha component ?

• Its an optional opacity component
• Colors with opacity are referred to as ARGB colors
• Opacity level 0 to 255 if alpha component is of 8bits
• 255 means fully opaque with the background color
• 0 means fully transparent with the background color

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Opacity: 0%
Opacity: 25% Opacity: 50%

Opacity: 75% Opacity: 100%

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

How many bytes of memory does an image consume?

Given :
Resolution of the bitmap image : 480x270
Pixel format : ARGB8888

Total memory consumed = Width x Heightx (bpp/8)

= 480 x 270 x (32/8)
= 506.25 KiB

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BMP(Bitmap) images
1. An BMP image file contains uncompressed pixel data, hence consumes more space on the disk
2. You can directly read the pixel values and display them on the display module

File meta data

ARGB values of
the first pixel

Display module showing

the image Image on disk in
.bmp format
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

You cannot directly read and display the .jpg file contents on the
display module

Bitmap
ARGB values
data
JPEG Decoder of the first
pixel

1) JPEG decoder middleware

2) JPEG decoder peripheral Display module
of the MCU

.jpg image on disk

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Storing images in the application

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

STM32F746NG RGB display

SRAM
(340KB)

LCD
Display
40 Pin driver Display Glass
Arm Controller
chip
Cortex M7 (LTDC)

FLASH
480x272
(1MB)
LCD-TFT Display module

32F746GDISCOVERY Discovery kit

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

Frames

.png

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Storing images in the application

1. Convert the images to bitmap ‘C’ array (pixel value array) with
desired pixel format
2. Store them in internal flash memory
3. Use appropriate pixel format

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Selecting pixel format for your application

Depends on ,
1) Pixel format support by the LCD driver chip
2) Desired color range
3) Microcontroller RAM space availability
4) Microcontroller Flash space availability

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LCD Driver : ILI9341

Supports RGB565/RGB666/RGB222 Pixel formats only

RGB565
• 1 pixel consumes 2 bytes
• Total flash consumed for 3 frames = ( 320x240x2 ) * 3 = 450KiB

Total On-chip Flash: 2MB

Total on-chip RAM : 256KB

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

32F746GDISCOVERY LCD Driver : OTA5180A

Supports up-to RGB888 Pixel formats

RGB888
• 1 pixel consumes 3 bytes
• Total flash space consumed for 3 frames =
( 480x270x3 ) * 3 = 1139KiB

Total on-chip Flash : 1MB

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

http://www.lcdwiki.com/2.4inch_SPI_Module_ILI9341_SKU:MSP2402

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

32F429IDISCOVERY
32F746GDISCOVERY 32F407DISCOVERY + SPI
based LCD module

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Command and RGB data

are sent over SPI

SPI
STM32F407 DISC-1

Control signals

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

5V

PC2 SD0(MISO)

PB13
PB15 SCK
SDI(MOSI)
STM32F407 DISC-1 DC_RS
PD9 RESET
CS
GND
PD10

PD11 VCC
GND
5V

STM32F407 DISC-1 board with an external RGB display interfacing

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

LTDC of the ST Microcontroller

Configure and enable the LTDC peripheral (LCD-TFT Display Controller) of the microcontroller
• LTDC of the MCU generates all synchronization and timing signals and transfers RGB components
to the display.
• Display which has a display driver chip that interprets those signals and drives the display panel to
light the desired pixels

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

STM32F746NG

SRAM
(340KB)

LCD
Display
RGB interface driver Display Glass
Arm Controller
chip
Cortex M7 (LTDC)

FLASH
480x272
(1MB) Backlight signals LCD-TFT Display module
VDD

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Embedded graphics system

STM32F407x

SRAM

LCD
SPI interface driver Display Glass
Arm chip
Cortex M7

FLASH
320X240
(Frame buffer)
Control signals LCD-TFT Display module

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Some math
• Converted ARGB8888 pixel format image to RGB565 pixel format ‘C’ array
• Pixel depth = 16bpp( 2 bytes)
• Array size/frame = 480x270x2 ➔ 253.125 KiB
• Array size of 3 frames ➔ 759.375KiB
• 759.375KiB of flash is used up to hold just 3 frames .
• Let's check the .map file of the project to verify the memory consumption

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Display interface types

• MIPI DPI (Display Pixel Interface)

• MIPI DBI (Display Bus Interface/MCU interface)
• MIPI DSI (Display Serial Interface)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

MIPI(Mobile Industry Processor Interface) Alliance

• MIPI Alliance develops interface specifications for mobile and mobile-influenced

devices.
• In the mobile industry, companies use MIPI Alliance specifications when developing
smartphones, tablets, laptops, and hybrid devices

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

MIPI DPI
• This is also called as RGB interface
• Applies to display interface which uses 16/18/24-bit data lines and control signals
• The MIPI DPI specification standardizes the data and controls signals to be used by manufacturers
of mobile device processors, cameras, and display
• The DPI interface is typically used when the display module doesn’t support the frame buffer
(GRAM). The Host controller must stream the data in real-time to the display

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
The host processor interface must implement a 24-bit The display module interface
data width and accompanying control and timing signals . must be implemented with a
The host processor must be capable of transferring data 16-bit or 18-bit or 24-bit data
as 16/18/24 bit words . width

VDD Power block

GND
Host BL_A Backlight
BL_K

MIPI DPI interface

Vsync
Display module need
Hsync
Interface block
not to have framebuffer
Interface block DE
PCLK
D[15:0] or D[17:0] or D[23:0]
(RGB data lines)

Display module

Figure shows a display module connected to the Host(Microcontroller) using MIPI DPI interface
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

LTDC generates all the required

synchronization and data signals as per Display module
the programmed parameters in its
registers

STM32 with LTDC

Framebuff

LTD
er

C MIPI DPI
Power

Backlight control

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

MIPI DBI(Display Bus Interface)

• Also known as MCU interface
• The MIPI-DBI is used to interface with a display module with an integrated
graphic RAM (GRAM). The pixel data is first updated in the local GRAM of
the display driver chip which repeatedly refreshes the display
• Host and display module can be connected by simple GPIOs
• Types of MIPI-DBI are:
• DBI Type A: based on Motorola 6800 bus
• 8/9/16/18/24 bit parallel data transmission is possible
• DBI Type B: based on Intel® 8080 bus
• 8/9/16/18/24 bit parallel data transmission is possible
• DBI Type C: based on SPI protocol
• 3 or 4 line SPI interface

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
MIPI DBI
Display module
CS DC/RS→ Register select
MCU(Host)
DC/RS D[x:x] → Parallel Data lines
GPIO W𝑅 Driver CS → Chip Select
RD Frame WR → Parallel data write strobe
buffer
D[23:0] RD →Parallel data read strobe

8/9/16/18/24-bit parallel MCU interface (DBI Type A or Intel 8080)

Display module

MCU(Host) CS RS→ Register select

E D[x:x] → Data lines
GPIO R/nW Driver E → Read write enable/disable
Frame
RS buffer
CS → Chip Select
D[23:0] R/nW → Read operation/Write operation

8/9/16/18/24-bit parallel MCU interface (DBI Type B or Motorola 6800)

Using Type A/B/C interface , MCU first sends commands to the LCD driver, configures some
important LCD parameters, and then writes data to the integrated GRAM to display it

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

4 Line DBI serial interface

Display module

MCU(Host) SCL
DC/RS
SPI CS Driver
Frame
SDI buffer
SDO

8/9/16/18/24-bit serial MCU interface (DBI Type C)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

RGB Interface signals

Vsync :
• This is a vertical synchronization signal sent from the host display controller(LTDC) to the display
module
• This signal marks the “start(beginning) of a new frame”. That means, when this signal asserts, the
display module understands that the host controller is going to send a new frame
Hsync:
• This is a horizontal synchronization signal sent from the host display controller(LTDC) to the
display module
• This signal marks the “start of a new line of the frame.” That means, when this signal asserts, the
display module understands that the host controller will send a new line of the current frame.

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

RGB Interface signals

DE :
• This is sent from the host controller(LTDC) and indicates whether the RGB data is valid or not.
• When DE = 0, The display module doesn't read the RGB data because it is invalid
• When DE = 1 , the display module reads the RGB data and displays it
DOTCLK(PCLK):
• The clock signal is sent from the host controller(LTDC) to read the RGB data when DE = 1; Display
module reads the RGB data during the rising edge of DOTCLK. This also indicates how fast RGB
data is made available to the display module.
RGB data lines :
• The host controller must support 24bit data lines to carry RGB data. The display modules samples
these data lines only when DE=1 during rising edge of DOTCLK. Note that the display module does
not need to support 24 data lines to accept RGB data. You have to check the display module's pin
capability while interfacing.

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel(Picture element) Pixel of the image : A smallest information(color

information) of the image stored in computer
memory
480 pixels

A pixel

270
lines

Pixel grid
A color image

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com Indicates start of
new frame
Wvbp Wvfp

Wvsync
Valid data Valid data Valid data Valid data

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Frame-1 Frame-2 Frame-3 Frame-4

Wvsync ➔ Width of the Vsync strobe

Wvfp ➔ Width of the vertical front porch
Wvbp ➔ Width of the vertical back porch
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com Indicates start of
new frame
Wvbp Wvfp

Wvsync
Valid data Valid data Valid data Valid data

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Data not valid

Frame-1 Frame-2 Frame-3 Frame-4

Wvsync ➔ Width of the Vsync strobe

Wvfp ➔ Width of the vertical front porch
Wvbp ➔ Width of the vertical back porch
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

240

320

320 Portrait 240 Landscape

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Exercise 001 : Display VIBGYOR bars

320

34

34

34

240 34

34

34
36

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Steps
1) Create a new project for your microcontroller or board using stm32cubeide
2) Setup the main system clock
3) Setup AHB and APB clocks
4) Setup pixel clock (DOTCLOCK) (Not required for STM32F407x-DISC1 board with external LCD )
5) Configure the SPI peripheral (Not required for STM32F746-DISC board )
6) Setup framebuffer in RAM
7) Initialize the LCD module by sending LCD commands over SPI (Not required for STM32F746-
DISC board )
8) Configure and enable the LTDC peripheral (Not required for STM32F407x-DISC1)
9) Send frame buffer contents to LCD over SPI (Only in the case of STM32F407x-DISC1 )
10) Make sure that all error interrupts enabled and ISRs implemented

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Setup main system clock(SYSCLK)

We will configure SYSCLK for the maximum value the microcontroller can achieve

Maximum SYSCLK speed for different microcontrollers

32F429IDISCOVERY 32F407DISCOVERY
32F746GDISCOVERY

180MHz 216MHz
168MHz

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Main PLL configuration

• PLL_M (Controls input to the PLL VCO and PLLSAI VCO)
• PLL_N (Multiplier)
• PLL_P(Divider)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Setup AHB and APBx clocks (STM32F429)

APB1
Max:180MHz (APB1 bus clock) (PCLK1)
HCLK Max: 45MHz
(AHB bus clock)
SYSCLK AHB prescaler APB1 prescaler

APB2 prescaler

APB2
(APB2 bus clock) (PCLK2)
Max: 90MHz

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Setup AHB and APB clocks (STM32F429)

• Configure HCLK(AHB clock) to 180MHz (SYSCLK/1)

• AHB prescaler to use ➔ 1
• Configure PCLK1(APB1 clock) to 45MHz (HCLK/4)
• APB1 prescaler to use → 4
• Configure PCLK2(APB2 clock) to 90MHz (HCLK/2)
• APB2 prescaler to use → 2

Please check your MCU’s RM to know maximum speed of HCLK,PCLK1,PCLK2

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Setup main system clock(SYSCLK)

• Configure main PLL parameters
• Configure PLLSAI parameters
• Configure AHB, APBx prescalers
• Turn on the main PLL
• Wait until PLLCLK ready bit is set
• Switch PLLCLK as SYSCLK
• Wait for switch status
• Configure FLASH wait states :
• To correctly read data from Flash memory, the number of wait states (LATENCY) must be correctly
programmed in the Flash access control register (FLASH_ACR) according to the frequency of the
CPU clock (HCLK) and the supply voltage of the device.
• Turn on PLLSAI
• Wait until PLLSAICLK ready bit is set

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Configure FLASH read latency

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Over drive mode enable

PWR_CR
VOS ➔ 0X11
Enable Over drive (ODEN)
Enable ODSWEN bit to switch to
Over drive mode

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Configuring SPI
• The SPI interface is used to send commands to the display module,
which is based on the ILI9341 LCD driver chip
• For STM32F407x + external display setup, this interface is also used to
transmit the RGB data

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Interfacing (STM32F429 DISC)

ILI9341 Programming interface

GPIOs

SPI

RGB interface

Data interface
STM32F429 DISC ILI9341

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

ILI9341 programming interface

PA7 RESX

GPIOs PC2 CSX

PD13 WRX_D/CX

PF9 SDI/SDA
SPI5
PF7 D/CX_SCL ILI9341

STM32F429 DISC

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Interfacing (STM32F407x + external LCD)

Used for both command and RGB data transfer

GPIOs

SPI

STM32F407 DISC-1 ILI9341

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

ILI9341 programming interface

PD10 RESX

GPIOs PD11 CSX

PD9 D/CX

PB15 SDI(PICO)

SPI2 PC2 SDO(POCI) ILI9341

PB13 SCL
STM32F407 DISC-1

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Configuring GPIO pins for SPI functionality

• Configure the GPIO pin to Alternate function mode

• Configure the alternate function mode number in alternate function register (you can get the alt
function mode number from MCU datasheet)
• No pull up or pull down settings are required for SPI communication

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Redefining SPI signal names

New signal names
Deprecated
PICO PICO

Controller Peripheral
MOSI MOSI POCI
POCI
Master Slave
MISO MISO

SDO SDI

Controller Peripheral
SDI SDO

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

MCU SPI peripheral configuration

• Let’s use the below settings for SPI configuration
• SPI mode : Half-duplex Controller
• Data format : 8bit, msb first
• CPOL and CPHA : Check the peripheral datasheet to obtain the correct setting
it requires
• SPI Clock : Check the peripheral datasheet and obtain the max speed it can
support ( < 6MHz )
• Chip select is handled by the software

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

ILI9341 commands
Refer to the files attached with this lecture

ILI9341_Cmd_RGB_Interface.c (Refer to this file if you are using RGB interface)

ILI9341_Cmd_SPI_Interface.c (Refer to this file if you are using SPI interface for RGB data)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Steps
1) Create a new project for your microcontroller or board using stm32cubeide
2) Setup the main system clock
3) Setup AHB and APB clocks
4) Setup pixel clock (DOTCLOCK) (Not required for STM32F407x-DISC1 board with external LCD )
5) Configure the SPI peripheral (Not required for STM32F746-DISC board )
6) Setup framebuffer in RAM
7) Initialize the LCD module by sending LCD commands over SPI (Not required for STM32F746-
DISC board )
8) Configure and enable the LTDC peripheral (Not required for STM32F407x-DISC1)
9) Send frame buffer contents to LCD over SPI (Only in the case of STM32F407x-DISC1 )
10) Make sure that all error interrupts enabled and ISRs implemented

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LTDC configuration
1) LTDC pin initialization (Check the schematic of your board to know which pins are used as LTDC
signals )
2) LTDC peripheral initialization
3) LTDC layers initialization ( layer 1 or layer 2 or both)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

STM32F429 DISC
• This board uses 18bit display connected as shown below

R7
R

R0

G7
G 18bit
LTDC Display
G0

B7

B0

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

STM32F746ng DISC
• This board uses 24bit display connected as shown below

R7
R

R0

G7
G 24bit
LTDC Display
G0

B7

B0

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

• 16bit display connected as shown below

R7

R3

R0

G7
16bit
LTDC G2 Display
G0
B7

B3

B0

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Check display driver chip datasheet to obtain synchronization related values

ILI9341

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Some math
Total Width(TW) = AW+HSW+HBP+HFP pixels
Total time required to send one line(Tline ) = (TW * TDOTCLK ) sec
Total Lines(TL) = AH+VSW+VBP+VFP lines
Total time required to send 1 frame(Tframe) = (TL * Tline) sec

DOTCLK = 6.25MHz
TDOTCLK = 0.16 micro sec
TW = AW+HSW+HBP+HFP = 320 + 10 + 20+ 10 ➔ 360 pixels
TL = AH+VSW+VBP+VFP = 240+2+2+4 ➔ 248 lines
Tline = = (TW * TDOTCLK ) = 360 * 0.16 ➔ 57.6 μs
Tframe = (TL * Tline ) = 248 * 57.6 ➔ 14.3 ms

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Task
Configure the LTDC peripheral to produce the background color RED.

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LTDC Layers
• LTDC supports 2 layers
• You can activate either of the layers or all layers as per your application need
• Programmable default color settings for each layer
• Programmable frame buffer address settings for each layer
• Flexible blending options (Constant and pixel alpha blending )
• Programmable window positioning for each layer
• Most LTDC layer registers are shadow registers, and you need to activate loading shadow values
to real registers explicitly.

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Active display area

Layer-1 Layer-2

Display module
Layer-1 activated with windowing Layer-2 activated with
and dedicated framebuffer holding windowing
yellow color and dedicated framebuffer
holding black color

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Layers and Blending

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Layer-1 color Blended color

Background color

Constant Alpha ( layer 1 ) = 240 , Constant Alpha value = 240/255= 0.94

layer 1 : BF1 = constant alpha , BF2 = 1 - Constant Alpha
BC = BF1 x C + BF2 x Cs
= 0.94 * 128 + 0.06 * 48 = 123 Cs -→ Subjacent color
C → Color of top layer

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Layer windowing

Inactive data area

(layer’s default Color is used here)

Active data area

Active display area

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Exercise 001 : Display VIBGYOR bars

320

34

34

34

240 34

34

34
34

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Layer window horizontal position configuration items

H_stop
H_start

Layer width

Layer active area

WHSTPOS (Start) = AHBP + H_start + 1

WHSPPOS (Stop) = AHBP + H_start + Layer_width + 1 (<= AAW)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Layer window vertical position configuration items

V_start

Layer height Layer active area

H_stop

WVSTPOS (Start) = AVBP + V_start + 1

WVSPPOS (Stop) = AVBP + V_start + Layer_height+ 1 (<= AAH)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

MX = 0 , MY = 1, MV = 1

MX = 0 , MY = 0, MV = 0

MX = 1 , MY = 1, MV = 0 MX = 1 , MY = 1, MV = 0

Portrait-1 Portrait-2

Direction of pixel display

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com
MV MX MY MCU Frame buffer write GRAM(memory inside ILI9341)

240px
This configuration can be E
used for Portrait

Memory write direction

GRAM(memory inside ILI9341) 320px

B
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
X
www.fastbitlab.com
240px MV=0, MY=1. MX =1 (Portrait)
E

320px

GRAM(memory inside ILI9341) Display Glass

GRAM filling up as pixel bytes are written to LCD for every HSYNC strobe
GRAM to display mapping for every HSYNC strobe
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com
MV MX MY MCU Frame buffer write GRAM(memory inside ILI9341)

240px
This configuration can be E
used for Landscape

Memory write direction

GRAM(memory inside ILI9341) 320px

B
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
X
www.fastbitlab.com
240px MV=1, MY=1. MX =0 (Landscape)

320px

GRAM(memory inside ILI9341) Display Glass

GRAM filling up as pixel bytes are written to LCD for every HSYNC strobe
GRAM to display mapping for every HSYNC strobe
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com
Y
240

320

Display
GRAM(Frame memory) of LCD
X
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

Function used to send LCD command parameters

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel writing in the case of STM32F407x + external LCD

There are two methods

1) Non-DMA based data write over SPI ( Processor involved)
• Check the function void bsp_lcd_write(uint8_t *buffer, uint32_t nbytes) in
bsp_lcd.c
2) DMA based data write over SPI
• Check the function void bsp_lcd_write_dma(uint32_t src_addr, uint32_t nbytes)
in bsp_lcd.c

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel buffer
• In the case of STM32F407x + external LCD, you cannot use a screen-
sized frame buffer like in the case of STM32F429 disc board.
▪ On chip RAM of STM32F407x (168KB) < ( 320 x 240 x 2) Bytes (150KB)
• bsp_lcd.c uses non screen sized buffer of 10KB (Draw buffer)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel writing to display device

X1 Display device with GRAM X2
320 px

Draw buffer(10KB)

240 px
16px
Y1
Y2

Set display area

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel writing to display device

X1 Display device with GRAM X2
320 px

Draw buffer(10KB)

LCD WRITE
240 px
16px
Y1
Y2

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel writing to display device X1

X2
Display device with GRAM
320 px

Draw buffer(10KB) Y1

LCD WRITE
240 px
Y2

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Pixel writing to display device

X1 Display device with GRAM X2
320 px

Draw buffer(10KB)

LCD WRITE
240 px

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Dual buffering
Display device with GRAM
Draw buffer-1(10KB)

LCD WRITE DMA

Draw buffer-2(10KB)

Update next pixel data

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Dual buffering
Update next pixel data Display device with GRAM
Draw buffer-1(10KB)

Draw buffer-2(10KB)

LCD WRITE DMA

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

32F746GDISCOVERY
(51)

(16)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

STM32F407x + external LCD

60 259
X1 X2

200 px
100 Y1
40 px
139 Y2

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LVGL

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Running LVGL on Simulator and STM32

microcontroller
• About LVGL
• Using Simulator
• Executing LVGL sample applications on the simulator
• Adding LVGL source code to the STM32 project
• Adding LCD TFT and Touchscreen driver support
• Executing LVGL sample applications on target hardware

Source for all the discussion in this section

LVGL Documentation 8.3
https://docs.lvgl.io/master/index.html

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

About LVGL

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LVGL Simulator
https://lvgl.io/developers

Windows : Use visual studio based simulator

Linux/MAC : User Eclipse based simulator

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Adding lvgl to STM32 project

We will do the following,
1) Add lvgl source files and lvgl.h
2) Add lvgl example source files
3) Add the tft and touchscreen controller drivers
4) Add lvgl_conf.h
5) Add include path settings in the IDE
6) Turn off DMA2D and SDRAM configuration code (We don’t use these peripherals in
this project)
7) Call lvgl_init() function before you call any the lvgl apis
8) Register display driver and input device driver(touchscreen) with lvgl
9) Call lv_tick_inc(x) every x milliseconds in an interrupt to report the elapsed time to
LVGL
10) Call lv_timer_handler() every few milliseconds to handle LVGL related tasks

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

By using 2 draw buffers rendering

and refreshing of the display
become parallel operations

Draw buffer_1

This need not be screen sized

tft_flush Frame buffer
Draw buffer_2(optional)

This need not be screen sized Screen sized

LVGL uses these buffers to update

graphic elements which
Supposed to be drawn on the
screen
Display driver file (tft.c)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LVGL object
• In LVGL, the basic building blocks of a user interface are the objects, also called
Widgets
• For example, a Button, Label, Image, List, Chart or Text area or just a base object
• All objects are referenced using a lv_obj_t pointer as a handle
• This pointer can later be used to set or get the object's attributes.
• For example, button and label both are lvgl objects of type lv_obj_t, but button
objects may carry some unique attributes that label objects may not have.
• 'Base object' is also a lvgl object or a widget that doesn't carry any special
attributes.

Source : LVGL documentation v8.3

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Attributes of the object

• Basic attributes
• Applies to all objects of type lv_obj_t
• You can set/get these attributes with lv_obj_set_... and lv_obj_get_... functions
• Position
• Size
• Parent
• Styles
• Event handlers
• Special attributes
• The object types have special attributes too. For example, a slider has
• Minimum and maximum values
• Current value
• For these special attributes, every object type may have unique API functions

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

A screen object
• When you register a display driver with lvgl, lvgl creates a ‘screen’ object of type lv_obj_t .
• This screen object is a parent object to which you can add your application-specific child objects.
• The screen object is associated with the display object of type lv_disp_t
• There will be one display object for each physical display. For example, if you are using 2 physical
displays, there may be 2 display objects. Lvgl provides dedicated APIs to change the properties of
the display
• lv_disp_set_rotation()
• lv_disp_set_default()
• lv_disp_get_default() and many
• Each display can have many screen objects, and current active one is accessed by the field act_scr
of the display object
• You can manipulate screen objects by these APIs
• Get the active screen lv_scr_act()
• Load screen lv_scr_load(scr1)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Widgets
• All widgets are lvgl objects of type lv_obj_t .
• A base object is also a widget which only has basic
properties such as
• coordinates
• parent object
• children
• contains the styles
• attributes like Clickable, Scrollable, etc

• In object-oriented thinking, a base object is like the base

class from which all other objects in LVGL are inherited.

• The base object can be directly used as a simple widget: it's

nothing more than a rectangle

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Exercise 003 : RGB mixer

1. Test using the simulator
2. Test on hardware
• Create a new STM32 CubeIDE project
• Add all the required peripherals using IDE’s device configuration tool , LVGL
and LVGL display , touchscreen drivers as explained in the previous exercise
• Copy simulator tested code and test on the hardware

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

About touch screen controller

Y+

ADC and touch

I2C3
X+ screen I2C Microcontroller
X-
controller

STMPE811
Y-

Analog 4 wire resistive touch panel

STM32F429 DISC board touch functionality

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

STM32F429 DISC board

From touch panel of the TFT-LCD

On-board Touch screen controller

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

STM32F746 disc board

Capacitive

I2C3
Touch Touch Panel I2C Microcontroller
Panel Controller INT
RST
FT5336GQQ

On-board Touch screen controller

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
External STM32
Touch screen interfacing LCD board
T_IRQ PA8
T_DO PA6
T_DIN PA7
T_CS PA15
T_CLK PA5
GPIO PA8
PA6 SD0(MISO)
SPI1 PA7 SDI(MOSI)

GPIO PA15 CS

SPI1 PA5 CLK

STM32F407 DISC-1

STM32F407 DISC-1 board and external RGB display interfacing

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

2.4 inch external TFT-LCD display with touchscreen controller

Y+

ADC and touch

SPI1
X+ screen SPI Microcontroller
X-
controller

XPT2046
Y-
STM32F407x DISC board
Analog 4 wire resistive touch panel

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Exercise 004: Digital clock

screen

Button
(lv_btn)

Label
(lv_label)
Label
(lv_label)

void Lvgl_main_page_set_style(Lvgl* const me) in glvgl.c

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

About info
List (lv_list)

Message box
(lv_msgbox)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

APIs used

glvgl_widget.c

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Settings page

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Settings page
Menu heading screen Widgets of the menu page

Root back button

Menu (lv_menu)

Side bar page Menu page

void Lvgl_create_setting_page(Lvgl * const me, lvgl_setting_page_data_t* data)

in glvgl.c
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

Date setting

Calendar (lv_calendar)

Button (lv_btn)
With animation

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Time setting
Roller(lv_roller)

Checkbox(lv_checkbox)

Switch(lv_switch)

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Alarm setting

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Sound setting

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Brightness setting

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Alarm notification

Gif image

void Lvgl_create_alarm_notif_page(Lvgl* const me, \

lvgl_alarm_page_data_t *data) in glvgl.c

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Message box alert

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

lv_refr.c

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Lvgl and display driver interface

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

LVGL draw buffer

• You can provide 1 or 2 draw buffers to the lvgl
• Draw buffers need not be size of screen
• They are simple byte arrays
• LVGL uses the draw buffer to render the screen content before its
been transferred to the actual screen
• Once the rendering is ready the content of the draw buffer is sent to
the display . For this lvgl calls flush method of the display driver.

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Logging

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Display STM32F7x Display STM32F7x Display STM32F7x
module MCU module MCU module MCU
LCD_R0 PI15 LCD_G0 PJ7 LCD_B0 PE4
LCD_R1 PJ0 LCD_G1 PJ8 LCD_B1 PJ13
LCD_R2 PJ1 LCD_G2 PJ9 LCD_B2 PJ14
LCD_R3 PJ2 LCD_G3 PJ10 LCD_B3 PJ15
LCD_R4 PJ3 LCD_G4 PJ11 LCD_B4 PG12
LCD_R5 PJ4 LCD_G5 PK0 LCD_B5 PK4
LCD_R6 PJ5 LCD_G6 PK1 LCD_B6 PK5
LCD_R7 PJ6 LCD_G7 PK2 LCD_B7 PK6

Display STM32F7x
module MCU
LCD_VSYNC PI9 GPIOG,GPIOI,GPIOJ,GPIOK

LCD_HSYNC Pi10
LCD_PCLK PI14
LCD_DE PK7
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

• Program the new number of wait states to the LATENCY bits in the FLASH_ACR register
• Check that the new number of wait states is taken into account to access the Flash memory by reading the
FLASH_ACR register
• Select the required AHB and APB prescalers
• Configure PPRE2=2, PPRE1=4
• Configure HPRE = 0xxx: system clock not divider
• Configure PLLM = 000010: PLLM = 2, PLLN = 216 , PLLP = 8
• Configure RCC_PLLCFGR register and set PLLON bit of RCC_CR register.
• Wait for PLL lock.
• : Main PLL (PLL) clock ready flag
• Switch the system clock to the PLL.
• SW: System clock switch
• Wait for status
• SWS: System clock switch status
• Check that the new CPU clock source or/and the new CPU clock prescaler value is/are taken into account by
reading the clock source status (SWS bits) or/and the AHB prescaler value (HPRE bits), respectively, in the
RCC_CFGR register.
BHARATI SOFTWARE , CC BY-SA 4.0 , 2021
www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com
Alpha:
Layer1 = 255
Layer2 = 0

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Alpha:
Layer1 = 255
Layer2 = 127

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

Initialization status

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021

www.fastbitlab.com

BHARATI SOFTWARE , CC BY-SA 4.0 , 2021