Criando gráficos com o App inventor2 , entendendo o canvas.

   Saldações minha alegre galera de hobbystas. hoje em dia um hobbysta que se prese tem e fazer seu próprio aplicativo para esmiuçar com detalhes o seu próprio projeto. Além de que, controlá-lo pelo celular dá um ... charminho a mais

Então povo, usarei como base a famigerada plataforma app inventor:

Que, eu mostrarei um passo-a-passo de como criar um aplicativo que elabora um gráfico, usando como base a engine canvas, ja disponibilizada no app inventor e, por, fim. Deixarei o app pra download.

Antes de começar eu acho importante aprender a manipular o canvas por que, ele é uma engine que, dentre outras coisas, permite a elaboração de gráficos, com dados que podem ser extraídos do seu embarcado. Seja arduino, esp, rasp, etc. Então, meu objetivo com este pequeno tutorial é "abrir a mente" do nosso caro leitor.

1° de tudo faremos a tela inicial do aplicativo:

A tela basicamente possui um layout horizontal, com 350 pixels de altura e "fill parent" de largura, onde será inserido o canvas. 

Detalhe que, os pixels de altura que voce colocar no layout horizontal, serão os pixels delimitadores do eixo y do canvas. Devemos nos atentar a isto na hora de elaborarmos o gráfico, caso você queira fugir da "receita de bolo" do tópico.

Com o Canvas inserido dentro do layout horizontal, coloque a altura e largura dele em "fill parent". Para que o mesmo ocupe todas as bandas do layout.

Coloque mais um layout horizontal embaixo do primeiro.E coloque seu "height" em 20% e seu "widht" em "fill parent". E nele insira duas labels, batizada de "indicador x " e indicador y", para sabermos o que anda acontecendo.

Feito isso, insira mais um  layout horizontal na figura "tenha calma que isso no programa é rapidim ;) " ,faça as mesmas configurações de heigth e width descritas acima e insira duas textbox, uma do lado da outra. Renomeie a textbox embaixo da label "indicadorx" para x e renomeie a textbox do lado da label "indicador y" para y.

Por fim, embaixo do layout horizontal, coloque um button e nele coloque o nome de "inserir".

Pronto, essa parte aqui ja foi descrita. Agora nos voltemos para o diagrama de blocos:

No diagrama de blocos devemos criar 5 variáveis globais. Para marcar o x e y anterior e o posterior e uma variável de conversão, que eu denominei filtro:

Para entender a variável filtro devemos entender como o canvas funciona. O canvas funciona assim. Os eixos x e y  tem suas origens no canto superior esquerdo da tela, isso é pouco convencional pra nós, que temos como eixo geralmente o canto inferior da tela. Sendo que, pro canvas, a origem fica assim:

E isso nós teremos que consertar via código. Para fazermos isso devemos primeiro ver o limite de pixels que criamos para a altura do canvas. Lah no começo do tutorial , definimos como 350, Então, se definirmos o y como 350, a linha passara exatamente na margem inferior da tela. Mas não quero que minha linha começe na margem, eu a quero mais ou menos centralizada. Então eu "defini" que meu gráfico começará com uma altura de 250. E isso já explica o fato da variável yant começar com 250, ao invés das outras que irão começar com 0.

Feito essa conta, temos que converter os valores numéricos que iremos colocar no gráfico em pixels, pois o meu canvas só irá interpretar pixels. Isso significa que temos que definir um valor "limite" que nosso gráfico irá suportar, em outras palavras, irá encostar na margem. Isso serve para vocês quando for mexer no arduino, se o sensor retornar como limite 100. Em nosso pequeno programa, temos que definir uma função que converte esse 100 em 250, assim toda vez que o sensor acusar 100%, a linha do nosso gráfico encostará o teto, e é exatamente isso que a variável filtro fará, ela irá fazer a nossa conversão.

Agora com esses pré requisitos definidos, vamos ao código:

O gráfico será plotado toda vez que clicarmos no botão inserir, logo temos que colocar esse bloco:

Basicamente, toda vez que o botão inserir for clicado, atualizamos a variável xatual e a variável filtro com o que tá escrito em nossa caixa de texto. Mas, para que não haja erros em nosso programa, temos que saber se foi digitado um numero nas caixas de texto de x e de y, então criamos esse bloco comparador:

Basicamente ele ta perguntando, se a variável xatual que foi atualizada pela caixa de texto for um número? ele deixará passar para o próximo bloco, que também perguntará, mas dessa vez se a variável filtro que foi atualizada pela caixa y também for um número ela deixará passar.

Caso contrário será exibido um alerta na tela de "por favor, digite apenas números" e a variável xatual e filtro retornarão aos seus valores anteriores.

Uma vez satisfeita essas duas condições a variável filtro será convertida em valores de pixels e irá atualizar a variável y. Como o arduino tem um limite pro sensor de 1032, eu tomei a liberdade de fazer a regra de 3 para conversão por 1032. Mas fique livre para escolher o "teto" que desejar a variável.

Depois a label irá atualizar o valor de x com o depositado na caixa x e o valor de y já convertido em pixels.

Agora, finalmente iremos mexer no canvas, primeiro criamos uma linha de centro onde será a nossa origem do canvas. Lembrando novamente que o canvas conta de cima para baixo. Então se nossa altura é 350 pixels e voce quer que a altura comece em 100 pixels, deve-se fazer a conta : 350-100=250 pixels.

A cor da linha de centro escolhi azul, e o tamanho escolhi o 3. O canvas desenha a partir do valor do x1 para o x2 e do y1 para o y2, para quem não lembra é a fórmula da hipotenusa, aprendida (ou não) em nosso ensino médio. Sendo assim devemos dar as coordenadas de nosso plano pseudo-cartesiano.

Como é linha de centro, então o y não ira variar, apenas o x. Podemos definir o x1 como 0 mesmo e o x2 como canvas.width. Que seria o valor máximo da largura do layout canvas

Agora, desenhamos uma nova linha. Sendo que o valor de x1 será igual ao xant que, quando o aplicativo for ligado, o xant será igual a zero e o valor de y1 será igual ao valor do yant, sendo que ao iniciar yant será igual a 250.

x2 será igual ao valor da variável global xatual e y2 será igual ao valor de 250(a origem) - o valor de y atual.

Após isso nos atualizamos o valor de xant com o x atual e yant com 250- yatual.

Para finalizar, caso nosso gráfico ultrapasse o valor de xatual, devemos limpar o canvas e iniciar o xatual como zero, afim de não poluir mais o gráfico coloquei que o mesmo deveria ser limpado caso isso ocorrese:

E por fim, o app montado:

app download