Chegando à última etapa do projeto do robô, desenvolveremos uma aplicação de controle. Até agora, vimos todos os exemplos sendo executados em um terminal, porém, agora criaremos uma interface gráfica que tornará a experiência de controle um pouco mais agradável.

Quem já desenvolveu aplicações Android, sabe que a interface da aplicação é formada por um arquivo XML, onde são definidos os Widgets que compõem a interface. Para a construção da interface do robô, utilizaremos o mesmo princípio, porém, usando HTML. O WebView fornecerá todos os recursos a partir da aplicação Python para montarmos a interface HTML.

A aplicação será dividida em três camadas, sendo a camada principal em Python, a interface em HTML e uma camada intermediária, em JavaScript. O gráfico abaixo, ajuda a explicar melhor como tudo funciona:
A ideia de misturar duas linguagens de programação e uma linguagem de marcação voltada para WEB, pode parecer confuso, como analogia, podemos pensar em um botão usado em eletrônicos: o HTML seria o acabamento plástico que o botão recebe, o JavaScript seria o circuito do botão, já o Python, é todo o resto do circuito em que o botão está inserido e que define o que o botão faz.

HTML

O uso de HTML para criação da interface gráfica, abre um grande leque de recursos gráficos e fácil manipulação. Não entrarei em detalhes sobre HTML, pois é um conhecimento muito difundido e simples de ser utilizado.

Além do JavaScript, também integramos CSS à nossa aplicação. Usando a mesma analogia do botão, o CSS seria a pintura do botão e sua posição na carcaça do objeto; o CSS, na verdade, é o conjunto de regras de estilo que a aplicação deve seguir.

Abaixo, segue o código HTML já com CSS:


Ao pressionarmos o botão, a função é invocada passando um parâmetro, se necessário. No caso, passamos o parâmetro diretamente na função, mas, no caso de uma área de texto, por exemplo, usaríamos a sintaxe onkeyup="Texto(this.value)". A função seria invocada, assim que pressionássemos o Enter, passando o valor do campo de texto como parâmetro.

Após digitarmos o código HTML, devemos salvá-lo e copiá-lo para o Android. No caso, temos um código pronto, mas, no caso do desenvolvimento, precisamos copiar o código diversas vezes, então, o uso de um alias, que faça isso de forma prática, ajudará muito. Vamos salvar o arquivo como interface.html.

JavaScript

A segunda camada da aplicação será responsável por integrar a interface com a aplicação em si, para isso, utilizaremos JavaScript. Todo o código JavaScript é baseado em funções que recebem dados da interface e encaminha para aplicação, ou o processo inverso de levar dados da aplicação para interface.

O código abaixo, apresenta pequenos conceitos, que serão vitais para entendermos como a integração entre as camadas funciona. Cada função precisa enviar um tipo de dado à aplicação principal, algumas apenas enviam, outras, além de enviarem, recolhem os dados recebidos e os exibem na interface.

Para enviar um dado, utilizamos um evento, como no exemplo abaixo:


Para enviarmos uma informação da interface para a aplicação, usamos a função droid.eventPost("Nome_do_evento",Parametro), ao definirmos um nome para o evento, fica mais fácil tratar a forma da aplicação receber os dados. O código abaixo, mostra a camada de JavaScript funcionando:


A função visao, além de disparar os movimentos do sensor, deve exibir a distância na tela, para isso, editamos o conteúdo da div display:


O comando droid.registerCallback('distancia', function(d) aguarda a aplicação Python disparar o evento distancia, e já chama a função function passando os dados recebidos do Python, nesse caso, a distância até o obstáculo. A função, por sua vez, usa um seletor que indica para buscar a div display na interface e editá-lo com o conteúdo da variável que foi passada, document.getElementById('display').innerHTML=d.data, exibindo assim os valores no display.

Salvamos o arquivo como Script.js e copiamos para o dispositivo.

Depois das duas primeiras camadas, chegamos à parte mais importante de todo o projeto, a aplicação Python que fará a integração da interface com o Android que, por sua vez, está integrado com o Arduino.

O interessante, é o nível de abstração de todo projeto, por alguns momentos, poderíamos até esquecer que destina-se ao Arduino, tudo isso graças à simplicidade de cada elemento. A aplicação deve ler os dados do usuário, tratar de forma a gerar as coordenadas que controlam o robô, enviá-los e, caso houverem dados a serem recebidos, os exibir na tela.

Vamos ao código:


O código acima, trabalha com a mesma ideia de funções e eventos. As três primeiras funções são responsáveis pela comunicação Bluetooth, logo em seguida, temos a função que recebe os dados do sensor ultrassônico e a função do controle por acelerômetro.

Depois da definição das funções, iniciamos a conexão Bluetooth e abrimos o loop da interface gráfica, atribuindo verdadeiro a variável booleana grafico. E iniciamos a interface com o comando droid.webViewShow('file:///sdcard/sl4a/scripts/interface.html'), enquanto a variável gráfico for verdadeira, a interface gráfica será exibida.

Como definimos nomes a cada evento, fica fácil definir ações, com o comando event = droid.eventWait().result, o loop fica em espera, esperando por um evento da interface. A partir da interação com a interface, é disparada uma função do JavaScript que faz com que o evento seja postado. A partir do nome do evento, o programa executa a ação necessária.


No exemplo anterior, apenas usamos um evento que dispara uma ação, mas, em alguns casos, será necessário recolher dados como com os botões de direção, cada botão armazena uma coordenada que define a direção, e/ou o sentido do robô.


Para ler os valores enviados com o evento, usamos o comando cord = event['data'], e logo após enviamos via Bluetooth.

A função visão, faz com que o sensor se vire sempre de 30° em 30°, adicionando ou subtraindo 30 da posição do servo; para manter tal controle no começo da aplicação, definimos a posição do sensor em 90°. Após mover o sensor, lemos a distância e a exibimos na tela.


O comando droid.eventPost('distancia', d), envia a distância para que possa ser exibida na tela, através da camada JavaScript, usando a mesma ideia de um evento, com nome seguido dos dados. É importante observar que a variável d é a mesma usada na camada JavaScript do código anterior.

Para controlar o robô por acelerômetro, é necessário ler os dados do sensor e enviá-los como coordenadas, para diminuir um pouco da sensibilidade o robô apenas se move com as coordenadas maiores que 2.

A leitura dos sensores será feita em intervalos de 200 milissegundos, tempo necessário para que os dados sejam enviados ao robô. A cada leitura, a variável tempo decresce 200 unidades até chegar a zero, é necessário esse controle por tempo, caso contrário, a aplicação entraria em loop infinito. Após o tempo chegar a zero, enviamos as coordenadas zeradas para que o robô pare.


No final, o pequeno Steve toma vida:

Referências

• android-scripting « code.google.com
• Python for Android: Using Webviews (SL4A)
• Androino! Control an Arduino from your Android « instructables.com