ESP8266 Websockets demo using NeoPixels

Jan 24, 2016 • Ady

This post is inspired by a reddit post on the esp8266 subreddit. The awesome ESP8266 Websockets library has been around for a while, but I haven’t really been able to use it any projects yet, apart from ESPSocket, but that probably was more of a learning exercise for me. This simple project is (hopefully) first of many such samples of how this library can be used in some fun ways.

Here’s a demo video

Just go to http://WebsocketsTest.local/ on any device with a browser to control the NeoPixels

Features

Streams data from browser to ESP8266 using a websocket connection

Notification on succesful Websocket connection

Change R, G, B, individual pixel, On/Off

HTML page stored on ESP8266 SPIFFS

Update HTML page via browser

Source code

This HTML page needs the whole \data folder to be uploaded to the SPIFFS. Just keep it in the same folder as your sketch as in this repo and use Tools > ESP8266 Sketch Data Upload, which will copy all the files to the SPIFFS, and these will be accessible to your sketch.

If you want to keep these files on your computer (for testing) that’s fine too, just change var connection = new WebSocket('ws://'+location.hostname+':81/', ['arduino']);
to var connection = new WebSocket('ws://websocketstest.local:81/', ['arduino']);

This sketch seems a little too long at first glance because it is based on two examples FSBrowser.ino and WebSocketServer.ino. It’s basically running a HTTP server and Websocket server. The HTML/JS files are loaded from the SPIFFS. When it recieves certain values on the websocket connection, it goes and updates the NeoPixels. I’m using the UARTDriven branch of the NeoPixelBus library to avoid and long delays as I plan to do more animations in the future. The Adafruit libary might work fine too.