Best approach regarding advanced UI design in a Qt Framework

aarelovich

Here is my problem. I've been working on a Windows only desktop application for a client. The client has gone to a graphical designer and came back with a UI design.

My UI design was minimalistic and used QWidgets only as my focus was on getting the program to do what it needed to do. Now, I'm faced with the following problem. I need to go from somthing that looks like this:

To something that looks like this:

(The background can be considered the wallpaper in the last picture). Please understad that due to NDAs I can't show pictures of what I did and need to do, so these images I found online to try to illustrate my problem.

Now as far as I know, I can imagine three approaches:

Design everything from scratch using QGraphicsFramework, using a QGraphicView as my entire application (I've done this before for my own designs, but the results wasn't as good as I had hoped. I worked pretty well).
Reimplement the paint event in QWidgets so that they may achieve this look. (Never done this before, saw in a github project)
Using QStyleSheets to costumize the each Widget. (Don't know If what I want is completely achievable using this, but it does seem to be the most standard approach)

So my question is, what is the best way to approach this problem? I know this is opinion based question, but I don't know what the industry standard is for designing a UI that must answer to whatever a graphical designer came up with.

Please keep in mind that I will have access to all resources, sizes, fonts, etc as they will be provided as per my requirements.

I'd appreciate any help.

VRonin

I'll give you 3 more options:
4. Implement your own QStyle and use QApplication::setStyle like Qt did with fusion
5. Use QtQuick as ui instead of QtWidgets to style it easily and more efficiently
6. Turn it into a "browser app". Write the ui in html/css and display/manage it via QtWebEngine

It really depends on what you already have. If the graphical designer already designed everything in html/css then 6 is the most convenient way as the client will get exactly what (s)he asked for, otherwise I'd suggest 5 (4 would be the ideal solution but it's way harder/expensive to deploy)

JKSH

Hi @aarelovich, #2 is very hard work and very impractical. Don't do it.

When is your project deadline? If you have time, I recommend you learn QML and go with @VRonin's option #5. See https://www.youtube.com/watch?v=WGmjObx6AkM for a demo on styling Qt Quick applications using images.

@VRonin said in Best approach regarding advanced UI design in a Qt Framework:

If the graphical designer already designed everything in html/css then 6 is the most convenient way as the client will get exactly what (s)he asked for

Note: Even if this is true, the designer probably only made static designs, so you will probably need to write some JavaScript to make the site/app interactive.

aarelovich

@VRonin

Sorry, all I've got is a PDF generated by Adobe Illustrator. I have no idea how to use QtQuick, which is why I did not even listed as a choice. I am intrigued by 6) but how would this work? If a button is pushed, for example, how would I receive said event?

@JKSH

Thanks, for reply. As I've said before I need to have this done in about a week, and my experience with QML was disastrous, which is why I want to avoid it at all costs. I could take me months to do the UI with it (or its what I'm afraid of). As far as animations and transitions go, there are none, thankfully. So that is one less problem.

JKSH

@aarelovich said in Best approach regarding advanced UI design in a Qt Framework:

I am intrigued by 6) but how would this work? If a button is pushed, for example, how would I receive said event?

As I mentioned in my previous post, you will need to write JavaScript to make the app interactive. However, as you only have a PDF, that means you will also need to implement the GUI layout in HTML/CSS. After that, you need to use QWebEngine to act as the bridge between HTML/CSS/JavaScript code with your existing C++ code.

If your deadline is 1 week, learning a new technique is quite risky. Your best bet is to use a technique that you already know, or to hire someone to do it for you.

my experience with QML was disastrous, which is why I want to avoid it at all costs. I could take me months to do the UI with it (or its what I'm afraid of).

I'm sorry to hear that. Note that QML is designed to make it easier and faster to implement UIs.

aarelovich

@JKSH I know!! I agree with you that that is the point of UI. But I wanted to create a simple app which listed (I don't recall what) items and the do something when the user clicks it. I remember I got stuck for days just making the list occupy the entire window of the app.

I could try again, but given the complexity of the design of the ui (multiple fonts, custom colors, different type of edit fields, custom checkboxes, application backgrounds, etc) again it would be like learning a new tecnique on a short time, and I agree, it is risky.

Pablo J. Rogina

@aarelovich +1 for option #5...

aarelovich

@Pablo-J.-Rogina

I'd love to follow your advise if there would be a good way to lear QML fast....

VRonin

@aarelovich said in Best approach regarding advanced UI design in a Qt Framework:

a good way to lear QML fast....

https://qmlbook.github.io/

A week is just too little time btw

JKSH

@aarelovich said in Best approach regarding advanced UI design in a Qt Framework:

I could try again, but given the complexity of the design of the ui (multiple fonts, custom colors, different type of edit fields, custom checkboxes, application backgrounds, etc) again it would be like learning a new tecnique on a short time, and I agree, it is risky.

You have experience with Qt Widgets and the Graphics View Framework, right? Use those for this project.

Forget QML or HTML/CSS/JavaScript for now; it will take you more than a week to learn to use them effectively. After you've finished this project though, do spend some time learning them to see if they can help you in future projects.

All the best.

aarelovich

@JKSH Thank you for your advice!!!