Accediendo a los datos de los sensores del terminal con Protocoder

En esta nueva entrada del curso de programación con Protocoder veremos cómo obtener datos de los sensores de nuestro terminal móvil o tablet.

Sensores en el terminal

Los terminales móviles suelen tener ciertos sensores como, por ejemplo, acelerómetro, sensor de luz y de proximidad.

El acelerómetro mide la aceleración del terminal, normalmente la producida por la gravedad. La tecnología en la que se basa son pequeños condensadores que varían su capacidad dependiendo de la aceleración a la que se sometan. Si quieres aprender más a fondo cómo funciona un acelerómetro puedes visitar este link (Inglés).

En el caso del sensor de luz, se basan en un fotodiodo que genera una corriente según la cantidad de luz que incida sobre el sensor. A partir de la corriente generada, se “traduce” a una secuencia de bits que el terminal móvil es capaz de comprender. Si quieres aprender más sobre cómo funciona un fotodiodo, puedes visitar este enlace.

El sensor de proximidad se basa en un emisor y receptor infrarrojo. El emisor manda un pulso de luz infrarroja y si un objeto se encuentra suficientemente cerca para reflejar dicho pulso, el receptor “leerá” el pulso. Si no hay ningún objeto cerca que pueda reflejar la luz infrarroja, se “perderá”. De esta manera podemos determinar si hay un objeto cerca del sensor o no.

Si quieres conocer más sobre los usos de los sensores dentro de un terminal móvil, puedes visitar este enlace.

Utilizando un ejemplo como base

En este caso, vamos a utilizar el ejemplo sensors de Protocoder para ver cómo obtener datos de los sensores. A partir de este ejemplo, modificaremos el código para ajustarlo a nuestras necesidades.

Para acceder a los sensores, en primer lugar, se crean textos en los que se escriben los datos de los sensores. Para crear estos cuadros de texto se utiliza el siguiente código:

var accelerometer   = ui.addText(20, 20, 600, 100);
var orientation     = ui.addText(20, 120, 600, 100);
var light           = ui.addText(20, 220, 600, 100);
var gyroscope       = ui.addText(20, 320, 600, 100);
var magnetic        = ui.addText(20, 420, 600, 100);
var barometer       = ui.addText(20, 520, 600, 100);
var proximity       = ui.addText(20, 620, 600, 100);

var accelerometer = ui.addText(20, 20, 600, 100);

var orientation = ui.addText(20, 120, 600, 100);

var light = ui.addText(20, 220, 600, 100);

var gyroscope = ui.addText(20, 320, 600, 100);

var magnetic = ui.addText(20, 420, 600, 100);

var barometer = ui.addText(20, 520, 600, 100);

var proximity = ui.addText(20, 620, 600, 100);

A continuación, se leen los datos de los sensores y se escribe el valor de la lectura en la variable anterior correspondiente:

sensors.accelerometer.onChange(function(x, y, z) {
    accelerometer.setText("acc: " + x + ", " + y + ", " + z);
});

sensors.orientation.onChange(function(pitch, roll, yaw) {
   orientation.setText("orientation: " + pitch + ", " + roll + ", " + yaw);
});

sensors.lightIntensity.onChange(function(intensity) {
   light.setText("light: " + intensity);
});

sensors.gyroscope.onChange(function(x, y, z) {
   gyroscope.setText("gyro: " + x + ", " + y + ", " + z);
});

sensors.magnetic.onChange(function(x, y, z) {
   magnetic.setText("magnetic: " + x);
});

sensors.pressure.onChange(function(x) {
   barometer.setText("barometer " + x);
});

sensors.proximity.onChange(function(intensity) {
   proximity.setText("proximity: " + intensity);
});

sensors.stepDetector.onChange(function() {
    console.log("step detected");
});

sensors.accelerometer.onChange(function(x, y, z) {

accelerometer.setText("acc: " + x + ", " + y + ", " + z);

});

sensors.orientation.onChange(function(pitch, roll, yaw) {

orientation.setText("orientation: " + pitch + ", " + roll + ", " + yaw);

});

sensors.lightIntensity.onChange(function(intensity) {

light.setText("light: " + intensity);

});

sensors.gyroscope.onChange(function(x, y, z) {

gyroscope.setText("gyro: " + x + ", " + y + ", " + z);

});

sensors.magnetic.onChange(function(x, y, z) {

magnetic.setText("magnetic: " + x);

});

sensors.pressure.onChange(function(x) {

barometer.setText("barometer " + x);

});

sensors.proximity.onChange(function(intensity) {

proximity.setText("proximity: " + intensity);

});

sensors.stepDetector.onChange(function() {

console.log("step detected");

});

Una vez que la aplicación se cierre, Protocoder parará automáticamente todos los sensores, pero éstos se podrían parar con la función:

function stopAll() {
    sensors.accelerometer.stop();
    sensors.orientation.stop();
    sensors.lightIntensity.stop();
    sensors.gyroscope.stop();
    sensors.magnetic.stop();
    sensors.pressure.stop();
    sensors.proximity.stop();
    sensors.stepDetector.stop();
}

function stopAll() {

sensors.accelerometer.stop();

sensors.orientation.stop();

sensors.lightIntensity.stop();

sensors.gyroscope.stop();

sensors.magnetic.stop();

sensors.pressure.stop();

sensors.proximity.stop();

sensors.stepDetector.stop();

}

Modificando el ejemplo

Comenzamos incluyendo la cabecera de los programas:

ui.toolbar.title("Sensors");
ui.toolbar.bgColor(55, 155, 155, 255);
ui.toolbar.show(true);
//ui.screenMode("fullscreen");
ui.screenOrientation("portrait");
ui.allowScroll(false);

var margin = 10;
var w = ui.screenWidth - 2*margin;
var h = 150;
var y = h + margin;

ui.toolbar.title("Sensors");

ui.toolbar.bgColor(55, 155, 155, 255);

ui.toolbar.show(true);

//ui.screenMode("fullscreen");

ui.screenOrientation("portrait");

ui.allowScroll(false);

var margin = 10;

var w = ui.screenWidth - 2*margin;

var h = 150;

var y = h + margin;

A continuación, modificamos los parámetros de las variables de texto para que incluyan las medidas de las variables. En este caso:

var accelerometer   = ui.addText(margin, margin, w, h);
var orientation     = ui.addText(margin, 0.5*h + margin, w, h);
var light           = ui.addText(margin, 1*h + margin, w, h);
var gyroscope       = ui.addText(margin, 1.5*h + margin, w, h);
var magnetic        = ui.addText(margin, 2*h + margin, w, h);
var barometer       = ui.addText(margin, 2.5*h + margin, w, h);
var proximity       = ui.addText(margin, 3*h + margin, w, h);

var accelerometer = ui.addText(margin, margin, w, h);

var orientation = ui.addText(margin, 0.5*h + margin, w, h);

var light = ui.addText(margin, 1*h + margin, w, h);

var gyroscope = ui.addText(margin, 1.5*h + margin, w, h);

var magnetic = ui.addText(margin, 2*h + margin, w, h);

var barometer = ui.addText(margin, 2.5*h + margin, w, h);

var proximity = ui.addText(margin, 3*h + margin, w, h);

Si habéis probado el ejemplo de los sensores explicado en el punto anterior, muchos de los datos que aparecen tienen demasiada precisión y puede ser complejo leerlos, por lo que utilizaremos una función para bajar la precisión de los datos:

function toFixed(value, precision) {
    var power = Math.pow(10, precision || 0);
    return String(Math.round(value * power) / power);
}

function toFixed(value, precision) {

var power = Math.pow(10, precision || 0);

return String(Math.round(value * power) / power);

}

Esta función toma como parámetros el valor a ajustar y la precisión a la que queremos que se ajuste.

A continuación, utilizamos la función toFixed para hacer que los valores se impriman con dos decimales. Por ejemplo, el código relativo al acelerómetro, una vez aplicada la función es:

sensors.accelerometer.onChange(function(x, y, z) {
    
    accelerometer.setText("acc: "+ toFixed(x,2)+ ", " +toFixed(y,2)+ ", " + toFixed(z,2));
    
});

sensors.accelerometer.onChange(function(x, y, z) {

accelerometer.setText("acc: "+ toFixed(x,2)+ ", " +toFixed(y,2)+ ", " + toFixed(z,2));

});

De la misma manera, aplicamos la función toFixed al resto de valores, menos al sensor de luz y al sensor de proximidad.

A continuación, creamos un botón que se encargará de “limpiar” la pantalla, cambiando la transparencia de los textos para evitar que se vean y mostrando un canvas en el que dibujaremos círculos de distintos colores y tamaño, que cambiarán de posición dependiendo de la lectura del acelerómetro. También tenemos que crear una variable con la que podamos conocer cuál es el estado del botón, por ejemplo se mostrarán los textos si la variable vale false, y el canvas si la variable es igual a true.

var state = false;
var btnPlay = ui.addButton("Play",margin,ui.screenHeight - 3*h, w, h).onClick(function(){
        
});

var state = false;

var btnPlay = ui.addButton("Play",margin,ui.screenHeight - 3*h, w, h).onClick(function(){

});

A continuación, tenemos que programar el comportamiento del botón una vez que se ha pulsado, para lo que utilizaremos la variable state. Comprobaremos cuál es su valor, se ejecutarán las acciones correspondientes y, por último, cambiaremos el valor de la variable.

var state = false;

var btnPlay = ui.addButton("Play",margin,ui.screenHeight - 3*h, w, h).onClick(function(){
    
    if (!state){
        
        accelerometer.setAlpha(0);
        orientation.setAlpha(0);
        light.setAlpha(0);
        gyroscope.setAlpha(0);
        magnetic.setAlpha(0);
        barometer.setAlpha(0);
        proximity.setAlpha(0);
        
        canvas.setAlpha(255);
        
        state = !state;
        btnPlay.setText("Pause");
        
    }else{
        
        accelerometer.setAlpha(255);
        orientation.setAlpha(255);
        light.setAlpha(255);
        gyroscope.setAlpha(255);
        magnetic.setAlpha(255);
        barometer.setAlpha(255);
        proximity.setAlpha(255);
        
        canvas.setAlpha(0); 
        canvas.clear();
        canvas.background(0,0,0);

        state = !state;
        btnPlay.setText("Play");
    }
    
});

var state = false;

var btnPlay = ui.addButton("Play",margin,ui.screenHeight - 3*h, w, h).onClick(function(){

if (!state){

accelerometer.setAlpha(0);

orientation.setAlpha(0);

light.setAlpha(0);

gyroscope.setAlpha(0);

magnetic.setAlpha(0);

barometer.setAlpha(0);

proximity.setAlpha(0);

canvas.setAlpha(255);

state = !state;

btnPlay.setText("Pause");

}else{

accelerometer.setAlpha(255);

orientation.setAlpha(255);

light.setAlpha(255);

gyroscope.setAlpha(255);

magnetic.setAlpha(255);

barometer.setAlpha(255);

proximity.setAlpha(255);

canvas.setAlpha(0);

canvas.clear();

canvas.background(0,0,0);

state = !state;

btnPlay.setText("Play");

}

});

Una vez que se haya pulsado el botón, se modificarán las transparencias, se cambiará el valor del la variable state y el texto del botón cambiará. Además, cuando la variable state sea true, es decir, canvas esté “oculto”, borraremos la información que se haya dibujado y volveremos a poner el fondo negro.

Para crear el canvas utilizamos el siguiente código:

var wCanvas =  ui.screenWidth -4*margin;
var hCanvas = ui.screenHeight - 3.5*h;

var canvas = ui.addCanvas(2*margin, margin, wCanvas, hCanvas);
canvas.background(0,0,0);

var wCanvas = ui.screenWidth -4*margin;

var hCanvas = ui.screenHeight - 3.5*h;

var canvas = ui.addCanvas(2*margin, margin, wCanvas, hCanvas);

canvas.background(0,0,0);

Las variables wCanvas y hCanvas determinarán el tamaño del canvas. Además, vamos a cambiar la transparencia del elemento para que no se muestre al iniciar el programa:

ui.alpha(canvas,0);

1	ui.alpha(canvas,0);

Para dibujar sobre el canvas, tenemos que utilizar la función loopDraw, que toma como parámetro el tiempo de actualización en milisegundos de la función, es decir, cada cuanto se ejecutará la función que está contenida dentro de loopDraw. En este caso, utilizamos la siguiente función:

canvas.loopDraw(50, function() {

    canvas.fill( randomColor(),randomColor(),randomColor());
    var size = randomSize();
    canvas.ellipse(posX(acelX),posY(acelY),size,size);

});

canvas.loopDraw(50, function() {

canvas.fill( randomColor(),randomColor(),randomColor());

var size = randomSize();

canvas.ellipse(posX(acelX),posY(acelY),size,size);

});

En primer lugar, con la orden canvas.fill indicamos de qué color se “pintarán” los elementos siguientes, es decir, en primer lugar definimos el color y a continuación dibujamos. Si se quiere dibujar diferentes objetos en diferentes colores, tendremos que utilizar la orden canvas.fill antes de cada uno de ellos.

La variable size almacenará el valor devuelto de la función randomSize, que podrá obtener como máximo la mitad del tamaño del canvas.

Finalmente, aplicamos un factor de conversión entre la posición X y el ancho del canvas y entre la posición Y y el alto de la pantalla teniendo en cuenta el módulo de la aceleración de la gravedad.

Las funciones randomColor, randomSize, posX y posY son funciones que hemos realizado para generar un color RGB aleatorio, un tamaño aleatorio y “traducir” la posición X e Y desde las lecturas del acelerómetro, respectivamente. Estas funciones son:

function randomColor(){
    
    return Math.random() * 255;
}

function posX(value){
    return value*wCanvas/9.81;
}

function posY(value){
    return value*hCanvas/9.81;
}

function randomSize(){
    return Math.random()*wCanvas/2;
    
}