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, previewing textures and screenshots, 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:

Make sure that the Overwatch service is enabled (enabled by default). To disable property editing, set OverwatchPropertyChangeEnabled = 0 in kanzimonitor.cfg.
Start the Kanzi application with Kanzi Monitor.
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.
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 all resources with texture preview, GPU readback, full-resolution toggle, and download (PNG and Raw RGBA).
Performance – FPS and frame timing metrics, configurable performance watchers, auto-refresh.
Screen Capture – Screenshot with full-resolution toggle and download. Inspect and download framebuffer previews.
Render Passes – Render pass tree with CompositionTarget preview and download (PNG and Raw RGBA).
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.
Fonts – Browse active FontRuntime instances with font identity, style definition, glyph cache state, font metrics, and glyph atlas texture preview. Edit the glyph cache texture size for newly created caches. Shows an informational message when the node tree is not available.
Trace – Capture and view profiling traces with summary stats and download as JSON.
Logs – Log entries with severity and category filters, live auto-refresh, and download as TXT. Includes graphics API call logging controls with on/off toggle, GL state dump on draw calls, and optional frame-count limiting.
Graphics Info – GPU and graphics details.
Interactive Console – Send arbitrary commands to Kanzi Monitor.

Using the standalone executable¶

All platform packages include a prebuilt standalone executable monitor-web-ui-win64.exe under tools/monitor-web-ui/dist/. 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).

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 like texture previews or screenshots can be slow. The UI automatically reduces default image 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.
Avoid full-resolution images over serial unless necessary. The UI shows a confirmation dialog before proceeding.
Trace files can be several MB. The UI does not auto-fetch them over serial.