Arduino с сенсорным дисплеем: 16 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

Хотели бы вы создать более персонализированные меню и лучший человеко-машинный интерфейс? Для таких проектов вы можете использовать Arduino и сенсорный экран. Звучит ли эта идея заманчиво? Если да, посмотрите видео сегодня, где я покажу вам сборку с Mega Arduino и сенсорным дисплеем. Вы узнаете, как создавать желаемые рисунки на экране, а также как определять область экрана, к которой нужно прикоснуться, и активировать определенную команду. Подчеркну, что я выбрал Arduino Mega из-за количества контактов.

Итак, сегодня я познакомлю вас с дисплеем Touch Screen, его графическими функциями и способами захвата точки касания на экране. Давайте также создадим пример, содержащий все элементы, такие как позиционирование, письмо, создание форм, цветов и прикосновение.

Шаг 1: Arduino Mega 2560

Шаг 2. Экран TFT LCD 2,4 дюйма

У этого дисплея, который мы используем в нашем проекте, есть интересная особенность: у него есть SD-карта. Однако запись и чтение, связанные с этим, будут показаны в другом видео, которое я скоро сделаю. Цель сегодняшнего урока - конкретно рассмотреть возможности графического и сенсорного экрана этого дисплея.

Характеристики:

Размер экрана: 2,4 дюйма

Слот для карты MicroSD

Цветной ЖК-дисплей: 65K

Драйвер: ILI9325

Разрешение: 240 х 320

Сенсорный экран: 4-проводный резистивный сенсорный экран

Интерфейс: 8-битные данные плюс 4 линии управления

Рабочее напряжение: 3,3-5 В

Размеры: 71 х 52 х 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 + на Analog1 #define XM A2 // X- на Analog2 #define YM 7 // Y- на Digital7 #define XP 6 // X + находится на Digital6 // объект для управления событиями на экране TouchScreen ts = TouchScreen (XP, YP, XM, YM); void setup () {Serial.begin (9600); } void loop () {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

Функция drawPixel отвечает за рисование одной точки на экране в данной точке.

void drawPixel (int16_t x, int16_t и цвет uint16_t);

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

Функция drawTriangle отвечает за рисование треугольника на экране, проходящего через точки трех вершин.

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

Функция 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

Функция 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 отвечает за заливку экрана одним цветом.

void 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 // responseável pela parte gráfica

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

#include // comunicação com o display

#include // comunicação com o display

#include "math.h" // калькулярная потенция

Шаг 7: Определяет

Мы определим некоторые макросы для контактов, а также важные значения, которые мы будем использовать.

// Portas de leitura das coordenadas do touch # define 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 // положение текстов обратной связи #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_X10 10 #define МАКСИМАЛЬНОЕ ДАВЛЕНИЕ 1000

Продолжим определение некоторых макросов.

// Связь с одним ядром и соответствующими значениями #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação circuit_doradius const 30; const int circle_x = 240; const int circle_y = 125; // объект для управления событиями на экране TouchScreen ts = TouchScreen (XP, YP, XM, YM); // объект для работы с графической частью SWTFT tft;

Шаг 8: настройка

В настройке мы инициализируем наш объект графического управления и сделаем первые настройки.

void setup () {Serial.begin (9600); // сброс объекта из графической библиотеки tft.reset (); // инициализация объекта управления из графической библиотеки tft.begin (); задержка (500); // вращение тела для ландшафта tft.setRotation (1); // добавить тело до tft.fillScreen (BLACK); // используется для начальных настроек initialSettings (); }

Шаг 9: цикл

В цикле мы выберем точку, в которой мы касаемся экрана, и посмотрим, произошло ли касание на одной из фигур.

void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, ВЫХОД); // mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado a tela para ландшафта неявно X получателя или mapeamento де Y TSPoint p; p.x = карта (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = карта (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // проверяем, что давление не было достаточным if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// проверяем, чтобы не было повторного ввода if (pointInRect (p)) {writeShape ("Rect"); } // проверка отсутствия треугольника else if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Triangle"); } // проверяем, нет ли схемы else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Шаг 10: проверьте, касаемся ли мы круга

На этом этапе мы занимаемся инициализацией экрана и определяем цвета отображаемых текстов.

/ * Desenha na tela os elementos * / void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println («ДОСТУП»); tft.setTextColor (ЖЕЛТЫЙ); tft.setTextSize (TEXT_SIZE_M); tft.println («БЛОГ MEU»); tft.setTextColor (ЗЕЛЕНЫЙ); tft.setTextSize (TEXT_SIZE_L); tft.println («ФЕРНАНДОК. КОМ»); createRect (); createTriangle (); createCircle (); tft.setCursor (FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor (CYAN); tft.setTextSize (TEXT_SIZE_L); tft.println ("ФОРМА:"); }

Шаг 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 vertices: // A = (110, 150); В = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, ЖЕЛТЫЙ); tft.drawTriangle (110, 150, 150, 100, 190, 150, БЕЛЫЙ); } // cria um circuitlo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, ЗЕЛЕНЫЙ); 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) {вернуть истину; }} return false; }

Шаг 13: проверьте, касаемся ли мы круга

Это то же самое, что и с кругом.

// distancia entre pontos D = raiz ((xb-xa) ^ 2 + (yb-ya) ^ 2) // vefifica se o ponto está dentro do Cirlo // se a distancia do ponto pra origem do circuitlo для menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); если (расстояние <= радиус_круга) {вернуть истину; } return false; }

Шаг 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 = треугольникArea (a, b, c); float ACP = TriangleArea (a, c, p); float ABP = TriangleArea (a, b, p); float CPB = треугольникArea (c, p, b); если (ABC == ACP + ABP + CPB) {вернуть истину; } return false; } // Функция вычисления площади треугольника на основе элементов x, y с плавающей точкой треугольникаArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax) * (cy - ay) - (cx - ах) * (by - ау)) / 2); }

Шаг 15: функция печати имени затронутого объекта

Здесь мы пишем на экране название используемой геометрической фигуры.

// получить на теле или номе из геометрических фигур, которые используются для записи writeShape (форма строки) {tft.fillRect (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, ЧЕРНЫЙ); tft.setCursor (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize (TEXT_SIZE_G); tft.setTextColor (БЕЛЫЙ); tft.println (форма); }

Шаг 16: файлы

Загрузите файлы:

Я НЕТ

PDF