QML Code Help

[huh]

Should probably jump on IRC for this, but trying this first...  spent a couple hours trying to figure out how to get this to work and now asking for help:

http://imgur.com/4AOsG

I have a simple pathview at the top that loads the different menu options into a (currently) ellipse shape where the icons at the front are larger and visible and get smaller and transparent as they are rotated to the back.  Still playing with different shapes and for now am just using the icons from the basic layout for convenience.  

My issue is that I would like the submenu options (e.g. "TV", "Audio", "Video", etc) buttons to appear in the middle of the screen when the appropriate menu is at the forefront of the pathview.  In other works, if the user rotates the pathview to "Media", I want the media options to be presented in the middle of the screen.

Right now the main menu items are pulled from a separate ContactMenu.qml file,  but I think my issue is at the bottom of this code in the MouseArea portion.  Clearly I don't have any code to populate a space as I was for now just trying to change the text color of the menu items to make sure I understood how the mouse area code works:

Code: [Select]

       Rectangle {
            width: scaleX(100)/3; height: scaleY(100)/4
            anchors.horizontalCenter: stage.horizontalCenter
            color: "transparent"

            Component {
                id: delegate
                Item {
                    width: 80; height: 80
                    scale: PathView.iconScale
                    opacity: PathView.iconOpacity
                    Column {
                        Image { anchors.horizontalCenter: nameText.horizontalCenter; width: 64; height: 64; source: icon }
                        Text { id: nameText; text: name; font.pointSize: 16; color: "white"}
                    }
                }
            }

            PathView {
                Keys.onRightPressed: if (!moving) { incrementCurrentIndex(); console.log(moving) }
                Keys.onLeftPressed: if (!moving) decrementCurrentIndex()
                anchors.fill: parent
                model: ContactModel {}
                delegate: delegate
                path: Path {
                    startX: style.orbiterW/6-25; startY: 100
                    PathAttribute { name: "iconScale"; value: 1.5 }
                    PathAttribute { name: "iconOpacity"; value: 1.0 }
                    PathQuad { x: style.orbiterW/6-25; y: 0; controlX: style.orbiterW/6-style.orbiterW/1.5; controlY: 50 }
                    PathAttribute { name: "iconScale"; value: 0.3 }
                    PathAttribute { name: "iconOpacity"; value: 0.0 }
//                    PathPercent { value: 0.50 }
                    PathQuad { x: style.orbiterW/6-25; y: 100; controlX: style.orbiterW/6+style.orbiterW/1.5; controlY: 50 }
//                    PathPercent { value: 0.50 }
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: { delegate.nameText.color = 'red' }
                }
            }
        }

Any ideas?  

TIA-

[tschak909]

golgoj4 may be a bit better at answering this, as you seem to be using some of his structures for your purposes...

I do see that you have anchors.fill: parent ... This causes the qml item in question to take on the dimensions of its parent, both in its size, and its position. Ponder this.

-Thom

[huh]

Hmm... going to give up on getting this centered for now and going to work on a weather plugin...  this is about the current status:
http://imgur.com/QWRrw

As you rotate the icons at the top to go to the different main menu items (media, sound, telephony, etc) it loads up the submenu items that apply to 1) that main menu item, 2) that user and 3) that room.

As you can see, the icons at the bottom aren't centered...  I've also found that my circle is too large and it makes it difficult to switch between main menu items, so looking to change that.

The solution to my question before is here:

Code: [Select]

            PathView {
                anchors.fill: parent
                anchors.horizontalCenter: parent.horizontalCenter
//                model: ContactModel {}
                model: contactModel
                delegate: delegate

                path: Path {
                    startX: style.orbiterW/6-25; startY: 100
                    PathAttribute { name: "iconScale"; value: 1.5 }
                    PathAttribute { name: "iconOpacity"; value: 1.0 }
                    PathQuad { x: style.orbiterW/6-25; y: 0; controlX: style.orbiterW/6-style.orbiterW/1.5; controlY: 50 }
                    PathAttribute { name: "iconScale"; value: 0.3 }
                    PathAttribute { name: "iconOpacity"; value: 0.0 }
//                    PathPercent { value: 0.50 }
                    PathQuad { x: style.orbiterW/6-25; y: 100; controlX: style.orbiterW/6+style.orbiterW/1.5; controlY: 50 }
//                    PathPercent { value: 0.50 }

                }

                onCurrentIndexChanged: {
                    console.log(currentIndex, contactModel.get(currentIndex).location);
                    menuLoader.source = contactModel.get(currentIndex).location;
                }
The last bit especially takes your current position (index) in the pathview (as an integer) and looks to the list items to see which item to pull up:

Code: [Select]

                onCurrentIndexChanged: {
                    console.log(currentIndex, contactModel.get(currentIndex).location);
                    menuLoader.source = contactModel.get(currentIndex).location;
                }

[golgoj4]

off the top of my head, a js boolean seems like it would work.
some thoughts

add a [STATE] for the thing you want to show up. When it hits the magic spot, it should be trivial to get the menu submenu to show by just telling the menu what state you want to see. Hey, thats a pretty good idea. i might use that

as for the pathview, nab merkur2k as he originally implemented it and i couldnt figure it quite out.


hope that helps
golgoj4