ESP32 Pacman Clock

Build and customize your own ESP32 Pacman Clock with vibrant colors and your own favorite alarm audio track.

I've put together three options in this instructable dependent on your appetite for complexity of build

• "Build Option 1" - Old School - Build your own using stripboard
• "Build Option 2" - Learn a new Skill - Design and Order your own ESP Shield PCB via JLPCB
• "Build Option 3" - I just want this now! - Order a full kit set

Powered by an ESP32 with a touch screen it has very few components and synchronizes time over wifi. Users can also interact with the battle between the characters via the touch screen along with Ms Pacman and variable animation speed.

Great as an alarm clock or just a cool accessory under your desk monitor also great gift to build or give to your DIY electronics or Retro Gaming friends!

Note: Latest code means that end users can change Wifi credentials and Time Zone without the need to reload the code!!

Step 1: Gather the Materials

Background

A few years ago I developed the code for a Pacman clock which proved to be very popular, however, the build was complex, and the parts were expensive so I wanted to make it more accessible to other makers. This started with porting the code to the ESP32 platform and searching for alternative ways to enable a 2.8" parallel controlled touch screen. Using the ESP32 created the opportunity to eliminate the need for an RTC module, expensive LCD displays, and a soundboard. It also creates the opportunity to use Bluetooth to configure in future versions.

Therefore I've put together three options in this instructable dependent on your appetite for complexity

"Build Option 1" - Old School - Build your own using stripboard

• ESP32 Dev Kit 1
• HW-104 Amplifier Board
• ILI9341 2.8" TFT Touch Screen for Arduino UNO With Resistive Touch Panel
• 40mm diameter 8-ohm 3w speaker (Although you can use 4 ohm and 16-ohm speakers with a smaller footprint)
• Prototype Strip Board1 x Piece cut to 53mm x 80mm
• Female Header Strip - Cut to size 2 x 15pin, 2 x 6pin, 2 x 8pin
• 100 Ohm 1/4 watt resistor
• Hookup wire
• 1m USB Micro data cable

"Build Option 2" - Learn a new Skill - Design and Order your own ESP Shield PCB via JLPCB

• This is a great way of learning a skill for future projects
• See the bill of materials in Step 3 of this instructable

Build Option 3" - I just want this now! - Order an ESP Shield, 3d Enclosure, or even a full kit-set

Components are built and tested to remove 98% of the soldering and wiring

Step 2: Build Option 1 - Make Your Own DIY ESP Shield

I started with Breadboard then moved onto the prototype board before designing the fabricated Sheild PCB.

If you choose this option please note: You will need intermediate soldering techniques and tools to complete DIY ESP Shield along with a Soldering Iron, Solder Sucker, Solder wick. This is not an easy task, and I found I made multiple wiring mistakes before getting it right. My advice is that you do not connect the LCD or the ESP32 until you have tested and double-checked each point to point connection against the circuit diagram provided.

Note: Do not connect a USB cable to the ESP32 until Step 6 of the instructable as power supplied to the board may short out during the build process.

1. Mark out the required dimensions of the Prototype board (53mm x 80mm) with a pencil and ensure it is correctly oriented as per the photo provided.
2. Using a box cutter knife and a steel ruler place the Prototype board on a firm surface (wooden chopping board) and carefully scour both sides of the board multiple times. Press down firmly however be careful of your hands and fingers. Snap the excess board off using pliars.
3. Gently sand the edges of the board to remove any burs or shorted track that could cause issues in the future build process.
4. Place the Female Header strip onto the ESP32 and the LCD screen and mark the lengths. Cut them to length by sacrificing the next unused pin on the header. Then clean up the edges with sandpaper.
5. Put the ESP 32 into the Female Header pins and position it into the Prototype board on track side of the board. The key here is to elevate the header by a few millimeters so that the track is soldered on top of the board as per the photo. I found it was best to do a few pins on each side of the ESP then remove the ESP for better access with the soldering iron.
6. Flip the Prototype board over to the component side and position the LCD Female Header as per the photo provided. In this case, the header pins can be pushed all the way through the board and soldered with no gap between the plastic surround and the pcb.
7. Finally take short lengths of insulated wire and meticulously wire each connection between the ESP32 and the LCD as per the circuit diagram provided.
8. Connect wires to Input and Output Right channel of the HW-104 Audio Amplifier board and connect to the PCB as per the circuit diagram. Attach two wires as output for the 8 Ohm speaker which can be attached later.
9. Next gently heat the pin 5 of the HW-104 Amplifier Board and suck the solder from the board. Carefully lift the pin and solder a wire to this then insulate it and lock the wire into position with hot glue to avoid future damage to the chip. This pin is used to Mute the Audio Amplifier when not in use.
10. Finally, move on to the testing section of the Instructable to test the unit.

Step 3: Build Option 2 - Design and Order Your Own ESP32 Shield

I've put this option in as it really is a great skill to develop however it's not for everybody.

Note: Do not connect a USB cable to the ESP32 until Step 6 of the instructable as power supplied to the board may short out during the build process.

1. Firstly, navigate to the JLPCB site here and create a new account.
2. Once logged in Navigate to EasyEDA designer tool here.
3. Tutorials for EasyEDA can be found here and there are multiple YouTube tutorials available so I will not go into a blow-by-blow description of how to design a PCB.
4. However, I have provided you with a schematic circuit diagram below that you can copy and select your own components and board layout.
5. Use the "Add Gerber File" button to upload the Gerber File. This will import the design and give you a view of the PCB and its attributes. Scroll down to the bottom of the page and review the settings. If you want components installed you need to turn on the switch for "SMT Assembly" which will bring up additional fields. You will be asked to upload two further files which again are a by-product of the circuit design process. Upload the component BOM file Upload the Pick and Place file provided Points worth noting before finalizing the order "SMT Assembly" can only be added to one side of the PCB in the manufacturing process.
6. For this reason, I manually soldered in the Header Pins for the ESP32. Some components may be unavailable due to stock variability. In some cases, there are alternatives that can be selected. If not available then it becomes a component you need to source and add manually.
7. If you want to solder the boards yourself I recommend you order a solder mask that can be ordered with the PCBs which allows you to easily apply solder paste onto the PCB before using a heated bed or air gun to finish the process.
8. Follow the process and place the order for your PCB!

Step 4: Build Option 3 - I Just Want This Now!

Ive put together this option for those who just want this now - Order an ESP Shield, 3d Enclosure, or even a full kit-set here. I personally designed, tested and the shields enabling you to remove 98% of the soldering and wiring. Therefore only basic soldering skills are required.

Assembly instructions are as follows

Note: Do not connect a USB cable to the ESP32 until Step 6 of the instructable as power supplied to the board may short out during the build process.

1. Solder the ESP32 header pins into the Shield (unless you ordered them already installed)
2. Carefully orient the ESP32 device as per the diagram on the Shield and the ESP32 device into the header pins making sure the pin numbers all align.
3. Take the LCD and push this into the LCD header pins being careful to align them as outlined in the photo of boath sides of the board. Note that 4 pins are unused on the Shield as per the photo.
4. Carefully solder two wires to the speaker and put a 100 ohm resistor in series with one of the wires. The purpose of this is to regulate the volume of the sound in the speaker and to reduce power consumption.
5. Cover the exposed wires with heat shrink or tape and as an added precaution use a small dab of hot glue to retrain the speaker cable against the speaker chassis so the movement of the cable will not stress the soldered joints. Be careful to keep any glue away from the speaker membrane as this will damage sound quality.
6. You are now ready to load the code and test the unit covered in Step 6.

Step 5: 3D Model

The largest part you have to print is 130mm x 75mm x 48mm so this project can be printed on most 3d printers. The print consists of 5 components

• Front Bezel
• Front Panel
• Decal
• Back case - includes holes for speaker, ventilation and the USB Micro cable (avoids cutting and soldering power cables and enables code uploads post assembly!!
• Speaker enclosure - this was importantly added to avoid any shorting of the electronics with the speaker when assembling

The 3d files can be found on Thingiverse here

Note:

1. I have noticed that not all LCD screens have the same physical placement on their mounting PCB or their ribbon cable entry Is variable. To accommodate this I have updated the front panel STL file to ensure it caters for this variation and provides more clearance when installing the screen.

2. The purpose of the small alignment tabs on the back of the bezel is for aligning the bezel to the front panel before gluing it in place. Occasionally the tabs break off when printing however please note they are obscured when assembled so don't worry if you lose one or two during the print or build process.

Step 6: Putting It All Together

There are five high-level steps to getting the ESP32 Pacman Clock working correctly

1. Getting your Computer ready to upload code

2. Calibrating the touch screen

3. Loading the ESP32 Pacman Clock Code

4. Using a Mobile Device to setup Wifi Router access for the Clock so it can synchronize the time

5. Setting the correct time zone for your location through the ESP32 Pacman Clock menu system

1. Getting your Computer ready to upload code

You will need to install the correct Arduino IDE Software loaded on your computer, and the correct Libraries for the project, and will require a USB Micro Serial Cable designed for data transfer - not just charging.

Arduino IDE installation Instructions on how to do this are clearly described here and cover both Windows and Mac installations.

Loading the correct Correct Libraries for the project!!

In order to make this easier, I have put together a zip file with the required Libraries located here. My recommendation is that once you have the Arduino IDE successfully installed you move the existing libraries you have to another location and just expand out this zip file into the Arduino IDE library subdirectory. This saves a lot of hassle messing around with libraries.

2. Calibrating the touch screen

This is something you should only need to do once for the specific screen you are using with the ESP32. It is important to do this as many screen manufacturers use different techniques and this means the menu buttons will not work on the clock. Attach the Screen to the Sheild and the ESP32.

Using your computer and the Arduino IDE load the Calibration Sketch located here.

Once loaded follow the screen instructions carefully, the calibration code will store the coordinates into the ESP32 NVRAM which means it will stay in the ESP32 even after powering off.

Note: There is a Youtube Clip above that shows the calibration process that is worth watching.

3. Load the Pacman Clock Code

Download the ESP32 Pacmanc code located here and upload the code to the ESP32 using the Arduino IDE. When loaded correctly you should get a blue light rapidly flashing on the ESP32. This indicates the device requires Wifi to be set up.

4. Use a Mobile Device Setup Wifi Network Access

The code now incorporates the ability to securely set your Wifi Accesspoint and password without the need to reload the code which is very convenient for the user of the clock. It avoids problems with changes to wifi passwords or relocating the clock to other wifi access points.

In order to keep the Clock Synchronised with the correct time, an NTP server is polled over the internet when the clock is powered up.

This requires you to add your Wifi access router name and password.

Be assured that the code only connects to the internet on power-up, gets the time from a time server then disconnects until rebooted. There is no internet data collection going on just the convenience of not having to add a real-time clock board and a battery for the clock.

***Note of recognition: This innovation is courtesy of Matthew Ford who very helpfully contributed with code further explained here ESP32 / ESP8266 Auto WiFi Config Preparation - You will require the following

• Your Wifi Password and Router name
• Wifi capable mobile device (Phone or Tablet)
• QR Code Scanning App on the device (not mandatory but makes it easier)
• Print out the Wifi Access Graphic provided and use a glue stick to glue it to the back of the case

4.1 Put Clock into Wifi Configuration mode

In Wifi Configuration mode the ESP32 is set up to become a Wifi Access Point temporarily so you can upload your Wifi Credentials using a mobile device.

The Clock is in Wifi Configuration mode when the blue led on the ESP32 flashes quickly.

The procedure for putting the Clock into Wifi Configuration mode is to

• Attach the USB cable to the Clock for 5 seconds
• Disconnect the USB cable for 2 seconds
• Re-attach the USB cable

The blue led on the back of the PCB should now flash quickly. If not repeat the procedure.

4.2 Connect your mobile device to the Clock over Wifi

With the blue led flashing quickly (indicating that the WiFi configuration mode is active) scan the QR code to connect your phone to the Clock.

SSID: WiFiConfig

Password: 12345678

4.3 Enter your home Wifi credentials into the Mobile Device

Then open a web browser and type in http://192.168.1.1. to display the WiFi configuration page. (This configuration page may also popup automagically.)

On the configuration page enter your Wifi Credentials for your local wifi access router. Take care to get the syntax correct.

Press the configure button to save this to the Clock.

4.4 Return the clock into Clock Mode

When in Clock mode The blue led will flash slowly. The procedure to put the clock into Clock mode is as follows

• Disconnect the USB cable for 12 seconds
• Attach the USB cable

After approx 20 seconds, the Clock should now start and display the correct time. The Clock should display time and play the "Pacman" startup audio clip.

If there are issues please go back through each of the previous steps and validate each has been followed carefully.

5. Setting the correct time zone

The latest version of the code enables you to set your time zone through the setup menu system. It also stores this in NVRAM so this procedure should only be required to be done once based on your geographic location.

If you have calibrated the screen and the clock is connecting to Wifi correctly then you just need to press the centre of the screen for 2 seconds and this will launch the setup menu.

Once in the setup menu, use the “Set TZ” button to enter the Set Time Zone menu.

Select your correct time zone by pressing and holding the “PREV” or “NEXT” button.

This should enable you to cycle through the 43 time zones provided and select your time zone.

Once the correct time zone is selected press the “Save and Exit” button. You will see a message confirming that the new Time Zone has been saved to NVRAM. (See picture provided)

This should return you to the main clock screen.

Note: the time will not change time zones until the clock is rebooted. Turn power to the clock off for 12 seconds then on again. The correct time for your time zone should now be displayed.

Message me for help if you have any further issues.

Step 7: Adding Your Own Custom Sound

The cool thing about the ESP32 is that it has enough memory and resources to store and playback Digitized audio.

This means you can create your own sound effects for both alarm and the button presses on the clock.

The library used to produce sound in the ESP32 is "XT_DAC_Audio.h" which uses audio files converted to hex files which are then stored in header files along with the sketch for the ESP32. The process for updating them with your own audio file is as follows.

I have stored two existing sounds including the Pacman startup theme in the header file PM[34468] and the menu select sound under gobble[15970].

To modify or replace these use the following process

1. Select and Download your desired audio file in a Wav format. This can be done by using a youtube downloader or audio file converter.

2. Download the Audacity application onto your desktop device from here. Use Audacity to combine the sound into a mono track.

3. Shorten clip to correct length

4. Change sample rate to 8000 using the project option. The key is to keep the number of Data samples to less than 40,000.

5. Select all audio and resample under the tracks menu

6. File export selected audio to WAV Microsoft, Unsigned 8-bit save file

7. Go to https://hexed.it/ and upload the file.

8. Right-click and select all menu option

9. Right-click and Export selected bytes as a code snippet (Check number under 40k samples)

10. Copy text from the window into Sound.Data.h

11. Add semi colon at end of the text

12. Name the file correctly "unsigned char PROGMEM Force"

For a detailed tutorial, you can see an example here by the author of the library here

Step 8: Using the Menus

1. Entering setup mode

You can enter setup mode by pressing gently on the centre of the screen.

2. Changing the Pacman character to Ms. Pacman

While in setup mode, pressing and holding the "Character" word in the centre of the screen will change the Pacman character to Ms Pacman indicated by a sound being played and the icon changing.

3. Change Game Speed

The animation speed of the characters on the screen can be changed from "Normal" to "Fast" to "Crazy!!" speeds. When selected a sound will occur and the animation will be in place when you exit the screen.

4. Set Alarm

If the Alarm menu button is pressed the time that the alarm sounds and the set function can be enabled. These are saved when the "Save & Exit" button is pressed.

Note: Prior to entering Setup Mode Pacmans direction can be interacted with by pressing left, right, Up, and Down extremities of the screen.

Now have some fun with your Pacman Clock, enjoy :)

Step 9: Next Steps

Next steps for this instructable would be to

1. Incorporate Bluetooth into the code so a mobile device could be used to set timezone and wifi settings
2. Storage of settings parameters into the NVRAM within the ESP32 so they can be recalled after being rebooted or power cycled.
3. Incorporating an LDR to automatically regulate the backlight brightness.
4. Including additional Arcade games as options from a menu to give it that real retro feel.

Im interested to get feedback on what you think would be a good enhancement so please comment or message me your thoughts. Thanks @TechKiwiGadgets