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