Build an Internet of Things Neopixel Controlled by ESP8266 Web Server

I wanted to create an IoT product which I could control with my smartphone or laptop, so I started this project. The project is about how to use the ESP8266 to create a webserver with which you can control your Adafruit Neopixel LEDstrip in Arduino. The project can be used to do a lot more epic things than just turn on/off some lights, like lock/unlock your scooter or something, but I haven't got enough time to make this happen. So how about creating our webserver?

Let's go!

Step 1: Prepare Arduino 1.0

1. Open your Arduino program.

2. You need to install the ESP8266 for Arduino. Go to file > preferences. See picture the on the left above.

3. Search for Additional Boards Manager URLs. Enter 'http://arduino.esp8266.com/stable/package_esp8266c... in the text field as shown in the picture on the right. After that, click the 'Ok' button.

Step 2: Connect Your ESP8266 Board

4. Go to Tools > Board > Boards manager... See picture above.

5. Search for the ESP8266. If the you did the previous step right, you can find the 'ESP8266 by ESP8266 Community'. Now you have to install this by hitting the 'install' button on the right. See picture above.

6. If you nailed all the steps before, you can go to Tools > Board and choose the ESP8266 board. Make sue your board is connected to your USB port. After that you have to re-start your Arduino program, so that the new installations can be done.

Can find the board? Check if your board is connected to the USB port on your laptop/desktop. Maybe you have to pull the USB out, and put it back in. Go back to step 1.

Step 3: Connect Arduino With WiFi

So now we are ready to start coding. YAY! Or nay. Well, it's not that hard. I will show you first how to connect your Arduino file, with the internet step by step.

1. Start a new file

2. Start above the 'void setup'. We have to add WiFi libary from the ESP8266 so Arduino knows we want to do something with internet. Add '#include ', as in the picture above.

3. Replace in the code the "your-ssid" with the name of your WiFi and replace "your-password" with your own WiFi password. Don't forget to put "" around the name and the password.

Step 4: Use This Code

Copy the whole following code to your Arduino. With this code we will make a webserver on the internet, with html and css trough Arduino. We will put a button on this page that will be the controller for the Neopixels.

// Load Wi-Fi library
#include

// Replace with your network credentials const char* ssid = "your-ssid"; const char* password = "your-password";

// Output Ledstrip #include "Adafruit_NeoPixel.h" #define PIXEL_PIN D5 #define PIXEL_COUNT 30 #define PIXEL_TYPE NEO_GRB + NEO_KHZ800

Adafruit_NeoPixel pixels = Adafruit_NeoPixel(PIXEL_COUNT, PIXEL_PIN, PIXEL_TYPE);

// Set web server port number to 80 WiFiServer server(80);

// Variable to store the HTTP request String header;

// Auxiliar variables to store the current output state String output5State = "off";

// Assign output variables to GPIO pins const int output5 = 5;

// Current time unsigned long currentTime = millis(); // Previous time unsigned long previousTime = 0; // Define timeout time in milliseconds (example: 2000ms = 2s) const long timeoutTime = 2000;

void setup() { Serial.begin(115200); // Initialize the output variables as outputs pinMode(PIXEL_PIN, OUTPUT); pixels.begin(); pixels.show();

// Connect to Wi-Fi network with SSID and password Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // Print local IP address and start web server Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); }

void loop(){ WiFiClient client = server.available(); // Listen for incoming clients

if (client) { // If a new client connects, Serial.println("New Client."); // print a message out in the serial port String currentLine = ""; // make a String to hold incoming data from the client currentTime = millis(); previousTime = currentTime; while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected currentTime = millis(); if (client.available()) { // if there's bytes to read from the client, char c = client.read(); // read a byte, then Serial.write(c); // print it out the serial monitor header += c; if (c == '\n') { // if the byte is a newline character // if the current line is blank, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println(); // turns the GPIOs on and off if (header.indexOf("GET /5/on") >= 0) { Serial.println("GPIO 5 on"); output5State = "on"; for(int i=0; i = 0) { Serial.println("GPIO 5 off"); output5State = "off"; for(int i=0; i

pixels.show(); // Display the HTML web page client.println(" "); client.println(" "); client.println(" "); // CSS to style the on/off buttons // Feel free to change the background-color and font-size attributes to fit your preferences client.println("

"); // Web Page Heading client.println("

ESP8266 Web Server

"); // Display current state, and ON/OFF buttons for GPIO 5 client.println("

GPIO 5 - State " + output5State + "

"); // If the output5State is off, it displays the ON button if (output5State=="off") { client.println("

ON

"); } else { client.println("

OFF

"); } client.println("

"); // The HTTP response ends with another blank line client.println(); // Break out of the while loop break; } else { // if you got a newline, then clear currentLine currentLine = ""; } } else if (c != '\r') { // if you got anything else but a carriage return character, currentLine += c; // add it to the end of the currentLine } } } // Clear the header variable header = ""; // Close the connection client.stop(); Serial.println("Client disconnected."); Serial.println(""); } }

eindcode2.ino
Download

Step 5: Upload Your Code to Your ESP8266

Now your code is ready, we have to upload it to the ESP8266 board. See picture, you should press the button with the arrow. Make sure your board is connected to your USB port. Sometimes an errors pops up, but If you google for this errors you can fix it.

Step 6: Test Your Web Server

1. Open the Serial Monitor at a baud rate of 115200. See picture above, on the left.

2. Find the IP adress in the Serial Monitor.

3. Copy the IP adress to your browser. If you did all the steps right the webserver should look like the picture on the right.

4. You can press the 'on' button to turn on your Neopixel LEDstrip. The button changes to 'off' when you have putted the Neopixels on. Your can turn your Neopixel off.

This is how you can control your Neopixel LEDstrip in Arduino with a webserver.

If you are interested and want to learn more about the ESP8266 you can check out these sources:

- The documentation of ESP8266 https://arduino-esp8266.readthedocs.io/en/latest/

- Another way to make this project https://electrosome.com/led-control-esp8266-web-s...

- More information about the ESP8266 on github https://github.com/esp8266/Arduino

- Another nice project with ESP8266 https://randomnerdtutorials.com/esp8266-weather-f...

Thankyou!