4. DESCRIPCIÓN DEL SOFTWARE
4.3. Interfaz gráfica
4.3.3. Visualización de los resultados
4.3.3.1. Gráfico
Mediante esta representación gráfica es posible ver el número de cuentas que realiza el sensor. El eje de abscisas está dividido en las 512 posiciones del vector (valueBin[] en Arduino y expDb[].data[] en Processing), mientras que el eje de ordenadas indica el número de cuentas en cada posición, estando este escalado entre 0 y el máximo de cuentas para una posición. Se muestra un ejemplo de una medida del gráfico:
Figura 47: Ejemplo de gráfico de un experimento.
En este caso, la mayoría de las cuentas tienen lugar en valores bajos de expDb[].data[]. La posición en la que más cuentas hay es la 0, y a partir de la posición 8, hasta la posición 512,
66 Escuela Técnica Superior de Ingenieros Industriales (UPM) las medidas siempre serán nulas. Los sliders a la derecha del gráfico sirven para dar zoom al gráfico y variar su color. Estos se explicarán posteriormente.
Para la creación de este gráfico, se ha requerido del desarrollo de la clase Grafico, así como de su objeto, sus atributos y métodos. Sus atributos son:
float xpos: indica la posición en el eje x del origen de coordenadas del gráfico.
float ypos: indica la posición en el eje y del origen de coordenadas del gráfico.
float a: indica la altura del gráfico.
float l: indica el ancho del gráfico.
Estos atributos únicamente permiten colocar el gráfico en el lugar deseado, aportando las dimensiones necesarias. El objeto creado de esta clase es Grafico graph, cuya declaración es la siguiente:
Figura 48: Declaración del objeto graph de la clase Grafico.
En este caso, los parámetros enviados son cuatro variables estáticas que definen las dimensiones del gráfico.
Esta clase tiene dos métodos:
1. void crea(): representa el gráfico, dibujando en primer lugar un rectángulo de color blanco, y después dos líneas negras creando los ejes coordenados.
2. void draw(): método que pinta los valores del gráfico. Para esto crea la variable local int idx, la cual indica el número de experimento en el que se encuentra el programa, y en el caso en el que el experimento esté lleno (expDb[idx].filed), realiza las siguientes acciones:
- Busca el valor máximo de todas las cuentas, y guarda su posición, mediante las variables float valmax e int xmax. Para esto llama a la función int getMaxValue(). Esta función recorre el vector data[] del experimento de índice idx, y en el caso de que un valor sea mayor que valmax, se guardará como el nuevo valmax, el cual se encuentra en la posición xmax.
- Habilita la bandera de guardado enable_guardar.
- Rellena la gráfica con los puntos obtenidos gracias a la función void fill_graph (float vect_x[], float vect_y[], int c, int lineHeight, int lineWidth, int maxCount, float
valmax). Esta función se debe describir con mayor detalle:
Los vectores vect_x[] y vect_y[] indican las posiciones en las que se representarán los puntos, c indica el color del punto, lineHeight y lineWidth son los valores máximos de los ejes coordenados, que ayudan a la representación, maxCount es el valor máximo del vector de cuentas (512 en este caso), y valmax es el valor máximo de cuentas.
Francisco Pérez Maquieira 67
Figura 49: Función fill_graph().
Como se puede observar, se recorre el vector expDb[idx].data[], mapeando los valores del índice entre 0 y 512, para representarlo en el eje X, y entre 0 y un valor zoom, para representar el gráfico en el eje Y. Estos valores se guardan en los vectores vect_x[] y
vect_y[], y se dibujan con la función point en la posición correspondiente.
La variable float zoom se obtiene a partir del primer slider situado a la derecha de la pantalla, y sirve para agrandar el gráfico, de modo que se puedan distinguir puntos muy cercanos entre sí con mayor facilidad. Si el slider “zoom” se encuentra en su posición más alta, la posición de los puntos será la real, pero a la par que se va bajando el slider, se aplica un aumento mayor.
Figura 50: Mismo experimento, visualizando todos los puntos (abajo) y ampliado al máximo (arriba). Se observa que arriba pueden quedar puntos sin salir en la pantalla.
Por otro lado, la variable float c, que se pasó por parámetro en la llamada a la función, también se obtiene de un slider, “color”, creado también en el setup. Este slider tiene valores entre 1 y 120, los cuales se traducen en la función int selectColor (float v, boolean
68 Escuela Técnica Superior de Ingenieros Industriales (UPM)
normal). La variable decimal float v es el valor recibido del slider, mientras que la variable
lógica boolean normal decide si el valor del slider se debe escalar, necesario en la representación del espectrograma.
Esta función elige el color según el valor de v, comparándolo con un vector de colores int lVal[]. Si v se encuentra entre dos valores de este vector, se selecciona un color codificado en RGB, el cual se guarda en la variable int c, devuelta por valor. Los colores utilizados se encuentran en la siguiente tabla.
i Intervalo (lVal[i-1] – lVal[i]) Color Codificación RGB 0 0 – 15 Azul marino – Azul (0, 0, 102 + v*10)
1 15 – 30 Azul – Azul claro (0, (v-lVal[0])*18, 255)
2 30 – 45 Azul claro – Verde (0, 255, 255-(v-lVal[1])*18)
3 45 – 60 Verde – Verde claro ((v-lVal[2])*10, 255, 0)
4 60 – 75 Verde claro – Amarillo (128 + (v-lVal[3])*10, 255, 0)
5 75 – 100 Amarillo – Naranja (255, 255-(v-lVal[4])*5, 0)
6 100 – 300 Naranja – Rojo (255, 128-(v-lVal[5])/2, 0)
7 300 – 500 Rojo (255, 0, 0)
Tabla 11: Colores según la variable v, valor del slider "color"
Puede parecer que estos sliders no tengan gran importancia para la representación del gráfico. Ambos sliders sí tendrán una influencia mucho más importante para el espectrograma, donde son necesarios para el análisis de resultados.