On the Go Connect4 and Pixel Art Frame

Me and my friend love to bet on the board games we play and we think of daring dares for the loser. And the day we go to a board game cafe, we line up many games so that we have dares for the entire fortnight. But that took away the fun of impromptu bets. I wanted a board game which I can take on the go and play when needed. I dint want a mobile app or a seriously small travel size board game. I wanted one which I can play even at dead of the night. The Game which we played the most was Connect 4.

and since I am an engineer I decided to make it using electronics and since this is my first Hackster project. Here is a meme

so the design started. But wait, I did not want to be kept inside a drawer. I wanted it displayed. So what function can I use it for? Aha.. A pixel art Frame. So, the idea will be that one side it will have touch sensors with a annular cut out around it which I can use to input where to drop the chip. The other side will have a RGB LED. A Diffusing paper with a square grid separator will be kept on the side of the Led's such that when the led is on. One side will will have square pixel lighting up whereas the other size, the annular ring will show a ring of light which comes after reflecting at the diffusing element. for a halo effect. This halo effect can be used to show the position of my chips.

For the electronics, I will use ESP32, that way I can scour the internet to download a random picture to be used as the pixel art. I had two touch controllers AT42QT2120-SU lying around and therefore I used them along with MCP73831 Lipo charger and some additional circuitry to power up and program the ESP32.Update: I used MPR121 as it was easier to use than the AT42QT2120I drew the schematic in KiCAD after I created custom footprint for the annular rings and touch sensor. I will keep the artwork a secret until last. Also, Connect 4 requires 6x7 Grid, thats not great for Pixel art, so I made it 7x7. I wont use one row when play Connect 4. Wait a minute, What can I do when the PCB is turned off.. Aha, I will use PCBWays UV printing capabilities to put up an artwork on the PCB. How much will it be?

That's a whopping 115USD including to shipping to India. Maybe I should make the loser of the first game pay for this :D

I made the schematics and PCB in Kicad. Sorry Guys, I use a old computer and AutoCad doesn't run very well.

After a long wait, The board arrived. The image I chose was that of The Pillars of Creation nebula to signify my first project (and contest) on hackster. The board turned out great. But do note that when ordering from PCB Way, for a good contrast you order the UV print in glossy not in matte. I believe the default is Matte.

PCBWay was much faster than my local manufacturers. Though it came at the cost of paying customs duty. But the options they provide makes me my go to for specialized projects.

So now the Functional Requirements1. Touch sensors, OLED, Buttons and LED's should work2. The led should provide a Star blinks3. Connect 4 game should be playable4. Pixel Frame mode by connecting to internet via MQTT

Component Integration

I Used the Adafruit SSD1306 Library, It worked straight out of the box. Buttons For buttons I used Bounce2 by thomasfredericks library, again worked well. For LED I Used Adafruit's Neopixel library, and the LED worked, but since I used only one Pin for LED and laid down the LED's in a zigzag way, the led numbering does not well work with a Row, Column numbering system. so I used a helper function to convert row column format to led index.

int getLEDIndex(int row, int col)
{
// Returns the LED number for neopixel from row and column
return row * 7 + ((row & 1) ? 6 - col : col);
}

When it came to the touch sensors using adafruits mpr121 library.. Oh my dear, it did not work, I increased the sensitivity using the setThresholds function, but no avail. I had previously made a test pcb with 3x3 grid and it worked well in that. It took me a week to find out the problem. The touch pads and the traces was so long and thin that the capacitance change was very negligible. I should make it thicker (i cant make it shorter). But to fix this pcb I dug into the datasheet of mpr121 and found the answer, increase the charge current as well as the charge time to counteract the thin traces. That along with increased sensitivity started detecting the touches but not reliably.

// Increase charge current (default = 16uA → max = 63uA)
cap1.writeRegister(0x5C, 0x3F); // 0x3F = 63uA
// Increase charge time (default = 1us → max = 0x03 = 32us)
cap1.writeRegister(0x5D, 0x03); // 0x03 = 32us
// lower touch/release thresholds for sensitivity
cap1.setThresholds(3, 3); // lower = more sensitivev

After plotting the filteredvalues and baseline values, it was found that the baseline values which should compensate for the change in environment kept changing fast and would matched touched values. Since I was running short of time, I turned off the baseline value changes and everything worked like a charm. I haven't had a problem yet with the touch after that

Casing.

The PCB is large and so using it just like that without mechanical reinforcement is gonna damage it long term, so I made some acrylic cutouts. Also when it has to be used as a pixel frame, I need a diffuser so I also engraved the parts of the acrylic. I also learnt a mistake. Acrylics are in 2 or 3mm. and my PCB is 1.6mm so for correct stacking, I had to 3D print a 1.6mm spacer to red aesthetically close the gaps. To create the halo effect without light leaking, I had to use a opaque black acrylic as an isolation.

Star blinks

To pair with the nebula UV print I needed random LED to blink like a star. So to simulate it I made a array of struct of values that contains the location of led, the target color etc. and it would fade to it and then back to black. After one led reaches black another one is randomly chosen.

Connect 4 game

To keep track of the status of led, I have a gridstate function. IT keeps track which player has selected the grid and thus the right color will be turned on. Also I have a helper function that checks if 4 of the players led are in a same line to detect a win. To make things simple, I made the code such that if a player touches any point in a column, then the lowest unselected point will be considered as his choice to simulate the coin dropping.

Pixel Frame mode

For this I need an server that can accept an image by url and convert it to 7x7 RGB values which I send via MQTT. I know django framework in python so I used a simple django project. I used emqx's free private server to send it and esp32's pubsub library to set it up.

Thats when I noticed two things. One of my LED failed in green color so it was not showing properly, and two I need to calibrate the colors for accurate representation.

Menu screen and button

I used a custom menu and callback functions to make it into a cohesive device. Used an utility and mode variable to keep track of the menu state. The menu is also capable of submenus. there might be bugs so be aware.

How can you replicate my project

Assuming you want to replicate all my functionality

• Signup on emqx and setup a server. Create 2 users one for the django server and one for the device. Also note the mqtt port and server url
• replicate the django project on my github repo / uploaded file and in the code pixelate/views.py update the url, port, topic, username and password. (I have to better use a env variables but since I got less time this had to be done) and run the server. more details in the readme file
• The gerbers are in the pcb github project / uploaded file. Send it to PCB way along with the image of nebula as UV printing. Remember to ask them to make it in gloss finish. also go for a thicker pcb to make it study without the extra acrylic. If possible, do make the traces thicker as much as possible.
• Assemble the board and program it using serial programmer, VSCode and Platformio setup after changing the mqtt credentials in the code

Customizing it

You can customize the menu, the color of the game, even the number of lined up points for win. You can make it 3 to play tic tac toe. Increase the nebula stars count, their blinking profile, brightness and speed

I used the Pillars of Creation Photo which is in public domain. Credits to NASA

Things to do more

I wanted to make more games and make it more ergonomic to use. and make the casing easier to take off. so that will be seen in Part two. not to soon though if I get enough supporters and ideas. so do comment on these.and of course, need to make the code more readable.P.S. I use Gitlab for all active development and Github I use only for public repo. so this being my first public project you wont see much there.