BSA – HMI Designer

Qt/QML lack an image designer, but I found that using good, old MSPaint worked out well. I have added tools to support various modeling techniques, but will focus on HMI design and automation in this first version.

It is a graphical GUI designer included in Qt, but good luck getting something out of that. This is what I do not like with Qt – it’s a lot of stuff that simply don’t work very well.

The dialog above is what I get if I try to open my QML code in Designer – the code works well, but Qt Designer is not able to display it or offer a graphical design – and fiddling with graphical GUI design through text only is far to time consuming for my taste – so this is my answer to this – I create my own GUI designer because this is very straight forward.

The reasons why I do this is because I need the graphical coordinates as input into an intelligent code generator so I can automate far more of the HMI application than I otherwise could. The core concept of the HMI designer should be very familiar – you simply draw objects on screen that look similar to the real GUI forms you want – this is just a drawing, but each object have parameters, a name and coordinates + property values I can use for automation.

Based on this I can auto-generate all QML and JavaScript as well as bindings to C++. Work that otherwise would take hours for every dialog can be done in minutes, but I will not stop there. Doing this for Qt/QML is just the start – I can as well do it for C# Core and others. My first target will be QML and I intend to create parts of BSA using BSA.

Auto generating an user interface is actually very easy, but the key is to accept a standard way of doing things that can be repeated. Take a simple edit field as an example – it needs to be initialized, you need to fetch the result and you need to validate the result dealing with wrong inputs – doing this properly is actually a bit of code that is repeated for every user control.

Those of you familiar with C# will know that Visual Studio generate a lot of code automatically to make C# Forms easy to work with – I intend to go further in the interest of dramatically increase productivity – or more exact – reduce the hours I need to use to create advanced HMI solutions.

I have started this designer in MFC, C#, Lazarus, classic Qt etc and it is doable in all of these, but I seriously wanted a technology that gave me easy access to GPU’s and this is where QML is unique. I plan gauges that is hard to do in old fashioned raster graphics because you start using to much CPU power, but they are straight forward in QML + not to mention that I actually can dig into 3D user interface objects.

Dark theme is sadly difficult to do – all the tools require that you either buy a package of controls or do the hard job yourself – QML is no exception. QtQuick controls out of the box have various quality and don’t look the way I want them to, so I ended up creating everything from scratch. But, QML makes that job very easy. I am seriously impressed about how easy it is to do graphic components. I will still be working on basic UI components for a while, but it is progressing fast compared to the hours I can put in.

Desktop-, Web- or Tablet- application? This is the advantage of a CASE tool – I do functional design and let my code generators deal with the rest. I see no reason why my desktop application should be different from my web applications or wise versa.

As mentioned – the first release will focus on GUI and QML because that is what I need the most myself. You might see a first, functional release before summer 2021.

Categories: HMI

Leave a Reply