import QtQuick 2.0 //turn by turn board view Item { id: tbt_board property bool showboard: false // the backgroud image(the small one) Image { id: whitebackgroud visible: !showboard anchors.top: parent.top width:turnDirection.width height:turnDirection.height + distance.height source: "qrc:simple-background-white.png" z: 1 } // turn direction arrow board image(the small one) Image { id: turnDirection visible: !showboard anchors.top: parent.top z: 3 } // the distance to the next crossing road(textview)(the small one) Text { id: distance visible: !showboard anchors.top: turnDirection.bottom z: 3 font.pixelSize: 23 width:turnDirection.width horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.family: "Lato" font.weight: Font.Light color: "#000000" } // the backgroud image Image { id: backgroudBoard visible: showboard anchors.fill: parent source: "qrc:simple-bottom-background-black.png" z: 1 } // turn direction arrow board image Image { id: turnDirectionBoard visible: showboard width : parent.height - turnInstructionsBoard.height - distanceBoard.height height: parent.height - turnInstructionsBoard.height - distanceBoard.height anchors.centerIn: parent z: 3 } // the distance to the next crossing road(textview) Text { id: distanceBoard visible: showboard anchors.bottom: turnInstructionsBoard.top z: 3 font.pixelSize: 45 width:tbt_board.width horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.family: "Lato" font.weight: Font.Light color: "#FFFFFF" } // the description of the next crossing road(textview) Text { id: turnInstructionsBoard visible: showboard anchors.bottom: parent.bottom z: 3 font.pixelSize: 30 width:tbt_board.width wrapMode: Text.Wrap horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.family: "Lato" font.weight: Font.Light color: "#FFFFFF" } // the cases of direction arrow board states: [ State { name: "arriveDest" //arrive the destination PropertyChanges { target: turnDirectionBoard; source: "qrc:destination_full.png" } PropertyChanges { target: turnDirection; source: "qrc:destination.png" } }, State { name: "0" // NoDirection PropertyChanges { target: turnDirectionBoard; source: "" } PropertyChanges { target: turnDirection; source: "" } }, State { name: "1" // DirectionForward PropertyChanges { target: turnDirectionBoard; source: "" } PropertyChanges { target: turnDirection; source: "" } }, State { name: "2" // DirectionBearRight PropertyChanges { target: turnDirectionBoard; source: "" } PropertyChanges { target: turnDirection; source: "" } }, State { name: "3" // DirectionLightRight PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-30-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-r-30-large.png" } }, State { name: "4" // DirectionRight PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-45-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-r-45-large.png" } }, State { name: "5" // DirectionHardRight PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-75-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-r-75-large.png" } }, State { name: "6" // DirectionUTurnRight //TODO modify qtlocation U-Turn best.For test, change app source. PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-180-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-l-180-large.png" } }, State { name: "7" // DirectionUTurnLeft //TODO modify qtlocation U-Turn best.For test, change app source. PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-180-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-r-180-large.png" } }, State { name: "8" // DirectionHardLeft PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-75-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-l-75-large.png" } }, State { name: "9" // DirectionLeft PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-45-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-l-45-large.png" } }, State { name: "10" // DirectionLightLeft PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-30-full.png" } PropertyChanges { target: turnDirection; source: "qrc:arrow-l-30-large.png" } }, State { name: "11" // DirectionBearLeft PropertyChanges { target: turnDirectionBoard; source: "" } PropertyChanges { target: turnDirection; source: "" } } ] // Set distance function do_setDistance(dis) { if(dis > 1000) { distanceBoard.text = (dis / 1000).toFixed(1) + " km" } else { distanceBoard.text = dis + " m" } if(dis > 0) { distance.text = (((dis/100).toFixed(0))*100) +"m" } else { distance.text = "" } } //set turnInstructions function do_setTurnInstructions(turnInstructions) { turnInstructionsBoard.text = turnInstructions } //show the tbt board(the big one) function do_showTbtboard(mvisible) { showboard = mvisible } }