BluBerriSix - samouczek TFT TouchScreen / Arduino: 12 kroków (ze zdjęciami)

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:30

2019 to 20. rocznica RIM Blackberry 850! Ten mały kanadyjski wynalazek zmienił sposób komunikowania się świata. Już dawno minęło, ale jego dziedzictwo trwa!

W tej instrukcji dowiesz się, jak korzystać z osłony wyświetlacza TFT MCUfriend.com 2,4 cala dla Uno / Mega. Dowiesz się, jak wyświetlać obiekty graficzne i tekst oraz jak odbierać dotknięcia i działać na zdarzenia dotykowe. Ekran jest bardzo podobny do Adafruit i innych ekranów/ekranów TFT, więc jeśli tu jesteś, zostań na pokazie.

Zbudujemy uproszczoną wersję 2 aplikacji mojego szkicu bluBerriSIX.

Zacznijmy!

Krok 1: BluBerriSIX - Przegląd

Aplikacja bluBerriSIX to sześciofunkcyjny projekt TFT.

Obejmuje:

Latarka

Aplikacja Saucy '7' (jak Magic '8' Ball)

Kalkulator

Aplikacja do pomiaru odległości wykorzystująca ultradźwiękowy czujnik odległości SR-04

Aplikacja do pomiaru temperatury i wilgotności, która rejestruje dane w czasie rzeczywistym do 1,5 km za pomocą nadajnika-odbiornika HC-12

Aplikacja do SMS-ów używająca HC-12.

Ten projekt zajął 1100 linijek kodu. Zbudujemy znacznie prostszą wersję, która nadal będzie demonstrować koncepcję wyświetlacza TFT i wykrywania dotyku.

Krok 2: Co jest potrzebne?

- Arduino Uno lub Mega 2560

- Osłona TFT MCUfriend 2,4"

Następujące biblioteki:

- Biblioteka Adafruit_GFX

- Biblioteka ekranu dotykowego Adafruit

- Biblioteka MCUFRIEND_kbv

Biblioteki te można zainstalować za pomocą Menedżera bibliotek w środowisku Arduino IDE.

Aby wczytać bibliotekę, przejdź do opcji menu Szkic -> Dołącz bibliotekę -> Zarządzaj bibliotekami….

W polu „filtruj wyszukiwanie…” wpisz kilka pierwszych znaków nazwy biblioteki, a następnie wybierz i zainstaluj odpowiednią bibliotekę. Po zakończeniu po prostu wycofaj się z tego ekranu.

Podczas montowania osłony TFT na Uno/Mega BĄDŹ BARDZO OSTROŻNY, aby upewnić się, że prawidłowo układasz szpilki. Przesunęłam pierwszą tarczę i usmażyłam ją. Spędziłem dwa tygodnie rosnącej frustracji, próbując znaleźć właściwe biblioteki, zanim zdałem sobie sprawę, że ekran jest martwy. BĄDŹ OSTROŻNY

Krok 3: Nasz projekt

Zbudujemy prostszą wersję szkicu bluBerriSIX.

Będzie miał, - ekran powitalny

- ekran menu głównego z dwoma przyciskami

- aplikacja Saucy 7

- uproszczona aplikacja do wprowadzania tekstu

Będziesz także mógł wrócić do menu głównego, naciskając ikonę „Strona główna” w lewym dolnym rogu tego konkretnego ekranu. Jeśli nie masz takiej ikony, wystarczy zdefiniować region „domowy” ekranu. W tym samouczku dowiesz się, jak określić regiony dotyku ekranu.

Chociaż jest to uproszczony projekt, wciąż jest dość długi. Dostarczę wersje szkiców Arduino na każdym głównym etapie, abyś mógł je przesłać, jeśli chcesz.

Krok 4: Kod nagłówka, zmienne globalne, konfiguracja ekranu

Cały projekt jest dobrze udokumentowany. Ale szczegóły są następujące.

Rozpocznij nowy projekt Arduino i nazwij go „demo tft” lub dowolną inną nazwą.

Pierwszy panel kodu powyżej pokazuje nam definiowanie zmiennych globalnych. Dodajemy również biblioteki, których będziemy potrzebować zarówno do funkcji wyświetlania ekranu, jak i wykrywania dotyku ekranu.

Definiujemy również piny analogowe w odniesieniu do ich konkretnych celów ekranowych.

Definiujemy obiekt tft (wyświetlacz) i obiekt ts (dotyk) jako referencje dla ich odpowiednich funkcji.

Definiujemy kilka 16-bitowych stałych kolorów, aby ułatwić renderowanie kolorów ekranu oraz obiektów tekstowych i graficznych. Zauważysz, że istnieje adres URL do witryny internetowej, która ma selektor kolorów i konwerter do konwersji widocznych kolorów na ich 16-bitowe wartości szesnastkowe. To bardzo pomocne narzędzie.

W drugim panelu kodu definiujemy zmienne globalne do celów specyficznych dla naszej aplikacji.

Ciągi i tablice cString, letter i letterX oraz letterY są używane do a) wyświetlania liter na przyciskach aplikacji do wprowadzania tekstu oraz b) dopasowania współrzędnych x i y dotyku ze współrzędnymi x i y każdej odpowiedniej litery na klawiatura. Więcej o tym, gdy przejdziemy do tej części szkicu.

funcX, funcY i func to tablice, które służą do określenia, który przycisk aplikacji został naciśnięty na ekranie menu głównego, a następnie wykorzystują te informacje do uruchomienia odpowiedniej aplikacji.

lastTouch i tThresh są używane w metodach dotykowych, aby upewnić się, że nie otrzymamy wielu dotknięć od zbyt długiego naciskania ekranu. Więcej o tym później.

Zmienna mode kontroluje, który ekran jest wyświetlany, a zmienna tMode kontroluje, które metody dotykowe są używane w danym momencie.

W bloku setup() otwieramy kanał Serial, jeśli chcemy użyć poleceń Serial.println() do debugowania. Nie potrzebujesz tej linii, jeśli nie chcesz wykonywać debugowania Monitora szeregowego.

Następne cztery wiersze to tylko kod konfiguracji dla obiektu tft.

Następnie ustawiamy orientację ekranu na tryb portretowy.

Polecenie randomSeed() po prostu uruchamia generator liczb losowych do późniejszego wykorzystania przez aplikację Saucy 7.

Na koniec wywołujemy metodę ekranu powitalnego.

Krok 5: Budowanie ekranu Spash i zrozumienie wyświetlania w porównaniu z mapowaniem dotykowym

Zaczniemy teraz budować ekran spash.

Ale najpierw spójrz na zdjęcie, aby wyświetlić ekran i mapowanie dotykowe. Zauważ, że źródła znajdują się w różnych lokalizacjach. W przypadku wyświetlania początek (0, 0) znajduje się w lewym górnym rogu ekranu (gdy przycisk RESET znajduje się na górze) i rośnie od lewej do prawej i od góry do dołu.

W przypadku wykrywania dotyku punkt początkowy znajduje się w lewym dolnym rogu ekranu i rośnie od lewej do prawej i od dołu do góry.

Tak więc MAPY WYŚWIETLACZA I DOTYKOWE SĄ ZDEFINIOWANE ODDZIELNIE i mają różne rozdzielczości. Wyświetlacz ma rozdzielczość 240 na 320, a dotyk ma znacznie wyższą rozdzielczość, jak wkrótce się przekonasz.

Przejdź do obszaru szkicu poniżej metody loop(){}, a my wprowadzimy kod metody splash().

Zaczynamy od wykonania polecenia fillScreen(), aby wypełnić ekran BIAŁYM kolorem, który zdefiniowaliśmy w kodzie nagłówka.

Następnie ustawiamy rozmiar tekstu na „5”. Jest to stosunkowo duży podstawowy rozmiar tekstu. Ustawiamy pozycję x i y dla kursora tekstowego i ustawiamy kolor tekstu. Wreszcie polecenie print("TFT") faktycznie rysuje niebieski tekst o rozmiarze '5' w określonej pozycji.

Gdy zwiększysz rozmiar tekstu, zobaczysz, że znaki stają się coraz bardziej masywne. Więc przekroczenie 5 prawdopodobnie nie jest pomocne. Na końcu tego samouczka pokażę, jak używać czcionek bitmapowych, aby uzyskać ładniejszy tekst w swoich aplikacjach. Kompromis polega na tym, że używanie zestawów czcionek bitmapowych zajmuje dużo pamięci w twoim Arduino, co ograniczy rozmiary twoich szkiców

Podobne polecenia powtarzamy dla pozostałych dwóch elementów tekstowych na ekranie powitalnym.

Na koniec opóźniamy o 2,5 sekundy, aby umożliwić użytkownikowi odczytanie zawartości ekranu, zanim aplikacja przejdzie do ekranu menu głównego.

Śmiało i prześlij ten szkic do swojego Arduino. Powinien wyświetlić ekran powitalny.

Krok 6: Tworzenie narzędzia diagnostycznego mapowania dotykowego

Metoda showTouch() jest bardzo przydatna, ponieważ pomaga uzyskać współrzędne dotykowe różnych części ekranu. Musisz to zrobić, aby zdefiniować regiony dotykowe dla przycisków.

Śmiało i wprowadź tę metodę poniżej metody splash() wykonanej wcześniej.

Oto jak to działa.

Instrukcja if określa, czy od ostatniego dotknięcia minęło wystarczająco dużo czasu. Pobiera bieżący czas systemowy millis() i odejmuje czas lastTouch. Jeśli jest większa niż wartość tThresh (200 milisekund), akceptuje dotyk. W przeciwnym razie zignoruje przypadkowe zdarzenia wielodotykowe.

Następnie polecenie getpoint() pobiera współrzędne x, y i z dotyku. Współrzędna z jest miarą nacisku dotykowego.

Jeśli ciśnienie mieści się w granicach max i min stałych, które zdefiniowaliśmy w nagłówku szkicu, metoda najpierw zmieni piny YP i XM z powrotem na OUTPUT, przestawiając ekran w tryb DISPLAY.

Następnie narysuje biały prostokąt, aby usunąć wszelkie współrzędne, które mogły być wyświetlane wcześniej.

Szkic następnie ustawia czcionkę na rozmiar 2, kolor czarny i wyświetla na ekranie współrzędne x (p.x) i y (p.y). Następnie możesz zanotować te lokalizacje, aby pomóc w zaprogramowaniu stref dotyku dla własnych szkiców.

Instrukcja if na dole metody sprawdza, czy został naciśnięty przycisk „Home” na ekranie. operatory „<=” pozwalają na określenie szerokości i wysokości przycisku Home. Określone współrzędne to współrzędne środka x i środka przycisku Home. Jeśli zostanie naciśnięty, tryb zostanie ustawiony na 0, co ostatecznie będzie oznaczać „Przejdź do ekranu menu głównego”. Więcej o tym później.

Na koniec aktualizujemy lastTouch do bieżącego czasu systemowego millis(), aby przygotować się na późniejsze zdarzenie dotykowe.

Przejdź teraz do bloku loop() i dodaj linię showTouch();

W tym momencie prześlij swój szkic i wypróbuj go. Narysuje ekran powitalny, a jeśli zaczniesz dotykać ekranu, współrzędne xiy TOUCH zostaną wyświetlone na ekranie.

Zanim przejdziemy dalej, wróćmy do dwóch ważnych wierszy kodu:

pinMode(YP, WYJŚCIE); //przywróć piny sterujące TFT

pinMode(XM, OUTPUT);// do wyświetlania po wykryciu dotyku

Za każdym razem, gdy chcesz wyświetlić coś na ekranie, MUSISZ wykonać te dwa polecenia, aby zmienić ekran z trybu DOTYKOWEGO w tryb WYŚWIETLANIA. W przeciwnym razie Twoje polecenia wyświetlania nie będą działać.

Dobra robota do tej pory! Zrób sobie przerwę!

Krok 7: Utwórz ekran głównego menu

Zbudujemy teraz ekran głównego menu z dwoma przyciskami, które możesz nacisnąć, aby aktywować każdą aplikację. Metoda nazywa się menuScreen().

Zaczynamy od przełączenia ekranu w tryb DISPLAY.

Następnie ustawiamy rozmiar, kolor i położenie czcionki oraz drukujemy tekst 'Menu Główne'.

Teraz rysujemy dwa prostokąty, które są przyciskami.

Wszystkie polecenia graficzne mają podobną strukturę:

graphicShape(współrzędna x, współrzędna y, szerokość, wysokość, KOLOR)

- współrzędna x - górna lewa dla obiektów prostokątnych, środek dla okręgów

- współrzędna y - górna lewa dla obiektów prostokątnych, środek dla okręgów

- width - szerokość obiektu w pikselach

- COLOR - stała koloru zdefiniowana w nagłówku

Na koniec wywołujemy dwie metody rysowania ikony Saucy 7 i ikony wprowadzania tekstu QWERTY. To są osobne metody.

Metoda draw7icon(0) pobiera parametr w postaci liczby całkowitej, który jest przesunięciem y do rysowania piłki. Robimy to, abyśmy mogli użyć tej samej metody do rysowania kulki na ekranie menu ORAZ na ekranie aplikacji Saucy 7. Przesunięcie pozwala nam programowo dostosować współrzędną y piłki w górę lub w dół.

Metoda draw7Ball(0) jest wywoływana z poziomu draw7Icon(0). Zajmuje również parametr, który pozwala nam dostosować pionowe położenie kulki w zależności od tego, czy rysujemy ją na ekranie menu, czy na ekranie aplikacji.

Polecenie fillCircle() przyjmuje 4 argumenty.

- x współrzędna środka okręgu

- współrzędna y środka okręgu

- promień okręgu (w pikselach)

- COLOR - stała koloru zdefiniowana w nagłówku

Na koniec wywoływana jest metoda drawTextIcon() w celu narysowania ikony aplikacji Wprowadzanie tekstu.

Możesz spróbować uruchomić metodę, komentując metodę splash() w setup() i dodając menuScreen().

Prześlij szkic do swojego Arduino i wypróbuj go!

Krok 8: Aplikacja Saucy 7 i metody menu głównego

Metoda sevenScreen() narysuje ekran aplikacji, w tym narysuje piłkę, a następnie wyświetli instrukcje.

Metoda sevenInstr() wyświetla instrukcje oraz czyści ekran z poprzednich odpowiedzi. Rysuje również przycisk „Odpowiedź”.

Metoda show7Response() obsługuje usuwanie poprzedniej metody odpowiedzi z ekranu, wyświetlanie animowanego komunikatu „myślenie…”, a następnie wyświetlanie losowo wybranego komunikatu odpowiedzi.

read7Touch() to metoda, która czeka na zdarzenie touch w celu wygenerowania losowo wygenerowanego komunikatu. Kod dotykowy jest bardzo podobny do opisanej wcześniej metody diagnostycznej showTouch(). Dla uproszczenia, metoda zaakceptuje dotyk w dowolnym miejscu ekranu jako dotyk przycisku „Odpowiedz”.

W górnej części metody definiujemy tablicę response ciągów, które są wiadomościami, które mogą być generowane ze zdarzenia touch.

Naciśnięcie przycisku Home spowoduje zamknięcie aplikacji i powrót do ekranu menu głównego. W przeciwnym razie metoda wygeneruje losową liczbę z zakresu od 0 do 7 (wyłącznie) i przekaże odpowiednią wiadomość tekstową z tablicy response do metody show7Response().

Na koniec metoda backToMenu() wypatruje dotknięcia przycisku Home i zwraca sterowanie do ekranu menu głównego.

Metoda readMenuTouch() obserwuje zdarzenie dotyku, gdy jesteś na ekranie menu głównego. Gdy zostanie wykryty dotyk, przekazuje współrzędne x i y do metody getFunc(x, y), która przeszukuje tablice funcX i funcY, aby dopasować współrzędne x i y dotyku. Następnie zwraca liczbę z tablicy func dla wybranej aplikacji. „1” to Saucy 7, a „2” to aplikacja do wprowadzania tekstu. Następnie ustawia tryb na wartość tej aplikacji, aby aplikacja została wykonana.

Krok 9: Blok Loop()

Zaczniemy teraz budować kod blokowy loop() do obsługi wyświetlania odpowiedniego ekranu, a następnie wywoływania odpowiednich metod dotykowych w oparciu o aktualnie wybraną opcję.

Metoda loop() składa się z dwóch struktur switch().

Górna struktura przełącznika obsługuje wyświetlanie odpowiedniego ekranu w zależności od wybranej opcji. Ustawia również wartość tMode dla odpowiedniej metody dotykowej, która ma być uruchomiona dla aktualnie wybranej opcji. Na koniec ustawia wartość trybu na 9, aby ekran wyświetlacza nie był nieskończenie przerysowywany.

Dolna struktura przełącznika kontroluje, które metody dotykowe są wykonywane na podstawie wybranej przez użytkownika opcji aplikacji, reprezentowanej przez wartość tMode.

Załaduj szkic do Arduino i powinieneś być w stanie wybrać i używać aplikacji Saucy 7.

Wykonałeś dużo pracy! Zrób sobie przerwę:-)

Krok 10: Aplikacja do wprowadzania tekstu - jesteśmy w domu

Włączymy teraz metody aplikacji do wprowadzania tekstu.

makeKbd() rysuje klawiaturę na ekranie.

Rysuje sześć wypełnionych zaokrąglonych prostokątów, a następnie nakłada odpowiednią literę na każdy „klucz”, pobierając literę z ciągu cString, który drukuje na ekranie na kluczu. Zauważ, że przedostatni parametr w poleceniu fillRoundedRect() to promień każdego narożnika w pikselach. Im wyższa ta wartość, tym bardziej zaokrąglone rogi.

Metoda readKbdTouch() działa podobnie do innych metod wykrywania dotyku.

Jeśli zostanie wykryty dotyk, który NIE znajduje się na przycisku Home, przekazuje współrzędne x i y do metody curChar(x, y), która zwraca znak odpowiadający tej lokalizacji x i y na ekranie. Wiadomość, która została „wpisana” jest następnie wyświetlana na ekranie przy użyciu metody „displayMsg(theChar).

Metoda curChar(x, y) przeszukuje tablice letterX i letterY w celu znalezienia dopasowania, które jest bliskie współrzędnym x i y przekazanym przez readKbdTouch(). Jeśli znajdzie dopasowanie, zwraca odpowiednią literę do metody readKbdTouch. Zauważ, że inicjujemy zmienną theChar na 32, która jest kodem ASCII dla znaku spacji „”. Robimy to tak, że jeśli użytkownik dotknie obszaru oddalonego od klawiatury, nie wyświetli on niedostępnych znaków.

Metoda displayMsg(theChar) pobiera znak zwrócony przez curChar(x, y) i dołącza go do ciągu msg. Następnie wyświetla komunikat na ekranie.

Na koniec zaktualizujemy blok loop(), aby zaakceptować wybór aplikacji do wprowadzania tekstu.

Prześlij szkic tftDemo do Arduino i powinieneś być w stanie korzystać z ukończonej aplikacji.

Gratulacje! zbudowałeś aplikację z ekranem dotykowym TFT! Zrób sobie resztę dnia wolnego!

Krok 11: Gettin' Slick! - Używanie czcionek bitmapowych Adafruit w swoim szkicu

Standardowy zestaw czcionek tft jest w porządku. Ale fajniej jest, gdy możemy używać odpowiednich czcionek bitmapowych w naszych szkicach TFT.

Minusem jest to, że ładowanie zestawów czcionek do pamięci Arduino zajmuje dużo miejsca. W rzeczywistości bardzo łatwo jest wypełnić swój szkic tak wieloma czcionkami, że nie zostaną one załadowane do Arduino.

Czcionki są dostępne w folderze biblioteki Adafruit_GFX, który już zainstalowałeś dla tego projektu. Doskonały samouczek dotyczący używania czcionek znajduje się na tej stronie.

W obszarze Nagłówek szkicu dodaj odniesienie do czcionki, której chcesz użyć. W tym przykładzie użyjemy czcionki FreeSerifBoldItalic18p7b.

#włączać

W swojej metodzie splash() skomentuj tft.setTextSize(); Komenda.

Dodaj następujące polecenie,

tft.setFont(&FreeSerifBoldItalic18pt7b);

Teraz wszystkie polecenia print() będą używać aktualnie określonej czcionki. Aby zmienić czcionkę, użyj innego polecenia tft.setFont() z następną czcionką, której chcesz użyć.

Aby ustawić czcionkę z powrotem na standardową czcionkę tft, po prostu użyj tft.setFont(); polecenie bez parametru.

Prześlij szkic do Arduino i powinieneś zobaczyć, że ekran powitalny używa teraz czcionki bitmapowej do renderowania tekstu na ekranie. Zauważysz, że rozmiar szkicu jest znacznie większy teraz, gdy dołączyłeś czcionkę.

Krok 12: Końcowe myśli

Dostępnych jest wiele innych poleceń dotyczących obiektów graficznych. Zawierają:

tft.drawRect(x, y, szerokość, wysokość, KOLOR);

tft.drawLine(x1, y1, x2, y2, KOLOR);

W poniższych przykładach zastosowano metodę tft.color565, aby umożliwić określenie koloru na podstawie wartości czerwonego, zielonego i niebieskiego. Jest to alternatywny sposób korzystania ze stałych, zdefiniowanych wartości kolorów HEX, których użyliśmy w naszym szkicu.

tft.drawRoundRect(x, y, szerokość, wysokość, promień, tft.color565(255, 0, 0)); // to byłoby czerwone

tft.drawCircle(x, y, promień, tft.color565(0, 255, 0)); // to byłoby zielone

tft.drawTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(0, 0, 255)); // niebieski

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

Pobaw się tymi poleceniami i dowiedz się, jak można je dodać do Twoich projektów TFT.

Nauka obsługi ekranu TFT jest trudna i powinieneś być z siebie dumny, że poświęciłeś czas na nauczenie się tych pierwszych kroków.

Ekrany TFT mogą dodać atrakcyjny i użyteczny aspekt graficznego interfejsu użytkownika do twoich projektów Arduino.

Dziękujemy za zapoznanie się z tym samouczkiem.

TERAZ WYJDŹ I ZRÓB COŚ CUDOWNEGO!