[SOLVED] Beautiful GUI using Qt (like Adobe ones)
-
Hello,
I just found this topic :
http://stackoverflow.com/questions/24492317/obtain-beautiful-gui-like-adobe-ones
wehre the author says its not possible to obtain such a GUI (like photoshop, etc ...) with Qt.
I have the feeling that it is possible.
What do you guys think? -
The style itself is pretty easy. Qt stylesheets can get most of it and what cannot be done with qss can always be drawn manually in painEvents. There are not many animations in adobe UIs that I know of, but there are means in Qt to get these too.
The main drawing space should, indeed, be done with hardware acceleration, which Qt also provides via QOpenGL support classes and widget.
The most problematic IMHO would be the custom window frame. Doing that correctly is not a simple task. Not to say impossible. just a lot of boring work with native window behavior mimicking. -
Thats interesting :)
- Why the main drawing space should, indeed, be done with hardware acceleration
- What do you mean by the custom window frame ?
-
-
Because of the amount of stuff to render. For example drawing 50 layers of FullHD resolution images with blending, masking, vector paths and font rasterization is not something you want to tackle with software renderer. At least not if you hope for any kind of performance. To give you a feeling of how true that is there are many vendor specific OpenGL extensions created to tackle that particular problem. One such worthy example is NV_path_rendering for vector graphics. It was greatly lobbied by big graphics editing companies, including Adobe.
-
Notice that the window frame (the part with title and close/minimize buttons) is not a native Windows or Mac frame. There are also some controls on the title bar (e.g. the searchbox). Some other apps do it too, e.g. MS Office or Google Chrome, that draws tabs on the window frame. It is usually done by disabling the native frame entirely, and drawing the custom styled frames as part of the application client area. If you're interested in that search the forum. There were couple of topics about how to do that with Qt, but be warned that it 's not as simple as it might look at first glance, and there are many subtleties.
Many (even big) apps tried that and failed miserably, one such example is Autodesk, which struggled with non-native frame related bugs for at least a couple of releases of 3ds Max, until they got it semi-right in the latest one.
-
-
Thank you very much Chris for these detailed explanations.
- I undertstand better now. Here you take into account what photoshop really does, and indeed, now it looks pretty obvious for me.
- I am a little bit more surprised about this one because I used it in my applications, which means to override the native look with custom properties.
Maybe you are talking about something different but I used custom stylesheets to obtain the look I wanted.
Or maybe its different when you deal with the main window frame?
I had no idea Autodesk had such issues, its interesting :)
-
bq. (...) I used custom stylesheets to obtain the look I wanted. Or maybe its different when you deal with the main window frame?
Qt operates only on the client part of the window and stylesheets only apply there. You can't paint on the frame with QPainter or style it using stylesheets. You either have to draw with native methods (e.g. GDI on Windows) or disable the frame entirely and draw stuff like close button and window caption as part of the frameless window. It also forces you to handle stuff like resizing, minimizing and aero snap manually.
Take a look at this "somewhat old thread":http://qt-project.org/forums/viewthread/26640. It has some pictures to help you understand what I mean by client area and window frame.
-
Really interesting I didn't know that at all. I will have a more detailed look at the thread you mentioned as I will need that as well.
Is it something that might become easier to do in the near future or it is not planned in your opinion? The thread is almost 2 years old ;)
Cheers -
It's been some time since that thread.
Qt has added some classes to do with platform specific stuff.
For example there's "Qt Windows Extras":http://doc.qt.io/qt-5/qtwinextras-module.html module that allows you to do stuff like get that glassy look that Windows Vista introduced.But if you want a full blown custom style like Adobe uses you will still need to disable the native frame by setting a Qt::FramelessWindowHint on the window and take care of all the drawing and window manipulation stuff yourself.
There's nothing to help here planned I think mainly because it changes so fast. Windows changes the look every release these days and Mac is morphing platform APIs too. It's just a moving target and platform specific at that. Not something Qt would be comfortable committing to.
-
Thanks for the tips :)
A last question if I may.
About the look "inside" the main window, are there some widgets that can't achieve the same look at on the Adobe picture in your opinion? -
You might need some custom drawing with the color picker. The rest, as far as I can tell, are pretty standard widgets - toolbars, lists, buttons, docks, combos and dialogs.
