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

[naki]

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:{

               }
           }
       }
   }
}

}@

[wolfer]

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.

[naki]

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

[naki]

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

[naki]

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

}@