Files

Web UART Terminal

A sleek, premium, self-contained web application that enables serial port communication directly from your browser using the Web Serial API. It supports standard UART configuration controls (Baud rate, data bits, stop bits, parity), ASCII/Hex display, Hex data sending, log exporting, and a responsive dark/light themed user interface.

Web UART Terminal Mockup

Prerequisites & Compatibility

  1. Browser Support: The Web Serial API is supported in modern Chromium-based browsers, including:
    • Google Chrome (version 89+)
    • Microsoft Edge (version 89+)
    • Opera (version 75+)
    • (Note: Firefox, Safari, and iOS browsers are not supported at this time.)
  2. Secure Context: The browser only permits Web Serial API calls in a secure context (https://) or from localhost (which Vite handles automatically).

Quick Start

To launch the development server locally:

  1. Install dependencies:

    npm install
    
  2. Start the local server:

    cd ui/uart_terminal
    # If not create the virtual environment
    python3 -m venv .venv
    # Activate it
    source .venv/bin/activate
    # start server
    npm run dev
    
  3. Open the browser: Navigate to the URL printed in the terminal (usually http://localhost:3000).

Features & Usage

  • Connect / Disconnect: Click the circular green play icon in the top left to request a COM/USB serial port and open connection. The button changes to a red stop icon when connected.
  • Save Logs: Click the blue download button next to the connection status to export the accumulated console output log as a .txt file.
  • Scroll Modes: Switch between "Auto-scroll" and "No scroll" to control terminal navigation.
  • Display Formats:
    • Auto: Prints incoming data as decoded UTF-8 text string (default).
    • Hex: Displays incoming bytes as space-separated hexadecimal numbers (e.g., 55 AA 01 02).
  • Data Transmission:
    • Enter text in the send input at the bottom and click the Send button or press Enter to transmit.
    • Switch the send format select dropdown between ASCII and Hex to format data packages.
    • Hex Parsing Rules: When in Hex mode, you can input hex characters with or without spaces (e.g., 55 AA FF or 55aaff). The string must contain an even number of characters and valid hexadecimal characters only.

Keyboard Shortcuts

  • Send Data: Press Enter (or Ctrl+Enter) inside the input bar to send.
  • Insert Tabs: Press Ctrl+Tab in the input bar to insert a literal tab character (\t) instead of losing input focus.