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

HTML Page

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']);

Arduino Sketch

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.

Screenshots

  • HTML page rendered on desktop browser

Fountain

  • Updating HTML page is super easy with the http://WebsocketsTest.local/edit interface

Fountain

Components

Toolchain

Connections

NeoPixels Power and Gnd goes to Vin (5V) and Gnd of NodeMCU board. The Data pin goes to D4 (TXD1), this cannot be changed if you want to use the NeoPixelBus library (UART Driven branch).

Future improvements

  • Use the iPhone Gyro instead of sliders like I did here
  • Change RGB to HSL, I don't really find RGB very intuitive.
  • Make the HTML page render better, load faster, not scroll, etc. on iOS Safari
  • Add proper margins to the HTML page, sorry I'm a total noob at web stuff
  • Not use jQuery if not absolutely necessary
  • Make websocket messages print on same line in Serail terminal to avoid scrolling
  • Could add NeoPixel animations, but that's nothing to do with WebSockets really
  • Use NeoPixel strip as a OTA progress bar for firmware updates. I know it's possible becasue of this.