How to draw 2D graphics on LCD touchscreen
Tags: beginners, programming, devops, design
Published: 2022-08-05 09:16:00

Hello, everyone.
Today I will teach you to draw 2D graphics on DWIN screen by Keil c51 development.
**1 Development guide**
First, I will introduce the basic touch control in the development  guide of DGUS.
Note that a basic graphics display control can only draw one type of graphics.
Next, I'll describe the data storage format of the basic graphics control at vp.
The first word is CMD. It specifies what graphic the control will display. The drawing instructions are different for different graphics.
The second word specifies the number of graphics displayed by a control.
The third word is the shape's data package, such as the coordinates of the start point, the end point and the color.
Next, let's look at how many kinds of shapes CMD supports.
You can see that 0x0001 refers to a point; 0x0002 refers to a line;
0x0003 refers to a rectangle; and 0x0004 refers to a filled rectangle.
You can refer to the DGUS development guide for more details.
This part describes the format of the package.
That is, the color and the coordinates of the graphics. And if you set more than one graphic, you can write them down in order.
Next I'll introduce the properties of the basic graphic control.
The most important one is this vp, which can be set as from 0x1000 to 0xFFFF. Other properties basically do not need to be set.

**2. Create a new folder and GUI project**
Next, create a new folder named "Code".
Inside this folder, create two new folders named "C51" and "GUI".
Put the background image into the GUI folder.
In this tutorial, I use the model of EKT070B, its resolution is 800 * 600. Therefore the background image resolution is also 800 * 600.
Open DGUS, click NEW, set the saving path to the GUI folder we just created, and set the resolution to the same as the screen. 

Import the image, click ICL TOOL, Select the image, click Generate ICL, name it 32.
Click on the Basic graphic control and resize the it.
 Set the VP of this control to 2000.
Copy this control and set the vp of the second control to 3000.

Click save and generate.
Open the DWIN_SET folder, copy the configuration files to the SD card DWIN_SET folder.
Insert the SD card, power the screen on.
After the burning is finished, pull out the SD card and re-power the screen.
We can see the project has been download to the screen successfully.

**3.Use Keil to write code**
Here we will use the code template from chapter 1.
First we wrap a function that draws 2D graphics under the file sys.c.
Make the function accept a formal parameter, so that we can draw different graphics by entering data.
Next part is function declaration.

Then define the graphics, I will demonstrate line and filling rectangle.
Open the DGUS development guide, and you can see that the CMD value of the line is 0x0002.
Similarly, the CMD value of the filling rectangle is 0x0004.

Next, encapsulate the structure data package.
Let's encapsulate the data of the line.
Since the DWIN screen is in words, I will define the data as u16.
First encapsulate the vp , which is used to qualify which basic graphics control the data is transferred to.
Then encapsulate the CDM, which is the shape type.
Then encapsulate the shape number.
Next part is the data package, including  the color, the
xy coordinate of startpoint 0
xy coordinate of endpoint 1
Then encapsulate an end flag that marks the end of the encapsulation.

This above is the data structure of the line.
Copied them, and then modified on top of that to a filling rectangular data structure.
Basically it's all pretty much the same, according to the development guide, only the position of the Color data needs to be back-shifted.
Next, let's implement this function.
First define the shape number, here I set it to 1.
Then define the end flag as 0xFF00.
Then use switch to select the second element to judge the shape.
Divided into the case of drawing a line and a filling rectangle.
Let's fill the data first. Set the shape number to 1.
Then write the end flag.
We want to write the data at the vp, the value of which we have already given before.
Then the data written is the content after the vp. The length of the data is indeterminate and is represented here by a variable, using the length of the structure - 2, since the length of the vp address is 2 words.
The case of filling rectangle is similar, you just need to modify the corresponding place.


Then let's test the function.
We're going to draw a line and a filling rectangle.

Then just copy the structure and write the vp as it was set in our project.
The shape is set to line.
Data transfer is not necessary for the shape number, because the data is already set to 1 in the function.
Here we set the color to red.
Open the project and you can refer to the coordinates of the start point  and the end point of the line.
After the structure data is written, we can call it directly.


The structure data for filling rectangle is similar, just move back the color data and then set the corresponding vp address and points coordinates of the rectangle.

Now we have completed the code section, click build.

**4.Effect**

Open download for 8051, download the generated hex file, and you can see the graphics displayed on the screen.

Video:https://forums.dwin-global.com/index.php/forums/topic/draw-2d-graphics-on-dwin-screen-with-c51-code/