Usando el Control de gráficos básico de la pantalla de serie STONE, puede dibujar líneas, triángulos, polígonos, rectángulos, cuadrados, círculos, arcos, rellenar colores, cortar y pegar, etc.
El diseño de una máquina de aprendizaje temprano utilizando la pantalla táctil serial STVI056WT-01, para identificar formas al mirar las imágenes, reconocer palabras según colores y diseñar un formato de entretenimiento para determinar los errores correctos, puntuar o pasar de nivel, para que los niños aprendan a reconocer colores, comprender formas básicas y aprender las palabras correspondientes de forma relajada y lúdica.
La presentación oficial del video no muestra el efecto real del control de gráficos básico, por lo que esta demostración lo complementará. Las instrucciones de dibujo se transmiten a través de la comunicación entre los tablero de control arduino y del Pedregal de piedra en serien.
Además, esta nota no incluye el contenido funcional completo del control gráfico básico, solo las funciones utilizadas en el uso de la elaboración, las grabadas se prueban en la máquina OK, se puede descargar directamente la ejecución demo.
El entorno de hardware para la demostración se muestra en la Figura 1, Figura 2 y Figura 3.
STONE viene oficialmente con 2 placas, entre las cuales, la cuadrada es una placa de descarga USB y la larga es una placa de comunicación USB a serie (y una fuente de alimentación DC12V para la pantalla serie).
(Figura 1: Conexión de comunicación y alimentación de la pantalla serie STONE) (Figura 2: Diagrama de conexión para descargar archivos de control de gráficos básicos desde la pantalla STONE)
(Figura 3: Conexión TX, RX, GND entre la placa de comunicación de pantalla serie STONE y la placa de desarrollo arduino)
(Figura 4: Área de dibujo de control de gráficos básicos y dirección de variable y otros ajustes de parámetros)
Después de seleccionar el control Basicgraphics en el menú STONE TOOLBox (software de diseño GUI) Configuración variable (D), y configurar el área de dibujo y los parámetros de dirección variable, la instrucción 0x82 se usa para escribir en la dirección de memoria variable configurada (0x1000 se configura aquí) Después de configurar el área de dibujo y los parámetros de dirección variable, la instrucción 0x82 se usa para escribir CMD + Data_pack_Num_Max + Data en la dirección de memoria variable configurada (0x1000 en este caso) para completar la implementación de las funciones de dibujo. El código de función específico se muestra en la Figura 6, donde hay una instrucción de dibujo lineal 0x0002, usando el siguiente ejemplo.
(Figura 5: Formato de comando de datos de control de gráficos básicos)
(Figura 6: Ilustración de los comandos de línea y rectángulo de dibujo para el control gráfico básico)
Instrucción de dibujo lineal 0x0002, ejemplo de uso.
Para conectar una línea negra desde las coordenadas (340, 200) a las coordenadas (585, 200), la instrucción es
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
Dibuja tres líneas negras cerradas en un triángulo con tres vértices en las coordenadas (200, 200), (300, 200), (250, 100), y la instrucción es
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
El 0x1000 anterior es la dirección variable del control gráfico básico, 0x0002 es el código de instrucción, 0x0001 y 0x0003 son 1 línea y 3 líneas respectivamente, 0x0000 es el código de color, el valor 0000 es negro y el valor ffff es blanco brillante. Otras coordenadas XY instantáneas de cada punto.
Ejemplo de dibujo de un rectángulo.
Coordenadas del vértice superior izquierdo del rectángulo (340, 237), coordenadas del vértice inferior derecho (585, 340) color negro, el comando es
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
Dibuje simultáneamente dos rectángulos (340, 237) - (585, 340), (324, 221) - (601, 356), el comando es
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
El 0x1000 anterior es la dirección variable del control de gráficos básico, 0x0003 es el código de comando del rectángulo, 0x0001, 0x0002 son 1 rectángulo, 2 rectángulos, 0x0000, 0xffff es el código de color, el valor de 0000 es negro, el valor de fffff es brillante blanco. Las otras son las coordenadas XY del vértice superior izquierdo y el vértice inferior derecho de cada rectángulo.
(Figura 7: Comandos de relleno de rectángulo y dibujar círculo para el control de gráficos básico)
Ejemplo de relleno de rectángulo.
El comando de relleno de rectángulo negro (470, 200) ~ (550, 255) es
A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00
Ejemplo de dibujo de un círculo.
El centro del círculo (470, 200), R = 50 negro, la instrucción es
A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00
Para dibujar dos círculos al mismo tiempo, centro A (470, 200) R = 50 y centro B (256, 200) R = 80, ambos en negro, el comando es
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
(Figura 8: Comando Arc para el control de gráficos básico)
La resolución del arco es de 0.5 grados, 360 grados corresponden a 720 y 0 grados en la dirección vertical hacia arriba.
Ejemplo de arco.
El arco superior 315 grados al inicio - 45 grados al final, el centro del círculo (300, 200) R = 80, negro, el comando es
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
Respecto a los colores.
0x0000 es negro 0xffff es blanco 0x00ff es azul 0xf000 es rojo 0xfd60 es naranja
0xff60 es amarillo 0x2f60 es verde
(Figura 9: Parámetros y direcciones del tablero de dibujo de la interfaz de forma de control de gráficos básicos)
(Figura 10: Parámetros del tablero de dibujo y direcciones de la interfaz de color de control de gráficos básicos)
Según la dirección de la variable, el comando para rellenar el color verde para (10, 80) ~ (630, 400) es
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
Otras similitudes, consulte el código del programa para obtener más detalles.
El código que se muestra en el video es el siguiente.
/*
frank10
STONE y arduino COMM, los gráficos básicos se reproducen en el programa.
Enciende un LED durante un segundo, luego se apaga durante un segundo, repetidamente. ¡El LED indica que el funcionamiento suave está bien!
La muestra tiene dos páginas. ¡La página1 es forma, la página2 es corlor!
Este código de ejemplo está en el archivo de frank. 20210625
*/
// El pin 13 tiene un LED conectado en la mayoría de las placas Arduino.
// Dale un nombre:
led int = 13;
int iYePian = 0; // ¡0x0020 para el número de YePian!
// int iGongLu = 0; // ¡0x0180 para The GongLu!
// int iLiuLiang = 0; // ¡0x0160 para el ahora LiuLiang!
int iJiao = 0; // 0x0260 para The JieJuJiao!
int iGongLuWater = 0; // ¡0x0280 para The Water GongLu! ¡el valor es 0-50000!
int iLed = 1; // tiempo de retraso num.
int iLed2 = 1; // tiempo de retraso num. 50ms hacen un punto.
int iLed3 = 0; // tiempo de retraso num. 50ms hacen un punto.
int iLed4 = 0; // tiempo de retraso num. 50ms hacen un punto.
int iCurve0 = 0; // El valor de curve0. 50ms hacen un punto.
int iCurve1 = 0; // El valor de curve1 ,. 50ms hacen un punto.
int iFlag0 = 1; // La bandera de la curva 0 + o -; .1 está arriba, 0 está abajo.
int iFlag1 = 1; // La bandera de la curva 1 + o -; .1 está arriba, 0 está abajo.
int iNum = 0; // leer en char num.
int iNum2 = 0; // ¡lee el char num2 para ShuiDianZhan!
// int iPower = 2; // estatua clave 0x0009
// int iMode = 2; // estatua clave 0x000A
int iPowerWater = 2; // estatua clave 0x0039
// la rutina de configuración se ejecuta una vez cuando presiona restablecer:
configuración nula () {
// inicializa el pin digital como salida.
pinMode (led, SALIDA);
Serial.begin (115200); // Abra la función de comunicación serial y espere a que se abra el puerto serial
while (! Serial) {
; // espera a que se conecte el puerto serie. Necesario solo para Leonardo
}
}
// la rutina del ciclo se repite una y otra vez para siempre:
bucle vacío () {
int en Char;
/ * ——————————————————————————- * /
si (iLed == 800) {
// ——- leer el valor 0x0039 ———-
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x04); //largo
Serial.write (0x83); // ¡leer!
Serial.write (0x00); // ¡Dirección de la tecla de encendido ShuiDianZhan!
Serial.write (0x39); // ¡Dirección de la tecla de encendido ShuiDianZhan!
Serial.write (0x01); // 0x0039 (tecla de encendido)
// ——— El valor de retorno de STONE será "A5 5A 06 83 00 39 01 00 01" ——
}
// Leer la información enviada por el puerto serie:
if (Serial.available ()> 0) {inChar = Serial.read (); }
/*
guardar un bak.
porque puede tener una clave de lectura y tener un trabajo de clave.
el programa es una HMI que una tecla de entrada hace un trabajo de 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; //¡encendido!
iJiao = 0;
iGongLuWater = 0;
}
}
if ((inChar == 0x02) && (iNum2 == 3)) {
iNum2 = 0;
iPowerWater = 2; //¡apagado!
}
// —————— ¡Tecla 0x0039 leer bien! iPowerWater ok! —————————-
// ————————————————————————————
retraso (1);
iLed + = 1;
iLed2 + = 1; // 50ms hacen un punto.
// ——————————————————————————————–
// ——————————— 50ms iniciar un punto ————————————–
si (iLed2 == 50) {
Led2 = 1;
iLed4 + = 1; // 50ms hacen un punto.
if (iFlag0 == 1) {
iCurve0 + = 1; // 50ms hacen un punto.
if (iCurve0> = 150) {
iFlag0 = 0; // ¡El iCurve0 se apaga !.
}
}
if (iFlag0 == 0) {
iCurve0 - = 1; // 50ms hacen un punto.
si (iCurve0 <= 1) {
iFlag0 = 1; // ¡Aparece el iCurve0 !.
}
}
if (iFlag1 == 1) {
if (iLed4> = 3) {
iCurve1 + = 1; // 50ms hacen un punto.
Led4 = 0;
}
if (iCurve1> = 50) {
iFlag1 = 0; // ¡El iCurve1 se apaga !.
}
}
if (iFlag1 == 0) {
if (iLed4> = 3) {
Led4 = 0;
iCurve1 - = 1; // 50ms hacen un punto.
}
si (iCurve1 <= 1) {
iFlag1 = 1; // ¡Aparece el iCurve1 !.
}
}
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x06);
Serial.write (0x84); // ¡escribe en la curva!
Serial.write (0x03); // La trayectoria de la curva,
Serial.write (iCurve0); // N = 1,
Serial.write (0x00);
Serial.write (iCurve1);
Serial.write (0x00);
}
// ——————————- 50ms hacen el punto final —————————————
// ——————————————————————————————-
si (iLed == 500) {
digitalWrite (led, ALTO); // enciende el LED (ALTO es el nivel de voltaje)
// retraso (500); // espera un segundo, rango: 200-2000
}
if (iLed> = 1000) {
digitalWrite (led, BAJO); // apaga el LED haciendo que el voltaje sea BAJO
// retraso (500); // espera un segundo, rango: 200-2000
LED = 1;
si (iNum <= 6) iNum + = 1; // ¡Giro de forma!
si (iNum == 6) iNum = 0; // ¡Giro de forma!
// ————————————– El rojo es comenzar —————————————–
if (iNum == 1) {// ¡triángulo! ¡Y Rojo!
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x19);
Serial.write (0x82);
Serial.write (0x10); // direcciónH de gráficos básicos
Serial.write (0x00); // direcciónL de gráficos básicos
Serial.write (0x00); // Hacer línea CMD
Serial.write (0x02); // Hacer línea CMD
Serial.write (0x00); // el número de la línea
Serial.write (0x03); // El número de la línea.
Serial.write (0x00); // colorH negro
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
//llenar--
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // direcciónH de la página de gráficos básicos2
Serial.write (0x00); // direcciónL de gráficos básicos pabe2
Serial.write (0x00); // Hacer CMD de relleno de rectángulo
Serial.write (0x04); // Hacer CMD de relleno de rectángulo
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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); // Color rojo H
Serial.write (0x00); // Color rojoL
}
// ————————————– El rojo es el fin —————————————–
// ————————————– El amarillo y el arco están comenzando —————————————–
if (iNum == 2) {// ¡arco! y amarillo!
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x13);
Serial.write (0x82);
Serial.write (0x10); // direcciónH de la página de gráficos básicos1
Serial.write (0x00); // direcciónL de gráficos básicos pabe1
Serial.write (0x00); // Hacer arco CMD
Serial.write (0x0B); // Hacer arco CMD
Serial.write (0x00); // el número del arco
Serial.write (0x01); // El número del arco.
Serial.write (0x00); // colorH negro
Serial.write (0x00); // colorL en blanco
Serial.write (0x01); // centro del círculo XH
Serial.write (0x2c); // centro del círculo XL
Serial.write (0x00); // centro del círculo YH
Serial.write (0xc8); // centro del círculo YL
Serial.write (0x00); // RH
Serial.write (0x50); // RL.
Serial.write (0x02); // Ángulo1H
Serial.write (0x76); // Ángulo1L
Serial.write (0x00); // Ángulo2H
Serial.write (0x5A); // Angle2L
//llenar--
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // direcciónH de la página de gráficos básicos2
Serial.write (0x00); // direcciónL de gráficos básicos pabe2
Serial.write (0x00); // Hacer CMD de relleno de rectángulo
Serial.write (0x04); // Hacer CMD de relleno de rectángulo
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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); // Color amarilloH
Serial.write (0x60); // Color amarilloL
}
// ————————————– El amarillo y el arco es el final —————————————–
// ————————————– El verde y el rectángulo comienzan —————————————–
if (iNum == 3) {// rectángulo! ¡y verde!
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x10); // direcciónH de la página de gráficos básicos1
Serial.write (0x00); // direcciónL de gráficos básicos pabe1
Serial.write (0x00); // Hacer CMD rectangular
Serial.write (0x03); // Hacer CMD rectangular
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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 negro
Serial.write (0x00); // colorL en blanco
//llenar--
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // direcciónH de la página de gráficos básicos2
Serial.write (0x00); // direcciónL de gráficos básicos pabe2
Serial.write (0x00); // Hacer CMD de relleno de rectángulo
Serial.write (0x04); // Hacer CMD de relleno de rectángulo
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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); // Color verde H
Serial.write (0x60); // Color verdeL
}
// ————————————– El verde y el rectángulo es el final —————————————–
// ————————————– La naranja y el cuadrado comienzan —————————————–
if (iNum == 4) {// ¡cuadrado! y naranja!
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x10); // direcciónH de la página de gráficos básicos1
Serial.write (0x00); // direcciónL de gráficos básicos pabe1
Serial.write (0x00); // Hacer CMD rectangular
Serial.write (0x03); // Hacer CMD rectangular
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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 negro
Serial.write (0x00); // colorL en blanco
//llenar--
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // direcciónH de la página de gráficos básicos2
Serial.write (0x00); // direcciónL de gráficos básicos pabe2
Serial.write (0x00); // Hacer CMD de relleno de rectángulo
Serial.write (0x04); // Hacer CMD de relleno de rectángulo
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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); // color naranjaH
Serial.write (0x60); // color naranjaL
}
// ————————————– La naranja y el cuadrado son el final —————————————–
// ————————————– El azul y el círculo comienzan —————————————–
if (iNum == 5) {// ¡círculo! ¡y azul!
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x0F);
Serial.write (0x82);
Serial.write (0x10); // direcciónH de la página de gráficos básicos1
Serial.write (0x00); // direcciónL de gráficos básicos pabe1
Serial.write (0x00); // Hacer un círculo CMD
Serial.write (0x05); // Hacer un círculo CMD
Serial.write (0x00); // el número del círculo
Serial.write (0x01); // El número del círculo
Serial.write (0x01); // centro del círculo XH
Serial.write (0xD6); // centro del círculo XL
Serial.write (0x00); // centro del círculo YH
Serial.write (0xc8); // centro del círculo YL
Serial.write (0x00); // RH
Serial.write (0x32); // RL.
Serial.write (0x00); // colorH negro
Serial.write (0x00); // colorL en blanco
//llenar--
Serial.write (0xA5); // ”A5 ″ es 165
Serial.write (0x5A); // "5A" es 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // direcciónH de la página de gráficos básicos2
Serial.write (0x00); // direcciónL de gráficos básicos pabe2
Serial.write (0x00); // Hacer CMD de relleno de rectángulo
Serial.write (0x04); // Hacer CMD de relleno de rectángulo
Serial.write (0x00); // el número del rectángulo
Serial.write (0x01); // El número del rectángulo
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); // color azul H
Serial.write (0xFF); // color azulL
}
// ————————————– El azul y el círculo es el final —————————————–
Finalmente, depuración en línea.
STONE TOOLBox (software de diseño GUI) editará la descarga del archivo de pantalla, la carga del archivo de código arduino, conectará la fuente de alimentación, la comunicación, se encenderá para observar el dibujo de la imagen y el cambio de color, para lograr el efecto deseado.
El código que se muestra en el video es el siguiente.
(intentos de sintonización en línea)
Fuente: Platón Data Intelligence