Com o Controle gráfico básico da tela serial STONE, você pode desenhar linhas, triângulos, polígonos, retângulos, quadrados, círculos, arcos, cores de preenchimento, recortar e colar, e assim por diante.
O projeto de uma máquina de aprendizagem precoce usando a tela de toque serial STVI056WT-01, para identificar formas olhando as imagens, para reconhecer palavras de acordo com as cores e para projetar um formato de entretenimento para determinar os erros corretos, pontuar ou passar de nível, para que as crianças aprendam a reconhecer cores, compreender formas básicas e aprender as palavras correspondentes de uma forma descontraída e lúdica.
A apresentação oficial do vídeo não oferece o efeito real do controle gráfico básico, portanto, esta demonstração o complementará. As instruções de desenho são transmitidas através da comunicação entre as placa de controle arduino e os votos de STONE scree serialn.
Além disso, esta nota não inclui o conteúdo funcional completo do controle gráfico básico, apenas as funções utilizadas no uso da elaboração, os gravados são testados na máquina OK, você pode baixar diretamente o demo run.
O ambiente de hardware para a demonstração é mostrado na Figura 1, Figura 2 e Figura 3.
O STONE vem oficialmente com 2 placas, entre as quais, a quadrada é uma placa de download USB e a longa é uma placa de comunicação USB para serial (e fonte de alimentação DC12V para a tela serial).
(Figura 1: Comunicação e conexão de energia da tela serial STONE) (Figura 2: Diagrama de conexão para baixar arquivos de controle de gráficos básicos da tela STONE)
(Figura 3: conexão TX, RX, GND entre a placa de comunicação de tela serial STONE e a placa de desenvolvimento Arduino)
(Figura 4: Área de desenho de controle gráfico básico e endereço variável e outras configurações de parâmetro)
Depois de selecionar o controle Basicgraphics no menu STONE TOOLBox (software de design de GUI) Configuração de variável (D), e definir a área de desenho e os parâmetros de endereço variável, a instrução 0x82 é usada para escrever para o endereço de memória variável definido (0x1000 é definido aqui) Depois de definir a área de desenho e os parâmetros de endereço variável, a instrução 0x82 é usada para escrever CMD + Data_pack_Num_Max + Data no endereço de memória variável definido (0x1000 neste caso) para completar a implementação das funções de desenho. O código de função específico é mostrado na Figura 6, onde há uma instrução de desenho de linha 0x0002, usando o exemplo a seguir.
(Figura 5: Formato de comando de dados de controle de gráficos básicos)
(Figura 6: Ilustração dos comandos de desenho de linha e retângulo para controle gráfico básico)
Instrução de desenho de linha 0x0002, exemplo de uso.
Para conectar uma linha preta das coordenadas (340, 200) às coordenadas (585, 200), a instrução é
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
Desenhe três linhas pretas fechadas em um triângulo com três vértices nas coordenadas (200, 200), (300, 200), (250, 100), e a instrução é
A5 5A 19 82 10 00 00 02 00 03 00 00 00 00 8 C00 8 C01 2 00C 8 C00 00 FA 64 00 8 C00 8 CXNUMX
O 0x1000 acima é o endereço variável do controle gráfico básico, 0x0002 é o código de instrução, 0x0001 e 0x0003 são 1 linha e 3 linhas respectivamente, 0x0000 é o código de cor, o valor 0000 é preto e o valor ffff é branco brilhante. Outras coordenadas XY instantâneas de cada ponto.
Exemplo de desenho de um retângulo.
Coordenadas do vértice superior esquerdo do retângulo (340, 237), coordenadas do vértice inferior direito (585, 340) cor preta, o comando é
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
Desenhe simultaneamente dois retângulos (340, 237) - (585, 340), (324, 221) - (601, 356), o comando é
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
O 0x1000 acima é o endereço variável do controle gráfico básico, 0x0003 é o código de comando do retângulo, 0x0001, 0x0002 são 1 retângulo, 2 retângulos, 0x0000, 0xffff é o código de cor, o valor de 0000 é preto, o valor de fffff é brilhante Branco. As outras são as coordenadas XY do vértice superior esquerdo e do vértice inferior direito de cada retângulo.
(Figura 7: Preenchimento de retângulo e comandos de desenho de círculo para controle de gráficos básicos)
Exemplo de preenchimento de retângulo.
O comando de preenchimento de retângulo preto (470, 200) ~ (550, 255) é
A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00
Exemplo de desenho de um círculo.
O centro do círculo (470, 200), R = 50 preto, a instrução é
A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00
Para desenhar dois círculos ao mesmo tempo, centro A (470, 200) R = 50 e centro B (256, 200) R = 80, ambos em preto, o comando é
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 de arco para controle gráfico básico)
A resolução do arco é de 0.5 graus, 360 graus corresponde a 720 e 0 graus é na direção vertical para cima.
Exemplo de arco.
O arco superior 315 graus para começar - 45 graus para terminar, o centro do círculo (300, 200) R = 80, preto, o comando é
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
Em relação às cores.
0x0000 é preto 0xffff é branco 0x00ff é azul 0xf000 é vermelho 0xfd60 é laranja
0xff60 é amarelo 0x2f60 é verde
(Figura 9: Parâmetros e endereços da placa de desenho da interface de forma de controle gráfico básico)
(Figura 10: Parâmetros de prancheta e endereços da interface de cores de controle de gráficos básicos)
De acordo com o endereço da variável, o comando para preencher a cor verde para (10, 80) ~ (630, 400) é
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
Outras semelhanças, consulte o código do programa para obter detalhes.
O código demonstrado no vídeo é o seguinte.
/*
frank10
STONE e arduino COMM, os gráficos básicos tocam no programa.
Acende um LED por um segundo e depois apaga por um segundo, repetidamente. O LED informa que o funcionamento suave está bom!
O exemplo tem duas páginas. A página1 é forma, a página2 é corlor!
Este código de exemplo está no arquivo de frank. 20210625
*/
// O pino 13 tem um LED conectado na maioria das placas Arduino.
// dê um nome a ele:
led int = 13;
int iYePian = 0; // 0x0020 para o número de YePian!
// int iGongLu = 0; // 0x0180 para o GongLu!
// int iLiuLiang = 0; // 0x0160 para o agora LiuLiang!
int iJiao = 0; // 0x0260 para The JieJuJiao!
int iGongLuWater = 0; // 0x0280 para The Water GongLu! o valor é 0-50000!
int iLed = 1; // tempo de retardo num.
int iLed2 = 1; // tempo de retardo num. 50ms fazem um ponto.
int iLed3 = 0; // tempo de retardo num. 50ms fazem um ponto.
int iLed4 = 0; // tempo de retardo num. 50ms fazem um ponto.
int iCurve0 = 0; // O valor da curve0. 50ms fazem um ponto.
int iCurve1 = 0; // O valor de curve1 ,. 50ms fazem um ponto.
int iFlag0 = 1; // A bandeira da curva0 + ou -; .1 é para cima, 0 é para baixo.
int iFlag1 = 1; // A bandeira da curva1 + ou -; .1 é para cima, 0 é para baixo.
int iNum = 0; // ler em char num.
int iNum2 = 0; // ler em char num2 para ShuiDianZhan!
// int iPower = 2; // estátua chave 0x0009
// int iMode = 2; // estátua chave 0x000A
int iPowerWater = 2; // estátua chave 0x0039
// a rotina de configuração é executada uma vez quando você pressiona reset:
configuração nula () {
// inicializa o pino digital como uma saída.
pinMode (led, OUTPUT);
Serial.begin (115200); // Abra a função de comunicação serial e aguarde a porta serial abrir
while (! Serial) {
; // aguarde a conexão da porta serial. Necessário apenas para Leonardo
}
}
// a rotina de loop é executada indefinidamente:
loop vazio () {
int emChar;
/ * ——————————————————————————- * /
if (iLed == 800) {
// ——- leia o valor 0x0039 ———-
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x04); //comprimento
Serial.write (0x83); // leitura!
Serial.write (0x00); // endereço da chave de energia ShuiDianZhan!
Serial.write (0x39); // endereço da chave de força ShuiDianZhan!
Serial.write (0x01); // 0x0039 (tecla de alimentação)
// ——— O valor de retorno de PEDRA será “A5 5A 06 83 00 39 01 00 01“ ——
}
// Leia as informações enviadas pela porta serial:
if (Serial.available ()> 0) {inChar = Serial.read (); }
/*
salvar um bak.
porque pode ter uma chave de leitura e ter uma chave de trabalho.
o programa é um HMI que uma chave de entrada faz um trabalho de peplose.
*/
// ————————————————————————————
// —————————- 0x0039 key read start ———————————–
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; //ligar!
iJiao = 0;
iGongLuWater = 0;
}
}
if ((inChar == 0x02) && (iNum2 == 3)) {
iNum2 = 0;
iPowerWater = 2; //desligar!
}
// —————— chave 0x0039 lida ok! iPowerWater ok! —————————-
// ————————————————————————————
atraso (1);
iLed + = 1;
iLed2 + = 1; // 50ms fazem um ponto.
// ——————————————————————————————–
// ——————————— 50ms faz um ponto começar ————————————–
if (iLed2 == 50) {
iLed2 = 1;
iLed4 + = 1; // 50ms fazem um ponto.
if (iFlag0 == 1) {
iCurve0 + = 1; // 50ms fazem um ponto.
if (iCurve0> = 150) {
iFlag0 = 0; // O iCurve0 vira para baixo !.
}
}
if (iFlag0 == 0) {
iCurve0 - = 1; // 50ms fazem um ponto.
if (iCurve0 <= 1) {
iFlag0 = 1; // O iCurve0 aparece !.
}
}
if (iFlag1 == 1) {
if (iLed4> = 3) {
iCurve1 + = 1; // 50ms fazem um ponto.
iLed4 = 0;
}
if (iCurve1> = 50) {
iFlag1 = 0; // O iCurve1 vira para baixo !.
}
}
if (iFlag1 == 0) {
if (iLed4> = 3) {
iLed4 = 0;
iCurve1 - = 1; // 50ms fazem um ponto.
}
if (iCurve1 <= 1) {
iFlag1 = 1; // O iCurve1 aparece !.
}
}
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x06);
Serial.write (0x84); // escreva na curva!
Serial.write (0x03); // O caminho da curva,
Serial.write (iCurve0); // N = 1,
Serial.write (0x00);
Serial.write (iCurve1);
Serial.write (0x00);
}
// ——————————- 50ms fazem o ponto final —————————————
// ——————————————————————————————-
if (iLed == 500) {
digitalWrite (led, HIGH); // liga o LED (HIGH é o nível de tensão)
// atraso (500); // aguarde um segundo, Intervalo: 200-2000
}
if (iLed> = 1000) {
digitalWrite (led, BAIXO); // desligue o LED tornando a tensão BAIXA
// atraso (500); // aguarde um segundo, intervalo: 200-2000
iLed = 1;
if (iNum <= 6) iNum + = 1; // virar a forma!
if (iNum == 6) iNum = 0; // virar a forma!
// ————————————– O vermelho começa —————————————–
if (iNum == 1) {// triângulo! e vermelho!
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x19);
Serial.write (0x82);
Serial.write (0x10); // addressH de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos
Serial.write (0x00); // Do line CMD
Serial.write (0x02); // Do line CMD
Serial.write (0x00); // o número da linha
Serial.write (0x03); // O número da linha.
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
//preencher--
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // endereçoH da página 2 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe2
Serial.write (0x00); // Preencher retângulo CMD
Serial.write (0x04); // Preencher retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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); // Red colorH
Serial.write (0x00); // Red colorL
}
// ————————————– O vermelho é o fim —————————————–
// ————————————– O amarelo e o arco são iniciados ——————————————–
if (iNum == 2) {// arc! e amarelo!
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x13);
Serial.write (0x82);
Serial.write (0x10); // endereçoH da página 1 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe1
Serial.write (0x00); // Faça arco CMD
Serial.write (0x0B); // Faça arco CMD
Serial.write (0x00); // o número do arco
Serial.write (0x01); // O número do arco.
Serial.write (0x00); // colorH black
Serial.write (0x00); // colorL em branco
Serial.write (0x01); // centel do círculo XH
Serial.write (0x2c); // centel do círculo XL
Serial.write (0x00); // centel do círculo YH
Serial.write (0xc8); // centel do círculo 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
//preencher--
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // endereçoH da página 2 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe2
Serial.write (0x00); // Preencher retângulo CMD
Serial.write (0x04); // Preencher retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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); // Cor amarela H
Serial.write (0x60); // cor amarelaL
}
// ————————————– O amarelo e o arco são o fim ——————————————–
// ————————————– O verde e o retângulo são iniciados ——————————————–
if (iNum == 3) {// retângulo! e verde!
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x10); // endereçoH da página 1 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe1
Serial.write (0x00); // Faça retângulo CMD
Serial.write (0x03); // Faça retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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 black
Serial.write (0x00); // colorL em branco
//preencher--
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // endereçoH da página 2 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe2
Serial.write (0x00); // Preencher retângulo CMD
Serial.write (0x04); // Preencher retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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); // cor verde H
Serial.write (0x60); // cor verdeL
}
// ————————————– O verde e o retângulo são final ——————————————–
// ————————————– A laranja e o quadrado são iniciados —————————————–
if (iNum == 4) {// quadrado! e laranja!
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x10); // endereçoH da página 1 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe1
Serial.write (0x00); // Faça retângulo CMD
Serial.write (0x03); // Faça retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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 black
Serial.write (0x00); // colorL em branco
//preencher--
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // endereçoH da página 2 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe2
Serial.write (0x00); // Preencher retângulo CMD
Serial.write (0x04); // Preencher retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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); // cor laranja H
Serial.write (0x60); // cor laranjaL
}
// ————————————– A laranja e o quadrado são o fim ——————————————–
// ————————————– O azul e o círculo são iniciados ——————————————–
if (iNum == 5) {// círculo! e azul!
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x0F);
Serial.write (0x82);
Serial.write (0x10); // endereçoH da página 1 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe1
Serial.write (0x00); // Circular CMD
Serial.write (0x05); // Circular CMD
Serial.write (0x00); // o número do círculo
Serial.write (0x01); // O número do círculo
Serial.write (0x01); // centel do círculo XH
Serial.write (0xD6); // centel do círculo XL
Serial.write (0x00); // centel do círculo YH
Serial.write (0xc8); // centel do círculo YL
Serial.write (0x00); // RH
Serial.write (0x32); // RL.
Serial.write (0x00); // colorH black
Serial.write (0x00); // colorL em branco
//preencher--
Serial.write (0xA5); // ”A5 ″ é 165
Serial.write (0x5A); // ”5A” é 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // endereçoH da página 2 de gráficos básicos
Serial.write (0x00); // endereçoL de gráficos básicos pabe2
Serial.write (0x00); // Preencher retângulo CMD
Serial.write (0x04); // Preencher retângulo CMD
Serial.write (0x00); // o número do retângulo
Serial.write (0x01); // O número do retâ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); // cor azul H
Serial.write (0xFF); // cor azulL
}
// ————————————– O azul e o círculo são o fim —————————————–
Finalmente, depuração online.
STONE TOOLBox (software GUI Design) irá editar o download do arquivo de tela, upload do arquivo de código do arduino, conectar a fonte de alimentação, comunicação, ligar para observar o desenho da imagem e alterar a cor, para obter o efeito desejado.
O código demonstrado no vídeo é o seguinte.
(tentativas de sintonização online)
Fonte: Plato Data Intelligence