loading

This project was put together over a wet Sunday afternoon to combine three technologies into one project.

  • An ESP8266 wireless device
  • An Adafruit Neopixel ring
  • A 3d-printed frame for the project.

The design allows you to change the patterns and colours of the Neopixel from a web page.

Step 1: The Circuit

The setup of the ESP8266 using the Arduino IDE is well documented, so I won’t

go into it here. I initially used an ESP8266 development board but quickly switched to the lower-cost ESP-01’ the one that exposes eight-pins. The wiring diagram is shown above.

To ensure there is a good fit of the ESP into the 3d holder, I desoldered the pins and hard-wired the EP8266 based on the wiring diagram shown.

During programming of the ESP, the GPIO0 pin needs to be temporarily grounded, so I resoldered one of the pins onto the front of the circuit board to make this easy to access.

In the final photograph you can see two pairs of wires, one pair is for external power and the second pair are temporary to hook up to the serial programmer.

Step 2: The 3d Mount

I designed the 3d housing to mount the ESP8266 within the profile of the

Neopixel. The 3d model can be downloaded here: http://www.thingiverse.com/thing:1021530

The photograph shows the prototype circuits mounted in a redesigned Mount. This later design gives you more options to route the wires below across and around the ESP.

Step 3: The Code

The standard Arduino sample code for Neopixels run through their sequence or pattern before returning to the main loop. Using an ESP8266 as the microcontroller means that the web server is not responsive during that interval.

I used animation code from a little-known article on Adafruit that ensured the web-server code was never blocked by the animation code itself.

The original article can be found here https://learn.adafruit.com/multi-tasking-the-arduino-part-3/put-it-all-together-dot-dot-dot and is referenced in the attached code.

You change the colour of the Neopixel using the URL assigned to the the ESP,

For example, http://[Your IP Address]/R sets the Neopixels to Red.

The complete options are:

  • /R=Red
  • /G=Green
  • /B=Blue
  • /W=White Scanner
  • /X=Rainbow
  • /Y= Rainbow Cycle
  • /Z=Chaser Rainbow
  • /set=R=255&G=255&B=100 [Set values to change to specific colours]

The code for my version can be modified to change the behaviour or add in addit

Step 4: Putting It All Together

The completed Project will light up the Neopixel initially with a static display until it connects successfully to the Wifi given in the code.

Once successfully connected, the Neopixel changes to an animated display. Of course you can easily modify the code to change this behaviour.

Have fun!

<p>hi nice code, am having fun with it :) but i cant seem to get the set RGB value command to work. says 'not found..' when i type in like you did above</p>
<p>@Bongmaster: The text is wrong. It should be: /set?R=255&amp;G=255&amp;B=100</p><p>@ianbren: Nice instructable. Gives me a good starting point.</p>

About This Instructable

6,129views

29favorites

License:

More by ianbren:Neopixel, ESP8266 and Custom 3d printed holder 
Add instructable to: