Controle Web de Robô com FPV usando a Vespa

Introdução

Após muitos pedidos e muito tempo de desenvolvimento, o tão esperado tutorial em que mostramos como integrar a Vespa com o ESP32-CAM, para ter monitoramento por imagem enquanto controlamos um robô através de uma página Web, está disponível para ser replicado na sua casa.

Neste tutorial, veremos os códigos de controle das duas placas para que o monitoramento seja possível.

Lista de Materiais

Lista completa de produtos

comprar

Plataforma Robótica Rocket Tank

R$149.00

Vespa

R$149.90

ESP32-CAM - ESP32 com Câmera

R$59.00

Rocket Tank - Suporte para ESP32-CAM

R$19.90

Conversor USB x UART

R$35.00

Suporte para 2 Baterias Li-Ion 18650

R$10.50

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

R$49.00x2

Mini Protoboard 170 Pontos - Branca

R$3.90

Cabo USB Micro B 80cm

R$9.90

Jumpers Macho-Macho x40 Unidades

R$7.90

Jumpers Fêmea-Fêmea x40 Unidades

R$7.90

Programação da Vespa

O primeiro passo para replicar este projeto é gravar o código na Vespa, a fim de coletar o nome da rede Wi-Fi que a Vespa irá criar, já que a rede terá os últimos 4 caracteres do MAC Address do seu ESP32.

Para carregar o código à placa, basta conectar o cabo USB à placa. Contudo, vale lembrar que é recomendado seguir o tutorial de primeiros passos com a Vespa para que ela seja reconhecida corretamente pelo seu computador e para que a biblioteca da placa esteja instalada na IDE.

Biblioteca

Para o controle Wi-Fi da Vespa, é necessário instalar as seguintes bibliotecas na sua Arduino IDE:

Biblioteca ArduinoJson Biblioteca AsyncTCP Biblioteca ESPAsyncWebServer

Código

Copie, cole e carregue o código a seguir na sua Vespa:

/*******************************************************************************
* Controle web de um robo com a Vespa por WebSocket
* (v1.0 - 02/02/2024)
*
* Copyright 2024 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>
#include <ESPAsyncWebServer.h>
#include <ArduinoJson.h>
#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 FPV
        </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;
        }
        .imag_Frame {
            height: 320px;
        }

        @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: flex;align-items: center;justify-content: center; width:100%; height: calc(100% - 80px); border: 0px solid green; font-size: 12px; color: rgb(157, 150, 142);">

            <div style="display: table-cell; vertical-align: middle;align-items: center; justify-content: center; align-content: center;">

                <div
                    style="display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap;">

                    <div id="videoGoesHere"
                        style="width: 500px;display:flex;justify-content: center;padding-top: 20px;">
                    </div>
                    <canvas id="canvas_joystick" 
                        style="border: 0px solid red; ">
                    </canvas>
                </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>

            <script>
        waitToShowCamera()
        function waitToShowCamera(){
            setTimeout(function() {
                document.getElementById("videoGoesHere").innerHTML = `<iframe class="imag_Frame" width="560" height="440" src="http://192.168.4.2" frameborder="0" scrolling="no"></iframe>`;
            }, 5000); 

        }
    </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 FPV");
  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
        Serial.printf("Cliente WebSocket #%u conectado de %s\n", client->id(), client->remoteIP().toString().c_str());
        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;
  }
}

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

Explicação do 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, a janela de exibição do vídeo coletado pelo ESP32-CAM e um joystick que direciona o 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, se desejar, você pode 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.

Programação do ESP32-CAM

Após carregar o código na Vespa, utilize o seu celular ou seu computador para ver qual é o nome da rede gerada por ela, que deve ser algo parecido com Vespa-10:7C, por exemplo. Com esta informação, podemos alterar o código que será gravado no ESP32-CAM.

Circuito para Gravação

Para gravar o código no ESP32-CAM, é necessário montar o circuito da imagem a seguir:

circuito-gravacao-codigo — Circuito para Gravação de Código

Atente-se aos jumpers entre o IO0 e o GND no ESP32-CAM e o jumper no conversor USB-UART. Para o jumper do ESP32-CAM, é necessário que a placa entre em modo de gravação. Já o jumper do conversor USB-UART, deve estar conectado ao 3V3 para que ambas as placas operem na mesma tensão.

Com o circuito montado, selecione o modelo de placa como AI Thinker ESP32-CAM para a gravação do código abaixo.

Código

Com o circuito montado, copie, cole e carregue o código abaixo para a sua placa. Apenas lembre-se de alterar a variável ssid com o nome da rede Wi-Fi criada pela sua Vespa, como visto anteriormente.

/*******************************************************************************
* Streaming de Video pela Web
* (v1.0 - 02/02/2024)
*
* Copyright 2024 RoboCore.
* Programa do ESP escrito por ViniDJ (25/10/2023).
*
* 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 "esp_camera.h"
#include <WiFi.h>
#include "esp_timer.h"
#include "img_converters.h"
#include "Arduino.h"
#include "fb_gfx.h"
#include "soc/soc.h"
#include "soc/rtc_cntl_reg.h"
#include "esp_http_server.h"

// --------------------------------------------------
// Rede Wi-Fi da Vespa

// Altere "xxxxx" com os ultimos caracteres do MAC Address da sua Vespa
const char* ssid = "Vespa-xxxxx"; 

// Parametro que nao devem mudar ao menos que tenha sido mudado no codigo da Vespa
const char* password = "robocore";

// --------------------------------------------------
// Definices padroes para o funcionamento do ESP32-CAM
// --- NAO ALTERAR ---
#define PART_BOUNDARY "123456789000000000000987654321"
#define PWDN_GPIO_NUM     32
#define RESET_GPIO_NUM    -1
#define XCLK_GPIO_NUM      0
#define SIOD_GPIO_NUM     26
#define SIOC_GPIO_NUM     27
#define Y9_GPIO_NUM       35
#define Y8_GPIO_NUM       34
#define Y7_GPIO_NUM       39
#define Y6_GPIO_NUM       36
#define Y5_GPIO_NUM       21
#define Y4_GPIO_NUM       19
#define Y3_GPIO_NUM       18
#define Y2_GPIO_NUM        5
#define VSYNC_GPIO_NUM    25
#define HREF_GPIO_NUM     23
#define PCLK_GPIO_NUM     22

// --------------------------------------------------
// Definices padroes para o funcionamento da transmissao de video
static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";
httpd_handle_t stream_httpd = NULL;

// --------------------------------------------------
// Funcao de controle da transmissao
static esp_err_t stream_handler(httpd_req_t *req){
  camera_fb_t * fb = NULL;
  esp_err_t res = ESP_OK;
  size_t _jpg_buf_len = 0;
  uint8_t * _jpg_buf = NULL;
  char * part_buf[64];

  res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
  if(res != ESP_OK){
    return res;
  }

  while(true){
    fb = esp_camera_fb_get();
    if (!fb) {
      Serial.println("Camera capture failed");
      res = ESP_FAIL;
    } else {
      if(fb->width > 400){
        if(fb->format != PIXFORMAT_JPEG){
          bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
          esp_camera_fb_return(fb);
          fb = NULL;
          if(!jpeg_converted){
            Serial.println("JPEG compression failed");
            res = ESP_FAIL;
          }
        } else {
          _jpg_buf_len = fb->len;
          _jpg_buf = fb->buf;
        }
      }
    }
    if(res == ESP_OK){
      size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
      res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
    }
    if(res == ESP_OK){
      res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
    }
    if(fb){
      esp_camera_fb_return(fb);
      fb = NULL;
      _jpg_buf = NULL;
    } else if(_jpg_buf){
      free(_jpg_buf);
      _jpg_buf = NULL;
    }
    if(res != ESP_OK){
      break;
    }
  }
  return res;
}

// --------------------------------------------------
// Funcao de inicializacao do servidor da camera
void startCameraServer(){
  httpd_config_t config = HTTPD_DEFAULT_CONFIG();
  config.server_port = 80;

  httpd_uri_t index_uri = {
    .uri       = "/",
    .method    = HTTP_GET,
    .handler   = stream_handler,
    .user_ctx  = NULL
  };

  if (httpd_start(&stream_httpd, &config) == ESP_OK) {
    httpd_register_uri_handler(stream_httpd, &index_uri);
  }
}

// --------------------------------------------------
// Configuracoes do codigo
void setup() {

  // Inicializa o monitor serial, e desabilita mensagens de debug do ESP32
  WRITE_PERI_REG(RTC_CNTL_BROWN_OUT_REG, 0);
  Serial.begin(115200);
  Serial.setDebugOutput(false);
  
  // Configuracoes da camera
  camera_config_t config;
  config.ledc_channel = LEDC_CHANNEL_0;
  config.ledc_timer = LEDC_TIMER_0;
  config.pin_d0 = Y2_GPIO_NUM;
  config.pin_d1 = Y3_GPIO_NUM;
  config.pin_d2 = Y4_GPIO_NUM;
  config.pin_d3 = Y5_GPIO_NUM;
  config.pin_d4 = Y6_GPIO_NUM;
  config.pin_d5 = Y7_GPIO_NUM;
  config.pin_d6 = Y8_GPIO_NUM;
  config.pin_d7 = Y9_GPIO_NUM;
  config.pin_xclk = XCLK_GPIO_NUM;
  config.pin_pclk = PCLK_GPIO_NUM;
  config.pin_vsync = VSYNC_GPIO_NUM;
  config.pin_href = HREF_GPIO_NUM;
  config.pin_sscb_sda = SIOD_GPIO_NUM;
  config.pin_sscb_scl = SIOC_GPIO_NUM;
  config.pin_pwdn = PWDN_GPIO_NUM;
  config.pin_reset = RESET_GPIO_NUM;
  config.xclk_freq_hz = 20000000;
  config.pixel_format = PIXFORMAT_JPEG; 
  
  // Configuracoes da imagem
  if(psramFound()){
    config.frame_size = FRAMESIZE_VGA;
    config.jpeg_quality = 10;
    config.fb_count = 2;
  } else {
    config.frame_size = FRAMESIZE_QVGA;
    config.jpeg_quality = 12;
    config.fb_count = 1;
  }
  
  // Initializacao da camera
  esp_err_t err = esp_camera_init(&config);
  if (err != ESP_OK) {
    Serial.printf("Erro na inicializacao da camera 0x%x", err);
    return;
  }

  // Conexao Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi conectada");
  
  // Incializa o servidor de transmissao
  startCameraServer();
}

// --------------------------------------------------
// Repeticao do codigo
void loop() {
  delay(1000);
}

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

Explicação do Código

Nesse código, o ESP32-CAM se conecta à rede criada pela Vespa e, assim que conectado, acessa o servidor assíncrono criado por ela. Com isso, o ESP32-CAM é capaz de enviar em tempo real a imagem coletada por sua câmera para a página Web de controle do Rocket Tank.

Como o servidor é assíncrono, o controle do robô e a exibição de vídeo são executados de forma paralela, não havendo interferência ou atraso no controle do robô ou na exibição da imagem.

Montagem do Rocket Tank

Com os códigos gravados em ambas as placas, podemos montar o Rocket Tank. Para isso, siga o manual de montagem do Rocket Tank através do botão a seguir:

Manual de Montagem do 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 seguir o manual de montagem abaixo:

Manual de Montagem do Suporte de Bateriais ao Rocket Tank

Montagem Eletrônica do Projeto

Com a estrutura montada e as placas programadas, monte o circuito a seguir:

circuito-eletrico-projeto — Circuito Elétrico do Projeto

O Que Deve Acontecer

Com o robô montado, ligue a Vespa e, consequentemente, o ESP32-CAM, movendo a chave liga-desliga da Vespa para a posição ON com as baterias 18650 conectadas ao seu suporte no robô. Após alguns instantes, a rede Wi-Fi da Vespa será gerada, o ESP32-CAM se conectará à ela e o controle com monitoramento de imagem estará disponível para acesso. Se conecte à rede da Vespa utilizando a senha robocore e, assim que estiver conectado, acesse o endereço de IP 192.168.4.1. Ao acessar o endereço de IP pelo seu navegador, será aberta a página Web de controle, como na imagem abaixo:

pagina-controle-web — Página de Controle com Imagem

Neste momento, mova o joystick da página para que o robô se mova e você consiga ver pela transmissão ao vivo do ESP32-CAM por onde está passando, como no GIF abaixo:

Resultado Final

A transmissão de vídeo também pode ser diretamente acessada enquanto estiver conectado à rede da Vespa. Para isso, basta acessar o IP 192.168.4.2.

Conclusão

Neste tutorial, vimos como realizar o controle do Web de um robô com a Vespa e como exibir em tempo real o vídeo coletado pelo ESP32-CAM.

Indo Além

Por mais que o uso da Vespa com o Access Point funcione consideravelmente bem, o seu alcance não é dos melhores. Uma solução que pode aumentar o alcance do controle do robô é a conexão da Vespa e do ESP32-CAM em uma rede local gerada por um roteador, já que estes dispositivos possuem antenas mais robustas para maior alcance.