DESARROLLO DE UN INTERFAZ GRÁFICO PARA UN SISTEMA DE CONTROL [PARTE 1]

Con esta práctica vamos a desarrollar un interfaz gráfico para controlar un sistema de control. Para ello utilizaremos Processing, que es un lenguaje orientado al entorno gráfico y a la animación.
En toda interfaz gráfica industrial se trata de monitorizar en una pantalla lo más amigable posible tanto las variables de entorno como los controles. Esto supone una comunicación bilateral entre la interfaz y en sistema, por un lado querremos visualizar variables o sensores a distancia (comunicación Sistema -> Interfaz), y por otro lado nos interesará actuar a distancia sobre luces, motores, relés, etc del sistema (comunicación Interfaz->Sistema).

En esta primera parte abordaremos el objetivo primero (comunicación Sistema->Interfaz), y en concreto lo que vamos a monitorizar es el nivel de un depósito de una planta potabilizadora.
Tendremos dos programas ejecutándose simultáneamente y comunicándose entre sí. Por una parte estará el programa de Processing correiendo en el PC (IMPORTANTE: debe lanzarse antes que el de ARDUINO) y por otro lado tendremos el programa corriendo en la placa ARDUINO.

Veamos por partes cada uno de ellos:

SISTEMA DE CONTROL (ARDUINO)

Vamos a empezar viendo la parte física o hardware, en la que montaremos sobre una placa de ARDUINO UNO un potenciómetro que nos simulará una supuesta entrada analógica procedente de un sensor que midiera el nivel del depósito.
Esquema eléctrico:

 

Esquema en la placa protoboard:

 Código:

/* programa que envía por el puerto Serial la información de una

entrada analógica 0, que en este caso simula el nivel del depósito */

int potPin = 0;
// Potenciometro en el pin ANALÓGICO 0
int valor;
// variable para almacenar el valor del potenciometro
int valorMapeado;
// variable para almacenar el valor mapeado
void setup()
{
Serial.begin(9600);
// Abrimos el puerto Serie de Arduino a una velocidad de 9600 baudios
}
void loop()
{
// Leemos analógicamente el potenciometro y lo guardamos en la variable valor
valor =analogRead(potPin);
// Mapeamos el valor de la variable valor entre el rango original del potenciometro (0 → 1023) y lo
//pasamos al rango (0 → 255)
valorMapeado =map(valor,0,1023,0,255);
// Abrimos el Serial Monitor de Arduino y ahí podremos ver qué valores le vamos pasando al LED
Serial.println(valorMapeado);
// IMPORTANTE: retraso de 80 miliseg en un nuevo bucle del loop para no saturar el Puerto Serie
delay(80);
}

INTERFAZ - PC - PROCESSING

Es importante saber que no es suficiente con crearse el objeto Imagen y cargar la imagen. Para que no nos de error, debemos añadir la imagen correspondiente en "Sketch -> Add File..."

Código:

/* Programa que capta la información procedente del Sistema (placa ARDUINO)
por el puerto Serial y crea un interfaz dinámico que refleja el estado
del nivel del depósito */

import processing.serial.*;
// Importamos la libreria que se ocupa de la lectura del puerto serie
Serial myPort;
// Objeto Serial para inicializar el puerto serie
PImage laFoto;
//creamos el objeto imagen
String buf = "";
// Cadena de texto, mas de una letra, en este caso esta vacia
int val;
float altura;
// variable que almacenará el nivel del deposito
void setup(){
// cargamos imágen
laFoto = loadImage("deposito.jpg");
size(792,386);//del mismo tamaño que la imagen
background(255);//color del fondo
noStroke(); //sin bordes
fill(150);//color del relleno
//la mostramos, en este caso a partir del punto 0,0
image(laFoto,0,0);

//strokeWeight(2); //ancho de la linea (4 pixeles)
noStroke();
rectMode(CENTER); //(valor por defecto)
fill(#ffffff);
rect(290, 218, 222,255);
//imprimo solo una vez la lista de nombres de puertos series que tiene mi ordenador para ver donde
//puedo leer
println(Serial.list());
// Puerto donde está conectado Arduino para poder leer los datos
String portName = "COM4";
// Asigno a mi objeto Serial el puerto que está conectado a Arduino y con la misma velocidad
myPort =new Serial(this, portName, 9600);
}
void draw(){
//si el puerto esta disponible...sirve para que no se sature la ventana de processing
if( myPort.available() > 0) {
val = myPort.read();
//en la variable val, escribe lo que estás leyendo en el puerto
if(val != 10) {
//si val es distinto de 10, o sea...detecto donde cambio de linea con el return (10)
buf +=char(val);
//...entonces...guardo el valor como una cadena de texto
}
else
{
altura =float(buf);
//y si no....el diametro vale 1023 menos la transfomarcion de buf, ahora
//como float...
buf ="";
//vacio la variable buf...este doble cambio de la variable es un truco para
//que
//funcione bien en processing
}
//si no esta disponible...no hagas nada
}
//borro liquido primero
fill(#ffffff);//relleno de blanco
rect(290, 218, 222,255);
fill(#66ffff);//refresco el relleno de agua
rect(290, 346-altura/2, 222,altura);
println(altura);
// Imprimimos en el Puerto Serie la variable altura}


Video de funcionamiento: