O documento descreve um projeto que usa um ESP8266 para gerar gráficos em tempo real de dados recebidos via websocket. O ESP8266 conecta-se à internet wifi e inicia um servidor websocket para receber dados de um sensor analógico, enviando-os ao site. O site se conecta ao ESP8266 via websocket e plota os dados em um gráfico.

1. OsciloscópioOnline
Ou a história de como eu usei um Esp8266 pra gerar
gráficos em tempo real
Professor: Ilton L. Barbacena
Aluno: José Ronaldo de Souza Junior
Matrícula: 20122610134

2. Introdução
O trabalho aqui explanado foi idealizado como um projeto
final da matéria de Microcontroladores, a ideia central era criar um
serviço de osciloscópio online, os dados seriam recebidos via
webSocket e transformados em um gráfico;

3. O que é a ESP?
O Esp8266 é um SoC desenvolvido para transmissão e
recebimento de dados viaWiFi. O Esp pode assumir o papel de
consumidor ou servidor dentro de um sistema, sua interface
programável abre uma gama de possibilidades dentro da
engenharia e informática.A possibilidade que mais tem sido usada é
a de internet das coisas, incluir controladores para objetos do dia-a-
dia;

4. Materiais
utilizados
Para esse trabalho foi utilizada a placa daWeemos D1, que
possui já acoplada um chip esp. Para programar a placa foi utilizado
o Arduino IDE.
Um sensor analógico também foi incluído.

5. Como
funciona
 ESP:
 Conecta-se a internetWiFi;
 Inicia um servidor webSocket na porta 81 do ip local;
 Inicia um loop aguardando informações da webSocket;
 Quando a informação é recebida é enviado um novo pacote com as
informações do sensor e tempo decorrido desde a última
transmissão;
 Reinicia o loop

6. Como
Funciona
 Site:
 Aguarda o preenchimento dos dados no formulário;
 Conecta-se ao serviço webSocket do ESP;
 Envia ping e informações de conexão;
 Aguarda a confirmação;
 Envia “okpct”;
 Trata os dados recebidos, plota o gráfico e envia novamente ‘okpct’.

7. Como
funciona
Conecta a
WiFi
Inicia
Websocket
Aguarda
Okpct
Envia
informações
do sensor
Esp:
Aguarda o
preenchimento dos
dados no formulário
Conecta-se ao
serviço webSocket
do ESP
Envia ping e
informações de
conexão
Aguarda a
confirmação
Envia “okpct”
Trata os dados
recebidos, plota o
gráfico e envia
novamente ‘okpct’
Site:

8. Links para o
Código noGIT
 https://github.com/zeRonaldo/projeto-final-micro/tree/master

9. Referências
 AdySan/ESPSocket. Disponível em: <https://github.com/adysan/espsocket/tree/master/espsocket>. Acesso em: 6 apr.
2016.
 ESP8266 - On Websockets, mdns, OTA and LEDS. Disponível em: <http://www.whatimade.today/esp8266-on-
websockets-mdns-ota-and-leds/>. Acesso em: 6 apr. 2016.
 ESP8266 Websocket server RGB LED controller. Disponível em:
<http://www.instructables.com/id/esp8266websockets-rgb-led-controller/>. Acesso em: 6 apr. 2016.
 ESP8266 Websocket server RGB LED controller. Disponível em:
<http://www.instructables.com/id/esp8266websockets-rgb-led-controller/>. Acesso em: 6 apr. 2016.
 HTML5 Canvas Bezier Curve Tutorial. Disponível em: <http://www.html5canvastutorials.com/tutorials/html5-canvas-
bezier-curves/>. Acesso em: 6 apr. 2016.
 HTML5 WebSockets. Disponível em: <http://www.tutorialspoint.com/html5/html5_websocket.htm>. Acesso em: 6 apr.
2016.
 WebSocket でスマホから Arduino化 WROOM のLEDを調光してみる. Disponível em: <https://www.mgo-
tec.com/blog-entry-websocket-wroom03.html>. Acesso em: 6 apr. 2016.
 Writing WebSocket client applications. Disponível em: <https://developer.mozilla.org/en-
us/docs/web/api/websockets_api/writing_websocket_client_applications>. Acesso em: 6 apr. 2016.
 amiravni/ESP8266_12VLEDS_Websocket_OTA. Disponível em:
<https://github.com/amiravni/esp8266_12vleds_websocket_ota/tree/master/webpage>. Acesso em: 6 apr. 2016.
 B. L. O. G. S. F. ESP8266 wifi Part2 - Getting &amp; Sending data via Internet. Disponível em:
<https://www.youtube.com/watch?v=j1zdtobzin0>. Acesso em: 6 apr. 2016.
 brandenhall/Arduino-Websocket. Disponível em: <https://github.com/brandenhall/arduino-
websocket/tree/master/examples/websocketclient_demo>. Acesso em: 6 apr. 2016.
 C. U. R. S. O. A. R. D. U. I. N. O. Curso Arduino Express Aula 14 - ESP8266 Parte 2/2 (seriallink.com.br). Disponível em:
<https://www.youtube.com/watch?v=c4u_jbbvzxe>. Acesso em: 6 apr. 2016.
 P. A. S. T. O. R. H. U. D. S. O. N. ESP8266 Arduino IDE HowTo. Disponível em: <https://www.youtube.com/watch?v=-
azu8yqhlhw>. Acesso em: 6 apr. 2016.