Lebronatron 3000 | The Multi-Purpose Arcade Machine

Inspiration

With the theme of the Hackathon being 'Reclaim Your Technology,' we thought about what daily problems we face and how technology solves it and if there were any innate flaws. For the overall aesthetic, we chose retro Street Fighter and arcade machines as we wanted to revitalise and modernise these nostalgic memories.

What it does

We eventually landed on the issue of not being able to find a restaurant to eat at with our usual solution being to scroll Google Maps for much too long. So our starting ideas was to make a machine where it asks us questions and creates a personalised list of places to try. Over time, we implemented various apps, including weather, clock, and minigames. Where once a restaurant is chosen or a round of minigames is completed, a strip of LEDs located above the screen lights up, another homage to retro machines and their colourfulness.

How we built it

CAD design of the arcade machine housing was done on OnShape and 3D-printed. Street fighter aesthetics were laser cut and glued onto the housing. Hardware includes a joystick module, 2 buttons, 10 LEDs (including 1 RGB), ultrasonic sensor and 2 servos, with much of the connections soldered. These were all connected to pins of the ESP32, which starts a web server that runs on the phone's browser (front end files were written in JavaScript), and opens a web socket that allows 2 way communication between the phone and ESP32 so that the firmware that handles the hardware can communicate with and control the front-end and vice versa.

In terms of searching for information for the food finder app, it utilises the Google Places API and the weather app fetches results from an OpenMeteo URL.

Challenges we ran into

There were multiple challenges we ran into, such as formatting our website as our collective prior knowledge in HTML and CSS was very limited.

The serial monitor in the Ardiuno IDE, the became unusably laggy. Therefore, the decision was made to switch to PlatformIO, used through the VSCode extension. This also allowed for better organisation of frontend files and better integration with Git.

We needed to learn how to open and connect clients to a WebSocket, and many scenarios were found where the asleep and awake states in the phone and ESP32 could become out of sync. This required bidirectional feedback to ensure the input was correctly registered in the client.

Furthermore, adapting the UI from a portrait layout to our landscape arcade screen was another challenge as flexbox doesn't shrink elements below their intrinsic size by default, and canvas elements needed careful aspect-ratio locking so in-game coordinates still lined up correctly after scaling.

Servos draw a considerable amount of current, so the ESP32 getting power from USB cable could not power everything by itself and wifi connectivity became unstable when too much current was being drawn. 2x 10440 batteries in series through LM2596 converter was used to supply 5V with sufficient current capability, but the batteries do not have much capacity and die relatively quick.

For the brick breaker minigame, core logic was difficult as our initial collision detection only checked for ball position, which let the ball visually tunnel through bricks or clip past the paddle at high speed without registering.

Accomplishments that we're proud of

Our ability to push through confusion through team work and communication is something we are extremely proud of as it allowed each team member to showcase their abilities. When gaps in knowledge or skills presented themselves, each team member put their best foot forward to learn the necessary skills for our project to continue.

On top of this, we are very happy with the final aesthetic of the design and our inclusion of many different components working in harmony.

What we learned

There were many new skills learnt in conjunction with furthering our understanding by learning from one another. For example, CAD skills and use of OnShape software, use of the platformio extension in VS Code, firmware and utilisation of WiFi connectivity on ESP32, use of web server and web socket, writing front end website files on JavaScript.

Working on the games taught us a lot about collision detection in practice as implementing it correctly at high speeds takes thorough checks. We also learned how much CSS layout behaviour, like flexbox's default sizing rules, which can work against you when adapting a design across screen orientations.

We needed to balance our ambition with what could realistically be done with the project, this resulted in simpler minigames being built in and sacrificing some additional features in the food finder.

What's next for Lebronatron 3000

As a machine, though there are imperfections which could help make the machine easier to use, it works well and know the new skills we have learnt will come in useful for future projects that could take the Lebronatron 3000 even further, whether it be through features or refinement.