Contributed by WangChong, curated by Ai-Thinker

Hello everyone. Today I bring you the porting library for a 3.5-inch SPI color LCD (hardware SPI only; software SPI is not provided due to refresh rate issues).

Wiring diagram:

M61-32S	3.5-inch SPI LCD
VCC	VCC
GND	GND
IO12	CS
IO26	RS
IO27	D/C
IO19	SDI
IO13	SCL
IO28	BL
IO18	SDO

Library file introduction

This porting library contains five parts:

lcd_init.c Source file for LCD initialization functions
lcd_init.h Header file for LCD initialization functions
lcd.c Source file for LCD display functions
lcd.h Header file for LCD display functions
lcdfont.h Font file
pic.h Image display related
USER_SPI.c SPI related source file
USER_SPI.h SPI related header file

**How to use** ```cmake Add the libraries to compile in CMakeLists.txt, as shown below (the include path can be customized).

target_sources(app PRIVATE USER_SPI.h USER_SPI.C LCD/lcd_init.c LCD/lcd_init.h LCD/lcd.c LCD/lcd.h LCD/lcdfont.h LCD/pic.h )

Test in main.c, or manually call the methods in lcd.h. Below is the main.c code.

#include "bflb_mtimer.h" #include "board.h" #include "bflb_gpio.h" #include "LCD\lcd_init.h" #include "LCD\lcd.h" #include "LCD\pic.h" int main(void) { uint8_t i, j; float t = 0; board_init(); LCD_Init(); LCD_Fill(0, 0, LCD_W, LCD_H, WHITE); while (1) { LCD_ShowString(0, 40, "LCD_W:", RED, WHITE, 16, 0); LCD_ShowIntNum(48, 40, LCD_W, 3, RED, WHITE, 16); LCD_ShowString(80, 40, "LCD_H:", RED, WHITE, 16, 0); LCD_ShowIntNum(128, 40, LCD_H, 3, RED, WHITE, 16); LCD_ShowString(80, 40, "LCD_H:", RED, WHITE, 16, 0); LCD_ShowString(0, 70, "Increaseing Nun:", RED, WHITE, 16, 0); LCD_ShowFloatNum1(128, 70, t, 4, RED, WHITE, 16); t += 0.11; for (j = 0; j < 7; j++) { for (i = 0; i < 8; i++) { LCD_ShowPicture(40 * i, 200 + j * 40, 40, 40, gImage_1); } } bflb_mtimer_delay_ms(5000); } }

lcd.h defines the LCD display functions (I've added detailed comments in the code).

#ifndef __LCD_H #define __LCD_H #include "stdint.h" /Screen display functions start/ /*

@brief fill a color in the specified area
@param xsta start coordinate x
@param ysta start coordinate y
@param xend end coordinate x
@param yend end coordinate y
@param color color / void LCD_Fill(uint16_t xsta, uint16_t ysta, uint16_t xend, uint16_t yend, uint32_t color); /*
@brief draw a point at the specified position
@param x x coordinate
@param y y coordinate
@param color color / void LCD_DrawPoint(uint16_t x, uint16_t y, uint32_t color); /*
@brief draw a line segment at the specified position
@param x1 start coordinate x
@param y1 start coordinate y
@param x2 end coordinate x
@param y2 end coordinate y
@param color color / void LCD_DrawLine(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint32_t color); /*
@brief draw a rectangle at the specified position
@param x1 start coordinate x
@param y1 start coordinate y
@param x2 end coordinate x
@param y2 end coordinate y
@param color color / void LCD_DrawRectangle(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint32_t color); /*
@brief draw a circle at the specified position
@param x0 center coordinate x
@param y0 center coordinate y
@param r radius
@param color color / void Draw_Circle(uint16_t x0, uint16_t y0, uint8_t r, uint32_t color); /*
@brief display a character at the specified position
@param x x coordinate
@param y y coordinate
@param num the char to display
@param fc font color
@param bc background color
@param sizey font size 16 24 32
@param mode 0 overlay mode / 1 no overlay / void LCD_ShowChar(uint16_t x, uint16_t y, uint8_t num, uint32_t fc, uint32_t bc, uint8_t sizey, uint8_t mode); /*
@brief display a string at the specified position
@param x x coordinate
@param y y coordinate
@param p pointer to the string array to display
@param fc font color
@param bc background color
@param sizey font size 16 24 32
@param mode 0 overlay mode / 1 no overlay / void LCD_ShowString(uint16_t x, uint16_t y, const uint8_t p, uint32_t fc, uint32_t bc, uint8_t sizey, uint8_t mode); /
@brief power function
@param m base
@param n exponent
@return uint32_t result / uint32_t mypow(uint8_t m, uint8_t n); /*
@brief display a number at the specified position
@param x x coordinate
@param y y coordinate
@param num the number to display
@param len length
@param fc font color
@param bc background color
@param sizey font size 16 24 32 / void LCD_ShowIntNum(uint16_t x, uint16_t y, uint16_t num, uint8_t len, uint32_t fc, uint32_t bc, uint8_t sizey); /*
@brief display a float number at the specified position
@param x x coordinate
@param y y coordinate
@param num the number to display
@param len length
@param fc font color
@param bc background color
@param sizey font size 16 24 32 / void LCD_ShowFloatNum1(uint16_t x, uint16_t y, float num, uint8_t len, uint32_t fc, uint32_t bc, uint8_t sizey); /*
@brief display an image on the screen
@param x x coordinate
@param y y coordinate
@param length length
@param width width
@param pic image array / void LCD_ShowPicture(uint16_t x, uint16_t y, uint16_t length, uint16_t width, const uint8_t pic[]); /Screen display functions end*/ /---------------------------------------------------------------------------------------------------------/ /*Screen display color definitions start/ #define WHITE 0xFCFCFC #define BLACK 0X000000 #define RED 0xFC0000 #define GREEN 0x00FC00 #define BLUE 0x0000FC /*Screen display color definitions end/ #endif

The code

Attachments:
![](/img/bbsdiy/ai_m6x/e8b44722fb734f87.gif)

[SPI_TEST.zip](https://bbs.ai-thinker.com/forum.php?mod=attachment&aid=MTkxODJ8NWU5MmI1MGJ8MTc4NTkxMjEwNXwxMjU2OHw0NDA5Ng%3D%3D)
*(20.55 KB, downloads: 26)*

LCD image and text bitmap conversion tutorial:

Attachments:
![](/img/bbsdiy/ai_m6x/e8b44722fb734f87.gif)

[03-LCD bitmap conversion tutorial.zip](https://bbs.ai-thinker.com/forum.php?mod=attachment&aid=MTkxODN8ZjY0MGVkMDF8MTc4NTkxMjEwNXwxMjU2OHw0NDA5Ng%3D%3D)
*(1.62 MB, downloads: 4)*

<img src='/img/bbsdiy/ai_m6x/866e90349a8c8036.gif' alt='' width='485' />

**Porting verification**
If everything above is done correctly, after flashing the code the screen should look like the figure below.
<img src='/img/bbsdiy/ai_m6x/d5619077571e0367.jpg' alt='' width='760' />

**FAQ**

- The document above additionally provides image bitmap conversion and text bitmap conversion, allowing Chinese text or images to be displayed on the screen. The specific steps are in the documentation inside the archive; you'll need to explore a bit.
- The SPI speed should not exceed 50M, otherwise screen tearing will occur.
- Users can customize all pins except SPI; just initialize the corresponding IOs and adjust the corresponding functions.
- The datasheet is too large to upload; search for "ILI9488 Data Sheet_100.pdf" to download it yourself.

::: tip Have questions?
For other questions, please visit the unified discussion area: [Ai-Thinker Discussions](https://github.com/Ai-Thinker-Open/.github/discussions)
:::

Wi-Fi

TCP/IP Communication

HTTP/S

BLE

Developer Contributions

Quick Start

Environment Setup

Build & Flash

Peripherals

Networking

System