How to make a SVG at tab Widget ?

[Pradeep P N]

Hi @RiceBall
Sorry was bit busy, Yes follow below instructions.

• Create a Class inheriting from QWidget (Example as above code class CustomWidget : public QWidget)
• Use the QLayout Class options available (Use whichever suitable to your UI Arrangement)
• Once you have the CustomeWidget ready you can use this Class as the widget for Graphics Scene

QGraphicsScene *scene = new QGraphicsScene
CustomWidget *csw = new CustomWidget;
scene->addWidget(csw);

• Optimize your code and you can achieve the result you are looking for.

All the best.

[RiceBall]

@mrjj
@Pradeep-P-N said in How to make a SVG at tab Widget ?:

QGraphicsScene *scene = new QGraphicsScene

I try to fix code and test it.
But I can see it loading something but is white.

    ui->setupUi(this);
    CustomWidget *csw = new CustomWidget;
    QGraphicsScene *scene = new QGraphicsScene;
    scene->addWidget(csw);
    ui->graphicsView->setScene(scene);

[jsulm]

@RiceBall said in How to make a SVG at tab Widget ?:

QSvgWidget *svgWid1 = new QSvgWidget("../iHMI_2/splash1.svg");
QSvgWidget *svgWid2 = new QSvgWidget("../iHMI_2/splash2.svg");
QSvgWidget *svgWid3 = new QSvgWidget("../iHMI_2/splash3.svg");
QSvgWidget *svgWid4 = new QSvgWidget("../iHMI_2/splash4.svg");

You're using relative paths: did you make sure the files are actually found at runtime?

[RiceBall]

@jsulm said in How to make a SVG at tab Widget ?:

@RiceBall said in How to make a SVG at tab Widget ?:

QSvgWidget *svgWid1 = new QSvgWidget("../iHMI_2/splash1.svg");
QSvgWidget *svgWid2 = new QSvgWidget("../iHMI_2/splash2.svg");
QSvgWidget *svgWid3 = new QSvgWidget("../iHMI_2/splash3.svg");
QSvgWidget *svgWid4 = new QSvgWidget("../iHMI_2/splash4.svg");

You're using relative paths: did you make sure the files are actually found at runtime?

I changed to the absolute path.
The problem is the same.
Does it have any possible I coding wrong ??

[jsulm]

@RiceBall You can also check this:

• Get the renderer from the SVG widget using https://doc.qt.io/qt-5/qsvgwidget.html#renderer
• Check what https://doc.qt.io/qt-5/qsvgrenderer.html#isValid returns

And also call show() on each SVG widget you're creating.

[RiceBall]

@jsulm said in How to make a SVG at tab Widget ?:

@RiceBall You can also check this:

• Get the renderer from the SVG widget using https://doc.qt.io/qt-5/qsvgwidget.html#renderer
• Check what https://doc.qt.io/qt-5/qsvgrenderer.html#isValid returns

And also call show() on each SVG widget you're creating.

How could I use it ??
Can you make a sample for me ??
Thank you.

[jsulm]

@RiceBall said in How to make a SVG at tab Widget ?:

How could I use it ??

Come on, what's difficult about it?!

svgWid1->show();
...
qDebug() << svgWid1->renderer()->isValid();

[RiceBall]

@jsulm said in How to make a SVG at tab Widget ?:

@RiceBall said in How to make a SVG at tab Widget ?:

How could I use it ??

Come on, what's difficult about it?!

svgWid1->show();
...
qDebug() << svgWid1->renderer()->isValid();

Sorry to ask too much easily question.
Because I just started learning QT and C++.
So some documents are difficult for me.

I try to add code like you writing at customwidget.cpp
But I can't see any different.

[jsulm]

@RiceBall OK, no problem.
The second line should print something to the console - what do you see there ("Application Output" tab in QtCreator)?

[RiceBall]

@jsulm said in How to make a SVG at tab Widget ?:

@RiceBall OK, no problem.
The second line should print something to the console - what do you see there ("Application Output" tab in QtCreator)?

Do I add code at customwidget.cpp is right ??
I can't see any QDebug message.

[jsulm]

@RiceBall Are you sure you create an instance of customwidget? Because I don't see the output of qDebug().

[RiceBall]

@jsulm said in How to make a SVG at tab Widget ?:

@RiceBall Are you sure you create an instance of customwidget? Because I don't see the output of qDebug().

I have made it as you see picture.
But I think it maybe somewhere is mistake.
below is my file.
If you have time,could you help me to check it ??
link text

[mrjj]

Hi
I had a quick look.
several things:
1:

you have another CustomWidget that you use. its not the one with the svg files. its pretty empty.
delete it.

2:
Use your actual widget. Notice the class name is with all small letters and you used one with mixed. the empty class.

This has to be

customwidget *csw = new customwidget; <<<<< notice small letters.

3:
Your paths are wrong, or you are not using the resources.

Right click the files in the left side project view and use the get path function there. then its always correct.
4:
Then it will show. (profit)

https://www.dropbox.com/s/nq3o3nd0qha79h2/iHMI_2B.zip?dl=0

[RiceBall]

@mrjj said in How to make a SVG at tab Widget ?:

Hi
I had a quick look.
several things:
1:

you have another CustomWidget that you use. its not the one with the svg files. its pretty empty.
delete it.

2:
Use your actual widget. Notice the class name is with all small letters and you used one with mixed. the empty class.

This has to be

customwidget *csw = new customwidget; <<<<< notice small letters.

3:
Your paths are wrong, or you are not using the resources.

Right click the files in the left side project view and use the get path function there. then its always correct.
4:
Then it will show. (profit)

https://www.dropbox.com/s/nq3o3nd0qha79h2/iHMI_2B.zip?dl=0

Thank you for @jsulm help.
It looks like not very easy for me to debug it.
I need to learning more and more.

final problem.
My loading picture want to overlap together.(Now is not)
How to coding it ??

[mrjj]

Hi
well learning to use the debugger is a must do as that find such error.
I saw the empty class by stepping into the code with f10.
So with debugger, it was not hard to find.

Anyway,
They are not on top of each other
as you put them in layout.

So you can drop the layout

customwidget::customwidget(QWidget *parent) : QWidget(parent)
{
    //QGridLayout *glyt = new QGridLayout;

    QSvgWidget *svgWid1 = new QSvgWidget(":/resource/splash1.svg", this);
    QSvgWidget *svgWid2 = new QSvgWidget(":/resource/splash2.svg", this);
    //       QSvgWidget *svgWid3 = new QSvgWidget("../iHMI_2/splash3.svg");
    //       QSvgWidget *svgWid4 = new QSvgWidget("../iHMI_2/splash4.svg");

    //glyt->addWidget(svgWid1);
    //glyt->addWidget(svgWid2);
    //glyt->addWidget(svgWid2);
    //glyt->addWidget(svgWid3);
    //glyt->addWidget(svgWid4);

    svgWid1->show();

    qDebug() << svgWid1->renderer()->isValid();

    //this->setLayout(glyt);

}

However, im not 100% sure on what the goal is with the 3 SVG and the "Loading" one so
it might not be what you really want.

[RiceBall]

@mrjj
Finally, I did it.
Thank you for your patient answer.

The last question , my background is set to black color.
And My SVG file is transparent.
How could I set scene background to black ?
I have set "scene->setBackgroundBrush(Qt::black);"

[mrjj]

Hi
\0/
You can ask widget to be transparent. You are seeing the customwidget.
( in mainwin)
customwidget *csw = new customwidget;
csw->setAttribute(Qt::WA_NoSystemBackground, true); // add this

[RiceBall]

@mrjj
Thank you very much.
I did it.
I will learn hardly.