Tag Archives: UI Design

Dark Fusion Theme for Qt 5

My favorite new theme (for Windows applications, at least) is the Fusion theme that came with Qt 5. I was working on an application recently where the people I was making it for wanted to be able to switch between a lighter and darker theme. Luckily, the Fusion theme uses the applications color palette. I’m putting the code up on Github in a gist, but there won’t be the code to switch between the two themes. I’ll post that later as a quick tip/tutorial.

You can find the theme on Github here. Alternatively, I’m posting the code below in a collapsed code box. Feel free to make changes and submit them back on Github though! You can use this theme in all your applications, but be sure to tell me about them if you can. I’d love to see what people do with it. 🙂

qApp->setStyle(QStyleFactory::create("Fusion"));

QPalette darkPalette;
darkPalette.setColor(QPalette::Window, QColor(53,53,53));
darkPalette.setColor(QPalette::WindowText, Qt::white);
darkPalette.setColor(QPalette::Base, QColor(25,25,25));
darkPalette.setColor(QPalette::AlternateBase, QColor(53,53,53));
darkPalette.setColor(QPalette::ToolTipBase, Qt::white);
darkPalette.setColor(QPalette::ToolTipText, Qt::white);
darkPalette.setColor(QPalette::Text, Qt::white);
darkPalette.setColor(QPalette::Button, QColor(53,53,53));
darkPalette.setColor(QPalette::ButtonText, Qt::white);
darkPalette.setColor(QPalette::BrightText, Qt::red);
darkPalette.setColor(QPalette::Link, QColor(42, 130, 218));

darkPalette.setColor(QPalette::Highlight, QColor(42, 130, 218));
darkPalette.setColor(QPalette::HighlightedText, Qt::black);
    
qApp->setPalette(darkPalette);

qApp->setStyleSheet("QToolTip { color: #ffffff; background-color: #2a82da; border: 1px solid white; }");
Advertisements

Quick Tip: Load Fonts from a Local File with QML

If you are familiar with CSS, you have probably loaded an external font before. With an Internet application, you usually wouldn’t load it from a file, but for a desktop application that doesn’t require an Internet connection, loading from a file is a must. Luckily, this is extremely easy and the TTF file can be embedded right in the executable using the Qt resource system (QRC protocol). In QML, there is a provided FontLoader element that makes quick work of loading fonts. Here’s quick example:

FontLoader { id: myCustomFont; source: "qrc:/fonts/myCustomFont.ttf" }

Note that if you want to do so, it is possible to directly link to a URL on the Internet. However, I wouldn’t recommend this unless you can ensure that your user will have an Internet connection at run-time. Otherwise, I would recommend downloading the TTF file instead and putting it in a local resource file. Be sure to read the license before doing this though!

When you want to use the font later in a font field, for example, you can simply do:

font.family: myCustomFont.name

And that’s it! You are all set to use custom Truetype Fonts in QML! I hope this helps you out with your QML application. Happy coding!

Quick Tip: QProgressBar as a Busy Indicator

This is a super simple tip that doesn’t really have much to it. A busy indicator is just a visual cue to show the user that something is happening. To use a progress bar in Qt as one, you just need to set the minimum and maximum values to 0. If you do this, you get an infinite progress indicator. This is a better alternative to a progress bar when you have a process in which you cannot calculate the percentage completed, or one that takes a really long, undetermined, amount of time. An example with the Fusion style (that I use for basically any QWidgets these days) yields an animated diagonal stitch pattern:

Busy Progress Bar

The Qt Fusion style progress bar.

On Windows 7, you get a nice animated effect as well, but with a smaller colored area moving from left to right infinitely.

Windows 7 Busy Progress Bar

The Windows 7 version of the busy progress bar indicator

I hope the tip helped you out! Happy coding!

Get some color back in Visual Studio 2012 icons!

If you are still using Visual Studio 2010 (or older?), then you can just ignore this. Apparently, Microsoft’s UI design team decided to change the icons to a more “monochrome” color palette in VS 2012, so what you get is essentially gray icons for everything. These icons are a far cry from what we have come to know as save, open file, open folder, etc. However, I personally don’t really care to be honest, unlike most developers. If you seriously use Visual Studio 2012, then there is no reason you shouldn’t do these two things:

  • Learn those shortcuts! This is a must. Visual Studio has so many shortcuts that most actions take two keys plus a modifier! It sure beats having to look through context menus that are so big, they fill up more than 1,080 pixels vertically…
  • Customize the layout where everything is somewhere you can find immediately. Re-arrange the toolbars and memorize the icons’ respective locations. Even if you know all the shortcuts (unlikely), there are still some things I prefer doing with the mouse–namely opening files, as it’s easier to use the mouse to browse through the files.

If this still isn’t enough, there is always the NiceVS Visual Studio extension, which appears to bring back the colored icons so many people have come to miss so much. Use at your own risk, however, as I didn’t even bother to test this plugin. If Microsoft’s made a UI decision that coincides with the Metro UI (which everyone also seems to hate), it isn’t going away easily. There’s no sense in installing a plugin to try and undo what Microsoft has done, in my opinion.

Quick Tip: Customize Qt Tooltips with Style Sheets

I’ve been working on an application recently, and I was utilizing a custom version of Qt’s Fusion style. I got the theme looking really sleek, but then I noticed the ugly tooltips. :/ I knew there had to be a way to do this! I spent about 2 minutes thinking and searching the Qt Documentation before I realized that there was such a thing as style sheets in Qt! 😛

It’s one of those things that I had never really used just because I hadn’t bothered. That figures… anyway, style sheets are extremely helpful when you want to customize the look and feel of your application. In this case, we’ll change some attributes of the QToolTip.

    qApp->setStyleSheet("QToolTip { color: #ffffff; background-color: #2a82da; border: 1px solid white; }");

This style results in a tool tip looking something like this:

Custom Tooltip

Create a custom tooltip using Qt Style Sheets

You can certain style it differently using the CSS-like properties. 😉

Qt Fusion Style

I’ll have to say, I’ve never really liked the Windows form components. Of course with WPF and similar technologies (cough, Java, cough), C++ is kind of left out of all this new UI craze that is happening to Windows. I mean, if you open up the latest version of Chrome, the context menus aren’t even the familiar ones. Apparently the Windows UI artists had a different vision…

Amidst the emphasis on QML as the new UI language for Qt, new form styles have been ushered in to bring a new light to the dating Qt Widgets. My personal favorite so far is Fusion, which brings a more modern UI to widgets (in my opinion). I made a demo and shot a video of some components:

Got a personal favorite? Let me know in the comments!