Entrada 16: Interfaz gráfica de usuario IV - Abril 2013

Y ya sólo nos queda hablar de la pantalla final de la aplicación. Al igual que en los videojuegos ha resultado ser la más difícil. Partimos del botón "Realizar el reconocimiento", y cuando el usuario le da, debe renderizarse el resultado del reconocimiento que habíamos lanzado previamente. Y para ello tiene que haber terminado el reconocimiento.

El problema está en que los shell scripts que realizan la mayor parte del programa los lanzamos con el módulo child process, que lo que hace es crear hilos independientes por lo que es difícil saber cuando van a terminar. Además, nodejs es un lenguaje enfocado a eventos, por lo que no existen monitores (wait()-notify()). Hay, pues, un serio problema de concurrencia.

Tras muchas pruebas y quebraderos de cabeza hemos resuelto el problema utilizando la propia vairable del reultado como flag y un timeout que se repite hasta que  dicha variable tiene un resultado (proceso finalizado) en ese momento renderizamos la vista con el resultado en la siguiente vista, donde <%r1%> es una variable que será sustituída por el resultado:

<div id="resultado">El sistema ha reconocido el idioma como <%r1%>.</div>
<form method="GET" action="/lidonrpi/index">
   <input type="submit" value="Volver">
</form>

Todo el control de los flujos de procesos del programa lo llevamos a cabo en controller.results() de la siguiente forma (de acuerdo a lo descrito):

results: function () {
   var espera = 0;
   var id = setInterval(function(){
      if(result) {
 view.render('results.html', result);
 console.log("He esperado "+espera+"ms");
 model.clean();
 result = "";
 clearInterval(id);
      } else {
 console.log("Llevo esperando "+espera+"ms");
 espera += 500;
      }
   }, 500);
}

donde model.clean(); es una nueva acción del modelo que lanza un script que se encarga de almacenar los archivos que han sido mandados para reconocer en una estructura de directorios en función del idioma reconocido:

clean: function () {
   child = exec('./scripts/limpia.sh '+tmpAudio+' '+result,
   function (error, stdout, stderr) {
      if (error !== null) {
         console.log('exec error: ' + error);
      }
   });
}

y el contenido de limpia.sh:

#!/bin/bash

# Ruta al programa que realiza el reconocimiento
LID_RPi_DIR=/home/mtm/Desktop/PRACTICA_SDG2/SDG2_Octave_sin_normalizar/LID_RPi/audio

#Renombra tmpAudio según el idioma reconocido y lo mueve al directorio correspondiente
mv ${LID_RPi_DIR}/${1}.wav ${LID_RPi_DIR}/${2}/${2}${1}.wav

Una vez hemos seguido los pasos descritos a lo largo de estas cuatro entradas ya sólo nos falta dar permisos de ejecución a todos los shell scripts que utilizamos ($ chmod +x "ficheros.sh") y arrancar el servidor ($ node lidonrpi.js) para tener nuestra aplicación funcionando y con una interfaz gráfica. Para acceder a ella basta con abrir un navegador e ir a la dirección 'localhost:3000/lidonrpi/index'.

En las próximas entradas continuaremos relatando más detalles del proyecto.