RadioButtonStyle and documentation in general

VFCraig

This is a cut and paste directly from your QML documentation for RadioButtonStyle:

RadioButton {
text: "Radio Button"
style: RadioButtonStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 9
border.color: control.activeFocus ? "darkblue" : "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
radius: 9
anchors.margins: 4
}
}
}
}

But "style" is NOT a property of RadioButton, at least not in 5.15.

What is the proper way to implement such? Do I have to start with AbstractButton and build from scratch?

I've also been working with setting alpha layers of a base rectangle on which opaque controls are placed. I have it working, but the alpha settings are in direct opposition to those in the color documentation. #00 is NOT fully transparent, it is fully opaque. #FF is fully transparent. At least that is how it works in 5.15. My concern here is that will this change in the future? I am developing for a medical device and do not want them looking at blacked out controls because this has been corrected.

Opacity enforces its setting on every child object, so using it is not useful here. Comments from moderators indicate that this is very much intentional and will not change. Oddly though, OpacityAnimator does not have the same effect.

Sorry for stuffing several issues in one, but I have other more important things to focus on.

VFCraig

Adding to the documentation issues, that example for RadioButtonStyle sets both implicitWidth and implicitHeight, both of which are READ ONLY properties. Not valid in actual code and not valid for an example.

VFCraig

Another doc slip. Working on creating a dynamic list of objects. So, I read the following:

https://doc.qt.io/qt-5/qml-var.html

Under, "Change Notification Semantics", this line of the example,

  property var car: new Object({wheels: 4})

Generates a message in QtCreator, "Do not use "Object" as a constructor."

Examples should always be clean. That is what makes them an example.

GrecKo

ok.

Report it as an issue on the bug tracker then.

GrecKo

@VFCraig said in RadioButtonStyle and documentation in general:

But "style" is NOT a property of RadioButton, at least not in 5.15.

It is, in Qt Quick Controls 1. Which have been deprecated and replaced by Qt Quick Controls 2. The styling system has radically changed.

I have it working, but the alpha settings are in direct opposition to those in the color documentation. #00 is NOT fully transparent, it is fully opaque. #FF is fully transparent.

Both #00 and #FF are invalid colors and give a runtime error (and one in Qt C) under Qt 5.15. I don't see where you read that either one of those was transparent.

that example for RadioButtonStyle sets both implicitWidth and implicitHeight, both of which are READ ONLY properties. Not valid in actual code and not valid for an example.

implicitWidth and implicitHeight are not read only properties for the majority of Items, including Rectangle which is used in the example you mentionned.

VFCraig

@GrecKo RadioButtonStyle is a class in QML 5.15.

https://doc.qt.io/qt-5/qml-qtquick-controls-styles-radiobuttonstyle.html

The EXAMPLE in that page, which I attempted to run, sets implicitWidth and implicitHeight, both of which are READ ONLY in that class.

VFCraig

@GrecKo Both #00 and #FF, as the alpha values of an entire color specification (don't make me waste letters) are valid, as specified in the color basics documentation.

https://doc.qt.io/qt-5/qml-color.html

GrecKo

@VFCraig said in RadioButtonStyle and documentation in general:

@GrecKo RadioButtonStyle is a class in QML 5.15.

Yes and? I've never said that it isn't. I said that it is part of the deprecated Qt Quick Controls 1 module.

https://doc.qt.io/qt-5/qml-qtquick-controls-styles-radiobuttonstyle.html

The EXAMPLE in that page, which I attempted to run, sets implicitWidth and implicitHeight, both of which are READ ONLY in that class.

That is incorrect. implicitWidth and implicitHeight are not readonly for Rectangle

Here is a complete QML file to reproduce the example linked above:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    width: 640
    height: 480
    visible: true

    RadioButton {
        text: "Radio Button"
        style: RadioButtonStyle {
            indicator: Rectangle {
                    implicitWidth: 16
                    implicitHeight: 16
                    radius: 9
                    border.color: control.activeFocus ? "darkblue" : "gray"
                    border.width: 1
                    Rectangle {
                        anchors.fill: parent
                        visible: control.checked
                        color: "#555"
                        radius: 9
                        anchors.margins: 4
                    }
            }
        }
     }
}

It works as expected.

But don't use QtQuick Controls 1 and use Qt Quick Controls 2 instead:
https://doc.qt.io/qt-5/qml-qtquick-controls2-radiobutton.html
https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-radiobutton

@GrecKo Both #00 and #FF, as the alpha values of an entire color specification (don't make me waste letters) are valid, as specified in the color basics documentation.

I misunderstood you thinking you were just doing color: "#00" with nothing after.
And after a quick testing those work correctly here, as in color: "#00FF0000" gives a transparent color and color: "#FFFF0000" gives a fully opaque red.
Please provide a minimal reproducible example if that's not the case for you.

VFCraig

Ignore the fact that I have to create my own form of popup. Not your concern. Something to do with boot2qt and screen rotation only working for the main window. (Though if it is an issue with boot2qt, yes, please fix it.) Not anything I have control over either.

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.3

Rectangle
{
id: vfPopUp

onVisibleChanged:
{
    if (visible)
    {
        // Use 8 character color hex values to define transparency (alpha layer)
        // See this page for values: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
        //
        // But WARNING! - QML transparency settings using the alpha channel are exact opposite of docs.
        //                An alpha value of #00 is 100% transparent. A value of #FF is opaque.
        var tmpColor

// tmpColor = "FFFFFF" // White
// These settings are based on observation. The alpha values here are opposite of those in QML color documentation.
tmpColor = "000000" // Black - Best color for transparency as it grays instead of tints screen beneath.
// vfPopUp.color = "#E6" + tmpColor // 10% transparency.
// vfPopUp.color = "#CC" + tmpColor // 20% transparency.
// vfPopUp.color = "#B3" + tmpColor // 30% transparency.
// vfPopUp.color = "#99" + tmpColor // 40% transparency.
// vfPopUp.color = "#80" + tmpColor // 50% transparency.
// vfPopUp.color = "#66" + tmpColor // 60% transparency.
// vfPopUp.color = "#4D" + tmpColor // 70% transparency.
// vfPopUp.color = "#33" + tmpColor // 80% transparency. Best one.
vfPopUp.color = "#2F" + tmpColor // Approx. 85% transparency. Design doc coloring suggests somewhere between 85 and 90.
// vfPopUp.color = "#1A" + tmpColor // 90% transparency.
// vfPopUp.color = "#00" + tmpColor // 100% transparency.

}
}

}

That pretty much covers it, along with all the values I used to test the different levels. The rectangle is drawn over the entire display, casting a gray shadow over the controls below. On top of that is placed the appropriate message box with a title bar (not moveable) and appropriate contents. The code is commented out as it currently exists and, yes, I can see the controls beneath even though my alpha setting is nearly zero. (Or #00.) If I used, #FF, the screen would be blacked out and none of the underlying controls would be visible. Can't use opacity because that impacts all children of the object where opacity is set, pretty much opposite of what is desired. Even though oddly, the opacity animator seems to manage it. (Seems like a bug.)

And really, QtQuick Controls 1 vs 2. Who thought that was a good idea? If you are going to change something that much and still support the previous version, change the name.
It just makes the documentation that much more confusing. Still trying to figure out why when I look up a control, like Button, there is no picture to present it. No diagram explaining text layout, showing baseline, descent, ascent, etc. And why when I show all attributes, including inherited, it still doesn't show me what signals are associated with the control? I know Qt 5 and 6 do far more than 3, but the docs for 3 were many, many times clearer. Half of the QML documentation is of the type, "If you want the color to be red, set red to be the color." That is NOT documentation. Or pointing to the C++ class where QML only supports a fraction of the functionality.

GrecKo

@VFCraig said in RadioButtonStyle and documentation in general:

my alpha setting is nearly zero. (Or #00.) If I used, #FF, the screen would be blacked out and none of the underlying controls would be visible.

That's how alpha work for every color system ever. An alpha of 0 is fully transparent. #FF is fully opaque. Alpha is the opposite of the transparency. What's disturbing is that in your original post you claimed Qt behaved the opposite way:

@VFCraig said in RadioButtonStyle and documentation in general:

. #00 is NOT fully transparent, it is fully opaque. #FF is fully transparent.

Which VFCraig should we believe?

@VFCraig said in RadioButtonStyle and documentation in general:

QML transparency settings using the alpha channel are exact opposite of docs.
An alpha value of #00 is 100% transparent. A value of #FF is opaque.

Can you link where the documentation specify that? I haven't found it.