PixelWall: 7 Langkah (dengan Gambar)

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Apakah Anda tahu proyek Pixel-Table? Saya memiliki ide untuk mewujudkan hal piksel seperti itu, tetapi bukan sebagai meja, melainkan untuk meletakkannya di dinding.

Sehingga saya bisa berbaring di sofa dan memainkan beberapa permainan di atasnya sambil bersantai.:)

Game yang diterapkan adalah:

• Tetris
• Space Invaders
• Ular
• Gambar Piksel

fungsi tambahan adalah:

• Tampilkan waktu saat ini
• Tampilkan animasi warna

PixelWall memiliki ESP8266 sehingga dapat terhubung ke WLAN rumah saya. Tetapi PixelWall juga dapat digunakan sebagai titik akses dan terhubung langsung ke sana.

Untuk memudahkan penggunaan PixelWall saya, dinding memberikan Situs Web untuk kontrol setelah terhubung. Semua Aplikasi dapat dikontrol/dimainkan melalui halaman web. Jadi tidak perlu menginstal perangkat lunak apa pun untuk digunakan.

Selain itu ada pengontrol NES yang membuatnya lebih mudah untuk memainkan game.

Sumber terbuka

Semua perangkat lunak dan gambar mekanis yang saya pasang di github: https://github.com/C3MA/PixelWallMerasa bebas menggunakannya untuk proyek Anda sendiri.

Langkah 1: Dimulai Dengan Elektronik

Dari proyek lain sudah ada PCB dengan LED WS2812. PCB memiliki 3 baris dengan 12 LED setiap baris.

Saya memutuskan untuk menggunakan PCB ini sebanyak 6 kali. Jadi saya mendapatkan matriks LED 12x18.

Langkah pertama adalah menyolder semua 216 LED, sekitar 100 kapasitor dan ESP8266.

Penyolderan secara manual membutuhkan waktu sekitar 10 jam.

Setelah tes cepat pertama, ternyata: semuanya berfungsi.

Jadi kita bisa pergi ke bagian mekanik.

Langkah 2: Membuat Mekanik

Pertama-tama kita membutuhkan pemisah untuk setiap piksel. Idenya adalah untuk menyatukan pita horizontal dan vertikal melalui potongan-V.

Setiap band memiliki ketebalan 3mm dan tinggi 17mm. Mereka dipotong dari pelat HDF oleh pemotong laser.

Semua sketsa untuk pemotong laser digambar di FreeCad (bernama "Leiste" di folder mekanik proyek github)

Grid diberikan oleh Layout PCB. Ini memiliki lebar kolom 28mm dan tinggi baris 31mm.

Pertanyaan selanjutnya adalah: Bagaimana cara memperbaiki pita pada PCB? Perekatan bukanlah ide yang bagus, karena seharusnya bisa dibongkar jika ada yang cacat. Jadi saya memutuskan untuk mengacaukannya. Tapi sekrup akan membelah pita tipis 3mm. Jadi saya mencetak dengan printer 3D saku untuk band (ini adalah bagian bernama "Halter" di proyek github). Ini bekerja cukup baik untuk memperbaikinya di PCB.

Langkah selanjutnya adalah mendapatkan bingkai untuk itu. Ada beberapa toko online yang menawarkan untuk memotong bingkai foto individu. Jadi saya memesan bingkai dengan ukuran 343mm x 565mm.

Bingkai mendapat lubang tambahan di sisi bawah untuk catu daya.

Pelat depan plexiglas juga saya pesan secara online. Ini adalah WN770 opal Milchglasoptik LD45% ukuran: 567x344x2mm

Ini memiliki tembus 45%.

Menempatkan semua bagian bersama-sama ke dalam bingkai.

Di ujungnya akan disekrup beberapa strip ke belakang, sehingga semuanya tetap dan tidak rontok.

Untuk memiliki opsi pengoperasian pixelWall tanpa komunikasi WLAN apa pun, saya membuat panel kontrol yang dapat dipasang yang dapat dimasukkan secara opsional di sisi kanan bingkai (disebut "Bedieneinheit" di proyek github).

Langkah 3: Perangkat Lunak - Dasar

Salah satu kegunaannya adalah bermain game di PixelWall.

Tetapi menulis game piksel akan selalu membutuhkan lingkungan debugging yang berguna. Saya tidak tahu cara untuk men-debug pengontrol ESP8266 dengan cara yang sesuai. Jadi saya memutuskan untuk mensimulasikan seluruh kode di PC saya. Kode ESP ditulis dalam Arduino C++, jadi saya menggunakan bahasa Visual Studio C++/CLI untuk simulasi di PC. Ada beberapa perbedaan antara bahasa C++ standar dan bahasa C++/CLI. Misalnya di C++/CLI Anda tidak dapat membuat objek bertipe String, karena pengumpulan sampah tidak diperbolehkan membuat objek atau referensi/penunjuk ke objek semacam itu. Di C++/CLI Anda harus menggunakan pegangan: String^. Tetapi pegangan seperti itu tidak ada dalam standar C++. Jadi saya harus kreatif untuk menyatukan kedua dunia. Saya memecahkan ini dengan membuat file Arduino.h sendiri untuk simulasi. File ini hanya menimpa semua string dalam simulasi melalui definisi "#define String String^". Ini bukan cara yang umum, tetapi berhasil:) Kecuali untuk beberapa sakelar kompiler kecil, semua kode ESP dapat dikompilasi di Visual Studio C++/CLI.

Matriks LED

Kelas pertama yang saya tulis adalah kelas LED-Matrix. Kelas ini menangani kontrol dan pemetaan LED WS2812.

Kelas ini ditulis dua kali: sekali untuk pengontrol ESP8266 (LEDMatrixArduino.cpp) dan satu lagi yang akan mengontrol bentuk pada GUI Formulir dalam simulasi (LEDMatrixGUI.cpp).

Kelas ini menyediakan beberapa metode dasar untuk menyetel dan mengosongkan LED individual menurut kolom dan barisnya.

Selain itu menyediakan fungsi setBrightness. Nilai ini akan dipertimbangkan jika LED akan diatur. Jadi semua perintah set LED dapat dilakukan dengan kecerahan penuh. Misalnya: Jika kecerahan diatur ke 50% dan fungsi setLed() dipanggil dengan RGBColor(255, 255, 255), LED akan diatur ke 127, 127, 127.

Panel LED

Di atas kelas Matriks LED saya menempatkan kelas Panel LED. Kelas ini menyediakan beberapa fungsionalitas yang berguna untuk aplikasi apa pun. Ini menyediakan dua lapisan independen. Ini dapat membantu untuk aplikasi. Misalnya pada permainan tetris: layer0 untuk batu tetap di bagian bawah dan layer1 untuk menampilkan batu yang jatuh. Jadi setiap siklus batu jatuh satu piksel ke bawah, aplikasi hanya dapat menghapus layer1 dan menggambar batu pada posisi barunya. Tidak perlu menggambar ulang semua batu tetap di bagian bawah.

Selain itu panel menyediakan

printImage - untuk mencetak beberapa ikon seperti smiley atau simbol WLANprintDigit - untuk mencetak satu digit pada posisi tertentuprintFormatedNumber - untuk mencetak angka dengan awalan zerosprintNumber - untuk mencetak angka integerprintLineH - garis horizontal dengan panjang tertentuprintLineV - garis horizontal dengan panjang tertentu

Langkah 4: Perangkat Lunak - Konsep Aplikasi

Konsep umum untuk Dinding piksel adalah:

• Setiap aplikasi memiliki namanya sendiri
• Aplikasi dimulai dengan memanggil URL pixelWall termasuk nama aplikasi (misalnya: 192.168.4.1/tetris)
• URL juga dapat memiliki parameter GET yang akan diteruskan ke aplikasi
• Setiap aplikasi harus mengirimkan situs web yang ditampilkan di browser.
• Situs web ini secara opsional dapat membuka koneksi soket web ke aplikasi untuk interaksi cepat
• Aplikasi dapat menggunakan koneksi websocket ini untuk berkomunikasi kembali ke frontend web.
• Selain antarmuka web, aplikasi ini juga mendapatkan aktivitas tombol tekan dari panel kontrol dan pengontrol NES.

Antarmuka Aplikasi

Untuk memudahkan pengembangan aplikasi baru untuk PixelWall, saya membuat antarmuka untuk aplikasi bernama "IPixelApp.h". Antarmuka ini berisi 8 definisi:

• virtual kekosongan mulai() = 0;
• akhir kekosongan virtual() = 0;
• lingkaran kosong virtual() = 0;
• virtual void newWebsocketData(uint8_t * payload, size_t panjang) = 0;
• virtual WebsiteResponse_t getWebsiteResponse(Parameter string) = 0;
• virtual void buttonEvent() = 0;
• virtual void timerTick() = 0;
• virtual String getName() = 0;

start/end - fungsi ini dipanggil jika aplikasi mulai/berakhir karena aplikasi lain dimulai

loop - fungsi ini dipanggil dari loop utama programm utama. Panggilan ini tidak teratur dan di luar interupsi.

newWebsocketData - fungsi ini dipanggil jika frontend web mengirim data.

getWebsiteResponse - ini digunakan oleh program utama untuk mendapatkan halaman web yang harus menanggapi permintaan tersebut.

buttonEvent - ini dipanggil jika ada tombol pada panel kontrol yang ditekan atau dilepaskan.

timerTick - fungsi ini dipanggil setiap 10ms, dipicu oleh interupsi timer. Ini dapat digunakan untuk basis waktu tetapi tidak boleh mengandung hal-hal yang intensif waktu, karena ini adalah konteks interupsi.

getName - ini akan mengembalikan nama aplikasi untuk URL

Langkah 5: Perangkat Lunak - Aplikasi

7 aplikasi berikut diimplementasikan dalam versi saat ini:

Aplikasi Bawaan

Ini adalah Aplikasi khusus yang menampilkan status WLAN PixelWall saat ini. Jika dinding dapat terhubung ke WLAN yang ada, itu akan menampilkan Alamat IP yang didapat dari Jaringan.

Jika tidak memungkinkan (tidak ada ssid yang disetel atau WLAN tidak ada atau kata sandi salah), Accesspoint akan terbuka. Dalam hal ini Anda dapat terhubung ke PixelWall melalui IP Accesspoint default dari ESP8266: 192.168.4.1

Di Webinterface Aplikasi ini menyajikan 6 Tombol. Dengan menekan tombol Anda dapat memulai Aplikasi yang sesuai.

Aplikasi Pengaturan

Aplikasi ini untuk mengatur SSID dan kata sandi WLAN. Cukup masukkan kredensial WLAN Anda dan pada awal Pixel berikutnya, ia akan mencoba menyambung ke WLAN ini.

permainan

Ada tiga game klasik yang diprogram di PixelWall:

• Tetris
• Ular
• Space Invaders

Semua game dapat dimainkan melalui antarmuka web atau dengan pengontrol NES.

Aplikasi Gambar

Ini adalah Aplikasi yang menampilkan warna di PixelWall. Anda dapat memilih apakah itu pelangi yang bergerak, memudarkan warna berbeda, menunjukkan warna statis atau hanya menampilkan piksel berwarna acak.

Piksel Itu

Dengan Aplikasi ini Anda dapat mengatur setiap piksel secara terpisah dengan mengetuk dengan jari Anda di antarmuka Web. Jadi Anda bisa menggambar beberapa gambar cracy:)

Langkah 6: Kontrol Melalui Ekstensi Twitch

Ada Ekstensi di Twitch bernama GetInTouch. Ekstensi ini memungkinkan untuk mengintegrasikan proyek Arduino ke streaming langsung Anda, sehingga pemirsa dapat mengontrol arduino Anda selama streaming.

Perpustakaan Arduino untuk ini ditulis untuk Arduino. Tapi ternyata itu berjalan juga di ESP8266 dengan baik.

Untuk menggunakannya di Stream, langkah-langkah berikut diperlukan:

• Integrasikan pustaka GetInTouch ke dalam kode (lihat tutorial)
• Hubungkan pixelWall dengan PC Anda melalui konverter USB/RS232 (yang juga digunakan untuk mem-flash ESP)
• Instal Aplikasi GetInTouch dari Situs Web
• Instal Ekstensi GetInTouch di saluran Twitch Anda (lihat tutorial)

Langkah 7: Kontrol oleh Pengontrol Nintendo NES

Setelah digunakan beberapa saat, ternyata bermain di ponsel sentuh tidak semudah itu. Dari waktu ke waktu Anda kehilangan tombol karena Anda tidak memiliki umpan balik di jari Anda apakah Anda menekan tombol atau tidak. Selain itu, terkadang komunikasi Websocket dapat bocor untuk waktu yang singkat.

Karena itu saya memutuskan untuk membeli pengontrol Nintendo NES lama. Kontroler ini memiliki antarmuka yang sangat sederhana. Ini hanya register geser 4021 yang berjalan dengan 3, 3V. Jadi bisa langsung dikoneksikan ke ESP8266.

Semua kejadian tombol pada pengontrol yang diteruskan ke aplikasi yang sedang berjalan melalui fungsi buttonEvent().