Biblioteca Arduino: Robô com NodeMCU controlado via celular – Parte 2 13

Em nosso artigo anterior sobre bibliotecas Arduino, mostramos o que é uma biblioteca Arduino e como criar a sua própria biblioteca. Ao longo do tutorial desenvolvemos uma biblioteca específica para uso do driver de motor NodeMCU. Neste post iremos mostrar como utilizar na prática a biblioteca NodeMotorDriver.h, agora em um projeto real de um robô com NodeMCU controlado via celular.

Robô com NodeMCU

Componentes do Robô

O robô com NodeMCU foi construído com os seguintes componentes:

A alimentação dos motores poderá ser feita por 4 pilhas AA ou outras baterias de sua preferência até 12V.

Esquema de ligação

Os motores podem ser alimentados através de 4 pilhas AA ou de outras baterias de sua preferência até 12V. A alimentação do NodeMCU e driver deve ser regulada em 5V apenas. Para isso utilize um regulador de tensão ou um powerbank 5V.

Circuito Robô

Controle do robô com NodeMCU via celular

O controle do robô será feito através do celular, acessando uma página web fornecida pelo NodeMCU. Para isso, o NodeMCU precisa atuar como um Hotspot WiFi e servir um arquivo HTML que será exibido no celular.

A página web consiste de um joystick feito em JavaScript que será usado para movimentação do robô. Esse joystick é o nippleJS e o código fonte e instruções de uso podem ser encontrados no GitHub.

Aplicativo de controle

A página Web enviará as informações de posição do joystick para o NodeMCU usando protocolo HTTP através do XMLHTTPRequest. Já vimos a utilização dessa técnica no post Controlando fitas de LED via WiFi com ESP8266.

A página Web (index.html) será salva na flash do NodeMCU e será “servida” para o celular (cliente). Também já aprendemos essa técnica de como utilizar a memória flash do NodeMCU para salvar arquivos no post ESP8266: Gravando dados permanentes na memória flash.

Veja o código completo da página web abaixo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NodeMCU Motor Driver</title>
  <link rel="stylesheet" href="/materialize.min.css">
  <link rel="manifest" href="/manifest.json">
  <script src="/nipplejs.min.js"></script>
  <script src="/materialize.min.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
  <div class="container">
    <h2 id="title" class="light center">NodeMCU Robot</h2>
  </div>
  <div>
    <div id="joystick" style="position: absolute; width:100%; height:100%"></div>
  </div>
  <script>
    var xhttp = new XMLHttpRequest();
    var joystick = nipplejs.create({
      zone: document.getElementById('joystick'),
      mode: 'static',
      position: {
        left: '50%',
        top: '50%'
      },
      color: '#34629C',
      size: 200
    });
    joystick.on('move', function (evt, data) {
      var url = "http://192.168.4.1/jsdata";
      xhttp.open("POST", url);
      xhttp.send(JSON.stringify(data));
    }).on('end', function (evt, data) {
      var url = "http://192.168.4.1/jsdata";
      xhttp.open("POST", url);
      xhttp.send(JSON.stringify(evt));
    });
  </script>
</body>
</html>

Note que, no cabeçalho do HTML, temos alguns arquivos adicionais: manifest.json, materialize.min.css, materialize.min.js e nipple.min.js. Todos eles também estarão armazenados na flash do NodeMCU. Para isso, esses arquivos devem ser colocados na pasta ‘data’ e gravados através da IDE Arduino. Mais a frente veremos como eles são enviados aos clientes.

manifest.json

Esse arquivo é utilizado para indicar ao Chrome que aquela página web deve ser travada como um aplicativo web. Assim podemos criar um ícone para nosso aplicativo na área de trabalho do celular. Aprenda mais sobre como usar o arquivo manifest.json para criação de aplicativos web. Não é um arquivo obrigatório para o funcionamento do projeto.

materialize.min.js e materialize.min.css

São arquivos utilizados para dar um design estilo Material ao nosso aplicativo. Veja como utilizar esse estilo e seus componentes. Não são arquivos obrigatórios para o funcionamento do projeto.

nipple.min.js

É o arquivo que contém todo código javascript para utilização do joystick. Esse é um arquivo obrigatório.

Além de HTML básico, a página web contém um trecho em JavaScript entre as linhas 19 e 40. Primeiramente criamos um objeto XMLHTTPRequest. Logo depois criamos um joystick estático configurando posição, cor e tamanho. Então, quando há movimentação do joystick, fazemos uma requisição post no IP do NodeMCU contendo um JSON com a posição X e Y do joystick. O endpoint da requisição é ‘/jsdata’.

Caso queira baixar todos os arquivos da aplicação, você pode encontrá-los aqui.

Programação do Robô

O código do robô consiste em criar um hotspot WiFi com SSID e senha, servir os arquivos web para os clientes que fizerem conexão e esperar pelos dados JSON de movimentação do joystick. Então, através da nossa biblioteca NodeMotorDriver, fazer a movimentação dos motores. Na função startServer() são servidos todos os arquivos estáticos para os clientes que conectam ao NodeMCU.

Veja o código completo abaixo:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <FS.h>
#include <ArduinoJson.h>
#include <NodeMotorDriver.h>

const char* ssid = "NodeMCU Robot";
const char* password = "nodemcurobot";

int led = LED_BUILTIN;

ESP8266WebServer server(80);

NodeMotorDriver nodeMotorDriver(5, 0, 4, 2);

void setup() {
  pinMode(led, OUTPUT);
  
  Serial.begin(9600);

  startWiFi();

  SPIFFS.begin();
  
  startServer();
}

void loop() {
  server.handleClient();
}

void startWiFi() {
  WiFi.softAP(ssid, password);
  Serial.print("Server IP address: ");
  Serial.println(WiFi.softAPIP());
}

void startServer() {
  // aguarda por requisições na URL raiz "/" ou "/jsdata"
  server.serveStatic("/", SPIFFS, "/index.html");
  server.serveStatic("/materialize.min.js", SPIFFS, "/materialize.min.js");
  server.serveStatic("/materialize.min.css", SPIFFS, "/materialize.min.css");
  server.serveStatic("/manifest.json", SPIFFS, "/manifest.json");
  server.serveStatic("/nipplejs.min.js", SPIFFS, "/nipplejs.min.js");
  server.serveStatic("/robot.png", SPIFFS, "/robot.png");
  server.on("/jsdata", handleJsData);  
  server.begin();
}

// recebe os dados do Joystick, parseia dados JSON e chama função de movimentação dos motores
void handleJsData() {
  String data = server.arg("plain");
  server.send(204,"");  
  DynamicJsonBuffer jBuffer(4000);
  JsonObject& root = jBuffer.parseObject(data);
  int dist = root["distance"];
  String angle = root["direction"]["angle"];
  String state = root["type"];
  Serial.println(dist);
  Serial.println(state);
  moveMotors(dist, angle, state);
  digitalWrite(led, !digitalRead(led));  
}

// move motores para determinada posição
void moveMotors(int dist, String angle, String state) {
  if(state == "end") {
    nodeMotorDriver.stop();     
  } else {      
    if(angle == "up") nodeMotorDriver.goForward(map(dist, 0, 100, 0, 1024));
    if(angle == "down") nodeMotorDriver.goBackward(map(dist, 0, 100, 0, 1024));
    if(angle == "left") nodeMotorDriver.turnLeft(map(dist, 0, 100, 0, 1024));
    if(angle == "right") nodeMotorDriver.turnRight(map(dist, 0, 100, 0, 1024));
  }   
}

Note que nas linhas 6, 15, 71-74, fizemos uso da nossa biblioteca NodeMotorDriver.

Funcionamento do Robô

Após montado o robô e gravado o código no NodeMCU, basta conectar o celular na rede WiFi do NodeMCU, abrir o chrome mobile no IP do NodeMCU e movimentar o joystick na tela! Veja abaixo o robô com NodeMCU em funcionamento.

Funcionamento do Robô

Agora você já tem um bom conhecimento base para criar suas próprias bibliotecas Arduino e aplicá-las em projetos reais. Criar novas bibliotecas para Arduino é também uma ótima forma de contribuir com essa ferramenta de ensino. Não se esqueça de colocar sua biblioteca no GitHub para começar a ganhar estrelas. Quanto mais estrelas, mais popular sua biblioteca será mundialmente!

Veja também esse vídeo no canal WRKits mostrando como criar uma biblioteca para o sensor de temperatura LM35.

 

Gostou de criar seu robô com NodeMCU? Ajude-nos a melhorar o blog comentando abaixo sobre este tutorial. Não se esqueça de postar seus projetos em nosso Fórum!

Posts Relacionados

Deixe uma resposta

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

13 Comentários

  1. Para usar um ESP32 mudaria apenas a biblioteca do microprocessador?

    1. Mudariam várias coisas. A começar pela biblioteca ESP8266WiFi.h não é compatível com ESP32. As bibliotecas de WiFi para ESP32 seriam essas: https://github.com/espressif/arduino-esp32/tree/master/libraries/WiFi/examples

      Também não é possível utilizar esse driver de motor com ESP32 pois a placa é maior.

      Mas está aí um bom projeto para você realizar e postar em nosso fórum compartilhando com a comunidade, o que acha?

      1. Mas talvez fazendo alguns jumpers funcione, correto?

        1. Pode ser que sim pode ser que não.

          Se fosse utilizar jumpers eu usaria algum módulo de controle de motores que não é específico de nenhuma placa. Um módulo genérico que funcione com qualquer placa.

          Por exemplo este daqui: https://www.filipeflop.com/produto/driver-motor-ponte-h-l298n/

      2. Eu fiz um Robô usando ESP32 e a ponte H L298n controlado via Wifi usando o Joystick do app Blynk. Como faz para eu criar um artigo para ser publicado aqui?

        1. Olá Jean!

          Eu vou ver com o pessoal aqui como poderíamos fazer isso, porque infelizmente já encerramos as inscrições para ser articulista aqui conosco. Mas seu projeto me parece ser bem interessante.

          Enquanto isso, você pode me mandar no e-mail uma prévia de como seria o artigo? Manda para andre.rocha@filipeflop.com

          Você já deu uma olhadinha no nosso fórum? Pode ser interessante publicar alguns projetos por lá e tirar eventuais dúvidas também https://www.filipeflop.com/forum/

          Abraços!

          André Rocha – Equipe FILIPEFLOP

  2. Cara, é um parto a programação, mas nasceu com saúde, isso é o que importa.
    https://youtu.be/dZuxf7kYqB8

    1. Hehehe

      Que legal o projeto Edmar! Muito bom ver o pessoal reproduzindo e aprendendo com nossos projetos.

      Ficou show, parabéns!

    2. Também curti esse projeto 😀

      Vou compartilhar com o pessoal aqui!

  3. Que interessante! Encontro todos os componentes no site da Filipeflop? Mas não sei se terei capacidade para executar esse projeto kkkk

    1. Capacidade todos temos Bruno! Basta ter força de vontade e disposição a aprender.

      De componentes temos quase todos.
      A bateria de LiPo por exemplo não temos.
      Mas temos o chassi, motores, NodeMCU, driver motor.
      O mini regulador de tensão USB que usei creio que em breve teremos em estoque.

  4. Consigo utilizar o giroscópio do celular pra controlar?