interfaces and application programming

This week we have to write an application that interfaces with an input &/or output device.

Esole: web application

I decided to write an application for my final project using Javascript, a programming language of HTML and the Web for a reason: I thinked that It could be a good approach for creating user interfaces to serial devices to build an interactive web page. Using a web-based GUI makes the interface portable to different screens and devices, like a laptop or a smartphone.

So, in my project I have a device, Esole, communicating via serial protocol to a computer, using an FTDI interface to send data to and read data from the serial port: this could be commands or raw data coming from sensors to manipulate this data in a HTML webpage using Javascript. The communication goes by keeping an always-open communication channel from the webpage to the webserver, using the Web Sockets standard.

svg

I’m working with graphics so I prepared an image svg to the web interface. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor,like Texmate, but are more often created with drawing software: I used Adobe Ilustrator. I create the image using six layers: three for press1 and three for press2. I Choose three different color for three different sensor value (high-medium-low).

Raphael 2.1.4 : javascript vector library

Raphael JS is a lightweight JavaScript framework that allows to draw vector graphics in the browser.It takes advantage of the intersection between VML’s and SVG’s features to create vector graphics and animate them.

Using Websocket on Pyton Web-based Serial console

The insole will read and write to the serial port in an infinite loop.T he Webserver will have a separate “worker” thread deailing with the serial port, using an incoming and outgoing queue to handle concurrency. The WebSocket specification—developed as part of the HTML5 initiative—introduced the WebSocket JavaScript interface, which defines a full-duplex single socket connection over which messages can be sent between client and server. The WebSocket standard simplifies much of the complexity around bi-directional web communication and connection management.

I used this tutorial : Pyton web-based serial console using websockets So I install several python packages, with this command:

sudo pip install pyserial tornado multiprocessing

The pyserial module will allow us to access the serial port in the python environment. The tornado module contains all code needed to serve webpages and create websockets.

After I create a page in html where I will host my user interface and send and receive data using the websocket. The Javascript code is contained in the main.js javascript below. I use the browser WebSocket object for interacting with the /ws endpoint.

$(document).ready(function(){

   var socket = new WebSocket("ws://localhost:8080/ws");
 
socket.onopen = function(){  
  console.log("connected"); 
}; 

socket.onmessage = function (message) {
  //console.log("receiving: ");
  // console.log(message);
  if (message.data == 'connected'){
    return;
  }
  var data = JSON.parse(message.data);

  if (data.sensor2 < 550) {
    window.showInf(0);
  } else if (data.sensor2 <900){
    window.showInf(1);
  } else {
    window.showInf(2);
  }

  if (data.sensor1 < 500) {
    window.showSup(0);
  } else if (data.sensor1 < 900) {
    window.showSup(1);
  } else {
    window.showSup(2);
  }
};

socket.onclose = function(){
  console.log("disconnected"); 
};

var sendMessage = function(message) {
  console.log("sending:" + message.data);
  socket.send(message.data);
};

});

The tornado web server allows us to serve webpages and also communicate via websockets. In the code I keep track of connected clients using the “clients” list, then Istart listening on the http port (default is 8080) for standard http requests on the “/” path, and for websocket requests on the ‘/ws’ path.

There’s the command to run the application

sudo pyton server. py which 
vi serial worker.py 

Sources

- svg
- esole
- index
- main
- raphael
- serial
- serial
- server