PixelWall: 7 pași (cu imagini)

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Cunoașteți proiectul Pixel-Table? Am avut ideea să realizez un astfel de lucru cu pixelii, dar nu ca o masă, ci să-l pun pe perete.

Ca să mă pot întinde pe canapea și să joc niște jocuri pe ea în timp ce mă relaxez.:)

Jocurile implementate sunt:

• Tetris
• Space Invaders
• Şarpe
• Pixel Draw

funcțiile suplimentare sunt:

• Afișați ora curentă
• Afișați animații color

PixelWall are un ESP8266, astfel încât să se poată conecta la WLAN-ul meu de acasă. Dar este, de asemenea, posibil să utilizați PixelWall ca punct de acces și să vă conectați direct la acesta.

Pentru a ușura utilizarea PixelWall-ului meu, peretele oferă un site web pentru control după conectare. Toate aplicațiile sunt controlabile / redabile prin intermediul paginii web. Deci, nu este necesar să instalați niciun software pentru utilizare.

În plus, există un controler NES care facilitează jocul.

Sursa deschisa

Toate programele și desenele mecanice pe care le-am pus pe github: https://github.com/C3MA/PixelWallFeel liberi să le folosiți pentru propriul dvs. proiect.

Pasul 1: Începând cu dispozitivul electronic

Dintr-un alt proiect există un PCB existent cu LED-uri WS2812. PCB-ul are 3 rânduri cu 12 LED-uri pe fiecare rând.

Am decis să folosesc acest PCB de 6 ori. Așa că primesc o matrice LED de 12x18.

Primul pas a fost să lipiți toate cele 216 de LED-uri, aproximativ 100 de condensatori și un ESP8266.

Lipirea manuală a necesitat aproximativ 10 ore.

După un prim test rapid, sa constatat: totul funcționează.

Deci, putem merge la partea mecanică.

Pasul 2: Crearea mecanicului

În primul rând avem nevoie de un separator pentru fiecare pixel. Ideea este de a pune împreună banda orizontală și verticală printr-o tăietură în V.

Fiecare bandă are o grosime de 3 mm și o înălțime de 17 mm. Acestea sunt tăiate de pe o placă HDF de un laser.

Toate scetch-urile pentru tăietorul laser sunt desenate în FreeCad (denumit „Leiste” în folderul mecanic al proiectului github)

Grila este dată de aspectul PCB-ului. Are o lățime a coloanei de 28 mm și înălțimea rândurilor de 31 mm.

Următoarea întrebare este: Cum se fixează benzile de pe PCB? Lipirea nu este o idee atât de bună, deoarece ar trebui să fie posibilă demontarea dacă ceva este defect. Așa că am decis să o înșurubez. Dar un șurub va împărți banda subțire de 3 mm. Așa că am imprimat cu o imprimantă 3D un buzunar pentru bandă (aceasta este partea numită „Halter” din proiectul github). Acest lucru a funcționat destul de bine pentru a le fixa pe PCB.

Următorul pas este să obțineți un cadru pentru acesta. Există unele magazine online care se oferă să taie rame individuale. Așa că am comandat un cadru cu dimensiunea 343mm x 565mm.

Cadrul are o gaură suplimentară în partea inferioară pentru alimentarea cu energie electrică.

Placa frontală din plexiglas am comandat-o și online. Este un WN770 opal Milchglasoptik LD45% dimensiune: 567x344x2mm

Are o transluciditate de 45%.

Așezarea tuturor părților împreună în cadru.

La sfârșit vor fi înșurubate niște benzi în spate, astfel încât totul să fie fixat și să nu poată cădea.

Pentru a avea o opțiune pentru operabilitatea pixelWall fără nicio comunicare WLAN, am creat un panou de control care poate fi inserat opțional în partea dreaptă a cadrului (numit „Bedieneinheit” în proiectul github).

Pasul 3: Software - Noțiuni de bază

Unul dintre cazurile de utilizare este să joci jocuri pe PixelWall.

Dar scrierea unui joc de pixeli va avea întotdeauna nevoie de un mediu de depanare util. Nu știu nicio modalitate de a depana controlerul ESP8266 într-un mod adecvat. Așa că am decis să simulez întregul cod pe computerul meu. Codul ESP este scris în Arduino C ++, așa că am folosit limbajul Visual Studio C ++ / CLI pentru simularea pe PC. Există unele diferențe între limbajul C ++ standard și limbajul C ++ / CLI. De exemplu, în C ++ / CLI nu puteți crea un obiect de tip String, datorită colectării gunoiului nu este permis să creați un obiect sau referință / pointer la un astfel de obiect. În C ++ / CLI trebuie să utilizați mânere: Șir ^. Dar astfel de mânere nu existau în standardul C ++. Așa că a trebuit să fiu creativ pentru a aduce împreună ambele lumi. Am rezolvat acest lucru creând un fișier Arduino.h propriu pentru simulare. Acest fișier suprascrie în simulare toate șirurile printr-o definire „#define String String ^”. Acesta nu este un mod obișnuit, dar funcționează:) Cu excepția unor comutatoare mici de compilator, tot codul ESP este mai mult decât compilabil în Visual Studio C ++ / CLI.

LED Matrix

Prima clasă pe care am scris-o este clasa LED-Matrix. Această clasă se ocupă de controlul și maparea LED-urilor WS2812.

Această clasă a fost scrisă de două ori: o dată pentru controlerul ESP8266 (LEDMatrixArduino.cpp) și alta care va controla formele de pe formularul GUI din simulare (LEDMatrixGUI.cpp).

Această clasă oferă câteva metode de bază pentru setarea și ștergerea unui LED individual de coloana și rândul său.

În plus, oferă o funcție setBrightness. Această valoare va fi luată în considerare dacă va fi setat un LED. Deci, toate comenzile setate cu LED-uri pot fi realizate cu luminozitate maximă. De exemplu: Dacă luminozitatea este setată la 50% și funcția setLed () este apelată cu RGBColor (255, 255, 255) va seta LED-ul la 127, 127, 127.

Panou LED

În plus față de clasa LED Matrix am introdus o clasă de panou LED. Această clasă oferă câteva funcții utile pentru orice aplicație. Oferă două straturi independente. Acest lucru poate fi util pentru aplicație. De exemplu, în jocul Tetris: layer0 este pentru pietrele fixe de pe fund, iar layer1 este pentru a afișa piatra care cade. Deci, la fiecare ciclu, piatra cade un pixel în partea de jos, aplicația poate șterge layer1 și poate atrage piatra pe noua sa poziție. Nu este necesar să redesenați toate pietrele fixe din partea de jos.

În plus, panoul oferă

printImage - pentru a imprima unele pictograme cum ar fi smileys sau simbolul WLANprintDigit - pentru a imprima o cifră într-o poziție specificăprintFormatedNumber - pentru a imprima un număr cu prefixe zerosprintNumber - pentru a imprima un număr întregprintLineH - linie orizontală cu lungime specificăprintLineV - linie orizontală cu lungime specifică

Pasul 4: Software - Concept de aplicație

Conceptul general pentru peretele pixel este:

• Fiecare aplicație are propriul nume
• O aplicație este pornită apelând adresa URL pixelWall, inclusiv numele aplicației (de exemplu: 192.168.4.1/tetris)
• Adresa URL poate avea, de asemenea, parametri GET care vor fi redirecționați către aplicație
• Fiecare aplicație trebuie să livreze un site web care este afișat în browser.
• Acest site web poate deschide, opțional, o conexiune websocket la aplicație pentru interacțiuni rapide
• Aplicația poate utiliza această conexiune web pentru a comunica înapoi cu frontend-ul web.
• Pe lângă interfața web, aplicația primește evenimente cu butoane suplimentare de la panoul de control și controlerul NES.

Interfața aplicației

Pentru a facilita dezvoltarea de noi aplicații pentru PixelWall, am creat o interfață pentru aplicațiile denumite „IPixelApp.h”. Această interfață conține 8 definiții:

• start virtual nul () = 0;
• sfârșitul golului virtual () = 0;
• bucla de gol virtual () = 0;
• virtual nul newWebsocketData (uint8_t * sarcină utilă, dimensiune_t lungime) = 0;
• virtual WebsiteResponse_t getWebsiteResponse (parametru șir) = 0;
• buton nul virtual Event () = 0;
• virtual void timerTick () = 0;
• șir virtual getName () = 0;

start / end - această funcție se numește dacă aplicația începe / se termină deoarece începe o altă aplicație

loop - această funcție este apelată din bucla principală a programului principal. Acest apel este neregulat și în afara unei întreruperi.

newWebsocketData - această funcție se numește dacă frontend-ul web a trimis date.

getWebsiteResponse - acesta este folosit de programul principal pentru a obține pagina web care ar trebui să răspundă cererii.

buttonEvent - se numește dacă a fost apăsat sau eliberat vreun buton de pe panoul de control.

timerTick - această funcție se numește la fiecare 10 ms, declanșată de o întrerupere a temporizatorului. Poate fi folosit ca bază de timp, dar nu trebuie să conțină lucruri care necesită mult timp, deoarece este un context de întrerupere.

getName - aceasta ar trebui să returneze numele aplicației pentru adresa URL

Pasul 5: Software - Aplicații

Următoarele 7 aplicații sunt implementate în versiunea curentă:

Aplicație implicită

Aceasta este o aplicație specială care afișează starea WLAN curentă a PixelWall. Dacă peretele se poate conecta la o rețea WLAN actuală, va afișa adresa IP pe care a primit-o de la rețea.

Dacă nu a fost posibil (nu are niciun SSID configurat sau WLAN-ul nu este prezent sau parola este greșită) va deschide un punct de acces. În acest caz, vă puteți conecta la PixelWall prin IP-ul implicit Accesspoint de la ESP8266: 192.168.4.1

Pe interfața web, această aplicație prezintă 6 butoane. Prin apăsarea butonului puteți porni aplicația corespunzătoare.

Aplicație Setări

Această aplicație pentru configurarea SSID-ului WLAN și a parolei. Introduceți doar acreditările WLAN-ului dvs. și la următorul start al PixelWill va încerca să se conecteze la această WLAN.

Jocuri

Există trei jocuri clasice programate în PixelWall:

• Tetris
• Şarpe
• Space Invaders

Toate jocurile pot fi jucate prin interfața web sau cu controlerul NES.

Aplicație imagine

Aceasta este o aplicație care afișează culori pe PixelWall. Puteți alege dacă ar trebui să fie un curcubeu în mișcare, decolorarea diferitelor culori, afișarea culorii statice sau afișarea doar a pixelilor aleatori.

Pixel It

Cu această aplicație puteți seta fiecare pixel separat atingând cu degetul pe interfața web. Deci, puteți desena câteva imagini craciale:)

Pasul 6: Controlul prin extensia Twitch

Există o extensie pe Twitch numită GetInTouch. Această extensie vă permite să integrați proiectele Arduino în fluxul live, astfel încât spectatorii să vă poată controla arduino în timpul streamingului.

Biblioteca Arduino pentru aceasta este scrisă pentru Arduinos. Dar sa dovedit că funcționează și pe ESP8266.

Pentru al utiliza în flux sunt necesari următorii pași:

• Integrați biblioteca GetInTouch în cod (consultați tutorialul)
• Conectați pixelWall la computer prin intermediul convertorului USB / RS232 (care este, de asemenea, utilizat pentru intermitent ESP)
• Instalați aplicația GetInTouch de pe site
• Instalați GetInTouch Extension pe canalul dvs. Twitch (consultați tutorialul)

Pasul 7: Control de către controlerul Nintendo NES

După ce l-ați folosit puțin timp, se pare că jocul pe telefonul mobil tactil nu este atât de ușor. Din când în când, vă lipsesc butoanele, deoarece nu aveți feedback asupra degetului, indiferent dacă sunteți deasupra butonului sau nu. În plus, uneori, comunicarea Websocket se poate scurge pentru o perioadă scurtă de timp.

Prin urmare, am decis să cumpăr un controler Nintendo NES vechi. Acest controler are o interfață foarte simplă. Este doar un registru de schimbare 4021 care rulează cu 3, 3V. Deci poate fi conectat direct la ESP8266.

Toate evenimentele butoanelor de pe controler au fost redirecționate către aplicația care rulează prin funcția buttonEvent ().