Interface no Processing para o Arduino - Aprenda a criar - MakerHero

Integrando Processing e Arduino – Criando interface no Processing Deixe um comentário

Esse artigo é uma sequência do artigo “Integrando processing e Arduino com a biblioteca Firmata”. Anteriormente entendemos o que é o Processing e como programar o Arduíno escrevendo somente no Processing via a biblioteca firmata. Hoje, vamos aprender sobre as suas funções principais. Para isso, vamos montar um circuito com Arduino, LDR, Chave Táctil, Buzzer e LED e criar uma interface no Processing para ser controlado pelo computador.

Materiais Necessários

Circuito Fritizing

Imagem 1 - Circuito no Fritzing

Programando o Arduino para criar a interface no Processing

Como foi mostrado no artigo anterior “Integrando processing e Arduino com a biblioteca Firmata” primeiro precisamos programar o Arduino com o sketch firmata. Na Arduino IDE vá em:

Arquivos > Exemplos > Firmata > StandardFirmata

Posteriormente vamos preparar o circuito no Arduino, basta seguir as ligações como na imagem do circuito feita no Fritizing.

Como criar a interface no Processing?

Vamos simular o interior de um carro no Processing. A chave táctil fará o papel do botão de ignição ligando o carro, o LDR irá controlar o dia e a noite no exterior do carro, o LED responderá ao botão de alerta e o Buzzer a buzina. O interior do carro será como as imagens abaixo (você pode salvá-las no seu computador porque você vai precisar delas adiante).

Imagem 2 - Interface no Processing

Imagem 3 - Interface no Processing

Imagem 4 - Interface no Processing

Colocando a mão na massa

Agora precisamos instalar as bibliotecas. A biblioteca firmata já foi instalada no artigo anterior, mas a biblioteca minim precisa ser instalada agora. Para isso, basta seguir os passos:

Sketch > Import Library… > Add library > {escrever “sound” na pesquisa} > {selecionar e instalar a biblioteca minim}

Voltando ao programa, vamos iniciar chamando as bibliotecas e inicializando os objetos no código. Fica assim:

Como o Arduino, o Processing usa duas funções principais que devem estar presentes em todos os projetos, elas são a void setup( ) e a void draw( ). A função draw funciona como a void loop do Arduino e nela vamos construir o programa. A setup funciona exatamente com o mesmo propósito da função no Arduino, no Processing vamos usá-la para criar o Canvas, a tela onde construiremos a nossa interface.

Como usaremos um botão virtual, ou seja, vamos clicar em um botão na tela do Processing e assim tomar uma ação no Arduino, devemos chamar uma função própria do Processing chamada void mousePressed() que será chamada toda vez que houver um click no mouse.

Colocando as imagens no projeto

Antes da função setup precisamos criar o objeto e fazemos isso dessa forma:

Precisamos fazer isso com cada imagem que queremos usar dentro do projeto. É como declarar uma variável, PImage é o tipo da variável e img é o nome da sua variável. Logo, não podemos repetir esse nome, se queremos outra imagem no projeto precisamos dar outro nome. Como usaremos duas imagens, o resultado será o seguinte:

Agora precisamos colocar realmente as imagens no projeto, para fazer isso basta arrastar as imagens e soltar na janela do Processing, assim:

O Processing irá criar automaticamente uma pasta chamada “data” dentro da pasta do seu projeto. Nela ficará contidos os arquivos que vamos usar daqui em diante. Guarde essa informação.

Precisamos trabalhar a imagem dentro da função setup. Fazemos isso chamando o construtor dessa forma:

Essa função cria o link entre a sua “variável” e o arquivo que você enviou para o Processing. Lembre-se de colocar nomes fáceis na sua imagem para não ter problemas aqui. No nosso caso, fica assim:

No setup também inicializamos o Canvas. Fazemos isso usando a função size(), ela determina o tamanho da janela. No nosso caso vamos usar as dimensões originais da imagem que queremos usar.

E por último, quando desejarmos mostrar uma das imagens precisamos chamar a função dessa forma:

Onde “img” é a variável onde sua imagem está “guardada” e os algarismos seguintes são a posição onde a ponta esquerda superior da imagem será posicionada. Até agora o nosso programa está assim:

Colocando o som no projeto

O arquivo utilizado pode ser baixado no seguinte link.

Precisamos antes do setup fazer as seguintes declarações:

E no setup precisamos declarar:

Para que a biblioteca possa acessar a pasta Data, onde ficam guardados os arquivos do projeto.

No setup, precisamos declarar também:

Que vai ligar o arquivo de som a uma variável. Para “tocar” o som chamamos a função:

Até agora o nosso programa está da seguinte forma:

Colocando o Arduino na jogada

Primeiro precisamos declarar no setup as entradas e saídas do nosso projeto.

Definimos assim:

LDR > Entrada (pino A0)
Botão > Entrada (pino 8)
LED > Saída (pino 9)
Buzzer > Saída (pino 10)

No Processing, escrevemos dessa forma:

Adicionalmente precisamos inicializar o Arduino em si. Fazemos isso no setup chamando a função:

Se for preciso, retorne ao artigo anterior para entender como declarar o índice da porta a qual o seu Arduino está conectado.

Na função void Draw do Processing, vamos escrever a lógica da nossa aplicação, vamos lembrar como usamos as funções próprias do Arduino pela biblioteca firmata:

Lógica

Abaixo segue o código do nosso projeto, ele está todo comentado.

Resultado da Interface no Processing para o Arduino

Agora veja na prática como ficou nosso projeto:

Obrigado por ler o artigo até aqui! No próximo artigo vamos conhecer mais uma forma de comunicar o Arduino com o Processing, dessa vez sem o uso da biblioteca firmata. Vamos criar um jogo no Processing e fazer um controle simples usando Arduino!

Se você deseja ler mais conteúdos que vão te ajudar a melhorar as suas habilidades com Arduino, visite o blog da MakerHero. Siga nas redes sociais e não deixe de conferir as novidades!

Faça seu comentário

Acesse sua conta e participe