Interface Gráfica de Termómetro Usando Processing

Introdução

Este artigo foi escrito como continuação do artigo Estação de Controlo de Temperaturas Usando Arduino e Texas Instruments LM335A publicado na edição anterior.

O objectivo deste novo artigo é criar uma interface gráfica que simplifique a leitura das temperaturas instantâneas lidas pelo sensor de temperatura Texas Instruments LM335A e interpretados pelo micro-controlador Arduino.

A interface criada é muito simples, assemelha-se a um termómetro comum e foi criada recorrendo à linguagem de programação Processing.

Processing

Processing é uma linguagem de programação open source aliada a um IDE que permite criar interfaces gráficas. Inicialmente a linguagem Processing destinava-se a ajudar aqueles que se iniciavam na arte de programar num contexto gráfico, sendo que actualmente esta linguagem de programação é usada desde estudantes até cientistas.

Arduino: IDE do processing
Figura 1: processing

A sintaxe desta linguagem de programação é em muito semelhante à linguagem C, pelo que é de fácil compreensão.

Existe muita informação e tutoriais sobre esta linguagem de programação e suas potencialidades espalhados pela internet, mas o website oficial possui bastante informação e possibilita o download do IDE: http://processing.org/.

Código Fonte para o Arduino

Para que o Arduino possa ler e interpretar as informações lidas pelo sensor de temperatura LM335A é necessário usar o seguinte código fonte:

//Declaração de Variáveis
int tempPin = 0;
float temperatura;

void setup()
{
  Serial.begin(9600);
}

void loop()
{
  //Leitura dos Valores do Sensor
  temperatura = analogRead(tempPin);
  //Conversão dos Valores Analógicos para ºC
  temperatura = ((((temperatura / 1023)*5)*100)-273.15);
  //Envio de Dados para PC
  Serial.print((byte)temperatura);
  delay(1000);
}

O que este pedaço de código faz é ler os dados analógicos lidos no sensor de temperatura, convertê-los em dados digitais a cada segundo e enviar esses dados para o computador, recorrendo à conexão USB.

Carregar uma Imagem com Processing

Na aplicação criada foi utilizada uma imagem de um termómetro em JPEG de modo a tornar a aplicação um pouco mais atractiva visualmente.

Para que possamos usar uma imagem de uma fonte externa na nossa aplicação, é necessário recorrer a uma série de passos. Inicialmente temos de guardar o nosso projecto numa pasta, e de seguida criar dentro dessa mesma pasta uma outra pasta com o nome data e então inserir a imagem dentro dessa pasta.

Após colocarmos a imagem que queremos na pasta data, vamos passar ao código necessário para que possamos exportar a imagem para a aplicação propriamente dita. O código necessário para efectuar este passo é o seguinte:

// Declarar a variável Pimage
PImage imagem;

void setup()
{ 
  // Defenir o tamanho da Janela
  size(500,500);
  // Criar uma nova Instância para a Variável PImage 
  imagem = loadImage("termometro.jpg");
}

void draw()
{
  //Definir a cor de Fundo da Aplicação
  background(255);
  // Desenhar a Imagem na Janela da Aplicação na Coordenada (0,0)
  image(img,0,0);
}

Após efectuar a criação da pasta data, inserir a respectiva imagem dentro dessa pasta e, usando o código acima indicado, deverá então aparecer na janela da aplicação a imagem previamente seleccionada.

Criar uma Aplicação Gráfica usando a Linguagem de Programação Processing

Agora que já sabemos como importar uma imagem para a nossa aplicação gráfica, vamos programar a restante aplicação de modo a estabelecer uma conexão entre os dados lidos do sensor de temperatura Texas Instruments LM335A e interpretados pelo micro-controlador Arduino e apresentá-los na janela da aplicação gráfica.

O código da pequena aplicação gráfica que desenvolvi, usando a linguagem de programação Processing, é o seguinte:

//Importar a Biblioteca Serial Communication
import processing.serial.*;

// Declaração de Variáveis
Serial commPort;
PImage imagem;
int yDist;
float tempC;
float tempF;
float[] tempHistorico = new float[100];

void setup()
{
  // Defenir o tamanho da Janela
  size(500,500);
  // Carregar a Imagem do Termómetro
  imagem = loadImage("img_termometro.jpg");
  //Definir a cor de Fundo da Aplicação
  background(255);
  // Desenhar a Imagem na Janela da Aplicação na Coordenada (0,0)
  image (imagem, 0, 0);
  //Inicializar a Serial Communication Port
  commPort = new Serial(this, "COM3", 9600);
  //Preencher o Vector TempHistorico com 0
  for(int index = 0; index<100; index++)
  {
    tempHistorico[index] = 0;
  }
}

void draw()
{ 
  while (commPort.available() > 0)
  {
    tempC = commPort.read();

    //Actualizar para Eliminar os Dados Antigos
    background(123);

    // Carregar a Imagem do Termómetro
    imagem = loadImage("img_termometro.jpg");
    background(255);
    image (imagem, 0, 0);

    //Desenhar o Trinângulo Apontador
    yDist = int(370 - (370 * (tempC * 0.01)));
    stroke(0);
    triangle(187, yDist + 10, 197, yDist + 5, 197, yDist + 15);
    fill(0,0,0);

    //Escrever os Valores de Referência
    fill(0,0,0);
    textAlign(RIGHT);
    text("212 F / 100 oC", 145, 65);
    text("167 F / 75 oC", 145, 140);
    text("122 F / 50 oC", 145, 215);
    text("77 F / 25 oC", 145, 290);
    text("32 F / 0 oC", 145, 365);

    //Converter e Escrever as Temperaturas Actuais
    stroke(0);
    textAlign(LEFT);
    text("Temperatura Actual:", 250, 60);
    fill(255,255,255);
    rect(250,70,200,55);
    fill(0,0,0);
    text(str(int(tempC)) + " oC", 275, 95);
    tempF = ((tempC*9)/5) + 32;
    text(str(int(tempF)) + " F", 275, 115);

    //Desenhar o Gráfico do Histórico
    stroke(0);
    text("Gráfico:", 250, 210);
    fill(255,255,255);
    rect(250,220,200,150);
    for (int index = 0; index<100; index++)
    {
      if(index == 99)
      {
        tempHistorico[index] = tempC;
      }
      else
      {
        tempHistorico[index] = tempHistorico[index + 1];
        point(350 + index, 370 - tempHistorico[index]);
      }
    }
  }
}

A aplicação criada é visualmente muito simples, mas é suficiente para ser clara e fácil de ler. Como é possível constatar pelo código fonte acima colocado, a sintaxe da linguagem de programação Processing é muito semelhante à linguagem C, pelo que será simples de entender para quem já tenha alguma experiência em programação.

Arduino: interface gráfica de termómetro
Figura 2: aplicação gráfica

Uma particularidade da programação gráfica usando a linguagem de programação Processing é a necessidade de desenhar e ajustar as imagens carregadas para a aplicação por meio de programação de coordenadas no código fonte, o que por vezes pode atrasar e complicar um pouco a parte gráfica da aplicação.

Conclusão

Como podemos constatar, criar uma aplicação gráfica capaz de interagir com o micro-controlador Arduino é relativamente simples, havendo muita informação, recursos e ferramentas disponíveis na internet.

Para quem é adepto de interfaces gráficas, a linguagem de programação Processing é uma boa linguagem para criar pequenos projectos, facilitando a vida a quem já tiver alguma experiência com a linguagem de programação C, pois a sua sintaxe é muito semelhante.

Publicado na edição 37 (PDF) da Revista PROGRAMAR.