Difference between revisions of "Template:LCD Module FBCP Transplant"

From Waveshare Wiki
Jump to: navigation, search
m (Text replacement - "https://www.waveshare.com/w/upload/" to "https://files.waveshare.com/upload/")
 
(67 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==FBCP Transplant==
+
<!--
Framebuffer uses a video output device to drive a video display device from a memory buffer containing complete frame data. Simply put, a memory area is used to store the display content, and the display content can be changed by changing the data in the memory.
+
=FBCP porting=
 
+
Framebuffer uses a video output device to drive a video display device from a memory buffer containing complete frame data. Simply put, a memory area is used to store the display content, and the display content can be changed by changing the data in the memory. <br />
There is an open source project on github: fbcp-ili9341. Compared with other fbcp projects, this project uses partial refresh and DMA to achieve a speed of up to 60fps
+
There is an open source project on github: fbcp-ili9341. Compared with other fbcp projects, this project uses partial refresh and DMA to achieve a speed of up to 60fps<br />
===Download===
+
==Download Drivers==
 
<pre>
 
<pre>
 
sudo apt-get install cmake -y
 
sudo apt-get install cmake -y
 
cd ~
 
cd ~
wget https://www.waveshare.net/w/upload/1/18/Waveshare_fbcp.zip
+
wget https://files.waveshare.com/upload/f/f9/Waveshare_fbcp.7z
 
unzip Waveshare_fbcp.zip
 
unzip Waveshare_fbcp.zip
 
cd Waveshare_fbcp/
 
cd Waveshare_fbcp/
 
sudo chmod +x ./shell/*
 
sudo chmod +x ./shell/*
 
</pre>
 
</pre>
===Method one:use a script (recommended)===
+
 
 +
== Method 1: Use a script (recommended) ==
 
Here we have written several scripts that allow users to quickly use fbcp and run corresponding commands according to their own screen<br />
 
Here we have written several scripts that allow users to quickly use fbcp and run corresponding commands according to their own screen<br />
If you use a script, you can ignore the following if you don't need to modify it<br />
+
If you use a script and do not need to modify it, you can ignore the second method below. <br />
<font color=red>Note: The script will replace the corresponding /boot/config.txt and /etc/rc.local and restart, if the user needs, please back up the relevant files in advance</font>
+
<font color="#FF0000">Note: The script will replace the corresponding /boot/config.txt and /etc/rc.local and restart, if the user needs, please back up the relevant files in advance</font>
 +
<br />
 
<pre>
 
<pre>
 
#0.96inch LCD Module
 
#0.96inch LCD Module
Line 33: Line 35:
 
#2.4inch LCD Module
 
#2.4inch LCD Module
 
sudo ./shell/waveshare-2inch4
 
sudo ./shell/waveshare-2inch4
 +
</pre>
 +
==Method 2: Manual Configuration==
 +
===Environment Configuration===
 +
Raspberry Pi's vc4-kms-v3d will cause fbcp to fail, so we need to close vc4-kms-v3d before installing in fbcp
 +
<pre>
 +
sudo nano /boot/config.txt
 +
</pre>
 +
Just block the statement corresponding to the picture below<br />
 +
[[file:FBCP_CLOSE.jpg|900px]]<br />
 +
A reboot is then required<br />
 +
<pre>
 +
sudo reboot
 +
</pre>
 +
===Compile & Run===
 +
<pre>
 +
mkdir build
 +
cd build
 +
cmake [options] ..
 +
sudo make -j
 +
sudo ./fbcp
 +
</pre>
 +
Replace it by yourself according to the LCD Module you use, above cmake [options] ..
 +
<pre>
 +
#0.96inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_0INCH96_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 +
#1.14inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH14_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 +
#1.3inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH3_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 +
#1.54inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH54_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 +
#1.8inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH8_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 +
#2inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_2INCH_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 +
#2.4inch LCD Module
 +
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_2INCH4_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 
</pre>
 
</pre>
  
===Method 2: Manual configuration===
+
===Set up to start automatically===
====Environment configuration====
+
[[File:1in3 lcd fb5.png|380px|right]]
Raspberry Pi's vc4-kms-v3d will cause fbcp to fail, so we need to close vc4-kms-v3d before installing in fbcp
+
<pre>
 +
sudo cp ~/Waveshare_fbcp/build/fbcp /usr/local/bin/fbcp
 +
sudo nano /etc/rc.local
 +
</pre>
 +
 
 +
Add fbcp& before exit 0. Note that you must add "&" to run in the background, otherwise the system may not be able to start.<br/>
 +
 
 +
==='''Set the display resolution'''===
 +
Set the user interface display size in the /boot/config.txt file.
 
  sudo nano /boot/config.txt
 
  sudo nano /boot/config.txt
You can block the sentences corresponding to the following figure<br />
+
Then add the following lines at the end of the config.txt.
[[File:FBCP_CLOSE.jpg|600px]]<br />
+
<pre>
Then you need to restart
+
hdmi_force_hotplug=1
 +
hdmi_cvt=[options]
 +
hdmi_group=2
 +
hdmi_mode=1
 +
hdmi_mode=87
 +
display_rotate=0
 +
</pre>
 +
Replace the above hdmi_cvt=[options] according to the LCD Module you are using.
 +
<pre>
 +
#2.4inchinch LCD Module & 2inchinch LCD Module
 +
hdmi_cvt=640 480 60 1 0 0 0
 +
 
 +
#1.8inch LCD Module
 +
hdmi_cvt=400 300 60 1 0 0 0
 +
 
 +
#1.3inch LCD Module & 1.54inch LCD Module
 +
hdmi_cvt=300 300 60 1 0 0 0
 +
 
 +
#1.14inch LCD Module
 +
hdmi_cvt=300 170 60 1 0 0 0
 +
 
 +
#0.96inch LCD Module
 +
hdmi_cvt=300 150 60 1 0 0 0
 +
</pre>
 +
<font color="#FF0000">Note: For Pi4B, you also need to comment the [pi4] part of the statement in the file and modify it to:</font>
 +
<pre>
 +
[pi4]
 +
# Enable DRM VC4 V3D driver on top of the dispmanx display stack
 +
#dtoverlay=vc4-fkms-v3d
 +
#max_framebuffers=2
 +
</pre>
 +
 
 +
And then reboot the system
 
  sudo reboot
 
  sudo reboot
  
===Compile and Run===
+
After rebooting the system, the Raspberry Pi OS user interface will be displayed.
 +
 
 +
[[File:2inch LCD Module_fbcp02.png|600px]]
 +
-->
 +
 
 +
=FBCP Porting=
 +
<div class="cautionSec">PS: FBCP is currently not compatible with a 64-bit Raspberry Pi system, it is recommended to use a 32-bit system. </div>
 +
Framebuffer uses a video output device to drive a video display device from a memory buffer containing complete frame data. Simply put, a memory area is used to store the display content, and the display content can be changed by changing the data in the memory. <br />
 +
There is an open source project on Git Hub: fbcp-ili9341. Compared with other fbcp projects, this project uses partial refresh and DMA to achieve a speed of up to 60fps.<br />
 +
==Download Drivers==
 +
<pre>
 +
sudo apt-get install cmake -y
 +
cd ~
 +
wget https://files.waveshare.com/upload/1/18/Waveshare_fbcp.zip
 +
unzip Waveshare_fbcp.zip
 +
cd Waveshare_fbcp/
 +
sudo chmod +x ./shell/*
 +
</pre>
 +
 
 +
== Method 1: Use a script (recommended) ==
 +
Here we have written several scripts that allow users to quickly use fbcp and run corresponding commands according to their own screen.<br />
 +
If you use a script and do not need to modify it, you can ignore the second method below. <br />
 +
<font color="#FF0000">Note: The script will replace the corresponding /boot/config.txt and /etc/rc.local and restart, if the user needs, please back up the relevant files in advance.</font>
 +
<br />
 +
<pre>
 +
#0.96inch LCD Module
 +
sudo ./shell/waveshare-0inch96
 +
#1.14inch LCD Module
 +
sudo ./shell/waveshare-1inch14
 +
#1.3inch LCD Module
 +
sudo ./shell/waveshare-1inch3
 +
#1.44inch LCD Module
 +
sudo ./shell/waveshare-1inch44
 +
#1.54inch LCD Module
 +
sudo ./shell/waveshare-1inch54
 +
#1.8inch LCD Module
 +
sudo ./shell/waveshare-1inch8
 +
#2inch LCD Module
 +
sudo ./shell/waveshare-2inch
 +
#2.4inch LCD Module
 +
sudo ./shell/waveshare-2inch4
 +
</pre>
 +
 
 +
==Method 2: Manual Configuration==
 +
===Environment Configuration===
 +
Raspberry Pi's vc4-kms-v3d will cause fbcp to fail, so we need to close vc4-kms-v3d before installing it in fbcp.
 +
<pre>
 +
sudo nano /boot/config.txt
 +
</pre>
 +
Just block the statement corresponding to the picture below.<br />
 +
[[file:FBCP_CLOSE.jpg|900px]]<br />
 +
A reboot is then required.<br />
 +
<pre>
 +
sudo reboot
 +
</pre>
 +
 
 +
===Compile and run===
 
<pre>
 
<pre>
 
mkdir build
 
mkdir build
Line 52: Line 187:
 
sudo ./fbcp
 
sudo ./fbcp
 
</pre>
 
</pre>
 
+
Replace it by yourself according to the LCD Module you use, above cmake [options] ..
Replace the above cmake [options] .. according to the LCD Module you are using.
 
 
<pre>
 
<pre>
 
#0.96inch LCD Module
 
#0.96inch LCD Module
Line 70: Line 204:
 
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_2INCH4_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_2INCH4_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
 
</pre>
 
</pre>
 
+
===Set up to start automatically===
===Auto-start when Power on===
+
[[File:1in3 lcd fb5.png|380px|right]]
 
<pre>
 
<pre>
sudo cp ~/waveshare_fbcp-main/build/fbcp /usr/local/bin/fbcp
+
sudo cp ~/Waveshare_fbcp/build/fbcp /usr/local/bin/fbcp
 
sudo nano /etc/rc.local
 
sudo nano /etc/rc.local
 
</pre>
 
</pre>
And then add fbcp& before exit 0, Note that you must add "&" to run in the background, otherwise the system may not be able to start. As the picture below.
 
  
[[File:1in3_lcd_fb5.png|800px]]
+
Add fbcp& before exit 0. Note that you must add "&" to run in the background. Otherwise, the system may not be able to start.<br/>
  
===Set the display resolution===
+
===Set the Display Resolution===
 
Set the user interface display size in the /boot/config.txt file.
 
Set the user interface display size in the /boot/config.txt file.
 
  sudo nano /boot/config.txt
 
  sudo nano /boot/config.txt
Line 110: Line 243:
 
</pre>
 
</pre>
  
And then reboot the system
+
And then reboot the system:
 
  sudo reboot
 
  sudo reboot
  
Line 116: Line 249:
  
 
[[File:2inch LCD Module_fbcp02.png|600px]]
 
[[File:2inch LCD Module_fbcp02.png|600px]]
==Description of C codes (API)==
+
 
 +
=API Description=
 
The RaspberryPi series can share a set of programs, because they are all embedded systems, and the compatibility is relatively strong.<br>
 
The RaspberryPi series can share a set of programs, because they are all embedded systems, and the compatibility is relatively strong.<br>
 
The program is divided into bottom-layer hardware interface, middle-layer LCD screen driver, and upper-layer application;
 
The program is divided into bottom-layer hardware interface, middle-layer LCD screen driver, and upper-layer application;
===Hardware interface===
+
===C===
We have carried out the low-level encapsulation, if you need to know the internal implementation can go to the corresponding directory to check, for the reason that the hardware platform and the internal implementation are different <br>
+
====Hardware Interface====
You can open DEV_Config.c(.h) to see definitions,which in the directory RaspberryPi\c\lib\Config<br>
+
We have carried out the low-level encapsulation, if you need to know the internal implementation can go to the corresponding directory to check, for the reason the hardware platform and the internal implementation are different. <br>
 +
You can open DEV_Config.c(.h) to see definitions, which in the directory RaspberryPi\c\lib\Config.<br>
 
<pre>
 
<pre>
1.There are three ways for C to drive:BCM2835 library, WiringPi library and Dev library respectively
+
1. There are three ways for C to drive: BCM2835 library, WiringPi library, and Dev library respectively
2.We use Dev libraries by default. If you need to change to BCM2835 or WiringPi libraries ,please open RaspberryPi\c\Makefile and modify lines 13-15 as follows:   
+
2. We use Dev libraries by default. If you need to change to BCM2835 or WiringPi libraries, please open RaspberryPi\c\Makefile and modify lines 13-15 as follows:   
 
</pre>
 
</pre>
 
[[File:RPI_open_spi1.png|900px]]<br />
 
[[File:RPI_open_spi1.png|900px]]<br />
*Data type
+
*Data type:
 
<pre>
 
<pre>
 
#define UBYTE      uint8_t
 
#define UBYTE      uint8_t
Line 145: Line 280:
 
UBYTE DEV_Digital_Read(UWORD Pin);
 
UBYTE DEV_Digital_Read(UWORD Pin);
 
</pre>
 
</pre>
*SPI write data
+
*SPI write data:
 
<pre>
 
<pre>
 
void DEV_SPI_WriteByte(UBYTE Value);
 
void DEV_SPI_WriteByte(UBYTE Value);
 
</pre>
 
</pre>
===Upper application===
+
 
If you need to draw pictures, display Chinese and English characters, display pictures, etc., we provide some basic functions here about some graphics processing in the directory RaspberryPi\c\lib\GUI\GUI_Paint.c(.h).<br>
+
====Upper application====
 +
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).<br>
 
[[File:LCD_rpi_GUI.png|900px]]<br />
 
[[File:LCD_rpi_GUI.png|900px]]<br />
 
The fonts can be found in RaspberryPi\c\lib\Fonts directory.<br />
 
The fonts can be found in RaspberryPi\c\lib\Fonts directory.<br />
 
[[File:RPI_open_spi3.png|900px]]<br />
 
[[File:RPI_open_spi3.png|900px]]<br />
  
*New Image Properties: Create a new image buffer, this property includes the image buffer name, width, height, flip Angle, color.<br />
+
*New Image Properties: Create a new image buffer, this property includes the image buffer name, width, height, flip Angle, and color.<br />
 
<pre>
 
<pre>
 
void Paint_NewImage(UBYTE *image, UWORD Width, UWORD Height, UWORD Rotate, UWORD Color)
 
void Paint_NewImage(UBYTE *image, UWORD Width, UWORD Height, UWORD Rotate, UWORD Color)
Line 174: Line 310:
  
 
*Image Rotation: Set the rotation Angle of the selected image, preferably after Paint_SelectImage(), you can choose to rotate 0, 90, 180, 270.<br />
 
*Image Rotation: Set the rotation Angle of the selected image, preferably after Paint_SelectImage(), you can choose to rotate 0, 90, 180, 270.<br />
 +
[[File:Rotation-lcd.png]]<br/>
 
<pre>
 
<pre>
 
void Paint_SetRotate(UWORD Rotate)
 
void Paint_SetRotate(UWORD Rotate)
Line 185: Line 322:
 
Parameters:
 
Parameters:
 
         Mirror: indicates the image mirroring mode. MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, MIRROR_ORIGIN correspond to no mirror, horizontal mirror, vertical mirror, and image center mirror respectively.
 
         Mirror: indicates the image mirroring mode. MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, MIRROR_ORIGIN correspond to no mirror, horizontal mirror, vertical mirror, and image center mirror respectively.
</pre>
 
 
*Sets the size of the pixels.<br />
 
<pre>
 
void Paint_SetScale(UBYTE scale)
 
Parameters:
 
scale: the size of pixels, 2: each pixel occupies one bit; 4: Each pixel occupies two bits.
 
 
</pre>
 
</pre>
  
Line 356: Line 486:
 
   Color_Background: indicates the background color
 
   Color_Background: indicates the background color
 
</pre>
 
</pre>
*Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, write a string of Chinese characters, you can choose character font, font foreground color, font background color of the GB2312 encoding  
+
*Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, write a string of Chinese characters, you can choose character font, font foreground color, and font background color of the GB2312 encoding.
 
<pre>
 
<pre>
 
void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground,  UWORD Color_Background)
 
void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground,  UWORD Color_Background)
Line 386: Line 516:
 
Color_Background: indicates the background color
 
Color_Background: indicates the background color
 
</pre>
 
</pre>
*Display time: in the image buffer,use (Xstart Ystart) as the left vertex, display time,you can choose Ascii visual character font, font foreground color, font background color.;
+
*Display time: in the image buffer,use (Xstart Ystart) as the left vertex, display time,you can choose Ascii visual character font, font foreground color, font background color.
 
<pre>
 
<pre>
 
void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background,  UWORD Color_Foreground)
 
void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background,  UWORD Color_Foreground)
Line 392: Line 522:
 
Xstart: the x-coordinate of the left vertex of a character
 
Xstart: the x-coordinate of the left vertex of a character
 
  Ystart: the Y coordinate of the font's left vertex
 
  Ystart: the Y coordinate of the font's left vertex
PTime: display time, A time structure is defined here, as long as the hours, minutes and seconds are passed to the parameters;
+
PTime: display time, A time structure is defined here, as long as the hours, minutes, and seconds are passed to the parameters;
 
Font: Ascii visual character library, in the Fonts folder the demo provides the following Fonts:
 
Font: Ascii visual character library, in the Fonts folder the demo provides the following Fonts:
 
     Font8: 5*8 font
 
     Font8: 5*8 font
Line 403: Line 533:
 
</pre>
 
</pre>
  
*Read the local bmp image and write it to the cache
+
*Read the local bmp image and write it to the cache.
For Linux operating systems such as Raspberry Pi, you can read and write pictures
+
For Linux operating systems such as Raspberry Pi, you can read and write pictures.
For Raspberry Pi, in the directory: RaspberryPi\c\lib\GUI\GUI_BMPfile.c(.h)
+
For Raspberry Pi, in the directory: RaspberryPi\c\lib\GUI\GUI_BMPfile.c(.h).
 
<pre>
 
<pre>
 
UBYTE GUI_ReadBmp(const char *path, UWORD Xstart, UWORD Ystart)
 
UBYTE GUI_ReadBmp(const char *path, UWORD Xstart, UWORD Ystart)
 
parameter:
 
parameter:
path: the relative path of the BMP image
+
      path: the relative path of the BMP image
  Xstart: The X coordinate of the left vertex of the image, generally 0 is passed by default
+
      Xstart: The X coordinate of the left vertex of the image, generally 0 is passed by default
  Ystart: The Y coordinate of the left vertex of the picture, generally 0 by default
+
      Ystart: The Y coordinate of the left vertex of the picture, generally 0 by default
 
</pre>
 
</pre>
====User test code====
+
 
The first three chapters introduce the classic linux three-layer code structure, here is a little bit about the user test code
+
===='''Testing Code for Users'''====
 
For Raspberry Pi, in the directory: RaspberryPi\c\examples, for all the test code;
 
For Raspberry Pi, in the directory: RaspberryPi\c\examples, for all the test code;
 
:[[File:LCD_rpi_c_examples&128.png|1000px]]<br />
 
:[[File:LCD_rpi_c_examples&128.png|1000px]]<br />
If you need to run the 0.96inch LCD test program, you need to add 0.96 as a parameter when running the mian program<br>
+
If you need to run the 0.96-inch LCD test program, you need to add 0.96 as a parameter when running the main demo.<br>
Re-execute in linux command mode as follows:<br>
+
Re-execute in Linux command mode as follows:<br>
 
<pre>
 
<pre>
 
make clean
 
make clean
Line 424: Line 554:
 
sudo ./main 0.96
 
sudo ./main 0.96
 
</pre>
 
</pre>
===Python(for Raspberry Pi)===
+
 
Works with python and python3<br>
+
===Python (for Raspberry Pi)===
For python, his calls are not as complicated as C<br>
+
Works with python and python3.<br>
 +
For python, his calls are not as complicated as C.<br>
 
Raspberry Pi: RaspberryPi\python\lib\<br>
 
Raspberry Pi: RaspberryPi\python\lib\<br>
 
:[[File:LCD_rpi_python_lib.png|800px]]<br />
 
:[[File:LCD_rpi_python_lib.png|800px]]<br />
Line 436: Line 567:
 
Note:
 
Note:
 
1. Here is some GPIO processing before and after using the LCD screen.
 
1. Here is some GPIO processing before and after using the LCD screen.
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
+
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.
 
</pre>
 
</pre>
 
*GPIO read and write:
 
*GPIO read and write:
Line 461: Line 592:
 
: Rotation effect, take 1.54 as an example, the order is 0°, 90°, 180°, 270°
 
: Rotation effect, take 1.54 as an example, the order is 0°, 90°, 180°, 270°
 
:[[File:LCD_Rotate.jpg|1000px]]<br />
 
:[[File:LCD_Rotate.jpg|1000px]]<br />
====GUI functions====
+
===='''GUI Functions'''====
Python has an image library [http://effbot.org/imagingbook 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.
+
Python has an image library [http://effbot.org/imagingbook PIL official library link], it does not need to write code from the logical layer like C and can directly call to the image library for image processing. The following will take a 1.54-inch LCD as an example, we provide a brief description of the demo.
 
*It needs to use the image library and install the library.
 
*It needs to use the image library and install the library.
 
  sudo apt-get install python3-pil   
 
  sudo apt-get install python3-pil   
Line 468: Line 599:
 
  from PIL import Image,ImageDraw,ImageFont.
 
  from PIL import Image,ImageDraw,ImageFont.
 
Among them, Image is the basic library, ImageDraw is the drawing function, and ImageFont is the text function.
 
Among them, Image is the basic library, ImageDraw is the drawing function, and ImageFont is the text function.
*Define an image cache to facilitate drawing, writing and other functions on the picture
+
*Define an image cache to facilitate drawing, writing, and other functions on the picture.
 
  image1 = Image.new("RGB", (disp.width, disp.height), "WHITE")
 
  image1 = Image.new("RGB", (disp.width, disp.height), "WHITE")
 
The first parameter defines the color depth of the image, which is defined as "1" to indicate the bitmap of one-bit depth. The second parameter is a tuple that defines the width and height of the image. The third parameter defines the default color of the buffer, which is defined as "WHITE".
 
The first parameter defines the color depth of the image, which is defined as "1" to indicate the bitmap of one-bit depth. The second parameter is a tuple that defines the width and height of the image. The third parameter defines the default color of the buffer, which is defined as "WHITE".
 
*Create a drawing object based on Image1 on which all drawing operations will be performed on here.
 
*Create a drawing object based on Image1 on which all drawing operations will be performed on here.
 
  draw = ImageDraw.Draw(image1)
 
  draw = ImageDraw.Draw(image1)
*Draw line.
+
*Draw a line.
 
  draw.line([(20, 10),(70, 60)], fill = "RED",width = 1)
 
  draw.line([(20, 10),(70, 60)], fill = "RED",width = 1)
 
The first parameter is a four-element tuple starting at (0, 0) and ending at (127,0). Draw a line. Fill ="0" means the color of the line is white.
 
The first parameter is a four-element tuple starting at (0, 0) and ending at (127,0). Draw a line. Fill ="0" means the color of the line is white.
  
*Draw rectangle.
+
*Draw a rectangle.
 
  draw.rectangle([(20,10),(70,60)],fill = "WHITE",outline="BLACK")
 
  draw.rectangle([(20,10),(70,60)],fill = "WHITE",outline="BLACK")
 
The first argument is a tuple of four elements. (20,10) is the coordinate value in the upper left corner of the rectangle, and (70,60) is the coordinate value in the lower right corner of the rectangle. Fill =" WHITE" means BLACK inside, and outline="BLACK" means the color of the outline is black.
 
The first argument is a tuple of four elements. (20,10) is the coordinate value in the upper left corner of the rectangle, and (70,60) is the coordinate value in the lower right corner of the rectangle. Fill =" WHITE" means BLACK inside, and outline="BLACK" means the color of the outline is black.
  
*Draw circle.
+
*Draw a circle.
 
  draw.arc((150,15,190,55),0, 360, fill =(0,255,0)
 
  draw.arc((150,15,190,55),0, 360, fill =(0,255,0)
Draw an inscribed circle in the square, the first parameter is a tuple of 4 elements, with (150, 15) as the upper left corner vertex of the square, (190, 55) as the lower right corner vertex of the square, specifying the level median line of the rectangular frame is the angle of 0 degrees, the second parameter indicates the starting angle, the third parameter indicates the ending angle, and fill = 0 indicates that the the color of the line is white.
+
Draw an inscribed circle in the square, the first parameter is a tuple of 4 elements, with (150, 15) as the upper left corner vertex of the square, (190, 55) as the lower right corner vertex of the square, specifying the level median line of the rectangular frame is the angle of 0 degrees, the second parameter indicates the starting angle, the third parameter indicates the ending angle, and fill = 0 indicates that the color of the line is white.
 
If the figure is not square according to the coordination, you will get an ellipse.
 
If the figure is not square according to the coordination, you will get an ellipse.
  
Besides the arc function, you can also use the chord function for drawing solid circle.
+
Besides the arc function, you can also use the chord function for drawing a solid circle.
 
  draw.ellipse((150,65,190,105), fill = 0)
 
  draw.ellipse((150,65,190,105), fill = 0)
 
The first parameter is the coordination of the enclosing rectangle. The second and third parameters are the beginning and end degrees of the circle. The fourth parameter is the fill color of the circle.
 
The first parameter is the coordination of the enclosing rectangle. The second and third parameters are the beginning and end degrees of the circle. The fourth parameter is the fill color of the circle.
Line 498: Line 629:
 
You can use the fonts of Windows or other fonts which is in ttc format..<br />
 
You can use the fonts of Windows or other fonts which is in ttc format..<br />
 
Note: Each character library contains different characters; If some characters cannot be displayed, it is recommended that you can refer to the encoding set ro used.
 
Note: Each character library contains different characters; If some characters cannot be displayed, it is recommended that you can refer to the encoding set ro used.
To draw English character, you can directly use the fonts; for Chinese character, you need to add a symbol u:
+
To draw English characters, you can directly use the fonts; for Chinese characters, you need to add a symbol u:
 
<pre>
 
<pre>
draw.text((5, 68), 'Hello world', fill = 0, font=Font1)
+
draw.text((40, 50), 'WaveShare', fill = (128,255,128),font=Font2)
 
text= u"微雪电子"
 
text= u"微雪电子"
draw.text((5, 200), text, fill = 0, font=Font3)
+
draw.text((74, 150),text, fill = "WHITE",font=Font3)
 
</pre>
 
</pre>
The first parameter is a two-element tuple with (5,68) as the left vertex, and use font1, fill is font color, fill = 0 means that the font color is white, and the second sentence shows’微雪电子’, font color is white.
+
The first parameter is a tuple of 2 elements, with (40, 50) as the left vertex, the font is Font2, and the fill is the font color. You can directly make fill = "WHITE", because the regular color value is already defined Well, of course, you can also use fill = (128,255,128), the parentheses correspond to the values of the three RGB colors so that you can precisely control the color you want. The second sentence shows Waveshare Electronics, using Font3, the font color is white.<br/>
*Read local picture.
+
*read local image
  image = Image.open('../pic/pic.bmp')
+
  image = Image.open('../pic/LCD_1inch28.jpg')
 
The parameter is the image path.
 
The parameter is the image path.
 
*Other functions.
 
*Other functions.
Python's image library is very powerful, if you need to implement more, you can learn on the website http://effbot.org/imagingbook pil.
+
For more information, you can refer to http://effbot.org/imagingbook pil

Latest revision as of 06:43, 2 September 2023


FBCP Porting

PS: FBCP is currently not compatible with a 64-bit Raspberry Pi system, it is recommended to use a 32-bit system.

Framebuffer uses a video output device to drive a video display device from a memory buffer containing complete frame data. Simply put, a memory area is used to store the display content, and the display content can be changed by changing the data in the memory.
There is an open source project on Git Hub: fbcp-ili9341. Compared with other fbcp projects, this project uses partial refresh and DMA to achieve a speed of up to 60fps.

Download Drivers

sudo apt-get install cmake -y
cd ~
wget https://files.waveshare.com/upload/1/18/Waveshare_fbcp.zip
unzip Waveshare_fbcp.zip
cd Waveshare_fbcp/
sudo chmod +x ./shell/*

Method 1: Use a script (recommended)

Here we have written several scripts that allow users to quickly use fbcp and run corresponding commands according to their own screen.
If you use a script and do not need to modify it, you can ignore the second method below.
Note: The script will replace the corresponding /boot/config.txt and /etc/rc.local and restart, if the user needs, please back up the relevant files in advance.

#0.96inch LCD Module
sudo ./shell/waveshare-0inch96
#1.14inch LCD Module
sudo ./shell/waveshare-1inch14
#1.3inch LCD Module
sudo ./shell/waveshare-1inch3
#1.44inch LCD Module
sudo ./shell/waveshare-1inch44
#1.54inch LCD Module
sudo ./shell/waveshare-1inch54
#1.8inch LCD Module
sudo ./shell/waveshare-1inch8
#2inch LCD Module
sudo ./shell/waveshare-2inch
#2.4inch LCD Module
sudo ./shell/waveshare-2inch4

Method 2: Manual Configuration

Environment Configuration

Raspberry Pi's vc4-kms-v3d will cause fbcp to fail, so we need to close vc4-kms-v3d before installing it in fbcp.

sudo nano /boot/config.txt

Just block the statement corresponding to the picture below.
FBCP CLOSE.jpg
A reboot is then required.

sudo reboot

Compile and run

mkdir build
cd build
cmake [options] ..
sudo make -j
sudo ./fbcp

Replace it by yourself according to the LCD Module you use, above cmake [options] ..

#0.96inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_0INCH96_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
#1.14inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH14_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
#1.3inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH3_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
#1.54inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH54_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
#1.8inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_1INCH8_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
#2inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_2INCH_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..
#2.4inch LCD Module
sudo cmake -DSPI_BUS_CLOCK_DIVISOR=20 -DWAVESHARE_2INCH4_LCD=ON -DBACKLIGHT_CONTROL=ON -DSTATISTICS=0 ..

Set up to start automatically

1in3 lcd fb5.png
sudo cp ~/Waveshare_fbcp/build/fbcp /usr/local/bin/fbcp
sudo nano /etc/rc.local

Add fbcp& before exit 0. Note that you must add "&" to run in the background. Otherwise, the system may not be able to start.

Set the Display Resolution

Set the user interface display size in the /boot/config.txt file.

sudo nano /boot/config.txt

Then add the following lines at the end of the config.txt.

hdmi_force_hotplug=1
hdmi_cvt=[options]
hdmi_group=2
hdmi_mode=1
hdmi_mode=87
display_rotate=0

Replace the above hdmi_cvt=[options] according to the LCD Module you are using.

#2.4inchinch LCD Module & 2inchinch LCD Module
hdmi_cvt=640 480 60 1 0 0 0

#1.8inch LCD Module
hdmi_cvt=400 300 60 1 0 0 0

#1.3inch LCD Module & 1.54inch LCD Module
hdmi_cvt=300 300 60 1 0 0 0

#1.14inch LCD Module
hdmi_cvt=300 170 60 1 0 0 0

#0.96inch LCD Module
hdmi_cvt=300 150 60 1 0 0 0

And then reboot the system:

sudo reboot

After rebooting the system, the Raspberry Pi OS user interface will be displayed.

2inch LCD Module fbcp02.png

API Description

The RaspberryPi series can share a set of programs, because they are all embedded systems, and the compatibility is relatively strong.
The program is divided into bottom-layer hardware interface, middle-layer LCD screen driver, and upper-layer application;

C

Hardware Interface

We have carried out the low-level encapsulation, if you need to know the internal implementation can go to the corresponding directory to check, for the reason the hardware platform and the internal implementation are different.
You can open DEV_Config.c(.h) to see definitions, which in the directory RaspberryPi\c\lib\Config.

1. There are three ways for C to drive: BCM2835 library, WiringPi library, and Dev library respectively
2. We use Dev libraries by default. If you need to change to BCM2835 or WiringPi libraries, please open RaspberryPi\c\Makefile and modify lines 13-15 as follows:  

RPI open spi1.png

  • Data type:
#define UBYTE      uint8_t
#define UWORD      uint16_t
#define UDOUBLE    uint32_t
  • Module initialization and exit processing.
void DEV_Module_Init(void);
void DEV_Module_Exit(void);
Note: 
  Here is some GPIO processing before and after using the LCD screen.
  • GPIO read and write:
void 	DEV_Digital_Write(UWORD Pin, UBYTE Value);
UBYTE 	DEV_Digital_Read(UWORD Pin);
  • SPI write data:
void DEV_SPI_WriteByte(UBYTE Value);

Upper application

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).
LCD rpi GUI.png
The fonts can be found in RaspberryPi\c\lib\Fonts directory.
RPI open spi3.png

  • New Image Properties: Create a new image buffer, this property includes the image buffer name, width, height, flip Angle, and color.
void Paint_NewImage(UBYTE *image, UWORD Width, UWORD Height, UWORD Rotate, UWORD Color)
Parameters:
      Image: the name of the image buffer, which is actually a pointer to the first address of the image buffer;
      Width: image buffer Width;
      Height: the Height of the image buffer;
      Rotate: Indicates the rotation Angle of an image
      Color: the initial Color of the image;
  • Select image buffer: The purpose of the selection is that you can create multiple image attributes, there can be multiple images buffer, you can select each image you create.
void Paint_SelectImage(UBYTE *image)
Parameters:
       Image: the name of the image buffer, which is actually a pointer to the first address of the image buffer;
  • Image Rotation: Set the rotation Angle of the selected image, preferably after Paint_SelectImage(), you can choose to rotate 0, 90, 180, 270.

Rotation-lcd.png

void Paint_SetRotate(UWORD Rotate)
Parameters:
        Rotate: ROTATE_0, ROTATE_90, ROTATE_180, and ROTATE_270 correspond to 0, 90, 180, and 270 degrees.
  • Image mirror flip: Set the mirror flip of the selected image. You can choose no mirror, horizontal mirror, vertical mirror, or image center mirror.
void Paint_SetMirroring(UBYTE mirror)
Parameters:
        Mirror: indicates the image mirroring mode. MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, MIRROR_ORIGIN correspond to no mirror, horizontal mirror, vertical mirror, and image center mirror respectively.
  • 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.
void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
Parameters:
        Xpoint: the X position of a point in the image buffer
        Ypoint: Y position of a point in the image buffer
        Color: indicates the Color of the dot
  • Image buffer fill color: Fills the image buffer with a color, usually used to flash the screen into blank.
void Paint_Clear(UWORD Color)
Parameters:
        Color: fill Color
  • The fill color of a certain window in the image buffer: the image buffer part of the window filled with a certain color, usually used to fresh the screen into blank, often used for time display, fresh the last second of the screen.
void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameters:
        Xstart: the x-starting coordinate of the window
        Ystart: the y-starting coordinate of the window
        Xend: the x-end coordinate of the window
        Yend: the y-end coordinate of the window
        Color: fill Color
  • Draw point: In the image buffer, draw points on (Xpoint, Ypoint), you can choose the color, the size of the point, the style of the point.
void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameters:
        Xpoint: indicates the X coordinate of a point.
        Ypoint: indicates the Y coordinate of a point.
        Color: fill Color
        Dot_Pixel: The size of the dot, the demo provides 8 size pointss by default.
              typedef enum {
                 DOT_PIXEL_1X1  = 1,	// 1 x 1
                 DOT_PIXEL_2X2  , 		// 2 X 2
                 DOT_PIXEL_3X3  , 	 	// 3 X 3
                 DOT_PIXEL_4X4  , 	 	// 4 X 4
                 DOT_PIXEL_5X5  , 		// 5 X 5
                 DOT_PIXEL_6X6  , 		// 6 X 6
                 DOT_PIXEL_7X7  , 		// 7 X 7
                 DOT_PIXEL_8X8  , 		// 8 X 8
               } DOT_PIXEL;
        Dot_Style: the size of a point that expands from the center of the point or from the bottom left corner of the point to the right and up.
                 typedef enum {
                     DOT_FILL_AROUND  = 1,
                     DOT_FILL_RIGHTUP,
                  } DOT_STYLE;
  • Draw line: In the image buffer, draw line from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width and the style of the line.
void Paint_DrawLine(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, LINE_STYLE Line_Style ,  LINE_STYLE Line_Style)
Parameters:
        Xstart: the x-starting coordinate of a line
        Ystart: the y-starting coordinate of the a line
        Xend: the x-end coordinate of a line
        Yend: the y-end coordinate of a line
        Color: fill Color
        Line_width: The width of the line, the demo provides 8 sizes of width by default.
              typedef enum {
                 DOT_PIXEL_1X1  = 1,	// 1 x 1
                 DOT_PIXEL_2X2  , 		// 2 X 2
                 DOT_PIXEL_3X3  ,		// 3 X 3
                 DOT_PIXEL_4X4  ,		// 4 X 4
                 DOT_PIXEL_5X5  , 		// 5 X 5
                 DOT_PIXEL_6X6  , 		// 6 X 6
                 DOT_PIXEL_7X7  , 		// 7 X 7
                 DOT_PIXEL_8X8  , 		// 8 X 8
              } DOT_PIXEL;
        Line_Style: line style. Select whether the lines are joined in a straight or dashed way.
              typedef enum {
                 LINE_STYLE_SOLID = 0,
                 LINE_STYLE_DOTTED,
              } LINE_STYLE;
  • Draw rectangle: In the image buffer, draw a rectangle from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width of the line, whether to fill the inside of the rectangle.
void Paint_DrawRectangle(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, DOT_PIXEL Line_width,  DRAW_FILL Draw_Fill)
Parameters:
	Xstart: the starting X coordinate of the rectangle
	Ystart: the starting Y coordinate of the rectangle
	Xend: the x-end coordinate of the rectangle
        Yend: the y-end coordinate of the rectangle
	Color: fill Color
	Line_width: The width of the four sides of a rectangle. And the demo provides 8 sizes of width by default.
		typedef enum {
			DOT_PIXEL_1X1  = 1,	// 1 x 1
			DOT_PIXEL_2X2  , 		// 2 X 2
			DOT_PIXEL_3X3  ,		// 3 X 3
			DOT_PIXEL_4X4  ,	        // 4 X 4
			DOT_PIXEL_5X5  , 		// 5 X 5
 			DOT_PIXEL_6X6  , 		// 6 X 6
                        DOT_PIXEL_7X7  , 		// 7 X 7
                        DOT_PIXEL_8X8  , 		// 8 X 8
                 } DOT_PIXEL;
         Draw_Fill: Fill, whether to fill the inside of the rectangle
              typedef enum {
                 	DRAW_FILL_EMPTY = 0,
                 	DRAW_FILL_FULL,
              } DRAW_FILL;
  • Draw circle: In the image buffer, draw a circle of Radius with (X_Center Y_Center) as the center. You can choose the color, the width of the line, and whether to fill the inside of the circle.
void Paint_DrawCircle(UWORD X_Center, UWORD Y_Center, UWORD Radius, UWORD Color, DOT_PIXEL Line_width,  DRAW_FILL Draw_Fill)
Parameters:
	X_Center: the x-coordinate of the center of the circle
	Y_Center: the y-coordinate of the center of the circle
	Radius: indicates the Radius of a circle
	Color: fill Color
	Line_width: The width of the arc, with a default of 8 widths
		typedef enum {
        		DOT_PIXEL_1X1  = 1,	// 1 x 1
        		DOT_PIXEL_2X2  , 		// 2 X 2
        		DOT_PIXEL_3X3  ,		// 3 X 3
        		DOT_PIXEL_4X4  ,		// 4 X 4
        		DOT_PIXEL_5X5  , 		// 5 X 5
        		DOT_PIXEL_6X6  , 		// 6 X 6
        		DOT_PIXEL_7X7  , 		// 7 X 7
        		DOT_PIXEL_8X8  , 		// 8 X 8
		} DOT_PIXEL;
	Draw_Fill: fill, whether to fill the inside of the circle
              typedef enum {
              		DRAW_FILL_EMPTY = 0,
                 	DRAW_FILL_FULL,
              } DRAW_FILL;
  • Write Ascii character: In the image buffer, use (Xstart Ystart) as the left vertex, write an Ascii character, you can select Ascii visual character library, font foreground color, font background color.
void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground,  UWORD Color_Background)
Parameters:
	Xstart: the x-coordinate of the left vertex of a character
	Ystart: the Y-coordinate of the left vertex of a character
	Ascii_Char: indicates the Ascii character
	Font: Ascii visual character library, in the Fonts folder the demo provides the following Fonts:
  		Font8: 5*8 font
    		Font12: 7*12 font
    		Font16: 11*16 font
    		Font20: 14*20 font
    		Font24: 17*24 font
  	Color_Foreground: Font color
  	Color_Background: indicates the background color
  • Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of English characters, you can choose Ascii visual character library, font foreground color, font background color.
void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground,  UWORD Color_Background)
Parameters:
	Xstart: the x-coordinate of the left vertex of a character
	Ystart: the Y coordinate of the font's left vertex
	PString: string, string is a pointer
	Font: Ascii visual character library, in the Fonts folder the demo provides the following Fonts:
     		Font8: 5*8 font
     		Font12: 7*12 font
     		Font16: 11*16 font
     		Font20: 14*20 font
     		Font24: 17*24 font
	Color_Foreground: Font color
  	Color_Background: indicates the background color
  • Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, write a string of Chinese characters, you can choose character font, font foreground color, and font background color of the GB2312 encoding.
void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground,  UWORD Color_Background)
Parameters:
	Xstart: the x-coordinate of the left vertex of a character
	Ystart: the Y coordinate of the font's left vertex
	PString: string, string is a pointer
  	Font: GB2312 encoding character Font library, in the Fonts folder the demo provides the following Fonts:
     		Font12CN: ASCII font 11*21, Chinese font 16*21
     		Font24CN: ASCII font24 *41, Chinese font 32*41
	Color_Foreground: Font color
	Color_Background: indicates the background color
  • Write numbers: In the image buffer,use (Xstart Ystart) as the left vertex, write a string of numbers, you can choose Ascii visual character library, font foreground color, font background color.
void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, double Nummber, sFONT* Font, UWORD Digit, UWORD Color_Foreground,   UWORD Color_Background)
Parameters:
	Xpoint: the x-coordinate of the left vertex of a character
	Ypoint: the Y coordinate of the left vertex of the font
	Nummber: indicates the number displayed, which can be a decimal
	Digit: It's a decimal number
 	Font: Ascii visual character library, in the Fonts folder the demo provides the following Fonts:
   		Font8: 5*8 font
   		Font12: 7*12 font
   		Font16: 11*16 font
		Font20: 14*20 font
   		Font24: 17*24 font
	Color_Foreground: Font color
	Color_Background: indicates the background color
  • Display time: in the image buffer,use (Xstart Ystart) as the left vertex, display time,you can choose Ascii visual character font, font foreground color, font background color.
void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background,  UWORD Color_Foreground)
Parameters:
	Xstart: the x-coordinate of the left vertex of a character
 	Ystart: the Y coordinate of the font's left vertex
	PTime: display time, A time structure is defined here, as long as the hours, minutes, and seconds are passed to the parameters;
	Font: Ascii visual character library, in the Fonts folder the demo provides the following Fonts:
     		Font8: 5*8 font
     		Font12: 7*12 font
     		Font16: 11*16 font
     		Font20: 14*20 font
     		Font24: 17*24 font
  	Color_Foreground: Font color
  	Color_Background: indicates the background color
  • Read the local bmp image and write it to the cache.

For Linux operating systems such as Raspberry Pi, you can read and write pictures. For Raspberry Pi, in the directory: RaspberryPi\c\lib\GUI\GUI_BMPfile.c(.h).

UBYTE GUI_ReadBmp(const char *path, UWORD Xstart, UWORD Ystart)
parameter:
       path: the relative path of the BMP image
       Xstart: The X coordinate of the left vertex of the image, generally 0 is passed by default
       Ystart: The Y coordinate of the left vertex of the picture, generally 0 by default

Testing Code for Users

For Raspberry Pi, in the directory: RaspberryPi\c\examples, for all the test code;

LCD rpi c examples&128.png

If you need to run the 0.96-inch LCD test program, you need to add 0.96 as a parameter when running the main demo.
Re-execute in Linux command mode as follows:

make clean
make
sudo ./main 0.96

Python (for Raspberry Pi)

Works with python and python3.
For python, his calls are not as complicated as C.
Raspberry Pi: RaspberryPi\python\lib\

LCD rpi python lib.png

lcdconfig.py

  • Module initialization and exit processing.
def module_init()
def module_exit()
Note:
1. Here is some GPIO processing before and after using the LCD screen.
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.
  • GPIO read and write:
def  digital_write(pin, value)
def  digital_read(pin)
  • SPI write data.
def spi_writebyte(data)
  • xxx_LCD_test.py (xxx indicates the size, if it is a 0.96inch LCD, it is 0inch96_LCD_test.py, and so on)

python is in the following directory:
Raspberry Pi: RaspberryPi\python\examples\

LCD rpi python examples2.png

If your python version is python2 and you need to run the 0.96inch LCD test program, re-execute it as follows in linux command mode:

sudo python 0inch96_LCD_test.py

If your python version is python3 and you need to run the 0.96inch LCD test program, re-execute the following in linux command mode:

sudo python3 0inch96_LCD_test.py

About Rotation Settings

If you need to set the screen rotation in the python program, you can set it by the statement im_r= image1.rotate(270).

im_r= image1.rotate(270)
Rotation effect, take 1.54 as an example, the order is 0°, 90°, 180°, 270°
LCD Rotate.jpg

GUI Functions

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

  • It needs to use the image library and install the library.
sudo apt-get install python3-pil  

And then import the library

from PIL import Image,ImageDraw,ImageFont.

Among them, Image is the basic library, ImageDraw is the drawing function, and ImageFont is the text function.

  • Define an image cache to facilitate drawing, writing, and other functions on the picture.
image1 = Image.new("RGB", (disp.width, disp.height), "WHITE")

The first parameter defines the color depth of the image, which is defined as "1" to indicate the bitmap of one-bit depth. The second parameter is a tuple that defines the width and height of the image. The third parameter defines the default color of the buffer, which is defined as "WHITE".

  • Create a drawing object based on Image1 on which all drawing operations will be performed on here.
draw = ImageDraw.Draw(image1)
  • Draw a line.
draw.line([(20, 10),(70, 60)], fill = "RED",width = 1)

The first parameter is a four-element tuple starting at (0, 0) and ending at (127,0). Draw a line. Fill ="0" means the color of the line is white.

  • Draw a rectangle.
draw.rectangle([(20,10),(70,60)],fill = "WHITE",outline="BLACK")

The first argument is a tuple of four elements. (20,10) is the coordinate value in the upper left corner of the rectangle, and (70,60) is the coordinate value in the lower right corner of the rectangle. Fill =" WHITE" means BLACK inside, and outline="BLACK" means the color of the outline is black.

  • Draw a circle.
draw.arc((150,15,190,55),0, 360, fill =(0,255,0)

Draw an inscribed circle in the square, the first parameter is a tuple of 4 elements, with (150, 15) as the upper left corner vertex of the square, (190, 55) as the lower right corner vertex of the square, specifying the level median line of the rectangular frame is the angle of 0 degrees, the second parameter indicates the starting angle, the third parameter indicates the ending angle, and fill = 0 indicates that the color of the line is white. If the figure is not square according to the coordination, you will get an ellipse.

Besides the arc function, you can also use the chord function for drawing a solid circle.

draw.ellipse((150,65,190,105), fill = 0)

The first parameter is the coordination of the enclosing rectangle. The second and third parameters are the beginning and end degrees of the circle. The fourth parameter is the fill color of the circle.

  • Character.

The ImageFont module needs to be imported and instantiated:

Font1 = ImageFont.truetype("../Font/Font01.ttf",25)
Font2 = ImageFont.truetype("../Font/Font01.ttf",35)
Font3 = ImageFont.truetype("../Font/Font02.ttf",32)

You can use the fonts of Windows or other fonts which is in ttc format..
Note: Each character library contains different characters; If some characters cannot be displayed, it is recommended that you can refer to the encoding set ro used. To draw English characters, you can directly use the fonts; for Chinese characters, you need to add a symbol u:

draw.text((40, 50), 'WaveShare', fill = (128,255,128),font=Font2)
text= u"微雪电子"
draw.text((74, 150),text, fill = "WHITE",font=Font3)

The first parameter is a tuple of 2 elements, with (40, 50) as the left vertex, the font is Font2, and the fill is the font color. You can directly make fill = "WHITE", because the regular color value is already defined Well, of course, you can also use fill = (128,255,128), the parentheses correspond to the values of the three RGB colors so that you can precisely control the color you want. The second sentence shows Waveshare Electronics, using Font3, the font color is white.

  • read local image
image = Image.open('../pic/LCD_1inch28.jpg')

The parameter is the image path.

  • Other functions.

For more information, you can refer to http://effbot.org/imagingbook pil