ESP8266+Websocket Server RGB LED Controller

Hello World!

In this instructable I'm going to illustrate the use of web sockets with the ESP8266 micro controller. With this project you can use a web browser to run a web socket client to control RGB LED connected to output pins on the ESP8266 mcu. The RGB can be controlled by sliders or using a smartphone's accelerometer.The response is quite fast with minimum lag however results may vary.

This project was inspired by a similar project using Node.JS and arduino with raspberry pi. I am not using Node.JS. See the project by martin here.

I am no expert and this project is also an opportunity for me to learn. I am learning as I do. I prefer this since by making projects like this that you can see the use of stuff you learn as well as their limitations. Also, when you encounter obstacles, you are motivated to find a solution. This is a learning process, so feel free to point out any mistakes or any adjustments. I would be grateful. Through this project I learnt about web sockets, JSON, node.js, html5/javascript etc.

Why the ESP8266?

This is a powerful wifi-sod which can act as an access point, can run a simple web server and also act as micro controller for hardware interfacing. There are several flavours out there but I'm using the esp-12 development board. Also, I am using the Arduino IDE to program the ESP, which erases the AT firmware or Nodemcu firmware that might have already been installed on the mcu.

Why Websockets?

Recently I made a project where I used the ESP as a wireless remote for shutter release. This was simple using an HTTP server. However, I also wanted to send GPS values from my smartphone to the ESP. Using http was a bit tricky. On the contrary, web sockets provide a continuous open communication with the server and data communication is bidirectional.

I read a very interesting documentation on web sockets and node.js here. I highly recommend to read it.

How it works

If you read the above documentation, you can probably guess that this simple project essentially involves:

1. The micro controller-- ESP8266 to interface with hardware(RGB LED here)

2. The socket server- to expose the ESP to network-- I am running the server on the ESP itself

This is based on work by Markus Sattler [https://github.com/Links2004].

3. The client-to talk to server. This is a simple HTML page which you can run directly on your computer connected or host as a webapp.

DISCLAIMER

During the making of this project I used materials from other people's work. I tried including links and credit wherever due. But, to err is human! If I somehow failed to mention any awesome maker/coder/whoever out there, give me shout. I will make it right :)

Step 1: Setup: ESP8266

There are a lot of tutorials out there on how to program the esp with the arduino IDE.

I already wrote about this, so I'm not going to dwell on this. Please read the following before continuing: https://www.instructables.com/id/ESP8266-Arduino-I...

https://www.instructables.com/id/ESP8266-ESP-12Stan...

After setting up your esp8266, we can proceed to writing the sketch to it.

Download the sketch provided in the attachment, open it in Arduino IDE and write it to ESP

The file "espwithNetwork.ino" sets the ESp to connect to your home network.

You need to change the SSID and PASSWORD accordingly. Also change the following

const int bluePin = 13;
const int redPin = 15;
const int greenPin = 12

according to pins you connected RGB to .

If you want to set up ESP8266 as an access point and the control the pin locally, download the second file"espasAP.ino" instead. Here also you need to setup your ap SSID and desired Password. then you can connect computer running web server client to the ESP access point using the credentials.

The web socket event explained

the code is based on Markus Sattler's library. I modified the code(with help from Markus himself, thanks!!).

String text = String((char *) &payload[0]);

if(text=="LED"){ digitalWrite(13,HIGH);

delay(500); digitalWrite(13,LOW);

Serial.println("led just lit");

webSocket.sendTXT(num, "led just lit", lenght); }

Here, the server "listens" if web server client "says" "LED" and blinks led 13 if this is the case. It also echoes "led just lit" to client.

if(text.startsWith("x")){

String xVal=(text.substring(text.indexOf("x")+1,text.length()));

int xInt = xVal.toInt();

analogWrite(redPin,xInt);

Serial.println(xVal);

webSocket.sendTXT(num, "red changed", lenght); }

Here we listen if client sends "x" values which are used to set up value of red LED of RGB. This value is derived from a slider with min value 0 or max 255 on web server client. We are going to explain this in the next step.Bare with me. So i am using PWN to right analog value to red led pin. The next piece of code is similar to 'x' part but takes care of blue pin value and green pin value by implementing z and y values sent from client. You can modify the code to do whatever you like. The possibilities are endless. E.g you can connect a relay and light home lights on/off etc. also if you want to send numerous values simultaneously, you can send it as JSON. I recommend this library to decode the json string sent from client.

Step 2: The Webserver Client

The web server client is the part that talks to the web server. It is also the interface with which we are going to interact. You can run it on your computer's browser, or upload it as a web app.

Download the index.html file from here[edit here]

I wrote this simple HTML file in the Intel XDK IDE. It is similar to phone gap, where you can design app using HTML5/Javascript to make hybrid apps to run on most platforms of smartphone. However here I didn't build a standalone app. More info on XDK here. Also there is an IOT flavour, for those of you wanting to use Node.JS etc.

You can use your preferred text editor to edit the html script. I prefer xdi because I am a beginner and it gives hints when writing codes.

NOTE

Whether you run esp connected to your network or as an access point, the web server client must be run on computer/smartphone connected to same network as ESP.

The code explained

First, we need to insert the ip address of web server into the input text placeholder. The ip can be obtained from serial monitor when esp runs code from sketch or you can find it from your router. If you run esp8266 as access point, the ip is 192.168.4.1. When i connect to my home network, ip of esp is 192.168.1.100. So i should input:

ws://192.168.1.100:81/

or if I run access point, ws://192.168.4.1:81/

the 81 is the port to which the server listens to.

There are two buttons: Blink LED and Reset LED. Blink led sends "LED" when pressed and reset led sends RESET". These strings are interpreted by code we wrote in sketch and blinks led 13 or resets all LED pin values accordingly.

There are 3 sliders, each having minimum value 0 and max 255. Each slider R, G, B respectively sends values x, y , z which is received by esp web server and then turns red, green or blue LED value accordingly.

If you are using the client from a smartphone, you can also try to change value of pin by using phone's accelerometer. however, this might not work on all smartphone browsers.

I included this feature to illustrate the use of sensors already in smartphones.

In my previous project, I already described the use of GPS to send value from smartphone to esp. Here

Sensors

You can write your own code to use sensors from smartphone.

Here i used the DeviceOrientationEvent. You can use navigator.geolocation for GPS values.

For more info read here https://developer.mozilla.org/en-US/docs/Web/API/D...

The buttons next to each axis name when clicked starts listening to change in device orientation.

The radio button next to it sends value to esp8266.

Webapp

You can also upload the index html as a web app and access it from a smartphone connected to same network as esp8266.

Here is an example. http://rahul2704.github.io

For instructions on how to set this up, head up here, its very easy

Step 3: Results

See the video.

I am sorry for poor quality

Also, I live in mainland china so I cannot provide video on youtube. Sorry about that. For those who have difficulty opening tumblr video, try http://pan.baidu.com/s/10Vi9o

Update: I was able to upload the video on vimeo

https://vimeo.com/141310489

http://rahul2704.tumblr.com/post/130325885514

http://rahul2704.tumblr.com/post/130325460758