Introduction: An Internet Connected Arcade Clock!

About: My name is David Johnson and I make lots of things. As a micro-fabricator, I enjoy designing and bringing ideas to life using modern digital tools and lots of ingenuity. My goal is to entertain, educate and i…

Hey there! Ready to create a cool internet connected Arcade clock that restores that 80's nostalgia?

In this Instructable, I'll walk you through all the steps to making a retro RGB Arcade Clock that can receive text messages! It is able to scroll messages with animated arcade sprites and retro particle system graphics in a cool laser cut enclosure! Enjoy!

Steps covered include:

  1. Making the Circuit Board
    1. Designing a circuit for a Particle Photon, RGB Matrix and MP3 player
      1. downloading the gerber file
      2. using Circuits.io to create the circuit
    2. Milling a circuit on a nomad 883 CNC machine.
      1. preparing the gerber files to create a toolpath for the cnc machine
      2. performing the cnc steps (drill pin holes/mount holes, mill traces, cutout board)
    3. Applying a dry solder mask to the custom milled circuit board.
      1. creating the negative with transparencies
      2. applying the film to the circuit board
      3. exposing and curing the solder mask
      4. pre-milled boards are available from: http://www.diy.engineering/shop/
    4. Assembling the components
      1. soldering the components onto the circuit board
      2. testing the circuitboard
  2. Writing the software
    1. Deciding on the right libraries to use
    2. Organizing the code
    3. Programming the firmware on the Particle IDE to perform complex animations on the RGB matrix.
      1. using shared libraries in the Particle IDE
      2. organizing the software Logic
      3. creating custom sprite images
      4. creating custom fonts
    4. Integrating with txt/sms messaging using article Cloud and IFTTT
      1. hooking up the particle events in the cloud and integrating with IFTTT.com
  3. Building a cool enclosure
    1. Using a Laser cutter to cut card stock to create 3d relief graphics to adorn the enclosure
      1. finding reference art
      2. creating sprites using piskel
      3. converting sprite images to color separated dxf using adobe illustrator
      4. cutting the graphics on a laser cutter
      5. laser cut graphics are available from: http://www.diy.engineering/shop/

  4. Finishing up the project.
    1. assemble the 3d sprites using sticky bumps crafter foam blocks
    2. adorn the case with the custom sprite graphics
    3. create a plexiglass cover for the shadow box.

It sounds complex but ill walk you through the whole process in the videos.

There is a lot to cover so lets get started!

Step 1: Building the Circuit for an Internet Connected Arcade Clock

In the first video I walk through the process of designing and building the circuit aka "the hardware" for an internet connected rgb matrix arcade clock! I talk about the components we will use as well as designing the circuit using Circuits.io free online editor.

Attached are the .nc(grbl) files that you can use directly on your cnc machine.

For the highest quality, the order in which the circuit board is milled is important.

Below identifies the tool and sequence of each of the four milling operations.

CNC tooling and Milling the four GRBL files:

  1. First, use a #64 / 0.036" drill for the pin holes.
  2. Next, use a 0.128" drill for the mount holes
  3. Next, use a 0.015" two flute altin coated stub endmill to mill the circuit board.
  4. Finally, use a 1/8" / 0.125" 4 flute flat endmill to cut out the board.

Below is a link to the circuit design that is available online.

Circuits.io Schematic: https://circuits.io/circuits/2962119-8bitclock

Next we will apply a solder mask and assemble the electronics.

Step 2: Apply Solder Mask and Assemble Electronics

Although you can skip applying a solder mask, it is a great way to protect the contacts on the board and provides a clean and finished look to the circuit board.

I use Dynamask and it is available at the link below.

http://www.rembrandtelectronics.com/product/dynama...

it is a great alternative to traditional solder masks and perfect for short run prototypes.

Applying the Solder mask is easy but requires a very specific process.

follow the steps below to apply the mask:

  1. Clean the board with acetone.
  2. The following steps are UV sensitive, perform them in a dim lit area to minimize exposure to UV radiation. (stay away from natural sunlight)
  3. Remove the frosted layer from the Solder Mask. (use two pieces of tape) Affix one edge of the mask to the board, rolling smoothly across the surface lightly to prevent trapped air bubbles or wrinkles.
  4. Trim excess mask away from board, when heated it will become very sticky, if excess material adheres to the laminator it will be difficult to remove.
  5. Prepare heating tool Set iron to the 'wool' settings or set the laminator to the hottest position. allow adequate time for the heating element to reach temperature. If using a laminator no protective coversheet is required, Run the board through the laminator 3-4 times. If using an iron, lay a paper towel or teflon sheet over the circuit board.
  6. Apply pressure to the board with the iron while moving it around slowly to distribute the heat evenly. (around 15-20 seconds of the hot ironing, do not over heat)Submerse the board in cool water immediately for best adhesion.
  7. Expose the dynamask side of the board (approx. 45 sec. at 4×15 watt UV or 5-10 minutes in direct sunlight depending on intensity) Lay down the board: :45-:60 minutes in a dark place to allow for the mask to cure! Remove the second (shiny) layer. (use tape)
  8. Develop in 1 liter water and 10 grams developer at 45C/113F degrees.
  9. Use a soft acrylic brush for developing.
  10. Gently rub the board until solder mask desolves away in unexposed areas.. If things haven’t worked out OK completely, you can just leave the board in the developer.
  11. After a few hours, everything will be dissolved and you can start all over again. In this case you need to make new developer. After developing do not touch the Solder Mask.
  12. Rinse with water and let the board dry. Expose 30 minutes to harden under UV or direct sun light Time to assemble your board!

By now you should have a nice looking Board, ready to assemble the components.

Solder the following components in the correct orientation onto the board. (refer to the schematic for confirmation)

Below is a list of the components necessary for the circuit.

Next were ready to start testing and programming the board.

Step 3: Programming the Firmware for an Internet Connected Arcade Clock

In this video I'll walk through the process of building the Software for an internet connected RGB matrix arcade clock! Building firmware logic can be complex. I try to simplify it in terms that everyone can understand.

To simplify, we will be using several existing libraries to create an elegant mashup of the source code to organize a clean and extendable firmware that is easy to understand.

Follow along in the video for a complete walk through of the design and implementation.

if you have questions about the details of any part of this, please ask in the comments below, i'm happy to help out!

All of the source code is available online as well as in the attached zip file and also available in my GitHub repo using the link below.

GitHub Repo: https://github.com/dgjohnson/Particle_ArcadeClock

In addition to the source code you will need the audio files that you find attached to this step.

The .mp3 files need to be added to a microsd card and inserted into the mp3 player.

The files names are important as this is how the software requests the correct file to be played.

You can replace the mp3 files with any mp3 of your liking.

have fun, get creative!

Step 4: Building a Cool Enclosure for an Internet Connected Arcade Clock

In this video I finish the 3D shadow art enclosure for the internet connected rgb matrix arcade clock!

  1. First assemble the sprite graphics using the laser or exacto cut graphics
  2. Next use hot melt glue to attach the matrix to the back/inside of the canvas.
  3. Next place the graphics on the front of the canvas/enclosure
  4. Next cut the plexiglass to 8"x16"
  5. Next drill a hole in each corner on the front of the canvas for the standoffs to screw in. (be sure to locate them so they will screw into the wooden frame)
  6. install the standoffs on the front of the frame.
  7. Next drill corresponding holes in the plexiglass. (lay the plexi on top of the standoffs, use a sharpie to draw a dot, to get exact locations)
  8. Next remove the protective coating from the plexiglass and install it on the standoffs using the plastic 3mm screws,
  9. stand back and admire!

Honestly, this turned out better than I expected, and it was real easy, if you do not have a laser you can certainly print the attached files out and cut with an exacto knife. or if you like, I have a limited quantity of laser cut graphics available from http://www.diy.engineering/shop/

Parts that you will need to create these art elements include:

Sticky Dots for Shadow Art: https://goo.gl/vSOklo

Colored Card Stock: https://goo.gl/ajIYf7

8x16 Canvas: https://goo.gl/dgbew1

12x16 Plexiglass (needs to be cut to 8x16): https://goo.gl/6jC9GD

Plastic Standoffs: https://goo.gl/z4s49C

Take your time, follow the video and enjoy the process and these will turn out great!

Step 5: Info and Feedback

I hope you enjoyed this tutorial. I really enjoyed making it. with the customizable graphics and sounds and sms integration I think it is a great addition to any office or game room!

Please Vote for my project if you find it interesting! (in the upper right corner)

*If you do not have the cnc or laser tools, limited supplies of the custom milled circuit boards and laser cut arcade graphics are available from http://www.diy.engineering/shop/

Information and full resources are available on my website or other social repos and platforms, I hope you Enjoy!

Check it out over here:
http://www.diy.engineering https://www.instagram.com/david.g.johnson/ http://www.diy.engineering https://twitter.com/DIY_Engineering http://www.diy.engineering https://www.thingiverse.com/DavidJohnson http://www.diy.engineering https://github.com/dgjohnson

Let me know what you think or how I can improve my instructables.

Thank you!

David Johnson

DIY Engineering

http://www.diy.engineering

CNC Contest 2016

Participated in the
CNC Contest 2016

First Time Authors Contest 2016

Participated in the
First Time Authors Contest 2016

Arduino Contest 2016

Participated in the
Arduino Contest 2016