How to insert a drawing in QWidget in Qt Designer form ?

[giorgik]

I created a dialog in Qt Designer di Qt 6.5 per Windows 10 in which I put a QWidget that will contain a drawing made with QPainter in my application code. What should I write in the paintEvent(QPaintEvent* event) where the drawing is created and that I want to insert in the QWidget of the Qt Designer form ?
To better understand what I'm saying, I attach a screenshot of what I have now: a red led drawn with QPainter in the :aintEvent(QPaintEvent* event) code of my application and a check box inserted by Qt Designer.
Here instead the paintEvent method in which I draw the led:

void Led::paintEvent(QPaintEvent* event)
{
	Q_UNUSED(event);
 
	QPainter p(this);
 
	QRect geo = ui.widgetLed->geometry();
	int width = geo.width();
	int height = geo.height();
 
	int x = 0, y = 0;
	if (alignment_ & Qt::AlignLeft)
		x = 0;
	else if (alignment_ & Qt::AlignRight)
		x = width - diamX_;
	else if (alignment_ & Qt::AlignHCenter)
		x = (width - diamX_) / 2;
	else if (alignment_ & Qt::AlignJustify)
		x = 0;
 
	if (alignment_ & Qt::AlignTop)
		y = 0;
	else if (alignment_ & Qt::AlignBottom)
		y = height - diamY_;
	else if (alignment_ & Qt::AlignVCenter)
		y = (height - diamY_) / 2;
 
	QRadialGradient g(x + diamX_ / 2, y + diamY_ / 2, diamX_ * 0.4,
		diamX_ * 0.4, diamY_ * 0.4);
 
	g.setColorAt(0, Qt::white);
	if (state_)
		g.setColorAt(1, color_);
	else
		g.setColorAt(1, Qt::black);
	QBrush brush(g);
 
	p.setPen(color_);
	p.setRenderHint(QPainter::Antialiasing, true);
	p.setBrush(brush);
	p.drawEllipse(x, y, diamX_ - 1, diamY_ - 1);
 
	if (flashRate_ > 0 && flashing_)
		timer_->start(flashRate_);
	else
		timer_->stop();
}

void Led::paintEvent(QPaintEvent* event)
{
	Q_UNUSED(event);

	QPainter p(this);

	QRect geo = ui.widgetLed->geometry();
	int width = geo.width();
	int height = geo.height();

	int x = 0, y = 0;
	if (alignment_ & Qt::AlignLeft)
		x = 0;
	else if (alignment_ & Qt::AlignRight)
		x = width - diamX_;
	else if (alignment_ & Qt::AlignHCenter)
		x = (width - diamX_) / 2;
	else if (alignment_ & Qt::AlignJustify)
		x = 0;

	if (alignment_ & Qt::AlignTop)
		y = 0;
	else if (alignment_ & Qt::AlignBottom)
		y = height - diamY_;
	else if (alignment_ & Qt::AlignVCenter)
		y = (height - diamY_) / 2;

	QRadialGradient g(x + diamX_ / 2, y + diamY_ / 2, diamX_ * 0.4,
		diamX_ * 0.4, diamY_ * 0.4);

	g.setColorAt(0, Qt::white);
	if (state_)
		g.setColorAt(1, color_);
	else
		g.setColorAt(1, Qt::black);
	QBrush brush(g);

	p.setPen(color_);
	p.setRenderHint(QPainter::Antialiasing, true);
	p.setBrush(brush);
	p.drawEllipse(x, y, diamX_ - 1, diamY_ - 1);

	if (flashRate_ > 0 && flashing_)
		timer_->start(flashRate_);
	else
		timer_->stop();
}

To copy to clipboard, switch view to plain text mode 

All this to be able to see the check box and the led side by side and not as in the figure I have attached.

[d_stranz]

If you want to insert a picture of an LED, then do this:

- In Qt Designer, you insert a QLabel widget where you want to draw the LED. If you want the label to look like an LED in Designer, then you can create a pixmap (see below) and set that as the "pixmap" property for the QLabel. It is just a picture, you can't change any of the "LED" properties unless you use different pixmaps to simulate the appearance.

- In your application, you draw the LED into a QPixmap of the right size, then call QLabel::setPixmap().

- Based on your current code for your LED widget, replace the paintEvent() or add this new method to create the pixmap instead of painting to the screen. (If you keep the paintEvent(), this will allow you to use the widget either as a QWidget or to create a pixmap for a QLabel).

QPixmap Led_0_6_1::createPixmap( const QSize & wxh )
{
	QPixmap pixmap( wxh );
	QPainter painter( &pixmap );
        painter.setRenderHint(QPainter::Antialiasing, true);
 
	QString ledShapeAndColor = shapes[m_shape];
 
	if (m_value)
		ledShapeAndColor.append(colors[m_onColor]);
	else
		ledShapeAndColor.append(colors[m_offColor]);
 
        QSvgRenderer renderer;
	renderer.load(ledShapeAndColor);
	renderer.render(&painter);
 
        return pixmap;
}

QPixmap Led_0_6_1::createPixmap( const QSize & wxh )
{
	QPixmap pixmap( wxh );
	QPainter painter( &pixmap );
        painter.setRenderHint(QPainter::Antialiasing, true);

	QString ledShapeAndColor = shapes[m_shape];
	
	if (m_value)
		ledShapeAndColor.append(colors[m_onColor]);
	else
		ledShapeAndColor.append(colors[m_offColor]);

        QSvgRenderer renderer;
	renderer.load(ledShapeAndColor);
	renderer.render(&painter);

        return pixmap;
}

To copy to clipboard, switch view to plain text mode 

// In your application:
 
QSize size = myLabel->size();
 
using LED = Led_6_0_1;
 
LED led;  // Temporary - this is not a widget to appear on screen.  It is used simply for drawing the pixmap.
 
// Set shape and colors for led
led.setShape( LED::Circle );
led.setOnColor( LED::Red );
led.setOffColor( LED::Grey );
 
// Create the pixmap and install it
QPixmap pixmap = led.createPixmap( size );
myLabel->setPixmap( pixmap );

// In your application:

QSize size = myLabel->size();

using LED = Led_6_0_1;

LED led;  // Temporary - this is not a widget to appear on screen.  It is used simply for drawing the pixmap.

// Set shape and colors for led
led.setShape( LED::Circle );
led.setOnColor( LED::Red );
led.setOffColor( LED::Grey );

// Create the pixmap and install it
QPixmap pixmap = led.createPixmap( size );
myLabel->setPixmap( pixmap );

To copy to clipboard, switch view to plain text mode 

If you want to change LED colors or shape in response to user input, then you need to change the pixmap by running this code again with the new properties and setting the pixmap again.

Another option would be to use Qt Designer to insert a QLabel at any place you want an LED, then using the Designer's "Promote to" feature to change the QLabel to an LED. I do not know if this will let you change properties in Qt Designer, but at least your LED will be accessible in your application as an Led_6_0_1 instance and you can change the properties at run time for your app instead of having to create a new pixmap for every change.

It would really be much easier if you got your plugin to work instead.

[giorgik]

It would really be much easier if you got your plugin to work instead.

And that's exactly what I'm doing and I've asked for help: creating LED plugins. How do I do then, so that the shape property keeps the selection made and see in Qt Designer (application creation phase in MainWindow) change the shape of the Led of the svg image. How should I write the plugin code to get this effect ?

[d_stranz]

How should I write the plugin code to get this effect ?

The plugin code you wrote (and I built on my PC) works just fine in Qt Designer under Qt 5.15.3. In Qt Designer, I can create an LED widget, change the color and shape, and it shows up on the form in Qt Creator. I don't see any reason why the same code, built against Qt 6.x should not also work with the Qt Designer that ships with the Qt 6.x distribution.

There seems to be something broken in your copy of Qt Creator or in the way you are building or installing the plugin. I think that the plugin is unable to load the SVG files in Qt Designer and I think it is using your icon instead of an actual LED instance. There are two ways to test this:

1 - Change the icon and rebuild the plugin. If you see the new icon when you insert the widget in a Qt Designer form, then you know that is what is happening.

2a - Insert a QMessageBox warning in the paintEvent where you try to load the svg file for the color and shape. If the load fails, pop up the warning.

or

2b - Instead of a message box, if the load fails, draw an "X" instead of rendering the svg.

In the case of 1, it is possible that the Qt Creator cannot make the LED widget at all so is substituting the icon. That could be because you have not linked the DLL against the SVG library, so Qt Designer does not load it and cannot instantiate the SVG renderer.

In the case of 2a, it is creating the widget but is unable to load the SVG to perform the rendering. Again, this could be a problem with the QSvg DLL.

[giorgik]

2a - Insert a QMessageBox warning in the paintEvent where you try to load the svg file for the color and shape. If the load fails, pop up the warning.
...
In the case of 2a, it is creating the widget but is unable to load the SVG to perform the rendering. Again, this could be a problem with the QSvg DLL.

I rewrote the code again and post it for you so you can see it too. I put the QMessageBox in QNewLed:aintEvent(..) at what point ?
QNewLed.h:

#pragma once
 
#include <QtWidgets/QWidget>
#include <QtUiPlugin/QDesignerExportWidget>
#include <QtSvg>
#include <QSvgRenderer>
 
class QDESIGNER_WIDGET_EXPORT QNewLed : public QWidget
{
    Q_OBJECT
 
    Q_PROPERTY(ledShape shape READ getShape WRITE setShape)
 
public:
    explicit QNewLed(QWidget *parent = nullptr);
    virtual ~QNewLed();
 
    enum ledShape { Circle, Square, Triangle, Rounded };
    Q_ENUM(ledShape)
 
public slots:
    ledShape getShape() const { return m_shape; }
    void setShape(ledShape);
 
protected:
    void paintEvent(QPaintEvent* event) override;
    ledShape m_shape;
    QStringList m_shapes;
 
private:
    QSvgRenderer* renderer;
};

#pragma once

#include <QtWidgets/QWidget>
#include <QtUiPlugin/QDesignerExportWidget>
#include <QtSvg>
#include <QSvgRenderer>

class QDESIGNER_WIDGET_EXPORT QNewLed : public QWidget
{
    Q_OBJECT

    Q_PROPERTY(ledShape shape READ getShape WRITE setShape)

public:
    explicit QNewLed(QWidget *parent = nullptr);
    virtual ~QNewLed();

    enum ledShape { Circle, Square, Triangle, Rounded };
    Q_ENUM(ledShape)

public slots:
    ledShape getShape() const { return m_shape; }
    void setShape(ledShape);

protected:
    void paintEvent(QPaintEvent* event) override;
    ledShape m_shape;
    QStringList m_shapes;

private:
    QSvgRenderer* renderer;
};

To copy to clipboard, switch view to plain text mode 

QNewLed.cpp:

#include "QNewLed.h"
 
QNewLed::QNewLed(QWidget *parent) : QWidget(parent), m_shape(Rounded)
{
	m_shapes << ":/resources/circle_green.svg" << ":/resources/square_orange.svg" << ":/resources/triang_blue.svg" << ":/resources/round_yellow.svg";
	setMinimumSize(QSize(50, 50));
	renderer = new QSvgRenderer();
}
 
QNewLed::~QNewLed()
{
	delete renderer;
}
 
void QNewLed::setShape(ledShape newShape)
{
	m_shape = newShape;
 
	update();
}
 
void QNewLed::paintEvent(QPaintEvent* event)
{
	Q_UNUSED(event);
 
	QPainter painter(this);
 
	QString ledShapeAndColor;
	ledShapeAndColor = m_shapes[m_shape];
 
	painter.setRenderHint(QPainter::Antialiasing, true);
 
	renderer->load(ledShapeAndColor);
	renderer->render(&painter);
}

#include "QNewLed.h"

QNewLed::QNewLed(QWidget *parent) : QWidget(parent), m_shape(Rounded)
{
	m_shapes << ":/resources/circle_green.svg" << ":/resources/square_orange.svg" << ":/resources/triang_blue.svg" << ":/resources/round_yellow.svg";
	setMinimumSize(QSize(50, 50));
	renderer = new QSvgRenderer();
}

QNewLed::~QNewLed()
{
	delete renderer;
}

void QNewLed::setShape(ledShape newShape)
{
	m_shape = newShape;
	
	update();
}

void QNewLed::paintEvent(QPaintEvent* event)
{
	Q_UNUSED(event);

	QPainter painter(this);

	QString ledShapeAndColor;
	ledShapeAndColor = m_shapes[m_shape];

	painter.setRenderHint(QPainter::Antialiasing, true);

	renderer->load(ledShapeAndColor);
	renderer->render(&painter);
}

To copy to clipboard, switch view to plain text mode 

QNewLedPlugin.h:

#pragma once
 
#include <QtUiPlugin/QDesignerCustomWidgetInterface>
 
class QNewLedPlugin : public QObject, public QDesignerCustomWidgetInterface
{
    Q_OBJECT
    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QDesignerCustomWidgetInterface" FILE "qnewledplugin.json")
    Q_INTERFACES(QDesignerCustomWidgetInterface)
 
public:
    QNewLedPlugin(QObject *parent = nullptr);
 
    bool isContainer() const override;
    bool isInitialized() const override;
    QIcon icon() const override;
    QString domXml() const override;
    QString group() const override;
    QString includeFile() const override;
    QString name() const override;
    QString toolTip() const override;
    QString whatsThis() const override;
    QWidget *createWidget(QWidget *parent);
    void initialize(QDesignerFormEditorInterface *core);
 
private:
    bool initialized;
};

#pragma once

#include <QtUiPlugin/QDesignerCustomWidgetInterface>

class QNewLedPlugin : public QObject, public QDesignerCustomWidgetInterface
{
    Q_OBJECT
    Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QDesignerCustomWidgetInterface" FILE "qnewledplugin.json")
    Q_INTERFACES(QDesignerCustomWidgetInterface)

public:
    QNewLedPlugin(QObject *parent = nullptr);

    bool isContainer() const override;
    bool isInitialized() const override;
    QIcon icon() const override;
    QString domXml() const override;
    QString group() const override;
    QString includeFile() const override;
    QString name() const override;
    QString toolTip() const override;
    QString whatsThis() const override;
    QWidget *createWidget(QWidget *parent);
    void initialize(QDesignerFormEditorInterface *core);

private:
    bool initialized;
};

To copy to clipboard, switch view to plain text mode 

QNewLedPlugin.cpp:

#include "QNewLed.h"
#include "QNewLedPlugin.h"
 
#include <QtCore/QtPlugin>
 
QNewLedPlugin::QNewLedPlugin(QObject *parent) : QObject(parent)
{
    initialized = false;
}
 
void QNewLedPlugin::initialize(QDesignerFormEditorInterface * /*core*/)
{
    if (initialized)
        return;
 
    initialized = true;
}
 
bool QNewLedPlugin::isInitialized() const
{
    return initialized;
}
 
QWidget *QNewLedPlugin::createWidget(QWidget *parent)
{
    return new QNewLed(parent);
}
 
QString QNewLedPlugin::name() const
{
    return "QNewLed";
}
 
QString QNewLedPlugin::group() const
{
    return "I Miei Plugin";
}
 
QIcon QNewLedPlugin::icon() const
{
    return QIcon();
}
 
QString QNewLedPlugin::toolTip() const
{
    return QString();
}
 
QString QNewLedPlugin::whatsThis() const
{
    return QString();
}
 
bool QNewLedPlugin::isContainer() const
{
    return false;
}
 
QString QNewLedPlugin::domXml() const
{
    return "<widget class=\"QNewLed\" name=\"led\">\n"
        " <property name=\"geometry\">\n"
        "  <rect>\n"
        "   <x>0</x>\n"
        "   <y>0</y>\n"
        "   <width>50</width>\n"
        "   <height>50</height>\n"
        "  </rect>\n"
        " </property>\n"
        " <property name=\"toolTip\" >\n"
        "  <string>Binary Led</string>\n"
        " </property>\n"
        " <property name=\"whatsThis\" >\n"
        "  <string>Led widget</string>\n"
        " </property>\n"
        " <property name=\"shape\" >\n"
        "  <enum>QNewLed::Circle</enum>\n"
        " </property>\n"
        "</widget>\n";
}
 
QString QNewLedPlugin::includeFile() const
{
    return "QNewLed.h";
}

#include "QNewLed.h"
#include "QNewLedPlugin.h"

#include <QtCore/QtPlugin>

QNewLedPlugin::QNewLedPlugin(QObject *parent) : QObject(parent)
{
    initialized = false;
}

void QNewLedPlugin::initialize(QDesignerFormEditorInterface * /*core*/)
{
    if (initialized)
        return;

    initialized = true;
}

bool QNewLedPlugin::isInitialized() const
{
    return initialized;
}

QWidget *QNewLedPlugin::createWidget(QWidget *parent)
{
    return new QNewLed(parent);
}

QString QNewLedPlugin::name() const
{
    return "QNewLed";
}

QString QNewLedPlugin::group() const
{
    return "I Miei Plugin";
}

QIcon QNewLedPlugin::icon() const
{
    return QIcon();
}

QString QNewLedPlugin::toolTip() const
{
    return QString();
}

QString QNewLedPlugin::whatsThis() const
{
    return QString();
}

bool QNewLedPlugin::isContainer() const
{
    return false;
}

QString QNewLedPlugin::domXml() const
{
    return "<widget class=\"QNewLed\" name=\"led\">\n"
        " <property name=\"geometry\">\n"
        "  <rect>\n"
        "   <x>0</x>\n"
        "   <y>0</y>\n"
        "   <width>50</width>\n"
        "   <height>50</height>\n"
        "  </rect>\n"
        " </property>\n"
        " <property name=\"toolTip\" >\n"
        "  <string>Binary Led</string>\n"
        " </property>\n"
        " <property name=\"whatsThis\" >\n"
        "  <string>Led widget</string>\n"
        " </property>\n"
        " <property name=\"shape\" >\n"
        "  <enum>QNewLed::Circle</enum>\n"
        " </property>\n"
        "</widget>\n";
}

QString QNewLedPlugin::includeFile() const
{
    return "QNewLed.h";
}

To copy to clipboard, switch view to plain text mode 

This new version is a little more simplified than the previous one, just to understand where I'm wrong.

[d_stranz]

void QNewLed::paintEvent(QPaintEvent* event)
{
	Q_UNUSED(event);
 
	QPainter painter(this);
 
	QString ledShapeAndColor;
	ledShapeAndColor = m_shapes[m_shape];
 
	painter.setRenderHint(QPainter::Antialiasing, true);
 
	if ( renderer->load(ledShapeAndColor) )
        	renderer->render(&painter);
        else
                QMessageBox::warning( this, "Warning", "QSvgRenderer->load() failed" );
}

void QNewLed::paintEvent(QPaintEvent* event)
{
	Q_UNUSED(event);

	QPainter painter(this);

	QString ledShapeAndColor;
	ledShapeAndColor = m_shapes[m_shape];

	painter.setRenderHint(QPainter::Antialiasing, true);

	if ( renderer->load(ledShapeAndColor) )
        	renderer->render(&painter);
        else
                QMessageBox::warning( this, "Warning", "QSvgRenderer->load() failed" );
}

To copy to clipboard, switch view to plain text mode 

But this code is very inefficient. You do not need to load the SVG file every time you paint. You need to load it only when you construct the default LED or when you change the shape or color. So in your QNewLed(), setColor(), and setShape() methods, that's where you should call renderer->load(). In the paintEvent() all you need to do is call renderer->render(). In the constructor for the QNewLed class, you should set the default color and shape and load that SVG file there.

[giorgik]

I made the change I proposed in paintEvent(QPaintEvent* event). No svg image upload error message appeared. However, it is still impossible to get the new selection accepted by the shape property, which always remains in Circle.

[d_stranz]

Sorry, I can't give you any more help on this. Your code works on my PC, so I don't know what is wrong on your end. Your JSON file is empty, but it doesn't seem to matter.

One last thing to try: Instead of rendering an SVG file, just replace the paint event code with some simple QPainter drawing. It doesn't matter what it is as long as something different is drawn for each shape. If you still don't see any changes, then I have no idea what could be wrong.

void QNewLed::paintEvent( QPaintEvent * event )
{
 
	QPainter painter( this );
	painter.setRenderHint( QPainter::Antialiasing, true );
	painter.setPen( Qt::blue );
 
	const QRect & rect = event->rect();
	switch m_shape :
	{
		case Circle:
			painter.drawEllipse( rect );
			break;
 
		case Square:
			painter.drawRect( rect );
			break;
 
		case Triangle:
		{
			QPolygon	triangle = QPolygon() << rect.bottomLeft() << rect.bottomRight() << QPoint( rect.center().x(), rect.topLeft().y() );
			painter.drawConvexPolygon( triangle );
		}
		break;
 
		case Rounded:
		{
			QPoint	c = rect.center();
			QPoint	p1( c.x(), rect.bottomLeft().y() );
			QPoint	p2( rect.bottomLeft().x(), c.y() );
			QPoint	p3( c.x(), rect.topLeft().y() );
			QPoint	p4( rect.bottomRight().x(), c.y());
			QPolygon	diamond = QPolygon() << p1 << p2 << p3 << p4;
			painter.drawConvexPolygon( diamond );
		}
		break;
	}
}

void QNewLed::paintEvent( QPaintEvent * event )
{

	QPainter painter( this );
	painter.setRenderHint( QPainter::Antialiasing, true );
	painter.setPen( Qt::blue );

	const QRect & rect = event->rect();
	switch m_shape :
	{
		case Circle:
			painter.drawEllipse( rect );
			break;

		case Square:
			painter.drawRect( rect );
			break;

		case Triangle:
		{
			QPolygon	triangle = QPolygon() << rect.bottomLeft() << rect.bottomRight() << QPoint( rect.center().x(), rect.topLeft().y() );
			painter.drawConvexPolygon( triangle );
		}
		break;

		case Rounded:
		{
			QPoint	c = rect.center();
			QPoint	p1( c.x(), rect.bottomLeft().y() );
			QPoint	p2( rect.bottomLeft().x(), c.y() );
			QPoint	p3( c.x(), rect.topLeft().y() );
			QPoint	p4( rect.bottomRight().x(), c.y());
			QPolygon	diamond = QPolygon() << p1 << p2 << p3 << p4;
			painter.drawConvexPolygon( diamond );
		}
		break;
	}
}

To copy to clipboard, switch view to plain text mode