MycilaWebSerial icon indicating copy to clipboard operation
MycilaWebSerial copied to clipboard

Super lightweight web serial monitor for ESP32

MycilaWebSerial

Latest Release PlatformIO Registry

GPLv3 license Contributor Covenant

Build GitHub latest commit Gitpod Ready-to-Code

MycilaWebSerial is a Serial Monitor for ESP32 that can be accessed remotely via a web browser. Webpage is stored in program memory of the microcontroller.

This library is based on the UI from asjdf/WebSerialLite (and this part falls under GPL v3).

Changes

  • Simplified callbacks
  • Fixed UI
  • Fixed Web Socket auto reconnect
  • Fixed Web Socket client cleanup (See WEBSERIAL_MAX_WS_CLIENTS)
  • Command history (up/down arrow keys) saved in local storage
  • Support logo and fallback to title if not found.
  • Arduino 3 / ESP-IDF 5.1 Compatibility
  • Improved performance: can stream up to 20 lines per second is possible
  • Support custom page with WSL_CUSTOM_PAGE

To add a logo, add a handler for /logo to serve your logo in the image format you want, gzipped or not. You can use the ESP32 embedding mechanism.

Preview

Preview

DemoVideo

Features

  • Works on WebSockets
  • Realtime logging
  • Any number of Serial Monitors can be opened on the browser
  • Uses Async Webserver for better performance
  • Light weight (<3k)
  • Timestamp
  • Event driven

Dependencies

Usage

  WebSerial webSerial;

  webSerial.onMessage([](const std::string& msg) { Serial.println(msg.c_str()); });
  webSerial.begin(server);

  webSerial.print("foo bar baz");

If you need line buffering to use print(c), printf, write(c), etc:

  WebSerial webSerial;

  webSerial.onMessage([](const std::string& msg) { Serial.println(msg.c_str()); });
  webSerial.begin(server);

  webSerial.setBuffer(100); // initial buffer size

  webSerial.printf("Line 1: %" PRIu32 "\nLine 2: %" PRIu32, count, ESP.getFreeHeap());
  webSerial.println();
  webSerial.print("Line ");
  webSerial.print(3);
  webSerial.println();

WebSerial is a class. It is not a static instance anymore. This allows you to initialize it only when needed in order to save memory space:

  WebSerial* webSerial = nullptr;

  void setup() {
    if (shouldEnableWebSerial) {
      webSerial = new WebSerial();
      webSerial->onMessage([](const std::string& msg) { Serial.println(msg.c_str()); });
      webSerial->begin(server);
    }
  }

  void loop() {
    if (webSerial) {
      webSerial->print("foo bar baz");
    }
  }