PicoWebTerminal
network
network/PicoWebTerminal.h
network
stable
stable
Tool: PicoWebTerminal Terminal web de debug/monitoring : sert une page unique affichant une console de logs colorés en temps réel (info/succès/warning/erreur/debug) et une sidebar de widgets (LED, texte, bouton) reflétant l'état de vos capteurs/actionneurs. Communication bidirectionnelle via WebSocket
Méthodes publiques
| Méthode | Description | Paramètres | Retour |
|---|---|---|---|
|
PicoWebTerminal()
PicoWebTerminal(const String& name = "Pico Web Terminal",
uint16_t httpPort = 80,
uint16_t wsPort = 81);
|
|||
|
begin()
begin();
|
|||
|
loop()
loop();
|
|||
|
startAP()
startAP(const String& ssid, const String& password = "", int channel = 1);
|
|||
|
connectToWiFi()
connectToWiFi(const String& ssid, const String& password);
|
|||
|
addLedWidget()
addLedWidget(const String& id, const String& label, const String& color = "#ffffff");
|
|||
|
addTextWidget()
addTextWidget(const String& id, const String& label,
const String& initialValue = "", const String& color = "#ffffff");
|
|||
|
addButtonWidget()
addButtonWidget(const String& id, const String& label,
const String& buttonText, const String& color = "blue");
|
|||
|
updateWidget()
updateWidget(const String& id, const String& value);
|
|||
|
setLedState()
setLedState(const String& id, bool state, LedStyle style = LED_STATIC);
|
|||
|
setWidgetColor()
setWidgetColor(const String& id, const String& color);
|
|||
|
log()
log(const String& source, const String& message, const String& color);
|
|||
|
logInfo()
logInfo(const String& message);
|
|||
|
logWarning()
logWarning(const String& message);
|
|||
|
logError()
logError(const String& message);
|
|||
|
logSuccess()
logSuccess(const String& message);
|
|||
|
logDebug()
logDebug(const String& message);
|
|||
|
clear()
clear();
|
|||
|
setTheme()
setTheme(Theme theme);
|
|||
|
getCurrentTheme()
getCurrentTheme() const {
|
|||
|
executeCommand()
executeCommand(const String& commandLine);
|
|||
|
escapeHtml()
escapeHtml(const String& text);
|
|||
|
getTimestamp()
getTimestamp();
|
Méthodes privées
findWidget(const String& id);;
findWidget(const String& id) const;;
handleBlinkEffects();;
sendLedUpdate(const String& ledId, const String& color = "");;
sendWidgetSingleUpdate(const String& widgetId);;
broadcastWidgets();;
sendWidgetUpdate(uint8_t clientNum);;
broadcastMessage(const TerminalMessage& msg);;
sendToWebSocket(uint8_t clientNum, const TerminalMessage& msg);;
cleanOldMessages();;
applyThemeToClient(uint8_t clientNum);;
generateCSS(Theme theme) const;;
generateSidebarHTML() const;;
terminal("CREPP.io Monitor", 80, 81);;
begin(115200);;
startAP("Pico_CREPP", "12345678");;
begin();;
addLedWidget("capteur", "Capteur", "#55ff55");;
setLedState("capteur", true, PicoWebTerminal::LED_STATIC);;
addTextWidget("temp", "Temperature", "-- C", "#ff5555");;
addButtonWidget("led", "LED integree", "Basculer", "blue");;
setButtonCallback([](const String& buttonId){;
if (buttonId == "led") {;
logSuccess("Point d'acces WiFi actif");;
loop();;
millis();;
Variables membres
String source;
String message;
String color;
long timestamp;
String name;
return currentTheme;
String terminalName;
size_t maxHistory;
long lastCleanup;
long lastWidgetUpdate;
Theme currentTheme;
Theme userThemePreference;
Code source
#ifndef PICOWEBTERMINAL_H
#define PICOWEBTERMINAL_H
#include <Arduino.h>
#include <WiFi.h>
#include <WebSocketsServer.h>
#include "Widget.h"
#include "WebSocketAppBase.h"
#include <list>
#include <map>
#include <vector>
#include "../StatusDevice.h"
namespace crepp::network {
// ==================== Structures ====================
struct TerminalMessage {
String source;
String message;
String color;
unsigned long timestamp;
TerminalMessage(const String& s = "", const String& m = "", const String& c = "info");
String toJson() const;
};
struct Command {
String name;
std::vector<String> args;
};
// ==================== Classe principale ====================
/*
* =========================
* Tool: PicoWebTerminal
* -------------------------
* Terminal web de debug/monitoring : sert une page unique affichant une
* console de logs colorés en temps réel (info/succès/warning/erreur/debug)
* et une sidebar de widgets (LED, texte, bouton) reflétant l'état de vos
* capteurs/actionneurs. Communication bidirectionnelle via WebSocket
* (héritée de WebSocketAppBase) : commandes tapées côté navigateur exécutées
* côté Pico, mises à jour poussées côté Pico affichées en temps réel côté
* navigateur.
*
* @badge network
* @badge stable
*
* Fonctionnalités :
* - Console de logs avec historique, horodatage et couleurs par sévérité
* - Widgets LED (statique ou clignotant), texte et bouton
* - Système de commandes extensible (registerCommand), avec commandes
* intégrées (help, widgets, theme, set, ledon/ledoff, sysinfo...)
* - Thème sombre/clair, changeable depuis le navigateur ou le code
*
* @note Pour un tableau de bord orienté "pilotage" (boutons, sliders, DPad,
* champs de saisie...) plutôt que "monitoring/debug", voir
* WebControlPanel, qui partage le même socle réseau
* (WebSocketAppBase).
* =========================
*/
class PicoWebTerminal : public WebSocketAppBase {
public:
enum Theme { THEME_DARK, THEME_LIGHT };
enum LedStyle { LED_STATIC, LED_BLINK_SLOW, LED_BLINK_FAST };
PicoWebTerminal(const String& name = "Pico Web Terminal",
uint16_t httpPort = 80,
uint16_t wsPort = 81);
// Initialisation
void begin();
void loop();
// Gestion WiFi
void startAP(const String& ssid, const String& password = "", int channel = 1);
void connectToWiFi(const String& ssid, const String& password);
// Widgets
void addLedWidget(const String& id, const String& label, const String& color = "#ffffff");
void addTextWidget(const String& id, const String& label,
const String& initialValue = "", const String& color = "#ffffff");
void addButtonWidget(const String& id, const String& label,
const String& buttonText, const String& color = "blue");
void updateWidget(const String& id, const String& value);
void setLedState(const String& id, bool state, LedStyle style = LED_STATIC);
void setWidgetColor(const String& id, const String& color);
void setButtonCallback(void(*callback)(const String&));
// Logging
void log(const String& source, const String& message, const String& color);
void logInfo(const String& message);
void logWarning(const String& message);
void logError(const String& message);
void logSuccess(const String& message);
void logDebug(const String& message);
void clear();
// Thème
void setTheme(Theme theme);
Theme getCurrentTheme() const { return currentTheme; }
// Commandes
void registerCommand(const String& name, void(*handler)(PicoWebTerminal*, const Command&));
void executeCommand(const String& commandLine);
// Informations système
// getServerIP() et getConnectedClients() sont hérités de WebSocketAppBase.
// Utilitaires
static String escapeHtml(const String& text);
static String getTimestamp();
// Variables publiques (pour accès facile)
String terminalName;
std::vector<Widget> widgets;
private:
// Gestion des messages
std::list<TerminalMessage> messageHistory;
size_t maxHistory;
unsigned long lastCleanup;
unsigned long lastWidgetUpdate;
// Thème
Theme currentTheme;
Theme userThemePreference;
// Commandes
std::map<String, void(*)(PicoWebTerminal*, const Command&)> commandHandlers;
// Callback pour boutons
void(*buttonCallback)(const String&) = nullptr;
// Méthodes privées
Widget* findWidget(const String& id);
const Widget* findWidget(const String& id) const;
void handleBlinkEffects();
void sendLedUpdate(const String& ledId, const String& color = "");
void sendWidgetSingleUpdate(const String& widgetId);
void broadcastWidgets();
void sendWidgetUpdate(uint8_t clientNum);
void broadcastMessage(const TerminalMessage& msg);
void sendToWebSocket(uint8_t clientNum, const TerminalMessage& msg);
void cleanOldMessages();
// Thème et interface
void applyThemeToClient(uint8_t clientNum);
String generateCSS(Theme theme) const;
String generateSidebarHTML() const;
String generateHtmlPage() override;
};
} // namespace network
#endif // PICOWEBTERMINAL_H
/*
@example
@include
#include <crepp/network/PicoWebTerminal.h>
@end_include
@instance
crepp::network::PicoWebTerminal terminal("CREPP.io Monitor", 80, 81);
@end_instance
@setup
Serial.begin(115200);
// Pas de WiFi à disposition dans l'atelier : on crée un point d'accès.
terminal.startAP("Pico_CREPP", "12345678");
terminal.begin();
terminal.addLedWidget("capteur", "Capteur", "#55ff55");
terminal.setLedState("capteur", true, PicoWebTerminal::LED_STATIC);
terminal.addTextWidget("temp", "Temperature", "-- C", "#ff5555");
// Bouton cliquable côté navigateur -> callback unique côté Pico
terminal.addButtonWidget("led", "LED integree", "Basculer", "blue");
terminal.setButtonCallback([](const String& buttonId){
if (buttonId == "led") {
digitalWrite(LED_BUILTIN, !digitalRead(LED_BUILTIN));
}
});
terminal.logSuccess("Point d'acces WiFi actif");
terminal.logInfo("Connectez-vous a http://" + terminal.getServerIP());
@end_setup
@loop
terminal.loop();
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate > 1000) {
lastUpdate = millis();
float temperature = 21.5f; // remplacer par une vraie lecture capteur
terminal.updateWidget("temp", String(temperature, 1) + " C");
}
@end_loop
@end_example
*/