From 968190827b585c3e9c75f4173d6108685404e85c Mon Sep 17 00:00:00 2001 From: "Thiago Marcos P. Santos" Date: Sun, 25 Sep 2016 14:14:34 +0300 Subject: [PATCH] [Qt] Simplify QML example --- platform/qt/qmlapp/main.qml | 640 +++++++++++++++--------------------- 1 file changed, 261 insertions(+), 379 deletions(-) diff --git a/platform/qt/qmlapp/main.qml b/platform/qt/qmlapp/main.qml index 825dcabe0..fa157333d 100644 --- a/platform/qt/qmlapp/main.qml +++ b/platform/qt/qmlapp/main.qml @@ -2,8 +2,8 @@ import QtGraphicalEffects 1.0 import QtPositioning 5.0 import QtQuick 2.0 import QtQuick.Controls 1.0 -import QtQuick.Layouts 1.0 import QtQuick.Dialogs 1.0 +import QtQuick.Layouts 1.0 import QQuickMapboxGL 1.0 @@ -13,6 +13,193 @@ ApplicationWindow { height: 768 visible: true + MapboxMap { + id: map + anchors.fill: parent + + parameters: [ + MapParameter { + id: style + property var type: "style" + property var url: "mapbox://styles/mapbox/streets-v9" + }, + MapParameter { + id: waterPaint + property var type: "paint" + property var layer: "water" + property var fillColor: waterColorDialog.color + }, + MapParameter { + property var type: "source" + property var name: "routeSource" + property var sourceType: "geojson" + property var data: ":source.geojson" + }, + MapParameter { + property var type: "layer" + property var name: "routeCase" + property var layerType: "line" + property var source: "routeSource" + }, + MapParameter { + property var type: "paint" + property var layer: "routeCase" + property var lineColor: "white" + property var lineWidth: 20.0 + }, + MapParameter { + property var type: "layout" + property var layer: "routeCase" + property var lineJoin: "round" + property var lineCap: lineJoin + property var visibility: toggleRoute.checked ? "visible" : "none" + }, + MapParameter { + property var type: "layer" + property var name: "route" + property var layerType: "line" + property var source: "routeSource" + }, + MapParameter { + id: linePaint + property var type: "paint" + property var layer: "route" + property var lineColor: "blue" + property var lineWidth: 8.0 + }, + MapParameter { + property var type: "layout" + property var layer: "route" + property var lineJoin: "round" + property var lineCap: "round" + property var visibility: toggleRoute.checked ? "visible" : "none" + }, + MapParameter { + property var type: "image" + property var name: "label-arrow" + property var sprite: ":label-arrow.svg" + }, + MapParameter { + property var type: "image" + property var name: "label-background" + property var sprite: ":label-background.svg" + }, + MapParameter { + property var type: "layer" + property var name: "markerArrow" + property var layerType: "symbol" + property var source: "routeSource" + }, + MapParameter { + property var type: "layout" + property var layer: "markerArrow" + property var iconImage: "label-arrow" + property var iconSize: 0.5 + property var iconIgnorePlacement: true + property var iconOffset: [ 0.0, -15.0 ] + property var visibility: toggleRoute.checked ? "visible" : "none" + }, + MapParameter { + property var type: "layer" + property var name: "markerBackground" + property var layerType: "symbol" + property var source: "routeSource" + }, + MapParameter { + property var type: "layout" + property var layer: "markerBackground" + property var iconImage: "label-background" + property var textField: "{name}" + property var iconTextFit: "both" + property var iconIgnorePlacement: true + property var textIgnorePlacement: true + property var textAnchor: "left" + property var textSize: 16.0 + property var textPadding: 0.0 + property var textLineHeight: 1.0 + property var textMaxWidth: 8.0 + property var iconTextFitPadding: [ 15.0, 10.0, 15.0, 10.0 ] + property var textOffset: [ -0.5, -1.5 ] + property var visibility: toggleRoute.checked ? "visible" : "none" + }, + MapParameter { + property var type: "paint" + property var layer: "markerBackground" + property var textColor: "white" + }, + MapParameter { + property var type: "filter" + property var layer: "markerArrow" + property var filter: [ "==", "$type", "Point" ] + }, + MapParameter { + property var type: "filter" + property var layer: "markerBackground" + property var filter: [ "==", "$type", "Point" ] + }, + MapParameter { + property var type: "bearing" + property var angle: bearingSlider.value + }, + MapParameter { + property var type: "pitch" + property var angle: pitchSlider.value + } + ] + + center: QtPositioning.coordinate(60.170448, 24.942046) // Helsinki + zoomLevel: 12.25 + minimumZoomLevel: 0 + maximumZoomLevel: 20 + + color: landColorDialog.color + copyrightsVisible: true + + states: State { + name: "moved"; when: mouseArea.pressed + PropertyChanges { target: linePaint; lineColor: "red"; } + } + + transitions: Transition { + ColorAnimation { properties: "lineColor"; easing.type: Easing.InOutQuad; duration: 500 } + } + + Image { + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: 20 + + opacity: .75 + + sourceSize.width: 80 + sourceSize.height: 80 + + source: "icon.png" + } + + MouseArea { + id: mouseArea + anchors.fill: parent + + property var lastX: 0 + property var lastY: 0 + + onWheel: map.zoomLevel += 0.2 * wheel.angleDelta.y / 120 + + onPressed: { + lastX = mouse.x + lastY = mouse.y + } + + onPositionChanged: { + map.pan(mouse.x - lastX, mouse.y - lastY) + + lastX = mouse.x + lastY = mouse.y + } + } + } + ColorDialog { id: landColorDialog title: "Land color" @@ -25,405 +212,100 @@ ApplicationWindow { color: "#63c5ee" } - RowLayout { - anchors.fill: parent - anchors.margins: 50 - spacing: anchors.margins + Rectangle { + anchors.fill: menu + anchors.margins: -20 + radius: 30 + clip: true + } - Flipable { - id: flipable + ColumnLayout { + id: menu - Layout.fillWidth: true - Layout.fillHeight: true + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 30 - transform: Rotation { - origin.x: flipable.width / 2 - origin.y: flipable.height / 2 + Label { + text: "Bearing:" + } - axis.x: 0; axis.y: 1; axis.z: 0 + Slider { + id: bearingSlider - angle: flipSlider.value - } + anchors.left: parent.left + anchors.right: parent.right + maximumValue: 180 + } - front: Rectangle { - anchors.fill: parent + Label { + text: "Pitch:" + } - MapboxMap { - id: mapFront + Slider { + id: pitchSlider - anchors.fill: parent - visible: false + anchors.left: parent.left + anchors.right: parent.right + maximumValue: 60 + } - parameters: [ - MapParameter { - id: styleStreets - property var type: "style" - property var url: "mapbox://styles/mapbox/streets-v9" - }, - MapParameter { - id: waterPaint - property var type: "paint" - property var layer: "water" - property var fillColor: waterColorDialog.color - }, - MapParameter { - property var type: "source" - property var name: "routeSource" - property var sourceType: "geojson" - property var data: ":source.geojson" - }, - MapParameter { - property var type: "layer" - property var name: "routeCase" - property var layerType: "line" - property var source: "routeSource" - }, - MapParameter { - property var type: "paint" - property var layer: "routeCase" - property var lineColor: "white" - property var lineWidth: 20.0 - }, - MapParameter { - property var type: "layout" - property var layer: "routeCase" - property var lineJoin: "round" - property var lineCap: lineJoin - property var visibility: toggleRoute.checked ? "visible" : "none" - }, - MapParameter { - property var type: "layer" - property var name: "route" - property var layerType: "line" - property var source: "routeSource" - }, - MapParameter { - property var type: "paint" - property var layer: "route" - property var lineColor: "blue" - property var lineWidth: 8.0 - }, - MapParameter { - property var type: "layout" - property var layer: "route" - property var lineJoin: "round" - property var lineCap: "round" - property var visibility: toggleRoute.checked ? "visible" : "none" - }, - MapParameter { - property var type: "image" - property var name: "label-arrow" - property var sprite: ":label-arrow.svg" - }, - MapParameter { - property var type: "image" - property var name: "label-background" - property var sprite: ":label-background.svg" - }, - MapParameter { - property var type: "layer" - property var name: "markerArrow" - property var layerType: "symbol" - property var source: "routeSource" - }, - MapParameter { - property var type: "layout" - property var layer: "markerArrow" - property var iconImage: "label-arrow" - property var iconSize: 0.5 - property var iconIgnorePlacement: true - property var iconOffset: [ 0.0, -15.0 ] - property var visibility: toggleRoute.checked ? "visible" : "none" - }, - MapParameter { - property var type: "layer" - property var name: "markerBackground" - property var layerType: "symbol" - property var source: "routeSource" - }, - MapParameter { - property var type: "layout" - property var layer: "markerBackground" - property var iconImage: "label-background" - property var textField: "{name}" - property var iconTextFit: "both" - property var iconIgnorePlacement: true - property var textIgnorePlacement: true - property var textAnchor: "left" - property var textSize: 16.0 - property var textPadding: 0.0 - property var textLineHeight: 1.0 - property var textMaxWidth: 8.0 - property var iconTextFitPadding: [ 15.0, 10.0, 15.0, 10.0 ] - property var textOffset: [ -0.5, -1.5 ] - property var visibility: toggleRoute.checked ? "visible" : "none" - }, - MapParameter { - property var type: "paint" - property var layer: "markerBackground" - property var textColor: "white" - }, - MapParameter { - property var type: "filter" - property var layer: "markerArrow" - property var filter: [ "==", "$type", "Point" ] - }, - MapParameter { - property var type: "filter" - property var layer: "markerBackground" - property var filter: [ "==", "$type", "Point" ] - }, - MapParameter { - property var type: "bearing" - property var angle: bearingSlider.value - }, - MapParameter { - property var type: "pitch" - property var angle: pitchSlider.value - } - ] + GroupBox { + anchors.left: parent.left + anchors.right: parent.right + title: "Style:" - center: QtPositioning.coordinate(60.170448, 24.942046) // Helsinki - zoomLevel: 12.25 - minimumZoomLevel: 0 - maximumZoomLevel: 20 - - color: landColorDialog.color - copyrightsVisible: true - - Image { - id: logo - - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: 20 - - opacity: .75 - - sourceSize.width: 80 - sourceSize.height: 80 - - source: "icon.png" + ColumnLayout { + ExclusiveGroup { id: group } + RadioButton { + text: "Streets" + checked: true + exclusiveGroup: group + onClicked: { + style.url = "mapbox://styles/mapbox/streets-v9" + landColorDialog.color = "#e0ded8" + waterColorDialog.color = "#63c5ee" } } - - Rectangle { - id: maskStreets - - anchors.fill: parent - anchors.margins: 20 - - radius: 30 - clip: true - visible: false - } - - OpacityMask { - anchors.fill: maskStreets - - source: mapFront - maskSource: maskStreets - } - - MouseArea { - anchors.fill: parent - - property var lastX: 0 - property var lastY: 0 - - onWheel: mapFront.zoomLevel += 0.2 * wheel.angleDelta.y / 120 - - onPressed: { - lastX = mouse.x - lastY = mouse.y - } - - onPositionChanged: { - mapFront.pan(mouse.x - lastX, mouse.y - lastY) - - lastX = mouse.x - lastY = mouse.y + RadioButton { + text: "Dark" + exclusiveGroup: group + onClicked: { + style.url = "mapbox://styles/mapbox/dark-v9" + landColorDialog.color = "#343332" + waterColorDialog.color = "#191a1a" } } - } - - back: Rectangle { - anchors.fill: parent - - MapboxMap { - id: mapBack - - anchors.fill: parent - visible: false - - parameters: [ - MapParameter { - property var type: "style" - property var url: "mapbox://styles/mapbox/satellite-streets-v9" - }, - MapParameter { - property var type: "bearing" - property var angle: bearingSlider.value - }, - MapParameter { - property var type: "pitch" - property var angle: pitchSlider.value - } - ] - - center: mapFront.center - zoomLevel: mapFront.zoomLevel - minimumZoomLevel: mapFront.minimumZoomLevel - maximumZoomLevel: mapFront.maximumZoomLevel - - Image { - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: logo.anchors.margins - - opacity: logo.opacity - - sourceSize.width: logo.sourceSize.width - sourceSize.height: logo.sourceSize.height - - source: logo.source - } - } - - Rectangle { - id: maskSatellite - - anchors.fill: parent - anchors.margins: maskStreets.anchors.margins - - radius: maskStreets.radius - clip: true - visible: false - } - - OpacityMask { - anchors.fill: maskSatellite - - source: mapBack - maskSource: maskSatellite - } - - MouseArea { - anchors.fill: parent - - property var lastX: 0 - property var lastY: 0 - - onWheel: mapFront.zoomLevel += 0.2 * wheel.angleDelta.y / 120 - - onPressed: { - lastX = mouse.x - lastY = mouse.y - } - - onPositionChanged: { - mapFront.pan(mouse.x - lastX, mouse.y - lastY) - - lastX = mouse.x - lastY = mouse.y + RadioButton { + text: "Satellite" + exclusiveGroup: group + onClicked: { + style.url = "mapbox://styles/mapbox/satellite-v9" } } } } - ColumnLayout { - RowLayout { - anchors.margins: 50 - spacing: anchors.margins + Button { + anchors.left: parent.left + anchors.right: parent.right + text: "Select land color" + onClicked: landColorDialog.open() + } - Slider { - id: bearingSlider + Button { + anchors.left: parent.left + anchors.right: parent.right + text: "Select water color" + onClicked: waterColorDialog.open() + } - Layout.fillHeight: true - orientation: Qt.Vertical - - value: 0 - minimumValue: 0 - maximumValue: 180 - } - - Slider { - id: pitchSlider - - Layout.fillHeight: true - orientation: Qt.Vertical - - value: 0 - minimumValue: 0 - maximumValue: 60 - } - - Slider { - id: flipSlider - - Layout.fillHeight: true - orientation: Qt.Vertical - - value: 0 - minimumValue: 0 - maximumValue: 180 - } - } - - Button { - anchors.left: parent.left - anchors.right: parent.right - text: "Select land color" - onClicked: landColorDialog.open() - } - - Button { - anchors.left: parent.left - anchors.right: parent.right - text: "Select water color" - onClicked: waterColorDialog.open() - } - - Button { - anchors.left: parent.left - anchors.right: parent.right - text: "Streets style" - onClicked: { - styleStreets.url = "mapbox://styles/mapbox/streets-v9" - landColorDialog.color = "#e0ded8" - waterColorDialog.color = "#63c5ee" - } - } - - Button { - anchors.left: parent.left - anchors.right: parent.right - text: "Light style" - onClicked: { - styleStreets.url = "mapbox://styles/mapbox/light-v9" - landColorDialog.color = "#f6f6f4" - waterColorDialog.color = "#cad2d3" - } - } - - Button { - anchors.left: parent.left - anchors.right: parent.right - text: "Dark style" - onClicked: { - styleStreets.url = "mapbox://styles/mapbox/dark-v9" - landColorDialog.color = "#343332" - waterColorDialog.color = "#191a1a" - } - } - - CheckBox { - id: toggleRoute - anchors.left: parent.left - anchors.right: parent.right - text: "Toggle route" - checked: true - } + CheckBox { + id: toggleRoute + anchors.left: parent.left + anchors.right: parent.right + text: "Toggle route" + checked: true } } }