I made a LED dog collar with JavaScript.

❤️ 💛 💚 💜

JavaScript is truly EVERYWHERE, and now I’ve even added it to my dog. Last week, I made my dog a snazzy rainbow magic collar with an Arduino, LEDs, and JavaScript.

I’ve been playing around with hardware for the past year. Mainly, I’ve been interested in making little, useless things that flash and glow all colors of the rainbow with LEDs. I’m not super interested in using hardware for home automation or for real practical uses, really. For me, working with hardware is where I can be silly and indulge my child-like wonder. I like creating art or fashionable things whose only purpose is to bring a little joy to those around me (& myself).

I recently saw that Adafruit had released a new Arduino board called the Circuit Playground Express and was pretty anxious to try out this little board.

I was quite excited with it because it has a bunch of sensors (temp, light, motion, sound) AND 10 neopixels built-in. But probably the coolest thing about it is the multiple ways in which you can program it! You can program it 3 ways: (1) using Microsoft MakeCode and writing JavaScript or block-based code (like Scratch), (2) using CircuitPython to interpret Python directly on the board, or (3) using C++ with the Arduino IDE. I was most excited to try the MakeCode Editor and finally write code for my wearables in JavaScript instead of hacking C++(ish) code together!

So, I obviously used this opportunity to make a fancy collar my doggo for night walks. He’s a good boye and totally deserves a special collar. I also think that the steps in this build could just as easily be applied to other lighted apparel applications like adding some LEDs to your denim jacket or backpack or hat or <insert your awesome idea here>... ✨

Let’s jump into the build process!

Note: Some thoughts about being a new maker & soldering.

Don’t shy away from jumping into playing around with hardware and LEDs because you don’t feel confident or don’t have the supplies to solder yet!

The Circuit Playground Express is extremely versatile. It’s tons of fun on its own with the built-in 10 Neopixel LEDs without needing to solder any additional LEDs to it. Don’t worry about adding additional LEDs until you wanna explore more in-depth and go bigger. :-)

The main ingredients: dog collar, leftover neopixels strip, & adafruit circuit playground express

First, I plugged the Circuit Playground Express into my computer using a micro-B USB cable. I wanted to test the board first and check out the MakeCode Code Editor. I’ve only used the Arduino IDE to create code with C++ on Arduino boards previously. The Arduino IDE is not impossible to use, but sometimes it is frustrating to setup, so I was pretty excited to check out the user friendliness of a web-based code editor instead and work with JavaScript since I’m more comfortable with it than C++. MakeCode works in most browsers, compiles the code in the browser, and works offline. The best part is that loading code onto your board is as easy as dragging and dropping the file while the board is plugged into the usb!

So, for this first step, I wanted the built-in LEDs to flash a simple rainbow animation. You can use multiple show ring blocks to create basic animations. The example below is a blinking animation that repeats in a forever loop. With MakeCode, you can code this using the block-style visual editor (like Scratch) or with the JavaScript editor:

Piecing together ‘show ring’ bits with selected colors in a forever loop to create a simple 2-part animation.
Creating the same 2-part animation as above, but using the javascript editor.

On the left side of the screen, the editor shows a simulator of what your running code will look (or sound) like on the Circuit Playground Express!

When you are ready to load the code onto your board, you just click the ‘Download’ button, enter Bootloader mode by clicking the reset button on the board, and drag-n-drop the downloaded .utf2 file onto the removable drive CPLAYBOOT in Finder. Adafruit has great tutorials on all of this, so check those out for the most detailed directions: https://learn.adafruit.com/makecode/downloading-and-flashing

I felt happy with my first go in MakeCode and that it was working on my board, so next I dove into soldering the additional Neopixel LED strip to the board.

To connect the Neopixels LED strip to the Circuit Playground Express, I needed to solder 3 connections:

  • GND to GND (the ground)
  • 5V to VOUT (powers the LEDS)
  • Din to A1 (sends data to the LEDs & tells it what to do)
Pro-tip: Creating a Fritzing diagram can save you so much headache from mis-soldering something 😥(see below).
A test fit of the board and LEDs on the dog collar.
Ready to start soldering!
Attaching LEDs to dog collar with zipties

I coded the collar using the JavaScript editor and the MakeCode API reference docs. I wanted the collar to do a few different things:

  • It should continually run a rainbow 🌈 animation on the board and strip’s LEDs.
  • If it detects a shake, it should sparkle ✨ randomly on the strip for 1 second.
  • If I press button A, it will turn off all the LEDs.
  • If I press button B, it will turn on the rainbow animations on all LEDs again.
Writing and simulating my code as I go in the MakeCode editor.

To start off, I used a forever loop method. In the loop, I first check if the needsSetupboolean is true. If so, I run the setupStrip() method to set the colors initially for the LED strip. Then, I check if the LEDs are paused (this happens if Button A is pressed). If not, it will run the rainbow animation indefinitely.

The only actions that can interrupt the rainbow animation loop are (1) if the collar detects a sudden shaking moment or (2) if Button A is pressed. If a shake is detected, the LED strip will sparkle randomly for 1 second. If Button A is pressed, all the LEDs will turn off until Button B is pressed.

Rainbow, Shake sparkles, Button A turns it off, then Button B starts it again.

Below is my final code for the collar (for now, at least).

I totally goofed the soldering of the Din to the wrong pin on the Circuit Playground Express. 😞

I was so excited to get started, that I neglected to carefully look at the Pinout info on the product page. Always do this first and save yourself the same grief as me!

I didn’t and ended up soldering a wire from the Din to A0. While this worked, the Circuit Playground made a constant clicking noise when the lights were cycling. This is because the A0 pinout will interfere with the built-in speaker if it’s used as an output. I didn’t want the collar making weird sounds when it was running, so I had to fix it. But, no fear, I heated up the connections again with the soldering iron, loosened the wire, and re-soldered it to the A1 pinout. 😎

❤️ 💛 💚 💜

I hope you feel inspired to check out the Circuit Playground Express, MakeCode, and will try coding your first hardware project! ✌️

Developer. Expat. I taught myself to code.