aboutsummaryrefslogtreecommitdiffstats
path: root/app/qml/TbtBoard.qml
blob: ccec5fd50bf520a5727f14de5e301fc3d80b9570 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
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
    }
}