QML Round button background light

Eyal Erez

Hi All,

Very strange (and i hope simple) problem.
When i clicked on a button it's back-ground color is change to yellow and most of the time it's good for me, but there is few scenarios that i don't want this.

I've tried using few properties :

Clicked : false
pressed: false

None of them work, the yellow background is always show.

Can anyone tell me which property i need/should use?

Thanks

Eeli K

@Eyal-Erez These and other similar properties are about functionality. Controls 1 uses styles, Controls 2 is also themeable. You should read from the documentation how to change the looks of the Button control. I haven't used Controls 1 but it looks like there's ButtonStyle QML type which is used with Controls 1 Button.

Eyal Erez

@Eeli-K I read the manual (http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle.html#background-prop)
i also read this manual https://doc.qt.io/qt-5/qml-qtquick-controls2-roundbutton-members.html .
and from this seem to be the right property to use but from some reason it doesn't effect at all on the button.

I will add the QML code of the button(i'm trying to set to each state a different background):


RoundButton {
	id:                 simpleButton
	visible:            true
	z:                  QGroundControl.zOrderWidgets
	lightBorders:       _lightWidgetBorders
	state: _activeVehicle ? _activeVehicle.classState :"A"
	states: [
		State {
			name: "A"
			PropertyChanges {
				target: simpleButton                                                        
				onClicked :{						
					_activeVehicle.A()}
				buttonImage: "/qmlimages/ZoomMinus.svg"
				
			}
		},
		State {
			name: "B"
			PropertyChanges {
				target: simpleButton
				onClicked: {						
					_activeVehicle.B()}
				buttonImage: "/qmlimages/ZoomPlus.svg" }				
			},
		State {
			name: "C"
			PropertyChanges {
				target: simpleButton
				enabled: false
				buttonImage: "/qmlimages/Light.svg"
			}
		}
	]
}

Also when trying to use QT-QML autocomplete i don't see any background property or anything related to color.

Eeli K

@Eyal-Erez Where do these lightBorders and buttonImage properties come from? Which one do you use, Controls 1 or Controls 2?

Eyal Erez

For now I've tried them both.. and both of them didn't work for me.

The "lightBorders" and "buttonImage" are not used... even if i deleted them the other properties doesn't effect.

Eeli K

@Eyal-Erez It's still very difficult to say anything. We should have more context. You should show at least the whole file where this code is. Is this RoundButton the Qt's own Controls2 RoundButton or does it come from the project?

Better yet, write a minimal self-contained application (preferably main.qml and at most one or two component files) which can easily be pasted to Qt Creator and which shows the problem. I see that you use e.g. QGroundControl which may affect this problem. Try to set z with a plain value and also get rid of all other dependencies to isolate the problem.

You can also try QML debugging. You can see the live object tree and inspect property values etc. It's good to learn to debug, it's worth the time anyways.

Eyal Erez

@Eeli-K i will start by saying thanks for the quick responses.

Here is the original file:
https://github.com/mavlink/qgroundcontrol/blob/Stable_V3.0/src/FlightDisplay/FlightDisplayViewWidgets.qml

I don't want to check this properties on a clean project because i'm sure (At least) one of the should/will work and i rather invest my time figuring out why it doesn't work in this QML.

Can you see anything that might prevent controling the checked/back-light of a round button??

About the QML debugging i tried and even saw a few (new)parameters that i tried (like focus) but they didn't work (acctully made the all QML not to load :-( ).

Again, any help will be appreciated

Eeli K

@Eyal-Erez RoundButton seems to come from that project, and it's quite complicated. Also I've not used Controls 1 which it uses. You're on your own if no one here wants to debug that project. Maybe you should ask that project's developers?

Eyal Erez

@Eeli-K i thought that roundbutton is a "basic" QML type.
Anyway, i found the relvent QML(i hope): https://github.com/mavlink/qgroundcontrol/blob/Stable_V3.0/src/QmlControls/RoundButton.qml .

i can see the checked property, and i can see the color..
i asked also in the QGC forums.. I will update if i find the something(feel free to have a look :-) )

Eyal Erez

in the link there is this line:

color:          checked ? qgcPal.buttonHighlight : qgcPal.button

when i change this line to

color: "red"

the backcolor of the button is red.
So now the question is how can i use this new information inside the states that i have:

i want to make sure that when i'm in state "A" the button back-color is always transparent(qgcPal.button) and in state "B" is always highlighted(qgcPal.buttonHighlight).
I want this without consideration in the button even/odd number of clicks(that what i'm seeing now).

how can i do it??
Any help, even to a good manual about QML inherit properties will be welcome.

10x

Eeli K

@Eyal-Erez A quick'n'dirty solution is to replace the 'color' property binding in RoundButton's Component.onCompleted.

RoundButton {
id: button1
Component.onCompleted{
style.background.color = Qt.binding(function() { if (button1.state==="A") return qgcPal.button;/*etc.*/})
}

As I said, I haven't used Controls1 and haven't tested this with styles. But in general it works with complicated components where you want to override only few properties instead of writing everything from scratch or copy-pasting large code chunks.

Eyal Erez

I don't care about doing something quick'n'dirty for now, but when i try the code you suggested i'm getting : "Incorrectly specified signal assignment" on "Component.onCompleted" line.

the is the code i entered:

RoundButton {
	id:                 myRoundButton	
	state: _activeVehicle ? _activeVehicle.myBtnState :"A"
	states: [
		State {
			name: "A"
			PropertyChanges {
				target: myRoundButton                                                        
				onClicked : _activeVehicle.A(0) 				
			}
		},
		State {
			name: "B"
			PropertyChanges {
				target: myRoundButton
				onClicked: _activeVehicle.B(0)					                            				
				}
			},
		State {
			name: "C"
			PropertyChanges {
				target: myRoundButton
				enabled: false				
			}
		}
	]
	Component.onCompleted{
		style.background.color : Qt.binding(function()
		{
			if ( (this.state==="A") || (this.state==="C") )
				return qgcPal.button
			else//(this.state==="B")
				return qgcPal.buttonHighlight
		})
	 }
}

BTW, do you have any good/recommended resource to read/learn about this advanced QML abilities ?

Eeli K

@Eyal-Erez Oops, should be

Component.onCompleted: {

because it's a normal attached property signal handler. Component.onCompleted isn't advanced, it's mentioned and explained in Qt's docs. Using it like this to override one inner property which you otherwise should override by rewriting the whole component is something I found out and found working. If this a good or common thing to do, I don't know. I also don't know if in this case of Controls1 styles should be doing something else.

Eyal Erez

@Eeli-K ok not i don't get the error but i still don't get the wanted functionality :-(

I guess there is no other option but to make my "own" RoundButton.

Thanks for all the help and support