Forums

OverviewFelgo 2 Support (Qt 5) › TimePicker qml from demoapp

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #18547

    Bas

    hi i used TimePicker in my own app, but the app stops working.

    looks like it is in a loop

    i don’t know what is causing this.

            //--timepicker
            TimePicker {
                id:tpick
    //            anchors.left:parent.left
    //            anchors.top: parent.top
    //            anchors.right: parent.right
    //            anchors.bottom: parent.bottom
    //            anchors.bottomMargin: btn.height + 20
                width: parent.width
                height: parent.height - 20
                fontFamily: latoNorm.name
    
            }
    

     

    #18549

    Alex
    Felgo Team

    Hi Bas,

    what is its parent component? Does replacing the TimePicker with an Item (and removing the fonFamily) work or does it also stop working?

    Cheers,
    Alex

    #18551

    Bas

    when i wait after a while the app starts

    #18552

    Alex
    Felgo Team

    Is it possible that the TimePicker is a child of a Column, Row or similar? E.g. the width of a Row, if not set explicitly, is determined by the width of it’s children, now if the chldren’s width is set to the width of the Row you have possibly created a loop.

    #18553

    Bas

    parent item is of type  Item

    #18554

    Bas
    import Felgo 3.0
    import QtQuick 2.0
    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    import "../../common"
    
    Item {
    
        id: item
    
        visible: false
    
        property alias titleText: title.text
        property date nowDate: new Date()
    
        signal close(string result)
    
        state : "date"
    
        Rectangle {
            z:100
            anchors.left: parent.left
            anchors.leftMargin: ( gameWindow.portrait ? ( gameWindow.isTablet ? 20 : 40 ) : 20 )
            anchors.top: parent.top
            anchors.topMargin: ( gameWindow.portrait ? ( gameWindow.isTablet ? 150 : 230 ) : 150 )
            anchors.right: parent.right
            anchors.rightMargin: ( gameWindow.portrait ? ( gameWindow.isTablet ? 20 : 40 ) : 20 )
            anchors.bottom: parent.bottom
            anchors.bottomMargin: ( gameWindow.portrait ? ( gameWindow.isTablet ? 20 : 40 ) : 20 )
            radius:10
    
            //-- title
            Text {
                id:title
                anchors.top: parent.top
                anchors.topMargin: ( gameWindow.portrait ? ( gameWindow.isTablet ? 20 : 40 ) : 20 )
                anchors.left: parent.left
                anchors.leftMargin: ( gameWindow.portrait ? ( gameWindow.isTablet ? 20 : 40 ) : 20 )
    //            x:( gameWindow.portrait ? ( gameWindow.isTablet ? 20 : 40 ) : 20 )
                horizontalAlignment: Text.AlignLeft
                font.pixelSize: ( gameWindow.portrait ? ( gameWindow.isTablet ? 24 : 42 ) : 24 )
                color: "#0099ff"
                font.family: latoNorm.name
            }
    
            //-- date
            Calendar {
                id:cal
                anchors.left:parent.left
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.bottomMargin: btn.height + 20
                minimumDate: new Date(nowDate.getFullYear()-1,0,1)
                maximumDate: new Date()
            }
    
            //--timepicker
            TimePicker {
                id:tpick
    //            anchors.left:parent.left
    //            anchors.top: parent.top
    //            anchors.right: parent.right
    //            anchors.bottom: parent.bottom
    //            anchors.bottomMargin: btn.height + 20
                width: parent.width
                height: parent.height - 20
                fontFamily: latoNorm.name
    
            }
    
            StdButton {
                id:btn
                anchors.bottom:parent.bottom
                anchors.bottomMargin: 20
                anchors.left:  parent.left
                anchors.leftMargin: 20
                text: "Voer in"
                textColor:"#ffffff"
                color: "#0099ff"
                onClicked: {
                    if( item.state == "date") {
                        item.state = "time"
                    } else {
                        closeOL()
                    }
                }
            }
        }
    
        function closeOL() {
            close( "")
            visible = false
        }
    
        Rectangle {
            anchors.fill: parent
            color:"#000000"
            opacity: 0.5
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: {}
        }
    
        states: [
               State {
                   name: "date"
    //               PropertyChanges { target: cal; visible:true}
    //               PropertyChanges { target: tpick; visible:false}
               },
               State {
                   name: "time"
    //               PropertyChanges { target: cal; visible:false}
    //               PropertyChanges { target: tpick; visible:true}
               }
           ]
    
    }
    

     

    #18555

    Bas

    and the parent of that is a Scene.

    and i use the above code like this:

     

        OverlayDateTime {
            id:olDateTimeInvoer
            z:1000
            anchors.fill: gameWindowAnchorItem
            onClose: {
            }
        }
    

     

    #18556

    Bas

    i use an older project, when creating a new project i don’t have it.

    #18557

    Bas

    when i decrease the number for example:

        model: 960
    

    then it is faster.

    so the hight number is for getting over 24:00

    #18559

    Günther
    Felgo Team

    Hi Bas,

    if you don’t have the issue in a new project it seems related to your older project right?

    So maybe you can find out what causes the picker to be slower in your project?

    Of course you can also decrease the model number if it works better for you.

    Best,
    Günther

    #18569

    Bas

    i changed the code a bit and ended up with this:

    import QtQuick 2.5
    
    Rectangle {
        id: timePicker
        color: "#fff"
        clip: true
        property int numberOfItems: 7
        property string fontFamily
        //  property var time: ({hour: 0, minute: 0})
        property int hour:0
        property int minute:0
    
        property int space: 10
    
        Rectangle {
            width: parent.width
            height: 1
            y: (parent.height - listViewHour.delegateHeight) / 2
            color: "#D0D0D0"
        }
        Rectangle {
            width: parent.width
            height: 1
            y: (parent.height - listViewHour.delegateHeight) / 2 + listViewHour.delegateHeight
            color: "#D0D0D0"
        }
    
        ListView {
            id: listViewHour
            x: (parent.width>>2) - (space>>1)
            width: parent.width>>2
            y: -parent.height * 0.5
            height: parent.height * 2
            property int delegateHeight: height / numberOfItems
            model: 24
            spacing: 1
            highlightRangeMode: ListView.StrictlyEnforceRange
            preferredHighlightBegin: (height - delegateHeight) / 2
            preferredHighlightEnd: (height + delegateHeight) / 2
            delegate: Item {
                id: contentItem
                width: listViewHour.width
                height: listViewHour.delegateHeight
                Rectangle {
                    anchors.fill: parent
                    color: "#3333ee33"
                    visible: false
                }
                Text {
                    id: innerText
                    property int hour: index
                    text: leadingZero(hour)
                    //        anchors.centerIn: parent
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right:parent.right
                    font.pixelSize: listViewHour.delegateHeight * 0.8
                    font.family: fontFamily
                    color: contentItem.ListView.isCurrentItem ? "black" : "#999"
                    transform: [
                        Rotation {
                            origin.x: innerText.width / 2
                            origin.y: innerText.height / 2
                            axis { x: 1; y: 0; z: 0 }
                            angle: {
                                var middle = contentItem.ListView.view.contentY - contentItem.y + contentItem.ListView.view.height / 2
                                var calculated = (middle - contentItem.height / 2) / contentItem.height * 40
                                if (calculated < -90)
                                    return -90
                                else if (calculated > 90)
                                    return 90
                                else
                                    return calculated
                            }
                        },
                        Scale {
                            origin.x: innerText.width
                            origin.y: innerText.height / 2
                            xScale: {
                                // scaled 1 in middle position -> 0 when reaching edges
                                var scaled = (contentItem.y - contentItem.ListView.view.contentY + contentItem.height * 0.5) / contentItem.ListView.view.height * 2
                                if (scaled > 1) scaled = 2 - scaled
                                return Math.max(0, scaled)
                            }
                            yScale: xScale
                        },
                        Translate {
                            y: {
                                var scaled = (contentItem.y - contentItem.ListView.view.contentY + contentItem.height * 0.5) / contentItem.ListView.view.height * 2
                                scaled = Math.max(0, scaled)
                                scaled = 1 - scaled
                                return scaled * scaled * scaled * contentItem.height * 3
                            }
                        }
                    ]
                }
            }
            Component.onCompleted: {
                // Scrolls to middle of list
                //      positionViewAtIndex(model * 0.5 - (listView.numberOfItems > 2 ? 1 : 0), ListView.SnapPosition)
            }
            onMovementEnded: {
                hour = currentIndex
                console.debug("TIME IS:", hour + ":" + minute)
                //      timePicker.time = {hour: hour, minute: minute}
            }
        }
        //-- :
        Rectangle {
            anchors.centerIn: parent
            anchors.verticalCenterOffset: -14
            width:8
            height:8
            color:"black"
            radius: 4
        }
        Rectangle {
            anchors.centerIn: parent
            anchors.verticalCenterOffset: 6
            width:8
            height:8
            color:"black"
            radius: 4
        }
    
        //-- minutes
        ListView {
            id: listViewMinute
            x: (parent.width>>1) + (space>>1)
            width: parent.width>>2
            y: -parent.height * 0.5
            height: parent.height * 2
            property int delegateHeight: height / numberOfItems
            model: (65/5)
            spacing: 1
            highlightRangeMode: ListView.StrictlyEnforceRange
            preferredHighlightBegin: (height - delegateHeight) / 2
            preferredHighlightEnd: (height + delegateHeight) / 2
            delegate: Item {
                id: contentItem2
                width: listViewMinute.width
                height: listViewMinute.delegateHeight
                Rectangle {
                    anchors.fill: parent
                    color: "#3333ee33"
                    visible: false
                }
                Text {
                    id: innerText2
                    property int minute: (index*5) % 60
                    text: leadingZero(minute)
                    //        anchors.centerIn: parent
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    font.pixelSize: listViewMinute.delegateHeight * 0.8
                    font.family: fontFamily
                    color: contentItem2.ListView.isCurrentItem ? "black" : "#999"
                    transform: [
                        Rotation {
                            origin.x: innerText2.width / 2
                            origin.y: innerText2.height / 2
                            axis { x: 1; y: 0; z: 0 }
                            angle: {
                                var middle = contentItem2.ListView.view.contentY - contentItem2.y + contentItem2.ListView.view.height / 2
                                var calculated = (middle - contentItem2.height / 2) / contentItem2.height * 40
                                if (calculated < -90)
                                    return -90
                                else if (calculated > 90)
                                    return 90
                                else
                                    return calculated
                            }
                        },
                        Scale {
                            origin.x:0
                            origin.y: innerText2.height / 2
                            xScale: {
                                // scaled 1 in middle position -> 0 when reaching edges
                                var scaled = (contentItem2.y - contentItem2.ListView.view.contentY + contentItem2.height * 0.5) / contentItem2.ListView.view.height * 2
                                if (scaled > 1) scaled = 2 - scaled
                                return Math.max(0, scaled)
                            }
                            yScale: xScale
                        },
                        Translate {
                            y: {
                                var scaled = (contentItem2.y - contentItem2.ListView.view.contentY + contentItem2.height * 0.5) / contentItem2.ListView.view.height * 2
                                scaled = Math.max(0, scaled)
                                scaled = 1 - scaled
                                return scaled * scaled * scaled * contentItem2.height * 3
                            }
                        }
                    ]
                }
            }
            Component.onCompleted: {
                // Scrolls to middle of list
                //      positionViewAtIndex(model * 0.5 - (listView.numberOfItems > 2 ? 1 : 0), ListView.SnapPosition)
            }
            onMovementEnded: {
                minute = (currentIndex * 5) % 60
                console.debug("TIME IS:", hour + ":" + minute)
                //      timePicker.time = {hour: hour, minute: minute}
            }
        }
    
        function setTime(newTime) {
            //    listViewHour.positionViewAtIndex(newTime && newTime.hour * 4 + newTime.minute / 15 || 0, ListView.Center)
            timePicker.time = newTime
        }
        function leadingZero(number) {
            return ('00' + number).slice(-2)
        }
    }
    

     

     

Viewing 11 posts - 1 through 11 (of 11 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