Drodzy przyjaciele, witamy w innym tutorialu! W tym filmie nauczymy się budować menu dla popularnego wyświetlacza LCD Nokia 5110, aby nasze projekty były bardziej przyjazne dla użytkownika i bardziej wydajne. Zacznijmy!

To projekt, który zamierzamy zbudować. Na wyświetlaczu pojawia się proste menu i za pomocą kodera obrotowego mogę nawigować w górę lub w dół i wybierać pozycję menu, naciskając przycisk enkodera obrotowego. Po naciśnięciu środkowego przycisku enkodera pojawia się inny ekran i możemy zmienić wartość zmiennej. Jeśli ponownie naciśniemy przycisk kodera obrotowego, wrócimy do ekranu głównego menu. Menu zawiera 6 elementów, a my możemy przewinąć menu w dół lub w górę, a pozycje na wyświetlaczu odpowiednio się zmienią. Obejrzyj załączony film, aby zobaczyć dokładnie, jak działa to menu. Oczywiście możesz go zmodyfikować, aby zbudować własne bardziej złożone menu, jeśli chcesz.

Zobaczmy teraz, jak zbudować ten projekt.

Kieszonkowe dzieci:

Krok 1: Zdobądź wszystkie części

Części potrzebne do zbudowania tego projektu są następujące:

• An Arduino Uno ▶
• Wyświetlacz LCD Nokia 5110 ▶
• Rotary Encoder ▶
• Mały breadboard ▶
• Niektóre przewody ▶
• Power Bank ▶

Koszt projektu jest bardzo niski, wynosi mniej niż 10 USD. Możesz znaleźć linki do wszystkich części, których używam w opisie filmu poniżej.

Krok 2: Wyświetlacz LCD Nokia 5110

Nokia 5110 to mój ulubiony wyświetlacz do moich projektów Arduino.

Nokia 5110 jest podstawowym graficznym ekranem LCD, który pierwotnie był przeznaczony na ekran telefonu komórkowego. Wykorzystuje kontroler PCD8544, który jest sterownikiem / sterownikiem CMOS małej mocy. Z tego powodu ten wyświetlacz ma imponujące zużycie energii. Używa tylko 0,4 mA, gdy jest włączone, ale podświetlenie jest wyłączone. Używa mniej niż 0,06 mA w trybie uśpienia! To jeden z powodów, dla których ten ekran jest moim ulubionym. Interfejsy PCD8544 do mikrokontrolerów poprzez interfejs magistrali szeregowej. To sprawia, że ​​wyświetlacz jest bardzo łatwy w użyciu z Arduino. Wystarczy podłączyć 8 przewodów.

Przygotowałem szczegółowy samouczek dotyczący korzystania z wyświetlacza LCD Nokia 5110 z Arduino. Załączam ten film w tym Instruktażu, dostarczy on użytecznych informacji o wyświetlaczu, więc zachęcam do uważnego oglądania. Koszt wyświetlacza wynosi około 4 USD.

Możesz go pobrać tutaj: ▶

Krok 3: Enkoder obrotowy

Enkoder obrotowy, zwany także enkoderem wału, jest urządzeniem elektromechanicznym, które przekształca położenie kątowe lub ruch wału lub osi na kod analogowy lub cyfrowy. Enkodery obrotowe są stosowane w wielu zastosowaniach, które wymagają precyzyjnego nieograniczonego obrotu wału - w tym w przemysłowych urządzeniach sterujących, robotyce, obiektywach fotograficznych specjalnego przeznaczenia, komputerowych urządzeniach wejściowych (takich jak myszy optomechaniczne i manipulatory kulkowe), reometrach z kontrolowanym obciążeniem i obrotowych platformach radarowych.

Koder obrotowy, którego będziemy używać w tym projekcie, jest bardzo niedrogim koderem. Posiada również wbudowany przycisk i aby go uruchomić, wystarczy podłączyć 5 przewodów. Przygotowałem szczegółowy poradnik na temat używania enkodera obrotowego. Możesz znaleźć ten film wideo tutaj.

Koszt tego enkodera obrotowego jest bardzo niski. Kosztuje około 1,5 USD.

Możesz go pobrać tutaj ▶

Krok 4: Budowanie projektu

Połączmy teraz wszystkie części. Przed zbudowaniem tego projektu, jeśli w przeszłości nie korzystałeś z kodera obrotowego, zachęcam do obejrzenia samouczka, który przygotowałem na temat koderów obrotowych. Pomoże ci zrozumieć, jak działają enkodery obrotowe i zdobędziesz z nimi trochę doświadczenia. Ten film wideo jest dołączony tutaj.

Umieściłem wyświetlacz na takiej małej płytce kuchennej. Najpierw połączmy wyświetlacz. Pierwszy pin wyświetlacza, który jest resetowany, przechodzi do cyfrowego styku 3 Arduino Uno, drugi pin przechodzi do cyfrowego styku 4, trzeci styk trafia do cyfrowego styku 5, czwarty styk do cyfrowego styku 11, a piąty styk do cyfrowego pin 13. Następnym pinem jest Vcc. Podłączamy Vcc do szyny dodatniej deski do krojenia chleba i szyny dodatniej do deski rozdzielczej do wyjścia 3,3 V Arduino. Następnym pinem jest podświetlenie wyświetlacza. Ponieważ chcemy go kontrolować za pomocą oprogramowania, podłączamy go do cyfrowego pinu 7. Ostatni pin to GND. Podłączamy GND do szyny ujemnej deski do krojenia chleba, a szynę ujemną płyty do płyty Arduino GND.

Teraz wszystko, co musimy zrobić, to podłączyć enkoder obrotowy. Pierwszy pin to GND i podłączamy go do szyny ujemnej płytki. Następny pin to Vcc i podłączamy go do szyny dodatniej płyty breadboard. Kolejny pin to SW i podłączamy go do Analog Pin 2. Następny pin ma nazwę DT i podłączamy go do Analog Pin 1. Na koniec pin CLK jest podłączony do Analog Pin 0. Schemat tego projektu można znaleźć w opis wideo poniżej.

Teraz jesteśmy gotowi zasilić projekt. Jak widać, projekt działa dobrze, a menu działa zgodnie z oczekiwaniami! Świetnie, zobaczmy teraz oprogramowanie projektu.

Krok 5: Kod projektu

W tym projekcie używamy 4 bibliotek. Używamy dwóch bibliotek do wyświetlania, a dwie do kodera obrotowego.

1. Adafruit GFX:
2. Nokia 5110:
3. Biblioteka kodera:
4. Biblioteka TimerOne:

Na początku przyjrzymy się funkcji drawMenu. Ta funkcja jest odpowiedzialna za rysowanie menu na wyświetlaczu. Ta funkcja jest wywoływana co kilka milisekund, więc jeśli nastąpi zmiana w menu, ta funkcja jest odpowiedzialna za aktualizację menu na ekranie.

int menuitem = 1;

int frame = 1; int strona = 1; int lastMenuItem = 1;

Istnieją również 3 bardzo ważne zmienne globalne, strona zmiennych, zmienna menuitem i zmienna ramka. Strona zmiennej pamięta, który ekran interfejsu użytkownika jest wyświetlany na ekranie. Jeśli zmienna strony ma wartość 1, znajdujemy się na głównym ekranie interfejsu użytkownika, a jeśli zmienna ma wartość 2, znajdujemy się na ekranie dodatkowego interfejsu użytkownika, na którym ustawiamy wartość zmiennej. Pozycja menu zapamiętuje wybraną pozycję menu. Jeśli więc jego wartość wynosi 1, pierwszy element menu jest zaznaczony, więc funkcja drawMenu musi narysować ten element menu jako czarny z białymi literami. Jeśli pozycja menu ma wartość 2, wybierany jest drugi element menu i tak dalej. Zmienna ramki zapamiętuje, która część menu jest wyświetlana na ekranie. Ponieważ utworzone przez nas menu zawiera 6 elementów i możemy wyświetlać tylko 3 z nich naraz, musimy wiedzieć, które elementy są wyświetlane na ekranie. Zmienna ramki mówi nam dokładnie to. Jeśli zmienna ramki ma wartość 1, wyświetlamy trzy pierwsze elementy menu, jeśli jest to 2, wyświetlamy elementy 2,3,4 i tak dalej.

Próbowałem zmodyfikować kod tak łatwo, jak to możliwe, więc stworzyłem kilka zmiennych globalnych, które zawierają nazwy elementów menu. W ten sposób można łatwo tworzyć własne menu bez wyszukiwania w kodzie.

String menuItem1 = "Kontrast";

String menuItem2 = „Tom”; String menuItem3 = „Język”; String menuItem4 = "Trudność"; String menuItem5 = "Light: ON"; String menuItem6 = „Reset”;

boolean backlight = true; int kontrast = 60; int volume = 50;

Język napisów 3 = {"EN", "ES", "EL"}; int selectedLanguage = 0;

Trudność ciągu 2 = {"EASY", "HARD"}; int selectedDifficulty = 0;

Na początku inicjujemy wszystkie zmienne globalne, które są potrzebne w kodzie. Następnie inicjujemy wyświetlacz. W funkcji pętli najpierw wywołujemy funkcję drawMenu, aby narysować menu na ekranie. Następnie odczytujemy wartość z enkodera obrotowego i sprawdzamy, czy przycisk jest wciśnięty. Na przykład, jeśli jesteśmy na głównym ekranie interfejsu użytkownika i wybrano pierwszy element menu, jeśli wartość z enkodera obrotowego wzrosła, zmienna menuitem zwiększa się iw następnej pętli funkcja drawMenu narysuje drugi element menu, tak jak został wybrany. Jeśli teraz naciśniemy przycisk kodera obrotowego, przechodzimy do drugiej strony, na której ustawiamy wartość zmiennej. Ponownie za pomocą kodera obrotowego możemy zwiększyć lub zmniejszyć wartość zmiennej. Jeśli naciśniemy przycisk, nawigujemy z powrotem do strony menu głównego, a zmienna strony zmniejsza się.

To jest podstawowa idea tego menu. Postępujemy według tej samej procedury dla wszystkich pozycji menu i stron. Kod jest złożony, ma ponad 400 linii. Wydaje się to skomplikowane, ale jeśli sam spróbujesz, zrozumiesz je łatwiej i będziesz mógł je zmienić, rozwinąć i wykorzystać we własnych projektach. Jak zawsze możesz znaleźć załączony kod tutaj.

Krok 6: Testowanie projektu

Jeśli załadujemy kod, zobaczymy, że projekt działa zgodnie z oczekiwaniami. Możemy poruszać się po menu w górę iw dół za pomocą wału i możemy wybrać dowolny element menu, naciskając przycisk kodera obrotowego. Jakie to jest świetne!

Teraz, gdy wiemy, jak tworzyć menu dla wyświetlaczy LCD Nokia 5110, możemy dodać więcej funkcji do naszych projektów i uczynić je bardziej przyjaznymi dla użytkownika. To proste menu, które zbudowaliśmy dzisiaj, można jednak ulepszyć. Moglibyśmy używać przerwań zamiast stale sprawdzać stan przycisków. W ten sposób możemy zmniejszyć zużycie energii w projekcie i uczynić kod czystszym. Niedługo przygotuję film na temat przerwań, więc bądź na bieżąco. Chciałbym usłyszeć twoją opinię na temat tego projektu menu.Czy uważasz, że jest to przydatne i planujesz używać menu w dowolnym projekcie. Poniżej zamieszczaj swoje przemyślenia i pomysły, dzięki!