summaryrefslogtreecommitdiffstats
path: root/app/qml/MapWindow.qml
diff options
context:
space:
mode:
Diffstat (limited to 'app/qml/MapWindow.qml')
-rw-r--r--app/qml/MapWindow.qml434
1 files changed, 434 insertions, 0 deletions
diff --git a/app/qml/MapWindow.qml b/app/qml/MapWindow.qml
new file mode 100644
index 0000000..3772c31
--- /dev/null
+++ b/app/qml/MapWindow.qml
@@ -0,0 +1,434 @@
+import QtLocation 5.9
+import QtPositioning 5.0
+import QtQuick 2.0
+
+import com.mapbox.cheap_ruler 1.0
+
+Item {
+ id: mapWindow
+
+ // Km/h
+ property int carSpeed: 180
+ property bool navigating: false
+
+ property real rotateAngle: 0
+ property var startPoint: QtPositioning.coordinate(36.12549, -115.173498)
+ property var endPoint: QtPositioning.coordinate(36.0659063, -115.1800443)
+
+ states: [
+ State {
+ name: ""
+ PropertyChanges { target: map; tilt: 0; bearing: 0; zoomLevel: map.zoomLevel }
+ },
+ State {
+ name: "navigating"
+ PropertyChanges { target: map; tilt: 60; zoomLevel: 20 }
+ }
+ ]
+
+ transitions: [
+ Transition {
+ to: "*"
+ RotationAnimation { target: map; property: "bearing"; duration: 100; direction: RotationAnimation.Shortest }
+ NumberAnimation { target: map; property: "zoomLevel"; duration: 100 }
+ NumberAnimation { target: map; property: "tilt"; duration: 100 }
+ }
+ ]
+
+ state: navigating ? "navigating" : ""
+
+ Image {
+ id: backgroud
+ anchors.left: parent.left
+ anchors.top: parent.top
+ width: parent.width
+ height: 100
+
+ source: "qrc:simple-bottom-background-white.png"
+ z: 1
+ }
+
+ Image {
+ id: carCurrent
+ anchors.left: parent.left
+ anchors.top: parent.top
+ z: 3
+
+ visible: !mapWindow.navigating
+ source: "qrc:car-focus.png"
+
+ MouseArea {
+ id: area
+
+ anchors.fill: parent
+
+ onClicked: {
+ mapWindow.navigating = true
+ currentDistanceAnimation.start();
+ }
+ }
+
+ scale: area.pressed ? 0.85 : 1.0
+
+ Behavior on scale {
+ NumberAnimation {}
+ }
+ }
+
+ Image {
+ id: turnDirection
+ anchors.left: carCurrent.right
+ anchors.top: parent.top
+ anchors.leftMargin: 20
+
+ z: 3
+ }
+
+ CustomLabel {
+ id: distance
+ anchors.left: carCurrent.right
+ anchors.bottom: backgroud.bottom
+ z: 3
+
+ font.pixelSize: 38
+ }
+
+ CustomLabel {
+ id: turnInstructions
+ anchors.left: turnDirection.right
+ anchors.top: parent.top
+ anchors.leftMargin: 30
+ anchors.topMargin: (backgroud.height-turnInstructions.height)/2
+ z: 3
+
+ font.pixelSize: 38
+ }
+
+ 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: "pk.eyJ1IjoidG1wc2FudG9zIiwiYSI6ImNqMWVzZWthbDAwMGIyd3M3ZDR0aXl3cnkifQ.FNxMeWCZgmujeiHjl44G9Q"
+ }
+
+ PluginParameter {
+ name: "mapboxgl.mapping.cache.directory"
+ value: "/home/0/app-data/navigation/"
+ }
+ }
+
+ center: mapWindow.navigating ? ruler.currentPosition : startPoint
+ zoomLevel: 5
+ minimumZoomLevel: 0
+ maximumZoomLevel: 20
+ tilt: 0
+
+ copyrightsVisible: false
+
+ MouseArea {
+ anchors.fill: parent
+
+ onWheel: {
+ mapWindow.navigating = false
+ wheel.accepted = false
+ }
+ }
+ gesture.onPanStarted: {
+ mapWindow.navigating = false
+ }
+
+ gesture.onPinchStarted: {
+ mapWindow.navigating = false
+ }
+
+ RotationAnimation on bearing {
+ id: bearingAnimation
+
+ duration: 250
+ alwaysRunToEnd: false
+ direction: RotationAnimation.Shortest
+ running: mapWindow.navigating
+ }
+
+ Location {
+ id: previousLocation
+ coordinate: QtPositioning.coordinate(0, 0);
+ }
+
+ onCenterChanged: {
+ if (previousLocation.coordinate === center || !mapWindow.navigating)
+ return;
+
+ bearingAnimation.to = previousLocation.coordinate.azimuthTo(center);
+ bearingAnimation.start();
+
+ previousLocation.coordinate = center;
+ }
+
+ function updateRoute() {
+ routeQuery.clearWaypoints();
+ routeQuery.addWaypoint(startMarker.coordinate);
+ routeQuery.addWaypoint(endMarker.coordinate);
+ }
+
+ MapQuickItem {
+ id: startMarker
+
+ sourceItem: Image {
+ id: greenMarker
+ source: "qrc:///marker-green.png"
+ }
+
+ coordinate : startPoint
+ anchorPoint.x: greenMarker.width / 2
+ anchorPoint.y: greenMarker.height / 2
+
+ MouseArea {
+ drag.target: parent
+ anchors.fill: parent
+
+ onReleased: {
+ map.updateRoute();
+ }
+ }
+ }
+
+ MapQuickItem {
+ id: endMarker
+
+ sourceItem: Image {
+ id: redMarker
+ source: "qrc:///marker-end.png"
+ }
+
+ coordinate : endPoint
+ anchorPoint.x: redMarker.width / 2
+ anchorPoint.y: redMarker.height / 2
+
+ MouseArea {
+ drag.target: parent
+ anchors.fill: parent
+
+ onReleased: {
+ map.updateRoute();
+ }
+ }
+ }
+
+ 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;
+ ruler.currentDistance = 0;
+
+ currentDistanceAnimation.stop();
+ currentDistanceAnimation.to = ruler.distance;
+ }
+ }
+ }
+
+ MapQuickItem {
+ zoomLevel: map.zoomLevel
+
+ sourceItem: Image {
+ id: carMarker
+ source: "qrc:///car-marker2.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;
+ }
+ }
+
+ CheapRuler {
+ id: ruler
+
+ PropertyAnimation on currentDistance {
+ id: currentDistanceAnimation
+
+ duration: ruler.distance / mapWindow.carSpeed * 60 * 60 * 1000
+ alwaysRunToEnd: false
+ }
+
+ onCurrentDistanceChanged: {
+ var total = 0;
+ var total2 = 0;
+ var i = 0;
+ var j = 0;
+ var alltime = routeModel.get(0).travelTime;
+ var alldistance = routeModel.get(0).distance;
+
+ // XXX: Use car speed in meters to pre-warn the turn instruction
+ while (total - mapWindow.carSpeed < ruler.currentDistance * 1000 && i < routeModel.get(0).segments.length)
+ {
+ total += routeModel.get(0).segments[i++].maneuver.distanceToNextInstruction;
+ }
+
+ while (total2 < ruler.currentDistance * 1000 && j < routeModel.get(0).segments.length)
+ {
+ total2 += routeModel.get(0).segments[j++].maneuver.distanceToNextInstruction;
+ }
+
+ var dis = (total2 - ruler.currentDistance * 1000).toFixed(1);
+ if(dis > 1000)
+ {
+ distance.text = (dis / 1000).toFixed(1) + " km";
+ }
+ else
+ {
+ distance.text = dis + " m";
+ }
+
+ var travaltimesec=((1 - (ruler.currentDistance * 1000)/alldistance)*alltime).toFixed(0);
+
+ if((travaltimesec/3600)>=1)
+ {
+ travaltime.text = (travaltimesec/3600).toFixed(0) + "h" + ((travaltimesec%3600)/60).toFixed(0) + "min";
+ }
+ else
+ {
+ travaltime.text = (travaltimesec/60).toFixed(0) + "min";
+ }
+
+ turnInstructions.text = routeModel.get(0).segments[i - 1].maneuver.instructionText;
+
+ if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionForward)
+ {
+ turnDirection.source = "qrc:arrow-0.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionLightRight)
+ {
+ turnDirection.source = "qrc:arrow-r-30.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionRight)
+ {
+ turnDirection.source = "qrc:arrow-r-45.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionHardRight)
+ {
+ turnDirection.source = "qrc:arrow-r-75.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionUTurnRight)
+ {
+ turnDirection.source = "qrc:arrow-r-180.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionLightLeft)
+ {
+ turnDirection.source = "qrc:arrow-l-30.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionLeft)
+ {
+ turnDirection.source = "qrc:arrow-l-45.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionHardLeft)
+ {
+ turnDirection.source = "qrc:arrow-l-75.png";
+ }
+ else if(routeModel.get(0).segments[i - 1].maneuver.direction === RouteManeuver.DirectionUTurnLeft)
+ {
+ turnDirection.source = "qrc:arrow-l-180.png";
+ }
+ else
+ {
+ turnDirection.source = "qrc:arrow-0.png";
+ }
+
+ }
+ }
+ }
+
+ 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: "pk.eyJ1IjoicXRzZGsiLCJhIjoiY2l5azV5MHh5MDAwdTMybzBybjUzZnhxYSJ9.9rfbeqPjX2BusLRDXHCOBA"
+ }
+ }
+
+ Component.onCompleted: {
+ if (map) {
+ map.updateRoute();
+ }
+ }
+ }
+
+ RouteQuery {
+ id: routeQuery
+ }
+
+ Image {
+ id: bottombackgroud
+ anchors.left: parent.left
+ anchors.bottom: parent.bottom
+ width: parent.width
+ height: 100
+
+ source: "qrc:simple-bottom-background-white.png"
+ z: 1
+ }
+
+ CustomLabel {
+ id: travaltime
+ anchors.left: bottombackgroud.left
+ anchors.verticalCenter: bottombackgroud.verticalCenter
+ visible: mapWindow.navigating
+ z: 3
+ font.pixelSize: 38
+ }
+
+ Row {
+ anchors.horizontalCenter: bottombackgroud.horizontalCenter
+ anchors.verticalCenter: bottombackgroud.verticalCenter
+ width: bottombackgroud.width / 4
+ spacing: 10
+ z:3
+ DateAndTime {}
+ }
+}