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

http://www.python.org/

On Python I have installed the following packages:

• PIP  is a tool for installing and managing Python packages http://pypi.python.org/pypi/pip
• PySerial 2.6 This module encapsulates the access for the serial port so it facilitates the connection between PC and Arduino http://pyserial.sourceforge.net
• Autobahn 0.4.10 Twisted-based WebSockets client and server framework. http://www.tavendo.de/autobahn/
• Twisted An asynchronous networking framework http://pypi.python.org/pypi/Twisted/12.0.0
• ##Update: if you run on Windows 7 you will need to install pywin32 manually: http://sourceforge.net/projects/pywin32/

If you have installed all of the above, download the files of the project from here:
Serial2WS.rar
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 
    Serial.print(id);
    Serial.print("\t");
    printFloat(celsius , 0);    
    Serial.println();
    //finish sending JSON

later this data is read by the WebSocket server and dispatch to the browser.

def lineReceived(self, line):
      try:
         ## 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