Using the Basic graphics control of STONE serial screen, you can draw lines, triangles, polygons, rectangles, squares, circles, arcs, fill colors, cut and paste, and so on.
The design of an early learning machine using the serial touch screen STVI056WT-01, to identify shapes by looking at the pictures, to recognize words according to colors, and to design an entertainment format to determine the correct errors, score or pass the level, so that children can learn to recognize colors, understand basic shapes and learn the corresponding words in a relaxed and playful way.
The official video presentation does not give the actual effect of the Basic graphics control, so this demo will supplement it. The instructions for drawing are transmitted through the communication between the arduino control board and the STONE serial screen.
In addition, this note does not include the complete functional content of the Basic graphics control, only the functions used in the use of the elaboration, the recorded are tested on the machine OK, you can directly download the demo run.
The hardware environment for the demo is shown in Figure 1, Figure 2 and Figure 3.
STONE officially comes with 2 boards, among which, the square one is a USB download board and the long one is a USB to serial communication board (and DC12V power supply for the serial screen).
(Figure 1: Communication and power connection of STONE serial screen) (Figure 2: Connection diagram for downloading Basic Graphics control files from STONE screen)
(Figure 3: TX, RX, GND connection between STONE serial screen communication board and arduino development board)
(Figure 4: Basic graphics control drawing area and variable address and other parameter settings)
After selecting the Basicgraphics control in the STONE TOOLBox(GUI Design software) menu Variable Configuration (D), and setting the drawing area and variable address parameters, the 0x82 instruction is used to write to the set Variable memory address (0x1000 is set here) After setting the drawing area and variable address parameters, the 0x82 instruction is used to write CMD + Data_pack_Num_Max + Data to the set Variable memory address (0x1000 in this case) to complete the implementation of the drawing functions. The specific function code is shown in Figure 6, where there is a line drawing instruction 0x0002, using the following example.
(Figure 5: Basic graphics control data command format)
(Figure 6: Illustration of drawing line and rectangle commands for Basic graphic control)
Line drawing instruction 0x0002, example of use.
To connect a black line from coordinates (340, 200) to coordinates (585, 200), the instruction is
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
Draw three black lines closed into a triangle with three vertices at coordinates (200, 200), (300, 200), (250, 100), and the instruction is
A5 5A 19 82 10 00 00 02 00 03 00 00 00 00 C8 00 C8 01 2C 00 C8 00 FA 00 64 00 C8 00 C8
The above 0x1000 is the variable address of Basic graphics control, 0x0002 is the instruction code, 0x0001 and 0x0003 are 1 line and 3 lines respectively, 0x0000 is the color code, the value 0000 is black and the value ffff is bright white. Other instant XY coordinates of each point.
Example of drawing a rectangle.
Rectangle upper left vertex coordinates (340, 237), lower right vertex coordinates (585, 340) color black, the command is
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
Simultaneously draw two rectangles (340, 237) – (585, 340), (324, 221) – (601, 356), the command is
A5 5A 1B 82 10 00 00 03 00 02 01 54 00 ED 02 49 01 54 00 00 01 44 00 DD 02 59 01 64 FF FF
The above 0x1000 is the variable address of Basic graphics control, 0x0003 is the rectangle command code, 0x0001, 0x0002 are 1 rectangle, 2 rectangles, 0x0000, 0xffff is the color code, the value of 0000 is black, the value of fffff is bright white. The others are the XY coordinates of the top left vertex and bottom right vertex of each rectangle.
(Figure 7: Rectangle fill and draw circle commands for Basic graphics control)
Rectangle fill example.
The black rectangle fill (470, 200) ~ (550 ,255) command is
A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00
Example of drawing a circle.
The center of the circle (470, 200), R = 50 black, the instruction is
A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00
To draw two circles at the same time, center A (470, 200) R=50 and center B (256, 200) R=80, both in black, the command is
A5 5A 17 82 10 00 00 05 00 02 01 D6 00 C8 00 32 00 00 01 00 00 C8 00 50 00 00
(Figure 8: Arc command for Basic graphics control)
The arc resolution is 0.5 degrees, 360 degrees corresponds to 720, and 0 degrees is in the vertical upward direction.
Arc example.
The upper arc 315 degrees to start – 45 degrees to end, the center of the circle (300, 200) R = 80, black, the command is
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
Regarding colors.
0x0000 is black 0xffff is white 0x00ff is blue 0xf000 is red 0xfd60 is orange
0xff60 is yellow 0x2f60 is green
(Figure 9: Basic graphics control shape interface drawing board parameters and addresses)
(Figure 10: Drawing board parameters and addresses of the Basic graphics control color interface)
According to the variable address, the command to fill green color for (10, 80) ~ (630, 400) is
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
Other similarities, see the program code for details.
The code demonstrated in the video is as follows.
/*
frank10
STONE and arduino COMM, the Basic graphics play at program..
Turns on an LED on for one second, then off for one second, repeatedly.The LED tell our that the soft running ok!
The sample has two page.The page1 is shape, the page2 is corlor!
This example code is in the file of frank. 20210625
*/
// Pin 13 has an LED connected on most Arduino boards.
// give it a name:
int led = 13;
int iYePian = 0; //0x0020 for The num of YePian!
//int iGongLu = 0; //0x0180 for The GongLu!
//int iLiuLiang = 0; //0x0160 for The now LiuLiang!
int iJiao = 0; // 0x0260 for The JieJuJiao!
int iGongLuWater = 0; //0x0280 for The Water GongLu! value is 0-50000!
int iLed = 1; //delay time num.
int iLed2 = 1; //delay time num. 50ms do a point.
int iLed3 = 0; //delay time num. 50ms do a point.
int iLed4 = 0; //delay time num. 50ms do a point.
int iCurve0 = 0; //The value of curve0. 50ms do a point.
int iCurve1 = 0; //The value of curve1,. 50ms do a point.
int iFlag0 = 1; // The flag of the curve0 + or -; .1 is up,0 is down.
int iFlag1 = 1; // The flag of the curve1 + or -; .1 is up,0 is down.
int iNum = 0 ; //read in char num.
int iNum2 = 0; //read in char num2 for ShuiDianZhan!
//int iPower = 2; //key statue 0x0009
//int iMode = 2; //key statue 0x000A
int iPowerWater = 2; //key statue 0x0039
// the setup routine runs once when you press reset:
void setup() {
// initialize the digital pin as an output.
pinMode(led, OUTPUT);
Serial.begin(115200); // Open the serial communication function and wait for the serial port to open
while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}
}
// the loop routine runs over and over again forever:
void loop() {
int inChar;
/*——————————————————————————-*/
if (iLed == 800) {
//——- read 0x0039 value———-
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x04); //lenght
Serial.write(0x83); // read!
Serial.write(0x00); // address of ShuiDianZhan Power key!
Serial.write(0x39); // address of ShuiDianZhan power key!
Serial.write(0x01); // 0x0039(power key)
//———STONE return value will be “A5 5A 06 83 00 39 01 00 01 “——
}
// Read the information sent by the serial port:
if (Serial.available() > 0) { inChar = Serial.read(); }
/*
save a bak.
because can have a read key and have a work of key.
the program is a HMI that a key of input do a work of peplose.
*/
//————————————————————————————
//—————————-0x0039 key read begin———————————–
if (inChar == 0x39) { iNum2 = 1 ; }
if ((inChar == 0x01)&&(iNum2 == 1)) { iNum2 = 2 ; }
if ((inChar == 0x00)&&(iNum2 == 2)) { iNum2 = 3 ; }
if ((inChar == 0x01)&&(iNum2 == 3)) {
iNum2 = 0 ;
if(iPowerWater != 1){
iPowerWater = 1 ; //power ON!
iJiao = 0 ;
iGongLuWater = 0 ;
}
}
if ((inChar == 0x02)&&(iNum2 == 3)) {
iNum2 = 0 ;
iPowerWater = 2 ; //power OFF!
}
//——————0x0039 key read ok! iPowerWater ok!—————————-
//————————————————————————————
delay(1);
iLed += 1;
iLed2 += 1; // 50ms do a point.
//——————————————————————————————–
//———————————50ms do a point begin————————————–
if (iLed2 == 50) {
iLed2 = 1;
iLed4 += 1; // 50ms do a point.
if(iFlag0 == 1){
iCurve0 += 1; // 50ms do a point.
if(iCurve0 >= 150){
iFlag0 = 0; // The iCurve0 turn down!.
}
}
if(iFlag0 == 0){
iCurve0 -= 1; // 50ms do a point.
if(iCurve0 <= 1){
iFlag0 = 1; // The iCurve0 turn up!.
}
}
if(iFlag1 == 1){
if(iLed4 >= 3){
iCurve1 += 1; // 50ms do a point.
iLed4 = 0;
}
if(iCurve1 >= 50){
iFlag1 = 0; // The iCurve1 turn down!.
}
}
if(iFlag1 == 0){
if(iLed4 >= 3){
iLed4 = 0;
iCurve1 -= 1; // 50ms do a point.
}
if(iCurve1 <= 1){
iFlag1 = 1; // The iCurve1 turn up!.
}
}
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x06);
Serial.write(0x84); //write to curve!
Serial.write(0x03); // The curve path,
Serial.write(iCurve0); // N=1,
Serial.write(0x00);
Serial.write(iCurve1);
Serial.write(0x00);
}
//——————————-50ms do the point end—————————————
//——————————————————————————————-
if (iLed == 500) {
digitalWrite(led, HIGH); // turn the LED on (HIGH is the voltage level)
//delay(500); // wait for a second, Range:200-2000
}
if (iLed >= 1000) {
digitalWrite(led, LOW); // turn the LED off by making the voltage LOW
//delay(500); // wait for a second, range:200-2000
iLed = 1;
if( iNum <= 6 ) iNum += 1; //shape turn!
if( iNum == 6 ) iNum = 0; //shape turn!
//————————————–The red is begin—————————————–
if( iNum == 1){ // triangle! and red!
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x19);
Serial.write(0x82);
Serial.write(0x10); // addressH of Basic graphics
Serial.write(0x00); // addressL of Basic graphics
Serial.write(0x00); // Do line CMD
Serial.write(0x02); // Do line CMD
Serial.write(0x00); // the number of the line
Serial.write(0x03); // The number of the line.
Serial.write(0x00); //colorH black
Serial.write(0x00); //colorL
Serial.write(0x00); // pointX1H
Serial.write(0xc8); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0xc8); // pointY1L
Serial.write(0x01); // pointX2H
Serial.write(0x2C); // pointX2L.
Serial.write(0x00); // pointY2H
Serial.write(0xC8); // pointY2L
Serial.write(0x00); // pointX3H
Serial.write(0xFA); // pointX3L
Serial.write(0x00); // pointY3H
Serial.write(0x64); // pointY3L
Serial.write(0x00); // pointX1H
Serial.write(0xc8); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0xc8); // pointY1L
//fill—–
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // addressH of Basic graphics page2
Serial.write(0x00); // addressL of Basic graphics pabe2
Serial.write(0x00); // Do Fill rectangle CMD
Serial.write(0x04); // Do Fill rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x00); // pointX1H
Serial.write(0x0A); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0x50); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x76); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x90); // pointY2L
Serial.write(0xF0); // Red colorH
Serial.write(0x00); // Red colorL
}
//————————————–The red is end—————————————–
//————————————–The yellow and the arc is begin—————————————–
if( iNum == 2){ // arc! and yellow!
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x13);
Serial.write(0x82);
Serial.write(0x10); // addressH of Basic graphics page1
Serial.write(0x00); // addressL of Basic graphics pabe1
Serial.write(0x00); // Do arc CMD
Serial.write(0x0B); // Do arc CMD
Serial.write(0x00); // the number of the arc
Serial.write(0x01); // The number of the arc.
Serial.write(0x00); // colorH black
Serial.write(0x00); // colorL blank
Serial.write(0x01); // centel of circle XH
Serial.write(0x2c); // centel of circle XL
Serial.write(0x00); // centel of circle YH
Serial.write(0xc8); // centel of circle YL
Serial.write(0x00); // RH
Serial.write(0x50); // RL.
Serial.write(0x02); // Angle1H
Serial.write(0x76); // Angle1L
Serial.write(0x00); // Angle2H
Serial.write(0x5A); // Angle2L
//fill—–
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // addressH of Basic graphics page2
Serial.write(0x00); // addressL of Basic graphics pabe2
Serial.write(0x00); // Do Fill rectangle CMD
Serial.write(0x04); // Do Fill rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x00); // pointX1H
Serial.write(0x0A); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0x50); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x76); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x90); // pointY2L
Serial.write(0xFF); // Yellow colorH
Serial.write(0x60); // Yellow colorL
}
//————————————–The yellow and the arc is end—————————————–
//————————————–The green and the rectangle is begin—————————————–
if( iNum == 3){ // rectangle! and green!
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x10); // addressH of Basic graphics page1
Serial.write(0x00); // addressL of Basic graphics pabe1
Serial.write(0x00); // Do rectangle CMD
Serial.write(0x03); // Do rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x01); // pointX1H
Serial.write(0x54); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0xED); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x49); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x54); // pointY2L
Serial.write(0x00); // colorH black
Serial.write(0x00); // colorL blank
//fill—–
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // addressH of Basic graphics page2
Serial.write(0x00); // addressL of Basic graphics pabe2
Serial.write(0x00); // Do Fill rectangle CMD
Serial.write(0x04); // Do Fill rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x00); // pointX1H
Serial.write(0x0A); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0x50); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x76); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x90); // pointY2L
Serial.write(0x2F); // Green colorH
Serial.write(0x60); // Green colorL
}
//————————————–The green and the rectangle is end—————————————–
//————————————–The orange and the square is begin—————————————–
if( iNum == 4){ // square! and orange!
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x10); // addressH of Basic graphics page1
Serial.write(0x00); // addressL of Basic graphics pabe1
Serial.write(0x00); // Do rectangle CMD
Serial.write(0x03); // Do rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x01); // pointX1H
Serial.write(0x54); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0x91); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x49); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x86); // pointY2L
Serial.write(0x00); // colorH black
Serial.write(0x00); // colorL blank
//fill—–
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // addressH of Basic graphics page2
Serial.write(0x00); // addressL of Basic graphics pabe2
Serial.write(0x00); // Do Fill rectangle CMD
Serial.write(0x04); // Do Fill rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x00); // pointX1H
Serial.write(0x0A); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0x50); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x76); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x90); // pointY2L
Serial.write(0xFD); // orange colorH
Serial.write(0x60); // orange colorL
}
//————————————–The orange and the square is end—————————————–
//————————————–The blue and the circle is begin—————————————–
if( iNum == 5){ // circle! and blue!
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x0F);
Serial.write(0x82);
Serial.write(0x10); // addressH of Basic graphics page1
Serial.write(0x00); // addressL of Basic graphics pabe1
Serial.write(0x00); // Do circle CMD
Serial.write(0x05); // Do circle CMD
Serial.write(0x00); // the number of the circle
Serial.write(0x01); // The number of the circle
Serial.write(0x01); // centel of circle XH
Serial.write(0xD6); // centel of circle XL
Serial.write(0x00); // centel of circle YH
Serial.write(0xc8); // centel of circle YL
Serial.write(0x00); // RH
Serial.write(0x32); // RL.
Serial.write(0x00); // colorH black
Serial.write(0x00); // colorL blank
//fill—–
Serial.write(0xA5); //”A5″ is 165
Serial.write(0x5A); //”5A” is 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // addressH of Basic graphics page2
Serial.write(0x00); // addressL of Basic graphics pabe2
Serial.write(0x00); // Do Fill rectangle CMD
Serial.write(0x04); // Do Fill rectangle CMD
Serial.write(0x00); // the number of the rectangle
Serial.write(0x01); // The number of the rectangle
Serial.write(0x00); // pointX1H
Serial.write(0x0A); // pointX1L
Serial.write(0x00); // pointY1H
Serial.write(0x50); // pointY1L
Serial.write(0x02); // pointX2H
Serial.write(0x76); // pointX2L.
Serial.write(0x01); // pointY2H
Serial.write(0x90); // pointY2L
Serial.write(0x00); // blue colorH
Serial.write(0xFF); // blue colorL
}
//————————————–The blue and the circle is end—————————————–
Finally, online debugging.
STONE TOOLBox(GUI Design software) will edit the screen file download, arduino code file upload, connect the power supply, communication, power on to observe the image drawing and color change, to achieve the desired effect.
The code demonstrated in the video is as follows.
(online tuning attempts)
Source: Plato Data Intelligence