Arduíno Gerando Gráficos Com Socket.io

Bem, nesse post estarei mostrado um exemplo bem simples, de com gerar gráficos com os dados recebidos do Arduíno. Para isso iremos usar a ideia de cliente servidor, onde teremos o nosso Arduíno como servidor enviando dados para o computador, que estará recebendo esses dados e gerando um gráfico no navegador.

Para começarmos, temos que criar um projeto(diretório) com o nome de graficonodejs, você pode usar o nome que preferir. Em seguida você deve rodar dentro do seu projeto os seguintes comando para instalar as dependências do projeto.

serialport – é uma biblioteca que permitirá a comunicação entre a aplicação node.js e o Arduíno, mais informações.

socket.io – é uma biblioteca que permite conexão cliente servidor em tempo real, mais informações.

express – é um Framework que facilita a criação de app web, mais informações.

Código Arduíno

Crie um diretório com o nome arduino ou como preferir, dentro dele vamos criar um arquivo arduino.ino, e coloque o código abaixo, não estarei falando sobre o código pois todos estão comentados. Feito isso use a IDE Arduíno ou outra que preferir para fazer o upload do código para a placa.

Biblioteca Chart.js

Para estarmos gerando o gráfico, vamos usar uma biblioteca chamada Chart.JS, acesse o site aqui, clique em download para baixar a biblioteca completa ou apenas o arquivo que vamos usar, que é o Chart.js, apos ter baixado crie um diretório dentro do projeto com o nome public e dentro da pasta public crie um outro diretório com o nome js, dentro desse diretório coloque o arquivo Chart.js que foi baixado, para mais informação consulte a documentação.

Código Html

Agora vamos criar outro diretório com o nome view, nele vamos criar um arquivo chamado index.html, esse aquivo contem o código que vai desenhar e exibir o gráfico no navegador.

Código JS

Na raiz do projeto, crie um arquivo chamado app.js, e coloque o código abaixo.

Se todos os passos acima tiver sido realizado corretamente você pode ver o funcionamento rodando o seguinte comando:

Agora você verá uma mensagem no console “Servido online em http://localhost:3000 – para sair Ctrl+c.”

Vídeo Demonstrativo

 

Espero que gostem, não deixe de comentar e compartilhar.

Sobre o autor:

Servo de DEUS, Pós-Graduando em Docência do Ensino Superior - IDJ/UVA, Graduando em Automação Industrial - IFCE, Tecnólogo em Analise e Desenvolvimento de Sistemas - FALS, casado com a mulher mais maravilhosa, Tamires Alencar e amante Java, Games, Eletrônica, Robótica, Violão, Aviação...

Postagens relacionadas:

6 respostas

    • Jayr Alencar

      Você tem que ter o Node.js instalado na sua máquina.
      Abra o terminal, bash ou prompt de comando, navegue até a pasta da aplicação usando cd, tipo assim:
      cd c:/pasta/do/projeto
      E depois execute:
      node app

      Responder
  1. Sérgio

    Cara, preciso gerar esses gráficos com a tensão e a corrente de um motor trifásico, ele mostrar em tempo real pra mim numa interface gráfica e com a possibilidade de alterar o ângulo de disparo

    Responder
    • Francisco de Assis

      Amigo, da certo sim, você precisara de três sensores para medira a corrente e a tensão de cada fase do seu motor, feito isso é apena aquisição desses dados pelo arduino e plotar na pagina web, agora em relação ao ângulo do dispara isso no momento não posso opinar. abraço.

      Responder
      • Sérgio

        Ahhh entendi, mas no caso o meu projeto teria que apresentar esse gráfico em um sistema desktop, que vou construir em c#… você sabe se tem como eu puxar esse gráfico para o sistema ?

      • Francisco de Assis

        Sérgio, do jeito que foi implementado no post, não dá para você usar porque o servidor é em node.js, como nunca fiz usando C# não posso te dizer como fazer, mais acredito que exista sim uma forma de fazer isso. Uma dica é você pesquisar comunicação serial Arduino + C#. Vlw.

Deixe uma resposta

Seu e-mail não será publicado.