La principal ventaja que tiene esta interfaz es que se puede adaptar el servidor local a un servidor remoto de forma que se podría hacer que nuestro sistema se utilizase en una aplicación web.
Junto con la parte de adaptación del programa de Matlab a Octave, este es el otro trabajo que hemos realizado a lo largo del mes de abril. Las sesiones dedicadas a esta parte han sido X-10, M-16, X-17, L-22, X-24, D-28 y L-29, hasta que hemos conseguido una integración entre programa e interfaz que funcionase.
Lo primero que hacemos es generar el marco común de la aplicación, sobre el que se irán renderizando las distintas vistas. Para ello creamos un documento app.html como se muestra a continuación, donde <%view%> es la variable en la que se va a renderizar cada una de las vistas correspondientes:
Además de este html, hemos creado un estilo básico y un logo para el proyecto, que se mostrará en el centro de la vista. Dicho estilo está programado en una hoja .css, incluyendo apenas un par de detalles como centrar el texto, utilizar un tamaño más grande para el título y cambiar el color de fondo:<!DOCTYPE html> <html> <head> <link rel="icon" href="/images/favicon.ico" /> <title>LID on RPI</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="/js/jquery.min.js"></script> <link rel='stylesheet' type='text/css' href='/css/style.css' /> </head> <body> <div id="page-wrap"> <header> <h1>LID_RPi:<br>Sistema de reconocimiento del idioma<br>basado en la Raspberry Pi</h1> <img src="/images/raspberry_die.png"><br> </header> <section id="main"> <%view%> </section> <footer> <br><br> <div>Proyecto de práctica innovadora para Sistemas Digitales II.</div> <div>Autores: Diego Avendaño Peces y Jose Mª Bermudo Mera.</div> </footer> </div> </body> </html>
body { background: #CCCCCC; text-align: center; } header { margin: auto; text-align: center; } img { display: block; margin: auto; }
Lo siguiente que hacemos es definir las acciones que se deben llevar a cabo en cada momento. Según se abra la aplicación aparecerá la vista descrita con un botón que pone "Grabar". Al pulsar ese botón, se lanzará un proceso que comience la grabación del audio mientras que en la vista se mostrará un cronómetro con el tiempo de grabación y un nuevo botón para detener la misma. Una vez se haya detenido la grabación comenzará el proceso de reconocimiento, mientras que el usuario podrá ver un botón para realizar el reconocimiento. Cuando tengamos el resultado lo mostraremos por pantalla junto con otro botón para volver al inicio de la aplicación.
Todas estas acciones son las que se llevarán a cabo a través de un servidor local. La forma en la que se llevan a cabo la detallamos más a fondo en sucesivas entradas.
No hay comentarios:
Publicar un comentario