From f4862e12104979bb4c0210ec0594f2ae67589b5e Mon Sep 17 00:00:00 2001 From: Lubos Date: Wed, 11 Oct 2023 14:42:54 +0200 Subject: [PATCH] Try to design map items --- app/qmlV2/component/MMMapButton.qml | 67 ++++++++++++++++++++++ gallery/qml.qrc | 2 + gallery/qml/Main.qml | 4 ++ gallery/qml/pages/MapPage.qml | 89 +++++++++++++++++++++++++++++ 4 files changed, 162 insertions(+) create mode 100644 app/qmlV2/component/MMMapButton.qml create mode 100644 gallery/qml/pages/MapPage.qml diff --git a/app/qmlV2/component/MMMapButton.qml b/app/qmlV2/component/MMMapButton.qml new file mode 100644 index 000000000..3507a9827 --- /dev/null +++ b/app/qmlV2/component/MMMapButton.qml @@ -0,0 +1,67 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import Qt5Compat.GraphicalEffects +import "../Style.js" as Style +import "." + +Item { + id: control + + width: 50 + height: 50 + + Rectangle { + id: border + + width: control.width + 3 + height: control.height + 3 + radius: width / 2 + color: "transparent" + + RadialGradient { + id: light + anchors.centerIn: parent + + width: control.width * 1.2 + height: control.height * 1.2 + + gradient: Gradient { + GradientStop { position: 0.3; color: "#80000000" } + GradientStop { position: 0.5; color: "transparent" } + } + + layer.enabled: true + layer.effect: OpacityMask { + id: mask + maskSource: Rectangle { + height: light.height + width: light.width + radius: width / 2 + } + } + } + } + + Rectangle { + id: rectangle + + width: parent.width + height: parent.height + radius: 25 + color: Style.white + + MouseArea { + anchors.fill: parent + } + } +} diff --git a/gallery/qml.qrc b/gallery/qml.qrc index 3e165441a..74f4f5509 100644 --- a/gallery/qml.qrc +++ b/gallery/qml.qrc @@ -24,5 +24,7 @@ qml/pages/ChecksPage.qml ../app/qmlV2/component/MMComponent_reachedDataLimit.qml ../app/qmlV2/component/MMProgressBar.qml + qml/pages/MapPage.qml + ../app/qmlV2/component/MMMapButton.qml diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml index 1859be814..421ffaa62 100644 --- a/gallery/qml/Main.qml +++ b/gallery/qml/Main.qml @@ -128,6 +128,10 @@ ApplicationWindow { title: "Drawers" source: "DrawerPage.qml" } + ListElement { + title: "Map" + source: "MapPage.qml" + } } ScrollIndicator.vertical: ScrollIndicator {} diff --git a/gallery/qml/pages/MapPage.qml b/gallery/qml/pages/MapPage.qml new file mode 100644 index 000000000..d6e8ec260 --- /dev/null +++ b/gallery/qml/pages/MapPage.qml @@ -0,0 +1,89 @@ +/*************************************************************************** + * * + * This program is free software; you can redistribute it and/or modify * + * it under the terms of the GNU General Public License as published by * + * the Free Software Foundation; either version 2 of the License, or * + * (at your option) any later version. * + * * + ***************************************************************************/ + +import QtQuick +import QtQuick.Controls +import QtQuick.Controls.Basic +import QtLocation +import QtPositioning + +import "../../app/qmlV2/component" +import "../../app/qmlV2/Style.js" as Style + +Page { + id: pane + + Plugin { + id: mapPlugin + name: "osm" + } + + Map { + id: map + + anchors.fill: parent + plugin: mapPlugin + center: QtPositioning.coordinate(48.72, 21.25) // KE + zoomLevel: 12 + property geoCoordinate startCentroid + + PinchHandler { + id: pinch + + target: null + onActiveChanged: if (active) { + map.startCentroid = map.toCoordinate(pinch.centroid.position, false) + } + onScaleChanged: (delta) => { + map.zoomLevel += Math.log2(delta) + map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position) + } + onRotationChanged: (delta) => { + map.bearing -= delta + map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position) + } + grabPermissions: PointerHandler.TakeOverForbidden + } + + WheelHandler { + acceptedDevices: Qt.platform.pluginName === "cocoa" || Qt.platform.pluginName === "wayland" + ? PointerDevice.Mouse | PointerDevice.TouchPad + : PointerDevice.Mouse + rotationScale: 1/120 + property: "zoomLevel" + } + + DragHandler { + target: null + onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y) + } + } + + Rectangle { + anchors { + bottom: parent.bottom + left: parent.left + right: parent.right + } + height: 30 + color: "white" + + Text { + anchors.centerIn: parent + text: map.center + "\tzoom: " + map.zoomLevel.toFixed(2) + } + } + + MMMapButton { + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.rightMargin: 20 + anchors.bottomMargin: 50 + } +}