Customizing QDial

[AndreiDutu]

Does anybody has a simple example about how to customize QDial?
Especially I am trying to change the pointer image.

I saw somewhere a QT example with a dial that looked very cool (soothing like a speed dial) but I can’t find now, so what I am asking can be done.

[andre]

There are some dial like display widgets to be found on "qt-apps":http://qt-apps.org/index.php?xcontentmode=4298 and as part of "Qwt":http://qwt.sourceforge.net/controlscreenshots.html.

[ZapB]

Did you mean the Dial example that ships with Qt? That uses QML and can be found "here":http://doc.qt.nokia.com/latest/declarative-ui-components-dialcontrol.html.

[AndreiDutu]

That one. Thanks. :)

[ZapB]

In which case you have everything you need - apart form suitable graphics assets unless your dial scale happens to be the same as in the example ;-)

It would be nice if there were a custom QDeclarativeItem that could take a range, a radius, and start/end angles and produce a dial gauge image for use in such cases. Would be a nice little project. If only I had some time ;-)

[elfo106]

Hello, Im also trying to change the appearance of the dial...but I would prefer to use c++ instead qml. By the way...I tried to use #include <QtDeclarative> and the Qt creator keep saying that the file or directory is missing.

Is possible to design my own Dial and use it?

[ZapB]

To use QML in your project you need to add:

@QT += declarative@

to your .pro file and re-run qmake.

[elfo106]

[quote author="ZapB" date="1303144239"]To use QML in your project you need to add:

@QT += declarative@

to your .pro file and re-run qmake.[/quote]

Yes, i already did that

[andre]

Did you also put:
@
QT += declarative
@
in your .pro file when you were trying to #include <QtDeclarative>?

Of course it is possible to design your own dial and use that. Subclass QWidget and reimplement paintEvent(). From there, you can do the rendering of your dial to your very own design.

[elfo106]

[quote author="Andre" date="1303144548"]Did you also put:
@
QT += declarative
@
in your .pro file when you were trying to #include <QtDeclarative>?

Of course it is possible to design your own dial and use that. Subclass QWidget and reimplement paintEvent(). From there, you can do the rendering of your dial to your very own design.[/quote]

I think im doing as you say...

I created now a very simple code just to check if QtDeclarative is working:

im my main.cpp I have:
@
#include <QtCore>
#include <QtDeclarative>

int main()
{
return 0;
}
@

and in testQML.pro i have:

@
SOURCES +=
main.cpp
QT += declarative
@

then I did clean all, build all...and I get QtDeclarative: file or directory missing...

"Of course it is possible to design your own dial and use that. Subclass QWidget and reimplement paintEvent(). From there, you can do the rendering of your dial to your very own design"

would you mind to explain me better how that is done? can I design it in photoshop and have a layer for the needle that is the part that I want to rotate?

Thank you

[ZapB]

Did you install Qt with the declarative module built?

Can you post the complete command line that is passed ot the compiler and which fails please? This is so we can see if qmake is correctly generating the Makefiles.

[elfo106]

I installed this: http://qt.nokia.com/downloads/sdk-linux-x11-64bit-cpp

Im running Qt creater under ubuntu 10.04.

"g++ -c -pipe -g -Wall -W -D_REENTRANT -DQT_DECLARATIVE_LIB -DQT_GUI_LIB -DQT_CORE_LIB -DQT_SHARED -I/usr/share/qt4/mkspecs/linux-g++ -I../testarQMLimport -I/usr/include/qt4/QtCore -I/usr/include/qt4/QtGui -I/usr/include/qt4/QtDeclarative -I/usr/include/qt4 -I. -I../testarQMLimport -I. -o main.o ../testarQMLimport/main.cpp" -> I dont write this...Qt creator application does it for me...

and the error: "../testarQMLimport/main.cpp:2:25: error: QtDeclarative: Ficheiro ou directoria inexistente
make: ** [main.o] Erro 1"

translation of the error -> error: QtDeclarative: File or directory does not exist
make:**[main.o] Error 1

[andre]

I would suggest that you download the latest Qt SDK 1.1 RC instead.
[quote author="elfo106" date="1303144965"][quote author="Andre" date="1303144548"]Of course it is possible to design your own dial and use that. Subclass QWidget and reimplement paintEvent(). From there, you can do the rendering of your dial to your very own design[/quote]

would you mind to explain me better how that is done? can I design it in photoshop and have a layer for the needle that is the part that I want to rotate?
[/quote]
Basically, yes. You can draw the background as an image, rotate and translate the painter, and then draw the needle either as another image or manually using QPainter. Note that if you draw that way, it will obviously not adapt to the style and colors of the rest of your system. Still, perhaps it is easier to do this in QML than it is to do it as a regular widget.

[elfo106]

ok, I will download it and give it a try.

In which format should the images be? (png jpeg...) and for what you said I supose that I should have 2 different images, one for background and another for the needle, and not 1 image with 2 layers. Right? if I understood it right, I must be careful positioning the images on the screen...

Thank you

[andre]

I would use png, I think. Qt has good support for it, and it produces not artifacts that can hinder readability of text. I do suggest two separate images for the background and the needle, yes.