What I made

It’s called Gameroom Designer. It lays out your game room to scale, right in the browser. You set your room’s real dimensions, drop in machines at their real footprints, and slide everything around until it works, before you move a single machine.

You can try it here: https://nothans.github.io/gameroom-designer/

How it works

Start by typing your room size in feet (or meters, if that’s your thing). You get a room drawn to scale with a grid.

Then you fill it. There’s a searchable catalog of real stuff at real sizes: pinball (Stern, JJP, the Atari and generic widebodies), arcade uprights and cocktails and sit-down racers, a pool table, air hockey, foosball, shuffleboard, plus couches, bar stools, storage, the works. A 27-inch-wide pinball takes up exactly as much room next to an 84-inch sofa as it would in real life. Click an item to drop it in, or drag it straight onto the floor.

From there it’s the fun part. Drag machines around. Rotate them. Grab a whole row of pinballs, line up their edges, space them out evenly. Drop a dashed “clearance” zone around the pool table so you don’t forget you need five feet to actually swing a cue. Add doors, swing arc and all, so you can see the door won’t clip the cabinet you parked next to it. Zoom out to take in the whole room, use the minimap to get around, and when it looks right, export a PNG to show your partner exactly why the couch has to move.

There are a few example layouts built in, too, if you’d rather poke at a finished room than start from an empty one.

I built it fast, with AI

I built and shipped this fast using Agentic AI.

The interesting part was never “the code got written.” That’s kind of a solved problem now if you’re one person building one thing. The interesting part was the loop. I’d use the tool, hit something that annoyed me, and fix it right then.

Dragging a rotated block sent it flying to the wrong spot, so I fixed the math. Resizing a block didn’t stick, so I fixed that. I shrank my browser window and the whole layout looked like it had wandered off, so I wrote it up as issue #1 and fixed that too. Ideas showed up and went in the same afternoon: circular clearance zones, doors and windows, even spacing, drag-straight-from-the-library. Then a deploy to GitHub Pages, a banner, a little intro video.

None of that is magic. It’s a build-use-fix loop, run tight. The machine is fast at the typing, but knowing what to build next is still the whole job.

Your machine, your data

The whole thing runs in your browser. Your layout saves to your own machine, so there’s no account to make, no server to trust, and nothing leaving your computer. It’s free, and it’s open source under MIT, so the entire thing is on GitHub if you want to poke at it or fork it: https://github.com/nothans/gameroom-designer.

Tell me what’s missing

I just posted it over in the forum to get some real feedback, because I built this for people who have way more machines than I do.

So go break it. Tell me which machine I forgot, which part feels clunky, what you’d add. That’s the fastest way this gets any good.

The touch screen is called the TouchShield Slide which is a 320×240 OLED and resistive touch screen. The screen also has a microcontroller that is Arduino compatible and expands your program space. Since the screen is really a microcontroller in disguise, it can be used for many types of projects. Overall I am very happy with the screen, but I realized I didn’t know how to use it very well. I set out to learn and develop a protocol / reusable library that allows the screen to talk to a microcontroller and vice-versa. So I wanted to take a moment and explain what I learned – maybe you can get going faster than I did.

The Goal

My goal is to be able to display data on the screen that has been received from another device. The data requested would be initiated by a touch on the screen. The protocol has to be consistent and reliable while being flexible enough to be the basis for future projects.

Touch -> TouchShield Slide -> Arduino -> TouchShield Slide

Programming Tips and Tricks

I found quite a few libraries and resources on liquidware.com.  I also discovered quite a few important things through my trial and error. My biggest frustration was with programming and figuring out the IDE. Here are some tips.

• To program the screen use the Antipasto Arduino / Aardvark IDE
• Program the screen and Arduino separately – make sure the IDE has the proper device selected
• To put the screen in program mode, press the switch beside the power connector – it’s in program mode when the LED on the backside is red

TouchShield Slide Serial

Serial data sent and received by the TouchShield Slide uses the hardware serial lines.

To setup the serial connection, place this line in your setup code block:

[cc lang=”c”]Serial.begin(9600);[/cc]

Now you can read and write to and from the serial buffer. To read in a whole string, use a byte array to store bytes from the serial buffer when serial data is available. To write to the serial buffer, simply use serial print.

[cc lang=”c”]char charIn = 0;
byte i = 0;
char stringIn[32] = “”;

while(Serial.available()) {
charIn = Serial.read();
stringIn[i] = charIn;
i += 1;
}

Serial.print(“A”);[/cc]

Arduino Serial

On the Arduino side, you have to use some form of Software Serial that sends and receives data on Pins 2/3. I have found that the Adafruit SoftSerial Library, “AFSoftSerial.h”, works the best. It seems to be reliable and produces consistent results when talking to the TouchShield Slide. Reading and writing from a software serial buffer is about the same as a hardware one with this library.

To use software serial, follow these steps:

• Include the “AFSoftSerial.h” library in your Arduino code header space
• Define the RX and TX pins
• Instantiate the software serial
• Initiate the software serial line

[cc lang=”c”]#include AFSoftSerial.h

#define RX_PIN 3
#define TX_PIN 2

AFSoftSerial touchSerial = AFSoftSerial(RX_PIN, TX_PIN);

void setup() {
touchSerial.begin(9600);
}[/cc]

Demo Project

I took a moment to put together all of the things that I learned into a quick demo project. This project displays a random number on the screen. The random number is generated by an Arduino, sent via serial, and requested by a touch of the TouchShield Slide.

Random Number from Arduino Displayed after Detecting a Touch…

Visit Liquidware’s App Store to download the source code and library for this demo project.