Controle Web de Robô com a Vespa

Introdução

Neste tutorial você verá como controlar a movimentação do Rocket Tank através do seu celular, graças à Vespa. Para isso, você montará o Rocket Tank 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

Plataforma Robótica Rocket Tank

R$149.00

Suporte para 6 pilhas AA

R$12.90

Espaçador Sextavado M3 Nylon Preto - Pacote com 10 unidades

R$15.00

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 Rocket Tank e fixar a Vespa e o suporte de baterias sobre a estrutura. Para isso, siga o manual de montagem do Rocket Tank através do botão a seguir.

Manual de Montagem Rocket Tank

A Vespa possui o mesmo padrão de furação de fixação que as placas da plataforma Arduino UNO, portanto é mais simples utilizar esses furos para fixá-la. Já para a fixação do suporte das baterias, você pode fixá-lo em qualquer lugar da estrutura do robô que preferir. Abaixo segue um exemplo de montagem.

exemplo_montagem_conjunto — Exemplo de Montagem do Conjunto

Montagem Eletrônica

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

Para fixar os fios dos motores e da bateria à placa, é necessário abrir e fechar os contatos dos bornes removíveis da placa, 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 robo com a Vespa por WebSocket
* (v1.0 - 25/10/2021)
*
* Copyright 2021 RoboCore.
* Interface web escrita por Lenz (25/10/2021).
* Programa do ESP escrito por Francois (25/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_VELOCIDADE = "velocidade";
const char *ALIAS_VBAT = "vbat";

// variaveis da Vespa
VespaMotors motores;
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 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;
        }

        .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;
            /*                animation: 7s animate 1s infinite;*/
            border-radius: 3px;
        }

        @keyframes animate {
            0% {
                width: 0%;
                background: #F00;
            }
            50% {
                width: 48%;
                background:orange;
            }
            100% {
                width: 95%;
                background: #0F0;
            }
        }
    </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="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>
        </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_joystick(speed, angle){
            var data = {"velocidade":speed, "angulo":angle};
            data = JSON.stringify(data);
            console.log('Send joystick: ', data);
            connection.send(data);
        }
    </script>

    <script>
        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.innerHeight; // half the window for two canvases
            } else {
                width = window.innerWidth;
            }
            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();
            
            //seta esquerda
            ctx_joystick.beginPath();
            ctx_joystick.moveTo(origin_joystick.x - (radius * radius_factor) - 50 , origin_joystick.y);
            ctx_joystick.lineTo(origin_joystick.x - (radius * radius_factor) - 25, origin_joystick.y+25);
            ctx_joystick.lineTo(origin_joystick.x - (radius * radius_factor) - 25, origin_joystick.y-25);
            ctx_joystick.fill();
            
            //seta superior
            ctx_joystick.beginPath();
            ctx_joystick.moveTo(origin_joystick.x, origin_joystick.y - (radius * radius_factor) - 50);
            ctx_joystick.lineTo(origin_joystick.x+25, origin_joystick.y - (radius * radius_factor) - 25);
            ctx_joystick.lineTo(origin_joystick.x-25, origin_joystick.y - (radius * radius_factor) - 25);
            ctx_joystick.fill();
            
            //seta direita
            ctx_joystick.beginPath();
            ctx_joystick.moveTo(origin_joystick.x + (radius * radius_factor) + 50 , origin_joystick.y);
            ctx_joystick.lineTo(origin_joystick.x + (radius * radius_factor) + 25, origin_joystick.y+25);
            ctx_joystick.lineTo(origin_joystick.x + (radius * radius_factor) + 25, origin_joystick.y-25);
            ctx_joystick.fill();
            
            //seta inferior
            ctx_joystick.beginPath();
            ctx_joystick.moveTo(origin_joystick.x, origin_joystick.y + (radius * radius_factor) + 50);
            ctx_joystick.lineTo(origin_joystick.x+25, origin_joystick.y + (radius * radius_factor) + 25);
            ctx_joystick.lineTo(origin_joystick.x-25, origin_joystick.y + (radius * radius_factor) + 25);
            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;
            }
        }

        // 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
                send_joystick(speed, angle_in_degrees);
                movimento = 1;
            }
        }
    </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 Joystick");
  Serial.println("\t(v1.0 - 25/10/21)\n");

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

  // 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 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

      //curva frente para a esquerda
      if((angulo >= 90) && (angulo <= 180)){
        motores.turn(velocidade * (135 - angulo) / 45 , velocidade);

      //curva frente para a direita  
      } else if((angulo >= 0) && (angulo < 90)){
        motores.turn(velocidade, velocidade * (angulo - 45) / 45);

      //curva tras esquerda   
      } else if((angulo > 180) && (angulo <= 270)){
        motores.turn(-1 * velocidade, -1 * velocidade * (angulo - 225) / 45);

      //curva tras direita   
      } else if(angulo > 270){
        motores.turn(-1 * velocidade * (315 - angulo) / 45, -1 * velocidade);

      } else {
        motores.stop();
      }

    } 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. Na página está presente, principalmente, um joystick que dá a direção ao robô. Ao mover o joystick, são enviados dados em formato JSON para a Vespa, que, por sua vez os identifica e age de acordo com o que foi comandado pelo joystick.

Outra funcionalidade interessante da interface de controle está no medidor de bateria, que é uma das diversas funcionalidades da Vespa. A placa mede a tensão da bateria a cada 5 segundos e, em seguida, atualiza a tensão exibida na interface. Com isso, você sempre saberá quando é necessário trocar ou recarregar as baterias do robô.

A função mais importante deste código é a de controle dos motores, já que é ela a responsável por dar a direção ao robô. Nela é verificado o ângulo em que o ponteiro do joystick está definido (tomando como referência os ângulos mostrados na imagem abaixo), e então os motores são acionados de acordo com o esperado. Por exemplo, quando o ponteiro está para cima/frente, ou seja, com um ângulo entre 80 e 100°, os motores são acionados para frente usando os comandos da biblioteca da placa.

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 "rc-vespa", 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 o joystick para controlar a movimentação do robô, como no GIF abaixo.

Resultado Final

Conclusão

Neste tutorial vimos como aproveitar as funcionalidades da Vespa para fazer um controle remoto de robôs e agora você pode aproveitar o projeto criado para se divertir!

Indo Além

Além do controle remoto do Rocket Tank, também é possível utilizar os mesmos conceitos para controlar braços robóticos, como mostramos no tutorial de controle remoto do RoboARM.

Solução de Problemas

O robô não está andando no sentido correto

Caso o robô não esteja se comportando como o esperado e conforme o controlado pelo joystick, é provável que um dos motores esteja com a polaridade invertida. Levante o robô e veja qual dos motores está com o giro invertido ao comandar o robô para frente, por exemplo. Então desligue a placa, desconecte o borne do motor e inverta a conexão dos fios do motor. Isso deverá solucionar o problema.

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!

santiagodalu
date

Enviado 2023-11-06 15:57:54

Olá, estou na seguinte situação: Estou usando a Vespa em um projeto de carrinho de controle remoto via bluetooth. Porém, a tensão da porta USB do computador não é suficiente para alimentar a placa e os motores, por isso uso uma bateria de 9V ao mesmo tempo. Agora, quando quero usar o carrinho sem conectar ao USB, o bluetooth não funciona. Como eu preciso alimentar o circuito de forma que eu possa controlar os dois motores e a placa pra usar o bluetooth de forma independente do computador?

luan.ferreira
date

Enviado 2023-11-06 16:36:43
santiagodalu

Olá! Neste caso, pelo comportamento relatado, o problema pode estar atrelado a alimentação externa da placa, uma vez que baterias de 9V não são muito indicadas para essas aplicações, pois elas têm uma baixa taxa de descarga, o que pode fazer os motores não funcionarem corretamente, e como a conectividade Bluetooth demanda uma certa energia, pode ser que a bateria não esteja conseguindo suprir a alimentação do projeto.

luan.ferreira
date

Enviado 2023-11-06 16:37:44
santiagodalu

Sendo assim, verifique se ao usar outra fonte de alimentação (que esteja dentro das características do projeto e da placa), o comportamento muda. Apenas para fins de comparação, usamos duas baterias 18650 ( https://www.robocore.net/bateria/bateria-li-ion-18650-37v-2200mah ) no nosso “Kit Robô Explorer” ( https://www.robocore.net/kits/kit-robo-explorer ).

mr26072011
date

Enviado 2023-10-01 22:46:30

Olá, comprei o kit explorer e já o programei, porém existem alguns projetos que ainda gostaria de fazer, como o segue linha e o desvio de objetos próximos, mas perdi a minha chave do produto e não estou conseguindo acessar os tutoriais, gostaria de saber se há algum tipo de suporte para estes casos, achei que este seria o local mais convencional para falar isso com vocês

luan.ferreira
date

Enviado 2023-10-02 11:37:29
mr26072011

Olá! Neste caso, peço que envie um e-mail para suporte@robocore.net , com o número do pedido referente a compra do Kit, juntamente com uma foto da parte interna da tampa da caixa do Kit (caso ainda a tenha). Caso saiba o e-mail em que a chave foi usada, mas não tenha mais acesso a ele, peço que junto da foto, também nos envie esse tal e-mail.

symphony.robotica
date

Enviado 2023-09-22 14:04:23

Olá Luan, tudo bem. Parabéns pelo artigo, muito bom. Eu fiz um pequeno teste do script em uma esp32 wroon e o mesmo ficou resetando, conforme outro colega relatou nos posts. Estava alimentando apenas a placa pela porta USB do note book. Funcionou 10 segundos e resetou. Depois troquei a alimentação por 1 power bank com 1 litio carregada e deu a mesma coisa. O sistema reseta e para de funcionar e piscar o led monitor.

luan.ferreira
date

Enviado 2023-09-22 14:19:15
symphony.robotica

Olá! Agradecemos pelo seu feedback a respeito do nosso tutorial. Pelo comportamento relatado, parece que a fonte de alimentação que está usando não está sendo capaz de fornecer a corrente necessária para o funcionamento do projeto, e isso esteja causando o “reset” da placa. Vale dizer que você também pode verificar se a sua placa está funcionando em sua plenitude, pois isso também pode interferir no funcionamento.

wellygtonfeitosa
date

Enviado 2023-07-19 20:58:34

Boa noite ... Criei um carro com minha placa vespa, porém, ela fica desconectando do wifi

luan.ferreira
date

Enviado 2023-07-20 08:21:42
wellygtonfeitosa

Olá! Geralmente esse comportamento é um indicativo que a fonte de alimentação não está fornecendo a tensão/corrente necessária para a placa operar usando o Wi-Fi. Sendo assim, verifique se a fonte de alimentação usada é capaz de alimentar corretamente o projeto. Por exemplo, no Kit robô Explorer ( https://www.robocore.net/kits/kit-robo-explorer ) usamos duas baterias “18650 3,7V 2200mAh 2C” ( https://www.robocore.net/bateria/bateria-li-ion-18650-37v-2200mah ) como fonte de alimentação.

mdilon2811
date

Enviado 2023-06-30 09:17:57

Porém não consigo identificar em qual parte do código html ele importa a logo da robocore, define a cor de fundo, etc

luan.ferreira
date

Enviado 2023-06-30 09:52:57
mdilon2811

No caso, o logo da nossa empresa está dentro da tag "<svg>", no início do trecho do código que gera a página web. Sendo assim, basta alterar esse trecho para modificar o que será apresentado no lugar do logo. Em relação às cores, elas podem ser alteradas dentro da tag "<style>" que também está no início do código. Infelizmente não temos um tutorial que mostre/ensine a como realizar modificações na página Web. No entanto, como essa página possui a estrutura de uma página Web comum, você consegue alterar a página usando apenas HTML e CSS.

mdilon2811
date

Enviado 2023-06-29 21:10:49

Olá boa noite. Em qual parte do código eu poderia mexer no layout da pagina? (logo, cor, etc.)

luan.ferreira
date

Enviado 2023-06-30 08:29:41
mdilon2811

Para editar o layout da página Web, basta alterar o código HTML presente na constante <”index_html[]”>. Feito isso, basta carregar novamente o código para a placa, e o layout já deve apresentar as suas alterações.

lacerdabusatta
date

Enviado 2023-05-07 12:39:05

Oi, tudo bem? Estou com um problema: o servidor web funciona normalmente quando a placa está conectada no cabo usb, mas quando desconecto do computador, e a placa fica sendo alimentada apenas por uma bateria de 9V, o servidor e a rede wifi não são acessíveis (a rede wifi não aparece na lista)

lacerdabusatta
date

Enviado 2023-05-07 12:40:40
lacerdabusatta

Apesar da  bateria ser de 9v, no servidor consta 6.6V. Essa tensão é insuficiente para a placa? Mesmo desconectando os dois motores para fins de teste a rede wifi não é criada pela placa quando fora do computador, nem mesmo desligando e religando a chave da placa.

luan.ferreira
date

Enviado 2023-05-08 08:40:27
lacerdabusatta

Neste caso, aparentemente a bateria não está conseguindo fornecer a tensão (7 a 11V) necessária para o funcionamento completo da placa Vespa, pois a função de WiFi tem um consumo considerável. De toda forma, baterias de 9V não são muito indicadas para esses robôs, devido a sua baixíssima taxa de descarga de corrente, que não é suficiente para partir os motores. Sendo assim, verifique se ao alimentar a placa com uma fonte de energia que esteja dentro da faixa de operação da placa (7 a 11V) esse comportamento se altera.

luan.ferreira
date

Enviado 2023-05-08 08:42:16
lacerdabusatta

Vale dizer que no “Kit Robô Explorer” ( https://www.robocore.net/kits/kit-robo-explorer ) usamos duas “Bateria Li-Ion 18650 3,7V 2200mAh 2C” ( https://www.robocore.net/bateria/bateria-li-ion-18650-37v-2200mah ) com o “Suporte para 2 Baterias Li-Ion 18650” ( https://www.robocore.net/bateria/suporte-para-2-baterias-li-ion-18650 ) para alimentar o projeto.

FELIPEMMARTINS2110
date

Enviado 2023-03-02 20:11:03

Boa noite, posso usar motor de até quantos watts com a VESPA?

luan.ferreira
date

Enviado 2023-03-03 10:35:46
FELIPEMMARTINS2110

Olá! A placa Vespa consegue controlar (diretamente) motores que operem com tensão entre 7 e 11V, e com corrente de 800mA continuamente (e picos 1,8 A (durante poucos instantes)).

nx.souza
date

Enviado 2023-02-02 16:09:26

Boa tarde Lua eu de novo
Já Resolvi aqui já carreguei outro sktch e esta certo Obrigado e boa tarde.

luan.ferreira
date

Enviado 2023-02-02 16:11:13
nx.souza

Ficamos felizes em saber que deu certo! Qualquer dúvida ou problema, entre em contato.

nx.souza
date

Enviado 2023-02-02 15:47:04

Boa tarde Luan!
Tudo bem eu intendi essa parte de carregar com sucesso
Porem eu carreguei com outro sktch na placa Vespa mas grava com essa mensagem 
mas permanece  com o mesmo sktch anterior do Robô

luan.ferreira
date

Enviado 2023-02-02 16:06:33
nx.souza

Olá! Pelo comportamento relatado, pode ser que tenha havido algum erro durante a gravação do segundo código para a placa. Sendo assim, desconecte a placa do computador, feche a Arduino IDE (por completo). Feito isso, conecte a placa novamente ao computador e, abra a IDE (selecione a porta COM) e tente novamente enviar o código desejado para a placa.

luan.ferreira
date

Enviado 2023-02-02 16:07:16
nx.souza

Se você já realizou esse procedimento, e mesmo assim o comportamento persistiu, peço que envie um e-mail para suporte@robocore.net , com uma captura de tela mostrando a mensagem retornada pela IDE ao tentar gravar o código.