Aventuras y Desventuras de un hobbyist

Aventuras y Desventuras de un hobbyist....

Arduino + WebSockets II

Please read the first part of this serie: http://yopero-tech.blogspot.com/2012/02/arduino-websockets.html

This project describes how to use WebSockets to display data  taken from Arduino and broadcast it to any Browser with WebSocket support. Test your browser here: http://websocket.org/echo.html

First of all we need to decide what data to display and  what to control in Arduino from the  web page .

In this example I am going to control 3 remote controlled relays that you can buy at your hardware store and I want to display the values from 2 temperature sensors.(DS18S20)

This project is composed out of 3 main parts of software apart from the hardware(Arduino Board):

  1. WebSocket  Server:
    1. Python
    2. Autobahn
      1. Twisted
        1. PySerial
  2. MCU (Micro Controller Unit)
    1. Arduino Board(Vinciduino in my case).
    2. Arduino IDE or AVR studio.
  3. Client:
    1. Any web server, I use xampp or python to test as localhost.

The WebSocket server I setup is run under Windows XP:

First thing is to install Python in my case I have used v 2.7

On Python I have installed the following packages:

If you have installed all of the above, download the files of the project from here:
Now that we have the WS server I will jump to the Arduino side of the project, as said above I will control 3 lights interactivity and I will get real time data from 2 temperature sensors.
To accomplish that I have hacked the remote control and connected it to the Arduino
You can see my setup in the video at the end of the post.

The Arduino sketch for my setup at the end of this entry( too long to put  in the middle of the entry)

This sketch sends the values of the 2 temperature sensors with id = 1 or 2 in format JSON
Id  \t value
I would say that this is the most important part of the project, send JSON formated data from arduino to python and then python to digest it and broadcast via WS. 
   celsius = (float)raw / 16.0;
   //Sending JSON 
    printFloat(celsius , 0);    
    //finish sending JSON
later this data is read by the WebSocket server and dispatch to the browser.
def lineReceived(self, line):
         ## parse data received from MCU
         data = [int(x) for x in line.split()]

         ## construct PubSub event from raw data
         evt = {'id': data[0], 'value': data[1]}

         ## publish event to all clients subscribed to topic
         self.wsMcuFactory._dispatchEvent("http://example.com/mcu#analog-value", evt)

         log.msg("Analog value: %s" % str(evt));
      except ValueError:
         log.err('Unable to parse value %s' % line)

In order to display the values given by Arduino and received by the Websocket server I am  using Smoothie Charts; is a really small charting library designed for live streaming data.( http://smoothiecharts.org/)

The final results as you see in the video and screenshots.

In the future I will try to load the WebSocket(C++)client directly to a Arduino with an ethernet shield to avoid the use of a PC, but I am not sure how it will impact the infrastructure side of my LAN(opening ports).

Click "Mas informacíon" to preview the Arduino code

Arduino + WebSockets I


Lately I have been exploring ways of plotting data from a MCU to a web browser, at first I was using arduino and firmata which basically allows you to get nice graphics but implementing it to be connected to a webserver was kind of difficult.
Then we have the option of using Ethernet shields but it lacks of enough memory to write good looking web pages, this can be fixed by using short php commands and the process the rest on a webserver however this solutions only applies to projects that do not need speed and real time connections between server and client/web browser.
An example of that is controlling lights, in this case we only need that the light switches on we do not really care about speed, but imagine if you want to control via web an AUV(Autonomous Underwater vehicle) the scenario changes dramatically because what is needed is accuracy and real time communication between web browser and server which is connected to our MCU via RS232,XBEE,Wireless,Ethernet, etc.(I know this scenario is not very common but hey… this paper and websockets technology is experimental so the scenarios too).
I have also explored Python and Pyserial and  I must say that python is so powerful as you can get lots of things with few lines (although you need first to learn it J)
After exploring Python and some packages such as wxPython, PyQt4, PyGtk you can build nice apps to be run on your computer but it was not good enough for me I really like the look of a webpage so I kept searching until I read something about a real fast technology tested on financial applications, that’s the way I heard about WebSockets and then I thought I may use it with my Arduino.
After looking on internet I found that some people has already used web sockets to communicate with a MCU; people from http://mbed.org/cookbook/IOT uses Tornado a python server but unfortunately it does not run on windows due to a Unix dependency.
As I had my computer already setup with python I went looking for a stand alone websocket package, it took me awhile to find a nice piece of code in http://www.tavendo.de/autobahn/ Autobahn provides client and server implementations of WebSockets for Python and Android.
They have the repocitory in github: https://github.com/oberstet/Autobahn and a google group @ http://groups.google.com/group/autobahnws
After contacting with Tobias O. the owner of this repository I presented him what I want to achieve and he helped me a lot.

Now some theory about WebSockets:

What are WebSockets?

“”WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. At the moment, it’s still being standardized by the W3C; however, the latest versions of Chrome and Safari have support for WebSockets.””

What do WebSockets Replace?

Although the real purpose of WebSockets. was not primarily designed to replace any of the things that are already in place and working well. For example, it was not designed to be a low-overhead version of AJAX. The purpose is to provide a bidirectional, low latency, full duplex, communication channel between the browser and server. It's real purpose is to enable a new domain of web applications or to improve current ones that are abusing HTTP to achieve bidirectional communication.
But…..Websockets can replace long-polling. This is an interesting concept; the client sends a request to the server – now, rather than the server responding with data it may not have, it essentially keeps the connection open until the fresh, up-to-date data is ready to be sent – the client next receives this, and sends another request. This has its benefits: decreased latency being one of them, as a connection which has already been opened does not require a new connection to be established. However, long-polling isn’t really a piece of fancy technology: it’s also possible for a request to time-out, and thus a new connection will be needed anyway.
Many Ajax applications make use of the above – this can often be attributed to poor resource utilization.
Wouldn’t it be great if the server could wake up one morning and send its data to clients who are willing to listen without some sort of pre established connection? Welcome to the world of PUSH technology!

Next post I will describe the technical part of this project.