David Montenegro

FAB ACADEMY 2015

Final Project | Assignments | Download | About | Contact

Interfaces and applications

On wednesday 05.06.2015 we’ve got the fourteenth online lesson with Neil Gershenfeld.
The next lessons can be found on the Fab Academy account on Vimeo.

For this week the assignment was

** write an application that interfaces with an input &/or output device**

For this assignment I designed a web application to configure a device that stores 3 values in memory.
To do so I started from a tutorial written by Fiore where he explain how to set up a []Python web-based serial console using webSockets](http://fabacademy.org/archives/2015/doc/WebSocketConsole.html).
The main advantage of use a web based is that it can be used from any devices has a web browser installed, so you can configure the target device from laptop, smartphone, tablet and so on.

How it works

It’s a linear system having on one side the target device, at the opposite side the source device that provides data. To manipulate data it uses a HTML webpage using Javascript.

scheme

To work properly it needs some Python packages: PySerial, Multiprocessing and Tornado Webserver; using linux i installed writing

sudo pip install pyserial tornado multiprocessing
  • A simple HTML5 webpage will host our user interface, but also send and receive data using the websocket
  • The Javascript code is contained in the main.js javascript below. The browser WebSocket object interact with the /ws endpoint
  • The Tornado web server allows to serve webpages and also to communicate via websockets

The key for having i/o on the serial port without blocking the webserver is creating two separate threads running in parallel and communicating via shared queues.

What I’ve modified

I’ve taken just the output part of the webpage to provide three values to three constant, these three values are bounded by a mathematical equation
> A + B = 86400 - C
where 8640 is the amount of seconds per day.
This bound is defined in the javascript file with the following lines 

var duty_val = 8;
var leisure_val = 8;
var needs_val = 8;

//duty_val + leisure_val == 24 - needs_val;

$("#duty_val").change(function(){
	var val = $('#duty_val').val();
	var diff = val - duty_val;
	duty_val = val;
	
	leisure_val = leisure_val - (diff/2);
	$("#leisure_val").val(leisure_val);
	
	needs_val = needs_val - (diff/2);
	$("#needs_val").val(needs_val);
	
});

$("#leisure_val").change(function(){
	var val = $('#leisure_val').val();
	var diff = val - leisure_val;
	leisure_val = val;
	
	duty_val = duty_val - (diff/2);
	$("#duty_val").val(duty_val);
		
	needs_val = needs_val - (diff/2);
	$("#needs_val").val(needs_val);
	
});

$("#needs_val").change(function(){
	var val = $('#needs_val').val();
	var diff = val - needs_val;
	needs_val = val;
	
	duty_val = duty_val - (diff/2);
	$("#duty_val").val(duty_val);
	
	leisure_val = leisure_val - (diff/2);
	$("#leisure_val").val(leisure_val);
});

In the HTML file I removed the input field and added tree number input. Because of the javascript they starts always with a 8 (hours) by default. I added some line of text and a background PNG too.

Index.html <!DOCTYPE HTML> <html> <head> 

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="static/main.js"></script>
	
</head>
<body>
<h1>Set your time</h1>
<h3>and remember that you have just 24hrs!</h3>
<br>

<p>DUTY</p>
<form id="duty">
	<input type="number" id="duty_val" value=8>

	
	//SLIDER
	
<script>
	
//function myFunction() {
//  var x = document.createElement("INPUT");
//  x.setAttribute("type", "range");
//  document.body.appendChild(x);
//}
</script>
</form>

<p>LEISURE</p>
<form id="leisure">
	<input type="number" id="leisure_val" value=8>
</form>

<p>NEEDS</p>
<form id="needs">
	<input type="number" id="needs_val" value=8>
</form>
<br>
<button id="cmd_send">Send</button>

</body>
</html>

main.js
<!DOCTYPE HTML> <html> <head> 

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="static/main.js"></script>
	
</head>
<body>
<h1>Set your time</h1>
<h3>and remember that you have just 24hrs!</h3>
<br>

<p>DUTY</p>
<form id="duty">
	<input type="number" id="duty_val" value=8>

	
	//SLIDER
	
<script>
	
//function myFunction() {
//  var x = document.createElement("INPUT");
//  x.setAttribute("type", "range");
//  document.body.appendChild(x);
//}
</script>
</form>

<p>LEISURE</p>
<form id="leisure">
	<input type="number" id="leisure_val" value=8>
</form>

<p>NEEDS</p>
<form id="needs">
	<input type="number" id="needs_val" value=8>
</form>
<br>
<button id="cmd_send">Send</button>

</body>
</html>

Download Lifetime application

Run

First of all the device has to be connected via serial port (first timeI wonder why the server doesn’t run) than run the local server with Python.

python server.py

now open the browser and go to localhost:8080 (or whatever port you want to use) and set the values you want to send to the device and click the Send button.