Web Control of Robotic Arm with the Vespa

Introduction

In this tutorial you will see how to control the movement of the RoboARM through your smartphone, thanks to Vespa. For this, you will assemble the RoboARM with the Vespa, assemble the electrical circuit, and then see the connection steps to access the control page.

List of Materials

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

Warning: before proceeding, you must follow the steps in First Steps with the Vespa, as they teach you how to install the essential tools for using the board.

Mechanical Assembly

The first step to develop the project for this tutorial is to mechanically assemble the RoboARM and fix the Vespa on its base. To do so, follow the RoboARM assembly guide using the button below.

RoboARM Assembly Guide

Vespa has the same fixing hole pattern as the Arduino UNO platform boards, so take advantage of this platform's hole available at the base of the structure to fix it.

Electronic Assembly

With the mechanical part ready, assemble the circuit in the image below with your Vespa.

Note: the servo motors can be connected directly to the board through terminals S1 to S4. Just mind the polarity.

To fix the jumpers between the P4 adapter and the Vespa, it is necessary to open and close the contacts of the removable terminal blocks on the board and the adapter terminal, as shown in the GIF below.

Fixing the Wires on the Terminal Block

Coding

Now that the robot is physically assembled, we have to write the code that will be used to control it.

Libraries

Before uploading the example code to the board, we have to install some libraries that are used by the code so that the board executes what we want. To do so, download the necessary libraries using the button below.

Library ArduinoJson Library AsyncTCP Library ESPAsyncWebServer

Once the files are downloaded, follow the image path below in the Arduino IDE to install the libraries from the compressed file.

caminho_instalacao_bibliotecas — Path to Library Installation

When selecting this option, a window will open with the directories of your computer. Navigate to the directory where the compressed (ZIP) files were saved and then double-click on one of the folders. This will cause the library contained in the selected file to be installed in your IDE.

As we need the three libraries available above for the code to work, it is necessary to repeat this procedure for the other two downloaded files as well.

Code

With the libraries installed, upload the following code to your Vespa. Remembering that it is necessary to follow the steps of initial settings of the board to install all the necessary tools for its functioning, as well as to understand how to load codes in it.

/*******************************************************************************
* 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_ANGULO = "angulo";
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, maximum-scale=1.0, user-scalable=no"/>

    <style>
        html, body {width: 100%; height: 100%; padding: 0; margin: 0; }

        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 {
            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;
        }

        .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 */
            margin: 10px;
            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 */
        }
    </style>

</head>

<body style="height: 100%;  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;">

    <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: 0px; 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% - 50px); border: 0px solid green;">
        <div style="display: table-cell; vertical-align: middle;">
            <div class="slidecontainer" style="display: flex; align-items: center; justify-content: space-evenly; align-content: center; flex-direction: column; flex-wrap: wrap; height: 100%;">

                <input type="range" min="0" max="180" value="90" class="slider" id="s1">
                <input type="range" min="0" max="180" value="90" class="slider" id="s2">
                <input type="range" min="0" max="180" value="90" class="slider" id="s3">
                <input type="range" min="0" max="180" value="90" class="slider" id="s4">

            </div>
        </div>
    </div>

    <script>
        var connection = new WebSocket(`ws://${window.location.hostname}/ws`);
        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);
                var lbat = (data["vbat"] * 100 / 9000).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, 'angulo': 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) => { send_slider(1, e.target.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 = "rc-vespa"; // 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_ANGULO]; // [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;
  }
}

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

Understanding the Code

In this code, Vespa is responsible for creating its own Wi-Fi network and an asynchronous web server. With this, we can connect smartphones, tablets and even computers to the network created to access the board's server. After creating your network, the board also provides an IP address, which will be used to access the robot control web page.

The server's web page is entirely programmed in code, and it is thanks to it that the control interface is presented. On the page, four "sliders" are displayed, where each one is responsible for controlling the position of one of the RoboARM's servomotors. When moving one of the "sliders", the page forwards data in JSON format to the Vespa, which in turn interprets them and then controls the respective servo to the updated position.

Another interesting feature of the control interface is the board's input voltage meter, which is one of the Vespa's many features. The board measures its input voltage every 5 seconds and then updates the voltage displayed on the interface. Perhaps this is not very important for using power supplies, as the voltage will always be constant, but it can be very useful if you want to use the RoboARM with batteries, as you will always know when it is necessary to change or recharge the robot's batteries.

The main function of this code is in controlling the servomotors, since it is responsible for moving the RoboARM. In it, the angle at which each of the "sliders" is positioned is checked (taking the angles shown in the image below as a reference) and then the respective servos are commanded to their new positions. For example, if the first "slider" is positioned at an angle of 90°, the base servo, connected to pin S1 on the board, will be updated to the angle of 90°.

Most of the project's functions are monitored by the serial monitor, so you can, if you want, monitor the information on the board. To do so, just open the serial monitor on your board's serial port, with a speed of 115200 bps.

What Must Happen

After loading the code to the board, disconnect the USB cable, turn it on by the on/off switch of its circuit, and then open the list of Wi-Fi networks available on the device you will use for control (smartphone, tablet or computer ). After a few moments, a network with the name "Vespa-xx:xx" will be displayed, as in the image below, for example.

rede_wifi_encontrada_conectada — Wi-Fi Network Found and Connected

Note: Vespa Wi-Fi network suffix "xx:xx" is taken from the last characters of the board's ESP32 MAC Address to make the network unique, so don't worry if the name from the network is different from the image, as this is expected.

To establish the connection to the network, just use the password "rc-vespa", which is the code's default password.

Remember that you can, if you want, change the name and password of the Wi-Fi network created by the board, just change these parameters in the code configuration (function void setup()).

After connecting your device to the board's network, open the browser of your choice and then access the IP address "192.168.4.1". When accessing the IP address, the project control interface page will be opened, as shown in the following image.

interface_web_controle — Web Control Interface

Once the Vespa is ready to be controlled, its LED L will remain turned on and you will be able to move the "sliders" to control the movement of the robot, as in the GIF below.

Attention: the positions of the motors are not limited by the program, so you must avoid forcing the movements if the parts are touching, as this could damage the servos.

Final Result

Conclusion

In this tutorial we saw how to take advantage of Vespa's functionalities to make a remote control of robotic arms and now you can enjoy the project created for fun!

Going Beyond

In addition to the remote control of the RoboARM, it is also possible to use the same concepts to control robots with wheels, as shown in Rocket Tank remote control tutorial.

Troubleshooting

The Robot is Hitting itself or not Reaching its Maximum Movements

If the robot is beating itself when being controlled for some moves, or is not reaching its maximum moves, check the mechanical mounting of the servos, as it is possible that they have been mounted too close to their mechanical limits. It is also worth remembering that the "sliders" have no limitation, so follow the movement of the robot to stop it, or move it in another way, if the servos are locked, to avoid damaging them.

The Red LED is On

The red LED labeled R on the board is a reverse polarity indicator LED on the board, so if it is lit, it is expected that the board will not turn on as a protection. Disconnect the board power terminal and reverse the battery power supply polarity.

Unable to access IP address for control

If the control interface is not being displayed when accessing the server's IP address, check your connection to the board's network. It is common for more modern devices to automatically disconnect from Wi-Fi networks without internet (as is the case with the network created by Vespa) to try to connect to another network. If this is happening, disable your device's automatic disconnection.

Comments

To make comments you must be logged in. Login.

You are not registered yet? Register Now!

diogorocharsrs
date

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 2023-04-04 13:17:16

como conecta os junpers na vespa nao entendi o desenho

luan.ferreira
date

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

Sent 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

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