Weekly blog on development
View the Project on GitHub ZiadFahmyZewailCity/blog-gr4.0-remotePlotting
by Ziad Haithem Fahmi
If you want to get straight to the code, here is the link to the repository you will find everything you need to get this Out Of Tree (OOT) module running with GNU Radio 4.0 (GR4).
This GSoC project has developed an OOT module for GR4 that is a successor to the OOT module gr-bokehGUI for GR3.x. It’s meant to allow for remote plotting and interactivity with a GR4 flowgraph by creating an imGUI dashboard containing sinks and widgets that runs in the browser. This is especially useful for monitoring and interacting with flowgraphs on headless devices such as embedded systems.
Here is a quick taste of what the project is capable of
The project successfully implemented all it’s deliverables being the following sinks & widgets, although some features are yet to be supported to achieve full feature parity with gr-bokehGUI.
| Deliverable (Proposal) | Implementation Status | Feature Parity with gr-bokehGUI |
|---|---|---|
| Time Series Sink (imGUI_timeSeriesSink) | ✅ Implemented | Missing: trigger modes (Free/Auto/Normal/Tag + slope/level/delay/channel/tag-key), tag display |
| Frequency Sink (imGUI_frequencySink) | ✅ Implemented | Missing: Max Hold, Averaging (None/Low/Med/High), trigger support, center-freq/bandwidth calibration, message-port input |
| Waterfall Sink (imGUI_waterFallSink) | ✅ Implemented | Missing: center-freq/bandwidth calibration, block-level intensity min/max |
| Constellation Sink (imGUI_constellationSink) | ✅ Implemented | Missing: trigger support, tag display, block-level axis min/max |
| Vector Sink (imGUI_vectorSink) | ✅ Implemented | Missing: custom x-axis values vector, Max Hold, Averaging |
| Button Widget (imGUI_button) | ✅ Implemented | At parity |
| CheckBox Widget (imGUI_checkBox) | ✅ Implemented | At parity |
| Slider Widget (imGUI_slider) | ✅ Implemented | Missing: Step size (limitation of imGUI) |
| Dropdown Menu Widget (imGUI_dropDownMenu) | ✅ Implemented | At parity |
| Text Box Widget (imGUI_textBox) | ✅ Implemented | At parity |
| Text Label Widget (imGUI_textLabel) | ✅ Implemented | At parity |
1) Closing the remaining feature-parity gaps with gr-bokehGUI
2) Pesky Bug: A fault sometimes occurs when closing a flowgraph containing the OOT’s blocks, its completly random, not too big of an issue since it only occurs on closing.
The architecture of this OOT module was designed to be highly decoupled, made up of three primary components.
The GR4 flowgraph process consists of the imGUI_dashboard_blocks and a management singleton. The imGUI_dashboard_blocks are what you add to your actual flowgraph, these are the sinks and widgets, and they handle all the data processing and communication with the server via ZMQ IPC.
Every time one of these dashboard blocks is instantiated, it registers itself with a central singleton class called the imGUI_DashboardRegistry. This registry is meant to track all the imGUI_dashBoard blocks in the flowgraph to create a configuration file which is needed to configure the dashBoard in the browser. Once all the blocks are registered, a JSON configuration file is generated and placed at (/tmp/gr4_dashboard_config.json).
The imGUI_DashboardRegistry also handles the lifecycle of the dashBoard server process. It guarantees that the dashboard daemon is only booted once the flowgraph is ready and the config file is generated. It also tracks the total count of active imGUI blocks, automatically killing the daemon process and clearing the registry when the flowgraph stops and the last block is destroyed.
Once triggered by the registry, the dashboard_daemon spins up as a completely independent process. This separation helps with fault isolation. By entirely decoupling the telemetry routing from the core DSP flowgraph, any crashes, network drops, or UI freezes on the web side will not interrupt your GNU Radio graph. If the server fails, the flowgraph keeps running without issue.
The dashboard server is built using websocketpp. Internally, it operates using two primary threads to maintain high throughput:
This is the graphical frontend built using imGUI & imPlot where the user actually views and controls the flowgraph. The dashboard is compiled using Emscripten, which translates the C++ ImGui framework into WebAssembly.
Upon loading, the web dashboard makes an HTTP GET request to the dashboard server to retrieve the JSON configuration. It reads this file to determine exactly which panels, sinks, and widgets exist, using this data to dynamically build the UI layout. Once configured, it establishes a persistent WebSocket connection to the server to render real-time plot data and send control signals back to the flowgraph widgets.
If you don’t have GR4 installed, head over to gnuradio4 and follow the build guide
Once you done or if you already have GR4 installed, head over to the gr4-remotePlotting and follow the build guide and tutorials to get using the OOT module.
Be sure to contact me if you run into any issues or have any questions Email: s-ziad.fahmy@zewailcity.edu.eg
This project pushed me a bit outside my comfort zone.
New Libraries & Network Programming: This project also exposued me a lot more to networking and Inter-Process Communication (IPC) libraries, specifically ZeroMQ (ZMQ) and WebSocket++, which were really important for the server architecture.
Linux Environment: setting up the development environment was a hurdle that i had thankfully gotten ready early on. While I had dabbled with Linux in the past, I had never used it for full-scale development. I ultimately decided to use Windows Subsystem for Linux (WSL). Once I spent some time wrestling with the initial networking configurations, it turned out to be a nice environment to develop in and understanding how to tackle build tools and make files was a hassle.
I would like to thank my mentors Josh M & Cyrille Morin for always being helpful and understanding. They gave me the space to explore and learn during the whole 12 weeks.
Name: Ziad Haithem Fahmi Email: s-ziad.fahmy@zewailcity.edu.eg github: ZiadFahmyZewailCity [linkedin] (https://www.linkedin.com/in/ziad-fahmi-940216271/)
tags: