aboutsummaryrefslogtreecommitdiffstats
path: root/app/qml
diff options
context:
space:
mode:
Diffstat (limited to 'app/qml')
-rw-r--r--app/qml/Main.qml25
-rw-r--r--app/qml/MapWindow.qml283
-rw-r--r--app/qml/TbtBoard.qml187
-rw-r--r--app/qml/qmldir2
4 files changed, 497 insertions, 0 deletions
diff --git a/app/qml/Main.qml b/app/qml/Main.qml
new file mode 100644
index 0000000..4139cb9
--- /dev/null
+++ b/app/qml/Main.qml
@@ -0,0 +1,25 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.2
+
+import "qrc:/qml"
+
+ApplicationWindow {
+ id: window
+
+ title: "Turn By Turn Navigation Demo"
+ height: 720
+ width: 640
+ visible: true
+
+ Item {
+ anchors.centerIn: parent
+ width: parent.width
+ height: parent.height
+
+ MapWindow {
+ id:mapwindow
+ anchors.fill: parent
+ objectName: "mapwindow"
+ }
+ }
+}
diff --git a/app/qml/MapWindow.qml b/app/qml/MapWindow.qml
new file mode 100644
index 0000000..8a41390
--- /dev/null
+++ b/app/qml/MapWindow.qml
@@ -0,0 +1,283 @@
+import QtLocation 5.9
+import QtPositioning 5.0
+import QtQuick 2.0
+
+import com.mapbox.cheap_ruler 1.0
+
+Item {
+ id: mapWindow
+
+ property int disOffset: 70
+ property real rotateAngle: 0
+ property var startPoint
+ property var endPoint
+
+ //turn by turn board view
+ TbtBoard {
+ id: tbt_board
+ z: 1
+ visible: false
+ anchors.fill: parent
+ }
+
+ //mapview and route views
+ Map {
+ id: map
+ anchors.fill: parent
+
+ plugin: Plugin {
+ name: "mapboxgl"
+
+ PluginParameter {
+ name: "mapboxgl.mapping.items.insert_before"
+ value: "road-label-small"
+ }
+
+ PluginParameter {
+ name: "mapboxgl.mapping.additional_style_urls"
+ value: "mapbox://styles/mapbox/streets-v9"
+ }
+
+ PluginParameter {
+ name: "mapboxgl.access_token"
+ value: fileOperation.getMapAccessToken()
+ }
+
+ PluginParameter {
+ name: "mapboxgl.mapping.cache.directory"
+ value: "/home/0/app-data/navigation/"
+ }
+ }
+
+ center: ruler.currentPosition
+ zoomLevel: 20
+ tilt: 60
+ gesture.acceptedGestures:MapGestureArea.NoGesture
+ copyrightsVisible: false
+
+ RotationAnimation on bearing {
+ id: bearingAnimation
+
+ duration: 250
+ alwaysRunToEnd: false
+ direction: RotationAnimation.Shortest
+ running: true
+ }
+
+ Location {
+ id: previousLocation
+ coordinate: QtPositioning.coordinate(0, 0);
+ }
+
+ onCenterChanged: {
+ if (previousLocation.coordinate === center)
+ return;
+
+ bearingAnimation.to = previousLocation.coordinate.azimuthTo(center);
+ bearingAnimation.start();
+
+ previousLocation.coordinate = center;
+ }
+
+ MapQuickItem {
+ id: startMarker
+
+ sourceItem: Image {
+ id: greenMarker
+ source: "qrc:///marker-green.png"
+ }
+ anchorPoint.x: greenMarker.width / 2
+ anchorPoint.y: greenMarker.height / 2
+ }
+
+ MapQuickItem {
+ id: endMarker
+
+ sourceItem: Image {
+ id: redMarker
+ source: "qrc:///marker-end.png"
+ }
+ anchorPoint.x: redMarker.width / 2
+ anchorPoint.y: redMarker.height / 2
+ }
+
+ MapItemView {
+ model: routeModel
+
+ delegate: MapRoute {
+ route: routeData
+ line.color: "#6b43a1"
+ line.width: map.zoomLevel - 5
+ opacity: (index == 0) ? 1.0 : 0.3
+
+ onRouteChanged: {
+ ruler.path = routeData.path;
+ }
+ }
+ }
+
+ MapQuickItem {
+ zoomLevel: map.zoomLevel
+
+ sourceItem: Image {
+ id: carMarker
+ source: "qrc:///car-marker.png"
+ transform: Rotation {
+ origin.x: carMarker.width / 2;
+ origin.y: carMarker.height / 2;
+ angle: rotateAngle
+ }
+ }
+
+ coordinate: ruler.currentPosition
+ anchorPoint.x: carMarker.width / 2
+ anchorPoint.y: carMarker.height / 2
+
+ Location {
+ id: previousCarLocation
+ coordinate: QtPositioning.coordinate(0, 0);
+ }
+
+ onCoordinateChanged: {
+ if(coordinate === mapWindow.startPoint)
+ return;
+ rotateAngle = previousCarLocation.coordinate.azimuthTo(coordinate);
+ previousCarLocation.coordinate = coordinate;
+ }
+ }
+
+ //add route view in the map
+ function updateRoute() {
+ routeQuery.clearWaypoints();
+ routeQuery.addWaypoint(startMarker.coordinate);
+ routeQuery.addWaypoint(endMarker.coordinate);
+ map.addMapItem(startMarker)
+ map.addMapItem(endMarker)
+ }
+
+ //clear route view in the map
+ function clearRoute() {
+ routeQuery.clearWaypoints();
+ routeModel.reset();
+ map.removeMapItem(startMarker)
+ map.removeMapItem(endMarker)
+ }
+
+ CheapRuler {
+ id: ruler
+
+ onCurrentDistanceChanged: {
+ var total = 0;
+ var i = 0;
+ var alldistance = ruler.distance * 1000;
+
+ if((routeModel.status === RouteModel.Ready)
+ && (routeModel.count === 1))
+ {
+ // XXX: Use car speed in meters to pre-warn the turn instruction
+ while (total < ruler.currentDistance && i < routeModel.get(0).segments.length)
+ {
+ total += routeModel.get(0).segments[i++].maneuver.distanceToNextInstruction;
+ }
+
+ //show the tbt board(it will be always show when demo start)
+ tbt_board.visible = true
+
+ // Set turn instruction
+ tbt_board.do_setTurnInstructions(routeModel.get(0).segments[i].maneuver.instructionText)
+ tbt_board.state = routeModel.get(0).segments[i].maneuver.direction
+
+ //when goto the last instruction,set the states to "arriveDest"
+ if(i >= (routeModel.get(0).segments.length-1))
+ {
+ total = alldistance;
+ tbt_board.state = "arriveDest";
+ }
+
+ var dis = (total - ruler.currentDistance).toFixed(1);
+
+ // Set distance
+ tbt_board.do_setDistance(dis)
+
+ // Set board status
+ if(dis < mapWindow.disOffset && i < routeModel.get(0).segments.length)
+ {
+ //show the tbt board(the big one)
+ tbt_board.do_showTbtboard(true)
+ }
+ else
+ {
+ //disvisible the tbt board(the big one)
+ tbt_board.do_showTbtboard(false)
+ }
+ }
+ }
+ }
+ }
+
+ //the route view display by RouteModel
+ RouteModel {
+ id: routeModel
+
+ autoUpdate: true
+ query: routeQuery
+
+ plugin: Plugin {
+ name: "mapbox"
+
+ // Development access token, do not use in production.
+ PluginParameter {
+ name: "mapbox.access_token"
+ value: fileOperation.getMapAccessToken()
+ }
+ }
+ }
+
+ RouteQuery {
+ id: routeQuery
+ }
+
+ Component.onCompleted: {
+ //request the route info when map load finish
+ if (ruler) {
+ ruler.initRouteInfo();
+ ruler.setCurrentPosition(fileOperation.getStartLatitude(), fileOperation.getStartLongitute());
+ }
+ }
+
+ //the functions can be called by outside
+ //add route signal function
+ function do_addRoutePoint(poi_Lat_s, poi_Lon_s, poi_Lat_e, poi_Lon_e) {
+ //set the startPoint and endPoint
+ startPoint= QtPositioning.coordinate(poi_Lat_s,poi_Lon_s);
+ endPoint = QtPositioning.coordinate(poi_Lat_e,poi_Lon_e);
+ startMarker.coordinate = startPoint;
+ endMarker.coordinate = endPoint;
+ //update the route view
+ if (map) {
+ map.updateRoute();
+ }
+ }
+
+ //set the current position
+ function do_setCoordinate(latitude,longitude,direction,distance) {
+ ruler.setCurrentPosition(latitude, longitude);
+ ruler.setCurrentDistance(distance);
+ }
+
+ //stop navidemo signal
+ function do_stopnavidemo() {
+ //disvisible the tbt board
+ tbt_board.visible = false
+ //clear the routeview
+ if (map) {
+ map.clearRoute();
+ }
+ }
+
+ //arrvice the destination signal
+ function do_arrivedest(){
+ //disvisible the tbt board
+ tbt_board.visible = false
+ }
+}
diff --git a/app/qml/TbtBoard.qml b/app/qml/TbtBoard.qml
new file mode 100644
index 0000000..cf6f537
--- /dev/null
+++ b/app/qml/TbtBoard.qml
@@ -0,0 +1,187 @@
+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"
+ }
+
+ distance.text = (((dis/100).toFixed(0))*100) +"m"
+ }
+
+ //set turnInstructions
+ function do_setTurnInstructions(turnInstructions) {
+ turnInstructionsBoard.text = turnInstructions
+ }
+
+ //show the tbt board(the big one)
+ function do_showTbtboard(mvisible) {
+ showboard = mvisible
+ }
+}
diff --git a/app/qml/qmldir b/app/qml/qmldir
new file mode 100644
index 0000000..7bbd751
--- /dev/null
+++ b/app/qml/qmldir
@@ -0,0 +1,2 @@
+MapWindow 1.0 MapWindow.qml
+TbtBoard 1.0 TbtBoard.qml