PixelWall: 7 stappen (met afbeeldingen)

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Kent u het Pixel-Table-project? Ik had het idee om zo'n pixelding te realiseren, maar niet als tafel, maar aan de muur.

Zodat ik lekker op de bank kan liggen en er wat spelletjes op kan spelen terwijl ik ontspan.:)

Geïmplementeerde spellen zijn:

• Tetris
• Space Invaders
• Slang
• Pixel tekenen

extra functies zijn:

• Toon huidige tijd
• Kleuranimaties weergeven

De PixelWall heeft een ESP8266, zodat hij verbinding kan maken met mijn thuis-WLAN. Maar het is ook mogelijk om de PixelWall als access point te gebruiken en er direct op aan te sluiten.

Om het gebruik van mijn PixelWall gemakkelijk te maken, levert de muur een Website voor controle na het aansluiten. Alle apps zijn bestuurbaar/afspeelbaar via de webpagina. Het is dus niet nodig om software te installeren voor gebruik.

Daarnaast is er een NES-controller die het spelen van de games gemakkelijker maakt.

Open source

Alle software en mechanische tekeningen heb ik op github gezet: https://github.com/C3MA/PixelWallGebruik het gerust voor je eigen project.

Stap 1: Beginnen met de elektronische

Van een ander project is er een bestaande print met WS2812 LED's. De print heeft 3 rijen met 12 LED's per rij.

Ik besloot deze print 6 keer te gebruiken. Dus ik krijg een 12x18 LED-matrix.

De eerste stap was het solderen van alle 216 LED's, ongeveer 100 condensatoren en een ESP8266.

Het handmatig solderen kostte ongeveer 10 uur.

Na een eerste snelle test was het duidelijk: alles werkt.

Dus we kunnen naar het mechanische gedeelte gaan.

Stap 2: De monteur maken

Allereerst hebben we voor elke pixel een seperator nodig. Het idee is om de horizontale en verticale band via een V-snede bij elkaar te brengen.

Elke band heeft een dikte van 3 mm en een hoogte van 17 mm. Ze worden met een lasercutter uit een HDF-plaat gesneden.

Alle schetsen voor de lasercutter zijn getekend in FreeCad (genaamd "Leiste" in de mechanische map van het github-project)

Het raster wordt gegeven door de lay-out van de printplaat. Het heeft een kolombreedte van 28 mm en een rijhoogte van 31 mm.

De volgende vraag is: Hoe de banden op de PCB te bevestigen? Lijmen is niet zo'n goed idee, omdat het uit elkaar moet kunnen als er iets defect is. Dus besloot ik het te verknallen. Maar een schroef zal de 3 mm dunne band splitsen. Dus ik heb met een 3D-printer een zak voor de band geprint (dit is het gedeelte met de naam "Halter" in het github-project). Dit werkte redelijk goed om ze op de PCB te bevestigen.

De volgende stap is om er een frame voor te krijgen. Er zijn enkele online winkels die aanbieden om individuele fotolijsten te snijden. Dus bestelde ik een frame met de maat 343mm x 565mm.

Het frame krijgt een extra gat aan de onderkant voor de voeding.

De plexiglas frontplaat heb ik ook online besteld. Het is een WN770 opaal Milchglasoptik LD45% maat: 567x344x2mm

Het heeft een doorschijnendheid van 45%.

Alle onderdelen samenvoegen in het frame.

Aan het einde worden er aan de achterkant enkele strips geschroefd, zodat alles vast zit en er niet uit kan vallen.

Om een optie te hebben voor bediening van de pixelWall zonder enige WLAN-communicatie, heb ik een plugbaar bedieningspaneel gemaakt dat optioneel aan de rechterkant van het frame kan worden geplaatst (in het github-project "Bedieneinheit" genoemd).

Stap 3: Software - Basis

Een van de usecases is het spelen van games op de PixelWall.

Maar het schrijven van een pixelgame heeft altijd een handige debugging-omgeving nodig. Ik weet geen enkele manier om de ESP8266-controller op een geschikte manier te debuggen. Dus besloot ik de hele code op mijn pc te simuleren. De ESP-code is geschreven in Arduino C++, dus ik heb Visual Studio C++/CLI-taal gebruikt voor de simulatie op pc. Er zijn enkele verschillen tussen standaard C++ en de C++/CLI-taal. In C++/CLI kunt u bijvoorbeeld geen object van het type String maken, vanwege de garbagecollection is het niet toegestaan om een object of verwijzing/aanwijzer naar een dergelijk object te maken. In C++/CLI moet je handvatten gebruiken: String^. Maar dergelijke handvatten bestonden niet in de C ++ -standaard. Ik moest dus creatief zijn om beide werelden bij elkaar te brengen. Ik heb dit opgelost door een eigen Arduino.h-bestand te maken voor de simulatie. Dit bestand overschrijft in de simulatie alle strings door een "#define String String^" te definiëren. Dit is geen gebruikelijke manier, maar het werkt:) Behalve enkele kleine compilerschakelaars is alle ESP-code dan compileerbaar in Visual Studio C++/CLI.

LED-matrix

De eerste klasse die ik schreef is de LED-Matrix klasse. Deze klasse zorgt voor de besturing en mapping van de WS2812 LED's.

Deze klasse is twee keer geschreven: een keer voor de ESP8266-controller (LEDMatrixArduino.cpp) en een andere die vormen op de formulier-GUI in de simulatie zal besturen (LEDMatrixGUI.cpp).

Deze klasse biedt enkele basismethoden voor het instellen en wissen van een individuele LED door middel van zijn kolom en rij.

Daarnaast biedt het een setBrightness-functie. Met deze waarde wordt rekening gehouden als er een LED wordt ingesteld. Zo kunnen alle LED-set-commando's met volledige helderheid worden uitgevoerd. Bijvoorbeeld: Als de helderheid is ingesteld op 50% en de functie setLed() wordt aangeroepen met RGBColor(255, 255, 255), wordt de LED ingesteld op 127, 127, 127.

LED-paneel

Bovenop de LED Matrix klasse heb ik een LED Paneel klasse gezet. Deze klasse biedt een aantal nuttige functionaliteiten voor elke toepassing. Het biedt twee onafhankelijke lagen. Dit kan handig zijn voor de toepassing. Bijvoorbeeld op tetris-spel: laag 0 is voor de vaste stenen op de bodem en laag 1 is om de vallende steen weer te geven. Dus elke cyclus valt de steen één pixel naar de bodem, de applicatie kan laag1 gewoon wissen en de steen op zijn nieuwe positie tekenen. Het is niet nodig om alle vaste stenen onderaan opnieuw te tekenen.

Bovendien biedt het paneel:

printImage - om enkele pictogrammen zoals smileys of WLAN af te drukken symbolprintDigit - om één cijfer op een specifieke positie af te drukkenprintFormatedNumber - om een getal af te drukken met voorvoegsels zerosprintNumber - om een geheel getal af te drukkenprintLineH - horizontale lijn met specifieke lengteprintLineV - horizontale lijn met specifieke lengte

Stap 4: Software - Applicatieconcept

Het algemene concept voor de pixel Wall is:

• Elke applicatie heeft zijn eigen naam
• Een applicatie wordt gestart door de pixelWall-URL aan te roepen inclusief de applicatienaam (bijvoorbeeld: 192.168.4.1/tetris)
• De URL kan ook GET-parameters hebben die naar de applicatie worden doorgestuurd
• Elke applicatie moet een website opleveren die in de browser wordt weergegeven.
• Deze website kan optioneel een websocket-verbinding met de applicatie openen voor snelle interacties
• De applicatie kan deze websocket-verbinding gebruiken om terug te communiceren naar de web-frontend.
• Naast de webinterface krijgt de applicatie ook drukknopgebeurtenissen van het bedieningspaneel en de NES-controller.

Applicatie-interface

Om het gemakkelijk te maken om nieuwe applicaties voor de PixelWall te ontwikkelen, heb ik een interface gemaakt voor applicaties met de naam "IPixelApp.h". Deze interface bevat 8 definities:

• virtuele leegte start() = 0;
• virtuele leegte end() = 0;
• virtuele lege lus() = 0;
• virtuele leegte newWebsocketData(uint8_t * payload, size_t lengte) = 0;
• virtuele WebsiteResponse_t getWebsiteResponse (stringparameter) = 0;
• virtuele leegte buttonEvent() = 0;
• virtuele leegte timerTick() = 0;
• virtuele String getName() = 0;

start/end - deze functie wordt aangeroepen als de applicatie wordt gestart/beëindigd omdat een andere applicatie start

loop - deze functie wordt aangeroepen vanuit de hoofdlus van het hoofdprogramma. Deze oproep is onregelmatig en buiten een interrupt.

newWebsocketData - deze functie wordt aangeroepen als de webfrontend gegevens heeft verzonden.

getWebsiteResponse - dit wordt gebruikt door het hoofdprogramma om de webpagina te krijgen die op het verzoek moet worden gereageerd.

buttonEvent - dit wordt aangeroepen als een knop op het bedieningspaneel is ingedrukt of losgelaten.

timerTick - deze functie wordt elke 10 ms aangeroepen, geactiveerd door een timer-interrupt. Het kan worden gebruikt voor tijdbasis, maar mag geen tijdintensieve dingen bevatten, omdat het een interrupt-context is.

getName - dit zou de naam van de applicatie voor de URL moeten retourneren

Stap 5: Software - Toepassingen

De volgende 7 applicaties zijn geïmplementeerd in de huidige versie:

Standaard app

Dit is een speciale app die de huidige WLAN-status van de PixelWall weergeeft. Als de muur verbinding zou kunnen maken met een aanwezig WLAN, wordt het IP-adres weergegeven dat het van het netwerk heeft gekregen.

Als het niet mogelijk was (geen ssid ingesteld of het WLAN is niet aanwezig of het wachtwoord is verkeerd) zal het een Accesspoint openen. In dit geval kunt u verbinding maken met de PixelWall via het standaard Accesspoint IP van ESP8266: 192.168.4.1

Op de webinterface presenteert deze app 6 knoppen. Door op de knop te drukken kunt u de betreffende applicatie starten.

Instellingen-app

Deze app voor het instellen van de WLAN SSID en het wachtwoord. Voer gewoon de inloggegevens van uw WLAN in en bij de volgende start van de PixelWill zal het proberen verbinding te maken met dit WLAN.

Spellen

Er zijn drie klassieke games geprogrammeerd in de PixelWall:

• Tetris
• Slang
• Space Invaders

Alle games zijn te spelen via de webinterface of met de NES-controller.

Afbeeldingsapp

Dit is een app die kleuren weergeeft op de PixelWall. Je kunt kiezen of het een bewegende regenboog moet zijn, verschillende kleuren vervagen, statische kleuren tonen of gewoon willekeurige gekleurde pixels weergeven.

Pixel It

Met deze App kun je elke pixel apart instellen door met je vinger op de webinterface te tikken. Dus je kunt wat gekke foto's maken:)

Stap 6: Bediening via Twitch-extensie

Er is een extensie op Twitch genaamd GetInTouch. Deze extensie maakt het mogelijk om Arduino-projecten te integreren in je livestream, zodat kijkers je arduino kunnen bedienen tijdens het streamen.

De Arduino-bibliotheek hiervoor is geschreven voor Arduinos. Maar het bleek dat hij ook goed op ESP8266 draait.

Om het in de Stream te gebruiken zijn de volgende stappen nodig:

• Integreer de GetInTouch-bibliotheek in de code (zie zelfstudie)
• Verbind de pixelWall met je pc via de USB/RS232-converter (die ook wordt gebruikt voor het flashen van de ESP)
• Installeer de GetInTouch-toepassing vanaf de website
• Installeer GetInTouch Extension op je Twitch-kanaal (zie tutorial)

Stap 7: Bediening door Nintendo NES-controller

Na een tijdje te hebben gebruikt, blijkt dat spelen op een mobiele telefoon met aanraking niet zo eenvoudig is. Van tijd tot tijd mis je de knoppen omdat je geen feedback op je vinger hebt of je over de knop bent of niet. Bovendien kan Websocket-communicatie soms korte tijd lekken.

Daarom besloot ik een oude Nintendo NES-controller te kopen. Deze controller heeft een zeer eenvoudige interface. Het is gewoon een 4021 schuifregister dat werkt met 3, 3V. Hij kan dus rechtstreeks op de ESP8266 worden aangesloten.

Alle knopgebeurtenissen op de controller werden doorgestuurd naar de actieve toepassing via de functie buttonEvent().