Keyboard and mouse does not work together to change the source image



  • Hi guys,

    I am struggling with a problem, I guess its not so difficult but I am not able to solve it. My experience with QML is very small. I will appreciate your help.

    I have three radio buttons as images. Focus moves among the radio buttons as I press the keys and so the buttons are highlighted. ( As focus of the radio button changes the source images also change so the radio button with the focus will be highlighted with an other image).

    Problem: When I interact with the mouse (see source code) the source (image) does not change any more.....no idea... while the source was changing before mouse interaction. I checked the in the debugger the source line is never reached after mouse interaction.

    I guess its not the right way to change to source image...Please help me to solve it or give me a suggestion for an alternative
    @
    Rectangle { //main container
    id: rectangle1
    x: 0
    y: 0

    width: 480
    height: 620
    color: "#ffffff"
    

    Item { // focus scope container
    id: focus_object
    focus : true

       Image { //  radio button 1
           id: rock
           x: 5
           y: 6
           fillMode: Image.PreserveAspectFit
           smooth: true
           focus:true
           source: focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
    
    
           KeyNavigation.right: pop
    
    
           MouseArea {
               anchors.fill: parent
               hoverEnabled: true
               onEntered: {
                   parent.source = "Radiobutton_unselected_highlighted.png"
               }
               onExited: {
                   parent.source = "Radiobutton_unselected.png"
               }
               onClicked:{
                }
           }
       }
    
       Image { // radio button 2
           id: pop
           x: 160
           y: 6
           width: 64
           height: 64
           fillMode: Image.PreserveAspectFit
           smooth: true
           source: focus ?  "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
    
    
    
    
           KeyNavigation.left: rock
    
           KeyNavigation.right: classic
    
           MouseArea {
               anchors.fill: parent
               hoverEnabled: true
               onEntered: {
                   parent.source = "Radiobutton_unselected_highlighted.png"
               }
               onExited: {
                   parent.source = "Radiobutton_unselected.png"
               }
               onClicked:{
    
               }
    
       }
       Image { // radio button 3
               id: classic
               x: 306
               y: 6
               width: 64
               height: 64
               fillMode: Image.PreserveAspectFit
               smooth: true
    
               source :  focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
               KeyNavigation.left: pop
    
               MouseArea {
                   anchors.fill: parent
                   hoverEnabled: true
                   onEntered: {
                       if (true == focus)
                       parent.source = "Radiobutton_unselected_highlighted.png"
    
                   }
                   onExited: {
                       parent.source = "Radiobutton_unselected.png"
                   }
                   onClicked:{
    
                   }
               }
           }
       }
    }
    

    }@



  • Hey,

    i don't know whats the problem with the not changing images by mouse over is. But have you thougt about to use a repeater or better a listview to generate a various number of radio buttons width a model file? you only have to define one radio button as delegate.

    For the Problem with the Images. Try to define two Images per Radio Button and change the visibilty of these both. Around these Images you should have a Item or a Rectangle. The Mousearea should be a child of these.



  • Thanks for the suggestions. I guess I did not explained my question well.

    The image changes when there are mouse events onEntered and onExited but once these events are occurred the following statement does not work anymore.

    @source: focus ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"@

    focus works fine (changes according to the logic) but the image does not change. Actually this statement is never reached (no idea). This statement was checked continuously by the compiler before the mouse event occurred (for the very first time). In my opinion the above statement is replaced by the statement in the mouse event.

    I will appreciate your help. I will defiantly go through listview



  • Actually in addition to this code I already have two images one over the other per radio button for the selected_radio_button which is supposed to do the same (replace by the selected_radio_button_highlighted). So in that case I would need 4 images per radio button (Radiobutton_unselected, Radiobutton_unselected_highlighted, selected_radio_button, selected_radio_button_highlighted). Right now I am just dealing with two images selected and unselected and I am replacing the sources with their highlighted images



  • I found the solution...
    @Rectangle {
    id: rectangle1
    x: 0
    y: 0

    width: 480
    height: 620
    color: "#ffffff"
    //source:  "background.png"
    

    FocusScope {
    id: focus_object
    focus : true
    property int focus_obj : 1

       Image {
           id: rock
           x: 5
           y: 6
           fillMode: Image.PreserveAspectFit
           smooth: true
           focus:true
           source: activeFocus || focus_object.focus_obj == 1 ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
    
           //KeyNavigation.right: pop
           Keys.onRightPressed: {
               focus_object.focus_obj = 2
               pop.forceActiveFocus()
           }
    
    
    
           MouseArea {
               anchors.fill: parent
               hoverEnabled: true
               onEntered: {
                   //parent.source = "Radiobutton_unselected_highlighted.png"
                   //parent.focus = true
                   parent.forceActiveFocus()
    
               }
               onExited: {
                   //parent.source : "Radiobutton_unselected.png"
                   switch(focus_object.focus_obj)
                   {
                        case 1:
                            rock.forceActiveFocus()
                            break
                        case 2:
                            pop.forceActiveFocus()
                            break
                        case 3:
                            classic.forceActiveFocus()
                            break
                   }
                   //parent.focus = false
               }
               onClicked:{
                 rock.forceActiveFocus()
                   focus_object.focus_obj = 1
                }
           }
       }
    
       Image {
           id: pop
           x: 160
           y: 6
           width: 64
           height: 64
           fillMode: Image.PreserveAspectFit
           smooth: true
           source: activeFocus || focus_object.focus_obj == 2 ?  "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
    
    
    
    
           //KeyNavigation.left: rock
           Keys.onLeftPressed: {
               rock.forceActiveFocus()
               focus_object.focus_obj = 1
           }
    
           //KeyNavigation.right: classic
           Keys.onRightPressed: {
               classic.forceActiveFocus()
               focus_object.focus_obj = 3
           }
    
           MouseArea {
               anchors.fill: parent
               hoverEnabled: true
               onEntered: {
                   //parent.source = "Radiobutton_unselected_highlighted.png"
                   //parent.focus = true
                   parent.forceActiveFocus()
               }
               onExited: {
                   //parent.source = "Radiobutton_unselected.png"
                   switch(focus_object.focus_obj)
                   {
                        case 1:
                            rock.forceActiveFocus()
                            break
                        case 2:
                            pop.forceActiveFocus()
                            break
                        case 3:
                            classic.forceActiveFocus()
                            break
                   }
                   //parent.focus = false
    
               }
               onClicked:{
                    pop.forceActiveFocus()
                   focus_object.focus_obj = 2
               }
    
            }
       }
       Image {
               id: classic
               x: 306
               y: 6
               width: 64
               height: 64
               fillMode: Image.PreserveAspectFit
               smooth: true
    
               source :  activeFocus || focus_object.focus_obj == 3 ? "Radiobutton_unselected_highlighted.png" : "Radiobutton_unselected.png"
               //KeyNavigation.left: pop
               Keys.onLeftPressed: {
                   pop.forceActiveFocus()
                   focus_object.focus_obj = 2
               }
    
               MouseArea {
                   anchors.fill: parent
                   hoverEnabled: true
                   onEntered: {
                       //if (true == focus)
                       //parent.source = "Radiobutton_unselected_highlighted.png"
                       //classic.foucs = true
                       parent.forceActiveFocus()
    
                   }
                   onExited: {
                       //parent.source = "Radiobutton_unselected.png"
                       //classic.focus = false
                       switch(focus_object.focus_obj)
                       {
                            case 1:
                                rock.forceActiveFocus()
                                break
                            case 2:
                                pop.forceActiveFocus()
                                break
                            case 3:
                                classic.forceActiveFocus()
                                break
                       }
                   }
                   onClicked:{
                        classic.forceActiveFocus()
                       focus_object.focus_obj = 3
                   }
               }//mouse area
         }//classic
    }//Focusscope
    

    }@


Log in to reply
 

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