Robot and Robotic Arm Web Control with the Vespa

Introduction

In the tutorial Robot Web Control with the Vespa we show you how to control the Rocket Tank with Vespa, and in the tutorial Web Control of Robotic Arm with the Vespa we show you how to control the RoboARM robotic arm with Vespa. What could be better than these controls and what else can the Vespa do?

As a continuation of the previous tutorials, and as a demonstration of the infinite possibilities of the Vespa, in this tutorial we will show you how to control the Rocket Tank and the RoboARM using only a Vespa through the Wi-Fi network that it will create.

List of Materials

Lista completa de produtos

comprar

Vespa

R$149.90

Plataforma Rob�tica Rocket Tank

R$149.00

Bra�o Rob�tico RoboARM

R$199.90

Rocket Tank - Kit de Expans�o

R$39.90

Suporte para 2 Baterias Li-Ion 18650

R$10.50

Bateria Li-Ion 18650 3,7V 2200mAh 2C

R$49.00x2

Porca M2.5 - 10 unidades

R$1.90

Parafuso Philips M2.5 x 12mm Escareado - 10 unidades

R$2.10

Note: The recommended 18650 batteries listed above are rechargeable, but must be charged using a suitable charger (such as this one, for example).

Mechanical Assembly

To assemble the Rocket Tank set with the RoboARM, first assemble the Rocket Tank following the steps in the button manual below. Remembering that the Vespa has the same drilling pattern as the Arduino UNO platform, so it can be attached to the holes indicated for the UNO on the Rocket Tank.

Rocket Tank Assembly Guide

Take the opportunity then to assemble only the back of the Rocket Tank Expansion Kit, as shown on the first page of the button manual below.

Rocket Tank Expansio Kit Assembly Guide

With the Rocket Tank assembled, follow the steps in the next assembly manual to assemble the RoboARM separately.

RoboARM Assembly Guide

With both robots assembled separately, remove the base of the RoboARM to attach it to the Rocket Tank as shown in the button manual below.

RoboARM with the Rocket Tank Assembly Guide

The battery holder can be attached to the Rocket Tank's airfoil using the M2.5 x 10mm screws with the M2.5 nuts included in the tutorial's materials list, as in the complete example assembly below. Alternatively, the battery holder can be hidden between the bottom and top covers of the Rocket Tank chassis.

resultado-montagem — Assembly Final Result

Electronic Assembly

With the structure of both robots mounted together, follow the electrical diagram below to make the necessary connections for robot control.

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

To fix the 18650 battery support wires, as well as those of the motors, to the Vespa, it is necessary to open and close the contacts of the removable terminal blocks on the board, 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

The libraries used in this project are the same as those used in previous separate robot projects. Therefore, if you have already followed the steps of one of those tutorials and already installed the libraries, it is not necessary to install them again.

If you haven't followed the previous separate tutorials, you'll need to install some libraries that are used by the code so that the board performs as 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 Firts Steps with the Vespa to install all the necessary tools for its functioning, as well as to understand how to load codes in it.

Note: to record the code, keep the battery connected to the Vespa and the power switch in the "ON" position. This is necessary as servos draw a relatively high current that USB ports on computers shouldn't be able to supply, so the board may keep resetting constantly and preventing code from being written.

 /*******************************************************************************
* Controle web de um robo e um braco robotico com a Vespa por WebSocket
* (v1.1 - 26/03/2022)
*
* Copyright 2022 RoboCore.
* Interface web escrita por Lenz (09/11/2021).
* Interface web atualizada por Francois (25/03/2022).
* Interface web atualizada por Lenz (26/03/2022).
* Programa da Vespa escrito por Francois (26/03/2022).
*
* 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 <ArduinoJson.h> // https://arduinojson.org/
#include <AsyncTCP.h> // https://github.com/me-no-dev/AsyncTCP
#include <ESPAsyncWebServer.h> // https://github.com/me-no-dev/ESPAsyncWebServer

#include <RoboCore_Vespa.h>

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

struct servo_angulos_t {
  uint8_t min; // angulo minimo [0;180]
  uint8_t max; // angulo maximo [0;180]
  uint8_t atual; // posicao atual
};

// --------------------------------------------------
// 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_POSICAO = "posicao";
const char *ALIAS_SERVO = "servo";
const char *ALIAS_VELOCIDADE = "velocidade";
const char *ALIAS_VBAT = "vbat";

// variaveis da Vespa
VespaMotors motores;
VespaServo servos[4];
const uint16_t SERVO_MAX = 2500;
const uint16_t SERVO_MIN = 500;
enum Motor { Base = 0 , Alcance , Elevacao , Garra };
servo_angulos_t sangulos[4] = { { 0, 180, 90 },
                                { 40, 180, 90 },
                                { 80, 180, 140 },
                                { 70, 160, 100 } }; 
VespaBattery vbat;
uint8_t vbat_critico = 0xFF;
const uint32_t INTERVALO_ATUALIZACAO_VBAT = 5000; // [ms]
const uint32_t INTERVALO_ATUALIZACAO_DESCONEXAO = 100; // [ms]
const uint32_t INTERVALO_LED_VBAT_HIGH = 1000; // [ms]
const uint32_t INTERVALO_LED_VBAT_LOW = 500; // [ms]
uint32_t timeout_vbat, timeout_desconexao, timeout_led_vbat;
bool habilitar_reset_motores = true;

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

const char html_index[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <title>
        RoboCore Joystick + RoboARM
    </title>

    <!-- �ltima atualiza��o: 26/03/2022 -->

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

        @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 */
          margin: 5px;
          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; visibility: hidden;">
    DEBUG: Vel: <span id="speed">0</span>% | 
    Ang: <span id="angle">0</span> | 
    Bot�o: <span id="button">0</span>
</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;">
    <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;">
            <canvas id="canvas_joystick" style="border: 0px solid red;"></canvas>
            <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;">

                <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>
</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, 'posicao': parseInt(value)};
      data = JSON.stringify(data);
      console.log('Slider data: ', data);
      connection.send(data);
    }

    function send_joystick(speed, angle){
      var data = {'velocidade': speed, 'angulo': angle};
      data = JSON.stringify(data);
      console.log('Send joystick: ', 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);
    
    var canvas_joystick, ctx_joystick;
    var ctx_button;
            // setup the controls for the page
            window.addEventListener('load', () => {
                canvas_joystick = document.getElementById('canvas_joystick');
                ctx_joystick = canvas_joystick.getContext('2d');
                resize();
                canvas_joystick.addEventListener('mousedown', startDrawing);
                canvas_joystick.addEventListener('mouseup', stopDrawing);
                canvas_joystick.addEventListener('mousemove', Draw);
                canvas_joystick.addEventListener('touchstart', startDrawing);
                canvas_joystick.addEventListener('touchend', stopDrawing);
                canvas_joystick.addEventListener('touchcancel', stopDrawing);
                canvas_joystick.addEventListener('touchmove', Draw);
                window.addEventListener('resize', resize);
                document.getElementById("speed").innerText = 0;
                document.getElementById("angle").innerText = 0;
                document.getElementById("button").innerText = 0;
            });
            var width, height, radius, button_size;
            let origin_joystick = { x: 0, y: 0};
            let origin_button = { x: 0, y: 0};
            const width_to_radius_ratio = 0.04;
            const width_to_size_ratio = 0.15;
            const radius_factor = 7;
            function resize() {
                if (window.innerWidth > window.innerHeight){
            width = (window.innerWidth / 2) - 2; // half the window for two canvases
        } else {
            width = (window.innerWidth) - 2;
        }

        radius = width_to_radius_ratio * width;
        button_size = width_to_size_ratio * width;
            height = radius * radius_factor * 2 + 100; // use the diameter

            // configure and draw the joystick canvas
            ctx_joystick.canvas.width = width;
            ctx_joystick.canvas.height = height;
            origin_joystick.x = width / 2;
            origin_joystick.y = height / 2;
            joystick(origin_joystick.x, origin_joystick.y);
        }


            // Draw the background/outer circle of the joystick
            function joystick_background() {
            // clear the canvas
            ctx_joystick.clearRect(0, 0, canvas_joystick.width, canvas_joystick.height);
            // draw the background circle
            ctx_joystick.beginPath();
            ctx_joystick.arc(origin_joystick.x, origin_joystick.y, radius * radius_factor, 0, Math.PI * 2, true);
            ctx_joystick.fillStyle = '#ECE5E5';
            ctx_joystick.fill();
        }

            // Draw the main circle of the joystick
            function joystick(x, y) {
            // draw the background
            joystick_background();
            // draw the joystick circle
            ctx_joystick.beginPath();
            ctx_joystick.arc(x, y, radius * 3, 0, Math.PI * 2, true);
            ctx_joystick.fillStyle = 'lightgray';
            ctx_joystick.fill();
            ctx_joystick.strokeStyle = 'lightgray';
            ctx_joystick.lineWidth = 2;
            ctx_joystick.stroke();
        }

        let coord = { x: 0, y: 0 };
        let paint = false;
        var movimento = 0;
            // Get the position of the mouse/touch press (joystick canvas)
            function getPosition_joystick(event) {
                var mouse_x = event.clientX || event.touches[0].clientX || event.touches[1].clientX;
                var mouse_y = event.clientY || event.touches[0].clientY || event.touches[1].clientY;
                coord.x = mouse_x - canvas_joystick.offsetLeft;
                coord.y = mouse_y - canvas_joystick.offsetTop;
            }

            // Check if the mouse/touch was pressed inside the background/outer circle of the joystick
            function in_circle() {
                var current_radius = Math.sqrt(Math.pow(coord.x - origin_joystick.x, 2) + Math.pow(coord.y - origin_joystick.y, 2));
            if ((radius * radius_factor) >= current_radius) { // consider the outer circle
                console.log("INSIDE circle");
                return true;
            } else {
                console.log("OUTSIDE circle");
                return false;
            }
        }

            // Handler: on press for the joystick canvas
            function startDrawing(event) {
                paint = true;
                getPosition_joystick(event);
                if (in_circle()) {
            // draw the new graphics
            joystick(coord.x, coord.y);
            Draw(event);
        }
    }

            // Handler: on release for the joystick canvas
            function stopDrawing() {
            paint = false; // reset

            // update to the default graphics
            joystick(origin_joystick.x, origin_joystick.y);
            document.getElementById("speed").innerText = 0;
            document.getElementById("angle").innerText = 0;
            // update the WebSocket client
            if (movimento == 1) {
                send_joystick(0, 0);
                movimento = 0;
            }

        }

        var last_update = 0;

        // Semi-handler: update the drawing of the joystick canvas
        function Draw(event) {
            if (paint) {
                // update the position
                getPosition_joystick(event);
                var angle_in_degrees, x, y, speed;
                // calculate the angle
                var angle = Math.atan2((coord.y - origin_joystick.y), (coord.x - origin_joystick.x));
                if (in_circle()) {
                x = coord.x - radius / 2; // correction to center on the tip of the mouse, by why? (Thought for another time.)
                y = coord.y - radius / 2; // correction to center on the tip of the mouse, by why? (Thought for another time.)
            } else {
                x = radius * radius_factor * Math.cos(angle) + origin_joystick.x; // consider the outer circle
                y = radius * radius_factor * Math.sin(angle) + origin_joystick.y; // consider the outer circle
            }

            // calculate the speed (radial coordinate) in percentage [0;100]
            var speed = Math.round(100 * Math.sqrt(Math.pow(x - origin_joystick.x, 2) + Math.pow(y - origin_joystick.y, 2)) / (radius * radius_factor)); // consider the outer circle
            if (speed > 100){
                speed = 100; // limit
            }

            // convert the angle to degrees [0;360]
            if (Math.sign(angle) == - 1) {
                angle_in_degrees = Math.round( - angle * 180 / Math.PI);
            }
            else {
                angle_in_degrees = Math.round(360 - angle * 180 / Math.PI);
            }

            // update the elements
            joystick(x, y);
            document.getElementById("speed").innerText = speed;
            document.getElementById("angle").innerText = angle_in_degrees;
            // send the data
            if((Date.now() - last_update) > 100){
                last_update = Date.now(); // update
                send_joystick(speed, angle_in_degrees);
            }
            movimento = 1;
        }
    }
</script>
</body>
</html>
)rawliteral";

// --------------------------------------------------
// Pagina web (ocupado)

const char html_busy[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>

<head>
    <title>
        RoboCore Joystick
    </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;
        }
    </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 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="display: table; width:100%; height: calc(100% - 80px); border: 0px solid green;">
    <div style="padding: 10px; background-color: yellow; text-align: center;">Outro usu�rio j� est� conectado neste rob�</div>
</div>
</body>

</html>
)rawliteral";

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

void configurar_servidor_web(void);
void handleWebSocketMessage(uint32_t, 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 Rocket + RoboARM");
  Serial.println("\t(v1.1 - 26/03/2022)\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);
  // atualiza os motores para as posicoes iniciais
  for(uint8_t i=0 ; i < 4 ; i++){
    servos[i].write(sangulos[i].atual);
  }

  // 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];
  }
  WiFi.mode(WIFI_AP);
  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){
    // le a tensao da bateria
    uint32_t tensao = vbat.readVoltage();

    // verificar se a tensao esta critica
    if((tensao < 7000) && (vbat_critico == 0xFF)){
      Serial.printf("Tensao critica (%u mV)\n", tensao);
      vbat_critico = LOW;
      digitalWrite(PIN_LED, vbat_critico);
      timeout_led_vbat = millis() + INTERVALO_LED_VBAT_LOW;
    } else if((tensao >= 7000) && (vbat_critico < 0xFF)){
      vbat_critico = 0xFF; // reset
      // atualiza o estado do LED em funcao da conexao ativa
      if(ws.count() > 0){
        digitalWrite(PIN_LED, HIGH);
      } else {
        digitalWrite(PIN_LED, LOW);
      }
    }
    
    // atualiza se houver clientes conectados
    if(ws.count() > 0){
      // 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() + INTERVALO_ATUALIZACAO_VBAT; // atualiza
  }

  // pisca o LED se a tensao estiver critica
  if(millis() > timeout_led_vbat){
    if(vbat_critico < 0xFF){
      if(vbat_critico == LOW){
        vbat_critico = HIGH;
        timeout_led_vbat = millis() + INTERVALO_LED_VBAT_HIGH;
      } else {
        vbat_critico = LOW;
        timeout_led_vbat = millis() + INTERVALO_LED_VBAT_LOW;
      }
      digitalWrite(PIN_LED, vbat_critico);
    }
  }

  // verifica se e para parar os motores porque nao ha clientes conectados
  if(millis() > timeout_desconexao){
    if((ws.count() == 0) && habilitar_reset_motores){
      Serial.println("Reset dos motores");
      motores.stop();
      // atualiza os motores para as posicoes iniciais
      for(uint8_t i=0 ; i < 4 ; i++){
        servos[i].write(sangulos[i].atual);
      }
      habilitar_reset_motores = false; // reset
    }
    
    timeout_desconexao = millis() + INTERVALO_ATUALIZACAO_DESCONEXAO; // 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
    if(ws.count() == 0){
      request->send_P(200, "text/html", html_index);
    } else {
      request->send_P(200, "text/html", html_busy);
    }
  });
}

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

// Manipulador para mensagens WebSocket
//  @param (client) : ID do cliente [uint32_t]
//         (arg) : xxx [void *]
//         (data) : xxx [uint8_t *]
//         (length) : xxx [size_t]
void handleWebSocketMessage(uint32_t client, 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;

    // verifica se e para controlar os motores
    if(strstr(reinterpret_cast<char*>(data), ALIAS_VELOCIDADE) != 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;360]
      int16_t velocidade = json[ALIAS_VELOCIDADE]; // [0;100]

      // debug
      Serial.print("Velocidade: ");
      Serial.print(velocidade);
      Serial.print(" | Angulo: ");
      Serial.println(angulo);

      // atualiza os motores
      if((angulo > 80) && (angulo < 100)){
        motores.forward(velocidade);
      } else if((angulo > 260) && (angulo < 280)){
        motores.backward(velocidade);
      } else if((angulo > 170) && (angulo < 190)){
        motores.turn(0, velocidade);
      } else if((angulo > 350) || (angulo < 10)){
        motores.turn(velocidade, 0);
      } else if((angulo > 100) && (angulo < 170)){
        motores.turn(velocidade * 7 / 10, velocidade);
      } else if((angulo > 10) && (angulo < 80)){
        motores.turn(velocidade, velocidade * 7 / 10);
      } else if((angulo > 190) && (angulo < 260)){
        motores.turn(-1 * velocidade * 7 / 10, -1 * velocidade);
      } else if((angulo > 280) && (angulo < 350)){
        motores.turn(-1 * velocidade, -1 * velocidade * 7 / 10);
      } else {
        motores.stop();
      }
    }
    // verifica se e para controlar um servo motor
    else 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 < sangulos[servo-1].min) && (angulo > sangulos[servo-1].max)){
        Serial.printf("Angulo invalido (%u)\n", servo);
        return;
      }

      // atualiza o servo
      servos[servo-1].write(angulo);
    }
    // dados invalidos
    else {
      Serial.printf("[%i] Recebidos dados invalidos (%s)\n", client, data);
    }
  } else {
    Serial.printf("[%i] Frame invalido: [%i]\n", client, info->opcode);
  }
}

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

// 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 e 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(client->id(), arg, data, length);
      break;
    }
    case WS_EVT_PONG:
    case WS_EVT_ERROR:
      break;
  }
}

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

Understanding the Code

The code for this tutorial is basically a mash-up of the Rocket Tank and RoboARM separate control tutorials, so most of the functions are identical.

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 there is mainly a joystick that gives direction to the robot. When moving the joystick, data is sent in JSON format to Vespa, which, in turn, identifies them and acts according to what was commanded by the joystick. This data is the angle at which the joystick pointer is set (referring to the angles shown in the image below) and the distance between the pointer and the center of the joystick. Then the motors are driven as expected. For example, when the pointer is up/forward, that is, at an angle between 80 and 100�, and touching the end of the joystick, the motors are driven forward at full speed using commands from the board's library.

Underneath the Rocket Tank's control joystick are the four "sliders" for controlling the RoboARM's servos. 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�.

Another interesting feature of the control interface is the battery meter, which is one of the Vespa's many features. The board measures battery voltage every 5 seconds and then updates the voltage displayed on the interface. This way, you'll always know when you need to change or recharge the robot's batteries.

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 (cell phone, 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 Foun 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 "robocore", 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 card'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

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

Attention: the positions of the RoboARM servomotors 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

Warning: Do not let batteries discharge below 6.8V. Lithium batteries must always have at least 3.4V per cell to function properly.

Conclusion

In this tutorial we continue with the robot control projects with Vespa and we saw how to control two different mechanisms simultaneously using only one Vespa.

Troubleshooting

The robot is not walking in the right direction

If the robot is not behaving as expected and as controlled by the joystick, it is likely that one of the motors has reversed polarity. Lift the robot and see which of the motors has the inverted spin when commanding the robot forward, for example. Then turn off the board, disconnect the motor terminal and invert the connection of the motor wires. This should resolve the issue.

RoboARM is hitting itself or not reaching its maximum moves

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.

Web interface returns "Vespa ocupada"

If the web interface accessed on the Vespa shows that another user is connected to the robot, as in the image below, it is a sign that there is another cell phone connected to it, or that there was a double attempt to connect to your cell phone server. Then check that any cell phone previously used to control the robot has not automatically connected to the Vespa network and try restarting the server page.

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 controller

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!

carlosdanieldev
date

Sent 2024-02-19 22:12:05

da pra usar um NodeMCU pra controlar os servos e os motores com um shield ?

carlos.oliveira
date

Sent 2024-02-20 10:21:42
carlosdanieldev

Olá! Infelizmente com o conjunto (Motor Shield para NodeMCU + NodeMCU ESP8266-12 V2) não é possível controlar os servos motores diretamente, pois os servos operam com a tensão de 5V, enquanto o NodeMCU opera em 3,3V. Portanto, recomendamos que para compatibilizar as tensões, seja usado um conversor de nível lógico ( https://www.robocore.net/regulador-de-tensao/conversor-de-nivel-logico ).

andressanarciso77
date

Sent 2023-11-30 14:27:47

Olá, boa tarde. Estou com as bibliotecas instaladas e mesmo assim, quando eu tento carregar, aparece um erro dizendo que "a biblioteca blábláblá já existe" e isso acontece nas três. Podem me ajudar?

Giovanni5

Sent 2023-11-30 16:01:38
andressanarciso77

Isso deve estar acontecendo por conta de uma instalação duplicada das bibliotecas. Neste caso, acesse o diretório de bibliotecas da Arduino IDE no seu computador (geralmente fica em "C:\Users\Nome do Usuário\Documents\Arduino\libraries", e delete uma das pastas de todas as bibliotecas que estiverem duplicadas neste diretório.

vinisttippe
date

Sent 2023-05-24 21:41:46

ola, tem com eu deixar ambos autônomos, tipo pro carrinho ir de ponto tal a ponto tal e a garra mexer um angulo especifico pra pegar algo?

luan.ferreira
date

Sent 2023-05-25 08:09:09
vinisttippe

Olá! Sim, é possível realizar aplicações deste tipo com o conjunto. No entanto, infelizmente não temos nenhum tutorial e/ou código para essa aplicação, mas caso queira realizar essa aplicação, você pode usar esse tutorial como base, para a criação do seu projeto. Vale dizer que dependendo do seu projeto, talvez seja necessário incorporar alguns sensores ao conjunto.

kevinrendon
date

Sent 2022-11-02 23:19:36

é possivel conectar a vespa como client da minha rede,  e atribuir uma outra ip para controlar o robo?

luan.ferreira
date

Sent 2022-11-03 08:29:11
kevinrendon

Sim, é possível fazer com que a placa Vespa se conecte na sua rede (modo STA) , tornando possível o controle do robô, por qual dispositivo que esteja conectado a sua rede. Porém, infelizmente não temos nenhum tutorial que ensine a como realizar esse procedimento. Vale dizer que como o microcontrolador da placa Vespa é um ESP32, você pode usar os tutoriais voltados para o ESP32 como referência para a criação do seu projeto.

kevinrendon
date

Sent 2022-11-03 09:46:32
kevinrendon

Consegui realizar a configuração e conectou, atribuir uma IP da minha rede, mas quando vou acessar não carrega a webserver.

luan.ferreira
date

Sent 2022-11-03 15:47:27
kevinrendon

O IP que você está tentando acessar, corresponde ao IP que a placa Vespa recebeu ao se conectar na sua rede, certo? Se sim, verifique se realmente a placa está conectada na sua rede, pois pode ser que ela tenha se desconectado no momento em que você tentou acessar a página Web.

kevinrendon
date

Sent 2022-11-04 07:30:09
kevinrendon

Sim, é a IP da vespa. Ela da ping na rede normalmente, mas não carrega nada na página.

luan.ferreira
date

Sent 2022-11-04 16:02:23
kevinrendon

Olá! Apenas para confirmar, a Vespa está trabalhando como em modo station (ao invés do modo AP deste tutorial), certo? O dispositivo que você está usando para acessar o IP da Vespa, está na mesma rede que ela? Verifique se a placa não está reiniciando quando você tenta se conectar a ela, e se não há nenhum bloqueio intermediário, como um firewall (ou um VPN), pois isso pode estar interferindo na conexão.

d1favero
date

Sent 2022-08-28 20:04:39

Olá pessoal da robocore, após a montagem dos kits em conjunto e programação da placa vespa, tudo funciona, mas a placa apita sempre que uso o controle para movimentar o tanque. Alguma sugestão?

luan.ferreira
date

Sent 2022-08-29 08:08:02
d1favero

Olá! É normal o robô emitir um �bipe� quando há movimentação, pois esse som é emitido pelos motores ao serem acionados. Essa é uma reação natural das suas bobinas à frequência de PWM de controle para a sua movimentação.

paladini
date

Sent 2022-06-21 07:39:35

Olá, é possivel adicionar o logo da minha empresa na página web gerada? Poderia me ajudar com esta tarefa?

luan.ferreira
date

Sent 2022-06-21 09:26:18
paladini

Olá! Sim, é possível colocar o logo da sua empresa na página Web, mas para fazer isso você terá que editar a parte do código que é responsável por gerar a página Web. Infelizmente não temos nenhum tutorial que ensine a fazer tal edição, porém você pode buscar por referências de HTML online, como o W3Schools ( https://www.w3schools.com/html/ ), por exemplo, para aprender como fazer esta alteração.

granja8519
date

Sent 2022-06-12 11:56:00

Comprei o rocket tank e o braço mecânico, porém não encontramos o manual para integra-los. Por recomendação do site, comprei mais um kit vespa. Porém, lendo aqui observei que não seria necessário. Achei muito confuso.

luan.ferreira
date

Sent 2022-06-13 09:16:12
granja8519

Olá! Para fazer a montagem do Kit deste tutorial, basta seguir os passos descritos na seção �Montagem Mecânica�, que fica no início desta página. Há um manual exclusivo para a integração dos dois robôs ( https://s3-sa-east-1.amazonaws.com/robocore-lojavirtual/1172/manual_rocket_roboarm.pdf ), e após a montagem mecânica, basta fazer as conexões ilustradas no esquema elétrico do projeto.

vitor.rodrigues.sgro
date

Sent 2022-06-05 16:43:26

esta dando esse erro

exit status 1
expected primary-expression before &#39;<&#39; token

luan.ferreira
date

Sent 2022-06-06 10:05:02
vitor.rodrigues.sgro

Olá! Notamos que haviam alguns caracteres erroneamente posicionados no código, e pedimos desculpas pelo ocorrido. Já atualizamos o código, e agora ele deve compilar corretamente.