ארדואינו עם תצוגת מסך מגע: 16 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:16

האם תרצה ליצור תפריטים מותאמים אישית יותר וממשקי אדם/מכונה טובים יותר? לפרויקטים כאלה, ניתן להשתמש בארדואינו ובמסך מגע. האם הרעיון הזה נשמע מפתה? אם כן, בדוק את הסרטון עוד היום, שם אראה לך מכלול עם מגה ארדואינו ותצוגת מסך מגע. תוכלו לראות כיצד לבצע את העיצובים הרצויים על המסך, וגם כיצד לקבוע את אזור המסך לגעת בו ולהפעיל פקודה ספציפית. אני מדגיש שבחרתי להשתמש ב- Arduino Mega בשל כמות הסיכות שלו.

אז היום, אציג בפניכם את תצוגת מסך המגע, הפונקציות הגרפיות שלו וכיצד לתפוס את נקודת המגע במסך. בואו ניצור גם דוגמה המכילה את כל האלמנטים, כגון מיקום, כתיבה, עיצוב צורות, צבעים ומגע.

שלב 1: Arduino Mega 2560

שלב 2: מגן TFT LCD 2.4 אינץ '

לתצוגה זו בה אנו משתמשים בפרויקט שלנו יש תכונה מעניינת: יש לה כרטיס SD. עם זאת, הכתיבה והקריאה הכרוכים בכך יוצגו בסרטון אחר, שאפיק בקרוב. מטרת השיעור של היום היא להתייחס באופן ספציפי לתכונות הגרפיקה ומסך המגע של תצוגה זו.

מאפיינים:

ממדי מסך: 2.4 אינץ '

חריץ לכרטיס MicroSD

צבע LCD: 65K

נהג: ILI9325

רזולוציה: 240 x 320

מסך מגע: מסך מגע עמיד בעל 4 חוטים

ממשק: 8 סיביות נתונים, בתוספת 4 קווי בקרה

מתח הפעלה: 3.3-5V

מידות: 71 x 52 x 7 מ מ

שלב 3: ספריות

הוסף את הספריות:

"Adafruit_GFX"

"SWTFT"

"מסך מגע"

לחצו על הקישורים והורידו את הספריות.

פתח את הקובץ והדבק אותו בתיקיית הספריות של Arduino IDE.

C: / קבצי תוכנה (x86) / Arduino / ספריות

הערה

לפני שנתחיל בתוכנית שלנו, עלינו להתייחס למשהו חשוב: כיול ה- TOUCH.

בעזרת תוכנית פשוטה כדי לקבל את נקודות המגע בתצוגה, אחסן את ערך הנקודות (x, y) בכל קצה (מודגש בצהוב באיור שלהלן). ערכים אלה חשובים למיפוי המגע לנקודות הגרפיות במסך.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ is on Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X+ נמצא ב- Digital6 // objeto para manipulacao dos events of dequeque on tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); הגדרת void () {Serial.begin (9600); } לולאת חלל () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) Serial.print ("X:"); Serial.println (touchPoint.x); Serial.print ("Y:"); Serial.println (touchPoint.y); עיכוב (1000); }

שלב 4: פונקציות

עכשיו בואו נסתכל על כמה פונקציות גרפיות שהספריות יכולות להציע לנו.

1. צייר פיקסל

הפונקציה drawPixel אחראית על ציור נקודה אחת על המסך בנקודה הנתונה.

void drawPixel (int16_t x, int16_t ו-, uint16_t color);

2. drawline

הפונקציה drawLine אחראית על ציור קו משתי נקודות.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. drawFastVLine

הפונקציה drawFastVLine אחראית על ציור קו אנכי מנקודה וגובה.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t color);

4. drawFastHLine

הפונקציה drawFastHLine אחראית על ציור קו אופקי מנקודה ורוחב.

void drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t color);

5. drawRect

הפונקציה drawRect אחראית על ציור מלבן על המסך, העברת נקודת מוצא, גובהו ורוחבו.

void drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

6. fillRect

הפונקציה fillRect זהה ל- drawRect, אך המלבן יתמלא בצבע הנתון.

void fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

7. drawRoundRect

הפונקציה drawRoundRect זהה ל- drawRect, אך למלבן יהיו קצוות מעוגלים.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);

8. fillRoundRect

הפונקציה fillRoundRect זהה ל- drawRoundRect, אך המלבן יתמלא בצבע הנתון.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);

9. צייר משולש

הפונקציה drawTriangle אחראית על ציור משולש על המסך, העברת הנקודה של 3 הקודקודים.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

10. מילוי משולש

הפונקציה fillTriangle זהה ל- drawTriangle, אך המשולש יתמלא בצבע הנתון.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

11. צייר מעגל

הפונקציה drawCircle אחראית על ציור מעגל מנקודת מקור ורדיוס.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. fillCircle

הפונקציה fillCircle זהה ל- drawCircle, אך העיגול יתמלא בצבע הנתון.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

13. fillScreen

הפונקציה fillScreen אחראית על מילוי המסך בצבע אחד.

חלל fillScreen (צבע uint16_t);

14. setCursor

הפונקציה setCursor אחראית על מיקום הסמן לכתיבה לנקודה נתונה.

void setCursor (int16_t x, int16_t y);

15. setTextColor

הפונקציה setTextColor אחראית על הקצאת צבע לטקסט שייכתב. יש לנו שתי דרכים להשתמש בו:

void setTextColor (uint16_t c); // מגדיר את צבע הכתיבה בלבד void setTextColor (uint16_t c, uint16_t bg); // הגדר את צבע הכתיבה ואת צבע הרקע

16. setTextSize

הפונקציה setTextSize אחראית על הקצאת גודל לטקסט שייכתב.

void setTextSize (uint8_t s);

17. setTextWrap

הפונקציה setTextWrap אחראית על שבירת הקו אם היא מגיעה לגבול המסך.

void setTextWrap (w בוליאני);

18. setRotation

הפונקציה setRotation אחראית על סיבוב המסך (נוף, דיוקן).

void setRotation (uint8_t r); // 0 (סטנדרטי), 1, 2, 3

שלב 5: דוגמה

ניצור תוכנית בה נשתמש ברוב המשאבים שהתצוגה מספקת לנו.

בואו נכתוב כמה מחרוזות בגדלים שונים, ניצור שלוש דמויות גיאומטריות ונאסוף עליהן את אירוע המגע, בכל פעם שנוגע באחת הדמויות, יהיה לנו משוב של שם הדמות ממש מתחתיהן.

שלב 6: ספריות

ראשית בואו נגדיר את הספריות שבהן נשתמש.

#include // responsável pela parte gráfica

#include // responsável por pegar os toques na tela

#כלול // comunicação com o display

#כלול // comunicação com o display

#כלול "מתמטיקה" // פוטנציאל מחשבון

שלב 7: מגדיר

נגדיר כמה פקודות מאקרו עבור הסיכות, וגם את הערכים החשובים בהם נשתמש.

// Portas de leitura das coordenadas do touch #הגדר YP A1 // Y+ #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X+ // valores encontrados através da calibração do touch // faça um código simples para imprimir os valores (x, y) a cada toque // então encontre os valores nas extremidades max/min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #define TS_MAXY 900 // tamanho dos textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 // posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200_de_FEEDBACK_DE_FEED_FEED_FEED_DAY_FEED_DE_FEED_FEED_DAY_FEED_FEED_DAY_DAY_DAY_DAY_DAY_FEED_DAY_DAY_DAY_DAY_DAY_DAY_DAY_DAY_DAY_DAY_DAY_DAY_DAY 10 #define MAXPRESSURE 1000

אנו ממשיכים בהגדרה של כמה פקודות מאקרו.

// Associa o nome das cores aos valores correspondentses #להגדיר BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação do circulius const; const int circle_x = 240; const int circle_y = 125; // objeto for manipulacao dos eventos de toque on tela ScreenScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

שלב 8: התקנה

בהתקנה, נאתחל את אובייקט הבקרה הגרפי שלנו ונעשה את התצורות הראשונות.

הגדרת void () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); עיכוב (500); // rotaciona a tela para נוף tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (BLACK); // chama a função para iniciariar nossas configurações initialSettings (); }

שלב 9: לולאה

בלולאה, נאסוף את הנקודה שבה נגע במסך, ונראה אם המגע התרחש באחת הדמויות.

לולאת void () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, OUTPUT); // mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado a tela para landscape implica no X receber o mapeamento de Y TSPoint p; p.x = map (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = map (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a pressão no toque foi suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica se tocou no retangulo if (pointInRect (p)) {writeShape ("Rect"); } // verifica se tocou no triangulo else if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("משולש"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("מעגל"); }}}

שלב 10: בדוק אם אנו נוגעים במעגל

בשלב זה אנו עוסקים באתחול המסך ומגדירים את צבעי הטקסטים המוצגים.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (צהוב); tft.setTextSize (TEXT_SIZE_M); tft.println ("בלוג MEU"); tft.setTextColor (ירוק); tft.setTextSize (TEXT_SIZE_L); tft.println ("FERNANDOK. COM"); createRect (); createTriangle (); createCircle (); tft.setCursor (FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor (CYAN); tft.setTextSize (TEXT_SIZE_L); tft.println ("SHAPE:"); }

שלב 11: פונקציות של יצירת צורות גיאומטריות

אנו יוצרים מלבן, משולש ומעגל עם המקורות שאנו קובעים.

// cria um retangulo com origem (x, y) = (10, 100) // width = 80 e height = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, לבן); } // cria um triangulo com os קודקודים: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, YELLOW); tft.drawTriangle (110, 150, 150, 100, 190, 150, WHITE); } // cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GREEN); tft.drawCircle (240, 125, 30, לבן); }

שלב 12: בדוק אם אנו נוגעים במלבן

פונקציה זו בודקת אם הנקודה נמצאת בתוך המלבן.

// Função que verifica se o ponto está dentro do retângulobool pointInRect (TSPoint p) {// max/min X do retangulo if (px> = 10 && px <= 90) {// max/min Y do retangulo if (py = 100) {החזר נכון; }} החזר שקר; }

שלב 13: בדוק אם אנו נוגעים במעגל

זה אותו הדבר כמו במעגל.

// distancia entre pontos D = raiz ((xb-xa)^2 + (yb-ya)^2) // vefifica se o ponto está dentro do circulo // se a distancia do ponto pra origem do circulo עבור menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {distance float = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if (מרחק <= circle_radius) {החזרה true; } החזר שקר; }

שלב 14: בדוק אם אנו נוגעים במשולש

אותה בדיקה של זו של הנקודה מתרחשת גם בתוך המשולש.

// Função que verifica se o ponto p esta dentro do triangulo ABC // Se estiver dentro retorna TRUE senão retorna FALSE bool pointInsideTriangle (TSPoint a, TSPoint b, TSPoint c, TSPoint p) {float ABC = triangleArea (a, b, c); צף ACP = triangleArea (a, c, p); צף ABP = משולש שטח (a, b, p); צף CPB = triangelArea (c, p, b); אם (ABC == ACP+ABP+CPB) {return true; } החזר שקר; } // Função que calcula a area de um triangulo com base nos pontos x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax)*(cy - ay) - (cx - ax) * (by - ay))/2); }

שלב 15: פונקציה להדפסת שם האובייקט בו נגע

כאן אנו כותבים על המסך את שמה של הדמות הגיאומטרית בה משתמשים.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (צורת מחרוזת) {tft.fillRect (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, BLACK); tft.setCursor (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize (TEXT_SIZE_G); tft.setTextColor (לבן); tft.println (צורה); }

שלב 16: קבצים

הורד את הקבצים:

INO

PDF