This is a application for display turn by run navigation information.halibut_8.0.0halibut_7.99.3halibut_7.99.2halibut_7.99.1halibut/8.0.0halibut/7.99.3halibut/7.99.2halibut/7.99.18.0.07.99.37.99.27.99.1

Change-Id: I0866a7d9ffa347c0935b4d00259ad1a74cd00d6e
Signed-off-by: wanglu <wang_lu@dl.cn.nexty-ele.com>

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