PixelWall: 7 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:59

Poznáte projekt Pixel-Table? Mal som nápad realizovať takú pixelovú vec, ale nie ako stôl, namiesto toho ju dať na stenu.

Aby som mohol ležať na gauči a pri relaxácii si na ňom zahrať nejaké hry.:)

Implementované hry sú:

• Tetris
• Vesmírni útočníci
• Had
• Pixel Draw

ďalšie funkcie sú:

• Zobraziť aktuálny čas
• Zobraziť farebné animácie

PixelWall má ESP8266, takže sa môže pripojiť k mojej domácej sieti WLAN. PixelWall je však možné použiť aj ako prístupový bod a priamo sa k nemu pripojiť.

Na uľahčenie používania mojej steny PixelWall poskytuje stena webovú stránku, ktorú je možné po pripojení ovládať. Všetky aplikácie je možné ovládať/prehrávať prostredníctvom webovej stránky. Nie je teda potrebné inštalovať žiadny softvér na použitie.

Navyše je tu ovládač NES, ktorý uľahčuje hranie hier.

Otvorený zdroj

Všetok softvér a mechanické výkresy, ktoré som vložil na github: https://github.com/C3MA/PixelWallFeel ho môžete zadarmo použiť na svoj vlastný projekt.

Krok 1: Začíname s elektronikou

Z iného projektu je existujúca doska plošných spojov s LED diódami WS2812. Doska plošných spojov má 3 rady s 12 LED diódami v každom rade.

Rozhodol som sa použiť túto DPS 6 krát. Takže dostanem maticu LED 12x18.

Prvým krokom bolo spájkovanie všetkých 216 LED diód, okolo 100 kondenzátorov a ESP8266.

Ručné spájkovanie trvalo asi 10 hodín.

Po prvom rýchlom teste sa zistilo: všetko funguje.

Prejdeme teda k mechanickej časti.

Krok 2: Vytvorenie mechanika

V prvom rade potrebujeme oddeľovač pre každý pixel. Ide o to, dať horizontálny a vertikálny pás dohromady pomocou V-rezu.

Každý pás má hrúbku 3 mm a výšku 17 mm. Sú rezané z platne HDF laserovým rezačom.

Všetky skice pre laserový rezač sú nakreslené vo FreeCad (s názvom „Leiste“v mechanickom priečinku projektu github)

Mriežka je daná rozložením DPS. Má šírku stĺpca 28 mm a výšku riadka 31 mm.

Ďalšou otázkou je: Ako opraviť pásy na doske plošných spojov? Lepenie nie je taký dobrý nápad, pretože v prípade chyby je možné ho rozobrať. Tak som sa rozhodol to pokaziť. Skrutka však rozdelí 3 mm tenký pás. 3D tlačiarňou som teda vytlačil vrecko pre pásmo (toto je časť s názvom „Ohlávka“v projekte github). To fungovalo celkom dobre na ich opravu na DPS.

Ďalším krokom je získanie rámca. Existuje niekoľko internetových obchodov, ktoré ponúkajú strih jednotlivých rámov obrazov. Objednal som si teda rám s rozmerom 343 mm x 565 mm.

Rám má na spodnej strane dodatočne otvor pre napájanie.

Prednú dosku z plexiskla som si tiež objednal online. Jedná sa o WN770 opál Milchglasoptik LD45% veľkosť: 567x344x2mm

Má priesvitnosť 45%.

Spojenie všetkých častí do rámu.

Na konci budú vzadu priskrutkované niektoré prúžky, aby bolo všetko pevné a nemohlo vypadnúť.

Aby som mal možnosť prevádzky PixelWall bez akejkoľvek WLAN komunikácie, vytvoril som zásuvný ovládací panel, ktorý je možné vložiť voliteľne na pravú stranu rámu (v projekte github sa nazýva „Bedieneinheit“).

Krok 3: Softvér - základy

Jedným z prípadov použitia je hranie hier na PixelWall.

Ale písanie pixelovej hry bude vždy potrebovať užitočné prostredie na ladenie. Neviem o žiadnom spôsobe, ako vhodným spôsobom odladiť ovládač ESP8266. Preto som sa rozhodol celý kód simulovať na svojom počítači. Kód ESP je napísaný v Arduino C ++, preto som na simuláciu na PC použil jazyk Visual Studio C ++/CLI. Medzi štandardným jazykom C ++ a jazykom C ++/CLI existujú určité rozdiely. Napríklad v C ++/CLI nemôžete vytvoriť objekt typu String, kvôli zberu odpadu nie je dovolené vytvoriť objekt alebo odkaz/ukazovateľ na takýto objekt. V C ++/CLI musíte použiť úchyty: String^. Takéto úchytky však v štandarde C ++ neexistovali. Musel som byť teda kreatívny, aby som spojil oba svety. Vyriešil som to vytvorením vlastného súboru Arduino.h pre simuláciu. Tento súbor v simulácii prepíše všetky reťazce pomocou definovaného reťazca „#define String String^“. Toto nie je bežný spôsob, ale funguje to:) S výnimkou niektorých malých prepínačov kompilátora je všetok kód ESP potom kompilovateľný v programe Visual Studio C ++/CLI.

LED matica

Prvá trieda, ktorú som napísal, je trieda LED-Matrix. Táto trieda zvláda ovládanie a mapovanie LED diód WS2812.

Táto trieda bola napísaná dvakrát: raz pre ovládač ESP8266 (LEDMatrixArduino.cpp) a ďalší, ktorý bude ovládať tvary vo formulári GUI v simulácii (LEDMatrixGUI.cpp).

Táto trieda poskytuje niekoľko základných spôsobov nastavenia a čistenia jednotlivých LED diód podľa stĺpcov a riadkov.

Navyše poskytuje funkciu setBrightness. Táto hodnota sa zohľadní, ak bude nastavená LED dióda. Všetky príkazy nastavené pomocou LED teda je možné vykonávať s plným jasom. Napríklad: Ak je jas nastavený na 50% a funkcia setLed () sa volá pomocou RGBColor (255, 255, 255), nastaví LED na 127, 127, 127.

LED panel

Na triedu LED Matrix som umiestnil triedu LED panelov. Táto trieda poskytuje niekoľko užitočných funkcií pre každú aplikáciu. Poskytuje dve nezávislé vrstvy. To môže byť pre aplikáciu nápomocné. Napríklad pri hre tetris: vrstva0 je pre pevné kamene na dne a vrstva1 zobrazuje padajúci kameň. Takže pri každom cykle kameň padne o jeden pixel na dno, aplikácia môže len vymazať vrstvu1 a nakresliť kameň na nové miesto. Nie je potrebné prekresliť všetky pevné kamene v spodnej časti.

Panel navyše poskytuje

printImage - tlač niektorých ikon, ako sú smajlíky alebo symbol WLAN, číslica - vytlačenie jednej číslice na konkrétnu pozíciuprintFormatedNumber - vytlačenie čísla s predponami zerosprintNumber - tlač celého čísla numberprintLineH - vodorovná čiara so špecifickou dĺžkouprintLineV - vodorovná čiara so špecifickou dĺžkou

Krok 4: Softvér - koncept aplikácie

Obecný koncept pixelovej steny je:

• Každá aplikácia má svoj vlastný názov
• Aplikáciu spustíte zavolaním adresy URL pixelWall vrátane názvu aplikácie (napríklad: 192.168.4.1/tetris)
• Adresa URL môže mať aj parametre GET, ktoré budú odoslané do aplikácie
• Každá aplikácia musí dodať webovú stránku, ktorá sa zobrazuje v prehliadači.
• Tento web môže voliteľne otvoriť webové prepojenie k aplikácii pre rýchle interakcie
• Aplikácia môže použiť toto pripojenie websocket na komunikáciu späť na webové rozhranie.
• Okrem webového rozhrania aplikácia okrem toho získava tlačidlové udalosti z ovládacieho panela a ovládača NES.

Rozhranie aplikácie

Aby bol vývoj nových aplikácií pre PixelWall jednoduchý, vytvoril som rozhranie pre aplikácie s názvom „IPixelApp.h“. Toto rozhranie obsahuje 8 definícií:

• virtuálny prázdny štart () = 0;
• virtuálny prázdny koniec () = 0;
• virtuálna prázdna slučka () = 0;
• virtuálna prázdnota newWebsocketData (uint8_t * užitočné zaťaženie, dĺžka size_t) = 0;
• virtuálna WebsiteResponse_t getWebsiteResponse (parameter String) = 0;
• button virtual voidEvent () = 0;
• virtual timer timerTick () = 0;
• virtuálny reťazec getName () = 0;

start / end - táto funkcia sa nazýva, ak sa aplikácia spustí / skončí, pretože sa spustí iná aplikácia

slučka - táto funkcia sa volá z hlavnej slučky hlavného programu. Tento hovor je nepravidelný a prebieha bez prerušenia.

newWebsocketData - táto funkcia sa nazýva, ak webové rozhranie odosiela údaje.

getWebsiteResponse - používa to hlavný program na získanie webovej stránky, ktorá by mala odpovedať na žiadosť.

buttonEvent - volá sa, ak bolo na ovládacom paneli stlačené alebo uvoľnené akékoľvek tlačidlo.

timerTick - táto funkcia sa nazýva každých 10 ms, spustí sa prerušením časovača. Môže byť použitý ako časová základňa, ale nesmie obsahovať žiadne časovo náročné veci, pretože je to kontext prerušenia.

getName - tým by sa mal vrátiť názov aplikácie pre URL

Krok 5: Softvér - Aplikácie

V aktuálnej verzii je implementovaných nasledujúcich 7 aplikácií:

Predvolená aplikácia

Toto je špeciálna aplikácia, ktorá zobrazuje aktuálny stav siete WLAN v sieti PixelWall. Ak sa môže stena pripojiť k súčasnej sieti WLAN, zobrazí adresu IP, ktorú získala zo siete.

Ak to nebolo možné (nemá nastavený ssid alebo WLAN neexistuje alebo je heslo nesprávne), otvorí sa prístupový bod. V takom prípade sa môžete k sieti PixelWall pripojiť pomocou predvolenej adresy IP prístupového bodu z ESP8266: 192.168.4.1

Na Webinterface táto aplikácia predstavuje 6 tlačidiel. Stlačením tlačidla môžete spustiť príslušnú aplikáciu.

Nastavenia Aplikácia

Táto aplikácia na nastavenie SSID a hesla WLAN. Stačí vložiť poverenia vašej siete WLAN a pri ďalšom štarte zariadenia PixelWill sa pokúsi pripojiť k tejto sieti WLAN.

Hry

V PixelWall sú naprogramované tri klasické hry:

• Tetris
• Had
• Vesmírni útočníci

Všetky hry je možné hrať prostredníctvom webového rozhrania alebo pomocou ovládača NES.

Image App

Toto je aplikácia, ktorá zobrazuje farby na PixelWall. Môžete si vybrať, či to má byť pohyblivá dúha, vyblednutie rôznych farieb, zobrazenie statickej farby alebo len zobrazenie náhodných farebných pixelov.

Pixel It

S touto aplikáciou môžete nastaviť každý pixel samostatne klepnutím prstom na webové rozhranie. Môžete teda nakresliť niekoľko šteklivých obrázkov:)

Krok 6: Ovládanie pomocou rozšírenia Twitch

Na Twitchi je rozšírenie s názvom GetInTouch. Toto rozšírenie umožňuje integrovať projekty Arduino do vášho priameho prenosu, aby diváci mohli ovládať vaše arduino počas streamovania.

Knižnica Arduino je na to napísaná pre Arduinos. Ukázalo sa však, že beží aj na ESP8266.

Na použitie v streame sú potrebné nasledujúce kroky:

• Integrujte knižnicu GetInTouch do kódu (pozri návod)
• Pripojte pixelWall k počítaču pomocou prevodníka USB/RS232 (ktorý sa používa aj na blikanie ESP)
• Nainštalujte aplikáciu GetInTouch z webovej stránky
• Nainštalujte si rozšírenie GetInTouch na svoj kanál Twitch (pozrite si návod)

Krok 7: Ovládanie pomocou ovládača Nintendo NES

Po chvíľke používania sa ukazuje, že hrať na dotykovom mobilnom telefóne nie je také jednoduché. Čas od času vám tlačidlá chýbajú, pretože na prst nemáte žiadnu spätnú väzbu, či už tlačidlo používate alebo nie. Okrem toho môže niekedy komunikácia cez Websocket krátkodobo uniknúť.

Preto som sa rozhodol kúpiť starý ovládač Nintendo NES. Tento ovládač má veľmi jednoduché rozhranie. Je to iba posuvný register 4021, ktorý beží na 3, 3V. Dá sa teda pripojiť priamo k ESP8266.

Všetky udalosti tlačidiel na ovládači boli odoslané do spustenej aplikácie prostredníctvom funkcie buttonEvent ().