From practice: Create process pictures
Hello and welcome to the “From practice” series. Today we’re completing our dashboard from the previous post From practice: Display of process data. I will show you how to create process images on SolidBlue and integrate them into the existing page.
Creation of the process picture
First, open the existing project under Visualization projects with the Edit project option. In the menu tree on the left, open the Schemes folder and create a new process picture using the Process pictures context menu with the “New” option. You will be prompted to enter a name for the screen. I choose the name “LEDState” here. Open the designer of the new process picture. You should now be able to see a blank site.
Now we need to create an drawboard first. Add a new “drawboard” type object to the blank page using the context menu. In our case we only want to create a very small image. Therefore I choose the size 60×60 pixels for the object. The drawing area has now been inserted at the top left of the designer.
Next, the LED states must be created as variables. In the case of process pictures, no direct value queries can be created, only queries can be passed. I now create a “placeholder-value” object using the cloud icon at the top of the menu bar. I give this the name LEDStates and add a description.
In the drawing area, I now want to add three circles with different colors for each LED status. So add a new “circle” object via the context menu of the drawing area. I choose 57 pixels as the radius. I deactivate the “Fill transparent” option and select blue as the “Fill color”. I deactivate the “Visibility” property and open the dialog for visual options to the right. Here I create a new option. As “Value” I choose the placeholder variable, as Offset I choose 2, which is the state for the blue LED, and as “Operation” I choose !=. So with these settings I specify that if the third value in the passed array of values is non-zero, the circle should be visible.
Now I position the circle up in the left corner. You can do this by holding the circle with the left mouse button.
In the next step, I simply create a copy of the created circle object. From the circle’s context menu, select the “Copy” options. You can then add the copy with the “Paste” option via the context menu of the drawing area. The copied object is in the same position above the original object. I now change the color of the copied object to red and change the visual option offset from 2 to 1. I also copy the red circle and change the color of the copy to green and the visual option offset from 1 to 0. For the green circle, however, I set the “Visibility” setting. This is how I make sure that even if no current data can be received, the green circle is always displayed.
The result of all this is that we now have an image in which are three circle objects with different colors. Each circle is only visible if the corresponding value in the transferred placeholder variable is not equal to zero. This process picture can now be saved and translated. The result should be a Source-Code-Package.
Integration of the process picture into our site
Now open the designer of our already created dashboard. The third column is still free. Insert a “panel” object here and give it a title accordingly. I choose the name “Display” here. Now add an object of the type “process-picture” to the panel, which you can find in the Others tab. For the “Process picture” setting, select our newly created picture and confirm the dialog. Now open the settings of the process picture again. After opening it again, you will also see the transfer variables. Here you select the already created MELARECON query with the three initial states. Save and translate the new page.
However, what we now notice is that the displayed green circle is not displayed in the center. But we can also easily change this. Open the created HTML file of your page in the left menu tree. Locate the HTML tag with the id “process-picture_…” and add the following CSS settings to the style property.
- display: flex;
- justify-content: center;
- align-items: center;
Save your changes. This does not mean that the display changes in the designer, but if you call up this page in the portal or via the dealer platform, you will notice that the object is positioned there in the middle.
Conclusion
With SolidBlue it is possible to create your own process images and integrate them into your pages. The example shows a very simple possibility. However, it is also possible to display and visualize entire system schemes. It is also possible to create your own forms and use them multiple times in the process images. Animations can also be created. The example also shows that the code created by the designer can also be edited later, making additional CSS styling possible.
