The STM32CubeMonitor family of tools helps to fine-tune and diagnose STM32 applications at run-time by reading and visualizing their variables in real-time. In addition to specialized versions (power, RF, USB-PD), the versatile STM32CubeMonitor provides a flow-based graphical editor to build custom dashboards simply, and quickly add widgets such as gauges, bar graphs and plots. With non-intrusive monitoring, STM32CubeMonitor preserves the real-time behavior of applications, and perfectly complements traditional debugging tools to perform application profiling. With remote monitoring and native support for multi-format displays, STM32CubeMonitor enables users to monitor applications across a network, test multiple devices simultaneously, and perform visualization on various host devices such as PCs, tablets, or mobile phones. Moreover, with the direct support of the Node-RED^® open community, STM32CubeMonitor allows an unlimited choice of extensions to address a wide diversity of application types. Hexabitz modules can be built in interactive GUIs using STM32CubeMonitor. It runs on Windows, Linux or macOS, and provides a browser-based interface.

The user can define their own flow to monitor variables for their STM32 microcontroller-based application.[1]

I) Designing and implementing the dashboard:

Once you open the following window:

Fig.1 The main window of STM32CubeMonitor software

To start building your own GUI using our modules, refer to figure 2-1 window, from import tab press Import to: new flow, here you can either Paste flow json or select a file to import from saved project. 

Fig.2-1 Importing options

Refer to the figure 2-2 in order to pick a template from library and edit it upon your requirements.

Fig.2-2 Importing options-2

By selecting STM32CubeMonitor_BasicFlow.json you’ll have a simple template for getting readings only without writing option, while choosing STM32CubeMonitor_AdvancedFlow.json will give you the ability of building read & write GUIs.

For an instance, selecting the advanced flow option will lead us to the interface illustrated in figure 3.

Fig.3 Main window of designing an interface

1. Block 1 sidebar contains all the available nodes that are necessary to implement your own GUI, each node represents a functionality depending on its uses. Categories can be expanded or collapsed by clicking its header, in addition to the search
2. Block 2 represents the chosen import example which can be divided into several workplace tabs or subflows, i.g.  From block 1 pallet choose common category → link in/ link out nodes to create virtual wires between flows.
3. Block 3 sidebar contains 5 functions mentioned consecutively:
   • • Node information: shows Information and Description drop lists about the selected flow as a whole when clicking on an empty place in workspace, or shows Information, Description, and Node Help drop lists when clicking on a specific node.
     • Debug messages: displays messages passed to Debug nodes within the flow, in addition to passing certain log messages from the run time.
     • Dashboard: contains the Layout Tabs & Links (here you can edit the dashboard tab node name and other properties), Site (to set the title, date format and sizes of the final widget), and Theme tab (to set style, color and font of your GUI)
     • Configuration nodes: provides a list of all config nodes, organized by their scope. If the config node is unused, it is shown with a dotted outline.
     • Context Data: displays the contents of the context data store, which is a way to store information that can be shared between different nodes without using the messages that pass through a flow.
4. Block 4 represents the workspace flow tabs which you drag your nodes from the palette and wire them together. It has Toggle navigator, Zoom out, Reset zoom, Zoom in buttons to control the view of the workplace.
5. Drop list: the main drop list that allows you entering many options like View, Import, Export… etc.
6. Deploy button: allows you to deploy nodes to the server.
7. Dashboard button: will display your GUI as shown in figure 4.

Fig.4 Final dashboard of the designed nodes

II) Developing a dashboard interface using Hexabitz module:

As shown in figure 5, the node “IMU_variables11” will be changeable according to the sensor required to observe, it will always contain four variables, one of them for controlling and the others are the input values of sensors which will be plotted on a line chart as curves and will be visualized as numeric values on a non-editable text field on the user interface, after being approximated to two points after the comma.

Fig.5 H0BR4x Hexabitz IMU sensor dashboard 

• Controlling the gyroscope data:

As shown in figure (5.1)  x, y, and z coordination will be determined and established from the gyroscope sensor using variables gx, gy, gz respectively.

Then a control value named “select” will be used to switch between multiple cases on a dropdown select box.

Fig.5-1 H0BR4x Hexabitz IMU gyroscope sensor nodes

The configuration of nodes is illustrated below in figures 5-2, 5-3. Here, specify the folder that contains .elf file which is usually found inside STM32CubeIDE folder → Module folder name i.g. H0BR4x folder.

Fig.5-2 IMU_variables11 node configurations (the gyroscope variable list)

Fig.5-3 Gyroscope select node configurations

Use this template function (figure 5.4) to set a property based on the provided template, which contains the address of the unsigned 8-bit controlling value “select”.

Fig.5-4 Select node configurations

The change function “set msg.topic” node configuration is shown in figure 5.5.

Fig.5-5 Setting msg.topic node configurations

Fig.5-7 Limiting point’s node configurations

Figure 5.8 represents the configurations of the “Gx” node (the non-editable text field), which are the same for all text nodes with different label names.

Fig.5-8 Gx node configurations 

Fig.5-9 IMU gyroscope node configurations

The chart configurations are illustrated in figure 5.9 above. This node will be responsible for plotting the value of each sensor on the user interface, and it will display changeable data according to the sensor selected from IMU_variables11 node.

The final results of the user interface are shown in figure 5-10, 5-11, 5-12, 5-13, 5-14.

Fig.5-10 Results of online H0BR4x Hexabitz IMU gyroscope observations

Fig.5-11 Results of gyroscope observations “Case: Gx >> Gx value is shown”

Fig.5-12 Results of gyroscope observations “Case: Gy >> Gy value is shown”

Fig.5-13 Results of gyroscope observations “Case: Gz >> Gz value is shown”

Fig.5-14 Results of gyroscope observations “Case: Off >> All values are disabled”

III) STM32CubeMonitor project running on a local machine:

To simulate the remote access on the dashboard,  use the link below:

http://localhost:1880/

• Accessing the remote access:

Control the dashboard using any browser, as shown in figure 6.

Fig.6 The dashboard using localhost link

Fig.7 A result’s comparison (Using Stm32CubeMonitor software and browser)

IV) Hardware setup:

Fig.8 Hardware wiring

Fig.8 Detecting programmer inside In/Out probe nodes

 

[pfhub_portfolio id=”3″]