QML Round button background light



  • 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



  • @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.



  • @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.



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



  • 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.



  • @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.



  • @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



  • @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?



  • @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 :-) )



  • 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



  • @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.



  • 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 ?



  • @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.



  • @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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.