How to add a resource image on QDial?

Question

How to add a resource image on QDial?

I have already done a custom class for QDial but how can I include a stylesheet there, in order to add a resource image like I do for buttons? For example:

button1->setStyleSheet("border-image:url(:/resources/img/knob.png)");

Answer 1

QDial does not support stylesheets, except the background color. However, here is how I am doing it.

A warning, though: this is not complete at all, it just gives you an idea of how to do it.

In your header, set a property for a QPixmap which will be your background image:

class QCustomDial : public QDial
{
    Q_OBJECT

    Q_PROPERTY(QPixmap backgroundImage READ backgroundImage WRITE setBackgroundImage DESIGNABLE true)

    QPixmap* m_background;

 public:
    QPixmap backgroundImage()    { return *m_background; }

    void setBackgroundImage(QPixmap pixmap) 
    { 
        *m_background = pixmap;
        update(); 
    }

 private:
    QPixmap* m_background;
};

Then, in your paintEvent, you'll have to draw the pixmap:

void QCustomDial::paintEvent(QPaintEvent*)
{
    QPainter painter(this);
    ...
    QPoint start(0, 0); //whatever you want 
    painter.drawPixmap(start, *m_background);
    ...
}

Finally, the part you wanted in your question: the stylesheet. Now that you have defined a Q_PROPERTY, you can get it from the stylesheet:

QCustomDial {
    qproperty-backgroundImage: url(:/resources/img/knob.png);
}

I hope that it will help you. I also suggest you to read this blog about a custom QDial (part1 and part2).