In this post we will have a look at how the client side of the web application is implemented
For the web client I used the Angular JS framework and the graphical components made by Telerik. This components are not free (I have a licence since I used those components at work, but they can be easily replaced with free and/or open source components)
The most interesting part is how the web socket is created and how data is processed to update the web page.
The web socket is created by passing the url of thehost we want to connect to (in this case I am using the default IP address of Arduino Yun
$scope.dataService = new WebSocket('ws://192.168.240.1:3000');
Then, we can add the handlers for the events we are interested in. For example, I am interested to handle the "data received event"
$scope.dataService.onmessage = function(event){
console.log('data ' + event.data);
$scope.updateData(JSON.parse(event.data));
};
Eventually, you could also get notification whenever the connection is open or when an error occurs
$scope.dataService.onopen = function(){
console.log('Hello');
};
$scope.dataService.onerror = function(){
console.log('Error');
};
The $scope.updateData(data) is a function that takes care of updating the widgets with the data received on the web socket. The JSON.parse(event.data) function creates a Javascript object from the string received. The object structure will look like this
{
temperature: 37,
pressure: {min: 0, max: 120},
bpm: 62,
pulse: [0,0,0,...,0,0];
}
This object is passed to the $scope.updateData function
$scope.updateData = function(data)
{
if (data.temperature)
$("#gauge_temp").data("kendoLinearGauge").value(data.temperature);
if (data.pressure)
{
$("#bpmin-value").val(data.pressure.min);
$("#bpmax-value").val(data.pressure.max);
$("#gauge_bp").data("kendoRadialGauge").value(data.pressure.max);
}
if (data.bpm)
{
$("#read_bpm").each(function() {
$(this).industrial(data.bpm);
});
}
if (data.pulse)
{
if ($scope.pulse.length + (data.pulse.length/10) > 50)
{
var howMany = ($scope.pulse.length + (data.pulse.length/10)) - 50;
$scope.pulse.splice(0, howMany);
}
console.log('Adding values..' + data.pulse.length);
for (var i=0; i<data.pulse.length; i+=10)
{
$scope.pulse.push({ value: data.pulse[i] });
}
}
};
The final result is shown in the following video
