by MACE

We are makers. Some of us take an object and reshape it to make something new. Others of us assemble components together. For 50 years, I’ve made computer programs. And I still enjoy it.

In this post, I want to explain about the User Interface challenges I faced while programming an enhanced chess clock.

If you’ve seen the movie Queen’s Gambit (or just about any other movie with chess in it), you’ve seen chess clocks. Chess clocks are used to ensure games end in a reasonable time.

A chess clock comprises two, linked stop-watches. There are two buttons on top. The left button stops the left clock and starts the right clock. The right button stops the right clock and starts the left one. The clocks measure the total amount of time each player has spent thinking about and making their moves. Each player is given a certain amount of time at the start of the game. If a player hasn’t beaten their opponent before their time runs out, that player loses. There’s an indicator that shows which clock is running, and a little flag that drops to indicate that time has run out. In this day and age, digital chess clocks have often replaced analog clocks.

Now that looks like something makeable. A couple of 4-digit, 7-segment displays, a few buttons, a 3D printed case, some LEDs, a microcontroller — and a little bit of programming.

I took a different approach. I didn’t feel like buying and assembling the individual components. I wanted to write the code and begin using it very soon. Also, while chess is a two-player game, my family plays Rummikub which can be 2, 3, 4 or more players — so I wanted a variable number of clocks. I decided to use a Circuit Playground Express (CPX) from Adafruit.

The CPX is a microcontroller board that includes 1 red “status” LED (Pin 13), x,y,z-accelerometer, light meter, JST battery port, USB port for communication and/or power, temperature sensor, digital and analog pins, 7 capacitive touch sensors, 3.3 and 5.0V power and ground, two clicky push buttons, slider switch, infrared tx/rx, speaker, microphone, and (this is the best part) 10 RGB pixels.

It’s a great product to introduce people to programming. Programming can be done with MakeCode (a block based language), CircuitPython or the Arduino IDE. I chose to use CircuitPython and the Mu IDE to make my clock. When the CircuitPython firmware is installed, the CPX appears as a thumb drive called CIRCUITPY when plugged it into your computer. If you copy a file called code.py to the root of CIRCUITPY, the firmware starts to run it. The firmware senses whenever a new code.py overlays the previous one and auto restarts.

The challenge with this project was to design a user interface that can be used for a variable number of countdown timers using only the built-in components on the CPX. Here are the decisions I made.

How to tell how many players will be playing.
When the CPX is powered up, it immediately launches the code.py program which waits to be told how many players there are. It assumes at least two players, so it lights the first two pixels red. If there are more players, press and hold the A button until additional pixels light up. It’s possible to accidentally turn on more pixels than you intended. If this is the case, use the B button will turn pixels off. Code prevents you from setting fewer than 2 players. To finish up this step and move on to the next, tap the A1 capacitance pad. (My CPX is housed in a 3D-printed enclosure and the pads are a awkward to reach. To solve this, I clipped the head of an alligator clip to the pad. Rather than touching the pad, I can touch the tail of the alligator clip.)

How to indicate who’s turn it is.
With 2 players, each player gets allocated 5 pixels. Each set of 5 is a different color. With 4 players, each player gets 2 pixels. A player’s pixels will light up with appropriate color when their turn begins.

How to indicate that the clock is running.
I use the red status led. Each second, I toggle the LED.

How to end your turn, stop your clock and start the next player’s clock.
When the current player is done, they click their button – either button A or button B. When the next player is done, they click their button. Internally, players are numbered 0 to n. Even numbered players share button A and odd numbered players share button B.

How to indicate which player makes the first move.
Games don’t usually last a long time (although some players in my circle have historically taken a LONG time to make their move — hence, the need for this clock) and it’s common to play a second or third game after the first is finished.

For the first game, one of the players is designated the starting player (however that gets decided). That is player #0 and is assigned the first set of pixels and button A. The next player is assigned the second set of pixels and button B. This continues for all remaining players. When playing several games in a row, the starting player of the first game is not necessarily the starting player of the second game. For the second and subsequent games of the tournament, a new starting player must be indicated.

The number of players is the same, the order of players is the same, player numbers, pixels and buttons have all been assigned. None of that needs to change. But the clock does need to know which player will make the first move. The CPX prompts for the identify of starting player by lighting the 1st pixel blue. If the starting player is actually the 3rd player, holding the A button lights up the other pixels. Continue to hold until the starting player is indicated. Code prevents you from turning on more pixels than there are players and from turning off all the pixels. Tapping the A2 capacitance pad will lock that choice in.

When to start the first clock.
The number of players is set. The player to make the first move has been set. The next thing is to activate the clock of the starting player. This is done by covering the light sensor with your hand. When the sensor detects a significant change in brightness, it will start the countdown clock of the starting player, illuminate their pixels and blink the status led blinking.

How much time left.
In this first implementation, the CPX is connected to the Mu editor on a laptop via a USB cable which supplies power to the CPX. The Mu editor includes a serial monitor to which the CPX can write status information (like each player’s time remaining). Mu also has a built-in plotter. If a tuple is written to the console, the plotter will display the values of the tuple in a time graph. If you want to know how much time you have, just glance at the plotter (or the serial monitor). Here we see that player 1 (zero relative) has run out of time and gone negative.

A future implementation of the clock will be battery powered and there will be no plotter nor serial monitor. Instead, a single 4-digit, 7-segment display connected to the CPX’s I2C interface will display the time remaining for the current player. This exceeds the design goal of no additional components, but, what the heck.

What to do if the current player’s time runs out.
I play a sad sequence of tones on the speaker and light their LEDs red.

Here is a two-minute video demonstrating a four-player game with an artificially short time limit.

Yet to be programmed:
Set the length of time: Maybe light up the LEDs. The binary equivalent will be the number of minutes. This would put a 17+ minute limit for each player.
Indicate someone won (rather than someone timed out), game over, start next game. This could be done by shaking the CPX since there is a built-in cpx.shake() function that can be queried.