Building a HUD preliminary questions



  • Hello forum!

    I am trying to design a Heads Up Display (HUD) for a proof of concept project I'm working on. The HUD should be launched when I click on a button in my application(QMainWindow). The HUD itself needs to have a level of transparency as well as a color however the widgets it contains should be completely opaque (think along the lines of the Dash or HUD in Ubuntu), in other words when the HUD is launched it should obscure the application but also allow it to be seen. My question is what class should I use to do this? would a QMainWindow or QDialog with the title bar hidden work? My goal is to build something similar aesthetically to the Dash or HUD in Ubuntu as I hinted at before.

    Thanks for your time!



  • I have found that setting the color and opacity in a QMainWindow/QDialog also sets the color for all the child widgets. Is there a way that I can keep this from happening? otherwise what kind of widget should I use for this HUD?



  • The right class depends on which features you need. Personally I'd suggest a simple QWidget as the main (parent) window; then you will add any other information display widgets (like QLabel) as childs of the main window. If you want translucent window you should set the attribute WA_TranslucentWindow on the main window and draw with a proper background color (like Qt::transparent for totally transparent background).



  • How can I make a QWidget act as a window? doesn't it have to be embedded in a QMainWindow or something?


  • Moderators

    [quote author="nicky j" date="1392509337"]How can I make a QWidget act as a window? doesn't it have to be embedded in a QMainWindow or something?[/quote]All widgets (even a QPushButton) are standalone windows if they don't have a parent.



  • Ok so I just remade it into a QWidget, it allows me to set it transparent but not translucent with a color. What do I do. Also is a QWidget really the way to go for making a heads up display? What about QGraphicsScene or something?


  • Moderators

    [quote author="nicky j" date="1392511067"]Ok so I just remade it into a QWidget, it allows me to set it transparent but not translucent with a color. What do I do. Also is a QWidget really the way to go for making a heads up display? What about QGraphicsScene or something?[/quote]http://qt-project.org/doc/qt-5/QWidget.html#creating-translucent-windows

    QGraphicsScene has been replaced by Qt Quick.

    Personally, I'd only use widgets for GUIs that are meant to look like traditional, office-type desktop programs. For something nicer like a HUD, I'd use Qt Quick. See http://www.lothlorien.com/kf6gpe/?p=204 for an example (it's written in the deprecated Qt Quick 1, but it's trivial to port it to Qt Quick 2)



  • ok so I should use Qt Quick 2? is it possible to integrate it with my existing Qt C++ application? If so how? Can I add widgets made in Qt C++ to the Qt Quick?


  • Moderators

    [quote author="nicky j" date="1392522373"]ok so I should use Qt Quick 2? is it possible to integrate it with my existing Qt C++ application? If so how? Can I add widgets made in Qt C++ to the Qt Quick?[/quote]QML does have an initial learning curve, but if you plan on doing lots of work on GUIs, I believe the effort will pay off quite quickly.

    You can insert Qt Quick windows (QQuickViews) into existing widgets by using QWidget::createWindowContainer(), but you can't do it the other way round. You easily have a QWidget and a QQuickView as separate windows (which I'd imagine is what you want for a HUD?)

    As for the integration of functionality, see

    There are many topics to cover, so it might be easier to try things out first, and then post specific questions to the forum.

    All the best!



  • So you can place Qt quick in a Qt C++ Widget, but you can't place a Qt C++ widget in a Qt quick window? Unless Qt quick widgets are as powerful as the Qt C++ widgets and can share data with the C++ part of the application, I'm not sure why I would want to use Qt Quick/QML over Qt C++. My project is a web browser and so far its all been in C++ (and a TINY bit go HTML, JS, XQuery, and XML) its ~2000 lines of code now. Is it really worth it to use the Qt Quick. If it is worth it I would happily learn it, but if it can't have the C++ widgets I've already made in it, I don't see the point.

    EDIT: I have also heard (but I don't know for sure) that integrating Qt C++ and Qt Quick quickly destroys an applications performance, and since I'm make a web browser, performance is kind of important...

    EDIT EDIT: If I could use the QML as a 'front end' by designing the way my Qt C++ widgets look and then doing the heavy duty stuff in C++ (i.e. designing how a QToolButton subclass looks, then doing the behavior in C++) kind of like using the QML like CSS for styling and the C++ for the HTML and logic.



  • QtQuick is by far better than simple QML when it comes to designing interfaces since it was made for that. QML is just the man in the middle, sitting in front of C++ and behind QtQuick.
    The reason for using QML/QtQuick for designing interfaces (but I wouldn't limit it to this sole purpose) is that it throws out of the way all the C++ hassle of managing data types, functions (and parameters) and so on. You may build your own classes to be used in QML/QtQuick, then simply forget all the hard work you've done in C++ and easily make all the moves in QML. Yes, it's very much like CSS for HTML, but in addition you have all the C++ power within QML since you have all the object's (registered) methods available to be used in QML. I'd say it's more like JavaScript combined with CSS and HTML in an all-in-one manner.
    I don't know about performance loss because I never really used QML in any application, but I suppose that's what you pay with when you want an easy way for achieving complex tasks. Although, I wouldn't bother too much about it unless you're going to have a very massive QML application. For a web browser's UI I can think of very few must-have objects (like the address bar and the basic back, forward, go, stop and home controls) and some other fancy ones (like a bookmarks bar or an addons bar). Also, performance loss will be highly dependent on your C++ side code of your QML classes, obviously, so make sure you're not making (too many) mistakes there.



  • Thus far my entire browser ui has been in C++ (address bar, back, forward, reload buttons, etc.) I am trying to make a Heads Up Display similar to the iOS notification center.
    When a button is clicked on the C++ side of the app, it opens the HUD. Currently the HUD is a QQuickView that opens on top of the rest of the browser and opens a qml file. One of the problems I've been having with the QQuickView is styling it; I would like the HUD to have some transparency so I would like the QQuickView to be transparent allowing a translucent qml file to fill it.
    Maybe using a QQuickView isn't right for what I'm doing. If not what should I use? I am thinking of having a QMainWindow that somehow displays the QML. Is this possible?


  • Moderators

    [quote author="nicky j" date="1392595025"]So you can place Qt quick in a Qt C++ Widget, but you can't place a Qt C++ widget in a Qt quick window?[/quote]Correct.

    [quote]Unless Qt quick widgets are as powerful as the Qt C++ widgets and can share data with the C++ part of the application, I'm not sure why I would want to use Qt Quick/QML over Qt C++. My project is a web browser and so far its all been in C++ (and a TINY bit go HTML, JS, XQuery, and XML) its ~2000 lines of code now. Is it really worth it to use the Qt Quick. If it is worth it I would happily learn it, but if it can't have the C++ widgets I've already made in it, I don't see the point.[/quote]Yes, your choice would depend on how you've structured your program so far, and what kind of "power" you're looking for. You wanted graphical effects, which is why I suggested QML. If it doesn't suit your needs, you can try http://qt-project.org/doc/qt-5/QWidget.html#creating-translucent-windows

    [quote]EDIT: I have also heard (but I don't know for sure) that integrating Qt C++ and Qt Quick quickly destroys an applications performance, and since I'm make a web browser, performance is kind of important...[/quote]How old is your source?

    The convention is to use Qt Quick + JavaScript for quick and simple apps, or rapid prototyping. If more performance is needed, then the Qt Quick front end would be integrated with the C++ business logic. QML-C++ integration also gained a significant boost from the new QML engine introduced in Qt 5.2.

    Like all performance-related questions though, profiling would be the best way to check.

    [quote]EDIT EDIT: If I could use the QML as a 'front end' by designing the way my Qt C++ widgets look and then doing the heavy duty stuff in C++ (i.e. designing how a QToolButton subclass looks, then doing the behavior in C++) kind of like using the QML like CSS for styling and the C++ for the HTML and logic.[/quote]Yes, that is how QML/Qt Quick was intended to be used. :)

    [quote]Currently the HUD is a QQuickView that opens on top of the rest of the browser and opens a qml file. One of the problems I've been having with the QQuickView is styling it; I would like the HUD to have some transparency so I would like the QQuickView to be transparent allowing a translucent qml file to fill it.[/quote]You can make the QQuickWindow itself transparent by calling QQuickView::setColor(QColor(0, 0, 0, 0)). (However, I just tried this myself and I think there is a rendering bug, at least in Windows 8). Give it a try.

    [quote]I am thinking of having a QMainWindow that somehow displays the QML. Is this possible?[/quote]Yes, see http://qt-project.org/forums/viewthread/38501/



  • yeah it sets the QQuickWindow black when I do that, I'm using OS X so it may be a rendering bug


  • Moderators

    [quote author="nicky j" date="1392697321"]yeah it sets the QQuickWindow black when I do that, I'm using OS X so it may be a rendering bug
    [/quote]Can you provide your code for initializing and showing your QQuickView?

    The bug I'm seeing is that the transparent/translucent parts are not refreshed correctly when I move the window. If I don't move it, it is rendered correctly and I can see the contents behind the window.



  • Yes thats what I'm referring to as well. Sorry I didn't clarify. When I drag the window it bugs out like you said


  • Moderators

    That's ok :)

    Qt engineers are trying to reproduce the problem, but haven't been able to so far. Could you please add your computer's details to the discussion?: https://bugreports.qt-project.org/browse/QTBUG-36896



  • Haha I actually just fixed it on my computer. I rebooted my computer and now it works. It still has an ugly shadow under it, but I don't think this is a bug. If you still want the code here it is:

    @MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    {

    hud = new QQuickView;
    hud->setColor(QColor(0, 0, 0, 0));
    hud->show();
    

    }

    MainWindow::~MainWindow()
    {

    }
    @

    My computer:
    MacBook Pro (2009)
    OS X 10.9.1
    2.53 GHz Intel Core 2 Duo
    $ GB 1067 MHz DDR3 SDRAM

    sorry to have wasted your time, looks like a reboot a day keeps the (computer) doctor away!


  • Moderators

    I wish a reboot can fix the issue on mine... ;-P It might be a Windows 8 thing.

    No apology required! When I investigate things, I usually learn something new too. :) (e.g. I didn't know how to make transparent windows before talking to you in this thread. But now I do.)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.