Design Application with Qt

Question

I have to implement a graphical user interface design. The framework of choice is Qt.

After some work on the implementation a few difficulties and questions turned out. The main point is that there are some fancy design elements with gradients, kind of 3D effects, shadows and so on.

The currently used approach - which I really don't like very much - is to use the bitmaps from the graphic design as Backgrounds of various widgets. This has some very nasty drawbacks according to the placement of the elements and to scalability. This approach generates a fairly static user interface, that is difficult to maintain and adapt.

I would appreciate it to generate all the graphical elements dynamically at runtime using as many default tools from Qt as possible. But I just don't know how to implements such complex visual effects. As an example you can assume the following image.

Question: How would an reasonable approach look like to get results like that below. (I don't want exact solutions, just some pointers, general approaches and best practices.)

Periderm

most of the time the fancy effects are prependered transparent overlays (stretched or repeated as needed) – Tybi

I think this is not more scalable than the currently used approach that I have mentioned, is it? I cannot scale without quality loss. (As far as I know) – Periderm

Take a look at QML. It is much more customizable. – Nighttime

qml is perfect if you already have some knowledge of css + javascript, or are will to gain some. And it is where the Qt project wants to go. – Burhans

Answer 1

You'd be best off using custom widgets and building the effect in the paint event. There's an example here: showing a custom LED widget. There's also some slides here about custom painting and using SVG images within the paint command for widgets: http://saim.pub.ro/ITNQ/L5_Slides_v01.pdf. Using SVGs within the paint command makes it a bit easier instead of using fixed BMP graphics files, as you can use the layout engine then.

Wack

Heres another that I found useful, but I couldn't find the link: qt.developpez.com/tutoriels/braindeadbzh/customwindow – Wack

Answer 2

Qt 5 offers stylesheets to customize the look of your UI.

Specifically, if you want to stamp a texture onto buttons, have a look at this example. It shows how to use borders to specify areas that should not be stretched.

Stamata

Answer 3

Another solution is using Qt Style Sheets which allows you to customize your widgets. Check the examples: Qt Style Sheets Examples | QtWidgets 5.3 | Documentation | Qt Project

Here's styles for QPushButton which looks "similar" like button on image. But it may be sufficent for your requiments.

background-color: qradialgradient(spread:pad, cx:0.499807, cy:0.489, radius:0.5, fx:0.499, fy:0.488909, stop:0.0795455 rgba(0, 147, 185, 255), stop:1 rgba(30, 30, 30, 255));
border: 5px solid black;
border-radius: 15px;

Catie

Answer 4

For a detailed walkthrough of how to do something similiar to this in QML, see this answer. If you're familiar with QPainter, you could port it to widgets with C++.

Bitchy