How to change widget shape in QtDesigner ?

[giorgik]

Your UI file:

<widget class="Led" name="led_1">
<widget class="Led_0_6_1" name="led_0_6_1">
 
...
 
<customwidget>
   <class>Led</class>
   <extends>QWidget</extends>
   <header>Led.h</header>
</customwidget>
 
<customwidget>
   <class>Led_0_6_1</class>
   <extends>QWidget</extends>
   <header>Led_0_6_1.h</header>
</customwidget>

<widget class="Led" name="led_1">
<widget class="Led_0_6_1" name="led_0_6_1">

...

<customwidget>
   <class>Led</class>
   <extends>QWidget</extends>
   <header>Led.h</header>
</customwidget>

<customwidget>
   <class>Led_0_6_1</class>
   <extends>QWidget</extends>
   <header>Led_0_6_1.h</header>
</customwidget>

To copy to clipboard, switch view to plain text mode 

Your original code:

QString QLedPlugin::name() const
{
    return u"QLed"_s;
}
 
QString QLedPlugin::domXml() const
{
    return uR"(
<ui language="c++">
  <widget class="QLed" name="qLed">
)"
 
R"(
    <property name="geometry">
      <rect>
        <x>0</x>
        <y>0</y>
        <width>50</width>
        <height>50</height>
      </rect>
    </property>
")
 
R"(
    <property name="toolTip">
      <string>Binary Led</string>
    </property>
    <property name="value">
      <bool>false</bool>
    </property>
    <property name="whatsThis">
      <string>Led widget</string>
    </property>
    <property name="onColor">
      <enum>QLed::Red</enum>
      <enum>QLed::Green</enum>
      <enum>QLed::Yellow</enum>
      <enum>QLed::Grey</enum>
      <enum>QLed::Orange</enum>
      <enum>QLed::Purple</enum>
      <enum>QLed::Blue</enum>
    </property>
    <property name="offColor">
      <enum>QLed::Grey</enum>
    </property>
    <property name="shape">
      <enum>QLed::Circle</enum>
      <enum>QLed::Square</enum>
      <enum>QLed::Triangle</enum>
      <enum>QLed::Rounded</enum>
    </property>
  </widget>
</ui>
)"_s;
}
 
QString QLedPlugin::includeFile() const
{
    return u"qled.h"_s;
}

QString QLedPlugin::name() const
{
    return u"QLed"_s;
}

QString QLedPlugin::domXml() const
{
    return uR"(
<ui language="c++">
  <widget class="QLed" name="qLed">
)"
           
R"(
    <property name="geometry">
      <rect>
        <x>0</x>
        <y>0</y>
        <width>50</width>
        <height>50</height>
      </rect>
    </property>
")

R"(
    <property name="toolTip">
      <string>Binary Led</string>
    </property>
    <property name="value">
      <bool>false</bool>
    </property>
    <property name="whatsThis">
      <string>Led widget</string>
    </property>
    <property name="onColor">
      <enum>QLed::Red</enum>
      <enum>QLed::Green</enum>
      <enum>QLed::Yellow</enum>
      <enum>QLed::Grey</enum>
      <enum>QLed::Orange</enum>
      <enum>QLed::Purple</enum>
      <enum>QLed::Blue</enum>
    </property>
    <property name="offColor">
      <enum>QLed::Grey</enum>
    </property>
    <property name="shape">
      <enum>QLed::Circle</enum>
      <enum>QLed::Square</enum>
      <enum>QLed::Triangle</enum>
      <enum>QLed::Rounded</enum>
    </property>
  </widget>
</ui>
)"_s;
}

QString QLedPlugin::includeFile() const
{
    return u"qled.h"_s;
}

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:

...
<property name="onColor">
     <enum>Led_0_6_1::Orange</enum>
</property>
...
<property name="shape">
     <enum>Led_0_6_1::Triangle</enum>
</property>
...

...
<property name="onColor">
     <enum>Led_0_6_1::Orange</enum>
</property>
...
<property name="shape">
     <enum>Led_0_6_1::Triangle</enum>
</property>
...

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.

[d_stranz]

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:

QString QLedPlugin::domXml() const
{
    return uR"(
<ui language="c++">
  <widget class="QLed" name="qLed">
)"        
R"(
    <property name="geometry">
      <rect>
        <x>0</x>
        <y>0</y>
        <width>50</width>
        <height>50</height>
      </rect>
    </property>
")
R"(
    <property name="toolTip">
      <string>Binary Led</string>
    </property>
    <property name="value">
      <bool>false</bool>
    </property>
    <property name="whatsThis">
      <string>Led widget</string>
    </property>
    <property name="onColor">
      <enum>QLed::Red</enum>
     </property>
    <property name="offColor">
      <enum>QLed::Grey</enum>
    </property>
    <property name="shape">
      <enum>QLed::Circle</enum>
    </property>
  </widget>
</ui>
)"_s;
}

QString QLedPlugin::domXml() const
{
    return uR"(
<ui language="c++">
  <widget class="QLed" name="qLed">
)"        
R"(
    <property name="geometry">
      <rect>
        <x>0</x>
        <y>0</y>
        <width>50</width>
        <height>50</height>
      </rect>
    </property>
")
R"(
    <property name="toolTip">
      <string>Binary Led</string>
    </property>
    <property name="value">
      <bool>false</bool>
    </property>
    <property name="whatsThis">
      <string>Led widget</string>
    </property>
    <property name="onColor">
      <enum>QLed::Red</enum>
     </property>
    <property name="offColor">
      <enum>QLed::Grey</enum>
    </property>
    <property name="shape">
      <enum>QLed::Circle</enum>
    </property>
  </widget>
</ui>
)"_s;
}

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.

<xs:complexType name="Property">
                <xs:choice>
                        <xs:element name="bool" type="xs:string" />
                        <xs:element name="color" type="Color" />
                        <xs:element name="cstring" type="xs:string" />
                        <xs:element name="cursor" type="xs:integer" />
                        <xs:element name="cursorshape" type="xs:string" />
                        <xs:element name="enum" type="xs:string" />
                        <xs:element name="font" type ="Font" />
                        <xs:element name="iconset" type="ResourceIcon"/>
                        <xs:element name="pixmap" type="ResourcePixmap" />
                        <xs:element name="palette" type="Palette" />
                        <xs:element name="point" type="Point" />
                        <xs:element name="rect" type="Rect" />
                        <xs:element name="set" type="xs:string" />
                        <xs:element name="locale" type="Locale" />
                        <xs:element name="sizepolicy" type="SizePolicy" />
                        <xs:element name="size" type="Size" />
                        <xs:element name="string" type="String" />
                        <xs:element name="stringlist" type="StringList" />
                        <xs:element name="number" type="xs:integer" />
                        <xs:element name="float" type="xs:float" />
                        <xs:element name="double" type="xs:double" />
                        <xs:element name="date" type="Date" />
                        <xs:element name="time" type="Time" />
                        <xs:element name="datetime" type="DateTime" />
                        <xs:element name="pointf" type="PointF" />
                        <xs:element name="rectf" type="RectF" />
                        <xs:element name="sizef" type="SizeF" />
                        <xs:element name="longlong" type="xs:long" />
                        <xs:element name="char" type="Char" />
                        <xs:element name="url" type="Url" />
                        <xs:element name="uint" type="xs:unsignedInt" />
                        <xs:element name="ulonglong" type="xs:unsignedLong" />
                        <xs:element name="brush" type="Brush" />
                </xs:choice>
                <xs:attribute name="name" type="xs:string" />
                <xs:attribute name="stdset" type="xs:integer" />
        </xs:complexType>

<xs:complexType name="Property">
                <xs:choice>
                        <xs:element name="bool" type="xs:string" />
                        <xs:element name="color" type="Color" />
                        <xs:element name="cstring" type="xs:string" />
                        <xs:element name="cursor" type="xs:integer" />
                        <xs:element name="cursorshape" type="xs:string" />
                        <xs:element name="enum" type="xs:string" />
                        <xs:element name="font" type ="Font" />
                        <xs:element name="iconset" type="ResourceIcon"/>
                        <xs:element name="pixmap" type="ResourcePixmap" />
                        <xs:element name="palette" type="Palette" />
                        <xs:element name="point" type="Point" />
                        <xs:element name="rect" type="Rect" />
                        <xs:element name="set" type="xs:string" />
                        <xs:element name="locale" type="Locale" />
                        <xs:element name="sizepolicy" type="SizePolicy" />
                        <xs:element name="size" type="Size" />
                        <xs:element name="string" type="String" />
                        <xs:element name="stringlist" type="StringList" />
                        <xs:element name="number" type="xs:integer" />
                        <xs:element name="float" type="xs:float" />
                        <xs:element name="double" type="xs:double" />
                        <xs:element name="date" type="Date" />
                        <xs:element name="time" type="Time" />
                        <xs:element name="datetime" type="DateTime" />
                        <xs:element name="pointf" type="PointF" />
                        <xs:element name="rectf" type="RectF" />
                        <xs:element name="sizef" type="SizeF" />
                        <xs:element name="longlong" type="xs:long" />
                        <xs:element name="char" type="Char" />
                        <xs:element name="url" type="Url" />
                        <xs:element name="uint" type="xs:unsignedInt" />
                        <xs:element name="ulonglong" type="xs:unsignedLong" />
                        <xs:element name="brush" type="Brush" />
                </xs:choice>
                <xs:attribute name="name" type="xs:string" />
                <xs:attribute name="stdset" type="xs:integer" />
        </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().

[giorgik]

I understand. Thank you for the explanations. I will look at the document you indicated to me. So to solve my problem, that is to be able to select an item from the shape field list and keep that item as a choice, what should I do ?

[d_stranz]

to be able to select an item from the shape field list and keep that item as a choice, what should I do ?

I think all you need to do is to substitute the domXml() implementation from my last reply and it should all work with the original code you posted (Q_ENUM() instead of Q_ENUMS() of course). Qt Designer should match up the entries from your QLed enum{} lists and convert them to property value choices in the Designer. With the correct XML for the domXml() template, it will substitute the changes when it generates the .ui file for your widget form.

However, for the offColor property, since you have defined this to us the same enum type as onColor, all of the colors will be available to choose from, not only Grey. If all you will allow is Grey, then it doesn't need to be a user-configurable property at all. However, I can think of using QLed not as an on / off indicator, but as OK / not OK using Green and Red so having a choice would be better.

[giorgik]

I think all you need to do is to substitute the domXml() implementation from my last reply and it should all work with the original code you posted (Q_ENUM() instead of Q_ENUMS() of course). Qt Designer should match up the entries from your QLed enum{} lists and convert them to property value choices in the Designer. With the correct XML for the domXml() template, it will substitute the changes when it generates the .ui file for your widget form.

I already tried with changing the domXml like you said, but nothing changes. The .ui file always remains the same without having the new settings. I do not know what to do...

I know I'm asking too much, but could you give me your example project, simple simple with the voice selection feature like in my case? It's the only way to see what I forgot to do or if instead it's a problem related to using Qt6.5 in Visual Studio C++ 2022.

This was an old project of mine done directly in Qt4.8 using MinGw as compiler and it worked perfectly. Now that I've got it back but using Qt6.5 and Visual Studio C++ 2022, it doesn't work anymore :-(

In practice, it seems that the item I select in the properties panel of my widget in QtDesigner does not take it and does not update the .ui file

[d_stranz]

I know I'm asking too much, but could you give me your example project

Please make a ZIP file of all of your plugin and QLed code, including the SVG files used for drawing the LEDs - basically, everything I need to build your plugin and use it. Source code only, no compiled binary files. I don't have time to create a new plugin, but I can work on your code to try to get it working. You can attach the ZIP file to a reply in this forum.

[giorgik]

Please make a ZIP file of all of your plugin and QLed code, including the SVG files used for drawing the LEDs

OK, below I put the attachment of the project.Led.zip

[giorgik]

In the ui_TestLed.h should I vary the value passed to setProperty( ):

led_0_6_3->setProperty("shape", QVariant::fromValue(Led_0_6_1::Circle));

[d_stranz]

OK, thanks for the code. I did not make many changes to it except to change the Qt::StringLiterals to ordinary strings since I am using Qt 5 and this is not supported. I also found I needed to add QDESIGNER_EXPORT_WIDGETS in the project settings when building the plugin. (Led_6_0_1 -> Properties -> C/C++ -> Preprocessor -> Preprocessor Definitions).

I designed a simple dialog widget to test the LED widget. The dialog has 5 LED widgets, with different properties set in Qt Designer. There are three push buttons. The first (Toggle LEDs) changes the on / off state for each LED. The second (Change Shapes) sets a new shape for each LED using the setShape() property. The third button (Change Colors) sets new on / off colors for each LED using setOnColor() and setOffColor(). These changes are implemented using a set of simple QLists whose contents are rotated with each click.

The test program demonstrates that setting shape, color, and value properties works both in Qt Designer (with correct values in the .ui file) and at run-time.

TestLed.png

I have attached a ZIP file with the code. I did not include the VS project files since those were changed for Qt 5 and won't apply for you and Qt 6. Just copy the source files. The test project needs to link with your plugin .lib file and include Qt core, gui, widgets, and svg in the configuration settings. The plugin .dll file must be in your path or where the program can load it at runtime.

Led.zip

It is probably not correct to have the code for the LED widget inside of the Qt Designer plugin itself. This means any application you write has to link to the plugin library. That is not right. You should separate the code for the widget from the code for the plugin, and create a LED DLL and a plugin DLL. The plugin DLL is linked to the LED library, and you must put the LED DLL where Qt Designer can find it. When you write an application, you should be linking only to the LED .lib and installing the LED DLL with your application.

[giorgik]

Thank you for your time for me, I copied your files to my project. Well, starting the test program, using the buttons everything works fine, while in Qt Designer, it still doesn't update the shape of the widget when I change the shape property. It's really a mystery...
Do you use the Qt Creator environment directly for the modifications you have made ?
So you always compile inside Qt Creator ?
Which compiler do you use MinGW or Visual C++ ?

[d_stranz]

while in Qt Designer, it still doesn't update the shape of the widget when I change the shape property. It's really a mystery...

It works fine for me, using Qt Designer 5.15.3.

Test1.pngTest3.pngTest2.pngTest4.png

If you still have a copy of Qt5 somewhere, copy your DLL into the plugins\designer directory and run the designer.exe you can find in the bin directory. Open the UI file and see what it looks like.

Edit: Do the colors change when you select different choices in Qt Designer? If not, I think that maybe Qt Designer is using the qled.png icon and not the actual widget. Are you linking your plugin DLL with QtSvg? It is possible that your version of Qt Designer was not built with SVG support linked in, so your SVG resources aren't loading. Try copying the Qt6Svg.dll file into the plugins\designer directory.

[giorgik]

Do you use the Qt Creator environment directly for the modifications you have made ?
So you always compile inside Qt Creator ?
Which compiler do you use MinGW or Visual C++ ?