Merge pull request #6 from reedu-reengineering-education/feat/geoloca…

…tion Feat/geolocation
reedu-reengineering-education · Oct 5, 2023 · da18ef0 · da18ef0
2 parents 551092c + 7da70ad
commit da18ef0
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 64 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -3,6 +3,9 @@ apply plugin: 'com.android.application'
 android {
     namespace "com.example.app"
     compileSdkVersion rootProject.ext.compileSdkVersion
+    dataBinding {
+        enabled = true
+    }
     defaultConfig {
         applicationId "com.example.app"
         minSdkVersion rootProject.ext.minSdkVersion

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -7,7 +7,8 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/AppTheme"
+        android:usesCleartextTraffic="true">
 
         <activity
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"

diff --git a/android/app/src/main/res/layout/activity_main.xml b/android/app/src/main/res/layout/activity_main.xml
@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:context=".MainActivity">
-
-    <WebView
+    xmlns:tools="http://schemas.android.com/tools">
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent" />
-</androidx.coordinatorlayout.widget.CoordinatorLayout>
+        android:layout_height="match_parent"
+        tools:context=".MainActivity">
+
+        <WebView
+            android:layout_width="match_parent"
+            android:layout_height="match_parent" />
+    </androidx.coordinatorlayout.widget.CoordinatorLayout>
+</layout>
+
diff --git a/android/build.gradle b/android/build.gradle
@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
+        classpath 'com.android.tools.build:gradle:8.0.1'
         classpath 'com.google.gms:google-services:4.3.15'
 
         // NOTE: Do not place your application dependencies here; they belong
@@ -21,6 +21,7 @@ allprojects {
     repositories {
         google()
         mavenCentral()
+        maven { url "https://jitpack.io"  }
     }
 }
 

diff --git a/android/variables.gradle b/android/variables.gradle
@@ -1,7 +1,7 @@
 ext {
-    minSdkVersion = 22
-    compileSdkVersion = 33
-    targetSdkVersion = 33
+    minSdkVersion = 26
+    compileSdkVersion = 34
+    targetSdkVersion = 34
     androidxActivityVersion = '1.7.0'
     androidxAppCompatVersion = '1.6.1'
     androidxCoordinatorLayoutVersion = '1.2.0'

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "static": "next build && next export"
   },
   "dependencies": {
-    "@capacitor-community/background-geolocation": "^1.2.14",
+    "@capacitor-community/background-geolocation": "felixerdy/background-geolocation",
     "@capacitor-community/bluetooth-le": "^3.0.1",
     "@capacitor/android": "^5.3.0",
     "@capacitor/core": "^5.3.0",
@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle": "^1.0.3",
+    "@turf/circle": "^6.5.0",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

diff --git a/src/app/device/page.tsx b/src/app/device/page.tsx
@@ -6,6 +6,7 @@ import MeasurementsOverview from '@/components/Map/MeasurementsOverview'
 import ControlBar from '@/components/Map/ControlBar'
 import useSenseBox from '@/lib/useSenseBox'
 import { Source, Layer } from 'react-map-gl/maplibre'
+import LocationMarker from '@/components/Map/LocationMarker'
 
 export default function Home() {
   const [recording, setRecording] = useState(false)
@@ -25,48 +26,56 @@ export default function Home() {
 
   return (
     <div className="relative h-full w-full">
-      <MapComponent>
-        <Source
-          id="location"
-          type="geojson"
-          data={{
-            type: 'Point',
-            coordinates: [
-              values.at(-1)?.gps_lat || 0,
-              values.at(-1)?.gps_lng || 0,
-            ],
-          }}
-        >
-          <Layer
-            id="point"
-            type="circle"
-            paint={{
-              'circle-radius': 10,
-              'circle-color': '#007cbf',
-            }}
-          />
-        </Source>
-        <Source
-          id="location-history"
-          type="geojson"
-          data={{
-            features: values.map(v => ({
-              type: 'Feature',
-              properties: {},
-              geometry: {
-                type: 'Point',
-                coordinates: [v.gps_lat || 0, v.gps_lng || 0],
-              },
-            })),
-            type: 'FeatureCollection',
-          }}
-        >
-          <Layer id="point" type="line" />
-        </Source>
+      <MapComponent
+        initialViewState={{
+          longitude: 7.629040078544051,
+          latitude: 51.95991276754322,
+          zoom: 14,
+          pitch: 45,
+        }}
+      >
+        {values && values.length > 0 && (
+          <>
+            <LocationMarker
+              location={{
+                latitude: values.at(-1)?.gps_lat || 0,
+                longitude: values.at(-1)?.gps_lng || 0,
+                accuracy: 10,
+                simulated: false,
+                altitude: null,
+                altitudeAccuracy: null,
+                bearing: null,
+                speed: null,
+                time: null,
+              }}
+            />
+            <Source
+              id="location-history"
+              type="geojson"
+              data={{
+                features: values.map(v => ({
+                  type: 'Feature',
+                  properties: {},
+                  geometry: {
+                    type: 'Point',
+                    coordinates: [v.gps_lat || 0, v.gps_lng || 0],
+                  },
+                })),
+                type: 'FeatureCollection',
+              }}
+            >
+              <Layer id="point" type="line" />
+            </Source>
+          </>
+        )}
       </MapComponent>
       <div className="pointer-events-none absolute inset-0 left-0 top-0 flex h-full w-full flex-col items-center justify-between gap-2 p-4">
-        <MeasurementsOverview data={values.at(-1)} isConnected={isConnected} />
-
+        {values && values.length > 0 && (
+          <MeasurementsOverview
+            data={values.at(-1)}
+            isConnected={isConnected}
+          />
+        )}
         <ControlBar
           recording={recording}
           toggleRecording={() => setRecording(!recording)}

diff --git a/src/components/Geolocation/index.tsx b/src/components/Geolocation/index.tsx
@@ -6,6 +6,9 @@ import {
   BackgroundGeolocationPlugin,
   Location,
 } from '@capacitor-community/background-geolocation'
+import { Button } from '../ui/button'
+import MapComponent from '@/components/Map/Map'
+import LocationMarker from '../Map/LocationMarker'
 
 const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
   'BackgroundGeolocation',
@@ -60,6 +63,14 @@ export default function Geolocation() {
   return (
     <div>
       Geolocation
+      <Button onClick={() => BackgroundGeolocation.openSettings()}>
+        Settings
+      </Button>
+      <div className="h-96 w-full overflow-hidden rounded">
+        <MapComponent>
+          {location && <LocationMarker location={location} />}
+        </MapComponent>
+      </div>
       <div>{JSON.stringify(location, undefined, '\t')}</div>
     </div>
   )

diff --git a/src/components/Map/LocationMarker.tsx b/src/components/Map/LocationMarker.tsx
@@ -0,0 +1,49 @@
+import { Location } from '@capacitor-community/background-geolocation'
+import { Source, Layer } from 'react-map-gl/maplibre'
+
+// @ts-ignore
+import circle from '@turf/circle'
+
+export default function LocationMarker({ location }: { location: Location }) {
+  const circlePoly = circle(
+    [location?.longitude, location?.latitude],
+    location.accuracy,
+    {
+      units: 'meters',
+    },
+  )
+
+  return (
+    <>
+      <Source id="location-accuracy" type="geojson" data={circlePoly}>
+        <Layer
+          id="accuracy"
+          type="fill"
+          paint={{
+            'fill-color': '#007cbf',
+            'fill-opacity': 0.2,
+          }}
+        />
+      </Source>
+      <Source
+        id="location"
+        type="geojson"
+        data={{
+          type: 'Point',
+          coordinates: [location?.longitude, location?.latitude],
+        }}
+      >
+        <Layer
+          id="point"
+          type="circle"
+          paint={{
+            'circle-radius': 8,
+            'circle-color': '#007cbf',
+            'circle-stroke-width': 2,
+            'circle-stroke-color': '#fff',
+          }}
+        />
+      </Source>
+    </>
+  )
+}
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
@@ -11,12 +11,6 @@ const Map = forwardRef<MapRef, MapProps>(
     return (
       // @ts-ignore
       <ReactMap
-        initialViewState={{
-          longitude: 7.629040078544051,
-          latitude: 51.95991276754322,
-          zoom: 14,
-          pitch: 45,
-        }}
         mapStyle={
           mapStyle ||
           'https://api.maptiler.com/maps/streets/style.json?key=DT8RRRX6sOuzQrcuhKuE'

diff --git a/yarn.lock b/yarn.lock
@@ -19,10 +19,9 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@capacitor-community/background-geolocation@^1.2.14":
+"@capacitor-community/background-geolocation@felixerdy/background-geolocation":
   version "1.2.14"
-  resolved "https://registry.yarnpkg.com/@capacitor-community/background-geolocation/-/background-geolocation-1.2.14.tgz#ba27c8cafcb5bee0076659171789e7ba916f178e"
-  integrity sha512-XJqxOKgn3fRtUB8sgfkqRCFKDmefA4fVDhGGtKZL3Bi6yxtHG5DC0n/kmLlQX51/6viw/x74rd25yvK18mCgbg==
+  resolved "https://codeload.github.com/felixerdy/background-geolocation/tar.gz/a61469d2d6b9607299a4b5b9e343367797d20759"
 
 "@capacitor-community/bluetooth-le@^3.0.1":
   version "3.0.1"
@@ -815,6 +814,34 @@
   dependencies:
     tslib "^2.4.0"
 
+"@turf/circle@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/circle/-/circle-6.5.0.tgz#dc017d8c0131d1d212b7c06f76510c22bbeb093c"
+  integrity sha512-oU1+Kq9DgRnoSbWFHKnnUdTmtcRUMmHoV9DjTXu9vOLNV5OWtAAh1VZ+mzsioGGzoDNT/V5igbFOkMfBQc0B6A==
+  dependencies:
+    "@turf/destination" "^6.5.0"
+    "@turf/helpers" "^6.5.0"
+
+"@turf/destination@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/destination/-/destination-6.5.0.tgz#30a84702f9677d076130e0440d3223ae503fdae1"
+  integrity sha512-4cnWQlNC8d1tItOz9B4pmJdWpXqS0vEvv65bI/Pj/genJnsL7evI0/Xw42RvEGROS481MPiU80xzvwxEvhQiMQ==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+    "@turf/invariant" "^6.5.0"
+
+"@turf/helpers@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e"
+  integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==
+
+"@turf/invariant@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-6.5.0.tgz#970afc988023e39c7ccab2341bd06979ddc7463f"
+  integrity sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+
 "@types/fs-extra@^8.0.0":
   version "8.1.2"
   resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz"