Click here to Skip to main content
Click here to Skip to main content

Open Dyno Real Time Control System - Part 4.1

, 23 Apr 2014
Rate this:
Please Sign up or sign in to vote.
Qt based alternative for Open Dyno Screen


Download Qt Creator 5.1 source

Windows Binary on

This article was unplanned in the original series and will be a short diversion while I plan the next article. The content of this article will discuss a Qt version of the Open Dyno Screen application that I started earlier in the year. The work was based on a couple of requests from Linux users. They were interested in the Open Dyno project but wanted all of the applications to run on Linux. It was an interesting request but I didn't have a lot of experience working with GUI development on Linux. I have had an interest in working with Qt for a long time but never really found the opportunity do anything meaningful with it. Part of the issue was the licensing model that was previously used on the Windows platform. Since the real time application is intended to run on Linux with the RT Preempt_RT patch installed, this project seemed like the perfect opportunity to jump into researching Qt. Since Qt is designed for cross platform development, all of the Qt code runs equally well on Windows. The sample application is actually a Windows binary.

I found a series of videos on YouTube by VoidRealms that made it very easy to get started with Qt. VoidRealms made a few book suggestions in one of his Qt videos. I purchased two of the suggested books from Amazon. The first is a beginners book Foundations of Qt Development by Johan Thelin. After reading parts of this book I could see a parallel to the material that VoidRealms was covering on YouTube. The book is fairly good and provides enough basic material to get started. I found myself referencing the Internet on some sections for more detail. The second book which I haven’t read yet is called Advanced Qt Programming by Mark Summerfield. I purchased this book to better understand the model view architecture in Qt which will be beneficial when working with the SQLite database.


My goal for the project was to duplicate most if not all of the C# based screen designer in Qt /C++ using the Qt Creator IDE. I was pleasantly surprised at how productive the Qt framework is. I was torn between using the new QML based applications or the classic widget based applications. I decided on a classic widget application because I believed it would be much easier to integrate all of the required components of the Screen application. There is no reason QML couldn’t be used for some utility applications though.

The current OpenDyno C# HMI / Screen Designer was designed to be run-time configurable. The buttons, leds, charts and gauges are dropped on the screen and configured using a property editor while the application is running. The screen designer also included the ability to execute C# scripts using the CSScript library. As an open source project, the hardest part to sell was the inclusion of National Instruments Measurement Studio controls and Quantum Whale Editor.Net code editor. These two components combined cost about $1000. If you need to purchase Visual Studio it will be an additional $1000. I should mention that there are some open source alternative that can be used on the C# Windows Forms version as well and I did discuss that a little bit in the previous article. Because of the way the controls use a facade class they can be easily replaced.

Qt Screen Designer

I started a search for open source replacements for these components that could be used in the Qt version of the screen designer. The Qt framework includes a built in JavaScript engine called QtScript that is able to bind C++ objects and expose them to the script code. It is also easy to connect signals and slots from within the script. Qt includes a built in debugger widget for JavaScript which helps when writing scripts. There is a pretty good YouTube video that shows how to use the debugger here. The debugger is something that isn't available in the C# scripts and was a pleasant surprise.

For the code editor I found the QScintilla widget. QScintilla is working, but there is very little documentation on the widget. I’m still trying to get intellisense to work properly. So far, I much prefer the JavaScript engine over the C# scripting engine simply because the integration is much easier to implement. However, I do prefer the C# language more than JavaScript. I suspect that the scripts are most likely going to be used for simple commands so either C# or JavaScript will function equally as well.

One of the things that has stopped me from investing a lot of time developing GUI applications for Linux in the past was the lack of quality industrial type widgets and charting components. I’m not sure if there aren’t many or I’m just not able to find them. In my most recent search I discovered quite a few of them.

For gauges and leds I found the Analog Widgets library. The visual quality of the widgets is very good in this library. I would argue that it is an order of magnitude higher than the controls supplied in Measurement Studio. The controls all use vector based SVG graphics. I had to do a bit of work to get the library compiled in Qt Creator, but it is finally functioning. I also found a charting library called QCustomPlot. I was able to compile and include it as part of the project without any issues. Unfortunately the chart doesn’t have a lot of properties or signals and slots so it doesn't integrate very well with JavaScript. The QCustomPlot widget is able to draw charts fairly quickly. I did an X-Y plot with 10000 points and it draws almost instantly. I’m not sure how it would perform with hundreds of thousands of points but I don’t think there will be a need in the Screen application. There are a large number of samples included with the QCustomPlot library which made it easy to get started. In addition to these libraries I also found the Qt Widgets for Technical applications project (QWT). This includes many gauges, dials and charts. I haven’t had time to play with this yet but I would like to include these widgets in the application as well. The images below are of the widgets from the Analog Widgets library and the QCustomPlot widget.

Now that I had found enough widgets to base the Qt application on I started putting some code together. The first thing I developed was the screen editor. The screen editor performs the basic function of allowing you to place, move and re-size widgets. Since the Qt Creator Application itself is open sourced I decided to see how it performs these operations. I found the package that had the components I was looking for in the qttools package. In the folder \src\designer\src\components\formeditor there are two files widgetselection.h and widgetselection.cpp which define the classes WidgetHandle and WidgetSelection. WidgetSelection holds eight WidgetHandles and a pointer to the selected widget. I added an additional WidgetHandle labeled as a drag handle below. Since the Open Dyno screens are designed to be modified at run-time the drag handle is over sized so that it will reduce the chance of accidentally clicking a button. I needed to do quite a bit of modifications to these classes because they were originally tightly integrated with the Qt designer.

Qt includes a built in class named QRubberBand for selecting widgets. This allows you to draw a transparent rectangle on the screen as shown below in blue. This worked out of the box without any issues. Once the rubber band is drawn you simply search in the rectangle for any contained widgets.

With the ability to select and move widgets, I started adding more of the widgets that I described earlier to the project. The screen shot below is the basic user interface that allows you to insert widgets onto the screen. To insert a widget you first put the screen into edit mode by clicking the tool bar button. Then right click on the screen to display a pop up menu that contains all the widgets.

The next step was to add the ability to save and load the screen designs. I followed the same XML file format that was used for the C# version discussed in the previous article about the Open Dyno Screen application. Below is a screen shot of the XML file created when saving a screen. Qt has built in support for reading and writing XML files. It was fairly straight forward to get it working. The XML file consist of a Controls collection and a Script section which stores the JavaScript code in a CDATA tag. The controls collection has one element for each widget on the screen. The current application only stores the type, object name, position, size and font. There is a bit of work left to store all of the need properties for each type of control. The widget displaying the XML file below is QScintilla.

With the ability to create, save and reload screens I added in the QtScript engine. The JavaScript code is edited using the QScintilla widget as shown below. As modifications are made to the script it is simply reloaded using the Reload Script button. One of the issues I discovered was the need to disconnect and signal/slot connections when reloading a script. Internally the application will call the UnInitialize function before reloading the script. This is currently the best place to perform the disconnection. When the script is loaded into the engine the Initialize function is called. This can be used to initialize any variables and setup all of the connections. There is a very good document that details how to work with the integration of JavaScript and C++ code here. I also found the Qt Script Tetrix example provided a great deal of useful information.

Points of Interest

I have a lot of work left to do to finish this application. My next goal is to integrate a property editor that will allow the properties of each widget to be modified at run-time. I have posted all of the code and a Windows Binary on sourceforge. The binary package also includes two examples that show how to connect the signals and slots of the widgets from JavaScript. So far the performance of this application is much better than the C# screen designer. Oddly enough I would say that the development was actually easier in Qt than in C#. I spent about two or three weeks learning Qt and developing this application. I did not anticipate that the application would fall into place as quickly as it did. There are a couple of reasons that I believe it was easier. The first being that I could look at the source for the Qt Creator designer that allowed me to cherry pick code snippets to create the designer. The second important thing I believe was the excellent Qt Framework documentation. I'm currently work on the parts of Open Dyno and this project is sort of a side interest. I posted this article at this time because I think there might be an interest in the work that was done. I do plan to continue the work after I have completed the rest of the Open Dyno applications. I believe there is value in both the C# and Qt versions of the Screen designer.


  • Initial Release April 23, 2014


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Anthony Fountaine
Canada Canada
Tony is a research and development engineer at the Powertrain Engineering Research and Development Center (PERDC) in Windsor, Ontario.

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 24 Apr 2014
Article Copyright 2014 by Anthony Fountaine
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid