QSlider with SVG groove and knob

Gourmet

I need sublclass QSlider but I must draw it not by pixmaps but SVG instead. Thefore customizing by stylesheets looks not apporopriate for me. Anybody who is familiar with this control - how it can be customized with SVG? What should I implement - paintEvent() for entire control with groove and knob? Or may be draw groove and knob from different SVG files separately? Or may be SVG can be used in stylesheets?

Buckwheat

@Gourmet ... Of course you can override the paintEvent and handle the drawing yourself using QSvgRenderer or you can try using the style property:

QSlider::groove {
url(":<where you have your art>/groove.svg");
}
QSlider::handle {
url(":<where you have your art>/handle.svg");
}

Of course, the <where you have your art> is the resource file path.

See: http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qslider for a more detailed explanation.

Gourmet

@Buckwheat In docs there is nothing about use SVG in stylesheet. Will this really work? Ok, I'll try it first.

mrjj

@Gourmet
Hi
it does work with border-image
alt text

Buckwheat

@Gourmet ... Just try. I have never done a slider but I have done others and I have used many kinds of images.

Gourmet

What about QDial? It is "slider" too but I see some say it is not possible just use stylesheet to replace image. But may be it was true for older Qt release. I use 5.6.1.

I just do not wanna waste time and kick the wall by head if something is not possible. If anybody EXACTLY made skinned QDial and QSlider - please show me the idea how implement it. Only show the idea - I will write by myself.

Buckwheat

@Gourmet ... your best bet would be my first suggestion and override the paintEvent and draw your own interface. Trying to use a style sheet takes 5 minutes so it isn't wasting time if you have never tried before. You will know immediately if it does not work. Just make sure your art is in a QRC so you can use the proper notation if you are loading the image.

Gourmet

@Buckwheat for QDial stylesheet image replacement doesn't work. I already implemented it with paintEvent() replacement. And some other features added which are impossible by just stylesheet image replacement. This QDial with SVG in .qrc file works fine for me. Even it is Q_PROPERTY adjustable and shows graphics fine in QtDesigner form. Yes, I impemented it as promoted plugin for Designer. I suppose just copy this code for QSlider and just replace and add all needed parts. Nobody did not answer if stylesheet works fine for QSlider and I do not want waste time for dead-end experiments. This all MUST be clearly described in documentation instead of doing "try-and-fail" attempts.

euchkatzl

/void Slider::paintEvent(QPaintEvent *e)
{
    QSlider::paintEvent(e);
    QPainter painter(this);
    QStyleOptionSlider opt;
    initStyleOption(&opt);
    QRect handle = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderHandle, this);    
    QPainter* p = &painter;    
    QRect groove = style()->subControlRect(QStyle::CC_Slider, &opt, QStyle::SC_SliderGroove, this);
    QRect drawingRect = groove;
    qreal height = 4;
    drawingRect.setHeight(height);

    drawingRect.moveCenter(groove.center());
    QPainterPath path;
    path.addRoundedRect(drawingRect,height / 2.0,height / 2.0);

    if (opt.state & QStyle::State_Enabled) {
        p->fillPath(path,grooveColor);
    }else {
        p->fillPath(path,grooveColorDisabled);
    }
    opt.rect = handle;
    

}

You can then paint your svg in "handle" Rect with http://doc.qt.io/qt-5/qsvgrenderer.html#render-1

Gourmet

In QDial I have calculate rotation angle and rotate QPainter for image by myself. I only wanted know - in QSlider should I calculate position for handle and move it - or I just have to paint on handle and groove?

Buckwheat

@Gourmet ... Wow! Your time must be more valuable than any one elses. I think the 5 minute test would not only be a good learning experience but you would get the answer yourself instead of relying on others for the answer. An answer discovered or earned is one that lasts a lifetime!

Gourmet

@Buckwheat I hate "try-and-fail" learning technique but prefer learn others experience if it is possible. It is much more productive. Only fools first teach themselves on their own mistakes - smart people learn other's mistakes before action.

mrjj

This world was build from people that tried them self, 
                  failed, learned from it 
and did not give up 
           and just tried again.

They were not fools - they were pioneers ...

Gourmet

@mrjj pioneers were those who were not able follow others experience.

Looks like nobody had used SVG on QSlider stylesheets before. Therefore I will reload paintEvent(). And upvote @euchkatzl's post as best help.

mrjj

@Gourmet said in QSlider with SVG groove and knob:

pioneers were those who were not able follow others experience.

So by your logic, all pioneers are fools :)

Gourmet

@mrjj nope, fools were those who were able follow others experience but tried and failed instead

Buckwheat

@Gourmet ... Einstein was a fool... hmmm... Darwin was a fool.... hmmm... Entire NASA space field of the 60s were fools... hmmm... I am glad to be in their company! Fools are those who do not learn and grow. Followers often end up going over cliffs. I refer to them as lemmings.

mrjj

This is getting rather philosophical so im going to close it by saying that on the other hand i fully understand if using svg on some knob is just a fast task
and the time needed to understand the docs that fully describe what Widgets supports what tags is wasted as this knowledge cannot be used for anything further in the project -
then the concept of just using other people's experience seems reasonable.

However, in that spirit, I hope you will post the paintEvent code so others, feeling like you, can
benefit from your working solution and thereby promote your approach as valid. :)

Gourmet

@mrjj the SVG requirement is not just a whim. I need it to inedpendently set size and proportions for slider knob and groove. Result must allow resize them separetely in QtDesigner. This doesn't look too musch simple. And it cannot be defenitely made with just stylesheet - this way doesn't allow scale groove and knob separetely.

mrjj

@Gourmet
Nope, full design time ability will be a lot of work and i dont think you
can avoid a Designer plugin if it should be previewable in Designer.