Feb 12, 2024

Branding QGroundControl

You can make QGroundControl your own with a few simple steps and the knowledge you’ll gain in this tutorial. This guide will be based on the Drone Software Meetup Group session on Branding QGroundControl led by Godfrey Nolan, Founder & President at RIIS. Here’s the video of the meetup for reference:

In this tutorial, we are going to cover modifying QGroundControl with your branding in the following ways:

Some Background Before Getting Started

QGroundControl is built on top of QT, pronounced “cute” if you want to sound hip in meetings, a free and open-source widget toolkit for creating GUIs as well as cross-platform applications.

QT has recently been updated, as of the publication of this article, from version 5.15.2 to 6.6.1. You can download it here.

QGroundControl has seen a lot of updates recently, which you can find on github.com/mavlink/qgroundcontrol, and is under constant review. If you haven’t already, download QGroundControl here and be sure to clone the repo. It doesn’t hurt to check for any major changes.

Launch the QT IDE and get familiar with the interface and layout. You can look back at our Customizing QGroundControlpost for more information on how to modify the qgroundcontrol/custom-example/ files to get a better understanding of how to make your changes in a more forward-compatible way.

And lastly, if you are using a pre-existing build, you must clean your build directory first.

Start by renaming the custom-example directory to custom.

Run python3 updateqrc.py.
Run python3 updateqrc.py.
Hold on one sec.

Normally, here we’d start our build, but we need to make a modification within the custom folder in CustomFirmware.cc to get it to build properly. Add the following function:

CustomFirmwarePlugin::CustomFirmwarePlugin
{
    for(int i = 0; i < _flightModeInfoList.count(); i++) {
        FlightModeInfo_t& info = _flightModeInfoList[i];
        //--Narrow the flight mode options to only these
        if (*info.name != _holdingFlightMode && *info.name != _rtlFlightMode && *info.name != _missionFlightMode) {
            // No other flight modes can be set
                info.canBeSet = false;
            }
    }
}

You will also need to remove the following from the file:

OpacityMask {
    anchors_fill: instrument
    source: instrument
    maskSource: mask
}

This is a temporary solution to a temporary problem as the open source community managing QGroundControl is still updating it to work with QT 6. Now you can start your build

If this is your first build, make a cup of tea or coffee because it’s going to take a while ⏲️.

Changing the Colors

For each object in QGroundControl whose color can be changed, four colors represent different states of the object. They are Dark Mode Disabled, Dark Mode Enabled, Light Mode Disabled, and Light Mode Enabled. You can see this easily in how each object is grouped into fours.

Let’s modify the hoverColor object’s hex code and see what happens. In this example, we are making a change to the Dark Mode Enabled color.

colorInfo[QGCPalette::Dark][QGCPalette::ColorGroupEnabled] = QColor("#2b93d2")

You should get a result that looks somewhat like this when you hover over a UI element.

Changing the Logo

Add your logos (after scaling them correctly) into the qgroundcontol/custom/res/images folder.

If you look in CustomPlugin, you will notice that the expected path is qgroundcontrol/custom/img/.

Then, in the CustomQRC file, replace the paths of the existing logo resources with the paths to your new logos.

<RCC>
    <qresource prefix="/">
        <!-- Replace the existing logo paths with your custom logo paths -->
        <file alias="LogoLight.png">path/to/your/Logo-Light.png</file>
        <file alias="LogoDark.png">path/to/your/Logo-Dark.png</file>
        <!-- Other resource files -->
    </qresource>
</RCC>

Checking back in QGroundControl now you will see your custom logo in the top right corner:

That’s only one of the QGroundControl logo destinations you can change. Take a look around to see what other ones you can modify with this aliasing method.

Changing the Font

QGC uses TrueType Fonts (TTF) for its interface. To customize the fonts, you’ll need to replace the existing fonts with your chosen TTF files. We’ll first have to create a folder. We made one at this path: qgroundcontol/custom/res/fonts. Add your TTF font file to the folder.

You’ll see in the CustomQRC the following code:

<qresource prefix="/fonts">
    <file alias="opensans">../resources/fonts/OpenSans-Regular.ttf</file>
    ...
</qresource>

We will ride on top of that “opensans” alias to install our custom font. Change the code to reflect the file location of your new font, like so:

<qresource prefix="/fonts">
    <file alias="opensans">../resources/fonts/{{YOUR CUSTOM FONT}}.ttf</file>
    ...
</qresource>

If you wanted, you could have created a brand new alias for the font, but then you would have to replace “opensans” wherever it appears elsewhere in the code. This is faster, even if it is a bit hacky.

Here’s the result:

Conclusion

It’s pretty easy to add your branding to QGroundControl. Once the switch to QT 6 has been fully made, it will get even easier, but in the meantime, you will have to do some additional setup to get going. You’ve learned how to tailor the application to your specific branding or aesthetic preferences, from changing color schemes and logos to updating fonts. This will enhance the visual appeal of the application and make an impression on your users.

Here are some additional resources to keep at the ready: