System design (details under the cut)?

Question

infographics

Good day!
I am currently writing a project large enough for myself and I can’t properly formalize one requirement from the technical task, so I’m asking for help.
So what I need to do is a little introduction. I have an application that is responsible for monitoring a specific technical object. In other words, the application displays the state of the diagnosed object in a graphical form on the computer screen. The instrumentation at the site sends data in the form of UDP packets, my application processes these packets. Special modules are connected to the application, which determine some element on the object - a pressure, temperature, altitude sensor. This module stores the following information:
1. How the sensor should look on the screen (i.e. a set of graphical primitives);
1a. How the sensor should look if the measured parameter is correct;
1b. How the sensor should look if the measured parameter is incorrect;
1c. How the sensor should look if there is no signal from the instrumentation.
A small example, consider the most primitive element - a pressure sensor.
The equipment on the site sends the number 0 for the pressure sensor, the screen displays a white square with a black outline. Number 1 is a white square with a green outline, number 2 is a green square with a green outline, 3 is a green square with a green outline and a "K" in the center, and so on. - only 16 options.

The problem is that all information about colors, shapes should be stored in modules. And sensors can be not only square, but also rotating, simply filling (like Progress Bar) and simply digital. And it all needs to be unified.
I have now come to the following scheme: I have a set of graphical primitives from which the graphical representation of an element is built. In the case of a pressure sensor, the outline, fill, and text. And there is also an object that puts in accordance with each value from the equipment - the corresponding figure and the corresponding colors. It turns out that the above example can be represented as follows:

Запись №1. Значение от сервера - 0. Фигура 1 (контур) - черный тонкий контур. Фигура 2 (заливка) - белая.
Запись №2. Значение от сервера - 1. Фигура 1 (контур) - зеленый толстый контур. Фигура 2 (заливка) - белая.
Запись №4. Значение от сервера - 3. Фигура 1 (контур) - зеленый толстый контур. Фигура 2 (заливка) - зеленая. Фигура 3 (текст) - черный, фиксированный текст.

The above scheme, although voluminous, but works. But here's how to add another animation like rotation or filling (progress bar) - it's not clear at all.
Well, here comes the next question - am I on the right track, or am I making my bike? Maybe there is a simpler way to present such a module? Or someone was engaged in similar projects and will share experience?

Answer 1

What is a module, in your context? dll or what?
If the module term has not yet been formalized in detail, I can suggest formalizing it as a metadata file.
This file, in any format, stores all the necessary information about the type of display.
The display subsystem (program ?) implements all possible display types (a set of graphic features, their animations, and display modifiers).
Thus, the new module is described as simply as possible.
If you need to have an unlimited set of possible displays, that is, the ability to set animations and primitives that were not intended at the development stage, you can include the ability to load a scripting language, style sheets in the metadata file, which is very simple with Qt.
PS Please clarify what is not clear, and give a detailed comment on my answer. I hope I understood the question correctly.

Answer 2

Of course, everything depends on the platform, but in my opinion the representation in the form of XML would be much simpler and clearer. Yes, there would be room for expansion. And there is half a step to XAML-template with the creation of resource-objects from files at runtime (if it's win, let's say .net, etc.).

Answer 3

How to describe the appearance of shapes in the config, isn't it easier to make a library with functions like renderProgressBar(location, values, frameNumber)?
O! Although there is a way. Store descriptions in SVG format (this is a vector graphics format). Just keep in mind that SVG rendering is very slow, in real time it’s not a fact that everything will be updated for you, and perhaps this moment needs to be optimized somehow (cache bitmaps, cache the compiled object tree, etc.). Or come up with your own similar format.
There is animation for SVG, but it will work at a snail's pace... I would still make my own optimized format.

Answer 4

Запись №1. Значение от сервера - 0. Фигура 1 (контур) - черный тонкий контур. Фигура 2 (заливка) - белая. Переход - вращение по часовой.
Запись №2. Значение от сервера - 1. Фигура 1 (контур) - зеленый толстый контур. Фигура 2 (заливка) - белая. Переход - вращение против часовой.
Запись №4. Значение от сервера - 3. Фигура 1 (контур) - зеленый толстый контур. Фигура 2 (заливка) - зеленая. Фигура 3 (текст) - черный, фиксированный текст. Переход - градиентная заливка.

Maybe I don’t understand well, but if you store shapes and colors here, then why can’t you store animators? Oh what's the problem.