Custom Client Side Decorations in QML - qt

Custom Client side decorations or frames are quite common in GTK (I believe) but not so with QML or even with QWidget. It does save a lot of space and looks better.
Following is a screenshot of Gnome Calculator.
What I have tried so far,
Disable the DE provided decorations by passing Qt.CustomizeWindowHint to Window flags.
Implement my own decorations (reinventing wheels is painful).
Problem I am facing
The custom decorations do not integrate well with the DE, be it KDE or Gnome.
Unnecessary codes and buggy.
This is what I have tried (Not so cool)
I have read this article here but it doesn't address the original problem, all the DE provided decorations are gone and you are implementing custom buttons. Now only my one window will look alien in front of all the other apps. Will there be any other way to achieve the same results in better way (in Qt way)?

Related

Layout required in designer but not in hand coded app?

I'm new to Qt and it's quite a learning curve!
I've been search/reading/hacking and learning for most of the day on this one.
I'm working on an app that will have a image in a scroll area as it's main purpose. The image viewer example is where I started. This example appears to be "laid out by hand" if you will - i.e. there are no .ui form files for it (it's trivial so why not).
So here is the rub - I want to use designer to build a much more sophisticated app. If I start fresh with a new project and use designer the resizing doesn't work unless I add layout (used vertical, all appear to fix the resize issue) to the .ui form.
Designer creates a lot more code to do the same thing - I don't care, it is after all an IDE / code generation tool.
However it's not clear to me why the layout is required when I use designer and not if I code it by hand. I searched the code for the image viewer example and there doesn't seem to be ANY layout involved at all, just 3 or 4 nested widgits (Main/Scroll/Label).
Is the default layout basically built in?
The example you linked to uses a QMainWindow. This widget has its own layout because it has built-in support for menubars, toolbars, dock widgets and a statusbar:
Main Window Framework:
Normally, the widget set as the central-widget would need to have a layout explicitly set on it in order to layout its own child widgets. However, in your linked example, the central-widget is a QScrollArea, which also happens to have a built-in layout. This is all just coincidental, though. The large majority of widgets don't have a built-in layout, so most GUIs will need to explictly add at least one layout, and several will usually be needed for more complex applications.
I would say Qt Designer is absolutely essential when it comes to experimenting with layouts (especially when you start learning Qt). Even if you don't actually use the ui file, it's still very helpful to just view the code that would be generated from it.

Zooming a view in PyQt?

I have a simple to do tree application that displays a QTreeView inside of a QMainWindow. I want to give the user the ability to change the magnification level of the content (using a spinbox most likely), but without actually changing the underlying font size of the text.
Is there a way to do this without changing my whole app to a QGraphicsScene? The app is just showing a good-old fashioned tree with text, no graphics or anything fancy other than wanting to change the magnification of the view; hence, I am thinking that switching to a graphics scene would be overkill.
Or, am I wrong, and switching to a graphics scene is the only simple way to do it?
Note a trimmed down version of the app is at Code Review. It contains a SSCCE, but is a bit long to post here.
In a site discussing how to put widgets on a scene, trolltech wrote (emphasis added):
I myself and several other Trolls’ve spent some time researching this
topic [how to embed a widget in a QGraphicsScene]. It’s not trivial;
most solutions to embedding widgets into a scene end up with several
serious drawbacks. That’s also why Qt doesn’t have any off-the-shelf
solution to this.
Widgets cannot be scaled or rotated, but graphics items can.
This suggests I cannot perform, in a simple way, the operations I want to on my QWidget by itself. That is, perhaps I need to add it to a scene, which is what I was trying to avoid. If that is the answer, then I'll accept it and start a new question if I get stuck doing that.
Note I just found this question, which is pretty much a duplicate, and does not have an (accepted) answer.
Related content
http://www.qtcentre.org/threads/62745-Zoom-a-view
QTableView Zoom In/Out
Drawing widgets (such as buttons) over QGraphicsView
QGraphicsView Zooming in and out under mouse position using mouse wheel
https://forum.qt.io/topic/15308/qgraphicsview-zooming-with-qslider
https://wiki.qt.io/Smooth_Zoom_In_QGraphicsView
As suggested by the docs quoted from trolltech in the original question, there is no built-in method to zoom on a view.
If the goal is to avoid the use of QGraphicsViews, the simplest way to separate the size of the font on the screen, versus the size of the font saved or printed, is to basically have two fonts. One to be displayed on the screen you can call 'zoom', versus the other to be saved/printed and call that 'font size'.
I got this idea from qtcentre (in a post I added to the original post too):
http://www.qtcentre.org/threads/62745-Zoom-a-view

Creating a home screen for my embedded board using Qt/Qt Quick

I am not an expert but I have been using Qt/QtEmbedded for sometime now, for SBC 6845. I have created a few applications and have successfully run them on my device.
Now I want all of those applications to appear on a home screen. I understand that using QML/Qt Quick this might be achieved, but I don't have any idea on how to proceed with it. I have gone through some links and tutorials but most of them show how to create buttons and all that with Qt Quick, but not much than that. I am yet to find some tutorial/docs which can point me how to proceed with all applications on my home-screen. I need some directions, any links, advice on docs/books is welcome.
[While cross-compiling the QtEmbedded 4.6.2 libraries for my SBC I encountered problems with enabling opengl support. And, I am unaware of the other methods for using QtQuick2 without opengl.
The applications (5-6 of them) are QWidgets and linking icons require to stay in the home screen. I want to keep them as simple as possible without any effects for the icons.
Plainly speaking, I am trying to create a bunch of icons displayed on the home screen linked to those applications. The applications if launched in windows style application, (or like a popup QDialog) will also serve my purpose.]
Thanks.
"I have gone through some links and tutorials but most of them show
how to create buttons and all that with Qt Quick, but not much than
that"
For this part of the question, I'd advise you to download QtCreator
and start playing with the demos (using more than just some buttons:
you have demos for ListViews, GridViews, Delegates, Animations,
Particles, QtQuick Layouts (Qt5.1 only), QtQuick Controls (Qt5.1
only).
There's also the rather complete :
http://qt.gitorious.org/qt-labs/qt5-everywhere-demo
I'm completely unfamiliar with all the embedded/cross-compiling
aspects of your question.
About OpenGL/QtQuick2 : http://qt-project.org/forums/viewthread/30483
http://qt-project.org/forums/viewthread/17201
Also note that you can embed QtQuick2 scenes into a QWidget, but not
the other way around (no QtWidget inside the scenegraph).
So maybe the easiest/fastest way to go for you would be to stick with Qt4 or Qt5 declarative/QtQuick1 module (might be deprecated/removed starting with Qt 5.2). In this setup, there is no scenegraph/mandatory need for OpenGL. And you can embed QWidgets into your qml scene (no scenegraph: it uses the QGraphicsView backend) via QGraphicsProxyWidget.
You'd then have some GridView (you also could use some Grid with a Repeater) filled with models and delegates (= a delegate acts as a template item to be filled with the model).
Your delegates would have states/maybe Loader(s) (for on-demand loading) : icon state and when clicked, some maximized state containing a loader, loading your widget through QGraphicsProxyWidget.
You already have half of this presented in this example (a grid + 2 states : small icons grid and maximized view, you only need to implement the delegate/loading/model/QGraphicsProxyWidget things):
http://developer.nokia.com/Community/Wiki/Implementing_parent_change_animation_with_QML

How do I use my own custom buttons and design with wxpython

I've been looking for some inspiration with wxpython as far as the GUI goes. Everything in the demo looks boring and uninspiring so I want to go in my own direction but I can't figure out how to use my own buttons I made in photoshop or my own background images.
I'm kind of new to GUI programming so I ask if you could please be clear in what steps I should take. Once I intialize the frame...how to I load my custom buttons, or set the panel background?
As acattle pointed out, I already wrote on how to change a panel's background. You should note that wxPython isn't a themable GUI toolkit. It uses the native widgets of the OS wherever possible and most of the time, those just aren't very themable. If you need that, then you should look at Tkinter's (especially ttk) or pyside/pyQt.
If you need bitmap buttons, there are several options:
BitmapButton
GradientButton
AquaButton
PlateButton
I did some googling and I found this tutorial for setting the background of panels.
A bit more googling and I found this post talking about wxPython's Bitmap Button Class and showing some code examples.
I would suggest being very very careful designing your GUI if you're going to use custom images. You need to pay special attention to your spacing and your text sizes or your GUI might come out looking like crap.

Qt and UI Skinning

I wanted to consult with the sages here regarding Qt and skinning, get your opinion and chart a path for my development. My requirements are as follows:
My Qt/C++ application (cross platform with Mac, Windows and Linux versions) needs to have modular skins.
A skin is defined as a set of one or more elements: - Window background texture - Look/feel of UI controls such as edit boxes, drop down, radio buttons, buttons etc. - Look/feel of window "caption", resize grips etc.
Skins will be installed with the application installer, allowing the user to choose which one he/she wants to use. Users should be able to change skins on the fly.
Can I go the QML route? should this be custom and based on simple resources which are built into the application? Any design advice will be appreciated.
Thanks.
If I understood you correctly then stylesheet is the best way forward. You can create stylesheets similar to CSS and then pass them as command line option to your application or load on invocation to style your application at runtime. That way you can create multiple stylesheets each having a different look and feel and allow user to load them at will. Since its CSS it doesn't need any new learning and you can keep all your styling outside your source code.
Here are a list of resources that can get you up and running quickly:
http://blog.qt.io/blog/2007/11/27/theming-qt-for-fun-and-profit/
http://doc.qt.io/qt-5/stylesheet.html
I haven't played with QML yet, but you could also create a custom QStyle implementation that supports your resource format. Note that you'd lose style sheet support if you went this route.
Changing window captions is a little trickier if you want portability.
QML, if I understand correctly, doesn't really skin the widgets, it mainly deals with GUI layout etc etc.
QStyle is used to change the looks. It is a bit low-level though, and requires programming, so if you want to load different user-created skins (from an XML or so) it might be tricky to support extensive skinning. Chaining colors and a few items are easy enough though. (There might be someone else who've done something you could re-use.. not sure.)
For modifying widgets, use QStyle::polish(). You could use that to change the background picture (if it's a top-level window, or of a certain class). There are numerous repaint method to change almost every part of every widget.
Store/load the style using QSettings, by reading and setting the desired Style just after QApplication but before your main window is constructed.

Resources