[SOLVED] GUI - Cross platform: minimize, expand and close button

[maximus]

Hi,

I would like to set up custom buttons and replace those that come from Windows or Mac (the 2 systems I currently support)

1- This is the result I would like to achieve (a nice GUI made with Qt) :
https://www.dropbox.com/s/jttmht1dch4b84v/NiceUIwithQT.png

2- This is my current GUI (still working on it..):
https://www.dropbox.com/s/qb6ds1478n1vxcm/myCurrentUI.png

You can see on the first image (1) the top button are smaller and behave the same way on windows and mac, how is it possible to achieve this with Qt? Maybe use a QDialog, remove the default buttons and set a new widget on top? Or is there a function to replace the Os default button?

Also is it good pratice to have a Menu Bar and a Status bar to the mainWindow? Currently I have no menu bar and I'm a bit struggling making nice GUI with Qt, is there online classes or help available? I would pay for it if I can make GUI like #1

Thank you!

[thEClaw]

I guess you are on the right track - just do the whole layout yourself, bypassing the operating system.

Would something like this suffice?
"GUI including custom window frame":http://abload.de/img/window_topnprdu.png
The screenshot is not mine but I know how the GUI is set up. The native window frame is deactivated ( QWidget::setWindowFlags(Qt::FramelessWindowHint), "see this":http://qt-project.org/doc/qt-5/qwidget.html#windowFlags-prop

Then there is a menu bar in place (you might want to embed it into e.g. QFrame to have more control over the whole window border; you could also use a normal widget instead of a menu bar) which acts as a title bar. There is a Qt example explaining the details, but I wasn't able to find it right now.

Finally there are simple QPushButtons in the top right - using stylesheets you can make them look however you want to. As an alternative you could also paint them yourself, but that's quite a bit more involved.

As to menubar and statusbar: I don't know what the best practice is. In my opinion you should add them if you need them - depending on your program both might be pretty useless (or very useful).

[maximus]

Thanks for your answer it really helps!

I will do a layout like the one you posted, I like the result. For the button, do you recommend simple pushButton using a .png image ?

Also in your image, is that a menu bar on the top left? When I add a menu bar in my MainWindow, it takes the whole top area, I would like to save space and use this layout (menu bar on left, custom button on right) like you posted.

Also i'm not an expert in stylesheet, I guess I just can't reuse some stylesheet I have for a button in a web app (css3) as the syntax is different ?

Thanks again, i'll get back to work ;)

[thEClaw]

I think a .png is a good idea - I have been using "IcoFX":http://icofx.ro/ in the past (a free icon editor), maybe that will be of help.
You could also draw symbols on the fly using QPainter, and don't forget about the stylesheets of the buttons to make the things stand out as titlebar buttons.

In the image the whole top is a menu bar - you can add widgets to it since it itself is a widget. You could just use a widget or a QFrame instead, but this way the layout is a bit more efficient and, depending on taste, prettier.
If you don't use a QMainWindow as main window, you can probably have as many menubars as you want, wherever you want. Or just have flat buttons (a property of QPushButton) on a widget, they can be made to behave like menu buttons.

Concerning stylesheets: Look into the Qt documentation. If you set it on a single QPushButton (via QWidget::setStyleSheet()), the CSS-code is very short (probably below ten lines). Even with little experience it shouldn't take much more than an hour (or a couple, if you want to get fancy).
"A bit about stylesheets":http://qt-project.org/doc/qt-5/stylesheet-syntax.html
"Style Sheet Reference":http://qt-project.org/doc/qt-5/stylesheet-reference.html - just look out for QPushButton and maybe take a look at the "example":http://qt-project.org/doc/qt-5/stylesheet-examples.html#customizing-qpushbutton

[maximus]

IcoFX link you provided seem to be only free for 30days and is for windows only? I'll have a look and see if I can find free .png instead.
Too bad I can't add "font awesome icons":http://fortawesome.github.io/Font-Awesome/icons/, I think it would work well and is 100% free:

I got it now! i'll make my own QFrame class containaing a QMenuBar on the left and a custom layout with PushButton on the right, that way I can reuse that bar anywhere in my app. Only thing hard will be making the thing look pretty. Will post the result when I got it, thank you!

[maximus]

Another example of a great topbar

Steam Ui :
https://www.dropbox.com/s/2hr87i5uoqbhlof/steamTopBar.png

It would be nice to have one already made included inside Qt, it's a common requirement, but i'll make my own for now ;)

[thEClaw]

By the way: The symbols for the buttons are probably available within Qt and can somehow be requested by the current style.

I don't think Qt should contain something like this, it is not a common thing to circumvent the operating systems window-decorations. And it is really not hard to do it on your own - a layout, a couple of buttons...that's mostly it.

[maximus]

Hi, I have set up custom TitleBar that replace the OS one like you suggested

1- Create a custom widget that will act as the Title bar with those signals
@signals :
void minimize();
void expand(bool expanded);
void quit();@

2- remove MainWindow default buttons and add custom Widget on top using designer
@this->setWindowFlags(Qt::FramelessWindowHint);@

3- Connect TitleBar signals with mainWindow slots

@void MainWindow::closeWindow() {
QApplication::quit();
}
void MainWindow::minimizeWindow() {
this->setWindowState(Qt::WindowMinimized);
}

void MainWindow::expandWindow(bool expand) {
if (expand)
this->setWindowState(Qt::WindowMaximized);
else { /// To fix this one, can't un-expand
// this->setWindowState(Qt::WindowModal);
}
}@

The only problem I have right now is the Expand button that only expand, but I can't get it to un-expand when window is already Expanded, not sure if this flag exists..

Here is the current result:
https://www.dropbox.com/s/dep69is56fma7e2/V2gui.png

I will probably use the same method to create a custom status bar, working well so far!

[thEClaw]

Looks good! :)

Yes, you can "unexpand" the window. Just check QWidget::isMaximized and, if true, run QWidget::showNormal instead of "QWidget::showMaximized()":http://qt-project.org/doc/qt-5/qwidget.html#showMaximized .

PS: I just noticed you hadn't discovered these functions yet.^^ It's easier than you think - if you follow the link I gave and look for the methods listed under "see also", you will find everything you could need.

[maximus]

Ohh I didn't know about these functions, exactly what I needed!
Working 100% right now

@void MainWindow::closeWindow() {
QApplication::quit();
}

void MainWindow::minimizeWindow() {
this->showMinimized();
}
void MainWindow::expandWindow(bool expand) {
if (expand)
this->showMaximized();
else {
this->showNormal();
}
}@

I should also mention I used this nice class :
http://qt-apps.org/content/show.php/Frameless+Window+Helper?content=138161
Can make any frameless window movable/resizable in 2 lines of code!

Thanks, └(°ᴥ°)┘

[thEClaw]

Some small things to make the code simpler and more pretty:
You could connect your signals directly to showMinimized() etc. - the one for maximizing would require a short lambda [removed]extremly handy - learn about them if you don't already know them).
And I don't really know why you need "bool expand", there is a check for that built into QWidget, as I mentioned above (isMaximized() etc.).

[maximus]

Hmm, the signals come from the TopMenu Widget and I will probably use this same TitleBar on other windows (QDialog, etc.) inside my app, that's why I wanted to code it generic, I will check about lambda, last time I heard that was in my b.Sc class using another programming language (Scheme)

I will change the bool expand method, It was just a flag to know if the window is already maximized or not, in order to show the correct icon inside the topMenu, it's probably better to code a signal coming from QMainWindow to TopMenu instead of using this bool as it's QMainWindow that is aware of this state.

Thank you once again ;)
Max