Using the Monitor Web UI

The Monitor Web UI is a browser-based graphical interface for remotely inspecting and debugging Kanzi applications. It connects to the Overwatch service through a Python WebSocket bridge and provides visual tools for browsing the scene graph, editing properties, inspecting data sources, monitoring performance, and capturing traces.

The tool is located in tools/monitor-web-ui/. See tools/monitor-web-ui/README.md for the full reference.

Requirements

  • Python 3.7 or later

  • websockets library: pip install websockets

  • For serial and UART connections: pip install pyserial-asyncio-fast

Starting the Monitor Web UI

To start the Monitor Web UI:

  1. Make sure that the Overwatch service is enabled (enabled by default). To disable property editing, set OverwatchPropertyChangeEnabled = 0 in kanzimonitor.cfg.

  2. Start the Kanzi application with Kanzi Monitor.

  3. Start the WebSocket bridge:

    cd tools/monitor-web-ui
    pip install websockets
    python bridge.py
    

    The bridge connects to Kanzi Monitor at 127.0.0.1:56000 and serves the web UI at http://localhost:8765.

  4. Open http://localhost:8765 in your browser.

Connecting to remote or embedded targets

To connect to Kanzi Monitor running on a different machine:

python bridge.py --monitor-host 192.168.1.100

To connect through serial and UART for embedded targets with SerialConsoleEnabled = 1:

pip install pyserial-asyncio-fast
python bridge.py --serial-port COM3
python bridge.py --serial-port /dev/ttyUSB0 --baud-rate 921600

Features

The Monitor Web UI provides these features:

  • Node Tree – Live scene graph with expand/collapse, auto-refresh, and node type icons.

  • Property Inspector – View and edit properties on selected nodes.

  • Resource Viewer – Browse loaded resources with CPU and GPU memory usage.

  • Performance – FPS and frame timing metrics, configurable performance watchers, auto-refresh.

  • DataSources – Inspect and edit DataSource and DataObject trees. DataObjectList nodes display an item count badge and expand to show individual list items as tree children.

  • Trace – Capture and view profiling traces with summary stats and download as JSON.

  • Logs – Log entries with severity and category filters, an editable log buffer size, graphics API call logging controls (on/off, state dump, frame limit), live auto-refresh, and download as TXT.

  • Graphics Info – GPU and graphics details.

  • Fonts – List the glyph caches in use, preview each glyph cache atlas texture, and set the glyph cache texture size for newly created caches.

  • Interactive Console – Send arbitrary commands to Kanzi Monitor.

Note

Texture preview, framebuffer preview, and render pass visualization are available on Kanzi 3.6 (previews use GPU readback for GPU-only textures). Screen capture is also available, but it requires the application to drive the per-frame service contract (see Using the Overwatch service); without it, the capture stays pending. See Release notes.

Note

On the Logs tab, the graphics-log frame-limit field also shows the live framesRemaining countdown while logging is active, so its value decreases as frames are logged. The frame limit counts only rendered frames (see the graphics-logging note in Using the Overwatch service), so if the application is idle the count does not advance. To log a fresh number of frames, set the field and re-enable logging (toggle it off first if it is still on).

Using the standalone executable

All platform packages include a prebuilt standalone executable monitor-web-ui-win64.exe under tools/monitor-web-ui/dist/ (Windows only). Double-click to launch; the browser opens automatically.

To rebuild it from source:

cd tools/monitor-web-ui
build_exe.bat

This creates dist/monitor-web-ui.exe (approximately 10-15 MB). The build requires Python 3 with the py launcher and internet access (it fetches PyInstaller and the runtime dependencies into a temporary virtual environment).

Command-line options:

monitor-web-ui.exe --monitor-host 192.168.1.100    Connect to remote Monitor
monitor-web-ui.exe --serial-port COM3               Connect through serial/UART
monitor-web-ui.exe --no-browser                     Do not auto-open browser

Understanding the architecture

                                                     TCP (default)
+-----------------+     WebSocket      +-----------------+<--------------->+-----------------+
|   Web Browser   |<----------------->|   bridge.py     |  localhost:56000|    Monitor      |
|   (index.html)  |   ws://localhost   |   (Python)      |                 |  (Kanzi Plugin) |
+-----------------+       :8765        +-----------------+<--------------->+-----------------+
                                                        Serial (--serial-port)
                                                         COM3 / /dev/ttyUSB0

The web UI sends overwatch.* commands through WebSocket. The bridge forwards them to the Kanzi Monitor console (TCP or serial) and returns JSON responses.

Serial bandwidth considerations

At 115200 baud (approximately 11.5 KB/s), large responses can be slow. The UI automatically reduces default response sizes on serial connections.

Recommendations:

  • Use a higher baud rate when the hardware supports it (--baud-rate 921600).

  • Text-based commands (nodes, props, perf) work well even at 115200 baud.

  • Trace files can be several MB. The UI does not auto-fetch them over serial.

See also

Using the Overwatch service

Using the Command Processor service

Configuring Kanzi Monitor