Arduino Uno: animacja bitmapowa na ekranie dotykowym ILI9341 TFT z ekranem dotykowym Visuino: 12 kroków (ze zdjęciami)

2025 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2025-01-13 06:58

Oparte na ILI9341 osłony ekranu dotykowego TFT są bardzo popularnymi, niedrogimi osłonami wyświetlacza dla Arduino. Visuino ma dla nich wsparcie od dłuższego czasu, ale nigdy nie miałem okazji napisać samouczka, jak z nich korzystać. Ostatnio jednak niewiele osób zadało pytania dotyczące używania wyświetlaczy z Visuino, więc postanowiłem zrobić tutorial.

W tym samouczku pokażę, jak łatwo jest podłączyć Shield do Arduino i zaprogramować go za pomocą Visuino, aby animować bitmapę, aby poruszać się po wyświetlaczu.

Krok 1: Komponenty

1. Jedna płytka kompatybilna z Arduino Uno (może działać również z Mega, ale jeszcze nie testowałem z nią tarczy)
2. Jedna osłona ekranu dotykowego ILI9341 2,4" TFT dla Arduino

Krok 2: Podłącz osłonę ekranu dotykowego ILI9341 TFT do Arduino

Podłącz osłonę TFT na górze Arduino Uno, jak pokazano na zdjęciach!

Krok 3: Uruchom Visuino i dodaj osłonę wyświetlacza TFT

Aby rozpocząć programowanie Arduino, musisz mieć zainstalowane Arduino IDE stąd:

Upewnij się, że zainstalowałeś 1.6.7 lub nowszy, w przeciwnym razie ta instrukcja nie będzie działać

Visuino: https://www.visuino.com również musi być zainstalowane.

1. Uruchom Visuino, jak pokazano na pierwszym obrazku
2. Kliknij przycisk „Strzałka w dół” komponentu Arduino, aby otworzyć menu rozwijane (zdjęcie 1)
3. Z menu wybierz „Dodaj osłony…” (Zdjęcie 1)
4. W oknie dialogowym „Shields” rozwiń kategorię „Ekrany” i wybierz „TFT Color Touch Screen Display ILI9341 Shield”, a następnie kliknij przycisk „+”, aby go dodać (Zdjęcie 2)

Krok 4: W Visuino: Dodaj element tekstu do rysowania dla cienia tekstu

Następnie musimy dodać elementy Graphics do renderowania tekstu i bitmapy. Najpierw dodamy element graficzny, aby narysować cień tekstu:

1. W Inspektorze obiektów kliknij przycisk „…” obok wartości właściwości „Elementy” elementu „Wyświetlacz TFT” (Zdjęcie 1)
2. W edytorze elementów wybierz „Narysuj tekst”, a następnie kliknij przycisk „+” (Zdjęcie 2), aby go dodać (Zdjęcie 3)
3. W Inspektorze obiektów ustaw wartość właściwości "Color" elementu "Draw Text1" na "aclSilver" (Rysunek 3)
4. W Inspektorze obiektów ustaw wartość właściwości "Size" elementu "Draw Text1" na "4" (Rysunek 4). To sprawia, że tekst jest większy
5. W Inspektorze obiektów ustaw wartość właściwości „Text” elementu „Draw Text1” na „Visuino” (Rysunek 5)
6. W Inspektorze obiektów ustaw wartość właściwości „X” elementu „Draw Text1” na „43” (Rysunek 6)
7. W Inspektorze obiektów ustaw wartość właściwości "Y" elementu "Draw Text1" na "278" (Rysunek 6)

Krok 5: W Visuino: Dodaj element tekstu do rysowania na pierwszym planie tekstu

Teraz dodamy element graficzny do rysowania tekstu:

1. W edytorze elementów wybierz „Narysuj tekst”, a następnie kliknij przycisk „+” (Zdjęcie 1), aby dodać drugi (Zdjęcie 2)
2. W Inspektorze obiektów ustaw wartość właściwości "Size" elementu "Draw Text1" na "4" (Rysunek 2)
3. W Inspektorze obiektów ustaw wartość właściwości „Text” elementu „Draw Text1” na „Visuino” (Rysunek 3)
4. W Inspektorze obiektów ustaw wartość właściwości „X” elementu „Draw Text1” na „40” (Rysunek 4)
5. W Inspektorze obiektów ustaw wartość właściwości "Y" elementu "Draw Text1" na "275" (Rysunek 4)

Krok 6: W Visuino: Dodaj element Draw Bitmap do animacji

Następnie dodamy element graficzny do rysowania bitmapy:

1. W edytorze elementów wybierz „Rysuj bitmapę”, a następnie kliknij przycisk „+” (Zdjęcie 1), aby ją dodać (Zdjęcie 2)
2. W Inspektorze obiektów kliknij przycisk „…” obok wartości właściwości „Bitmap” elementu „Draw Bitmap1” (Zdjęcie 2), aby otworzyć „Edytor map bitowych” (Zdjęcie 3)
3. W „Edytorze mapy bitowej” kliknij przycisk „Załaduj…” (Zdjęcie 3), aby otworzyć okno dialogowe otwierania pliku (Zdjęcie 4)
4. W oknie dialogowym Otwórz plik wybierz bitmapę do narysowania i kliknij przycisk „Otwórz” (Zdjęcie 4). Jeśli plik jest zbyt duży, może nie zmieścić się w pamięci Arduino. Jeśli podczas kompilacji wystąpi błąd braku pamięci, może być konieczne wybranie mniejszej mapy bitowej
5. W „Edytorze map bitowych” kliknij „OK”. przycisk (Zdjęcie 5), aby zamknąć okno dialogowe

Krok 7: W Visuino: Dodaj szpilki dla właściwości X i Y elementu rysowania bitmapy

Aby animować Bitmapę, musimy kontrolować jej pozycję X i Y. W tym celu dodamy piny dla właściwości X i Y:

1. W Inspektorze obiektów kliknij przycisk „Pin” przed właściwością „X” elementu „Draw Bitmap1” (Rysunek 1) i wybierz „Integer SinkPin” (Rysunek 2)
2. W Inspektorze obiektów kliknij przycisk „Pin” przed właściwością „Y” elementu „Draw Bitmap1” (Rysunek 3) i wybierz „Integer SinkPin” (Rysunek 4)

Krok 8: W Visuino: Dodaj 2 generatory sinusoidalne w liczbach całkowitych i skonfiguruj pierwszy

Do animacji ruchu bitmapy użyjemy 2 generatorów liczb całkowitych:

1. Wpisz "sine" w polu Filtr przybornika komponentów, a następnie wybierz komponent "Generator liczby całkowitej sinusoidalnej" (Zdjęcie 1) i upuść dwa z nich w obszarze projektowym
2. W Inspektorze obiektów ustaw wartość właściwości „Amplitude” składnika SineIntegerGenerator1 na „96” (Rysunek 2)
3. W Inspektorze obiektów ustaw wartość właściwości "Offset" składnika SineIntegerGenerator1 na "96" (Rysunek 3)
4. W Inspektorze obiektów ustaw wartość właściwości „Frequency” składnika SineIntegerGenerator1 na „0.2” (Rysunek 4)

Krok 9: W Visuino: Skonfiguruj drugi generator sinusoidalny i podłącz generatory sinusoidalne do pinów współrzędnych X i Y mapy bitowej

1. W Inspektorze obiektów ustaw wartość właściwości "Amplitude" składnika SineIntegerGenerator2 na "120" (Rysunek 1)
2. W Inspektorze obiektów ustaw wartość właściwości "Offset" składnika SineIntegerGenerator2 na "120" (Rysunek 2)
3. W Inspektorze obiektów ustaw wartość właściwości „Frequency” składnika SineIntegerGenerator2 na „0.03” (Rysunek 3)
4. Podłącz pin wyjściowy "Out" komponentu SineIntegerGenerator1 do pinu wejściowego "X" elementu "Shields. TFT Sisplay. Elements. Draw Bitmap1" komponentu Arduino (Zdjęcie 4)
5. Podłącz pin wyjściowy „Out” komponentu SineIntegerGenerator2 do pinu wejściowego „Y” elementu „Shields. TFT Display. Elements. Draw Bitmap1” komponentu Arduino (rysunek 5)

Krok 10: W Visuino: Dodaj i połącz Start i Zegar komponentów Multi Source

Aby renderować bitmapę za każdym razem, gdy pozycje X i Y są aktualizowane, musimy wysłać sygnał zegarowy do elementu „Draw Bitmap1”. Aby wysłać polecenie po zmianie pozycji, potrzebujemy sposobu na synchronizację zdarzeń. W tym celu użyjemy komponentu Repeat do ciągłego generowania zdarzeń oraz Clock Multi Source do generowania 2 zdarzeń po kolei. Pierwsze zdarzenie taktuje generatory sinusoidalne, aby zaktualizować pozycje X i Y, a drugie taktuje „Draw Bitmap1”:

1. Wpisz „powtórz” w polu Filtr przybornika komponentów, a następnie wybierz komponent „Powtórz” (Zdjęcie 1) i upuść go w obszarze projektu (Zdjęcie 2)
2. Wpisz „multi” w polu Filter w przyborniku komponentów, a następnie wybierz komponent „Clock Multi Source” (Zdjęcie 2) i upuść go w obszarze projektu (Zdjęcie 3)
3. Podłącz pin wyjściowy „Out” komponentu Repeat1 do pinu wejściowego „In” komponentu ClockMultiSource1 (Zdjęcie 3)
4. Podłącz pin wyjściowy "Pin[0]" pinów "Out" komponentu ClockMultiSource1 do pinu wejściowego "In" komponentu SineIntegerGenerator1 (Zdjęcie 4)
5. Podłącz pin wyjściowy "Pin[0]" pinów "Out" komponentu ClockMultiSource2 do pinu wejściowego "In" komponentu SineIntegerGenerator1 (Zdjęcie 5)
6. Podłącz pin wyjściowy "Pin [1]" pinu wejściowego "Clock" elementu "Shields. TFT Display. Elements. Draw Bitmap1" komponentu Arduino (Zdjęcie 6)

Krok 11: Wygeneruj, skompiluj i prześlij kod Arduino

1. W Visuino naciśnij F9 lub kliknij przycisk pokazany na Zdjęciu 1, aby wygenerować kod Arduino i otworzyć Arduino IDE
2. W Arduino IDE kliknij przycisk Prześlij, aby skompilować i przesłać kod (Zdjęcie 2)

Krok 12: I graj…

Gratulacje! Ukończyłeś projekt.

Zdjęcia 2, 3, 4 i 5 oraz wideo pokazują podłączony i zasilany projekt. Zobaczysz bitmapę poruszającą się po opartej na ILI9341 osłonie ekranu dotykowego TFT, jak widać na wideo.

Na Zdjęciu 1 widać kompletny schemat Visuino. Dołączony jest również projekt Visuino, który stworzyłem dla tego Instructable, oraz bitmapa z logo Visuino. Możesz go pobrać i otworzyć w Visuino: