Movement recognition through web sensor.

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.

Non è stato fornito nessun testo alternativo per questa immagine


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!!




To view or add a comment, sign in

More articles by Giovanni Buono

Others also viewed

Explore content categories