PDA

View Full Version : Custom made widget - advanced button



KjellKod
10th November 2010, 12:59
Hi,

I'm trying to get my head around how to implement a button-similar widget. In essence I'm trying to understand how to display text and images on top of another image (background image) that can be updated when the "button" is pressed.

I'm not a complete newbie :) to Qt but the latest version I used was 4 years ago and I feel rusty :o so at the momenet I'm reading up on a lot of Qt documentation and looking into tutorials and examples as well, but a heads up and pointer in the right direction would be most welcome.


In case you wondering what I'm trying to achieve...

Let me give you the idea without implementation focus first:
The idea is that i need several text fields that are updated frequently (100Hz or so), each text field with possible different font/size/color. Possibly even with a (flashing?) symbol (Small image) on the widget if the values in the text fields are above/below certain limits.

"advanced-button ascii-art"
__________________
| Xz_________123/XP
|___X98p
|
| _________________________ = x-tra image sometimes shown
__________________

(info: The " " is warning icon that is sometimes shown (possibly flashing)(logic wise trigged in code when a given numerical value has exceeded a threshold but that's probably irrelevant for my question)


The background of the button could possibly be an image (normal-look) so that when pressing the button, it could be replaced by another image (pressed-down look).


Implementation thoughts:

One way of doing it is with Qml of course. I'm doing some testing on that. However some initial tests on my embedded device showed that a simple C++/Qml GUI (the Qt minehunt example) had way to much CPU consumption. Just the "flips" of a button took some 15-20% CPU on my device.


Another way of doing is to carve out my own derived widget from a QWidget (http://www.qtforum.org/article/23474/background-image-for-qwidget.html), possibly a customized QFrame (http://doc.trolltech.com/4.7/stylesheet-examples.html#customizing-qframe) . Enable mousetracking and re-implementing the mouse/touch-screen/click/press events to catch the actions and changing the background picture.

Hopefully someone can give me pointers :) am I in the right direction here? How would you go about this?

My best regards
Kjell

tbscope
10th November 2010, 13:20
You're going in the rigth direction.
I personally wouldn't go for QML. I would create a custom widget.

You need to implement the paint event to do some custom drawing.
You can call the style to draw the standard parts, like bordes.

As for updating at 100Hz: does this mean updating the text on the widget 100 times per second?
If so, think about what you're doing. The visual processor in my head can't deal with that amount of updates per second. Neither can any other normal person.
So it would be a big waste of processing power if you update a widget 100 times per second. I don't say anything about data collection though.

KjellKod
10th November 2010, 13:44
Thanks tbscope. Of course it's the data collection that is updated with 100Hz. The visual update of the text, data values on the button will be much less frequent. I guess I penned down the question a little too fast ;-)