Movement recognition through web sensor.
Introduction
In this article I will explain how to set up a website that allows you to use mobile sensors to recognize if a person is moving or standing still. The technologies used will be the classic ones for web, html and javascript development. For the development of the back-end we will use Nodejs and we will use tools such as GitHub pages and ngrock to use https technology and cross origin communication.
Links to the code and youtube.
Code : GitHub
You Tube presentation: YouTube
Hands on:
Web sensor
The Accelerometer, LinearAccelerationSensor and GravitySensor APIs extends the Generic Sensor API [GENERIC-SENSOR] interface to provide information about acceleration applied to device’s X, Y and Z axis in local coordinate system defined by device. It is a simple API where you just insert the script into the web page and invoking the API functions.
For example:
let sensor = new Accelerometer();
sensor.start();
sensor.onreading = () => {
console.log("Acceleration along X-axis: " + sensor.x);
console.log("Acceleration along Y-axis: " + sensor.y);
console.log("Acceleration along Z-axis: " + sensor.z);
}
sensor.onerror = event => console.log(event.error.name, event.error.message);
You can see that the x attribute of the LinearAccelerationSensor interface returns the result of invoking get value from latest reading with this and "x" as arguments. It represents the linear acceleration along x-axis, it is the same for y and z.
Development environment
To use the API we have to use the HTTPS protocol, I recommend using github pages, a very useful github service that allowed me to call the API on a page that uses HTTPS.
Link to my page: Link
For the javascript i used jQuery that is s a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Back end
The back end was developed in node js using Express and in particular the CORS technology that allows communication between different technologies, in our case communication between browser and js server. Something like this:
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
For communication between front-end and back-end I used simple POST and GET requests. Here I show what happens with the data POST:
app.post('/readings', function (req, res) {
try {
console.log(req.body);
console.log("debug");
let data = req.body;
// var message = new Message(JSON.stringify(data));
if(parseFloat(data['acc_mod'])> 0.5){
var message = new Message(JSON.stringify(data));
client.sendEvent(message, printResultFor("send"));
console.log("Ti stai muovendo")
}else{
var message = new Message(JSON.stringify(data));
client.sendEvent(message, printResultFor("send"));
console.log("Sei fermo")
}
//client.sendEvent(message, printResultFor("send"));
res.send("POST request to the homepage");
//msgText= JSON.parse(req.body);
}
catch (e) {
console.error("Error : " + e);
res.status(500).send("500 - Internal Error");
}
});
We can see that in this fragment my API receives a POST and we classify the data in the back end, then send the result to the azure iot hub. This is the classification the data outside the web page.
We have the possibility to classify the data directly from the javscript code and therefore on the page. It is a sort of edge classification, the code is very simple and it is a simple check on the acceleration. The user will have the possibility to choose between edge and cloud classification.
Thanks for the attention!!