Re-implementing the background geolocation (not yet stored in a track)

This commit is contained in:
Eric van der Vlist 2022-09-24 18:56:41 +02:00
parent eae6296c2a
commit 82997cd53f
7 changed files with 4136 additions and 1 deletions

View File

@ -0,0 +1,44 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="1000"
height="2000"
viewBox="0 0 250 500"
>
<g>
<circle
cx="100"
cy="100"
r="10"
fill='green'
stroke='black'
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
<circle
cx="200"
cy="200"
r="10"
fill='green'
stroke='black'
stroke-width="1"
vector-effect="non-scaling-size"
/>
<path
d="M 50, 50 l 0.0001 0"
stroke-width="10"
stroke-linecap="round"
stroke="green"
vector-effect="non-scaling-stroke"
/>
</g>
</svg>
<!--
<svg width="921" height="1301"><g transform="scale(256) translate(6.916599514166666,8.07269355334303))"><circle cx="0.7154276391666667" cy="0.6137091783430285" r="10px" fill="green" vector-effect="non-scaling-size"></circle></g></svg>
<svg width="921" height="1301"><g transform="scale(256) translate(6.916599514166666,8.07269355334303))"><path d="M 0.7154276391666667 0.6137091783430285 l 0.0001 0" vector-effect="non-scaling-stroke" stroke-width="50" stroke-linecap="round" stroke="green"></path></g></svg>
-->

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 546 B

View File

@ -0,0 +1,44 @@
import React, { useState } from 'react';
import { useDB } from 'react-pouchdb';
import GPX from '../../lib/gpx-parser-builder';
import '../../theme/get-location.css';
import { IonButton, IonIcon, IonItem } from '@ionic/react';
import { recordingOutline, recording } from 'ionicons/icons';
import { pushTrack } from '../../db/tracks';
import {
startBackgroundGeolocation,
stopBackgroundGeolocation,
} from '../../lib/background-geolocation';
const GpxRecord: React.FC<{}> = () => {
const db = useDB();
const [isRecording, setIsRecording] = useState(false);
const [watcher_id, setWatcher_id] = useState();
const toggleIsRecording = () => {
if (isRecording) {
stopBackgroundGeolocation(watcher_id);
} else {
startBackgroundGeolocation().then((result) => {
setWatcher_id(result);
});
}
setIsRecording(!isRecording);
};
return (
<IonButton onClick={toggleIsRecording}>
{isRecording && (
<IonIcon slot='icon-only' icon={recording} style={{ color: 'red' }} />
)}
{!isRecording && <IonIcon slot='icon-only' icon={recordingOutline} />}
</IonButton>
);
};
export default GpxRecord;

View File

@ -20,6 +20,7 @@ import {
import GpxImport from './gpx-import'; import GpxImport from './gpx-import';
import Tracks from './tracks'; import Tracks from './tracks';
import GpxRecord from './gpx-record';
const Map: react.FC<{}> = (props: {}) => { const Map: react.FC<{}> = (props: {}) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -55,6 +56,7 @@ const Map: react.FC<{}> = (props: {}) => {
<IonHeader className='ion-no-border' translucent={true}> <IonHeader className='ion-no-border' translucent={true}>
<IonToolbar> <IonToolbar>
<IonButtons slot='end'> <IonButtons slot='end'>
<GpxRecord />
<GpxImport /> <GpxImport />
</IonButtons> </IonButtons>
</IonToolbar> </IonToolbar>

3938
src/db/sample-track.json Normal file

File diff suppressed because it is too large Load Diff

View File

@ -18,5 +18,8 @@ export const pushTrack = (db: any, payload: any) => {
_id = bytes_to_base64(result); _id = bytes_to_base64(result);
console.log(`Digest: ${_id}`); console.log(`Digest: ${_id}`);
} }
db.put({ _id, type: 'Track', ...payload }); const doc = { _id, type: 'Track', ...payload };
// console.log(JSON.stringify(doc));
db.put(doc);
}; };

View File

@ -0,0 +1,104 @@
import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
import { registerPlugin } from '@capacitor/core';
const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
'BackgroundGeolocation'
);
const backgroundGeolocationConfig = {
// If the "backgroundMessage" option is defined, the watcher will
// provide location updates whether the app is in the background or the
// foreground. If it is not defined, location updates are only
// guaranteed in the foreground. This is true on both platforms.
// On Android, a notification must be shown to continue receiving
// location updates in the background. This option specifies the text of
// that notification.
backgroundMessage: 'Cancel to prevent battery drain.',
// The title of the notification mentioned above. Defaults to "Using
// your location".
backgroundTitle: 'Tracking You.',
// Whether permissions should be requested from the user automatically,
// if they are not already granted. Defaults to "true".
requestPermissions: true,
// If "true", stale locations may be delivered while the device
// obtains a GPS fix. You are responsible for checking the "time"
// property. If "false", locations are guaranteed to be up to date.
// Defaults to "false".
stale: false,
// The minimum number of metres between subsequent locations. Defaults
// to 0.
distanceFilter: 1,
};
export const startBackgroundGeolocation = async () => {
const locationHandler = (location: any, error: any) => {
console.log('com.dyomedea.dyomedea LOG', ' - Callback');
if (error) {
if (error.code === 'NOT_AUTHORIZED') {
if (
window.confirm(
'This app needs your location, ' +
'but does not have permission.\n\n' +
'Open settings now?'
)
) {
// It can be useful to direct the user to their device's
// settings when location permissions have been denied. The
// plugin provides the 'openSettings' method to do exactly
// this.
BackgroundGeolocation.openSettings();
}
}
return console.error('com.dyomedea.dyomedea LOG', ' - error: ', error);
}
console.log(location);
if (location !== undefined) {
//setCenter([location.latitude, location.longitude]);
//setPosition([location.latitude, location.longitude]);
// dispatch(
// gpxActions.appendTrkpt({
// trkKey: 'current',
// trkpt: {
// $: {
// lat: location.latitude,
// lon: location.longitude,
// },
// },
// })
// );
}
return console.log('com.dyomedea.dyomedea LOG', ' - location: ', location);
};
var watcher_id;
console.log('com.dyomedea.dyomedea LOG', ' - Adding the watcher');
await BackgroundGeolocation.addWatcher(
backgroundGeolocationConfig,
locationHandler
)
.then(function after_the_watcher_has_been_added(id) {
// When a watcher is no longer needed, it should be removed by calling
// 'removeWatcher' with an object containing its ID.
console.log('com.dyomedea.dyomedea LOG', ' - Watcher added');
watcher_id = id;
/*BackgroundGeolocation.removeWatcher({
id: watcher_id,
}); */
})
.catch((reason) => {
console.error('com.dyomedea.dyomedea LOG', ' - reason: ', reason);
});
return watcher_id;
};
export const stopBackgroundGeolocation = (watcher_id: any) => {
BackgroundGeolocation.removeWatcher({
id: watcher_id,
});
};