Set Position Tracker¶
In this guide you will learn how to change the
default green navigation arrow/position tracker with a
custom object of your choice in gltf format, as well as
change its size, and show or hide it, while playing back
a previously recorded GPS position log, using DataSource
on an interactive map, displayed using MapView,
with frame per second (FPS) counter.
Set a custom gltf position tracker¶
|
First, get an API key token, see the Getting Started guide.
Qt should be installed to continue.The Maps SDK for Qt should be installed, see the Setup Maps SDK for Qt guide.
Overview¶
SetPositionTracker demonstrates how easy it is to replace the
default position tracker with a custom object of your choice in gltf format.
How it works
In Qt, go to the File menu and select Open File or Project…
then browse to the SetPositionTracker example folder and open SetPositionTracker.pro
You may want to have a look at Setting your API Key to see how to open and configure a project and set your API Key.
|
In main.qml, in the Component.onCompleted: block, the datasource is
set by specifying the filename of a previously recorded [GPS] position log:
ServicesManager.dataSource.playbackFile = Qt.resolvedUrl("strasbourg.nmea");
Also the content type that will be downloaded upon demand is specified:
let updater = ServicesManager.contentUpdater(ContentItem.Type.RoadMap);
Start/stop playback¶
The MapView displaying the interactive map has 6 buttons;
The MapView displaying the interactive map has 6 buttons;
in the lower left corner of the viewport is the button to start/stop the
pre-recorded position (GPS) log playback (started automatically).
1Button {
2 text: ServicesManager.dataSource.type === DataSource.Type.Live
3 ? "Position Log playback" : "Live position"
4 background: Rectangle {
5 opacity: parent.hovered ? 1 : 0.5
6 color: enabled ? parent.down ? "#aa00aa" :
7 (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
8 }
9 palette { buttonText: "#ffffff"; }
10 onClicked: ServicesManager.dataSource.type
11 = ServicesManager.dataSource.type === DataSource.Type.Live
12 ? DataSource.Type.Playback
13 : DataSource.Type.Live;
14}
To restart the pre-recorded position (GPS) log playback,
click the Live position button,
to switch the position data source to the actual GPS device position,
then click Position Log playback to switch the position data source
back to the start of the pre-recorded position (GPS) sample log file
included in this example.
Follow position¶
|
The button on the bottom right is to start/resume following position (following position started automatically).
Panning the map during simulation/playback will stop follow position, and the button needs to be clicked again to resume following position.
1Button {
2 anchors.right: parent.right
3 anchors.bottom: parent.bottom
4 text: qsTr("Follow position")
5 enabled: !mapView.followingPosition
6 background: Rectangle {
7 opacity: parent.hovered ? 1 : 0.5
8 color: enabled ? parent.down ? "#aa00aa" :
9 (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
10 }
11 palette { buttonText: "#ffffff"; }
12 onClicked: mapView.followingPosition = true
13}
Follow position means that the camera flies to the position of the green arrow / custom position tracker indicator, and then follows the simulated position arrow / custom indicator. This is necessary, as the arrow / position indicator is likely to be in motion, and located elsewhere on the map, not at the current location of the camera.
|
The green position arrow (default position tracker) indicates the previously recorded GPS positions on the map, from the pre-recorded data source (included sample GPS log file) specified above, during playback.
Change position indicator¶
|
1Button {
2 id: cycleButton
3 text: myCycleCounter.countCycle + " " + (myCycleCounter.countCycle < 1
4 ? "default" : myCycleCounter.countCycle === 1
5 ? "icosahedron"
6 : myCycleCounter.countCycle === 2
7 ? "cube"
8 : myCycleCounter.countCycle === 3
9 ? "cone"
10 : myCycleCounter.countCycle === 4
11 ? "red arrow"
12 : "other") + " - click to change"
13 background: Rectangle {
14 opacity: parent.hovered ? 1 : 0.5
15 color: enabled ? parent.down ? "#aa00aa" :
16 (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
17 }
18 palette { buttonText: "#ffffff"; }
19 onClicked: {
20 myCycleCounter.countCycle += 1;
21 console.log("count cycle " + myCycleCounter.countCycle);
22 ServicesManager.mapScene.setDefaultPositionTrackerFromGlbFile(
23 Qt.resolvedUrl(myCycleCounter.countCycle === 1
24 ? "icosahedron_orange.glb"
25 : myCycleCounter.countCycle === 2
26 ? "cyancube.glb"
27 : myCycleCounter.countCycle === 3
28 ? "cone.glb" : "redarrowquad.glb"));
29 }
30}
The top button in the lower left of the viewport is
to cycle through 4 additional custom position trackers -
an icosahedron, a cube, a cone (all three untextured 3D objects),
and a flat 2D quad with a red navigation arrow texture.
Click this button to change the default position tracker.
You can create your own .glb file with any model you
want to use as the position tracker.
ServicesManager.mapScene.setDefaultPositionTrackerFromGlbFile(Qt.resolvedUrl("icosahedron_orange.glb"))
The code above shows how to set a custom object in gltf format instead of the default green arrow position tracker.
Resize position indicator¶
|
1Button {
2 id: increaseSize
3 text: "Increase size ( " + ServicesManager.mapScene.positionTrackerScaleFactor + " / "
4 + ServicesManager.mapScene.positionTrackerMaxScaleFactor + " )"
5 background: Rectangle {
6 opacity: parent.hovered ? 1 : 0.5
7 color: enabled ? parent.down ? "#aa00aa" :
8 (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
9 }
10 palette { buttonText: "#ffffff"; }
11 onClicked: {
12 ServicesManager.mapScene.positionTrackerScaleFactor += 1
13 }
14}
15Button {
16 id: decreaseSize
17 text: "Decrease size ( " + ServicesManager.mapScene.positionTrackerScaleFactor + " / "
18 + ServicesManager.mapScene.positionTrackerMaxScaleFactor + " )"
19 background: Rectangle {
20 opacity: parent.hovered ? 1 : 0.5
21 color: enabled ? parent.down ? "#aa00aa" :
22 (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
23 }
24 palette { buttonText: "#ffffff"; }
25 onClicked: {
26 ServicesManager.mapScene.positionTrackerScaleFactor -= 0.5
27 }
28}
Below that are buttons to increase and decrease the size of the position tracker indicator object. Note that there is a read-only maximum size property. Requesting increasing the size of the position tracker object to a size greater than the predefined maximum size is ignored and has no effect.
Show/hide position indicator¶
|
1Button {
2 id: trackerVisibility
3 text: "Position tracker VISIBLE"
4 background: Rectangle {
5 opacity: parent.hovered ? 1 : 0.5
6 color: enabled ? parent.down ? "#aa00aa" :
7 (parent.hovered ? "#0000ff" : "#2000ff") : "#aaaaaa"
8 }
9 palette { buttonText: "#ffffff"; }
10 onClicked: {
11 ServicesManager.mapScene.positionTrackerVisibility
12 = !ServicesManager.mapScene.positionTrackerVisibility
13 trackerVisibility.text = ServicesManager.mapScene.positionTrackerVisibility
14 ? "Position tracker VISIBLE" : "Position tracker HIDDEN"
15 console.log(ServicesManager.mapScene.positionTrackerVisibility
16 ? "Position tracker VISIBLE" : "Position tracker HIDDEN");
17 }
18}
There is also a button to show / hide the position tracker indicator object.
Configure position indicator¶
|
Note that the files for both the datasource used for playback, strasbourg.nmea,
and the .glb (binary gltf) custom position tracker/indicator GLTF model,
have to be defined in qml.qrc to enable Qt.resolvedUrl() to
find them in the project path.
|
