Creating a dashboard (Engee application)

We are studying the process of developing an indicator panel that receives data from a real-time model and is implemented as a separate application.

Description of the example

The Engee platform provides many tools that allow you to create a variety of automation tools for controlling models: indicators, remotes… Among them:

Code Cell Masks to manage the model
Virtual Instruments (blocks for the graphic canvas)
[The ability to host custom applications](https://engee.com/helpcenter/stable/ru/feature/genie-engee.html (there is a course on this topic)
Software Simulation Management

In this example, we will look at the process of creating graphical indicators for virtual dashboards. Another example on this topic illustrates how to control the execution of a model using software control commands (how to implement a button that starts the model for execution).

The virtual dashboard will run on the Engee platform as a separate server, which will take time to start (several tens of seconds).

Description of the model

In this example, the indicators accept data in the range from 0 to 100. Values beyond this range are limited. Since the default numeric format in Engee is Float64, the code in the value sending blocks is oriented towards transmitting 8-byte packets (64 bits). The model has enabled the "Instant indication" (Debugging panel in the model settings) to check the correct operation of the indicators, as well as the "Simulation speed control" mode, which allows you to slow down the model time to "real-time" execution.

Communication between the model and the devices takes place through the blocks Engee Function, which accept input data and give a signal about the success of sending. Upon request from the dashboard (the Clear To Send signal), the blocks located on the model send fresh data for display.

Configuring a UDP connection

Data transfer between the model and the dashboard is carried out over the UDP protocol.

To avoid conflicts, each device requires the creation of two UDP connections. On the first connection (to the port from the parameter port) 8 bytes of data are being sent. The second connection works in the opposite direction: the block Engee Function opens a connection on the port cts_port (from Clear To Send) and waits for the Clear To Send (CTS) message to be received, indicating that the indicator panel is ready to receive data.

On the model side, these settings are indicated in the Parameters of each block and the indicator icon. You can see them if you look under the mask of the blocks.

Creating an indicator panel

There are two independent indicators on the dashboard.

The logic of updating information, the model of the graphical part of the application, and the ports for receiving data are specified in the application code. app.jl.

the left indicator waits for data on port 5050 and sends a CTS signal to port 5051,
The right indicator receives data on port 5052 after sending a CTS message to port 5053.

As for the graphical model of indicators, the description of the components of each indicator has attributes associated with reactive variables. As soon as the reactive string variable receives an updated value, the associated component is updated automatically. For example, here is the line specifying the attributes of the arrow on the left indicator:

path(d="m21.287 24.405-6.1832 13.013 4.5464-13.716z", style="fill:#f00;stop-color:#000000;transition: transform .2s linear", transform! = "circular_gauge_string")

Pay attention to the property transform! = …. Syntax with application ! allows you to create reactive attributes in Julia, linking their update to the update of some variable from the data model.

Since the devices are represented by SVG vector graphics elements, their size can be changed by adjusting the values width and height the containers in which they are located.

Launching the app

The application runs on a separate server on the Engee platform and becomes available at a certain address app.url. The page with this address can be opened directly in the output of the current cell or in a separate window.

app = engee.genie.start("$(@__DIR__)/app.jl", log_file="$(@__DIR__)/log.txt");
# display("text/html", """<iframe src="$(string(app.url))" width="600" height="450" style="border: none;"></iframe>""";)

Team display from the previous cell, if you uncomment it, it allows you to open the dashboard inside the script.

After the server is finished working with the application, there will only be a sign in this place "server is available", therefore, it is better to use static screenshots to place the interface in reports.

To get the link app.url and open it in a separate page, execute the following cell. This link will also work only as long as the server with the application is running.

display("text/html", """<a href="$(string(app.url))" target="_blank" rel="noopener noreferrer">Открыть в отдельном окне</a>""")

To stop this server for debugging purposes or to restart, uncomment and execute the following code:

# engee.genie.stop("$(@__DIR__)/app.jl");

Illustration of the dashboard operation

We attach a small illustration of the operation of this dashboard.:

Conclusion

We have reviewed a project that well illustrates the process of developing a custom dashboard that receives data from the Engee model in real time.