PROJETO: INTERFACE WEB PARA CONTROLADOR MIDI (ESP32)
DESCRIÇÃO GERAL: Este código implementa uma interface web completa embarcada no ESP32 para configuração de um controlador MIDI com 12 botões (foot controller). A interface permite editar, salvar, carregar e navegar entre presets diretamente pelo navegador.
FUNCIONALIDADES PRINCIPAIS:
- INTERFACE WEB RESPONSIVA
-
Layout escuro com tema verde (estilo terminal)
-
Grid com 12 botões (BTN 1 até BTN 12)
-
Responsivo:
- 6 colunas em desktop
- 3 colunas em telas menores (mobile)
- CONFIGURAÇÃO DE PRESET Campos disponíveis:
- Nome do preset (até 12 caracteres)
- Banco (até 12 caracteres)
- Número do preset (limitado de 1 a 2)
- CONTROLE DE PRESETS Botões disponíveis:
- Preset - → navega para o anterior
- New Preset → cria novo preset
- Preset + → navega para o próximo
Comportamento:
- Detecta presets existentes
- Indica se o preset é novo ou existente
- Limita a apenas 2 presets
- Carrega automaticamente se existir
- Inicializa valores padrão ao criar novo preset
- COMUNICAÇÃO COM ESP32
WEB SOCKET (porta 81):
- Atualização em tempo real da interface
- Sincronização automática de estado
- Reconexão automática em caso de falha
HTTP ENDPOINTS:
- GET /state → retorna estado atual
- GET /checkPreset → verifica existência
- GET /loadPreset → carrega preset
- POST /save → salva preset
- CONFIGURAÇÃO DOS BOTÕES (12 FOOTSWITCHES)
Cada botão possui:
MODOS DE OPERAÇÃO:
- Single Press
- Long Press
- ON/OFF (toggle)
- Single + Long
- ON/OFF + Long
- TIPOS DE COMANDO MIDI
Para cada ação:
- PC (Program Change)
- CC (Control Change)
- NOTE
- BANK+
- BANK-
- TAP
- CONFIGURAÇÕES DISPONÍVEIS POR BOTÃO
SINGLE PRESS:
- Tipo (PC, CC, NOTE...)
- Valor
- Canal
- Número CC (quando aplicável)
LONG PRESS:
- Tipo
- Valor
- Canal
TOGGLE (ON/OFF):
-
ON:
- Tipo
- Valor
- Canal
- Data ON
-
OFF:
- Tipo
- Valor
- Canal
- Data OFF
- SISTEMA DE CORES
-
Cada botão possui cor personalizada
-
Interface usa seletor HTML (color picker)
-
Conversão automática:
- HEX (web) ↔ RGB565 (display)
-
Armazenamento otimizado para display TFT
- SINCRONIZAÇÃO INTELIGENTE
- Evita sobrescrever campos em edição
- Atualiza apenas quando o campo não está em foco
- Mantém consistência entre ESP32 e navegador
- GERAÇÃO DINÂMICA DA INTERFACE
- HTML dos botões é gerado via JavaScript
- Loop automático para os 12 botões
- Reduz repetição de código
- Facilita manutenção
- VALORES PADRÃO (NOVO PRESET)
- Modo: Single Press
- Tipo: PC
- Canal: 1
- Valor: índice do botão (1 a 12)
- Cores pré-definidas
- FEEDBACK VISUAL
-
Status de conexão WebSocket
-
Indicação de preset existente/novo
-
Botão "SALVAR" com feedback:
- "SALVANDO..."
- "SALVO COM SUCESSO !!!"
- SEGURANÇA E VALIDAÇÕES
- Verificação de faixa de preset (1–2)
- Tratamento de erros HTTP
- Fallback para valores padrão
- Proteção contra dados inválidos
- ESTRUTURA DO CÓDIGO
-
HTML armazenado em PROGMEM (ESP32)
-
CSS embutido
-
JavaScript responsável por:
- Comunicação com backend
- Manipulação da interface
- Conversões de dados
RESUMO:
Este sistema transforma o ESP32 em um editor completo de presets MIDI via navegador, eliminando a necessidade de software externo. A interface é moderna, responsiva e altamente configurável, permitindo controle total sobre cada botão do pedal MIDI.
FIM DO DOCUMENTO