Le Contrôle graphique de base de l'écran série STONE, vous pouvez dessiner des lignes, des triangles, des polygones, des rectangles, des carrés, des cercles, des arcs, des couleurs de remplissage, couper et coller, etc.
La conception d'une machine d'apprentissage précoce utilisant l'écran tactile série STVI056WT-01, pour identifier les formes en regardant les images, reconnaître les mots en fonction des couleurs, et concevoir un format de divertissement pour déterminer les erreurs correctes, marquer ou passer le niveau, pour que les enfants apprennent à reconnaître les couleurs, à comprendre les formes de base et à apprendre les mots correspondants de manière détendue et ludique.
La présentation vidéo officielle ne donne pas l'effet réel du contrôle graphique de base, donc cette démo le complétera. Les instructions de dessin sont transmises par la communication entre le carte de contrôle arduino et par éboulis série STONEn.
De plus, cette note n'inclut pas le contenu fonctionnel complet du contrôle graphique de base, seules les fonctions utilisées dans l'utilisation de l'élaboration, les enregistrées sont testées sur la machine OK, vous pouvez directement télécharger la démo.
L'environnement matériel de la démonstration est illustré à la figure 1, à la figure 2 et à la figure 3.
STONE est officiellement livré avec 2 cartes, parmi lesquelles, la carrée est une carte de téléchargement USB et la longue est une carte de communication USB vers série (et une alimentation DC12V pour l'écran série).
(Figure 1 : Communication et connexion d'alimentation de l'écran série STONE) (Figure 2 : Schéma de connexion pour télécharger les fichiers de contrôle Basic Graphics à partir de l'écran STONE)
(Figure 3 : connexion TX, RX, GND entre la carte de communication d'écran série STONE et la carte de développement arduino)
(Figure 4 : zone de dessin de contrôle graphique de base et adresse variable et autres paramètres)
Après avoir sélectionné le contrôle Basicgraphics dans le menu Configuration des variables (D) de STONE TOOLBox (logiciel GUI Design) et défini la zone de dessin et les paramètres d'adresse de variable, l'instruction 0x82 est utilisée pour écrire dans l'adresse de mémoire variable définie (0x1000 est défini ici) Après avoir défini les paramètres de zone de dessin et d'adresse de variable, l'instruction 0x82 est utilisée pour écrire CMD + Data_pack_Num_Max + Data dans l'adresse de mémoire variable définie (0x1000 dans ce cas) pour terminer la mise en œuvre des fonctions de dessin. Le code de fonction spécifique est illustré à la figure 6, où il y a une instruction de dessin au trait 0x0002, en utilisant l'exemple suivant.
(Figure 5 : Format de commande de données de contrôle graphique de base)
(Figure 6 : Illustration des commandes de tracé de ligne et de rectangle pour le contrôle graphique de base)
Instruction de dessin au trait 0x0002, exemple d'utilisation.
Pour connecter une ligne noire des coordonnées (340, 200) aux coordonnées (585, 200), l'instruction est
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
Tracez trois lignes noires fermées dans un triangle avec trois sommets aux coordonnées (200, 200), (300, 200), (250, 100), et l'instruction est
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
Le 0x1000 ci-dessus est l'adresse variable du contrôle graphique de base, 0x0002 est le code d'instruction, 0x0001 et 0x0003 sont respectivement 1 ligne et 3 lignes, 0x0000 est le code couleur, la valeur 0000 est noir et la valeur ffff est blanc brillant. Autres coordonnées XY instantanées de chaque point.
Exemple de dessin d'un rectangle.
Coordonnées du sommet supérieur gauche du rectangle (340, 237), coordonnées du sommet inférieur droit (585, 340) de couleur noire, la commande est
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
Tracez simultanément deux rectangles (340, 237) – (585, 340), (324, 221) – (601, 356), la commande est
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
Le 0x1000 ci-dessus est l'adresse variable du contrôle graphique de base, 0x0003 est le code de commande du rectangle, 0x0001, 0x0002 sont 1 rectangle, 2 rectangles, 0x0000, 0xffff est le code de couleur, la valeur de 0000 est noire, la valeur de fffff est lumineuse blanche. Les autres sont les coordonnées XY du sommet supérieur gauche et du sommet inférieur droit de chaque rectangle.
(Figure 7 : commandes de remplissage de rectangle et de dessin de cercle pour le contrôle des graphiques de base)
Exemple de remplissage de rectangle.
La commande de remplissage du rectangle noir (470, 200) ~ (550 ,255) est
A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00
Exemple de dessin d'un cercle.
Le centre du cercle (470, 200), R = 50 noir, l'instruction est
A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00
Pour tracer deux cercles en même temps, centre A (470, 200) R=50 et centre B (256, 200) R=80, tous deux en noir, la commande est
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 : commande Arc pour le contrôle graphique de base)
La résolution de l'arc est de 0.5 degré, 360 degrés correspond à 720 et 0 degré est dans la direction verticale ascendante.
Exemple d'arc.
L'arc supérieur 315 degrés pour commencer – 45 degrés pour terminer, le centre du cercle (300, 200) R = 80, noir, la commande est
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
Concernant les couleurs.
0x0000 est noir 0xffff est blanc 0x00ff est bleu 0xf000 est rouge 0xfd60 est orange
0xff60 est jaune 0x2f60 est vert
(Figure 9 : paramètres et adresses de la planche à dessin de l'interface de forme de contrôle graphique de base)
(Figure 10 : Paramètres et adresses de la planche à dessin de l'interface de couleur de contrôle graphique de base)
Selon l'adresse variable, la commande pour remplir la couleur verte pour (10, 80) ~ (630, 400) est
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
Autres similitudes, voir le code du programme pour plus de détails.
Le code démontré dans la vidéo est le suivant.
/*
frank10
STONE et arduino COMM, les graphismes de base jouent au programme.
Allume une LED pendant une seconde, puis s'éteint pendant une seconde, à plusieurs reprises. La LED nous dit que le fonctionnement en douceur est correct !
L'échantillon a deux pages. La page1 est la forme, la page2 est la couleur !
Cet exemple de code se trouve dans le fichier de frank. 20210625
*/
// La broche 13 a une LED connectée sur la plupart des cartes Arduino.
// donne lui un nom:
led int = 13;
int iYePian = 0; //0x0020 pour Le numéro de YePian !
//int iGongLu = 0; //x0 pour le GongLu !
//int iLiuLiang = 0; //0x0160 pour le maintenant LiuLiang !
entier iJiao = 0; // 0x0260 pour le JieJuJiao !
int iGongLuEau = 0; //0x0280 pour The Water GongLu! la valeur est 0-50000 !
int iled = 1; //délai num.
int iLed2 = 1 ; //délai num. 50 ms font un point.
int iLed3 = 0 ; //délai num. 50 ms font un point.
int iLed4 = 0 ; //délai num. 50 ms font un point.
int iCurve0 = 0; //La valeur de courbe0. 50 ms font un point.
int iCurve1 = 0; //La valeur de courbe1,. 50 ms font un point.
int iFlag0 = 1 ; // Le drapeau de la courbe0 + ou -; .1 est en hausse, 0 est en baisse.
int iFlag1 = 1 ; // Le drapeau de la courbe1 + ou -; .1 est en hausse, 0 est en baisse.
entier iNum = 0 ; //lire dans char num.
entier iNum2 = 0 ; // lire dans le caractère num2 pour ShuiDianZhan !
//int iPower = 2; //statue clé 0x0009
//int iMode = 2; //statue clé 0x000A
int iPowerWater = 2; //statue clé 0x0039
// la routine de configuration s'exécute une fois lorsque vous appuyez sur reset:
void setup() {
// initialise la broche numérique en tant que sortie.
pinMode (led, SORTIE);
Serial.begin(115200); // Ouvrir la fonction de communication série et attendre que le port série s'ouvre
tandis que (!Série) {
; // attend que le port série se connecte. Nécessaire pour Leonardo seulement
}
}
// la routine de boucle s'exécute encore et encore pour toujours:
boucle vide () {
int inChar ;
/*——————————————————————————-*/
si (iLed == 800) {
//——- lire la valeur 0x0039———-
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write(0x04); //longueur
Serial.write (0x83); // lire!
Serial.write(0x00); // adresse de la clé d'alimentation ShuiDianZhan !
Serial.write (0x39); // adresse de la clé d'alimentation ShuiDianZhan !
Serial.write(0x01); // 0x0039 (touche d'alimentation)
//———La valeur de retour de PIERRE sera "A5 5A 06 83 00 39 01 00 01"——
}
// Lecture des informations envoyées par le port série :
if (Serial.available() > 0) { inChar = Serial.read(); }
/*
enregistrer un bak.
car peut avoir une clé de lecture et avoir un travail de clé.
le programme est une IHM qu'une touche d'entrée fait un travail de péplos.
*/
//————————————————————————————
//—————————-0x0039 début de lecture de la clé———————————–
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 ;
si(iPowerWater != 1){
iPowerWater = 1 ; //allumer!
iJiao = 0 ;
iGongLuEau = 0 ;
}
}
if ((inChar == 0x02)&&(iNum2 == 3)) {
iNum2 = 0 ;
iPowerWater = 2 ; //éteindre!
}
//—————— 0x0039 clé lecture ok! iPowerWater ok!—————————-
//————————————————————————————
délai (1);
LED += 1 ;
iLed2 += 1 ; // 50ms font un point.
//———————————————————————————————–
//———————————50ms faire un point commence————————————–
si (iLed2 == 50) {
iLed2 = 1 ;
iLed4 += 1 ; // 50ms font un point.
si(iFlag0 == 1){
iCourbe0 += 1 ; // 50ms font un point.
if(iCurve0 >= 150){
iFlag0 = 0 ; // L'iCurve0 baisse !.
}
}
si(iFlag0 == 0){
iCourbe0 -= 1 ; // 50ms font un point.
if(iCurve0 <= 1){
iFlag0 = 1 ; // L'iCurve0 s'affiche !.
}
}
si(iFlag1 == 1){
if(iLed4 >= 3){
iCourbe1 += 1 ; // 50ms font un point.
iLed4 = 0 ;
}
if(iCurve1 >= 50){
iFlag1 = 0 ; // L'iCurve1 baisse !.
}
}
si(iFlag1 == 0){
if(iLed4 >= 3){
iLed4 = 0 ;
iCourbe1 -= 1 ; // 50ms font un point.
}
if(iCurve1 <= 1){
iFlag1 = 1 ; // L'iCurve1 s'affiche !.
}
}
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x06);
Serial.write (0x84); //écrire dans la courbe !
Serial.write(0x03); // Le chemin de la courbe,
Serial.write(iCurve0) ; // N=1,
Serial.write (0x00);
Serial.write(iCurve1) ;
Serial.write (0x00);
}
//——————————-50ms faire le point fin—————————————
//———————————————————————————————-
si (iLed == 500) {
digitalWrite (led, HAUT); // allume la LED (HIGH est le niveau de tension)
//délai (500); // attendez une seconde, Plage : 200-2000
}
si (iLed >= 1000) {
digitalWrite(led, LOW); // éteint la LED en rendant la tension FAIBLE
//délai (500); // attend une seconde, plage : 200-2000
iLed = 1 ;
si( iNum <= 6 ) iNum += 1; //tour de forme !
si( iNum == 6 ) iNum = 0; //tour de forme !
//————————————–Le rouge est commencer—————————————–
if( iNum == 1){ // triangle ! Et rouge!
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x19);
Serial.write (0x82);
Serial.write(0x10); // adresseH des graphiques de base
Serial.write(0x00); // adresseL des graphiques de base
Serial.write(0x00); // Faire la ligne CMD
Serial.write(0x02); // Faire la ligne CMD
Serial.write(0x00); // le numéro de la ligne
Serial.write(0x03); // Le numéro de la ligne.
Serial.write(0x00); //couleurH noir
Serial.write(0x00); //couleurL
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
//remplir--
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // adresseH de la page graphique de base2
Serial.write(0x00); // adresseL des graphiques de base pabe2
Serial.write(0x00); // Remplir le rectangle CMD
Serial.write(0x04); // Remplir le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // Couleur rougeH
Serial.write(0x00); // Couleur rougeL
}
//————————————–Le rouge est fin—————————————–
//————————————–Le jaune et l'arc commence——————————————–
if( iNum == 2){ // arc! et jaune !
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x13);
Serial.write (0x82);
Serial.write (0x10); // adresseH de la page graphique de base1
Serial.write(0x00); // adresseL des graphiques de base pabe1
Serial.write(0x00); // Faire l'arc CMD
Serial.write(0x0B); // Faire l'arc CMD
Serial.write(0x00); // le numéro de l'arc
Serial.write(0x01); // Le numéro de l'arc.
Serial.write(0x00); // couleurH noir
Serial.write(0x00); // couleurL vide
Serial.write(0x01); // centre du cercle XH
Serial.write(0x2c); // centre du cercle XL
Serial.write(0x00); // centre du cercle YH
Serial.write(0xc8) ; // centre du cercle YL
Serial.write(0x00); // HR
Serial.write (0x50); // RL.
Serial.write(0x02); // Angle1H
Serial.write (0x76); // Angle1L
Serial.write(0x00); // Angle2H
Serial.write (0x5A); // Angle2L
//remplir--
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // adresseH de la page graphique de base2
Serial.write(0x00); // adresseL des graphiques de base pabe2
Serial.write(0x00); // Remplir le rectangle CMD
Serial.write(0x04); // Remplir le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // Couleur jauneH
Serial.write (0x60); // Couleur jauneL
}
//————————————–Le jaune et l'arc est fin——————————————–
//————————————–Le vert et le rectangle commence——————————————–
if( iNum == 3){ // rectangle ! et vert !
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x10); // adresseH de la page graphique de base1
Serial.write(0x00); // adresseL des graphiques de base pabe1
Serial.write(0x00); // Faire le rectangle CMD
Serial.write(0x03); // Faire le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // couleurH noir
Serial.write(0x00); // couleurL vide
//remplir--
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // adresseH de la page graphique de base2
Serial.write(0x00); // adresseL des graphiques de base pabe2
Serial.write(0x00); // Remplir le rectangle CMD
Serial.write(0x04); // Remplir le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // Couleur verteH
Serial.write (0x60); // Couleur verteL
}
//————————————–Le vert et le rectangle est fin——————————————–
//————————————–L'orange et le carré commence——————————————–
if( iNum == 4){ // carré ! et oranges !
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x10); // adresseH de la page graphique de base1
Serial.write(0x00); // adresseL des graphiques de base pabe1
Serial.write(0x00); // Faire le rectangle CMD
Serial.write(0x03); // Faire le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // couleurH noir
Serial.write(0x00); // couleurL vide
//remplir--
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // adresseH de la page graphique de base2
Serial.write(0x00); // adresseL des graphiques de base pabe2
Serial.write(0x00); // Remplir le rectangle CMD
Serial.write(0x04); // Remplir le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // couleur orangeH
Serial.write (0x60); // couleur orangeL
}
//————————————–L'orange et le carré est fin——————————————–
//————————————–Le bleu et le cercle commence——————————————–
if( iNum == 5){ // cercle ! et bleu !
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Série.write(0x0F);
Serial.write (0x82);
Serial.write (0x10); // adresseH de la page graphique de base1
Serial.write(0x00); // adresseL des graphiques de base pabe1
Serial.write(0x00); // Encerclez CMD
Serial.write(0x05); // Encerclez CMD
Serial.write(0x00); // le numéro du cercle
Serial.write(0x01); // Le numéro du cercle
Serial.write(0x01); // centre du cercle XH
Serial.write (0xD6) ; // centre du cercle XL
Serial.write(0x00); // centre du cercle YH
Serial.write(0xc8) ; // centre du cercle YL
Serial.write(0x00); // HR
Serial.write (0x32); // RL.
Serial.write(0x00); // couleurH noir
Serial.write(0x00); // couleurL vide
//remplir--
Serial.write (0xA5) ; //"A5" vaut 165
Serial.write (0x5A); //"5A" vaut 90
Serial.write (0x11);
Serial.write (0x82);
Serial.write (0x60); // adresseH de la page graphique de base2
Serial.write(0x00); // adresseL des graphiques de base pabe2
Serial.write(0x00); // Remplir le rectangle CMD
Serial.write(0x04); // Remplir le rectangle CMD
Serial.write(0x00); // le numéro du rectangle
Serial.write(0x01); // Le numéro du 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); // couleur bleueH
Serial.write(0xFF); // couleur bleueL
}
//————————————–Le bleu et le cercle est fin——————————————–
Enfin, le débogage en ligne.
STONE TOOLBox (logiciel GUI Design) modifiera le téléchargement du fichier d'écran, le téléchargement du fichier de code arduino, connectera l'alimentation, la communication, la mise sous tension pour observer le dessin de l'image et le changement de couleur, pour obtenir l'effet souhaité.
Le code démontré dans la vidéo est le suivant.
(tentatives de réglage en ligne)
Source : Platon Data Intelligence