Controle Web de Braço Robótico com a Vespa

Introdução

Neste tutorial você verá como controlar a movimentação do RoboARM através do seu celular, graças à Vespa. Para isso, você montará o RoboARM com a Vespa, montará o circuito elétrico, e então verá os passos de conexão para acessar a página de controle.

Lista de Materiais

Lista completa de produtos

comprar

Vespa

R$149.90

Braço Robótico RoboARM

R$199.90

Fonte Chaveada 9V 2A

R$25.00

Adaptador P4 Fêmea - Borne

R$3.90

Jumpers Macho-Macho x40 Unidades

R$7.90

Atenção: antes de prosseguir, é necessário seguir os passos de configurações iniciais com a Vespa, pois eles ensinam a instalar as ferramentas indispensáveis para o uso da placa.

Montagem Mecânica

O primeiro passo para desenvolver o projeto deste tutorial é fazer a montagem mecânica do RoboARM e fixar a Vespa sobre a sua base. Para isso, siga o manual de montagem do RoboARM através do botão a seguir.

Manual de Montagem RoboARM

A Vespa possui o mesmo padrão de furação de fixação que as placas da plataforma Arduino UNO, portanto aproveite a furação desta plataforma disponível na base da estrutura para fixá-la.

Montagem Eletrônica

Com a parte mecânica pronta, monte o circuito da imagem a seguir com a sua Vespa.

Observação: os servo motores devem ser conectados diretamente na placa pelos terminais S1 a S4. Apenas atente-se à polaridade.

Para fixar os jumpers entre o adaptador P4 e a Vespa, é necessário abrir e fechar os contatos dos bornes removíveis da placa e do borne do adaptador, como mostrado no GIF abaixo.

Fixação dos Fios no Borne

Programação

Agora que o robô está fisicamente montado, temos que gravar o código que será utilizado para o seu controle.

Bibliotecas

Antes de carregar o código de exemplo para a placa, temos que instalar algumas bibliotecas que são utilizadas pelo código para que a placa execute o que desejamos. Para isso, baixe as bibliotecas necessárias através do botão abaixo.

Biblioteca ArduinoJson Biblioteca AsyncTCP Biblioteca ESPAsyncWebServer

Assim que os arquivos estiverem baixados, siga o caminho da imagem a seguir na Arduino IDE para instalar as bibliotecas pelo arquivo compactado.

caminho_instalacao_bibliotecas — Caminho para a Instalação das Bibliotecas

Ao selecionar esta opção, será aberta uma janela com os diretórios do seu computador. Navegue até o diretório em que os arquivos compactados (ZIP) foram salvos e então clique duas vezes sobre uma das pastas. Isso fará com que a biblioteca contida no arquivo selecionado seja instalada na sua IDE.

Como precisamos das três bibliotecas disponíveis acima para o funcionamento do código, é necessário repetir esse procedimento para os outros dois arquivos baixados também.

Código

Com as bibliotecas instaladas, carregue o código a seguir para a sua Vespa. Lembrando que é necessário seguir os passos de configurações iniciais da placa para instalar todas as ferramentas necessárias para o seu funcionamento, assim como para entender como carregar códigos nela.

/*******************************************************************************
* Controle web de um braco robotico com a Vespa por WebSocket
* (v1.0 - 26/10/2021)
*
* Copyright 2021 RoboCore.
* Interface web escrita por Lenz (26/10/2021).
* Programa do ESP escrito por Francois (26/10/2021).
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version (<https://www.gnu.org/licenses/>).
*******************************************************************************/

// --------------------------------------------------
// Bibliotecas

#include <WiFi.h>
#include <AsyncTCP.h> // https://github.com/me-no-dev/AsyncTCP
#include <ESPAsyncWebServer.h> // https://github.com/me-no-dev/ESPAsyncWebServer
#include <ArduinoJson.h> // https://arduinojson.org/

#include <RoboCore_Vespa.h>

// --------------------------------------------------
// Variaveis

// web server assincrono na porta 80
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

// LED
const uint8_t PIN_LED = 15;

// JSON aliases
const char *ALIAS_POSICAO = "posicao";
const char *ALIAS_SERVO = "servo";
const char *ALIAS_VBAT = "vbat";

// variaveis da Vespa
VespaServo servos[4];
const uint16_t SERVO_MAX = 2200;
const uint16_t SERVO_MIN = 700;
VespaBattery vbat;
const uint32_t TEMPO_ATUALIZACAO_VBAT = 5000; // [ms]
uint32_t timeout_vbat;

// --------------------------------------------------
// Pagina web principal

const char index_html[] PROGMEM = R"rawliteral(
,<!DOCTYPE html>
<html>
<head>
    <title>
        RoboCore RoboARM Web
    </title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>

        html, body {width: 100%; height: 100%; padding: 0; margin: 0; overscroll-behavior: none;}
        
        body {
          overflow: hidden;
          -moz-user-select: none; 
          -webkit-user-select: none;
          -ms-user-select:none; 
          user-select:none;
          -o-user-select:none;
      }

      .container {
          height: 26px;
          width: 50px;
          position: relative;
      }
      .container * {
          position: absolute;
      }

      .battery_warning {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 20px;
          width: 40px;
          border: 2px solid black;
          border-radius: 5px;
          padding: 1px;
      }
      .battery_warning::before {
          content: '';
          position: absolute;
          height: 13px;
          width: 3px;
          background: black;
          left: 44px;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 0 3px 3px 0;
      }
      
      .battery {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 20px;
          width: 40px;
          border: 2px solid #F1F1F1;
          border-radius: 5px;
          padding: 1px;
      }
      .battery::before {
          content: '';
          position: absolute;
          height: 13px;
          width: 3px;
          background: #F1F1F1;
          left: 44px;
          top: 50%;
          transform: translateY(-50%);
          border-radius: 0 3px 3px 0;
      }
      .part {
          background: #0F0;
          top: 1px;
          left: 1px;
          bottom: 1px;
          border-radius: 3px;
      }

      @keyframes animate {
          0% {
            width: 0%;
            background: #F00;
        }
        50% {
            width: 48%;
            background:orange;
        }
        100% {
            width: 95%;
            background: #0F0;
        }
    }

    .slidecontainer {
      width: 100%; /* Width of the outside container */
  }

  /* The slider itself */
  .slider {
      -webkit-appearance: none;  /* Override default CSS styles */
      appearance: none;
      width: calc(100% - 5px); /* Full-width */
      height: 50px; /* Specified height */
      background: #ECE5E5; /* Grey background */
      outline: none; /* Remove outline */
      opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
      -webkit-transition: .2s; /* 0.2 seconds transition on hover */
      transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
      opacity: 1; /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
      -webkit-appearance: none; /* Override default look */
      appearance: none;
      width: 50px; /* Set a specific slider handle width */
      height: 50px; /* Slider handle height */
      background: lightgray; /* gray background */
      cursor: pointer; /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
      width: 50px; /* Set a specific slider handle width */
      height: 50px; /* Slider handle height */
      background: #04AA6D; /* Green background */
      cursor: pointer; /* Cursor on hover */
  }
  .slider_vertical_container {
    height: 150px; overflow: hidden; border: 0px solid; width: 50px; position: relative;
}
.slider_vertical {
    transform: rotate(270deg); position: absolute; top: 50px; left: -50px; width: 150px;
}

</style>
</head>

<body style="height: 100%;  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;">
    <div style="display: none; width: 100%; height: 100%; position: absolute; align-content: center; justify-content: center; align-items: center; z-index: 10;" onclick="reinicia();" id="ad">
        <img src="https://robocore-eventos.s3.sa-east-1.amazonaws.com/public/explorer_ad.jpg" style="width: 100%; height: 100%;" alt="alt"/>
    </div>
    <div style="display: none; width: 100%; height: 100%; position: absolute; align-content: center; justify-content: center; align-items: center; z-index: 10;" id="bat">
        <div style="background-color: yellow; width: 100%; display: flex; align-content: center; justify-content: center; align-items: center;">
            <div class="container" style="margin-right: 10px;">
                <div class="battery_warning">
                    <div class="part"></div>
                </div>
            </div>
            <h1>Bateria fraca</h1>
        </div>
    </div>
    <div style="line-height: 26px; background-color: black; padding: 10px; padding-bottom: 0px;">
        <div class="container" style="float: right; margin-right: 10px;">
            <div class="battery">
                <div id="lbat" class="part"></div>
            </div>
        </div>
        <div style="float: right; color: white; font-size: 18px; line-height: 26px; margin-right: 5px;">
            <span id="vbat">0</span> V
        </div>

        <div style="width: 100%; border: 0px solid red; text-align: center;">

            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            height="30px" viewBox="0 0 1420 225" xml:space="preserve">
            <g id="Layer_1" fill="#f0be00">
                <g>
                    <path id="Robo" fill-rule="evenodd" clip-rule="evenodd" d="M175.7,94.9c0,11.7-6.2,20.2-18.5,25.6c-9.8,4-21,5.9-33.8,5.9H84.5
                    l78.8,33.5c4.2,1.8,6.3,4.6,6.3,8.2c0,5.3-4.6,8-13.9,8c-3.7,0-6.6-0.3-8.7-0.8l-107.6-46v38.4c0,5.6-2.8,8.4-8.3,8.4
                    c-5.9,0-9.3-0.3-10.2-0.7c-3.4-1.1-5.1-3.6-5.1-7.7V54.8c0-5.6,2.8-8.3,8.3-8.3h95c14.7,0,26.8,1.9,36.3,5.7
                    c13.5,5.5,20.3,14.5,20.3,27V94.9L175.7,94.9z M152.1,95.1V78.7c0-8.7-11.1-13-33.1-13H39.4v41.5h83.8
                    C142.4,107.2,152.1,103.2,152.1,95.1L152.1,95.1z M343.9,141.2c0,23.2-20,34.7-60,34.7h-36.8c-16.2,0-29-2.1-38.3-6.2
                    c-14.3-5.8-21.5-15.3-21.5-28.5V81.6c0-23.4,19.9-35.1,59.8-35.1h36.8c18.6,0,31.8,1.6,39.4,4.9c13.7,5.3,20.6,15.4,20.6,30.2
                    V141.2L343.9,141.2z M320.3,140.6V82.1c0-10.9-11.9-16.4-35.8-16.4H247c-24.1,0-36.1,5.4-36.1,16.4v58.5c0,10.6,12,15.8,36.1,15.8
                    h37.5C308.4,156.5,320.3,151.2,320.3,140.6L320.3,140.6z M512.2,141.5c0,12.4-5.9,21.6-17.6,27.5c-9.1,4.6-20.5,6.9-34.2,6.9
                    H360.2c-5.5,0-8.3-2.8-8.3-8.4V54.8c0-5.5,2.8-8.3,8.3-8.3H459c8.8,0,16.9,0.7,24.2,2.1c7.9,1.9,14.5,5.4,20,10.5
                    c6,5.7,9,12.4,9,19.9c0,7.4-0.3,12.7-0.8,16c-0.1,0.6-0.6,1.7-1.4,3.2c-0.8,1.5-1.9,3.3-3.2,5.6c-2.6,4.5-3.9,7-3.9,7.5
                    c0,0.4,1.3,2.6,3.9,6.7c1.3,2.1,2.4,3.8,3.2,5.2c0.8,1.4,1.2,2.5,1.4,3.3c0.3,1.1,0.5,2.9,0.6,5.4
                    C512.1,134.4,512.2,137.6,512.2,141.5L512.2,141.5z M489.2,90.1c0-2.4-0.2-5.9-0.7-10.8c-0.7-9-10.9-13.5-30.6-13.5H376v36.3h82.8
                    C479.1,102.1,489.2,98.1,489.2,90.1L489.2,90.1z M488.5,134.9c0-8.9-9.8-13.4-29.2-13.4h-83.8v35h82.2c19,0,29.3-4.1,30.6-12.2
                    c0.1-0.4,0.1-1.4,0.2-3C488.5,139.7,488.5,137.6,488.5,134.9L488.5,134.9z M676.8,141.2c0,23.2-20,34.7-60,34.7H580
                    c-16.2,0-29-2.1-38.3-6.2c-14.3-5.8-21.5-15.3-21.5-28.5V81.6c0-23.4,19.9-35.1,59.8-35.1h36.8c18.6,0,31.8,1.6,39.4,4.9
                    c13.7,5.3,20.6,15.4,20.6,30.2V141.2L676.8,141.2z M653.1,140.6V82.1c0-10.9-11.9-16.4-35.8-16.4h-37.4
                    c-24.1,0-36.1,5.4-36.1,16.4v58.5c0,10.6,12,15.8,36.1,15.8h37.5C641.2,156.5,653.1,151.2,653.1,140.6z"/>
                    <polygon id="Bolt" fill-rule="evenodd" clip-rule="evenodd" points="724,11.6 765,11.6 726,104.8 779.6,76.9 750.7,189.8 
                    765,182.8 733.6,230.4 722,172.8 732.9,184 744.9,111.7 689.2,140.7     "/>
                    <path id="Core" fill-rule="evenodd" clip-rule="evenodd" d="M935.5,57.4c0,5.6-2.8,8.4-8.3,8.4h-84c-20.4,0-30.6,4.1-30.6,12.2
                    v64.1c0,9.6,11.3,14.4,33.9,14.4h80.2c5.8,0,8.6,3.2,8.6,9.7c0,6.5-2.9,9.8-8.6,9.8h-80.2c-10.8,0-18.6-0.4-23.4-1.3
                    c-5.2-1-10.6-2.9-16.1-5.7c-6.4-3.3-10.8-6.8-13.4-10.4c-3-4.1-4.6-9.5-4.6-16.1V78.1c0-8.2,3.7-15.1,11.1-20.8
                    c6.2-4.8,13.8-7.9,22.7-9.6c2.3-0.4,5-0.6,8.3-0.8c3.3-0.2,7.1-0.3,11.6-0.3h84.5C932.7,46.5,935.5,50.2,935.5,57.4L935.5,57.4z
                    M1101.8,141.2c0,23.2-20,34.7-60,34.7H1005c-16.2,0-29-2.1-38.3-6.2c-14.3-5.8-21.5-15.3-21.5-28.5V81.6
                    c0-23.4,19.9-35.1,59.8-35.1h36.8c18.6,0,31.8,1.6,39.4,4.9c13.7,5.3,20.6,15.4,20.6,30.2V141.2L1101.8,141.2z M1078.1,140.6V82.1
                    c0-10.9-11.9-16.4-35.8-16.4h-37.4c-24.1,0-36.1,5.4-36.1,16.4v58.5c0,10.6,12,15.8,36.1,15.8h37.5
                    C1066.2,156.5,1078.1,151.2,1078.1,140.6L1078.1,140.6z M1267.8,94.9c0,11.7-6.2,20.2-18.5,25.6c-9.8,4-21,5.9-33.8,5.9h-38.9
                    l78.8,33.5c4.2,1.8,6.3,4.6,6.3,8.2c0,5.3-4.6,8-13.9,8c-3.7,0-6.6-0.3-8.7-0.8l-107.6-46v38.4c0,5.6-2.8,8.4-8.3,8.4
                    c-5.9,0-9.3-0.3-10.2-0.7c-3.4-1.1-5.1-3.6-5.1-7.7V54.8c0-5.6,2.8-8.3,8.3-8.3h95c14.7,0,26.8,1.9,36.3,5.7
                    c13.5,5.5,20.3,14.5,20.3,27V94.9L1267.8,94.9z M1244.2,95.1V78.7c0-8.7-11.1-13-33.1-13h-79.6v41.5h83.8
                    C1234.6,107.2,1244.2,103.2,1244.2,95.1L1244.2,95.1z M1416.5,111.2c0,6.9-2.9,10.3-8.8,10.3h-113.6v21.3
                    c0,9.1,10.1,13.7,30.3,13.7h83.3c5.5,0,8.3,2.8,8.3,8.4c0,7.4-2.8,11.1-8.3,11.1h-84.4c-12.3,0-23.6-2.2-33.9-6.6
                    c-12.6-5.7-18.9-14.3-18.9-25.7V79.5c0-6.2,2.1-11.8,6.3-16.8c9.1-10.8,25.3-16.1,48.6-16.1h23.1c5.4,0,8.2,3.6,8.2,10.8
                    c0,5.6-2.8,8.4-8.2,8.4h-3.4h-2.1h-1.2c-0.8,0-1.2,0-1.3-0.1c-1.8-0.1-3.3-0.1-4.6-0.1c-1.3,0-2.3-0.1-3.2-0.1
                    c-25.9,0-38.8,4.7-38.8,14v22.6h113.9C1413.6,102.1,1416.5,105.1,1416.5,111.2z"/>
                </g>
            </g>
        </svg>
    </div>

</div>

<div style="color:rgb(128, 128, 128); font-size: medium; text-align: left; width: 300px; border: 0px solid red; position: absolute; top: 20px; left: 0px; display: none;">
    DEBUG: S1: <span id="ds1">0</span> | 
    S2: <span id="ds2">0</span> | 
    S3: <span id="ds3">0</span> |
    S4: <span id="ds4">0</span>
</div>

<div style="display: table; width:100%; height: calc(100% - 80px); border: 0px solid green; font-size: 12px; color: rgb(157, 150, 142);">
    <div style="display: table-cell; vertical-align: middle;">
        <div style="display: flex; align-items: center; justify-content: space-evenly; align-content: center; flex-direction: row; flex-wrap: wrap;">
            <div class="slidecontainer" style="display: flex; align-items: center; justify-content: space-evenly; align-content: center; flex-direction: row; flex-wrap: wrap; max-width: 260px; margin: 10px;">
                <div>GARRA</div>
                <div style="width: 100%; white-space: nowrap;">
                    <input type="range" min="0" max="180" value="90" class="slider" style="width: calc(50% - 5px);" id="s1">
                    <input type="range" min="0" max="180" value="90" class="slider" style="width: calc(50% - 5px);" id="s1c">
                </div>
                <div style="width: 50px; text-align: right;">BRAÇO<br>ALTURA</div>
                <div class="slider_vertical_container">
                    <input type="range" min="0" max="180" value="90" class="slider slider_vertical" id="s2">
                </div>
                
                <div class="slider_vertical_container">
                    <input type="range" min="0" max="180" value="90" class="slider slider_vertical" style="transform: rotate(90deg);" id="s3">
                </div>
                <div style="width: 50px;">BRAÇO<br>DISTÂNCIA</div>
                <input type="range" min="0" max="180" value="90" class="slider" id="s4">
                <div>BASE</div>
            </div>
        </div>
    </div>
</div>

<script>
    function sliderMirror(from,to) {
        document.getElementById(to).value = 180 - document.getElementById(from).value;
    }
    
    var connection = new WebSocket(`ws://${window.location.hostname}/ws`);
    let lbat = 0;
    
    connection.onopen = function () {
      console.log('Connection opened to ' + window.location.hostname);
  };
  connection.onerror = function (error) {
      console.log('WebSocket Error ' + error);
      alert('WebSocket Error #' + error);
  };
  connection.onmessage = function (e) {
      console.log('Server: ' + e.data);
      const data = JSON.parse(e.data);

      if (data["vbat"]){
        document.getElementById("vbat").innerText = (data["vbat"] / 1000).toFixed(1);
        lbat = (data["vbat"] * 100 / 8400).toFixed(0);
        if(lbat > 100){ lbat = 100; }
        if(lbat < 2){ lbat = 2; }
        console.log("lbat=" + lbat); // debug
        document.getElementById("lbat").style.width = lbat + '%';
        if (lbat < 20){
          document.getElementById("lbat").style.backgroundColor = "#F00";
      } else if (lbat < 70){
          document.getElementById("lbat").style.backgroundColor = "orange";
      } else {
          document.getElementById("lbat").style.backgroundColor = "#0F0";
      }
  }
};

function send_slider(slider_id, value){
  var data = {'servo': slider_id, 'posicao': parseInt(value)};
  data = JSON.stringify(data);
  console.log('Slider data: ', data);
  connection.send(data);
}

</script>

<script>

    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");
    var s3 = document.getElementById("s3");
    var s4 = document.getElementById("s4");

    document.getElementById('s1').addEventListener('input', (e) => { sliderMirror('s1','s1c'); send_slider(1, e.target.value);  });
    document.getElementById('s1c').addEventListener('input', (e) => { sliderMirror('s1c','s1'); send_slider(1, s1.value); });
    document.getElementById('s2').addEventListener('input', (e) => { send_slider(2, e.target.value); });
    document.getElementById('s3').addEventListener('input', (e) => { send_slider(3, e.target.value); });
    document.getElementById('s4').addEventListener('input', (e) => { send_slider(4, e.target.value); });

    document.addEventListener("input", function() {
        document.getElementById("ds1").innerHTML = s1.value;
        document.getElementById("ds2").innerHTML = s2.value;
        document.getElementById("ds3").innerHTML = s3.value;
        document.getElementById("ds4").innerHTML = s4.value;
    }, false);

</script>
</body>
</html>
)rawliteral";

// --------------------------------------------------
// Prototipos

void configurar_servidor_web(void);
void handleWebSocketMessage(void *, uint8_t *, size_t);
void onEvent(AsyncWebSocket *, AsyncWebSocketClient *, AwsEventType,
             void *, uint8_t *, size_t);

// --------------------------------------------------
// --------------------------------------------------

void setup(){
  // configura a comunicacao serial
  Serial.begin(115200);
  Serial.println("RoboCore - Vespa RoboARM");
  Serial.println("\t(v1.0 - 26/10/21)\n");

  // configura o LED
  pinMode(PIN_LED, OUTPUT);
  digitalWrite(PIN_LED, LOW);

  // configura os servos
  servos[0].attach(VESPA_SERVO_S1, SERVO_MIN, SERVO_MAX);
  servos[1].attach(VESPA_SERVO_S2, SERVO_MIN, SERVO_MAX);
  servos[2].attach(VESPA_SERVO_S3, SERVO_MIN, SERVO_MAX);
  servos[3].attach(VESPA_SERVO_S4, SERVO_MIN, SERVO_MAX);

  // configura o ponto de acesso (Access Point)
  Serial.print("Configurando a rede Wi-Fi... ");
  const char *mac = WiFi.macAddress().c_str(); // obtem o MAC
  char ssid[] = "Vespa-xxxxx"; // mascara do SSID (ate 63 caracteres)
  char *senha = "robocore"; // senha padrao da rede (no minimo 8 caracteres)
  // atualiza o SSID em funcao do MAC
  for(uint8_t i=6 ; i < 11 ; i++){
    ssid[i] = mac[i+6];
  }
  if(!WiFi.softAP(ssid, senha)){
    Serial.println("ERRO");
    // trava a execucao
    while(1){
      digitalWrite(PIN_LED, HIGH);
      delay(100);
      digitalWrite(PIN_LED, LOW);
      delay(100);
    }
  }
  Serial.println("OK");
  Serial.printf("A rede \"%s\" foi gerada\n", ssid);
  Serial.print("IP de acesso: ");
  Serial.println(WiFi.softAPIP());

  // configura e iniciar o servidor web
  configurar_servidor_web();
  server.begin();
  Serial.println("Servidor iniciado\n");
}

// --------------------------------------------------

void loop() {
  // le a tensao da bateria e envia para o cliente
  if(millis() > timeout_vbat){
    // atualiza se houver clientes conectados
    if(ws.count() > 0){
      // le a tensao da bateria
      uint32_t tensao = vbat.readVoltage();
      
      // cria a mensagem
      const int json_tamanho = JSON_OBJECT_SIZE(1); // objeto JSON com um membro
      StaticJsonDocument<json_tamanho> json;
      json[ALIAS_VBAT] = tensao;
      size_t mensagem_comprimento = measureJson(json);
      char mensagem[mensagem_comprimento + 1];
      serializeJson(json, mensagem, (mensagem_comprimento+1));
      mensagem[mensagem_comprimento] = 0; // EOS (mostly for debugging)
  
      // send the message
      ws.textAll(mensagem, mensagem_comprimento);
      Serial.printf("Tensao atualizada: %u mV\n", tensao);
    }
    
    timeout_vbat = millis() + TEMPO_ATUALIZACAO_VBAT; // atualiza
  }
}

// --------------------------------------------------
// --------------------------------------------------

// Configurar o servidor web
void configurar_servidor_web(void) {
  ws.onEvent(onEvent); // define o manipulador do evento do WebSocket
  server.addHandler(&ws); // define o manipulador do WebSocket no servidor
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ // define a resposta da pagina padrao
    request->send_P(200, "text/html", index_html);
  });
}

// --------------------------------------------------

// Manipulador para mensagens WebSocket
//  @param (arg) : xxx [void *]
//         (data) : xxx [uint8_t *]
//         (length) : xxx [size_t]
void handleWebSocketMessage(void *arg, uint8_t *data, size_t length) {
  AwsFrameInfo *info = (AwsFrameInfo*)arg;
  if (info->final && info->index == 0 && info->len == length && info->opcode == WS_TEXT) {
    data[length] = 0;
//    Serial.printf("Incoming WS data: \"%s\"\n", (char*)data); // debug

    // verifica se eh para controlar um servo motor
    if(strstr(reinterpret_cast<char*>(data), ALIAS_SERVO) != nullptr){
      // cria um documento JSON
      const int json_tamanho = JSON_OBJECT_SIZE(2); // objeto JSON com dois membros
      StaticJsonDocument<json_tamanho> json;
      DeserializationError erro = deserializeJson(json, data, length);
      
      // extrai os valores do JSON
      int16_t angulo = json[ALIAS_POSICAO]; // [0;180]
      int16_t servo = json[ALIAS_SERVO]; // [1-4]

      // debug
      Serial.print("Servo: ");
      Serial.print(servo);
      Serial.print(" | Angulo: ");
      Serial.println(angulo);

      // verifica os valores
      if((servo < 1) || (servo > 4)){
        Serial.printf("Servo invalido (%u)\n", servo);
        return;
      }
      if((angulo < 0) || (angulo > 180)){
        Serial.printf("Angulo invalido (%u)\n", servo);
        return;
      }

      // atualiza o servo
      servos[servo-1].write(angulo);
    } else {
      Serial.printf("Recebidos dados invalidos (%s)\n", data);
    }
  }
}

// --------------------------------------------------

// Manipulador dos eventos do WebSocket
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
             void *arg, uint8_t *data, size_t length) {
  switch (type) {
    case WS_EVT_CONNECT: {
      digitalWrite(PIN_LED, HIGH); // acende o LED
      // permitir apenas um cliente conectado
      if(ws.count() == 1){ // o primeiro cliente ja eh considerado como conectado
        Serial.printf("Cliente WebSocket #%u conectado de %s\n", client->id(), client->remoteIP().toString().c_str());
      } else {
        Serial.printf("Cliente WebSocket #%u de %s foi rejeitado\n", client->id(), client->remoteIP().toString().c_str());
        ws.close(client->id());
      }
      break;
    }
    case WS_EVT_DISCONNECT: {
      if(ws.count() == 0){
        digitalWrite(PIN_LED, LOW); // apaga o LED
      }
      Serial.printf("Cliente WebSocket #%u desconectado\n", client->id());
      break;
    }
    case WS_EVT_DATA: {
      handleWebSocketMessage(arg, data, length);
      break;
    }
    case WS_EVT_PONG:
    case WS_EVT_ERROR:
      break;
  }
}

// --------------------------------------------------

Entendendo o Código

Neste código, a Vespa é responsável por criar uma rede Wi-Fi própria e um servidor web assíncrono. Com isso, podemos conectar celulares, tablets e até mesmo computadores à rede criada para acessar o servidor da placa. Após criar a sua rede, a placa também disponibiliza um endereço de IP, que será utilizado para acessar a página web do controle do robô.

A página web do servidor está inteiramente programada no código, e é graças à ela que a interface de controle é apresentada. Ná página são exibidos quatro "sliders", onde cada um é responsável por controlar a posição de um dos servomotores do RoboARM. Ao mover um dos "sliders", a página encaminha dados em formato JSON para a Vespa, que por sua vez os interpreta e então controla o respectivo servo para a posição atualizada.

Outra funcionalidade interessante da interface de controle está no medidor de tensão de entrada da placa, que é uma das diversas funcionalidades da Vespa. A placa mede a sua tensão de entrada a cada 5 segundos e, em seguida, atualiza a tensão exibida na interface. Talvez isso não seja muito importante para o uso de fontes, já que a tensão será sempre constante, mas pode ser muito útil caso deseje utilizar o RoboARM com baterias, já que você sempre saberá quando é necessário trocar ou recarregar as baterias do robô.

A principal função deste código está no controle dos servomotores, já que ela é a responsável pela movimentação do RoboARM. Nela, é verificado o ângulo em que cada um dos "sliders" está posicionado (tomando como referência os ângulos mostrados na imagem abaixo) e então os respectivos servos são comandados para suas novas posições. Por exemplo, se o primeiro "slider" estiver posicionado no ângulo de 90°, o servo da base, conectado ao pino S1 da placa, será atualizado para o ângulo 90°.

Grande parte das funções do projeto possuem monitoramento pelo monitor serial, então você pode, se quiser, acompanhar as informações da placa. Para isso, basta abrir o monitor serial na porta serial da sua placa, com a velocidade de 115200 bps.

O Que Deve Acontecer

Após carregar o código para a placa, desconecte o cabo USB, ligue-a pela chave liga/desliga de seu circuito, e então abra a lista de redes Wi-Fi disponíveis no dispositivo que você utilizará para o controle (celular, tablet ou computador). Após alguns instantes, será apresentada uma rede com o nome "Vespa-xx:xx", como na imagem abaixo, por exemplo.

rede_wifi_encontrada_conectada — Rede Wi-Fi Encontrada e Conectada

Observação: o sufixo "xx:xx" da rede Wi-Fi da Vespa é obtido a partir dos últimos caracteres do MAC Address do ESP32 da placa para tornar a rede única, portanto não se preocupe se o nome da rede for diferente da imagem, já que isso é esperado.

Para estabelecer a conexão com a rede, basta utilizar a senha "robocore", que é a senha padrão do código.

Vale lembrar que você pode, se quiser, alterar o nome e a senha da rede Wi-Fi criada pela placa, basta alterar esses parâmetros na configuração do código (função void setup()).

Após conectar o seu dispositivo à rede da placa, abra o navegador de sua preferência e então acesse o endereço de IP "192.168.4.1". Ao acessar o endereço de IP, será aberta a página de interface de controle do projeto, como mostrado na imagem a seguir.

interface_web_controle — Interface Web de Controle

Assim que a Vespa estiver pronta para ser controlada, o seu LED L permanecerá aceso e você poderá mover os "sliders" para controlar a movimentação do robô, como no GIF abaixo.

Atenção: as posições dos motores não são limitadas pelo programa, logo você deve evitar de forçar os movimentos se as peças estiverem encostadas, pois isso pode danificar os servos.

Resultado Final

Conclusão

Neste tutorial vimos como aproveitar as funcionalidades da Vespa para fazer um controle remoto de braços robóticos e agora você pode aproveitar o projeto criado para se divertir!

Indo Além

Além do controle remoto do RoboARM, também é possível utilizar os mesmos conceitos para controlar robôs com rodas, como mostramos no tutorial de controle remoto do Rocket Tank.

Solução de Problemas

O robô está se batendo ou não está alcançando suas movimentações máximas

Se o robô estiver se batendo quando for controlado para algumas movimentações, ou não estiver alcançando suas movimentações máximas, verifique a montagem mecânica dos servos, pois é possível que eles tenham sido montados perto demais de seus limites mecânicos. Também vale lembrar que os "sliders" não possuem limitação, portanto acompanhe a movimentação do robô para pará-lo, ou movê-lo de outra maneira, se os servos estiverem travados, para evitar danificá-los.

O LED vermelho está aceso

O LED vermelho com a legenda R da placa é um LED indicador de polaridade reversa da placa, portanto, se ele estiver aceso, é esperado que a placa não ligue como uma proteção. Desconecte o borne de alimentação da placa e inverta a polaridade de alimentação da bateria.

Não é possível acessar o endereço de IP para o controle

Se a interface de controle não estiver sendo apresentada ao acessar o endereço de IP do servidor, verifique a sua conexão à rede da placa. É comum que dispositivos mais modernos se desconectem automaticamente de redes Wi-Fi sem internet (como é o caso da rede criada pela Vespa) para tentar se conectar em uma outra rede. Caso isso esteja ocorrendo, desabilite a desconexão automática do seu dispositivo.

Comentários

Para fazer comentários é necessário estar logado. Efetuar login.

Você ainda nao é cadastrado? Cadastre-se agora!

diogorocharsrs
date

Enviado 2024-02-14 21:49:01

boa noite tudo bem ?apareceu esse erro "Compilation error: variable &#39;erro&#39; set but not used [-Werror=unused-but-set-variable]"o que posso fazer para corrigir ?

carlos.oliveira
date

Enviado 2024-02-15 08:37:24
diogorocharsrs

Olá! Apague todo o conteúdo presente na área de código da IDE, deixando a área vazia, copie novamente o código do tutorial acima e cole, após esses procedimentos, tente carregar o código para a placa. Se o erro persistir, por gentileza, entre em contato conosco através do e-mail suporte@robocore.net e nos envie uma captura de tela do erro apresentado.

Lestartt
date

Enviado 2024-01-17 18:50:59

Olá, comprei esse kit do braço robótica gostaria de adicionar as rodas de tanque como faz ?

carlos.oliveira
date

Enviado 2024-01-18 10:02:47
Lestartt

Olá! Para isso é preciso acoplar o “Braço Robótico RoboARM” ( https://www.robocore.net/robotica-robocore/braco-robotico-roboarm ) no “Kit Robô Explorer” ( https://www.robocore.net/kits/kit-robo-explorer ), inclusive para essa junção recomendamos o uso do “Kit de Expansão - Rocket Tank” ( https://www.robocore.net/item-mecanico/kit-de-expansao-rocket-tank ), pois com essa expansão, será mais fácil para dispor os itens em cima da plataforma Rocket Tank.

carlos.oliveira
date

Enviado 2024-01-18 10:04:37
Lestartt

Para essa junção (Robô Explorer + RoboARM), você pode usar o tutorial “Controle de Robô e Braço Robótico com a Vespa“ ( https://www.robocore.net/tutoriais/controle-web-robo-braco-robotico-com-vespa ), pois nele mostramos como realizar a montagem mecânica e eletrônica desta junção.

luizeduardomendes
date

Enviado 2023-08-23 19:12:15

Boa noite! Fiz toda a instalação juntamente do Rocket Tank, e funcionou perfeitamente. Gostaria de saber se há a possibilidade de se parear um controle via Bluetooth, ficaria bem melhor para brincar que com o celular no wi-fi. Grande abraço!

luan.ferreira
date

Enviado 2023-08-24 08:18:37
luizeduardomendes

Olá! Sim, é possível conectar um controle bluetooth a placa Vespa. No entanto, infelizmente não temos nenhum tutorial e/ou código que mostre como realizar essa aplicação. Vale dizer que como a placa é baseada no ESP32, você pode usar os tutoriais compatíveis com o mesmo como referência.

fdacio
date

Enviado 2023-04-14 20:43:55

Olá boa noite. Gostaria de saber se já foi lançada uma versão da biblioteca Robocore Vespa que tem o método read() do servo, ou seja ler a posição atual do servor?

luan.ferreira
date

Enviado 2023-04-17 08:03:52
fdacio

Olá! Infelizmente nossa biblioteca não conta com essa funcionalidade. No entanto, iremos estudar a possibilidade de implementar essa funcionalidade em uma possível atualização.

luquinhaferreirarese
date

Enviado 2023-04-04 13:17:16

como conecta os junpers na vespa nao entendi o desenho

luan.ferreira
date

Enviado 2023-04-04 16:02:53
luquinhaferreirarese

Olá! Neste caso, a conexão dos fios dos servomotores a placa, deve ser feita através dos pinos S1 a S4. Para fazer essa conexão, basta encaixar os conectores dos servos nos seus respectivos pinos na placa. Vale dizer que é importante conectar os fios na posição correta, isto é, o fio negativo do servo deve ser conectado no pino negativo da placa e assim por diante. Para ajudar nesta conexão, geralmente o fio que possui a cor mais clara é o fio do sinal, e o fio o posto a ele é o negativo.

hukachaga
date

Enviado 2023-03-27 19:37:06

Olá a todos... Gostaria de compartilhar um problema que tive e a solução. Quando fui testar meu RoboArm pela primeira vez, use o código apresentado nesta página. Mas como havia acabado de instalar a IDE Arduíno no meu pc, fui adicionar as bibliotecas necessárias para pode programar a placa Vespa (esp32).
Adicionei as bibliotecas normalmente, mas na hora de testar o código sempre dava um erro (serialização e desserialização)... Bati cabeça algumas horas com isso!!!

Por fim, descobri que o problema era com a biblioteca <ArduinoJson.h>.
...

hukachaga

Enviado 2023-03-27 19:40:44
hukachaga

Continuando...
No tutorial deste site de utilização da placa Vespa, é apresentado um link de download de todas as bibliotecas necessárias para está placa, incluindo a <ArduinoJson.h>.
Mas se vc adicionar ela na IDE Arduíno ele pede pra atualizar. Aí está o problema!
Se atualizar está biblioteca, este código com a interface web, não funciona.
Portanto, usem a mesma versão apresentada pra download neste site.

marndc
date

Enviado 2023-03-19 17:15:20

Olá, gostaria de obter o código para conseguir programar os movimentos do braço pelo IDE e depois o robô executar os movimentos do braço sem joystick ou wifi.

luan.ferreira
date

Enviado 2023-03-20 10:09:09
marndc

Infelizmente não tem um código que realiza tal função, porém você pode usar como base esse tutorial  e o tutorial “Controlando seu RoboARM” ( https://www.robocore.net/tutoriais/controlando-seu-roboarm ) para a criação desse código.

fdacio
date

Enviado 2023-02-27 00:38:52

Boa noite, um dos meus servos está tremendo, o que controla o antebraço. Isso ocorre mesmo o RoboArm estando em repouso. Que pode ser? 
No void setup estou fazendo assim: servoAntebraco->attach(PIN_ANGULO, MIN, MAX);

luan.ferreira
date

Enviado 2023-02-27 15:44:01
fdacio

Olá! Geralmente esse comportamento ocorre, quando o servo não consegue se manter na posição designada, e isso causa algumas trepidações. Sendo assim, verifique se os ângulos do servo estão conforme o esperado, talvez seja necessário ajustar os elos das articulações do braço. Vale dizer que para o braço se movimentar corretamente, é necessário uma pequena folga entre os elos.

rihara
date

Enviado 2023-01-29 16:00:58

Boa tarde. Quando eu ligo uns dos servos a rede wi-fi desconecta e o led L fica piscando. Esse servo também sempre que eu ligo fica se movimentando bem lento. Já testei na S1, 2, 3 e 4, sempre acontece a mesma coisa. Estou utilizando uma fonte externa 9V 2 A. Poderiam me ajudar a resolver este problema?

luan.ferreira
date

Enviado 2023-01-30 10:23:22
rihara

Neste caso, poderia verificar se as articulações do braço robótico não estão muito apertadas? Perguntamos isso, pois pode ser que as articulações estejam muito apertadas, e isso esteja causando os comportamentos relatados, pois como as articulações muito apertadas, os servos puxam mais corrente para se movimentar (isso também pode fazer com que a placa reinicie), além de diminuir a velocidade do movimento.

luan.ferreira
date

Enviado 2023-01-30 10:24:12
rihara

Se estiver tudo certo com a montagem do braço, e mesmo assim continuar como problemas, peço que envie um e-mail para o suporte@robocore.net , com um vídeo mostrando o comportamento relatado.

cleofasneto
date

Enviado 2022-12-08 02:44:09

Olá! Deu esse erro na compilação do código acima:
reth\AppData\Local\Temp\.arduinoIDE-unsaved2022118-8936-liqf5y.n97le\sketch_dec8a\sketch_dec8a.ino:23:28: fatal error: RoboCore_Vespa.h: No such file or directory
compilation terminated.
exit status 1
Compilation error: RoboCore_Vespa.h: No such file or directory
Como resolvo?

luan.ferreira
date

Enviado 2022-12-08 08:07:55
cleofasneto

Geralmente, quando essa mensagem é retornada pela IDE, indica que ela não está encontrando a biblioteca “RoboCore_Vespa.h”. Sendo assim, verifique se a biblioteca foi instalada corretamente. Se a biblioteca não tiver sido instalada, use o tutorial “Primeiros Passos com a Vespa” ( https://www.robocore.net/tutoriais/primeiros-passos-com-vespa ) para fazer a instalação.