Homemade Hardware

Progress on ESP8266 Circuit


prototype breadboard

website working gif

For my final project, I am planning on making a small grid of LEDs that can be controlled by users from a website that is accessible from anywhere. Users will not be able to see the LED grid unless they are physically present, but they can still make changes. Hopefully, people will collectively create images or simply play around. This is kind of like a small physical version of Reddit Place. My current code allows you to choose more colors for the LEDs, but the demo shown in the gif only has red and blue. Keep reading for my process.

Part 1: Prototype with Feather Huzzah (Mostly Coding)

feather huzzah circuit prototype

Starting out, I knew that I needed a microcontroller that could connect to wifi and have one digital pin for me to control an array of neopixels. The ESP8266 is capable of this, so I decided to start with a Feather Huzzah board to get my code working.

A lot of my code is based on this example from an ESP8266 guide. The main things I changed were the website that interfaces with the ESP8266 and the data protocol to send info from the browser (client) to the ESP8266 (server). I also added code to control the LEDs using the Neopixel library.

The main thing here is that the client is sending two values back to the server - the position of the LED (values range from 0-15) and the color code (range from 0 to 5). I decided to send this info in 8 bits, so each value takes up 4 bits. I used bit shifting to combine the two values (see line 8), and then I convert that to a string in hexidecimal (line 10).Finally, I send the data as a string to the server (line 13).

On the server side, I am basically reversing what I did to convert the string back to integer values.

Part 2: Breadboard Prototype (Circuit Design/Uploading the Code)

prototype breadboard drawing from notebook

I based my breadboard off of Adafruit’s ESP8266 Breakout Eagle schematic. I wanted to upload code directly, so I am using an FTDI Friend to convert USB to serial. We have the FTDI Friends in the ITP shop, so I didn’t need to buy anything extra.

FTDI Friend

I set the Vcc to 3.3V by cutting the 5V jumper on the back and soldering the 3.3V pads on the back of the FTDI Friend. This is because the ESP8266’s max. voltage is 3.6V!!! I originally had a LD33V regulator in my breadboard circuit, but it was dropping the voltage too low for the ESP8266 to upload code for some reason. I know I will need to have a 3V regulator on my final circuit, so I’ll have to look for the right one.

image of the back of my FTDI Friend

Also, fun fact - TXD on your board goes to RXD on the FTDI cable. RXD on your board goes to TXD on the FTDI cable. That clearly makes sense, but at 2AM I did not do that.

picture of the whole breadboard circuit from another angle just for fun

Cool! One more thing - find the file called programmers.txt in the Arduino IDE files. Mine was located at the following folder: “/Library/Arduino15/packages/esp8266/hardware/esp8266/2.4.1/”. And add the following code to the end of the file.

Before you upload your code, you need to set the ESP8266 to bootload mode. Here’s what you do:

bootload mode gif

  1. Hold the GPIO-0 button. Your LED will light up.
  2. While holding the GPIO-0 button, press the reset button.
  3. Let go of reset button.
  4. Let go of GPIO-0 button.

Now I am able to upload code through the Arduino IDE! You need to do the button pressing thing each time before you upload code. And now I can do OTA uploads after uploading my code (; The next steps will be to convert my breadboard to an Eagle design and then fabricate!

Helpful Resources That I Used

Hopefully this saves you some Googling.

Javascript/JQuery

ESP8266 Code

Figuring out the data protocol

Breadboard Circuit/Uploading Code