Category Archives: HMI

The long walk with HMI Designer

Working with software is often long hours with invisible progress. In this case I worked on the Edit Control. I actually tried to use a standard Windows one, but decided to make my own from scratch. In effect it is only a few things I use from Qt including their interface to OpenGL.

Edit Control – that can’t be much work right? Actually it wasn’t, but it forced some design changes to get it the way I want it. The picture above show inline editing with no borders.

Having coded C++ for years before learning C# and Java I actually want to implement some of the C#/Java techniques in C++. This is about making things simpler and more efficient to code.

One of the issues is Reflection. In C# you can assign an object to the property editor and edit it’s properties. Doing the same in C++ is much simpler than people think – you simply add a linked list declaring your member variables and voila – you can edit, save xml, read xml with a few simple commands.

Another issue is Events. I often need to call a parent class from a sub-class. Again if the sub class simply have a mapping table that I can set from the parent …

These techniques do however dig into the memory and dynamic side of C++. But, it leaves me with what I want – a HMI without C# or Java around to slow it down.

HMI Concept

This picture show a single Gauge on a form to illustrate how HMI Designer & Browser works. In this case we have a rotating needle that needs to be associated with an input value. What we do is to save this form as an XML and include it in a device.

But, we also need to associate this needle with a variable on that device. This is no coding, only a few clicks -job done.

The next that happens is that we start HMI Browser on Windows, Linux, OSX, iOS, Android or whatever. It contact our device, upload the HMI XML and we have a working HMI with a gauge showing the value of the variable we selected.

No coding involved, just a few click & plays on the screen and job done. No more need for hours by hours from expensive C#, Java, C++, HTML5 developers- no more need for specialised HMI/GUI skills – just a few clicks & play.

And I have not even got to the best part yet…

HMI Designer – Content List

HMI Designer is reaching a state where I can use HMI Designer itself to design some of it’s content. I can do this because the Designer also embed the Browser allowing me to embed XML based HMI specifications. I am not sure I gain anything, but it will be a good test case for the Browser and help driving it.

My previous entry discuss user gauges as a series of drawings displayed on top of each other. Basically that is what any drawing is and I will need some kind of content list, so the easiest way of dealing with user controls is probably to create this content list and allow the user to select on screen what he/she want to use as a new control.

Any control (also internal ones) need a list fo interface and and spec on how these are used. I think this will work out nice.

Stay with me – this has been a deep dive (large job) so once this surfaces things will change.

Drawing User Controls – No Coding

This is just an idea, but C++ gauge code is basically a set of layers on top of each other. The idea for user controls is to let the user draw separate drawings – this could be visualized as a text tree, but I consider it as a graphics list/tree. The user can then link a drawing to rotate, zoom scroll based on an input value to create value based animation.

This also questions if I should bother with build in gauges at all – an xml based repository can provide the user with gauges that he can use “as is” or copy&modify. It also opens for others to create add-in libraries, which in previous tools have proven to be a key asset.

Drawing Gauges – The Needle

Using the clock bewel from earlier I want to add a needle (polygon) and a cap as indicated above. I now want to rotate the needle based on an input value.

Rotation can be done by doing the math yourselves and drawing graphics. The drawback with this is that you use the CPU, so what we will do is to use the build in transform that can rotate, zoom and scroll using the GPU.

So in simple words we just assosiace the rotation angle with an input value and a scale. In this case we rotate the needle layer of our drawing. The advantage of doing this is that we could also rotate the scale (not shown) or use a combination of zooming, rotation and scrolling to animate a value.

Drawing Gauges – The Bewel

The circle above is a “Bewel” often used around a classic clock gauge. Drawing this is straight forward as you draw 3 circles on top of eachother as illustrated below.

I will create some build in gauges, but I think the most important gauge is the one you create yourselves. So I will leave you tools to create your own animated gauges and use them as if they where build in – no coding needed!

HMI Designer

Getting there. I am actually starting to see the end of initial framework tasks, so we can soon move on to more interesting and visual content. It’s a lot of work to be honest…

I am happy with using Qt as base. It allows me to write C++ which is optional for this task due to performance and Qt have done a great job integrating OpenGL. So far you only see a 2D content, but you will see the difference as we start with 3D gauges at some point. I have done this without Qt both on MFC/VC++, C#, C++/GDI++ and Lazarus, so I know what I talk about stating that Qt carry it’s weight around on graphics.

Property Editor

The Property Editor is a control that allow a group of “properties” (read data variables) to be edited. Rather than making specialized screens you simply list the variables in a TreeGrid and allow each item to be edited using a specialized editor for the data type. It is a quick way of creating an editor and quite common in modern programming environments.

This editor is quite a lot of work since it also require a lot of other editors to be created. You will probably notice that I am starting with the dark theme with flat controls found in Visual Studio & Windows 10. Actually the theme and style is custom and neither Windows, Linux or OSX. The reason is because most applications today want a recognizable company style on their applications that stay the same regardless of what device or platform you use. I start with my own preference.

A custom style means that you need to create everything from scratch because you need to control every color used. I did this by modifying Windows controls earlier and it was basically more work and less freedom than what I do now. It is a lot more work than just using the build in Windows controls, but it is worth it because the result is a high performance graphics HMI with presentation graphics capable to compete with web applications.

The Property Editor is used to edit objects on the design screen, but is also a component that can be used in user applications. All colors & style setting are programmable per component, but default values are fetched from a theme database. You will be able to create your own themes as well as select pre-made themes.

HMI – User Controls

I still have some work to do on the basic drawing/HMI engine, but will soon be focusing entirely on what I call “furniture” as in pre-made controls we can use. I will create some fancy, build in controls, but the most important one is a “User Control” enabling us to create custom controls. Now-keep in mind that the entire HMI is specified in XML format and loaded as we start the HMI Browser, so a custom control will need to be loaded as part of this. For the Designer, we would like to have a library that is made available, but only those that are used to be included in the final XML.

The User Control itself needs to be built from other controls and by adding colors, scaling, rotation etc to create a new control. This means our user control will be a list of build-in controls where we create our own, new interface. As input values can transform to position or rotation we should be able to create most controls these ways.

To enhance our customization capabilities, we have Polygon and Plain. I don’t want to dig into the same security problems as ordinary browsers, so the Plain VM will only have access to HMI Browser, not any of the host OS capabilities. If we need the later we will have other options for that.