Usando il Controllo grafico di base dello schermo seriale STONE, puoi disegnare linee, triangoli, poligoni, rettangoli, quadrati, cerchi, archi, colori di riempimento, taglia e incolla e così via.
La progettazione di una macchina per l'apprendimento precoce che utilizza il touch screen seriale STVI056WT-01, per identificare le forme guardando le immagini, riconoscere le parole in base ai colori e progettare un formato di intrattenimento per determinare gli errori corretti, segnare o superare il livello, in modo che i bambini possano imparare a riconoscere i colori, comprendere le forme di base e imparare le parole corrispondenti in modo rilassato e giocoso.
La presentazione video ufficiale non fornisce l'effetto reale del controllo grafico di base, quindi questa demo lo integrerà. Le istruzioni per il disegno vengono trasmesse attraverso la comunicazione tra il scheda di controllo arduino e la STONE seriale screen.
Inoltre, questa nota non include il contenuto funzionale completo del controllo grafico di base, solo le funzioni utilizzate nell'uso dell'elaborazione, le registrate sono testate sulla macchina OK, puoi scaricare direttamente il run demo.
L'ambiente hardware per la demo è mostrato in Figura 1, Figura 2 e Figura 3.
STONE viene ufficialmente fornito con 2 schede, tra cui quella quadrata è una scheda di download USB e quella lunga è una scheda di comunicazione da USB a seriale (e alimentazione DC12V per lo schermo seriale).
(Figura 1: Collegamento di comunicazione e alimentazione dello schermo seriale STONE) (Figura 2: Schema di collegamento per il download dei file di controllo Basic Graphics dallo schermo STONE)
(Figura 3: connessione TX, RX, GND tra scheda di comunicazione schermo seriale STONE e scheda di sviluppo arduino)
(Figura 4: area di disegno del controllo grafico di base e indirizzo variabile e altre impostazioni dei parametri)
Dopo aver selezionato il controllo Basicgraphics nel menu STONE TOOLBox (software GUI Design) Configurazione variabile (D), e aver impostato l'area di disegno e i parametri dell'indirizzo variabile, l'istruzione 0x82 viene utilizzata per scrivere nell'indirizzo di memoria variabile impostato (0x1000 è impostato qui) Dopo aver impostato i parametri dell'area di disegno e dell'indirizzo variabile, l'istruzione 0x82 viene utilizzata per scrivere CMD + Data_pack_Num_Max + Data nell'indirizzo di memoria variabile impostato (0x1000 in questo caso) per completare l'implementazione delle funzioni di disegno. Il codice della funzione specifica è mostrato nella Figura 6, dove è presente un'istruzione di disegno al tratto 0x0002, utilizzando l'esempio seguente.
(Figura 5: formato dei comandi dei dati di controllo della grafica di base)
(Figura 6: Illustrazione dei comandi di linea e rettangolo di disegno per il controllo grafico di base)
Istruzione di disegno al tratto 0x0002, esempio di utilizzo.
Per collegare una linea nera dalle coordinate (340, 200) alle coordinate (585, 200), l'istruzione è
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
Disegna tre linee nere chiuse in un triangolo con tre vertici alle coordinate (200, 200), (300, 200), (250, 100) e l'istruzione è
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
Il precedente 0x1000 è l'indirizzo variabile del controllo grafico di base, 0x0002 è il codice dell'istruzione, 0x0001 e 0x0003 sono rispettivamente 1 riga e 3 righe, 0x0000 è il codice colore, il valore 0000 è nero e il valore ffff è bianco brillante. Altre coordinate XY istantanee di ciascun punto.
Esempio di disegno di un rettangolo.
Rettangolo coordinate vertice superiore sinistro (340, 237), coordinate vertice inferiore destro (585, 340) colore nero, il comando è
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
Disegna contemporaneamente due rettangoli (340, 237) – (585, 340), (324, 221) – (601, 356), il 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
Il precedente 0x1000 è l'indirizzo variabile del controllo grafico di base, 0x0003 è il codice di comando del rettangolo, 0x0001, 0x0002 sono 1 rettangolo, 2 rettangoli, 0x0000, 0xffff è il codice colore, il valore di 0000 è nero, il valore di fffff è luminoso bianco. Le altre sono le coordinate XY del vertice in alto a sinistra e in basso a destra di ogni rettangolo.
(Figura 7: comandi di riempimento rettangolo e disegno cerchio per il controllo grafico di base)
Esempio di riempimento rettangolo.
Il comando di riempimento del rettangolo nero (470, 200) ~ (550 ,255) è
A5 5A 11 82 10 00 00 04 00 01 01 RE6 00 DO8 02 26 00 FF 00 00 00
Esempio di disegno di un cerchio.
Il centro del cerchio (470, 200), R = 50 nero, l'istruzione è
LA5 5A 0F 82 10 00 00 05 00 01 01 RE6 00 DO8 00 32 00 00
Per disegnare due cerchi contemporaneamente, centro A (470, 200) R=50 e centro B (256, 200) R=80, entrambi in nero, il comando è
LA5 5LA 17 82 10 00 00 05 00 02 01 RE6 00 DO8 00 32 00 00 01 00 00 DO8 00 50 00 00
(Figura 8: comando Arc per il controllo grafico di base)
La risoluzione dell'arco è 0.5 gradi, 360 gradi corrisponde a 720 e 0 gradi è nella direzione verticale verso l'alto.
Esempio di arco.
L'arco superiore 315 gradi per iniziare – 45 gradi per finire, il centro del cerchio (300, 200) R = 80, nero, il comando è
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
A proposito di colori.
0x0000 è nero 0xffff è bianco 0x00ff è blu 0xf000 è rosso 0xfd60 è arancione
0xff60 è giallo 0x2f60 è verde
(Figura 9: Parametri e indirizzi del tavolo da disegno dell'interfaccia della forma di controllo della grafica di base)
(Figura 10: Parametri del tavolo da disegno e indirizzi dell'interfaccia colore del controllo grafico di base)
Secondo l'indirizzo variabile, il comando per riempire il colore verde per (10, 80) ~ (630, 400) è
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
Altre somiglianze, vedere il codice del programma per i dettagli.
Il codice mostrato nel video è il seguente.
/*
frank10
STONE e arduino COMM, la grafica Basic gioca a programma..
Accende un LED per un secondo, poi si spegne per un secondo, ripetutamente. Il LED ci dice che il soft funziona bene!
Il campione ha due pagine. La pagina1 è forma, la pagina2 è corlor!
Questo codice di esempio si trova nel file di frank. 20210625
*/
// Il pin 13 ha un LED collegato sulla maggior parte delle schede Arduino.
// Dagli un nome:
led int = 13;
int iYePian = 0; //0x0020 per Il numero di YePian!
//int iGongLu = 0; //0x0180 per il GongLu!
//int iLiuLiang = 0; /0x0160 per l'ora LiuLiang!
int iJiao = 0; // 0x0260 per il JieJuJiao!
int iGongLuWater = 0; //0x0280 per Il GongLu dell'Acqua! il valore è 0-50000!
int iLed = 1; //ritardo num.
int iLed2 = 1; //ritardo num. 50 ms fanno un punto.
int iLed3 = 0; //ritardo num. 50 ms fanno un punto.
int iLed4 = 0; //ritardo num. 50 ms fanno un punto.
int iCurve0 = 0; //Il valore di curve0. 50 ms fanno un punto.
int iCurve1 = 0; //Il valore di curva1,. 50 ms fanno un punto.
int iFlag0 = 1; // Il flag della curva0 + o -; .1 è su, 0 è giù.
int iFlag1 = 1; // Il flag della curva1 + o -; .1 è su, 0 è giù.
int iNum = 0 ; //legge il numero di caratteri.
int iNum2 = 0; //leggi in char num2 per ShuiDianZhan!
//int iPower = 2; //statua chiave 0x0009
//int iMode = 2; //statua chiave 0x000A
int iPowerWater = 2; //statua chiave 0x0039
// la routine di installazione viene eseguita una volta quando si preme reset:
void setup () {
// inizializza il pin digitale come uscita.
pinMode(led, USCITA);
Serial.begin(115200); // Apri la funzione di comunicazione seriale e attendi che la porta seriale si apra
mentre (!Serial) {
; // attendi che la porta seriale si connetta. Necessario solo per Leonardo
}
}
// la routine del ciclo viene eseguita più e più volte per sempre:
void loop () {
int inChar;
/*———————————————————————————-*/
if (iLed == 800) {
//——- legge il valore 0x0039———-
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x04); //lunghezza
Serial.write(0x83); // leggere!
Serial.write(0x00); // indirizzo del tasto di accensione ShuiDianZhan!
Serial.write(0x39); // indirizzo del tasto di accensione ShuiDianZhan!
Serial.write(0x01); // 0x0039 (tasto di accensione)
//———Il valore di ritorno STONE sarà “A5 5A 06 83 00 39 01 00 01 “——
}
// Legge le informazioni inviate dalla porta seriale:
if (Serial.available() > 0) { inChar = Serial.read(); }
/*
risparmia un pasticcio.
perché può avere una chiave di lettura e avere un lavoro di chiave.
il programma è un HMI che una chiave di input fa un lavoro di peplose.
*/
//—————————————————————————————
//—————————-0x0039 inizio lettura chiave———————————–
if (inChar == 0x39) { iNum2 = 1 ; }
if ((inChar == 0x01)&&(iNum2 == 1)) { iNum2 = 2 ; }
if ((inChar == 0x00)&&(iNum2 == 2)) { iNum2 = 3 ; }
if ((inChar == 0x01)&&(iNum2 == 3)) {
iNumero2 = 0 ;
se(iPowerWater != 1){
iPowerWater = 1 ; //accensione!
iJiao = 0;
iGongLuAcqua = 0 ;
}
}
if ((inChar == 0x02)&&(iNum2 == 3)) {
iNumero2 = 0 ;
iPowerWater = 2 ; //spegni!
}
//——————0x0039 chiave letta ok! iPowerWater ok!—————————-
//—————————————————————————————
ritardo (1);
iLed += 1;
iLed2 += 1; // 50 ms fanno un punto.
//————————————————————————————————–
//———————————50ms inizia un punto————————————–
se (iLed2 == 50) {
iLed2 = 1;
iLed4 += 1; // 50 ms fanno un punto.
se(iFlag0 == 1){
iCurve0 += 1; // 50 ms fanno un punto.
if(iCurve0 >= 150){
iFlag0 = 0; // L'iCurve0 si abbassa!.
}
}
se(iFlag0 == 0){
iCurve0 -= 1; // 50 ms fanno un punto.
if(iCurve0 <= 1){
iFlag0 = 1; // L'iCurve0 si presenta!.
}
}
se(iFlag1 == 1){
if(iLed4 >= 3){
iCurve1 += 1; // 50 ms fanno un punto.
iLed4 = 0;
}
if(iCurve1 >= 50){
iFlag1 = 0; // L'iCurve1 si abbassa!.
}
}
se(iFlag1 == 0){
if(iLed4 >= 3){
iLed4 = 0;
iCurve1 -= 1; // 50 ms fanno un punto.
}
if(iCurve1 <= 1){
iFlag1 = 1; // L'iCurve1 si presenta!.
}
}
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x06);
Serial.write(0x84); //scrivi sulla curva!
Serial.write(0x03); // Il percorso della curva,
Serial.write(iCurve0); //N=1,
Serial.write(0x00);
Serial.write(iCurve1);
Serial.write(0x00);
}
//———————————-50ms fa la fine del punto—————————————
//———————————————————————————————--
if (iLed == 500) {
digitalWrite(led, HIGH); // accendi il LED (HIGH è il livello di tensione)
//ritardo(500); // aspetta un secondo, intervallo: 200-2000
}
if (iLed >= 1000) {
digitalWrite(led, LOW); //spegnere il LED rendendo la tensione BASSA
//ritardo(500); // aspetta un secondo, range:200-2000
iLed = 1;
if( iNum <= 6 ) iNum += 1; //forma gira!
if( iNum == 6 ) iNum = 0; //forma gira!
//————————————–Il rosso è iniziare—————————————–
if( iNum == 1){ // triangolo! e rosso!
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x19);
Serial.write(0x82);
Serial.write(0x10); // indirizzoH della grafica di base
Serial.write(0x00); // indirizzoL della grafica di base
Serial.write(0x00); // Esegui la riga CMD
Serial.write(0x02); // Esegui la riga CMD
Serial.write(0x00); // il numero della linea
Serial.write(0x03); // Il numero della riga.
Serial.write(0x00); //coloreH nero
Serial.write(0x00); //coloreL
Serial.write(0x00); // puntoX1H
Serial.write(0xc8); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0xc8); // puntoY1L
Serial.write(0x01); // puntoX2H
Serial.write(0x2C); // puntoX2L.
Serial.write(0x00); // puntoY2H
Serial.write(0xC8); // puntoY2L
Serial.write(0x00); // puntoX3H
Serial.write(0xFA); // puntoX3L
Serial.write(0x00); // puntoY3H
Serial.write(0x64); // puntoY3L
Serial.write(0x00); // puntoX1H
Serial.write(0xc8); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0xc8); // puntoY1L
//riempire--
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // indirizzoH della pagina grafica di base2
Serial.write(0x00); // addressL della grafica di base pabe2
Serial.write(0x00); // Riempi rettangolo CMD
Serial.write(0x04); // Riempi rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x00); // puntoX1H
Serial.write(0x0A); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0x50); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x76); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x90); // puntoY2L
Serial.write(0xF0); // Colore rosso H
Serial.write(0x00); // Colore rossoL
}
//————————————–Il rosso è la fine—————————————–
//————————————–Il giallo e l'arco è iniziato—————————————–
if( iNum == 2){ // arco! e giallo!
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x13);
Serial.write(0x82);
Serial.write(0x10); // indirizzoH della pagina grafica di base1
Serial.write(0x00); // addressL della grafica di base pabe1
Serial.write(0x00); // Esegui l'arco CMD
Serial.write(0x0B); // Esegui l'arco CMD
Serial.write(0x00); // il numero dell'arco
Serial.write(0x01); // Il numero dell'arco.
Serial.write(0x00); // coloreH nero
Serial.write(0x00); // colorL vuoto
Serial.write(0x01); // centro del cerchio XH
Serial.write(0x2c); // centro del cerchio XL
Serial.write(0x00); // centro del cerchio YH
Serial.write(0xc8); // centro del cerchio YL
Serial.write(0x00); // RH
Serial.write(0x50); // RL.
Serial.write(0x02); // Angolo1H
Serial.write(0x76); // Angolo1L
Serial.write(0x00); // Angolo2H
Serial.write(0x5A); // Angolo2L
//riempire--
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // indirizzoH della pagina grafica di base2
Serial.write(0x00); // addressL della grafica di base pabe2
Serial.write(0x00); // Riempi rettangolo CMD
Serial.write(0x04); // Riempi rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x00); // puntoX1H
Serial.write(0x0A); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0x50); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x76); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x90); // puntoY2L
Serial.write(0xFF); // Colore gialloH
Serial.write(0x60); // Colore gialloL
}
//————————————–Il giallo e l'arco è finito—————————————–
//————————————–Il verde e il rettangolo iniziano—————————————–
if( iNum == 3){ // rettangolo! e verde!
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x10); // indirizzoH della pagina grafica di base1
Serial.write(0x00); // addressL della grafica di base pabe1
Serial.write(0x00); // Esegui il rettangolo CMD
Serial.write(0x03); // Esegui il rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x01); // puntoX1H
Serial.write(0x54); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0xED); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x49); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x54); // puntoY2L
Serial.write(0x00); // coloreH nero
Serial.write(0x00); // colorL vuoto
//riempire--
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // indirizzoH della pagina grafica di base2
Serial.write(0x00); // addressL della grafica di base pabe2
Serial.write(0x00); // Riempi rettangolo CMD
Serial.write(0x04); // Riempi rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x00); // puntoX1H
Serial.write(0x0A); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0x50); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x76); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x90); // puntoY2L
Serial.write(0x2F); // Colore verdeH
Serial.write(0x60); // Colore verdeL
}
//————————————–Il verde e il rettangolo sono finiti—————————————–
//————————————–L'arancione e il quadrato iniziano—————————————–
if( iNum == 4){ // quadrato! e arancione!
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x10); // indirizzoH della pagina grafica di base1
Serial.write(0x00); // addressL della grafica di base pabe1
Serial.write(0x00); // Esegui il rettangolo CMD
Serial.write(0x03); // Esegui il rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x01); // puntoX1H
Serial.write(0x54); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0x91); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x49); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x86); // puntoY2L
Serial.write(0x00); // coloreH nero
Serial.write(0x00); // colorL vuoto
//riempire--
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // indirizzoH della pagina grafica di base2
Serial.write(0x00); // addressL della grafica di base pabe2
Serial.write(0x00); // Riempi rettangolo CMD
Serial.write(0x04); // Riempi rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x00); // puntoX1H
Serial.write(0x0A); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0x50); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x76); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x90); // puntoY2L
Serial.write(0xFD); // colore arancioneH
Serial.write(0x60); // colore arancioneL
}
//————————————–L'arancione e il quadrato sono finiti—————————————–
//————————————–Il blu e il cerchio iniziano—————————————–
if( iNum == 5){ // cerchio! e blu!
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x0F);
Serial.write(0x82);
Serial.write(0x10); // indirizzoH della pagina grafica di base1
Serial.write(0x00); // addressL della grafica di base pabe1
Serial.write(0x00); // Fai un cerchio CMD
Serial.write(0x05); // Fai un cerchio CMD
Serial.write(0x00); // il numero del cerchio
Serial.write(0x01); // Il numero del cerchio
Serial.write(0x01); // centro del cerchio XH
Serial.write(0xD6); // centro del cerchio XL
Serial.write(0x00); // centro del cerchio YH
Serial.write(0xc8); // centro del cerchio YL
Serial.write(0x00); // RH
Serial.write(0x32); // RL.
Serial.write(0x00); // coloreH nero
Serial.write(0x00); // colorL vuoto
//riempire--
Serial.write(0xA5); //"A5" è 165
Serial.write(0x5A); //"5A" è 90
Serial.write(0x11);
Serial.write(0x82);
Serial.write(0x60); // indirizzoH della pagina grafica di base2
Serial.write(0x00); // addressL della grafica di base pabe2
Serial.write(0x00); // Riempi rettangolo CMD
Serial.write(0x04); // Riempi rettangolo CMD
Serial.write(0x00); // il numero del rettangolo
Serial.write(0x01); // Il numero del rettangolo
Serial.write(0x00); // puntoX1H
Serial.write(0x0A); // puntoX1L
Serial.write(0x00); // puntoY1H
Serial.write(0x50); // puntoY1L
Serial.write(0x02); // puntoX2H
Serial.write(0x76); // puntoX2L.
Serial.write(0x01); // puntoY2H
Serial.write(0x90); // puntoY2L
Serial.write(0x00); // colore bluH
Serial.write(0xFF); // colore bluL
}
//————————————–Il blu e il cerchio sono finiti—————————————–
Infine, il debug in linea.
STONE TOOLBox (software GUI Design) modificherà il download del file dello schermo, il caricamento del file del codice arduino, collegherà l'alimentazione, la comunicazione, l'accensione per osservare il disegno dell'immagine e il cambio di colore, per ottenere l'effetto desiderato.
Il codice mostrato nel video è il seguente.
(tentativi di sintonizzazione online)
Fonte: Plato Data Intelligence