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.
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.
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.
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...
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);
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.
int xInt = xVal.toInt();
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.
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.
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:
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
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.
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
Step 4: Conclusion
That's it folks!
Thank you for taking the time to read this instructable.