diff options
Diffstat (limited to 'app/qml')
| -rw-r--r-- | app/qml/Main.qml | 25 | ||||
| -rw-r--r-- | app/qml/MapWindow.qml | 283 | ||||
| -rw-r--r-- | app/qml/TbtBoard.qml | 187 | ||||
| -rw-r--r-- | app/qml/qmldir | 2 |
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 |