Important: Please read the Qt Code of Conduct -

Design a custom dial

  • Hi,
    I want to customize a dial in qt and i need a reference example. I need to customize its shape like that:

  • Lifetime Qt Champion

    What is wrong with the sample you found?
    Its seems to be complete custom widget.

  • i just need to change the image of dial. I think this widget has lots of properties that i dont need.

  • Lifetime Qt Champion

    I dont think that the QDial uses style sheet so you cant change the
    image without sub classing it and creating your own paint.
    (as sample does)

  • @mrjj

    I have imported the "skinneddial.h" and "skinneddial.cpp" to my project but i am having trouble with how to use them to create a custom dial.

  • Lifetime Qt Champion

    you must new a version and place it on the main window.

    #include "skinneddial.h"
    SkinnedDial* myDial = new SkinnedDial();

    you will also need to provide 2 images
    via a stylesheet.
    SkinnedDial {
    qproperty-backgroundImage: url(:dial-back.png);
    qproperty-needleImage: url(:dial-needle.png);
    qproperty-maxAngle: 140;
    Note these images must be placed in a resource file
    ( too see how to add one)

  • @mrjj
    I have 2 questions about it:

    • how can we set the maximum value to 100 ( now it can be set up to 99)

    • if the needle released on outside area of the dial ( somewhere outside needle), the value pointer goes to min level but it does not send any value.

  • Lifetime Qt Champion

    Hi it seems not to cap at 100? so not not sure why you cannot set it
    " The SkinnedDial class makes an assumption that the center of the dial is at the value of 0, and
    that negative values are on the left side of the dial, and the positive values are on the right
    side. SkinnedDial requires that the minimum be < 0 and the maximum be > 0 and that there be
    an equivalent distance on both side of the dial. "

  • @mrjj

    i have tried his edited function -> "void SkinnedDial::paintEvent(QPaintEvent *pe)" but it has errors. his original .h and .cpp files can not be downloaded. Maybe i will need another source file for custumizing dial.

  • Lifetime Qt Champion

    well if errors are not fixable then maybe you need other.
    The basic idea is the same, creating a new paint function.

  • @mrjj

    Someone mentioned about commenting the line

    if( curVal != m_cacheVal || cacheHit == false )

    But the author said that "it will re-render that image and re-size it 30 times per second, which may consume more CPU than you’d like ". He then did qdebug and said that it works only once. I did qdebug too and it really works only once . Is this right measurement?

  • Lifetime Qt Champion

    Yes. it sounds fine. If you checked yourself with qDebug and it seems ok , then just try use it.
    Also, you should pretty fast notice if it burns cpu :)

  • @mrjj

    I didn't noticed any diffrence with qDebug and i have measured cpu temperature with a thermocouple, it is temperature is always same ( about 40 centigrade). So i will use it .

    The maximum value can be set with stylesheet like this:


    By the way i have save and read its value to a file. While writing it store its maximum value "100"( i have checked from txt file) but while reading it read it as "99" ?? . writing and reading functions are below:

    writing function:

        QString filename = "data.txt";
        QFile file(filename);|QIODevice::Text);
        QTextStream out(&file);   
        QString s = QString::number(ui->widget->value());

    reading function:

        QString filename1 = "data.txt";
        QFile file1(filename1);|QIODevice::Text);
        QTextStream in(&file1);
        QString str1 = in.readLine();        

  • Lifetime Qt Champion

    @rapid84 You should not measure CPU temperature you should measure CPU load. For example using the "top" command on Linux or "Task Manager" on Windows.

  • @jsulm

    I have used top cmd and cpu loads shows always the same value in each case. so there is no difference.

Log in to reply