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
*/