Pisca-Pisca Maker

Projeto

Pisca-pisca natalino para árvore de natal utilizando a Vespa. O projeto permite controlar a cor, a intensidade de brilho, a quantidade de LEDs e o intervalo em que eles piscam.
Lista de materiais

Circuito

Com os itens em mãos, basta conectar a fita de LED RGB Endereçável ao pino S1 da Vespa, e carregar o código em anexo para a placa. A Vespa irá gerar uma rede Wi-Fi que pode ser acessada por qualquer dispositivo com conexão à Internet. Com o dispositivo conectado basta acessar o endereço de IP 192.168.4.1 e controlar o seu pisca-pisca da maneira que preferir.
Código

O código abaixo foi desenvolvido para a nossa aplicação, e por isso, dependendo do seu projeto, pode ser que seja necessário algumas adaptações.
/*******************************************************************************
* Controle web de uma fita LED RGB enderecavel com a Vespa por WebSocket
* (v1.0 - 07/11/2023)
*
* Copyright 2023 RoboCore.
* Criado por Giovanni5
*
* 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 <Adafruit_NeoPixel.h>  // https://github.com/adafruit/Adafruit_NeoPixel
#include <Adafruit_NeoPixel.h>  // https://github.com/adafruit/Adafruit_NeoPixel

// --------------------------------------------------
// 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_COR = "cor";
const char *ALIAS_VALOR = "valor";

#define PIN 26

#define NUMPIXELS 120

Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

int rgb[6] = { 0, 0, 0, 0, 0, 0 };
bool pisca = true;
unsigned long tempo_pisca = 0;
uint8_t conta_leds = 0;
bool arco_iris = false;

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

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

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

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

        body {
            overflow: hidden;
            -moz-user-select: none; 
            -webkit-user-select: none;
            -ms-user-select:none; 
            user-select:none;
            -o-user-select:none;
        }

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

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

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

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

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

        .slider::-moz-range-thumb {
            width: 50px; /* Set a specific slider handle width */
            height: 50px; /* Slider handle height */
            background: #04AA6D; /* Green background */
            cursor: pointer; /* Cursor on hover */
        }
    </style>

</head>

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

    <div style="line-height: 26px; background-color: black; padding: 10px; padding-bottom: 0px;">

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

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

    </div>

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

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

                <input type="range" min="0" max="255" value="0" class="slider" id="s1" style="background: red">
                <input type="range" min="0" max="255" value="0" class="slider" id="s2" style="background: green">
                <input type="range" min="0" max="255" value="0" class="slider" id="s3" style="background: blue">
                <input type="range" min="0" max="100" value="0" class="slider" id="s4" style="background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(125,125,125,0) 85%, rgba(255,255,255,1) 100%);">
                <input type="range" min="0" max="10" value="0" class="slider" id="s5" style="background-image: linear-gradient(90deg, #a3a3a3 25%, #61615e 25%, #61615e 50%, #a3a3a3 50%, #a3a3a3 75%, #61615e 75%, #61615e 100%);">
                <input type="range" min="0" max="500" value="0" class="slider" id="s6" style="background-image: linear-gradient(45deg, #a3a3a3 25%, #61615e 25%, #61615e 50%, #a3a3a3 50%, #a3a3a3 75%, #61615e 75%, #61615e 100%);">
            </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);
        };
        
        function send_slider(slider_id, value){
            var data = {'cor': slider_id, 'valor': parseInt(value)};
            data = JSON.stringify(data);
            console.log('Slider data: ', data);
            connection.send(data);
        }

    </script>

    <script>

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

    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.getElementById('s5').addEventListener('input', (e) => { send_slider(5, e.target.value); });
    document.getElementById('s6').addEventListener('input', (e) => { send_slider(6, 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;
        document.getElementById("ds5").innerHTML = s5.value;
        document.getElementById("ds6").innerHTML = s6.value;
    }, false);

    </script>

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

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

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

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

void rainbow(int wait) {
  for (long firstPixelHue = 0; firstPixelHue < 5 * 65536; firstPixelHue += 256) {
    if (digitalRead(35) == LOW) {
      delay(30);
      if (digitalRead(35) == LOW) {
        arco_iris = !arco_iris;
        while (digitalRead(35) == LOW)
          ;
        break;
      }
    }
    for (int i = 0; i < pixels.numPixels(); i++) {
      int pixelHue = firstPixelHue + (i * 65536L / pixels.numPixels());
      pixels.setPixelColor(i, pixels.gamma32(pixels.ColorHSV(pixelHue)));
    }
    pixels.show();
    delay(wait);
  }
}

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

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

  pixels.begin();

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

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

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

void loop() {

  if (!arco_iris) {
    if ((millis() - tempo_pisca) > rgb[5]) {
      pixels.clear();

      for (int i = 0; i < NUMPIXELS; i++) {

        if (rgb[4] > 0) {
          conta_leds++;
          if (conta_leds <= rgb[4] + 1) {
            if (pisca) {
              pixels.setPixelColor(i, pixels.Color(rgb[0], rgb[1], rgb[2]));
            } else {
              pixels.setPixelColor(i, pixels.Color(0, 0, 0));
            }

          } else if (conta_leds <= (rgb[4] * 2) + 1) {
            if (!pisca) {
              pixels.setPixelColor(i, pixels.Color(rgb[0], rgb[1], rgb[2]));
            } else {
              pixels.setPixelColor(i, pixels.Color(0, 0, 0));
            }
          } else {
            conta_leds = 0;
            if (pisca) {
              pixels.setPixelColor(i, pixels.Color(rgb[0], rgb[1], rgb[2]));
            } else {
              pixels.setPixelColor(i, pixels.Color(0, 0, 0));
            }
          }
        } else {
          pixels.setPixelColor(i, pixels.Color(rgb[0], rgb[1], rgb[2]));
        }
      }
      pixels.setBrightness(rgb[3]);
      pixels.show();  // Send the updated pixel colors to the hardware.
      pisca = !pisca;
      tempo_pisca = millis();
    }
  } else {
    pixels.setBrightness(100);
    rainbow(50);
  }

  if (digitalRead(35) == LOW) {
    delay(30);
    if (digitalRead(35) == LOW) {
      arco_iris = !arco_iris;
      while (digitalRead(35) == LOW)
        ;
    }
  }
}

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

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

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

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

    // verifica se eh para controlar um servo motor
    if (strstr(reinterpret_cast<char *>(data), ALIAS_COR) != 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 valor = json[ALIAS_VALOR];  // [0;180]
      int16_t cor = json[ALIAS_COR];      // [1-4]

      // debug
      Serial.print("Servo: ");
      Serial.print(cor);
      Serial.print(" | Angulo: ");
      Serial.println(valor);
      rgb[cor - 1] = valor;

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

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