loading

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

    Step 4: Conclusion

    That's it folks!

    Thank you for taking the time to read this instructable.

    <p>Hello Rahul,</p><p>Great project overall, but is there anyway to host the HTML file on the ESP instead of opening it up on the computer?</p>
    <p>Thanks.. yes you can set up a SPIFFS Web server. Write the html to the EEPROM of the ESP!</p>
    ​Hi Rahul,<br>Thanks for the great Instructions.<br>I flashed the &quot;espasAP.ino&quot; and everything works fine for a couple of mins and then the software freezes. I am not able to change any values after couple of mins. Even the serial output freezes. Am i missing something?
    <p>Hi Rahul,</p><p>I made a few changes to your <strong>espwithNetwork.ino</strong> script and I added a<em> <strong>&quot;breathing&quot; led routine</strong></em> in the void loop()</p><p>Your script still works good but now it takes<strong> more than a minute</strong> for the first action on the remote browser to be effective on the ESP server !!!</p><p>Then, after this initial ***LONG*** waiting, everything is back to normal and rapid enough for the script to being used as a concrete application.</p><p>What could cause such a delay during the init/setup (see my simplified code in the link below) ?</p><p>Thanks.</p><p>ym58</p><p><em>https://dl.dropboxusercontent.com/u/29826503/Electronique/ARDUINO-ESP8266/Arduino/dont_delete/dont_delete.ino</em></p>
    <p>It is very strange to me. The websockets works, when I have run my wifi router, but when I switch off it, the websockets does'nt works anymore, until router is online again.</p>
    <p>I have the same problem, you could solve?</p>
    perhaps you used wrong sketch? esp should be set as AP
    <p>I have one question. I want build system to control relays with arduino and esp8266 over access point (as you do in espasAP.ino example). But i must use arduino and esp8266 because i already have board to control relays and now i don't know how to write program for arduino and esp8266. I know how to write program for Web Server but that is too slow. Websocket i much faster. I will connect esp8266 to arduino over SoftwareSerial. Can you help me with that? Or maybe you try do that. Sorry for my bad English. Thanks in advance.</p>
    <p>i flashed the esp with both of them codes and than i just open the browser an the ip from the serial but firefox and safari coudnot open the pages</p>
    <p>Hi, thanks for your great instructions! It's just what I was looking for.</p><p>Nevertheless: I haven't been able to compile it yet, (using Arduino 1.6.5).</p><blockquote><em>Arduino: 1.6.5 (Windows 8.1), Board:&quot;NodeMCU 0.9 (ESP-12 Module), 80 MHz, Serial, 115200, 4M (3M SPIFFS)&quot;</em></blockquote><p>All the time I get an error: </p><blockquote>C:\Users\Ton\Documents\Arduino\libraries\arduinoWebSockets\src\WebSockets.cpp:28:35: fatal error: core_esp8266_features.h: No such file or directory<br></blockquote><blockquote> #include &lt;core_esp8266_features.h&gt;</blockquote><blockquote> ^</blockquote><blockquote>compilation terminated.</blockquote><p>I don't know what I'm doing wrong. Can you give me a clue please?</p><p>Thanks!</p><p>Ton</p>
    <p>Did you solve this problem? I am getting this similar dependency problem. I tried including all the libraries </p><p>you can get the core esp8266 features library from here</p><p><a href="https://github.com/esp8266/Arduino" rel="nofollow">https://github.com/esp8266/Arduino</a></p><p>add it in your libraries folder, in the websockets one.</p><p>Please do reply!<br>I tried, but with no luck!</p>
    <p>Sorry for my late reply,</p><p>is was solved by adding the eps8266 board in an other way, by copying from github in stead of in the ARduino boards manager.</p><p>It is explained here: <a href="http://www.wemos.cc/wiki/doku.php?id=en:arduino_get_started" rel="nofollow">http://www.wemos.cc/wiki/doku.php?id=en:arduino_ge...</a> </p><p>and you should take the recommended way of adding the board, (including expanding the tools directory with python 2.7)</p><p>(of course you should first delete the esp8266 board)</p><p>Good luck!</p><p>Ton</p>
    <p>Thanks a lot Tonv. That worked awesome!!</p>
    Hello. Maybe try loading an example sketch from your esp8266 library first then modify the code to implement the websocket. should work fine i guess. let me know
    <p>Hello Rahul, Thanks a lot for the instructable!</p><p>I tried running the WebSocketServer_LEDcontrol program, throws the same error. Tried adding the core esp8266 files but with no luck. Now i am getting error from the Fs.h header file.</p>
    sorry for such a late reply. try loading an example sketch frim your esp library then modify the code
    <p>Hi,</p><p>Great project first of all! I made a bigger project based on the same idea and used some of your code. Check out the post (Gave you the credit of course)<br><a href="http://www.whatimade.today/esp8266-on-websockets-mdns-ota-and-leds/" rel="nofollow">http://www.whatimade.today/esp8266-on-websockets-m...</a><br><br>By the way, have you noticed your sliders go only up to 255 when the ESP8266 pwm goes to 1023?<br>Also - I disabled most of the responses from the ESP8266 since if you would slide the slider too fast it the TX buffer on the ESP8266 become full and the websocket disconnects. Did you encounter this as well? <br><br>Thanks again for the help! you just publish your project while I was working on my project and was very helpful!</p>
    <p>Hello . Thank you very much Yeah im aware of those probs but at that time i was just trying to make a proof of concept. great catch on disabling the responses from esp. the chip can't handle things sometimes. next time i'll try to implement your code . cheers!</p>
    <p>Your index.html file seems to not be available anymore...<br><br>Where can we find it please ?<br><br>Thank You</p>
    sorry about that.. try this out?<br>https://github.com/rahul2704/rgbSliderfiles/blob/master/indexRGB.html
    <p>Sorry I was not patiently enoght. I didn't see the second page ;) With the HTML-page it's working fine :)</p>
    haha. glad you made it!
    <p>Oh my fault, the socket is listen on port 81. But now I only get this content back &quot;This is a Websocket server only!&quot;</p><p>Do you know what's wrong?</p>
    <p>Hey, </p><p>nice instruction! But I don't get any content from the ESP. I can connect but no website is shown. I used this websocket-library (https://github.com/Links2004/arduinoWebSockets) because I couldn't find any other. Maybe it's the wrong one?</p>

    About This Instructable

    66,379views

    80favorites

    License:

    More by Rahul27:Blynk-ESP8266 教程 ESP8266 Firmata-J5 NodeBot ESP8266+Websocket server RGB LED controller 
    Add instructable to: