NeoPixel Web Server

Instructions

1. Install Arduino IDE software. Not the web one. https://www.arduino.cc/en/Main/Software

2. Install the NodeMCU software using the instructions on this page https://randomnerdtutorials.com/how-to-install-esp8266-board-arduino-ide/

• On step 4, select the current version (v2.4.2 at the time of this workshop, December 2018).
• On step 5, select the NodeMCU 1.0 (ESP-12E Module) board for this workshop.

3. Install the FASTLED library

• Select Arduino->sketch->include library->manage libraries
• Search for FASTLED and install (version 3.2.1 at the time of this workshop, December 2018).

4. Download the arduino software for the fastled webserver https://github.com/jasoncoon/esp8266-fastled-webserver

• Click the "Clone or download" button and download the zip. Save this zip file on your desktop or in the documents folder
• Right click to unzip the software
• Rename the folder to "esp8266-fastled-webserver" (removing the "-master" from the default name).

5. Navigate to the folder and run the esp8266-fastled-webserver.ino file

• Find the sections that start with '#include "FSBrowser.h"' and '#include "Secrets.h"' and replace those sections with these:

#include "FSBrowser.h"

#define DATA_PIN      5 //LVL1 change this!  This is D5
#define LED_TYPE      WS2811
#define COLOR_ORDER   RGB
#define NUM_LEDS      30 //change this!

#define MILLI_AMPS         2000 // IMPORTANT: set the max milli-Amps of your power supply (4A = 4000mA)
#define FRAMES_PER_SECOND  120  // here you can control the speed. With the Access Point / Web Server the animations run a bit slower.

//LVL1 change this to true!
const bool apMode = true;

//LVL1 Comment this secrets.h
//#include "Secrets.h" // this file is intentionally not included in the sketch, so nobody accidentally commits their secret information.
// create a Secrets.h file with the following:

// AP mode password
//LVL1 uncomment this!
const char WiFiAPPSK[] = "your-password";

// Wi-Fi network to connect to (if not in AP mode)
//LVL1 uncomment this!
char* ssid = "your-ssid";
char* password = "your-password";

• Save the changes.

6. Install the Arduino ESP8266FS tool from http://esp8266.github.io/Arduino/versions/2.3.0/doc/filesystem.html#uploading-files-to-file-system

• In the step that tells you to open a sketch, open the esp8266-fastled-webserver.ino we downloaded earlier.
  • The data folder should already be there and you shouldn't need to manually copy anything into it.
• Connect the ESP8266 board to your computer and select the appropriate COM port
• In the Arduino IDE select Tools->ESP8266 Sketch Data Upload.

7. Upload the sketch to the ESP8266 board.

8. Disconnect the ESP8266 board from the computer.

9. Connect the LED strip to the ESP8266 board with the supplied jumpers. Refer to the illustration below.

• The Din connection (in the center) on the LED strip connects to D5 (also labeled as GPIO14 in the illustration) on the ESP8266 board.
• The GND connection on the LED strip connects to a GND pin on the ESP8266 board (there's one right next to the D5 pin).
• The +5V connection on the LED strip connects to a 3V3 pin on the ESP8266 board (there's one right next to the GND pin).

10. Connect the ESP8266 to power using the USB cable.

11. On your phone or tablet, connect to the wi-fi signal from the ESP8266. (It will be named ESP8266 Thing ####.) You may get a "no internet" warning that you can ignore.

• The password is "your-password"
  • In AP Mode (Access Point) the password is in the sketch in the line that says
    • const char WiFiAPPSK[] = "your-password";
  • You can change it in the sketch, but very short passwords don't work well. You will have to upload the sketch after changing it.

12. Open a web browser and enter 192.168.0.4 and the ESP8266 + FastLED by Evil Genius Labs page should open.

• Use the buttons and sliders to set the colors/pattern you want.
  • Note: According to the FastLED FAQ on GitHub, "Not all LED chipsets receive their data in RGB order." CAD_Tim discovered when trying to set the LEDs to solid green (for St. Patrick's day) that the red and green controls are reversed on the set from this workshop. Test the color settings on your LEDs. In this case the fix was to edit the line the line below in your sketch, reconnect the ESP8266 to your computer, and then upload the changed file.

#define COLOR_ORDER   GRB

ESP8266 pinouts