Projeto - BatSinal

This tutorial is not available in English

Projeto BatSinal - Com a BlackBoard Edge

O projeto BatSinal Web consiste no acionamento de um LED de alta potência (3W) utilizando a BlackBoard Edge com interface Web. A ideia é controlar um "holofote"; compacto diretamente pelo navegador do celular ou computador, desde que esteja na mesma rede Wi-Fi.

Atenção: o LED 3W trabalha com corrente elevada (~700mA) e não pode ser ligado diretamente ao pino da BlackBoard Edge. É obrigatório utilizar uma fonte/regulador para protoboard ajustado em 3,3 V para alimentar o LED de 3W. O GND deve ser comum entre a fonte e a BlackBoard Edge.

Visão geral (material impresso)

BatSinal - material impresso (antes da correção da base para suportar a BlackBoard Edge + Protoboard) — Material impresso (antes da correção da base para suportar a BlackBoard Edge + Protoboard).

BatSinal - Resultado — Quando em Uso, no celular, fica pulsando o simbolo quando Led ON.

BatSinal - Montado e fixo — Montado como ficou.

Lista de materiais

1x BlackBoard Edge (compatível com Arduino IDE)
1x Módulo LED Alta Potência Branco 3W (3,3?3,6V / 700mA)
1x Fonte ajustável para protoboard
1x Protoboard 400 pinos
1x Fonte 9V 1A
Jumpers macho-fêmea
Jumpers macho-macho
Filamento Preto PLA Hyper Series
Disco redondo de acrílico de 90,5 mm por 3 mm.
Se você não tiver acrílico, pode usar o plástico transparente de capa de CD/DVD (ou outro plástico fino). Use um compasso para marcar o círculo na medida e depois recorte.

Arquivos para impressão 3D

Abaixo está o arquivo 3MF do projeto. A base foi pensada para manter os componentes dentro do corpo do BatSinal.

Arquivo 3MF BatSinal (.3mf)

Funcionamento do sistema

A placa BlackBoard Edge controla o LED através do pino GPIO 13. A alimentação do LED vem do regulador ajustado em 3,3 V, mantendo o GND comum com a BlackBoard Edge.

O controle é feito via página web. Com a BlackBoard Edge conectado ao Wi-Fi, basta abrir o endereço IP exibido no Serial Monitor e tocar no símbolo do BatSinal para ligar/desligar.

Ligações (conceito)

GPIO 13: sinal de controle do LED (PWM)
GND: o GND do regulador deve estar conectado ao GND da BlackBoard Edge
3,3 V: do regulador vai para o LED 3W

Código

O código abaixo cria a interface web com o símbolo do BatSinal como botão, realiza fade suave ao ligar/desligar e aplica efeito breathing quando ligado. Também inclui reconexão automática ao Wi-Fi.

/************************************************************************************
 /************************************************************************************
 * Projeto: Batsinal Web (BlackBoard Edge + LED 3W)
 * Versão otimizada -- SVG como Botão + Fade + Breathing + Reconnect Wi-Fi
 * Autor: Alexandre Casemonstro
 *
 * IMPORTANTE
 *  - Este sketch está compatível com o core ESP32 3.x (Arduino-ESP32 3.x):
 *      * usa ledcAttach(pin, freq, resolution)
 *      * usa ledcWrite(pin, duty)
 *
 * O QUE ESTE CÓDIGO FAZ
 *  - Controla um LED de alta potência 3W (via MOSFET/driver) usando a BlackBoard Edge.
 *  - Interface Web (tema escuro) onde o próprio SVG do Batsinal é o botão ON/OFF:
 *      OFF --> cinza
 *      ON  --> amarelo + glow pulsando (CSS)
 *  - LED físico:
 *      - Ao ligar: FADE linear (suave) até o brilho máximo
 *      - Ligado: animação "breathing" (respiração) via PWM
 *      - Ao desligar: FADE linear até apagar
 *  - Wi-Fi robusto:
 *      - Conecta no Wi-Fi e imprime SSID/IP no Serial
 *      - Se cair, tenta reconectar automaticamente (sem travar)
 *
 * HARDWARE (IMPORTANTÍSSIMO)
 *  - LED 3W (~700mA) NÃO pode ser ligado direto na BlackBoard Edge.
 *  - GPIO 13 deve acionar um MOSFET lógico (low-side) ou um driver de corrente.
 *  - Dissipador no LED 3W é obrigatório.
 *
 * OTIMIZAÇÕES IMPORTANTES
 *  - Projeto otimizado e preparado para reconexão se necessario;
 ************************************************************************************/

#include <WiFi.h>
#include <WebServer.h>
#include <math.h>

// =========================
// WIFI (edite aqui)
// =========================
const char* WIFI_SSID = "SuaRedeWifi";
const char* WIFI_PASS = "SuaSenhaWifi";

// =========================
// PINO DE CONTROLE (PWM) ? MOSFET / DRIVER
// =========================
#define LED_CTRL_PIN 13

// =========================
// PWM (LEDC) ? EDGE 
// =========================
static const int PWM_FREQ = 5000; // Hz
static const int PWM_RES  = 10;   // bits (0..1023)
static const int PWM_MAX  = (1 << PWM_RES) - 1;

// Limite de brilho máximo (ajuste se quiser menos calor)
// 1023 = 100%
static const int BRIGHT_MAX = 900;

// Fade linear (ms)
static const unsigned long FADE_MS = 700;

// Breathing (respiração)
static const unsigned long BREATH_PERIOD_MS = 2200;
static const float BREATH_MIN = 0.35f;
static const float BREATH_MAX = 1.00f;

// PI seguro (evita depender de M_PI existir)
static const float PI_F = 3.14159265f;

// =========================
// WEB SERVER
// =========================
WebServer server(80);

// =========================
// ESTADO DO SISTEMA
// =========================
bool targetOn = false;        // intenção do usuário (web)
bool breathingEnabled = false;

int currentBright = 0;        // PWM atual (0..BRIGHT_MAX)

// Fade
bool inFade = false;
int fadeStartBright = 0;
int fadeTargetBright = 0;
unsigned long fadeStartMs = 0;

// Breathing timing
unsigned long breathStartMs = 0;

// Wi-Fi / reconexão
bool wifiConnected = false;
unsigned long lastWiFiCheck = 0;
static const unsigned long WIFI_CHECK_MS = 1500;

unsigned long lastReconnectAttempt = 0;
static const unsigned long RECONNECT_INTERVAL_MS = 4000;

int reconnectFails = 0;
static const int RECONNECT_FAILS_BEFORE_BEGIN = 4; // após X falhas, refaz WiFi.begin()

// =============================================================================
// HTML / CSS / JS (templates)
// =============================================================================

// SVG do Batsinal (seu desenho), com fundo (bg) controlado por CSS
static const char* SVG_BAT =
  "<svg class='bat' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.13 69.89' aria-label='Batsinal'>"
  "  <path class='bg' d='M121.06,35c0,18.71-26.86,33.88-60,33.88S1.06,53.66,1.06,35s26.87-33.89,60-33.89,60,15.17,60,33.89Z'/>"
  "  <path class='batmark' d='M51.72,24.46c-14.49,5.37-21.86-8-14.49-15.74-11.75,3-30.86,11.49-30.86,25.63,0,12.83,12.49,20.09,21.49,23.22-8.68-10.74,3.25-19.16,13.7-7.41C49.69,35.73,59.28,56.44,61,59.58h0c1.71-3.14,11.31-23.85,19.44-9.42,10.45-11.75,22.38-3.33,13.7,7.41,9-3.13,21.49-10.39,21.49-23.22,0-14.14-19.11-22.63-30.86-25.63,7.37,7.74,0,21.11-14.49,15.74-1.67-2-2.75-6.11-2.75-18.24-1.94,1.26-3.33,5.71-3.45,6a12,12,0,0,0-6.15,0c-.12-.32-1.51-4.77-3.45-6,0,12.13-1.08,16.25-2.75,18.24ZM122.13,35c0,9.76-6.93,18.56-18.12,24.88-11,6.22-26.2,10.06-42.95,10.06S29.13,66.05,18.12,59.83C6.92,53.51,0,44.71,0,35S6.92,16.39,18.12,10.07C29.13,3.85,44.32,0,61.06,0S93,3.85,104,10.07C115.2,16.39,122.13,25.18,122.13,35ZM103,58c10.52-5.94,17-14.09,17-23s-6.51-17.1-17-23c-10.7-6-25.52-9.78-41.91-9.78s-31.2,3.74-41.9,9.78C8.64,17.85,2.13,26,2.13,35S8.64,52,19.16,58c10.7,6.05,25.52,9.79,41.9,9.79S92.27,64,103,58Z'/>"
  "</svg>";

static const char* HTML_HEAD =
  "<!DOCTYPE html><html><head><meta charset='utf-8'>"
  "<meta name='viewport' content='width=device-width, initial-scale=1'>"
  "<title>Batsinal</title>"
  "<style>"
  ":root{--bg:#0b0f14;--card:#111824;--text:#e7eef7;--muted:#9aa7b5;--line:#1b2a3a;}"
  "body{margin:0;font-family:Arial;background:var(--bg);color:var(--text);}"
  ".wrap{max-width:620px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:14px;}"
  ".card{background:linear-gradient(180deg,var(--card),#0d141f);border:1px solid var(--line);border-radius:16px;padding:16px;}"
  "h2{margin:0;font-size:22px;letter-spacing:.2px}"
  ".mini{font-size:13px;color:var(--muted);line-height:1.5;margin:8px 0 0 0}"
  ".center{display:flex;justify-content:center;align-items:center}"
  ".row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}"
  ".badge{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid var(--line)}"
  ".badge.on{background:#13311f;color:#c9ffd8}"
  ".badge.off{background:#1a1f27;color:#d8d8d8}"
  "button.batbtn{border:0;background:transparent;padding:0;cursor:pointer;outline:none}"
  "button.batbtn:active{transform:scale(0.985)}"
  "svg.bat{width:min(460px,95vw);height:auto;display:block}"
  ".bg{transition:fill 420ms ease}"
  "button.batbtn.off .bg{fill:#7f8793}"
  "button.batbtn.on .bg{fill:#f7dd30}"
  ".batmark{fill:#0b0b0b}"
  "button.batbtn.off svg{filter:drop-shadow(0 0 6px rgba(0,0,0,.25));}"
  "button.batbtn.on svg{animation:glowPulse 2.2s ease-in-out infinite;}"
  "@keyframes glowPulse{"
  "0%,100%{filter:drop-shadow(0 0 10px rgba(247,221,48,.35)) drop-shadow(0 0 18px rgba(247,221,48,.20));}"
  "50%{filter:drop-shadow(0 0 18px rgba(247,221,48,.70)) drop-shadow(0 0 30px rgba(247,221,48,.35));}"
  "}"
  ".hint{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}"
  "</style></head><body>";

static const char* HTML_TAIL =
  "<script>"
  "async function refreshState(){"
  " try{"
  "  const r=await fetch('/state');"
  "  const j=await r.json();"
  "  const on=!!j.on;"
  "  const btn=document.getElementById('batBtn');"
  "  const badge=document.getElementById('badge');"
  "  btn.classList.toggle('on',on);"
  "  btn.classList.toggle('off',!on);"
  "  badge.classList.toggle('on',on);"
  "  badge.classList.toggle('off',!on);"
  "  badge.textContent='Estado: '+(on?'ON':'OFF');"
  " }catch(e){}"
  "}"
  "async function toggleLed(){"
  " try{await fetch('/toggle');}catch(e){}"
  " setTimeout(refreshState,120);"
  "}"
  "setInterval(refreshState,1200);"
  "</script></body></html>";

// =============================================================================
// PWM / LED (educacional)
// =============================================================================

/*
  setPwmBright(value)
  - Controla o brilho via PWM.
  - No core ESP32 3.x, ledcWrite recebe (PIN, duty).
*/
void setPwmBright(int value) {
  value = constrain(value, 0, BRIGHT_MAX);
  currentBright = value;
  ledcWrite(LED_CTRL_PIN, value); // <<< core 3.x: escreve no PIN
}

/*
  startFadeTo(target, nowMs)
  - Inicia fade linear do brilho atual até o alvo.
*/
void startFadeTo(int target, unsigned long nowMs) {
  inFade = true;
  fadeStartMs = nowMs;
  fadeStartBright = currentBright;
  fadeTargetBright = constrain(target, 0, BRIGHT_MAX);
}

/*
  updateFade(nowMs)
  - Atualiza o fade linear baseado no tempo.
*/
void updateFade(unsigned long nowMs) {
  if (!inFade) return;

  unsigned long elapsed = nowMs - fadeStartMs;
  if (elapsed >= FADE_MS) {
    setPwmBright(fadeTargetBright);
    inFade = false;
    return;
  }

  float t = (float)elapsed / (float)FADE_MS;
  int v = (int)roundf((1.0f - t) * fadeStartBright + t * fadeTargetBright);
  setPwmBright(v);
}

/*
  breathingValue(nowMs)
  - Respiração suave com cosseno (0..1..0).
*/
int breathingValue(unsigned long nowMs) {
  unsigned long t = (nowMs - breathStartMs) % BREATH_PERIOD_MS;
  float phase = (float)t / (float)BREATH_PERIOD_MS; // 0..1

  float wave = 0.5f - 0.5f * cosf(2.0f * PI_F * phase); // 0..1
  float level = BREATH_MIN + wave * (BREATH_MAX - BREATH_MIN);

  return (int)roundf(level * (float)BRIGHT_MAX);
}

/*
  updateLed(nowMs)
  - Atualiza LED (fade + breathing).
*/
void updateLed(unsigned long nowMs) {
  updateFade(nowMs);

  if (!inFade && breathingEnabled) {
    setPwmBright(breathingValue(nowMs));
  }
}

// =============================================================================
// LÓGICA ON/OFF
// =============================================================================
void requestOn(unsigned long nowMs) {
  breathingEnabled = false;       // breathing só começa após o fade
  startFadeTo(BRIGHT_MAX, nowMs); // fade linear até o máximo
}

void requestOff(unsigned long nowMs) {
  breathingEnabled = false; // para breathing
  startFadeTo(0, nowMs);    // fade linear até 0
}

/*
  postTransition(nowMs)
  - Quando o fade termina em BRIGHT_MAX e targetOn=true, inicia breathing.
*/
void postTransition(unsigned long nowMs) {
  if (targetOn && !inFade && currentBright >= BRIGHT_MAX) {
    if (!breathingEnabled) {
      breathingEnabled = true;
      breathStartMs = nowMs;
    }
  }
}

// =============================================================================
// HTML: monta página com poucas concatenações (mais estável)
// =============================================================================
String buildHtmlPage() {
  const bool uiOn = targetOn;
  const char* stateClass = uiOn ? "on" : "off";
  const char* stateText  = uiOn ? "ON" : "OFF";

  String s;
  s.reserve(7000);

  s += HTML_HEAD;

  s += "<div class='wrap'>"
       "<div class='card'>"
       "<h2>Batsinal Web</h2>"
       "<p class='mini'>Toque no símbolo para ligar/desligar.</p>"
       "</div>";

  s += "<div class='card center'>"
       "<button id='batBtn' class='batbtn ";
  s += stateClass;
  s += "' onclick='toggleLed()' aria-label='Alternar Batsinal'>";
  s += SVG_BAT;
  s += "</button></div>";

  s += "<div class='card'>"
       "<div class='row'>"
       "<span id='badge' class='badge ";
  s += stateClass;
  s += "'>Estado: ";
  s += stateText;
  s += "</span></div>"
       "<div class='hint'>IP aparece no Serial Monitor quando conectar no Wi-Fi.</div>"
       "</div></div>";

  s += HTML_TAIL;
  return s;
}

// =============================================================================
// ROTAS HTTP
// =============================================================================
void handleRoot() {
  server.send(200, "text/html", buildHtmlPage());
}

void handleToggle() {
  targetOn = !targetOn;

  unsigned long nowMs = millis();
  if (targetOn) requestOn(nowMs);
  else          requestOff(nowMs);

  server.send(200, "text/plain", "ok");
}

void handleState() {
  String s;
  s.reserve(64);
  s += "{\"on\":";
  s += (targetOn ? "1" : "0");
  s += ",\"wifi\":";
  s += (WiFi.status() == WL_CONNECTED ? "1" : "0");
  s += "}";
  server.send(200, "application/json", s);
}

// =============================================================================
// WIFI: conectar / reconectar
// =============================================================================
void printWiFiInfo() {
  Serial.println("\n? WIFI CONECTADO!");
  Serial.println("--------------------------------");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  Serial.print("IP Local: ");
  Serial.println(WiFi.localIP());

  Serial.print("Gateway: ");
  Serial.println(WiFi.gatewayIP());

  Serial.print("Mascara de Rede: ");
  Serial.println(WiFi.subnetMask());

  Serial.print("RSSI (sinal): ");
  Serial.print(WiFi.RSSI());
  Serial.println(" dBm");

  Serial.println("--------------------------------");
  Serial.print("Acesse no navegador: http://");
  Serial.println(WiFi.localIP());
  Serial.println("--------------------------------\n");
}

bool connectWiFiBlocking(unsigned long timeoutMs) {
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASS);

  Serial.println("\n==============================");
  Serial.println(" BATSINAL EDGE - INICIALIZANDO");
  Serial.println("==============================");
  Serial.print("Conectando na rede: ");
  Serial.println(WIFI_SSID);
  Serial.println("Aguarde...");

  unsigned long start = millis();
  while (WiFi.status() != WL_CONNECTED && (millis() - start) < timeoutMs) {
    delay(350);
    Serial.print(".");
  }
  Serial.println();

  if (WiFi.status() == WL_CONNECTED) {
    wifiConnected = true;
    reconnectFails = 0;
    printWiFiInfo();
    return true;
  }

  wifiConnected = false;
  Serial.println("? FALHA AO CONECTAR NO WIFI");
  return false;
}

/*
  updateWiFi(nowMs)
  - Checa se caiu e reconecta automaticamente.
*/
void updateWiFi(unsigned long nowMs) {
  if (nowMs - lastWiFiCheck < WIFI_CHECK_MS) return;
  lastWiFiCheck = nowMs;

  if (WiFi.status() == WL_CONNECTED) {
    if (!wifiConnected) {
      wifiConnected = true;
      reconnectFails = 0;
      printWiFiInfo();
    }
    return;
  }

  // Caiu/offline
  wifiConnected = false;

  if (nowMs - lastReconnectAttempt < RECONNECT_INTERVAL_MS) return;
  lastReconnectAttempt = nowMs;

  Serial.println("?? Wi-Fi offline. Tentando reconectar...");
  WiFi.reconnect();
  reconnectFails++;

  if (reconnectFails >= RECONNECT_FAILS_BEFORE_BEGIN) {
    reconnectFails = 0;
    Serial.println("?? Muitas falhas. Re-iniciando conexão com WiFi.begin(...)");
    WiFi.disconnect(false, false); // não apaga credenciais
    WiFi.begin(WIFI_SSID, WIFI_PASS);
  }
}

// =============================================================================
// SETUP / LOOP
// =============================================================================
void setup() {
  Serial.begin(115200);

  // PWM no pino 13 (core 3.x)
  // ledcAttach(pin, freq, resolution)
  ledcAttach(LED_CTRL_PIN, PWM_FREQ, PWM_RES);

  // Estado inicial: OFF
  targetOn = false;
  inFade = false;
  breathingEnabled = false;
  setPwmBright(0);

  // Conecta no Wi-Fi (10s)
  bool ok = connectWiFiBlocking(10000);

  // Servidor HTTP
  server.on("/", handleRoot);
  server.on("/toggle", handleToggle);
  server.on("/state", handleState);
  server.begin();
  Serial.println("Servidor HTTP iniciado.");

  if (!ok) {
    Serial.println("Dica: quando reconectar, veja o IP no Serial Monitor.");
  }
}

void loop() {
  unsigned long nowMs = millis();

  updateWiFi(nowMs);
  server.handleClient();

  updateLed(nowMs);
  postTransition(nowMs);

  delay(8);
}

Projeção

Uma parte divertida deste projeto é a possibilidade de personalizar a projeção. Você pode trocar o símbolo do Batman por outros símbolos, de forma simples, e assim brincar com diferentes projeções.

Se quiser um efeito físico ainda mais interessante, você também pode colar um elemento no meio do disco (acrílico/plástico), ou até usar uma imagem recortada posicionada no centro, criando novas silhuetas quando o ?holofote? estiver ligado.

Boas práticas e segurança

Nunca ligue o LED 3W diretamente no EDGE.
Use um dissipador de calor adequado no LED 3W.
Prefira fonte para o regulador com no mínimo 1A.
Mantenha todos os GNDs em comum (A EDGE e alimentação do LED).