Results 1 to 20 of 28

Thread: How to change widget shape in QtDesigner ?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. 28th April 2023, 19:39 #1
    giorgik
    giorgik is offline Intermediate user
    Join Date
    Apr 2010
    Location
    Italia
    Posts
    149
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default How to change widget shape in QtDesigner ?

    I created a new plugin in Qt 6.5 using Visual Studio C++ 2022 Community programming environment for Windows 10. This plugin creates the new widget QLed by P. Sereno. In this plugin you can change the shape and color of the led directly in Qt Designer (created for Visual Studio C++). The plugin would work, more precisely in changing the color, but it doesn't work in changing the shape, i.e. the shape chosen in Qt Designer is not maintained when I use this plugin in Qt Creator.
    I can see this right away when in Qt Designer I create the form for the test application, where I choose a widget shape (which I see listed in the plugin panel) but that doesn't change the plugin shape on the form I'm building (see attached figure).
    Below I put the qled.h file of the widget:
    Qt Code: 
    1. #pragma once
    2.  
    3. #include <Qt>
    4. #include <QtWidgets/QWidget>
    5. #include <QtUiPlugin/QDesignerExportWidget>
    6.  
    7.  
    8. // My Qt designer widget plugin class
    9.  
    10. class QColor;
    11.  
    12. class QDESIGNER_WIDGET_EXPORT QLed : public QWidget
    13. {
    14.     Q_OBJECT
    15.     Q_ENUMS (ledColor)
    16.     Q_ENUMS (ledShape)
    17. 	Q_PROPERTY(bool value READ value WRITE setValue)
    18.     Q_PROPERTY(ledColor onColor READ onColor WRITE setOnColor)
    19.     Q_PROPERTY(ledColor offColor READ offColor WRITE setOffColor)
    20.     //Q_PROPERTY(ledShape shape READ shape WRITE setShape NOTIFY shapeChanged)
    21.     Q_PROPERTY(ledShape shape READ shape WRITE setShape)
    22.  
    23. public: 
    24.     explicit QLed(QWidget *parent = 0);
    25.  
    26.     bool value() const { return m_value; }
    27.  
    28.     enum ledColor { Red = 0, Green, Yellow, Grey, Orange, Purple, Blue };
    29.     enum ledShape { Circle = 0, Square, Triangle, Rounded };
    30.  
    31.     ledColor onColor() const { return m_onColor; }
    32.     ledColor offColor() const { return m_offColor; }
    33.     ledShape shape() const { return m_shape; }
    34.  
    35. public slots:
    36. 	void setValue(bool);
    37.     void setOnColor(ledColor);
    38.     void setOffColor(ledColor);   
    39.     void setShape(ledShape);
    40. 	void toggleValue();
    41.  
    42. signals:
    43.     void shapeChanged(ledShape);
    44.  
    45. protected:
    46.     bool m_value;
    47.  
    48.     ledColor m_onColor, m_offColor;
    49.  
    50.     int id_Timer;
    51.  
    52.     ledShape m_shape;
    53.  
    54.     QStringList shapes;
    55.     QStringList colors;
    56.  
    57.     void paintEvent(QPaintEvent *event) override;
    58. };
    To copy to clipboard, switch view to plain text mode 

    Below I put the qled.cpp file of the widget:
    Qt Code: 
    1. #include <QColor>
    2. #include <QtGlobal>
    3. #include <QtGui>
    4. #include <QPolygon>
    5. #include <QtSvg>
    6. #include <QSvgRenderer>
    7. #include "qled.h"
    8.  
    9. /*!
    10.   \brief QLed: this is the QLed constructor.
    11.   \param parent: The Parent Widget
    12. */
    13. QLed::QLed(QWidget *parent) : QWidget(parent)
    14. {
    15.    m_value = false;
    16.    m_onColor = Red;
    17.    m_offColor = Grey;
    18.    m_shape = Circle;
    19.  
    20.    setMinimumSize(QSize(50,50));
    21.  
    22.    shapes << ":/resources/circle_" << ":/resources/square_" << ":/resources/triang_" << ":/resources/round_";
    23.    colors << "red.svg" << "green.svg" << "yellow.svg" << "grey.svg" << "orange.svg" << "purple.svg" << "blue.svg";
    24. }
    25.  
    26.  
    27. /*!
    28.   \brief paintEvent: painting method
    29.   \param QPaintEvent *
    30.   \return void
    31. */
    32. void QLed::paintEvent(QPaintEvent *)
    33. {
    34.     QSvgRenderer *renderer = new QSvgRenderer();
    35.     QString ledShapeAndColor;
    36.     QPainter painter(this);
    37.     painter.setRenderHint(QPainter::Antialiasing, true);
    38.  
    39.     ledShapeAndColor = shapes[m_shape];
    40.  
    41.     if(m_value)
    42.         ledShapeAndColor.append(colors[m_onColor]);
    43.     else
    44.         ledShapeAndColor.append(colors[m_offColor]);
    45.  
    46.     renderer->load(ledShapeAndColor);
    47.     renderer->render(&painter);
    48.     renderer = nullptr;
    49.     delete renderer;
    50. }
    51.  
    52. /*!
    53.   \brief setOnColor: this method allows to change the On color {Red,Green,Yellow,Grey,Orange,Purple,blue}
    54.   \param ledColor newColor
    55.   \return void
    56. */
    57. void QLed::setOnColor(ledColor newColor)
    58. {
    59.    m_onColor = newColor;
    60.    update();
    61. }
    62.  
    63.  
    64. /*!
    65.   \brief setOffColor: this method allows to change the Off color {Red,Green,Yellow,Grey,Orange,Purple,blue}
    66.   \param ledColor newColor
    67.   \return void
    68. */
    69. void QLed::setOffColor(ledColor newColor)
    70. {
    71.    m_offColor = newColor;
    72.    update();
    73. }
    74.  
    75.  
    76. /*!
    77.   \brief setShape: this method allows to change the led shape {Circle,Square,Triangle,Rounded rectangle}
    78.   \param ledColor newColor
    79.   \return void
    80. */
    81. void QLed::setShape(ledShape newShape)
    82. {
    83.    m_shape = newShape;
    84.    update();
    85. }
    86.  
    87. /*!
    88.   \brief setValue: this method allows to set the led value {true,false}
    89.   \param ledColor newColor
    90.   \return void
    91. */
    92. void QLed::setValue(bool value)
    93. {
    94.    m_value = value;
    95.    update();
    96. }
    97.  
    98.  
    99. /*!
    100.   \brief toggleValue: this method toggles the led value
    101.   \param ledColor newColor
    102.   \return void
    103. */
    104. void QLed::toggleValue()
    105. { 
    106. 	m_value =! m_value;
    107. 	update(); 
    108. }
    To copy to clipboard, switch view to plain text mode 

    Below I put the qledplugin.h file of the widget:
    Qt Code: 
    1. #pragma once
    2.  
    3. #include <QDesignerCustomWidgetInterface>
    4.  
    5. // See Cusotm Widget Plugin Example in Qt online documentation to understand the meaning of this file
    6.  
    7.  
    8. class QLedPlugin : public QObject, public QDesignerCustomWidgetInterface
    9. {
    10.     Q_OBJECT
    11.     Q_PLUGIN_METADATA(IID "org.qt-project.Qt.QDesignerCustomWidgetInterface")
    13.  
    14. public:
    15.     QLedPlugin(QObject *parent = 0);
    16.  
    17.     bool isContainer() const override;
    18.     bool isInitialized() const override;
    19.  
    20.     QIcon icon() const override;
    21.  
    22.     QString domXml() const override;
    23.     QString group() const override;
    24.     QString includeFile() const override;
    25.     QString name() const override;
    26.     QString toolTip() const override;
    27.     QString whatsThis() const override;
    28.  
    29.     QWidget *createWidget(QWidget *parent) override;
    30.  
    31.     void initialize(QDesignerFormEditorInterface *core) override;
    32.  
    33. private:
    34.     bool initialized = false;
    35. };
    To copy to clipboard, switch view to plain text mode 

    Below I put the qledplugin.cpp file of the widget:
    Qt Code: 
    1. #include "qled.h"
    2. #include "qledplugin.h"
    3.  
    4. #include <QtPlugin>
    5.  
    6. using namespace Qt::StringLiterals;
    7.  
    8. // See Cusotm Widget Plugin Example in Qt online documentation to understand the meaning of this file
    9.  
    10. QLedPlugin::QLedPlugin(QObject *parent)
    11.     : QObject(parent)
    12. {
    13.     initialized = false;
    14. }
    15.  
    16. void QLedPlugin::initialize(QDesignerFormEditorInterface * /* core */)
    17. {
    18.     if (initialized)
    19.         return;
    20.  
    21.     initialized = true;
    22. }
    23.  
    24. bool QLedPlugin::isInitialized() const
    25. {
    26.     return initialized;
    27. }
    28.  
    29. QWidget *QLedPlugin::createWidget(QWidget *parent)
    30. {
    31.     return new QLed(parent);
    32. }
    33.  
    34. QString QLedPlugin::name() const
    35. {
    36.     return u"QLed"_s;
    37. }
    38.  
    39. QString QLedPlugin::group() const
    40. {
    41.     return u"Lab Widgets"_s;  //change this if you want to put the custom widget plugin in another group
    42. }
    43.  
    44. QIcon QLedPlugin::icon() const
    45. {
    46.     return QIcon(":resources/qled.png");
    47. }
    48.  
    49. QString QLedPlugin::toolTip() const
    50. {
    51.     return u"Led Custom widget Plugin fot Qt Designer"_s;
    52. }
    53.  
    54. QString QLedPlugin::whatsThis() const
    55. {
    56.     return u"Led Custom widget Plugin fot Qt Designer"_s;
    57. }
    58.  
    59. bool QLedPlugin::isContainer() const
    60. {
    61.     return false;
    62. }
    63.  
    64. QString QLedPlugin::domXml() const
    65. {
    66.     return uR"(
    67. <ui language="c++">
    68.   <widget class="QLed" name="qLed">
    69. )"
    70.  
    71. R"(
    72.     <property name="geometry">
    73.       <rect>
    74.         <x>0</x>
    75.         <y>0</y>
    76.         <width>50</width>
    77.         <height>50</height>
    78.       </rect>
    79.     </property>
    80. ")
    81.  
    82. R"(
    83.     <property name="toolTip">
    84.       <string>Binary Led</string>
    85.     </property>
    86.     <property name="value">
    87.       <bool>false</bool>
    88.     </property>
    89.     <property name="whatsThis">
    90.       <string>Led widget</string>
    91.     </property>
    92.     <property name="onColor">
    93.       <enum>QLed::Red</enum>
    94.       <enum>QLed::Green</enum>
    95.       <enum>QLed::Yellow</enum>
    96.       <enum>QLed::Grey</enum>
    97.       <enum>QLed::Orange</enum>
    98.       <enum>QLed::Purple</enum>
    99.       <enum>QLed::Blue</enum>
    100.     </property>
    101.     <property name="offColor">
    102.       <enum>QLed::Grey</enum>
    103.     </property>
    104.     <property name="shape">
    105.       <enum>QLed::Circle</enum>
    106.       <enum>QLed::Square</enum>
    107.       <enum>QLed::Triangle</enum>
    108.       <enum>QLed::Rounded</enum>
    109.     </property>
    110.   </widget>
    111. </ui>
    112. )"_s;
    113. }
    114.  
    115. QString QLedPlugin::includeFile() const
    116. {
    117.     return u"qled.h"_s;
    118. }
    To copy to clipboard, switch view to plain text mode 

    Where am I doing wrong ?
    Attached Images Attached Images
    Reply With Quote Reply With Quote
  2. 29th April 2023, 16:18 #2
    d_stranz's Avatar
    d_stranz
    d_stranz is offline Guru
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to change widget shape in QtDesigner ?

    QSvgRenderer::load() returns a bool. In your paint event, you do not check this value. It is possible that the resource is not loading.

    How have you packaged your QLed widget for use in the application? As a DLL or a static library (LIB)? If it is a static library, you may need to insert a call to initialize the resources in main(): Q_INIT_RESOURCE.

    In paintEvent() this doesn't make any sense:
    Qt Code: 
    1. renderer = nullptr;
    2. delete renderer;
    To copy to clipboard, switch view to plain text mode 

    If you set the pointer to null before you delete the instance, then delete does nothing and you have a memory leak. And since the renderer instance is local to the paint method, there is no need to set it to null at all. It gets re-recreated and re-initialized with every paintEvent() call. So just get rid of the "renderer = null" line completely.

    I think you can simply create the QSvgRenderer instance on the stack instead of using new() to create a pointer:

    Qt Code: 
    1. void QLed::paintEvent(QPaintEvent *)
    2. {
    3.     QSvgRenderer renderer;
    4.     QString ledShapeAndColor;
    5.     QPainter painter(this);
    6.     painter.setRenderHint(QPainter::Antialiasing, true);
    7.  
    8.     ledShapeAndColor = shapes[m_shape];
    9.  
    10.     if(m_value)
    11.         ledShapeAndColor.append(colors[m_onColor]);
    12.     else
    13.         ledShapeAndColor.append(colors[m_offColor]);
    14.  
    15.     bool bLoaded = renderer.load(ledShapeAndColor);
    16.     assert( bLoaded );
    17.  
    18.     renderer.render(&painter);
    19. }
    To copy to clipboard, switch view to plain text mode 

    One other suggestion to improve efficiency: Your two QStringList member variables should be made static const, and probably just moved to the top of the qled.cpp file. Initialize them using list initialization during compilation. In your current code, you create and initialize the lists every time a QLed is created. If your UI has a lot of LEDs, this could slow down your program's startup.

    Qt Code: 
    1. static const QStringList sShapes { "shape1", "shape2", "shape3" };  // Don't remember what your shapes and colors are :-)
    2. static const QStringList sColors { "color1", "color2", "color3" };
    3.  
    4. QLed::QLed( QWidget * parent )
    5. : QWidget( parent )
    6. {
    7. // ...
    8. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by d_stranz; 29th April 2023 at 17:11.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.
    Reply With Quote Reply With Quote
  3. 29th April 2023, 18:48 #3
    giorgik
    giorgik is offline Intermediate user
    Join Date
    Apr 2010
    Location
    Italia
    Posts
    149
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: How to change widget shape in QtDesigner ?

    Quote Originally Posted by d_stranz View Post
    QSvgRenderer::load() returns a bool. In your paint event, you do not check this value. It is possible that the resource is not loading.

    How have you packaged your QLed widget for use in the application? As a DLL or a static library (LIB)? If it is a static library, you may need to insert a call to initialize the resources in main(): Q_INIT_RESOURCE.

    In paintEvent() this doesn't make any sense:
    Qt Code: 
    1. renderer = nullptr;
    2. delete renderer;
    To copy to clipboard, switch view to plain text mode 

    If you set the pointer to null before you delete the instance, then delete does nothing and you have a memory leak. And since the renderer instance is local to the paint method, there is no need to set it to null at all. It gets re-recreated and re-initialized with every paintEvent() call. So just get rid of the "renderer = null" line completely.

    I think you can simply create the QSvgRenderer instance on the stack instead of using new() to create a pointer:

    Qt Code: 
    1. void QLed::paintEvent(QPaintEvent *)
    2. {
    3.     QSvgRenderer renderer;
    4.     QString ledShapeAndColor;
    5.     QPainter painter(this);
    6.     painter.setRenderHint(QPainter::Antialiasing, true);
    7.  
    8.     ledShapeAndColor = shapes[m_shape];
    9.  
    10.     if(m_value)
    11.         ledShapeAndColor.append(colors[m_onColor]);
    12.     else
    13.         ledShapeAndColor.append(colors[m_offColor]);
    14.  
    15.     bool bLoaded = renderer.load(ledShapeAndColor);
    16.     assert( bLoaded );
    17.  
    18.     renderer.render(&painter);
    19. }
    To copy to clipboard, switch view to plain text mode 

    One other suggestion to improve efficiency: Your two QStringList member variables should be made static const, and probably just moved to the top of the qled.cpp file. Initialize them using list initialization during compilation. In your current code, you create and initialize the lists every time a QLed is created. If your UI has a lot of LEDs, this could slow down your program's startup.

    Qt Code: 
    1. static const QStringList sShapes { "shape1", "shape2", "shape3" };  // Don't remember what your shapes and colors are :-)
    2. static const QStringList sColors { "color1", "color2", "color3" };
    3.  
    4. QLed::QLed( QWidget * parent )
    5. : QWidget( parent )
    6. {
    7. // ...
    8. }
    To copy to clipboard, switch view to plain text mode 
    First of all thanks for your advice. I create the plugin as a dynamic library (.dll). I would like to point out that I built the project within the Visual Studio C++ 2022 Community, with VS Tools for Qt. However, the problem I described has not been resolved.
    Last edited by giorgik; 29th April 2023 at 19:45.
    Reply With Quote Reply With Quote
  4. 29th April 2023, 21:28 #4
    d_stranz's Avatar
    d_stranz
    d_stranz is offline Guru
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to change widget shape in QtDesigner ?

    However, the problem I described has not been resolved.
    Can you post the SVG files?

    What happens when you actually use this QLed widget in an application (not in Qt Designer, but in an actual app)? Does the shape change?

    What happens in Qt Designer when you ask it to Preview the form?
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.
    Reply With Quote Reply With Quote
  5. 29th April 2023, 22:12 #5
    giorgik
    giorgik is offline Intermediate user
    Join Date
    Apr 2010
    Location
    Italia
    Posts
    149
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: How to change widget shape in QtDesigner ?

    Quote Originally Posted by d_stranz View Post
    Can you post the SVG files?

    What happens when you actually use this QLed widget in an application (not in Qt Designer, but in an actual app)? Does the shape change?

    What happens in Qt Designer when you ask it to Preview the form?
    An svg file is what I attach. When I start the application that makes use of the widget, it appears as it appears on the Designer, i.e. that of the first element of the Enum and not the one I select from the Designer (again as soon as I do enter after choosing the name, for example Triangle, it returns to Circle ).
    screenshot.png
    Reply With Quote Reply With Quote
  6. 30th April 2023, 15:19 #6
    giorgik
    giorgik is offline Intermediate user
    Join Date
    Apr 2010
    Location
    Italia
    Posts
    149
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: How to change widget shape in QtDesigner ?

    To better understand my problem, I attach some pictures of my widget in QtDesigner of Qt 6.5.
    In attachment 28_campo_shape_widget_QtDesigner I have highlighted the properties field of the widget that I want to set when creating the form of the test program. As you can see I clicked on the shape field to select a shape for my widget. When I selected it, I would expect to see that shape on the form I'm creating for the test, but in reality it always shows me the first item in the shape list, i.e. Circle and not Triangle for example. Can you explain to me why this happens ?

    In the attachment you can see the Rounded shape which appears immediately when I drag my widget from the Widget Box and then deposit it on the form under construction, but as soon as I go to choose another shape, it is not displayed and Circle appears in its place.
    Attached Images Attached Images
    Reply With Quote Reply With Quote
  7. 30th April 2023, 16:11 #7
    d_stranz's Avatar
    d_stranz
    d_stranz is offline Guru
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to change widget shape in QtDesigner ?

    The documentation for Q_ENUMS() says it is obsolete and that you should use Q_ENUM() instead. It is possible that the version of Qt Designer you are using depends on the enum being registered with Qt's meta type system. Q_ENUM() must be placed in the code after the enum has been declared.

    Qt Code: 
    1. #pragma once
    2.  
    3. #include <Qt>
    4. #include <QtWidgets/QWidget>
    5. #include <QtUiPlugin/QDesignerExportWidget>
    6.  
    7.  
    8. // My Qt designer widget plugin class
    9.  
    10. class QColor;
    11.  
    12. class QDESIGNER_WIDGET_EXPORT QLed : public QWidget
    13. {
    14.     Q_OBJECT
    15.  
    16.     Q_PROPERTY(bool value READ value WRITE setValue)
    17.     Q_PROPERTY(ledColor onColor READ onColor WRITE setOnColor)
    18.     Q_PROPERTY(ledColor offColor READ offColor WRITE setOffColor)
    19.     Q_PROPERTY(ledShape shape READ shape WRITE setShape)
    20.  
    21. public: 
    22.     explicit QLed(QWidget *parent = 0);
    23.  
    24.     bool value() const { return m_value; }
    25.  
    26.     enum ledColor { Red = 0, Green, Yellow, Grey, Orange, Purple, Blue };
    27.     Q_ENUM (ledColor)
    28.  
    29.     enum ledShape { Circle = 0, Square, Triangle, Rounded };
    30.     Q_ENUM (ledShape)
    31.  
    32.     ledColor onColor() const { return m_onColor; }
    33.     ledColor offColor() const { return m_offColor; }
    34.     ledShape shape() const { return m_shape; }
    35.  
    36. public slots:
    37.     void setValue(bool);
    38.     void setOnColor(ledColor);
    39.     void setOffColor(ledColor);   
    40.     void setShape(ledShape);
    41.     void toggleValue();
    42.  
    43. signals:
    44.     void shapeChanged(ledShape);
    45.  
    46. protected:
    47.     bool m_value;
    48.  
    49.     ledColor m_onColor, m_offColor;
    50.  
    51.     int id_Timer;
    52.  
    53.     ledShape m_shape;
    54.  
    55.  
    56.     void paintEvent(QPaintEvent *event) override;
    57. };
    To copy to clipboard, switch view to plain text mode 

    For your example with the 5 LEDs, can you post the XML .ui file that Qt Designer creates for this widget? In Qt Designer, be sure to select different shapes for the LEDs even if Qt Designer shows them all as circles.
    Last edited by d_stranz; 30th April 2023 at 16:48.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.
    Reply With Quote Reply With Quote
  8. 30th April 2023, 17:56 #8
    giorgik
    giorgik is offline Intermediate user
    Join Date
    Apr 2010
    Location
    Italia
    Posts
    149
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: How to change widget shape in QtDesigner ?

    Quote Originally Posted by d_stranz View Post
    The documentation for Q_ENUMS() says it is obsolete and that you should use Q_ENUM() instead. It is possible that the version of Qt Designer you are using depends on the enum being registered with Qt's meta type system. Q_ENUM() must be placed in the code after the enum has been declared.

    Qt Code: 
    1. #pragma once
    2.  
    3. #include <Qt>
    4. #include <QtWidgets/QWidget>
    5. #include <QtUiPlugin/QDesignerExportWidget>
    6.  
    7.  
    8. // My Qt designer widget plugin class
    9.  
    10. class QColor;
    11.  
    12. class QDESIGNER_WIDGET_EXPORT QLed : public QWidget
    13. {
    14.     Q_OBJECT
    15.  
    16.     Q_PROPERTY(bool value READ value WRITE setValue)
    17.     Q_PROPERTY(ledColor onColor READ onColor WRITE setOnColor)
    18.     Q_PROPERTY(ledColor offColor READ offColor WRITE setOffColor)
    19.     Q_PROPERTY(ledShape shape READ shape WRITE setShape)
    20.  
    21. public: 
    22.     explicit QLed(QWidget *parent = 0);
    23.  
    24.     bool value() const { return m_value; }
    25.  
    26.     enum ledColor { Red = 0, Green, Yellow, Grey, Orange, Purple, Blue };
    27.     Q_ENUM (ledColor)
    28.  
    29.     enum ledShape { Circle = 0, Square, Triangle, Rounded };
    30.     Q_ENUM (ledShape)
    31.  
    32.     ledColor onColor() const { return m_onColor; }
    33.     ledColor offColor() const { return m_offColor; }
    34.     ledShape shape() const { return m_shape; }
    35.  
    36. public slots:
    37.     void setValue(bool);
    38.     void setOnColor(ledColor);
    39.     void setOffColor(ledColor);   
    40.     void setShape(ledShape);
    41.     void toggleValue();
    42.  
    43. signals:
    44.     void shapeChanged(ledShape);
    45.  
    46. protected:
    47.     bool m_value;
    48.  
    49.     ledColor m_onColor, m_offColor;
    50.  
    51.     int id_Timer;
    52.  
    53.     ledShape m_shape;
    54.  
    55.  
    56.     void paintEvent(QPaintEvent *event) override;
    57. };
    To copy to clipboard, switch view to plain text mode 

    For your example with the 5 LEDs, can you post the XML .ui file that Qt Designer creates for this widget? In Qt Designer, be sure to select different shapes for the LEDs even if Qt Designer shows them all as circles.

    Yes, I forgot to tell you that I then changed Q_ENUMS to Q_ENUM placed after the declaration of the enum in question.
    Here is the TestLed.ui file:

    Qt Code: 
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <ui version="4.0">
    3.  <class>TestLedClass</class>
    4.  <widget class="QMainWindow" name="TestLedClass">
    5.   <property name="geometry">
    6.    <rect>
    7.     <x>0</x>
    8.     <y>0</y>
    9.     <width>602</width>
    10.     <height>400</height>
    11.    </rect>
    12.   </property>
    13.   <property name="windowTitle">
    14.    <string>TestLed</string>
    15.   </property>
    16.   <widget class="QWidget" name="centralWidget">
    17.    <widget class="QCheckBox" name="checkBoxFlash">
    18.     <property name="geometry">
    19.      <rect>
    20.       <x>50</x>
    21.       <y>70</y>
    22.       <width>76</width>
    23.       <height>20</height>
    24.      </rect>
    25.     </property>
    26.     <property name="text">
    27.      <string>Flash led</string>
    28.     </property>
    29.    </widget>
    30.    <widget class="QCheckBox" name="checkBoxLedBox">
    31.     <property name="geometry">
    32.      <rect>
    33.       <x>40</x>
    34.       <y>160</y>
    35.       <width>76</width>
    36.       <height>20</height>
    37.      </rect>
    38.     </property>
    39.     <property name="text">
    40.      <string>on/off led</string>
    41.     </property>
    42.    </widget>
    43.    <widget class="Led" name="led_1">
    44.     <property name="geometry">
    45.      <rect>
    46.       <x>140</x>
    47.       <y>50</y>
    48.       <width>61</width>
    49.       <height>61</height>
    50.      </rect>
    51.     </property>
    52.     <property name="diameter">
    53.      <double>10.000000000000000</double>
    54.     </property>
    55.     <property name="color">
    56.      <color>
    57.       <red>255</red>
    58.       <green>255</green>
    59.       <blue>0</blue>
    60.      </color>
    61.     </property>
    62.     <property name="state">
    63.      <bool>false</bool>
    64.     </property>
    65.    </widget>
    66.    <widget class="Led_0_6_1" name="led_0_6_1">
    67.     <property name="geometry">
    68.      <rect>
    69.       <x>140</x>
    70.       <y>140</y>
    71.       <width>71</width>
    72.       <height>71</height>
    73.      </rect>
    74.     </property>
    75.     <property name="toolTip">
    76.      <string>Binary Led</string>
    77.     </property>
    78.     <property name="whatsThis">
    79.      <string>Led widget</string>
    80.     </property>
    81.     <property name="value">
    82.      <bool>false</bool>
    83.     </property>
    84.     <property name="onColor">
    85.      <enum>Led_0_6_1::Blue</enum>
    86.     </property>
    87.     <property name="offColor">
    88.      <enum>Led_0_6_1::Grey</enum>
    89.     </property>
    90.     <property name="shape">
    91.      <enum>Led_0_6_1::Circle</enum>
    92.     </property>
    93.    </widget>
    94.    <widget class="QCheckBox" name="checkBox2">
    95.     <property name="geometry">
    96.      <rect>
    97.       <x>40</x>
    98.       <y>250</y>
    99.       <width>91</width>
    100.       <height>20</height>
    101.      </rect>
    102.     </property>
    103.     <property name="text">
    104.      <string>on/off led 2</string>
    105.     </property>
    106.    </widget>
    107.    <widget class="Led_0_6_1" name="led_0_6_2">
    108.     <property name="geometry">
    109.      <rect>
    110.       <x>150</x>
    111.       <y>240</y>
    112.       <width>50</width>
    113.       <height>50</height>
    114.      </rect>
    115.     </property>
    116.     <property name="toolTip">
    117.      <string>Binary Led</string>
    118.     </property>
    119.     <property name="whatsThis">
    120.      <string>Led widget</string>
    121.     </property>
    122.     <property name="value">
    123.      <bool>false</bool>
    124.     </property>
    125.     <property name="onColor">
    126.      <enum>Led_0_6_1::Red</enum>
    127.     </property>
    128.     <property name="offColor">
    129.      <enum>Led_0_6_1::Grey</enum>
    130.     </property>
    131.     <property name="shape">
    132.      <enum>Led_0_6_1::Rounded</enum>
    133.     </property>
    134.    </widget>
    135.   </widget>
    136.   <widget class="QMenuBar" name="menuBar">
    137.    <property name="geometry">
    138.     <rect>
    139.      <x>0</x>
    140.      <y>0</y>
    141.      <width>602</width>
    142.      <height>22</height>
    143.     </rect>
    144.    </property>
    145.   </widget>
    146.   <widget class="QToolBar" name="mainToolBar">
    147.    <attribute name="toolBarArea">
    148.     <enum>TopToolBarArea</enum>
    149.    </attribute>
    150.    <attribute name="toolBarBreak">
    151.     <bool>false</bool>
    152.    </attribute>
    153.   </widget>
    154.   <widget class="QStatusBar" name="statusBar"/>
    155.  </widget>
    156.  <layoutdefault spacing="6" margin="11"/>
    157.  <customwidgets>
    158.   <customwidget>
    159.    <class>Led</class>
    160.    <extends>QWidget</extends>
    161.    <header>Led.h</header>
    162.   </customwidget>
    163.   <customwidget>
    164.    <class>Led_0_6_1</class>
    165.    <extends>QWidget</extends>
    166.    <header>Led_0_6_1.h</header>
    167.   </customwidget>
    168.  </customwidgets>
    169.  <resources>
    170.   <include location="TestLed.qrc"/>
    171.  </resources>
    172.  <connections>
    173.   <connection>
    174.    <sender>checkBoxFlash</sender>
    175.    <signal>toggled(bool)</signal>
    176.    <receiver>led_1</receiver>
    177.    <slot>setFlashing(bool)</slot>
    178.    <hints>
    179.     <hint type="sourcelabel">
    180.      <x>87</x>
    181.      <y>113</y>
    182.     </hint>
    183.     <hint type="destinationlabel">
    184.      <x>170</x>
    185.      <y>114</y>
    186.     </hint>
    187.    </hints>
    188.   </connection>
    189.   <connection>
    190.    <sender>checkBoxLedBox</sender>
    191.    <signal>toggled(bool)</signal>
    192.    <receiver>led_0_6_1</receiver>
    193.    <slot>setValue(bool)</slot>
    194.    <hints>
    195.     <hint type="sourcelabel">
    196.      <x>87</x>
    197.      <y>253</y>
    198.     </hint>
    199.     <hint type="destinationlabel">
    200.      <x>185</x>
    201.      <y>259</y>
    202.     </hint>
    203.    </hints>
    204.   </connection>
    205.   <connection>
    206.    <sender>checkBox2</sender>
    207.    <signal>toggled(bool)</signal>
    208.    <receiver>led_0_6_2</receiver>
    209.    <slot>setValue(bool)</slot>
    210.    <hints>
    211.     <hint type="sourcelabel">
    212.      <x>85</x>
    213.      <y>293</y>
    214.     </hint>
    215.     <hint type="destinationlabel">
    216.      <x>174</x>
    217.      <y>298</y>
    218.     </hint>
    219.    </hints>
    220.   </connection>
    221.  </connections>
    222. </ui>
    To copy to clipboard, switch view to plain text mode 
    Last edited by d_stranz; 30th April 2023 at 18:08. Reason: Eliminated double-quoted text
    Reply With Quote Reply With Quote
  9. 30th April 2023, 18:18 #9
    d_stranz's Avatar
    d_stranz
    d_stranz is offline Guru
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to change widget shape in QtDesigner ?

    Your UI file:

    Qt Code: 
    1. <widget class="Led" name="led_1">
    2. <widget class="Led_0_6_1" name="led_0_6_1">
    3.  
    4. ...
    5.  
    6. <customwidget>
    7.    <class>Led</class>
    8.    <extends>QWidget</extends>
    9.    <header>Led.h</header>
    10. </customwidget>
    11.  
    12. <customwidget>
    13.    <class>Led_0_6_1</class>
    14.    <extends>QWidget</extends>
    15.    <header>Led_0_6_1.h</header>
    16. </customwidget>
    To copy to clipboard, switch view to plain text mode 

    Your original code:

    Qt Code: 
    1. QString QLedPlugin::name() const
    2. {
    3.     return u"QLed"_s;
    4. }
    5.  
    6. QString QLedPlugin::domXml() const
    7. {
    8.     return uR"(
    9. <ui language="c++">
    10.   <widget class="QLed" name="qLed">
    11. )"
    12.  
    13. R"(
    14.     <property name="geometry">
    15.       <rect>
    16.         <x>0</x>
    17.         <y>0</y>
    18.         <width>50</width>
    19.         <height>50</height>
    20.       </rect>
    21.     </property>
    22. ")
    23.  
    24. R"(
    25.     <property name="toolTip">
    26.       <string>Binary Led</string>
    27.     </property>
    28.     <property name="value">
    29.       <bool>false</bool>
    30.     </property>
    31.     <property name="whatsThis">
    32.       <string>Led widget</string>
    33.     </property>
    34.     <property name="onColor">
    35.       <enum>QLed::Red</enum>
    36.       <enum>QLed::Green</enum>
    37.       <enum>QLed::Yellow</enum>
    38.       <enum>QLed::Grey</enum>
    39.       <enum>QLed::Orange</enum>
    40.       <enum>QLed::Purple</enum>
    41.       <enum>QLed::Blue</enum>
    42.     </property>
    43.     <property name="offColor">
    44.       <enum>QLed::Grey</enum>
    45.     </property>
    46.     <property name="shape">
    47.       <enum>QLed::Circle</enum>
    48.       <enum>QLed::Square</enum>
    49.       <enum>QLed::Triangle</enum>
    50.       <enum>QLed::Rounded</enum>
    51.     </property>
    52.   </widget>
    53. </ui>
    54. )"_s;
    55. }
    56.  
    57. QString QLedPlugin::includeFile() const
    58. {
    59.     return u"qled.h"_s;
    60. }
    To copy to clipboard, switch view to plain text mode 

    You're wasting my time here, if the code you are now using is nothing like the code you originally posted. How is anyone supposed to help you determine what is wrong when your are looking at oranges while we are looking at apples?
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.
    Reply With Quote Reply With Quote
  10. 30th April 2023, 19:10 #10
    giorgik
    giorgik is offline Intermediate user
    Join Date
    Apr 2010
    Location
    Italia
    Posts
    149
    Thanked 2 Times in 2 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Unhappy Re: How to change widget shape in QtDesigner ?

    Quote Originally Posted by d_stranz View Post
    Your UI file:

    Qt Code: 
    1. <widget class="Led" name="led_1">
    2. <widget class="Led_0_6_1" name="led_0_6_1">
    3.  
    4. ...
    5.  
    6. <customwidget>
    7.    <class>Led</class>
    8.    <extends>QWidget</extends>
    9.    <header>Led.h</header>
    10. </customwidget>
    11.  
    12. <customwidget>
    13.    <class>Led_0_6_1</class>
    14.    <extends>QWidget</extends>
    15.    <header>Led_0_6_1.h</header>
    16. </customwidget>
    To copy to clipboard, switch view to plain text mode 

    Your original code:

    Qt Code: 
    1. QString QLedPlugin::name() const
    2. {
    3.     return u"QLed"_s;
    4. }
    5.  
    6. QString QLedPlugin::domXml() const
    7. {
    8.     return uR"(
    9. <ui language="c++">
    10.   <widget class="QLed" name="qLed">
    11. )"
    12.  
    13. R"(
    14.     <property name="geometry">
    15.       <rect>
    16.         <x>0</x>
    17.         <y>0</y>
    18.         <width>50</width>
    19.         <height>50</height>
    20.       </rect>
    21.     </property>
    22. ")
    23.  
    24. R"(
    25.     <property name="toolTip">
    26.       <string>Binary Led</string>
    27.     </property>
    28.     <property name="value">
    29.       <bool>false</bool>
    30.     </property>
    31.     <property name="whatsThis">
    32.       <string>Led widget</string>
    33.     </property>
    34.     <property name="onColor">
    35.       <enum>QLed::Red</enum>
    36.       <enum>QLed::Green</enum>
    37.       <enum>QLed::Yellow</enum>
    38.       <enum>QLed::Grey</enum>
    39.       <enum>QLed::Orange</enum>
    40.       <enum>QLed::Purple</enum>
    41.       <enum>QLed::Blue</enum>
    42.     </property>
    43.     <property name="offColor">
    44.       <enum>QLed::Grey</enum>
    45.     </property>
    46.     <property name="shape">
    47.       <enum>QLed::Circle</enum>
    48.       <enum>QLed::Square</enum>
    49.       <enum>QLed::Triangle</enum>
    50.       <enum>QLed::Rounded</enum>
    51.     </property>
    52.   </widget>
    53. </ui>
    54. )"_s;
    55. }
    56.  
    57. QString QLedPlugin::includeFile() const
    58. {
    59.     return u"qled.h"_s;
    60. }
    To copy to clipboard, switch view to plain text mode 

    You're wasting my time here, if the code you are now using is nothing like the code you originally posted. How is anyone supposed to help you determine what is wrong when your are looking at oranges while we are looking at apples?
    You are absolutely right, I apologize. Only in the meantime I've been trying to get on with the code and try some changes. It just changed the name from QLed to Led_0_6_1, but it's still the same. Sorry, I forgot to tell you earlier...

    I managed to solve the problem by editing the Test.ui file of my widget by hand, modifying it like this:
    Qt Code: 
    1. ...
    2. <property name="onColor">
    3.      <enum>Led_0_6_1::Orange</enum>
    4. </property>
    5. ...
    6. <property name="shape">
    7.      <enum>Led_0_6_1::Triangle</enum>
    8. </property>
    9. ...
    To copy to clipboard, switch view to plain text mode 
    this displays the right shape of the widget. However, this solution doesn't satisfy me much, as I wanted to do it in the Qt Designer environment through the properties of my widget.
    Last edited by giorgik; 30th April 2023 at 19:28.
    Reply With Quote Reply With Quote
  11. 1st May 2023, 05:38 #11
    d_stranz's Avatar
    d_stranz
    d_stranz is offline Guru
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: How to change widget shape in QtDesigner ?

    Please do not reply by quoting my entire response. It makes the thread extremely long and difficult to read. Just click Reply, then add QUOTE tags for specific things. Thanks.

    I wanted to do it in the Qt Designer environment through the properties of my widget.
    OK, I am pretty sure the problem is in the domXml() method of your plugin. The XML code is supposed to be a template that Qt Designer uses when writing the widget's specification to the .ui file. I think your mistake is including all of the enum values in this XML, when there should only be one as a placeholder. So your domXml() should look like this:

    Qt Code: 
    1. QString QLedPlugin::domXml() const
    2. {
    3.     return uR"(
    4. <ui language="c++">
    5.   <widget class="QLed" name="qLed">
    6. )"        
    7. R"(
    8.     <property name="geometry">
    9.       <rect>
    10.         <x>0</x>
    11.         <y>0</y>
    12.         <width>50</width>
    13.         <height>50</height>
    14.       </rect>
    15.     </property>
    16. ")
    17. R"(
    18.     <property name="toolTip">
    19.       <string>Binary Led</string>
    20.     </property>
    21.     <property name="value">
    22.       <bool>false</bool>
    23.     </property>
    24.     <property name="whatsThis">
    25.       <string>Led widget</string>
    26.     </property>
    27.     <property name="onColor">
    28.       <enum>QLed::Red</enum>
    29.      </property>
    30.     <property name="offColor">
    31.       <enum>QLed::Grey</enum>
    32.     </property>
    33.     <property name="shape">
    34.       <enum>QLed::Circle</enum>
    35.     </property>
    36.   </widget>
    37. </ui>
    38. )"_s;
    39. }
    To copy to clipboard, switch view to plain text mode 

    Qt Designer will understand from your Q_ENUM() and Q_PROPERTY() definitions what are the allowed values to substitute for the placeholder values in the template.

    The Qt Designer UI file format is here. Near the bottom of the page is the specification for the Property type, which specifies what the <property> element can contain.

    Qt Code: 
    1. <xs:complexType name="Property">
    2.                 <xs:choice>
    3.                         <xs:element name="bool" type="xs:string" />
    4.                         <xs:element name="color" type="Color" />
    5.                         <xs:element name="cstring" type="xs:string" />
    6.                         <xs:element name="cursor" type="xs:integer" />
    7.                         <xs:element name="cursorshape" type="xs:string" />
    8.                         <xs:element name="enum" type="xs:string" />
    9.                         <xs:element name="font" type ="Font" />
    10.                         <xs:element name="iconset" type="ResourceIcon"/>
    11.                         <xs:element name="pixmap" type="ResourcePixmap" />
    12.                         <xs:element name="palette" type="Palette" />
    13.                         <xs:element name="point" type="Point" />
    14.                         <xs:element name="rect" type="Rect" />
    15.                         <xs:element name="set" type="xs:string" />
    16.                         <xs:element name="locale" type="Locale" />
    17.                         <xs:element name="sizepolicy" type="SizePolicy" />
    18.                         <xs:element name="size" type="Size" />
    19.                         <xs:element name="string" type="String" />
    20.                         <xs:element name="stringlist" type="StringList" />
    21.                         <xs:element name="number" type="xs:integer" />
    22.                         <xs:element name="float" type="xs:float" />
    23.                         <xs:element name="double" type="xs:double" />
    24.                         <xs:element name="date" type="Date" />
    25.                         <xs:element name="time" type="Time" />
    26.                         <xs:element name="datetime" type="DateTime" />
    27.                         <xs:element name="pointf" type="PointF" />
    28.                         <xs:element name="rectf" type="RectF" />
    29.                         <xs:element name="sizef" type="SizeF" />
    30.                         <xs:element name="longlong" type="xs:long" />
    31.                         <xs:element name="char" type="Char" />
    32.                         <xs:element name="url" type="Url" />
    33.                         <xs:element name="uint" type="xs:unsignedInt" />
    34.                         <xs:element name="ulonglong" type="xs:unsignedLong" />
    35.                         <xs:element name="brush" type="Brush" />
    36.                 </xs:choice>
    37.                 <xs:attribute name="name" type="xs:string" />
    38.                 <xs:attribute name="stdset" type="xs:integer" />
    39.         </xs:complexType>
    To copy to clipboard, switch view to plain text mode 

    The first part is an <xs:choice> element, which means that only one of the elements listed can appear in the <property> element. In other words, listing more than one <enum> entry violates the <ui> XML specification. So Qt Designer imported your plugin, but probably ignored the incorrect parts of your domXml().
    Last edited by d_stranz; 1st May 2023 at 05:48.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. QCursor change shape in Qt 5
    By cic1988 in forum Qt Programming
    Replies: 5
    Last Post: 4th March 2015, 20:49
  2. Can I change the shape of the form in QML?
    By chong_kimkeang in forum Newbie
    Replies: 1
    Last Post: 7th November 2012, 17:51
  3. how to change shape of Qwidget??
    By anupamgee in forum Qt Programming
    Replies: 4
    Last Post: 29th June 2009, 09:54
  4. Change the shape of a frame.
    By sabeesh in forum Qt Programming
    Replies: 1
    Last Post: 13th November 2007, 06:40
  5. How to change shape fast
    By nileshsince1980 in forum Qt Programming
    Replies: 9
    Last Post: 18th October 2007, 05:49

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.