Forums

OverviewV-Play 1 Support › Assigning calculated value to height property

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #7177

    Preston

    Hi

     

    In one of the scenes in my app, there are too many buttons to fit on the screen size.

    Therefore I would need to implement a scrollable view.

    I think the easiest way to do this is to implement a MultiTouchArea and enable the drag in the Y Axis.

    In order to do this, I have to make sure the MultiTouchArea’s height is long enough to contain/cover all of the buttons in the scene.

    I do not want to hard code this, as that would be clumsy.

    I’d rather calculate the height based on the number of buttons that will be displayed in the screen based on the json file read/parsed.

    This is the whole code:

    // import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
    import QtQuick 1.1
    import VPlay 1.0
    
    SceneBase {
    
        property bool onOrOff
        onOnOrOffChanged: {
            toggleSplBtn.color = (onOrOff == true) ? "red" : "darkblue"
        }
    
        Sound {
            id: soundChosen
        }
    
        SimpleButton {
            id: toggleSplBtn
            anchors.top: parent.top
            anchors.right: parent.right
    
            text: "Spell"
    
            Component.onCompleted: {
                if(onOrOff == true){
                    toggleSplBtn.color = "red"
                }else{
                    toggleSplBtn.color = "darkblue"
                }
            }
    
            onClicked: {
                onOrOff = !onOrOff
                console.debug(onOrOff)
            }
        }
    
        SimpleButton {
            anchors.left: parent.left
            anchors.bottom: parent.bottom
    
            text: "Back"
    
            onClicked: {
                console.debug("BACK TO MAIN MENU")
                window.state = "menu"
            }
        }
    
        Scene {
            id: movableScene
    
            MultiTouchArea {
                //anchors.fill: parent
                width: parent.width
                height: parent.height
    
                //NOTE: I want to set height above based on the calculation below
    
                enabled: true
                multiTouch.target: parent
                multiTouch.dragAxis: MultiTouch.YAxis
                multiTouch.maximumY: 0
                onPressed: {
                    console.debug("multi touch for movableScene")
                }
            }
    
            EntityManager {
                id: entityManager
                entityContainer: movableScene
            }
    
            property url jsonFile: "json/ThirtyConsonantsWithVowels.json"
    
            Component {
                    id: btnComp
    
                    EntityBase {
    
                        id: entityBaseX
    
                        property int index: 1
                        property string character
                        property double spacing: 50
                        property double widthValue: 40
                        property double heightValue: 40
                        property double numOfCol: 8
                        property double widthOfSet: numOfCol * spacing
    
                        entityId: index
                        entityType: "buttonEntity"
                        SimpleButton {
                            id: btn
    
                            property int col: index % numOfCol + 1
                            property int row: Math.floor(index / numOfCol) + 1
    
                            x: col * spacing + (parent.parent.width -  widthOfSet)/2 - spacing + (spacing - widthValue)/2
                            y: row * spacing
    
                            width: widthValue
                            height: heightValue
    
                            //text: col + "/" + row
                            text: character
    
                            onClicked: {
                                console.debug("button " + btn.text + " clicked")
                                if(onOrOff){
                                    soundChosen.source = "snd/" + btn.text + "-complete" + ".wav"
                                    soundChosen.play()
    
                                }else{
                                    soundChosen.source = "snd/" + btn.text + ".wav"
                                    soundChosen.play()
    
                                }
                                console.debug(soundChosen.source)
                            }
                        }
                        Component.onCompleted: console.debug("btn created " + index)
                    }
            }
    
            Component.onCompleted: {
                console.debug("consonantsPlusVowelsScene - Component.onCompleted")
                console.debug(jsonFile)
                console.debug("inside consonantsPlusVowels")
                var data = fileUtils.readFile(jsonFile)
                console.debug(data)
    
                var jsonObj = JSON.parse(data)
                console.debug("jsonObj")
                console.debug(jsonObj)
    
                for(var i = 0; i < jsonObj.length; i++)
                {
                    console.debug(jsonObj[i])
                    entityManager.createEntityFromComponentWithProperties(btnComp, {index: i, character: jsonObj[i]})
                    console.debug("create button")
                }
    
    
    
                //console.debug("CHECK CHECK CHECK CHECK")
                //console.debug("entityBaseX.numOfCol")
                //console.debug(entityBaseX.numOfCol)
                //var numOfRow = jsonObj.length / entityBaseX.numOfCol
                //console.debug("numOfRow is below " + numOfRow)
                //console.debug(numOfRow)
                //movableScene.height = numOfRow * btn.spacing
                //movableScene.height = 100
            }
        }
    }
    

     

     

    The main area of concern in the above code is:

    MultiTouchArea {
                //anchors.fill: parent
                width: parent.width
                height: parent.height
    
                //NOTE: I want to set height above based on the calculation below
    
                enabled: true
                multiTouch.target: parent
                multiTouch.dragAxis: MultiTouch.YAxis
                multiTouch.maximumY: 0
                onPressed: {
                    console.debug("multi touch for movableScene")
                }
            }
    

    But instead of “height: parent.height” above, I would like to assign a value to height that is based on a calculation done inside the Component.onCompleted block.

     

    Is this possible???

    How?

     

    Thank you

     

     

     

     

     

    #7181

    Christian
    V-Play Team

    Hi bliss,

    I think the best way to solve this would be to create a new Item element in your Scene, which is bigger than the scene (see also this post) and then put the MultiTouchArea inside this element. The width/height of the “wrapper” element can be calculated by the number of buttons you create.

    I also think you should look into the Flickable element, which can handle scrolling by itself. This could make your code a bit easier 😉 (You could use a Flickable inside your scene which contains the buttons.)

    If you do this, make sure to set the entityContainer of EntityManager to the correct container item to place the buttons into.

    Cheers, Chrisu

    • This reply was modified 4 years, 4 months ago by  Chrisu.
Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support