PixelWall: 7 kroków (ze zdjęciami)

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

Czy znasz projekt Pixel-Table? Wpadłem na pomysł, aby zrealizować taką pikselową rzecz, ale nie jako stół, zamiast umieścić ją na ścianie.

Abym mógł leżeć na kanapie i grać na niej, relaksując się.:)

Zaimplementowane gry to:

• Tetris
• Space Invaders
• Wąż
• Rysowanie pikseli

dodatkowe funkcje to:

• Pokaż aktualny czas
• Pokaż kolorowe animacje

PixelWall ma ESP8266, więc może łączyć się z moją domową siecią WLAN. Ale możliwe jest również wykorzystanie PixelWall jako punktu dostępowego i bezpośrednie połączenie z nim.

Aby ułatwić korzystanie z mojego PixelWall, ściana udostępnia stronę internetową do sterowania po podłączeniu. Wszystkie aplikacje można kontrolować/odtwarzać za pośrednictwem strony internetowej. Nie jest więc konieczne instalowanie żadnego oprogramowania do użytku.

Dodatkowo jest kontroler NES, który ułatwia granie w gry.

Otwarte źródło

Całe oprogramowanie i rysunki mechaniczne, które umieściłem na github: https://github.com/C3MA/PixelWallFeel swobodnie używać go do własnego projektu.

Krok 1: Zaczynając od elektroniki

Z innego projektu istnieje istniejąca płytka drukowana z diodami LED WS2812. Płytka ma 3 rzędy z 12 diodami LED w każdym rzędzie.

Zdecydowałem się użyć tej płytki 6 razy. Dostaję więc matrycę LED 12x18.

Pierwszym krokiem było przylutowanie wszystkich 216 diod LED, około 100 kondensatorów i ESP8266.

Lutowanie ręczne zajęło około 10 godzin.

Po pierwszym szybkim teście okazało się: wszystko działa.

Więc możemy przejść do części mechanicznej.

Krok 2: Tworzenie mechanika

Przede wszystkim potrzebujemy separatora dla każdego piksela. Pomysł polega na połączeniu poziomego i pionowego paska za pomocą wycięcia w kształcie litery V.

Każda opaska ma grubość 3mm i wysokość 17mm. Wycinane są z płyty HDF za pomocą wycinarki laserowej.

Wszystkie szkice do wycinarki laserowej są narysowane we FreeCad (o nazwie „Leiste” w folderze mechanik projektu github)

Siatka jest podana przez układ PCB. Ma szerokość kolumny 28 mm i wysokość wiersza 31 mm.

Następne pytanie: Jak naprawić opaski na płytce drukowanej? Klejenie nie jest dobrym pomysłem, ponieważ powinno dać się zdemontować, jeśli coś jest wadliwe. Więc postanowiłem to schrzanić. Ale śruba rozdzieli cienki pasek o grubości 3 mm. Wydrukowałem więc drukarką 3D kieszeń na opaskę (jest to część o nazwie "Halter" w projekcie github). To zadziałało całkiem nieźle, aby naprawić je na płytce drukowanej.

Następnym krokiem jest zdobycie do niego ramki. Istnieje kilka sklepów internetowych, które oferują wycinanie pojedynczych ramek do zdjęć. Zamówiłem więc ramkę o wymiarach 343mm x 565mm.

Ramka ma dodatkowo od spodu otwór na zasilacz.

Płytę czołową z pleksiglasu również zamówiłem przez Internet. Jest to opal WN770 Milchglasoptik LD45% rozmiar: 567x344x2mm

Ma przezierność 45%.

Składanie wszystkich części w ramę.

Na koniec przykręcimy z tyłu kilka pasków, aby wszystko było naprawione i nie wypadało.

Aby mieć opcję obsługi pixelWall bez komunikacji WLAN, stworzyłem podłączany panel sterowania, który można opcjonalnie wstawić po prawej stronie ramki (nazywany „Bedieneinheit” w projekcie github).

Krok 3: Oprogramowanie - podstawy

Jednym z zastosowań jest granie w gry na PixelWall.

Ale pisanie gry pikselowej zawsze będzie wymagało przydatnego środowiska debugowania. Nie znam żadnego sposobu na debugowanie kontrolera ESP8266 w odpowiedni sposób. Postanowiłem więc zasymulować cały kod na moim komputerze. Kod ESP jest napisany w Arduino C++, więc do symulacji na PC użyłem języka Visual Studio C++/CLI. Istnieją pewne różnice między standardowym C++ a językiem C++/CLI. Np. w C++/CLI nie można stworzyć obiektu typu String, ze względu na wyrzucanie śmieci nie wolno tworzyć obiektu ani referencji/wskaźnika do takiego obiektu. W C++/CLI musisz użyć uchwytów: String^. Ale takie uchwyty nie istniały w standardzie C++. Musiałem więc być kreatywny, aby połączyć oba światy. Rozwiązałem to, tworząc własny plik Arduino.h do symulacji. Ten plik po prostu nadpisuje w symulacji wszystkie łańcuchy poprzez zdefiniowanie "#define String String^". Nie jest to typowy sposób, ale działa:) Z wyjątkiem kilku małych przełączników kompilatora, cały kod ESP można kompilować w Visual Studio C++/CLI.

Matryca LED

Pierwsza klasa jaką napisałem to klasa LED-Matrix. Ta klasa obsługuje sterowanie i mapowanie diod LED WS2812.

Ta klasa została napisana dwa razy: raz dla kontrolera ESP8266 (LEDMatrixArduino.cpp) i druga, która będzie sterować kształtami na GUI Form w symulacji (LEDMatrixGUI.cpp).

Ta klasa zapewnia kilka podstawowych metod ustawiania i czyszczenia poszczególnych diod LED według ich kolumn i wierszy.

Dodatkowo zapewnia funkcję setBrightness. Ta wartość będzie brana pod uwagę, jeśli zostanie ustawiona dioda LED. Dzięki temu wszystkie polecenia zestawu LED mogą być wykonywane z pełną jasnością. Na przykład: Jeśli jasność jest ustawiona na 50%, a funkcja setLed() zostanie wywołana z RGBColor(255, 255, 255), ustawi LED na 127, 127, 127.

Panel LED

Na szczycie klasy LED Matrix umieściłem klasę LED Panel. Ta klasa zapewnia przydatne funkcje dla dowolnej aplikacji. Zapewnia dwie niezależne warstwy. Może to być pomocne dla aplikacji. Na przykład w grze tetris: layer0 oznacza umocowane kamienie na dole, a layer1 wyświetla spadający kamień. Tak więc w każdym cyklu kamień spada o jeden piksel na dół, aplikacja może po prostu wyczyścić warstwę1 i narysować kamień w nowej pozycji. Nie jest konieczne przerysowywanie wszystkich umocowanych kamieni na dole.

Dodatkowo panel zapewnia

printImage - aby wydrukować niektóre ikony, takie jak emotikony lub symbol WLANprintDigit - aby wydrukować jedną cyfrę na określonej pozycjiprintFormatedNumber - aby wydrukować liczbę z prefiksami zerosprintNumber - aby wydrukować liczbę całkowitąprintLineH - pozioma linia o określonej długościprintLineV - pozioma linia o określonej długości

Krok 4: Oprogramowanie – koncepcja aplikacji

Ogólna koncepcja ściany pikselowej to:

• Każda aplikacja ma swoją nazwę
• Aplikację uruchamia się, wywołując adres URL pixelWall zawierający nazwę aplikacji (na przykład: 192.168.4.1/tetris)
• Adres URL może również zawierać parametry GET, które zostaną przekazane do aplikacji
• Każda aplikacja musi dostarczać stronę internetową, która jest wyświetlana w przeglądarce.
• Ta strona internetowa może opcjonalnie otworzyć połączenie websocket z aplikacją w celu szybkiej interakcji
• Aplikacja może używać tego połączenia przez gniazdo sieciowe do komunikacji zwrotnej z frontendem internetowym.
• Oprócz interfejsu webowego aplikacja pobiera dodatkowo zdarzenia przycisków z centrali i kontrolera NES.

Interfejs aplikacji

Aby ułatwić tworzenie nowych aplikacji dla PixelWall, stworzyłem interfejs dla aplikacji o nazwie „IPixelApp.h”. Ten interfejs zawiera 8 definicji:

• wirtualna pustka start() = 0;
• wirtualny koniec pustki() = 0;
• wirtualna pętla void() = 0;
• virtual void newWebsocketData(uint8_t * payload, size_t lenght) = 0;
• wirtualny WebsiteResponse_t getWebsiteResponse (parametr ciągu) = 0;
• wirtualny przycisk voidEvent() = 0;
• wirtualny zegar próżniowyTick() = 0;
• wirtualny String getName() = 0;

start/end - ta funkcja jest wywoływana, jeśli aplikacja zostanie uruchomiona/zakończona, ponieważ uruchomiona zostanie inna aplikacja

loop - ta funkcja jest wywoływana z głównej pętli programu głównego. To wywołanie jest nieregularne i poza przerwaniem.

newWebsocketData - ta funkcja jest wywoływana, jeśli frontend WWW wysłał dane.

getWebsiteResponse - jest używane przez główny program do pobrania strony internetowej, która ma być odpowiedzią na żądanie.

buttonEvent - jest wywoływane, jeśli dowolny przycisk na panelu sterowania został naciśnięty lub zwolniony.

timerTick - ta funkcja jest wywoływana co 10ms, wyzwalana przez przerwanie timera. Może być używany do podstawy czasu, ale nie może zawierać żadnych elementów czasochłonnych, ponieważ jest to kontekst przerwań.

getName - powinno zwrócić nazwę aplikacji dla adresu URL

Krok 5: Oprogramowanie - aplikacje

W obecnej wersji zaimplementowanych jest 7 aplikacji:

Domyślna aplikacja

Jest to specjalna aplikacja, która wyświetla aktualny stan sieci WLAN PixelWall. Jeśli ściana może połączyć się z obecną siecią WLAN, wyświetli adres IP, który uzyskał z sieci.

Jeśli nie było to możliwe (nie ma skonfigurowanego ssid lub nie ma sieci WLAN lub hasło jest błędne), otworzy się Accesspoint. W takim przypadku możesz połączyć się z PixelWall przez domyślny adres IP punktu dostępu z ESP8266: 192.168.4.1

Na interfejsie internetowym ta aplikacja zawiera 6 przycisków. Naciskając przycisk możesz uruchomić odpowiednią Aplikację.

Aplikacja Ustawienia

Ta aplikacja do konfiguracji SSID sieci WLAN i hasła. Po prostu wstaw poświadczenia swojej sieci WLAN, a przy następnym uruchomieniu PixelWill spróbuje połączyć się z tą siecią WLAN.

Gry

W PixelWall zaprogramowane są trzy klasyczne gry:

• Tetris
• Wąż
• Space Invaders

We wszystkie gry można grać za pośrednictwem interfejsu internetowego lub kontrolera NES.

Aplikacja obrazu

Jest to aplikacja, która wyświetla kolory na PixelWall. Możesz wybrać, czy ma to być ruchoma tęcza, blaknące różne kolory, pokazywanie statycznego koloru lub po prostu wyświetlanie losowych kolorowych pikseli.

Piksel to

Dzięki tej aplikacji możesz ustawić każdy piksel osobno, dotykając palcem interfejsu internetowego. Możesz więc narysować jakieś zwariowane obrazki:)

Krok 6: Sterowanie za pomocą rozszerzenia Twitch

Na Twitchu jest rozszerzenie o nazwie GetInTouch. To rozszerzenie pozwala zintegrować projekty Arduino z transmisją na żywo, dzięki czemu widzowie mogą kontrolować twoje arduino podczas przesyłania strumieniowego.

Biblioteka Arduino do tego jest napisana dla Arduinos. Okazało się jednak, że prawdopodobnie działa też na ESP8266.

Aby użyć go w Strumieniu, konieczne są następujące kroki:

• Zintegruj bibliotekę GetInTouch z kodem (zobacz samouczek)
• Połącz pixelWall z komputerem za pomocą konwertera USB/RS232 (który służy również do flashowania ESP)
• Zainstaluj aplikację GetInTouch z witryny internetowej
• Zainstaluj rozszerzenie GetInTouch na swoim kanale Twitch (zobacz samouczek)

Krok 7: Sterowanie przez kontroler Nintendo NES

Po pewnym czasie okazuje się, że granie na dotykowym telefonie komórkowym nie jest takie proste. Od czasu do czasu przegapiasz przyciski, ponieważ nie masz informacji zwrotnej na swoim palcu, niezależnie od tego, czy jesteś nad przyciskiem, czy nie. Dodatkowo czasami komunikacja Websocket może przeciekać przez krótki czas.

Dlatego zdecydowałem się na zakup starego kontrolera Nintendo NES. Ten kontroler ma bardzo prosty interfejs. To tylko rejestr przesuwny 4021, który działa z 3, 3V. Można go więc podłączyć bezpośrednio do ESP8266.

Wszystkie zdarzenia dotyczące przycisków na kontrolerze zostały przekazane do uruchomionej aplikacji za pomocą funkcji buttonEvent().