BluBerriSix - Учебное пособие по TFT TouchScreen / Arduino: 12 шагов (с изображениями)

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

В 2019 году RIM Blackberry 850 исполняется 20 лет! Это маленькое канадское изобретение изменило способ общения в мире. Его давно нет, но его наследие продолжается!

В этом руководстве вы узнаете, как использовать экран MCUfriend.com 2,4 дюйма TFT для Uno / Mega. Вы узнаете, как отображать графические объекты и текст, а также как получать прикосновения и действовать в соответствии с событиями касания. Экран очень похож на Adafruit и другие TFT-экраны / экраны. Так что, если вы здесь, оставайтесь на шоу.

Мы создадим упрощенную версию моего скетча bluBerriSIX для двух приложений.

Давайте начнем!

Шаг 1. BluBerriSIX - Обзор

Приложение bluBerriSIX представляет собой проект TFT с шестью функциями.

Это включает в себя:

Фонарик

Дерзкое приложение '7' (как Magic '8' Ball)

Калькулятор

Приложение для измерения расстояния с использованием ультразвукового датчика расстояния SR-04

Приложение для измерения температуры и влажности, которое также в режиме реального времени регистрирует данные на расстоянии до 1,5 км с помощью трансивера HC-12.

Приложение для текстовых сообщений с использованием HC-12.

Этот проект занял 1100 строк кода. Мы создадим значительно более простую версию, которая по-прежнему демонстрирует концепции TFT-дисплея и сенсорного управления.

Шаг 2: Что нужно?

- Arduino Uno или Mega 2560

- Экран MCUfriend 2,4 дюйма TFT

Следующие библиотеки:

- Библиотека Adafruit_GFX

- Библиотека сенсорных экранов Adafruit

- Библиотека MCUFRIEND_kbv

Эти библиотеки можно установить с помощью Менеджера библиотек внутри Arduino IDE.

Чтобы загрузить библиотеку, перейдите в меню Sketch -> Include Library -> Manage Libraries…

В поле «Отфильтруйте поиск…» введите несколько первых символов имени библиотеки, а затем выберите и установите соответствующую библиотеку. Когда закончите, просто вернитесь за пределы этого экрана.

При установке экрана TFT на Uno / Mega БУДЬТЕ ОСТОРОЖНЫ, чтобы убедиться, что вы правильно выровняли контакты. Я сместил свой первый щит и зажарил его. Я потратил две недели на растущее разочарование, пытаясь найти правильные библиотеки, прежде чем понял, что экран мертв. БУДЬ ОСТОРОЖЕН

Шаг 3: наш проект

Мы построим более простую версию скетча bluBerriSIX.

Будет, - заставка

- экран главного меню с двумя кнопками

- приложение Saucy 7

- приложение для упрощенного ввода текста

Вы также сможете вернуться в главное меню, нажав значок «Домой» в нижнем левом углу этого экрана. Если у вас нет такого значка, вам просто нужно определить «домашнюю» область вашего экрана. В этом руководстве вы узнаете, как определять области касания экрана.

Хотя это упрощенный проект, он все же довольно длинный. Я предоставлю версии скетчей Arduino на каждом этапе, чтобы вы могли загрузить их, если хотите.

Шаг 4: код заголовка, глобальные переменные, настройка экрана

Весь проект тщательно задокументирован. Но подробности следуют далее.

Запустите новый проект Arduino и назовите его «tft demo» или как угодно другое имя.

Первая панель кода выше показывает, как мы определяем глобальные переменные. Мы также добавляем библиотеки, которые нам понадобятся как для функции отображения экрана, так и для определения касания экрана.

Мы также определяем аналоговые выводы в соответствии с их назначением для конкретного экрана.

Мы определяем объект tft (дисплей) и объект ts (касание) как ссылки для их соответствующих функций.

Мы определяем некоторые 16-битные цветовые константы, чтобы упростить отображение цветов для экрана, а также для текстовых и графических объектов. Вы заметите, что есть URL-адрес веб-сайта, на котором есть палитра цветов и конвертер для преобразования видимых цветов в их 16-битные шестнадцатеричные значения. Это очень полезный инструмент.

На второй панели кода мы определяем глобальные переменные для конкретных целей нашего приложения.

Строки и массивы cString, letter и letterX и letterY используются для: a) отображения букв на кнопках приложения для ввода текста и b) сопоставления координат x и y касания с координатами x и y каждой соответствующей буквы на клавиатура. Подробнее об этом, когда мы перейдем к этому участку скетча.

funcX , funcY и func - это массивы, которые определяют, какая кнопка приложения была нажата на экране главного меню, а затем используют эту информацию для запуска соответствующего приложения.

lastTouch и tThresh используются в методах касания, чтобы гарантировать, что мы не получим несколько касаний из-за слишком долгого нажатия на экран. Подробнее об этом позже.

Переменная режима будет определять, какой экран будет отображаться, а переменная tMode будет контролировать, какие методы касания используются в любой момент времени.

В блоке setup () мы открываем последовательный канал, если мы хотим использовать команды Serial.println () для отладки. Вам не нужна эта строка, если вы не хотите выполнять отладку Serial Monitor.

Следующие четыре строки - это просто код настройки для объекта tft.

Затем мы устанавливаем ориентацию экрана в портретный режим.

Команда randomSeed () просто запускает генератор случайных чисел для последующего использования приложением Saucy 7.

Наконец, мы вызываем метод экрана-заставки.

Шаг 5: Создание заставки и сравнение дисплея и сенсорного картографирования

Теперь приступим к созданию заставки.

Но сначала посмотрите на картинку для отображения экрана и сенсорного экрана. Обратите внимание, что истоки находятся в разных местах. Для отображения начало координат (0, 0) находится в верхнем левом углу экрана (когда кнопка RESET находится сверху) и увеличивается слева направо и сверху вниз.

Для обнаружения касания исходная точка находится в нижнем левом углу экрана и увеличивается слева направо и снизу вверх.

Таким образом, ДИСПЛЕЙ И СЕНСОРНАЯ КАРТА ОПРЕДЕЛЯЮТСЯ ОТДЕЛЬНО и имеют разное разрешение. Дисплей имеет разрешение 240 на 320 пикселей, а сенсорный экран имеет гораздо более высокое разрешение, как вы скоро увидите.

Перейдите в область вашего эскиза под методом loop () {}, и мы введем код метода splash ().

Мы начинаем с выполнения команды fillScreen (), чтобы заполнить экран БЕЛЫМ цветом, который мы определили в коде заголовка.

Затем мы устанавливаем размер текста на «5». Это относительно большой базовый размер текста. Мы устанавливаем положение x и y для текстового курсора и устанавливаем цвет текста. Наконец, команда печати ("TFT") фактически рисует синий текст размером '5' в указанной позиции.

По мере увеличения размера текста вы увидите, что символы становятся все более и более коренастыми. Так что переход выше 5, вероятно, бесполезен. В конце этого урока я покажу вам, как использовать растровые шрифты, чтобы текст в ваших приложениях выглядел лучше. Компромисс заключается в том, что использование наборов растровых шрифтов занимает много памяти в вашем Arduino, что ограничивает размеры ваших эскизов

Мы повторяем аналогичные команды для двух других текстовых элементов на заставке.

Наконец, мы задерживаем на 2,5 секунды, чтобы дать пользователю возможность прочитать содержимое экрана, прежде чем приложение перейдет на экран главного меню.

Загрузите этот скетч на свой Arduino. Он должен отобразить заставку.

Шаг 6. Создание диагностического инструмента Touch Mapping

Метод showTouch () очень полезен, чтобы помочь вам получить координаты касания различных частей экрана. Вам нужно будет сделать это для определения сенсорных областей для ваших кнопок.

Идите вперед и введите этот метод под вашим ранее выполненным методом splash ().

Вот как это работает.

Оператор if определяет, прошло ли достаточно времени с момента последнего касания. Он берет текущее системное время millis () и вычитает время последнего касания. Если оно больше значения tThresh (200 миллисекунд), прикосновение будет принято. В противном случае он не будет учитывать случайные события мультитач.

Затем команда getpoint () получает координаты x, y и z касания. Координата z является мерой касания.

Если давление находится в пределах констант max и min, которые мы определили в заголовке эскиза, метод сначала изменит выводы YP и XM обратно на OUTPUT, переведя экран в режим DISPLAY.

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

Затем эскиз устанавливает шрифт размера 2, черный цвет и отображает координаты x (p.x) и y (p.y) на экране. Затем вы можете записать эти места, чтобы запрограммировать зоны касания для собственных эскизов.

Оператор if в нижней части метода проверяет, была ли нажата кнопка «Домой» на экране. операторы '<=' учитывают ширину и высоту кнопки «Домой». Указанные координаты - это координаты центра x и центра y кнопки «Домой». Если она нажата, режим устанавливается на 0, что в конечном итоге будет означать «Перейти к экрану главного меню». Подробнее об этом позже.

Наконец, мы обновляем lastTouch до текущего системного времени millis (), чтобы подготовиться к более позднему событию касания.

Теперь перейдите в блок loop () и добавьте строку showTouch ();

На этом этапе загрузите свой скетч и попробуйте его. Он нарисует заставку, и если вы начнете касаться экрана, координаты TOUCH x и y будут отображаться на экране.

Прежде чем двигаться дальше, давайте вернемся к двум важным строкам кода:

pinMode (YP, ВЫХОД); // восстанавливаем контакты управления TFT

pinMode (XM, OUTPUT); // для отображения после обнаружения касания

Каждый раз, когда вы хотите отобразить что-либо на экране, вы ДОЛЖНЫ выполнить эти две команды, чтобы переключить экран из СЕНСОРНОГО режима в режим ДИСПЛЕЯ. В противном случае ваши команды отображения не будут работать.

Молодцы! Сделай перерыв!

Шаг 7. Создайте экран главного меню

Теперь мы создадим наш экран главного меню с двумя кнопками, которые вы можете нажимать, чтобы активировать каждое приложение. Метод называется menuScreen ().

Начнем с того, что переведем экран в режим ДИСПЛЕЯ.

Затем мы устанавливаем размер, цвет и положение шрифта и печатаем текст «Главное меню».

Теперь мы рисуем два прямоугольника, которые являются кнопками.

Все графические команды имеют аналогичную структуру:

graphicShape (координата x, координата y, ширина, высота, ЦВЕТ)

- координата x - вверху слева для прямоугольных объектов, центр для кругов

- координата y - вверху слева для прямоугольных объектов, центр для кругов

- width - ширина объекта в пикселях

- ЦВЕТ - цветовая константа, которую мы определили в заголовке

Наконец, мы вызываем два метода для рисования значка Saucy 7 и значка ввода текста QWERTY. Это отдельные методы.

Метод draw7icon (0) принимает целочисленный параметр, который представляет собой смещение по оси Y для рисования мяча. Мы делаем это для того, чтобы использовать тот же метод для рисования мяча на экране меню И на экране приложения Saucy 7. Смещение просто позволяет нам программно изменять координату y мяча вверх или вниз.

Метод draw7Ball (0) вызывается из draw7Icon (0). Он также принимает параметр, который позволяет нам регулировать вертикальное положение мяча в зависимости от того, рисуем ли мы его на экране меню или на экране приложения.

Команда fillCircle () принимает 4 аргумента.

- координата x центра окружности

- координата y центра окружности

- радиус круга (в пикселях)

- ЦВЕТ - цветовая константа, которую мы определили в заголовке

Наконец, вызывается метод drawTextIcon () для рисования значка для приложения Text Entry.

Вы можете попробовать запустить метод, закомментировав метод splash () в setup () и добавив menuScreen ().

Загрузите эскиз в свой Arduino и попробуйте!

Шаг 8: приложение Saucy 7 и методы главного меню

Метод sevenScreen () рисует экран для приложения, включая рисование мяча и последующее отображение инструкций.

Метод sevenInstr () отображает инструкции, а также очищает экран от предыдущих ответов. Он также рисует кнопку «Ответ».

Метод show7Response () обрабатывает удаление с экрана предыдущего метода ответа, отображение анимированного сообщения «думает…» и затем отображение случайно выбранного ответного сообщения.

read7Touch () - это метод, ожидающий события касания для создания случайно сгенерированного сообщения. Сенсорный код очень похож на метод диагностики showTouch (), описанный ранее. Для простоты метод будет воспринимать касание в любом месте экрана как нажатие кнопки «Ответить».

В верхней части метода мы определяем массив строк response , которые представляют собой сообщения, которые могут быть сгенерированы из события касания.

Если нажать кнопку «Домой», приложение закроет и вернется к экрану главного меню. В противном случае метод сгенерирует случайное число от 0 до 7 (исключая) и передаст соответствующее текстовое сообщение из массива response методу show7Response ().

Наконец, метод backToMenu () отслеживает нажатие кнопки «Домой» и возвращает управление на экран главного меню.

Метод readMenuTouch () отслеживает событие касания, когда вы находитесь на экране главного меню. При обнаружении касания он передает координаты x и y методу getFunc (x, y), который просматривает массивы funcX и funcY , чтобы сопоставить координаты x и y касания. Затем он возвращает число из массива func для выбранного приложения. «1» - это Saucy 7, а «2» - это приложение для ввода текста. Затем он устанавливает режим на значение этого приложения, чтобы приложение было выполнено.

Шаг 9: блок Loop ()

Теперь мы начнем создавать код блока loop () для обработки отображения соответствующего экрана и последующего вызова соответствующих методов касания в зависимости от выбранной в данный момент опции.

Метод loop () состоит из двух структур switch ().

Структура верхнего переключателя обеспечивает отображение соответствующего экрана в зависимости от того, какая опция выбрана. Он также устанавливает значение tMode для соответствующего метода касания, запускаемого для текущей выбранной опции. Наконец, он устанавливает значение режима на 9, чтобы экран дисплея не перерисовывался бесконечно.

Структура нижнего переключателя управляет тем, какие методы касания выполняются на основе выбранной пользователем опции приложения, представленной значением tMode.

Загрузите эскиз в свой Arduino, и вы сможете выбрать и использовать приложение Saucy 7.

Вы проделали много работы! Сделайте перерыв:-)

Шаг 10: Приложение для ввода текста - мы на пороге

Теперь мы включим методы приложения для ввода текста.

makeKbd () рисует клавиатуру на экране.

Он рисует шесть закругленных прямоугольников, а затем накладывает соответствующую букву на каждый «ключ», получая букву из строки cString, которую он печатает на экране поверх клавиши. Обратите внимание, что второй последний параметр в команде fillRoundedRect () - это радиус каждого угла в пикселях. Чем выше это значение, тем более скруглены углы.

Метод readKbdTouch () работает аналогично другим методам обнаружения касания.

Если обнаруживается прикосновение, которое НЕ находится на кнопке «Домой», оно передает координаты x и y методу curChar (x, y), который возвращает символ, соответствующий этим местоположениям x и y на экране. Напечатанное сообщение затем отображается на экране с помощью метода displayMsg (theChar).

Метод curChar (x, y) просматривает массивы letterX и letterY , пытаясь найти совпадение, близкое к координатам x и y, переданным из readKbdTouch (). Если он находит совпадение, он возвращает соответствующую букву методу readKbdTouch. Обратите внимание, что мы инициализируем переменную theChar значением 32, которое является кодом ASCII для символа пробела, ''. Мы делаем это для того, чтобы, если пользователь касается области вдали от клавиатуры, недоступные символы не отображались.

Метод displayMsg (theChar) принимает символ, возвращенный из curChar (x, y), и добавляет его в строку сообщения. Затем он отображает сообщение на экране.

Наконец, мы обновим блок loop (), чтобы принять выбор приложения для ввода текста.

Загрузите эскиз tftDemo на свой Arduino, и вы сможете использовать готовое приложение.

Поздравляю! вы создали приложение для сенсорного экрана TFT! Возьми оставшуюся часть выходного дня!

Шаг 11: Получите Slick! - Использование растровых шрифтов Adafruit в вашем эскизе

Стандартный набор шрифтов tft в порядке. Но будет лучше, если мы сможем использовать правильные растровые шрифты в наших набросках TFT.

Обратной стороной является то, что загрузка наборов шрифтов в память Arduino занимает значительное место. Фактически, очень легко заполнить ваш эскиз таким количеством шрифтов, что он не загрузится в Arduino.

Шрифты доступны в папке библиотеки Adafruit_GFX, которую вы уже установили для этого проекта. На этом сайте есть отличное руководство по использованию шрифтов.

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

#включают

В вашем методе splash () закомментируйте tft.setTextSize (); команда.

Добавьте следующую команду,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Теперь любые команды print () будут использовать текущий указанный шрифт. Чтобы изменить шрифт, вы должны использовать другую команду tft.setFont () со следующим шрифтом, который вы хотите использовать.

Чтобы вернуть стандартный шрифт tft, просто используйте tft.setFont (); команда без параметра.

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

Шаг 12: Заключительные мысли

Вам доступны многие другие команды графических объектов. Они включают:

tft.drawRect (x, y, ширина, высота, ЦВЕТ);

tft.drawLine (x1, y1, x2, y2, ЦВЕТ);

В следующих примерах используется метод tft.color565, позволяющий указать цвет на основе значений красного, зеленого и синего цветов. Это альтернативный способ использования постоянных значений цвета HEX, которые мы использовали в нашем эскизе.

tft.drawRoundRect (x, y, ширина, высота, радиус, tft.color565 (255, 0, 0)); // это было бы красным

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // это будет зеленый

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // синий

tft.fillTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (255, 0, 0);

Поэкспериментируйте с этими командами и узнайте, как они могут быть добавлены в ваши проекты TFT.

Научиться пользоваться TFT-экраном сложно, и вы должны гордиться собой, потратив время на изучение этих первых шагов.

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

Спасибо за проработку этого урока.

А теперь выходите и сделайте что-нибудь чудесное!