EGRA Gamepad32

Kelompok Tugas Rancang System and Project Engineering:

●     Evania Berlian Tanudirdjo / 2440124885

●     Gary Austen / 2440014654

●     Radinka Octavian Manorek / 2440122633

Di era modern sekarang, terdapat banyak sekali teknologi yang sudah sangat maju dan canggih. Tetapi apa sih itu teknologi? Teknologi adalah ilmu yang digunakan untuk menciptakan, mengembangkan, dan mengubah peralatan, mesin, dan sistem untuk memudahkan kehidupan manusia. Tidak hanya sampai situ, manusia bisa menggunakan teknologi sebagai alat untuk hiburan, contohnya gamepad untuk bermain game. Gamepad adalah perangkat input yang digunakan untuk mengontrol game console atau komputer. Gamepad juga memungkinkan pemain untuk lebih nyaman dan ergonomis dalam memainkan game dibandingkan dengan menggunakan keyboard atau mouse. Pada tugas rancang kali ini, kelompok kami akan memperkenalkan gamepad yang kami buat dengan nama EGRA Gamepad32.

Apa itu EGRA Gamepad32? EGRA Gamepad32 merupakan sebuah gamepad yang dikendalikan dengan menggunakan mikrokontroler ESP32 sebagai otak sistemnya. ESP32 ini akan mengirimkan sinyal data ke layar TFT yang merupakan layer untuk menampilkan display game. Gamepad32 ini juga terkoneksi ke sebuah database Firebase untuk menyimpan data-data seperti skor user, serta sebuah aplikasi yang menampilkan data-data tersebut.

Tidak hanya sampai situ, tujuan kami membuat alat ini kedepannya adalah bisa menjadi sebuah device untuk orang-orang yang ingin mencoba untuk membuat sebuah game custom sesuai keinginan dan kreativitas mereka. Pada tugas rancang kali ini, kami akan membuat minesweeper sebagai gamenya. Kami juga telah membuat sebuah aplikasi mobile bernama EGRA board menggunakan Flutter dengan bahasa pemrograman (dart) untuk menampilkan skor yang telah diperoleh user.

Fitur

Pada pembuatan alat ini, kami membuat beberapa fitur, seperti device bisa terhubung dengan internet, memiliki button yang cukup banyak yaitu 8 buah, aplikasi mobile, serta nyaman untuk digunakan. Adapun beberapa kelebihan yang dimiliki oleh EGRA Gamepad32 adalah sebagai berikut.

●     Membuat customable game

Selain bermain game, alat ini juga bisa digunakan untuk membuat game sesuai dengan keinginan user maupun target marketnya.

●     Charging yang praktis

Untuk pengisian daya baterainya, alat ini bisa di-charge menggunakan kabel type c yang praktis dan tersedia banyak di pasaran.

●     Sound effect

Agar user experience lebih baik lagi, terdapat fitur sound effect ketika bermain game.

●     Connect/re-connect ke wifi

EGRA Gamepad32 ini dapat terkoneksi dengan Wifi untuk mengirim data skor user dan juga bisa melakukan koneksi ulang jika Wifi terputus.

●     Aplikasi leaderboard

Alat ini juga memiliki aplikasi yang digunakan untuk memasang leaderboard yang berisi peringkat skor semua user.

●     Design 3D yang ergonomis dan nyaman

EGRA Gamepad32 memiliki design casing yang ergonomis serta nyaman untuk digunakan dalam waktu lama yang telah disesuaikan dengan tangan manusia.

Pada pembuatan alat ini, beberapa alat dan bahan yang diperlukan adalah sebagai berikut.

Bahan

●     ESP32 seeed

●     3,2 inch ILI9341 TFT

●     Push button

●     Buzzer

●     Baterai lipo 1s

●     PCB board

●     Resistor                                              

●     Kapasitor

●     Pin header

●     3D printing filament

Alat

●     PCB Engraver

●     Solder & timah

●     3D Printer

●     Visual Studio Code

●     Dart (Flutter)

●     C++

Dalam instructables ini, kami akan menunjukkan bagaimana membangun projek ini dari awal yang telah dibagi menjadi 3 bagian, yaitu bagian harware, casing 3D, dan software.

Pertama-tama, langkah dasar yang harus dilakukan adalah membuat desain sistem Gamepad32. Pada sisi hardware, sistem ini menggunakan ESP32 sebagai mikrokontroler, TFT ILI9341 sebagai layer, baterai lipo 1s sebagai power supply, serta push button dan buzzer

Selanjutnya, kami membuat blok diagram (gambar 1) komponen-komponen yang digunakan untuk membuat Gamepad32.

Selanjutnya, kami membuat skematik (gambar 2) dan PCB. PCB desain sistem kami dipisahkan menjadi dua bagian, yaitu bagian board utama (gambar 3) dan bagian modul button (gambar 4). 

Langkah selanjutnya adalah pembuatan PCB. PCB bisa dibuat dengan berbagai teknik contohnya etching, engrave, dan lain-lain. Setelah PCB sudah dibuat, jangan lupa untuk mengetes kontinuitas dan komponen bisa disolder ke PCB. Setelah PCB sudah jadi, PCB disusun dengan memasang modul button pada header yang ada di PCB board utama seperti gambar 5 di atas.

Setelah semua hardware disusun, upload code yang dilampirkan berikut (main.cpp). Program ini merupakan program untuk menjalankan game minesweeper pada gamepad. Game minesweeper akan dimunculkan pada layar dan button dapat digunakan apabila semuanya bekerja dengan baik. Setelah itu, ubah SSID dan password pada baris kode yang ada pada gambar 6 di atas sesuai SSID dan password Wifi Anda, lalu tes koneksi antara ESP32 dengan Wifi apakah sudah bisa tersambung.

Pertama, rancang desain yang cocok dan ergonomis agar nyaman saat memainkan gamepad. Pada EGRA Gamepad32 ini dibuat menyerupai stik game console dengan tujuan agar memiliki kenyamanan saat bermain. Langkah-langkah untuk merancang casing antara lain:

Masukan 2d PCB untuk menyesuaikan ukuran casing.

Pertama tekan ikon create form, lalu buat form box. Untuk mempermudah agar ukuran kiri dan kanan simetris, gunakan fitur mirror. Lalu tekan ikon modify form dan buat sesuai dengan sketsa yang sudah dimasukkan di awal (gambar 11). 

Kemudian, tracing bagian kiri dan kanan dari casing sesuai dengan sketsa yang sudah dimasukkan dengan modify form (gambar 12). Sesudah tracing form sesuai yang diinginkan dengan ukuran yang tepat, tekan finish form. 

Setelah sudah membentuk sebuah body maka yang harus dilakukan adalah beri fitur shell untuk menentukan ketebalan dari casing. Pada Gamepad32 ini dibuat ketebalan sebesar 3 mm.

Setelah itu buatlah sebuah sketsa untuk memisahkan casing bagian atas dan bawah (gambar 16).

Gunakan fitur split body untuk memisahkan kedua bagian (gambar 17).

Buat sebuah sketsa yang digunakan untuk button dan TFT, dibuat dengan sesuai ukuran yang ada pada PCB (gambar 18).

Lalu extrude untuk melubangkan button pada bagian casing atas. Berikan toleranasi pada lubang button minimal 0.4 mm karena akan ada bagian yang lebih tebal saat dicetak pada 3D printer (gambar 19).

Buat sebuah penyangga antara casing atas dan bawah dengan cara di extrude kemudian pilih bagian yang ingin dibuat penyangga. Dengan memilih thin extrude pada fitur extrude (gambar 20).

Casing bagian atas dibuat sebagai bagian female (gambar 21).

Terlihat ada bagian yang dapat dimasukkan oleh casing bawah (gambar 22).

Pada bagian casing bawah di extrude ke bawah dengan di cut dan menjadi bagian male dari casing. Dengan ketebalan diberikan 1.1 mm karena toleransi (gambar 23).

Buat sketsa lingkaran tepat pada 4 lubang yang sudah disediakan sebagai baut PCB ke casing bagian atas. PCB dikencangkan pada bagian atas casing dengan alasan supaya layar tidak goyang saat dimainkan. Sketsa dibuat dengan 3-point circle dengan ukuran 3 mm supaya bisa tepat pada lubang PCB yang disediakan. Lalu ubah ukuran lingkaran menjadi 5 mm. Kemudian finish sketch (gambar 24).

Setelah itu extrude keempat lingkaran dan berbentuk silinder bagian atas PCB dengan 19 mm dan bawah PCB dengan 17 mm (gambar 25).

Buatlah hole sebagai lubang baut dan buat sesuai dengan baut yang dipakai. Pada Gamepad32 menggunakan baut dengan lebar 2 mm dan tinggi sepanjang 6 mm (gambar 26).

Buat sketsa lingkaran ukuran 6 mm untuk bagian baut (gambar 27). 

Extrude ke bawah hingga berlubang agar baut dapat dimasukkan (gambar 28).  

Extrude buat body baru dengan ukuran 7 mm untuk bagian kiri atas dan kanan atas, bagian tengah dibuat ukuran 5 mm. Extrude dengan 16 mm untuk bagian kiri bawah dan kanan bawah (gambar 29).

Shell bagian silinder sebesar 1.50 mm agar kepala baut dapat masuk (gambar 30).

Extrude lagi body baru setinggi 2 mm untuk dibuat hole yang akan menyambung dengan bagian casing atas (gambar 31).

Buat hole untuk baut sesuai dengan baut yang digunakan. Sama seperti pada bagian baut PCB (gambar 32).

Extrude body dengan ukuran 2 mm lagi dan shell body dengan 1 mm. Dengan tujuan sebagai pengunci antara casing atas dan casing bawah (gambar 33).

Buat baut sketsa untuk lubang baut bagian casing atas dengan ukuran 4.96 mm dengan diberikan toleransi 0.04 mm supaya bisa dimasukkan dengan casing bagian bawah (gambar 34).

Extrude new body dengan ukuran 11 mm sesuaikan dengan casing bawah kemudian berikan hole seperti bagian atas untuk mengencangkan baut (gambar 35).

Extrude silinder hingga masuk 2 mm ke dalam seperti gambar 36.

Buat support untuk silinder baut supaya tidak mudah patah saat ingin di baut. Lakukan pada casing atas dan casing bawah (gambar 37 dan 38).

Supaya mempermudah buatlah 1 support saja dan kemudian gunakan fitur rectangular pattern dan buat sebanyak yang diinginkan (gambar 39).

Buat lubang type c dengan ukuran lebar 4 mm dan panjang 13 mm, kemudian berikan fillet sebesar 2 mm (gambar 40).

Extrude cut untuk lubang type c (gambar 41).

Buat lubang untuk saklar dengan ukuran 7.50 mm dan 7.80 mm. Sesuai dengan saklar yang digunakan (gambar 42).

Extrude di cut untuk membuat lubang pada saklar (gambar 43).

Extrude penyangga button yang sudah dibuat pada saat membuat sketsa button (gambar 44).

Copy sketsa button arrow yang digunakan untuk membuat lubang button kemudian di offset dengan -1 mm dengan tujuan supaya button lebih kecil dari lubangnya (gambar 45).

Extrude dengan tinggi 9.50 mm dan penyangga buttonnya supaya tidak keluar dari casing bagian atas dengan ukuran 1.34 mm (gambar 46).

Buat sketsa button dengan ukuran diameter 10 mm. Dengan lubang diameter 3.50 mm dan diameter 3 mm untuk sebagai penyangga pada bagian button. Buat penyangga button supaya huruf-huruf tidak bisa berubah secara tidak beraturan (gambar 47).

Extrude dengan ketinggian setinggi 9.60 mm. Kemudian extrude cut kedalam sebagai lubang (gambar 48).

Buat sketsa huruf yang ingin digunakan dalam button. Pada Gamepad32 ini menggunakan huruf EGRA (gambar 49).

Kemudian di extrude cut ke dalam sehingga membentuk huruf seperti di bawah (gambar 50).

Desain 3D casing Gamepad32 telah selesai (gambar 51). File stl dapat didownload dari file yang terlampir di bawah ini dan dapat diprint (gambar 52) menggunakan filamen PLA maupun ABS yang lebih halus dan bagus.

Selanjutnya kita akan membuat sebuah aplikasi yang bertujuan untuk menampilkan skor yang telah diperoleh oleh user dari EGRA Gamepad32 (device). Untuk membuat aplikasinya, kita harus menentukan terlebih dahulu apa yang ingin dibuat dan bagaimana cara bekerjanya. Berikut merupakan tahapan yang dibuat:

●     Kami ingin ketika aplikasi ini dibuka, aplikasi ini bisa menampilkan pop up sebagai tanda pemberitahuan bahwa ada data baru yang masuk dari device ke Firebase.

●     Kami ingin aplikasi ini mengambil data dari database Google Firebase.

●     Kami ingin aplikasi ini bisa mengubah “username (default)” menjadi username yang user inginkan, dan hanya bisa diubah sekali agar tidak ada kecurangan.

●     Kami ingin aplikasi ini menampilkan skor secara berurutan dari yang paling tercepat (top leader board number 1) hingga yang paling lama bermainnya.

●     Kami ingin aplikasi ini memiliki fitur penguncian aplikasi agar yang bisa mengaksesnya hanya admin.

Setelah kita sudah menuliskan apa saja yang kita inginkan, selanjutnya kita akan masuk ke dalam logika pemrogramannya.

Pada langkah ini, kita harus setup Firebasenya terlebih dahulu yang bisa diakses pada link berikut: https://Firebase.google.com/?hl=id. Kemudian, buka console pada website Firebase kalian dan buatlah sebuah new project / add project seperti pada gambar 53.

Selanjutnya setelah membuat new project, pada menu “project overview” pilih icon android seperti pada gambar 54 dan isi semua yang harus di isi. Ini adalah langkah dimana kalian akan memasukan Firebase SDK ke dalam program aplikasi nanti.

Setelah selesai men-download Firebase SDK dan setup lainnya, kita masuk dalam database. Karena tujuan dari aplikasi ini adalah menampilkan skor, maka kita akan menggunakan Firestore database sebagai tempat penyimpanan skor-skor user. Firestore dapat diakses pada menu build atau jika sudah pernah mencobanya maka akan ada shortcut seperti pada gambar 55.

Selanjutnya pada menu Firestore database, terdapat menu rules yang baris programnya perlu dimodifikasi dari “allow read, write: if false” menjadi “if true” seperti pada gambar 56.

Setelah itu pada menu data, buat sebuah collection berjudul “skors” seperti pada gambar 57.

➢   Dart (Flutter)

Dart adalah bahasa pemrograman yang digunakan untuk membangun aplikasi mobile, web, dan desktop dengan Flutter, framework pengembangan aplikasi yang dikembangkan oleh google. Oleh karena itu, kami memilih menggunakan dart (Flutter) sebagai bahasa pemrograman untuk membuat aplikasi ini.

Kalian bisa mendownload dart dari link ini: https://docs.Flutter.dev/get-started/install

➢   Android studio (emulator)

Android studio adalah integrated development environment (IDE) yang dikembangkan oleh google untuk membuat aplikasi android. Ini menyediakan banyak fitur seperti debugging, pembuatan desain antarmuka, integrasi dengan versi kontrol, dan banyak lagi. Android studio didasarkan pada jetbrains' intellij idea dan memberikan lingkungan pengembangan yang kuat untuk membangun aplikasi android yang profesional.

Jadi kami memilih untuk menggunakan software ini sebagai emulator dari androidnya. Kalian bisa mendownloadnya dari link ini: https://developer.android.com/studio

➢   Visual studio code (VSCode)

Pada langkah ini kita akan membuat sebuah file baru untuk project kita ini. Sebelum itu kita harus mengetahui apa itu visual studio code? Visual studio code adalah editor teks dan integrated development environment (IDE) yang dikembangkan oleh microsoft untuk pengembangan aplikasi. Ini menawarkan banyak fitur seperti debugging, syntax highlighting, code completion, dan banyak lagi. Ini bersifat cross-platform dan dapat berjalan di windows, macos, dan linux.

Pada VSCode, buatlah sebuah file Flutter baru. Dalam pembuatan aplikasi ini terdapat beberapa file yang didalamnya terdapat beberapa fungsi-fungsinya. Hal pertama yang harus dilakukan adalah memasukkan file json yang telah di-download ke dalam file project Flutter dan lakukan beberapa hal, yaitu menambahkan beberapa kode ke dalam “android > file > app > build.gradle” dan “android > build.gradle”.

Pada file main.dart (gambar 58) terdapat kode yang berisi page pertama aplikasi yang lalu akan langsung diarahkan ke screen yang pertama yaitu “unlockscreen”.

File unlockscreen.dart (gambar 59) ini berfungsi sebagai screen awal ketika memulai aplikasi. Pada screen ini, user harus memasukkan 6 digit kombinasi pin untuk bisa mengakses skorboard (primary screen). Apabila kombinasi pin yang dimasukkan salah, akan ada warning. Jika user sudah bisa memasukkan pin yang benar maka selanjutnya akan di navigasikan ke primary screen.

File gradeboard.dart berfungsi sebagai pengisi warna leaderboard seperti pada gambar 60.

File tools.dart mempunyai banyak fungsi seperti dari memberikan limit pada waktu yang bisa dimasukkan ke primary screennya, lalu ada fungsi untuk mengurutkan skor dari yang paling cepat hingga skor yang paling lambat.

Lalu ada beberapa file lagi yang bisa diakses dari link github akan dilampirkan di bawah. Beberapa file ini memiliki fungsi-fungsi tertentu dan akan di panggil ke dalam 1 file yaitu file “scbd_screen.dart”. Pada file scbd_screen.dart ini merupakan bagian terpenting dari keseluruhan program yang kita buat. 

Link github: https://github.com/radinkael/EGRA-board

Untuk evaluasi, dilakukan tiga jenis percobaan, antara lain:

●     Menyalakan dan bermain game sampai baterai habis

●     Mengisi daya baterai sampai penuh dan mencatat berapa waktu yang diperlukan

●     Menghitung waktu yang dibutuhkan untuk mengkoneksi device dengan wifi dan mengunggah skor ke aplikasi

Percobaan pertama dilakukan dengan memainkan game sampai baterai gamepad habis. Baterai disebut habis ketika tegangan baterai sama dengan 3.3 volt (dianggap baterai = 0%), yang merupakan tegangan minimum untuk menyuplai ESP32. Pengambilan data dimulai pada saat tegangan baterai adalah 4 volt (dianggap baterai = 100%) yang merupakan tegangan maksimum dari baterai lipo 1s yang digunakan. Berdasarkan percobaan yang dilakukan ini, didapat grafik seperti gambar di atas. Dari percobaan ini juga didapat bahwa lama baterai dapat bertahan adalah sampai dengan 600 menit atau 10 jam.

Percobaan kedua dilakukan dengan mengecas baterai sampai 100% sesuai dengan skala pada percobaan pertama. Dari percobaan yang dilakukan ini, didapat bahwa waktu yang dibutuhkan untuk mengecas baterai dari 0% sampai dengan 100% adalah 310 menit atau 5.16 jam.

Percobaan ketiga dilakukan untuk mengetes lama waktu mengupload skor ke aplikasi dengan koneksi jaringan yang stabil. Berdasarkan percobaan yang dilakukan ini, didapat waktu rata-rata untuk mengupload skor ke aplikasi adalah 3.868 detik yang dimana ini relatif cukup cepat.

Kesimpulan

Setelah percobaan yang dilakukan, beberapa kesimpulan yang didapatkan adalah

●     Baterai bertahan selama 600 menit ketika gamepad dinyalakan dan dimainkan

●     Dibutuhkan total waktu sekitar 310 menit untuk mengisi daya baterai sampai penuh

●     Rata-rata waktu yang dibutuhkan untuk mengupload skor dengan koneksi internet yang stabil adalah 3.87 detik 

Saran

Beberapa saran untuk mengembangkan alat kami antara lain:

●     Memasang driver keypad untuk mengurangi noise pada button

●     Membuat game lain, seperti flappy bird, snake game, dan lain-lain

●     Casing bisa dibuat dengan warna yang lebih bervariasi

Referensi

Mobizt. (2022, 5 19). Firebase-esp client. Retrieved from github.com: https://github.com/mobizt/Firebase-esp-client/tree/main/examples/Firestore

Adafruit. (2022, july). Adafruit ili9341. Retrieved from github.com: https://github.com/adafruit/adafruit_ili9341/tree/master/examples

Datasheet

ESP32 xiao c3: https://files.seeedstudio.com/wiki/seeed-studio-xiao-ESP32/ESP32-c3_datasheet.pdf

TFT ILI9341: https://cdn-shop.adafruit.com/datasheets/ili9341.pdf

Inilah video demo dari EGRA Gamepad32.