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.

npm install serialport
npm install socket.io
npm install express

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.

/**
 * App: Esse código é um gerador de números aleatórios, que envia os valores gerados, usando a 
 * porta serial do Arduíno para a aplicação web que vai desenhar o gráfico.
 * Mais informações sobre a class randomSeed consulte:http://www.arduino.cc/en/Reference/Random
 */

// variável para armazenar valores aleatórios.
long randNumber;

/**
 * setup - configuração do sistema
 */
 void setup(){
 	Serial.begin(9600); // taxa de velocidade da comunicação.
 	randomSeed(analogRead(0));
 }

/**
 * loop - 
 */ 
 void loop(){
 // randNumber recebe valores entre 0 e 11.
 randNumber = random(0, 11);
 Serial.println(randNumber); // imprime o valor.
 delay(1000); // aguarda 1 segundo.
}

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.

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Arduino Node.js</title>

	<!-- Socket.io - aqui chamamos nosso socket. -->
	<script src="/socket.io/socket.io.js"></script>

	<!-- Chart - aqui chamamos nossa lib que gera o gráfico. -->
	<script src="js/Chart.js"></script>
</head>

<body>
        <!-- criamos um canvas e atribuímos um tamanho que será o gráfico. -->
	<canvas id="myChart" width="800" height="400"></canvas>
	<script type="text/javascript">
		var contador = 0; // contador para gerar o eixo x do gráfico 
		var ctx = document.getElementById("myChart").getContext("2d");
		var data = {
			labels: [],
			datasets: [
			{
				label: "Gráfico Arduino",
				fillColor: "rgba(220,220,220,0.2)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: []
			}
			]
		};
		var myLineChart = new Chart(ctx).Line(data); // cria o objeto do gráfico.
	</script>

	<script type="text/javascript">
	var socket = io(); // instâcia o objeto socket..
        
        //chamada da função dadosArduino que recebe os dados.
	socket.on("dadosArduino", function(dado){
		// Exibe dados recebedos no console.
		// console.log(dado);
                
                /**
                 * Seta os valores recebidos da função dadosArduino e incrementa o contador, no                  * gráfico.. 
                 * dado.valor responsável pelo eixo y do gráfico.
                 * contador responsável pelo eixo x do gráfico. 
                 */ 
		myLineChart.addData([dado.valor], contador++);
	});
</script>

</body>
</html>

Código JS

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

/**
 * App - 
 */

 // Express é um framework que permite cria app web com facilidade com node.js.
 var app = require("express")();
 var express = require("express");

 // Na pasta public é onde colocaremos o arquivo Chart.js
 app.use(express.static(__dirname + '/public'));

 var http = require("http").Server(app);

 // Socket.io é um biblioteca que permite estabelecer concexão cliente servidor em tempo ral.
 var io = require("socket.io")(http);

 var serialport = require("serialport");
 var SerialPort = serialport.SerialPort;

 var mySocket;

/**
 * app.get - 
 */
 app.get("/", function(req, res){
 	res.sendfile("view/index.html");
 });

/**
 * mySerial - cria uma porta serial para comunicação com o Arduíno, define a velocidade de 
 * comunicação e interpreta o pular linha.
 * Onde eu estou colocando "/dev/ttyACM8" você deve substituir essa informação pela sua porta 
 * serial, onde o seu Arduíno está conectado. 
 */
 var mySerial = new SerialPort("/dev/ttyACM8", {
 	baudrate : 9600,
 	parser : serialport.parsers.readline("\n")
 });

/**
 * mySerial.on - Verifiica conexão com o arduino e informa no console.
 */
 mySerial.on("open", function(){
 	console.log("Arduino conexão estabelecida!");
 });

/**
 * mySerial.on -
 */
 mySerial.on("data", function(data){
 	// Recebe os dados enviados pelo arduino e exibe no console.
 	// console.log(data);
 	io.emit("dadosArduino", { // Emite um evento e o objeto data recebe valor.
 		valor: data
 	});
 });

/**
 * io.on - Recebe conexão de cliente.
 */
 io.on("connection", function(socket){
 	console.log("Usuário está conectádo!");
 });

/**
 * http.linten -  
 */
 http.listen("3000", function(){
 	console.log("Servidor on-line em http://localhost:3000 - para sair Ctrl+C.");
 });



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

node app.js

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.

Francisco de Assis

Servo de DEUS, Mestrando em Ciências da Computação (UFPE) Pós-Graduado em Docência do Ensino Superior (IDJ/UVA), Graduando em Automação Industrial (IFCE), Graduado em Analise e Desenvolvimento de Sistemas (UNILEÃO), casado com a mulher mais maravilhosa, Tamires Alencar e amante Python, Java, Games, Eletrônica, Robótica, Violão, Aviação...

Você pode gostar...

9 Resultados

  1. denilson disse:

    muito bom, mas como faço pra rodar o comando
    node app.js mencionado.

    • Jayr Alencar disse:

      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

  2. Sérgio disse:

    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

    • 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.

      • Sérgio disse:

        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 ?

        • 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.

  3. Antonio disse:

    Olá , sera que tem alguma atualização dos códigos para versões mais recentes do serial-sort ou continua funcionando os mesmos códigos? e como eu posso fazer para gerar 5 gráficos de diferentes sensores?

  4. Huberth disse:

    Ao executar o código aparece a mensagem de erro: “serialport.parsers.readline is not a function”, o driver serialport já esta instalado

  5. Junior disse:

    Oi, cara estou com problemas, consigo conectar porém não aparece o gráfico, acho que estou com problema ao pegar os dados, ou com os link socket.io, poderia me ajudar?

Deixe um comentário para Francisco de Assis Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *