From 48f48473ae63e235012118dd882b4e32ea86b6f0 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Wed, 27 Mar 2024 21:52:30 -0700 Subject: [PATCH 1/8] =?UTF-8?q?=F0=9F=9A=A8=20Add=20a=20new=20key=20to=20e?= =?UTF-8?q?ach=20element=20in=20the=20beacon/device=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Without this change, we get an error ``` Warning: Each child in a list should have a unique "key" prop. Check the render method of `BluetoothCardList`. See https://reactjs.org/link/warning-keys for more information. BluetoothCard@ionic://localhost/dist/bundle.js:21253:18 BluetoothCardList@ionic://localhost/dist/bundle.js:21666:21 ``` With this change, the error does not occur --- www/js/bluetooth/BluetoothScanPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index 52996b321..327a0676d 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -176,7 +176,7 @@ const BluetoothScanPage = ({ ...props }: any) => {
{devices.map((device) => { if (device) { - return ; + return ; } return null; })} @@ -188,7 +188,7 @@ const BluetoothScanPage = ({ ...props }: any) => {
{beaconsAsArray.map((beacon) => { if (beacon) { - return ; + return ; } })}
From 05b2664796cbf2f8f5e986740d2eba5aec393a30 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Wed, 27 Mar 2024 22:55:13 -0700 Subject: [PATCH 2/8] =?UTF-8?q?=F0=9F=94=A7=20Add=20the=20ability=20to=20a?= =?UTF-8?q?dd=20new=20beacons=20to=20the=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We currently have two hardcoded beacons in the list. But everybody is going to have their own beacon for testing. Let's make it possible to add new UUIDs Changes: - New field to enter the UUID - Add button - When add button is clicked, add new entry with the specified UUID and dummy values Testing done: Entered two separate UUIDs and clicked "Add" Two new entries were created in the list --- www/js/bluetooth/BluetoothScanPage.tsx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index 327a0676d..d3d34233f 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -4,7 +4,7 @@ import { StyleSheet, Modal, ScrollView, SafeAreaView, View, Text } from 'react-n import { gatherBluetoothClassicData } from './bluetoothScanner'; import { logWarn, displayError, displayErrorMsg, logDebug } from '../plugin/logger'; import BluetoothCard from './BluetoothCard'; -import { Appbar, useTheme, Button } from 'react-native-paper'; +import { Appbar, useTheme, TextInput, Button } from 'react-native-paper'; import { BLEBeaconDevice, BLEPluginCallback, @@ -40,6 +40,7 @@ const BluetoothScanPage = ({ ...props }: any) => { const [isScanningClassic, setIsScanningClassic] = useState(false); const [isScanningBLE, setIsScanningBLE] = useState(false); const [isClassic, setIsClassic] = useState(false); + const [newUUID, setNewUUID] = useState(null); const { colors } = useTheme(); // Flattens the `sampleBeacons` into an array of BLEBeaconDevices @@ -169,6 +170,19 @@ const BluetoothScanPage = ({ ...props }: any) => { setIsClassic(!isClassic); }; + // Add a beacon with the new UUID to the list of BLE devices to scan + function addNewUUID(newUUID: string) { + console.log("Before adding UUID "+newUUID+" entries = "+sampleBLEDevices); + const devicesWithAddition = {...sampleBLEDevices}; + devicesWithAddition[newUUID] = { + identifier: 'Test-Beacon', + minor: 4949, + major: 3838, + in_range: false, + } + setSampleBLEDevices(devicesWithAddition); + } + const BluetoothCardList = ({ devices }) => { if (isClassic) { // When in classic mode, render devices as normal @@ -263,6 +277,14 @@ const BluetoothScanPage = ({ ...props }: any) => { + setNewUUID(t)} + /> + From 8bc0457fda083414a05872f1d36478e130041da3 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Thu, 28 Mar 2024 17:35:36 -0700 Subject: [PATCH 3/8] =?UTF-8?q?=F0=9F=94=A7=20Allow=20users=20to=20add=20n?= =?UTF-8?q?ew=20beacons=20to=20be=20scanned=20through=20the=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Creates a new set of fields at the botton of the page for the UUID, identifier, major and minor fields - Adds a new "Add" button - When the "Add" button is pressed, we add a new UUID entry to the default list - After the new entry is added, we clear out the old values to prepare for a new entry Testing done: Added three new entries. They were displayed in the list https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2026395782 --- www/js/bluetooth/BluetoothScanPage.tsx | 45 +++++++++++++++++++------- 1 file changed, 34 insertions(+), 11 deletions(-) diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index d3d34233f..bdb352946 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -40,7 +40,10 @@ const BluetoothScanPage = ({ ...props }: any) => { const [isScanningClassic, setIsScanningClassic] = useState(false); const [isScanningBLE, setIsScanningBLE] = useState(false); const [isClassic, setIsClassic] = useState(false); - const [newUUID, setNewUUID] = useState(null); + const [newUUID, setNewUUID] = useState(null); + const [newIdentifier, setNewIdentifier] = useState(null); + const [newMajor, setNewMajor] = useState(0); + const [newMinor, setNewMinor] = useState(0); const { colors } = useTheme(); // Flattens the `sampleBeacons` into an array of BLEBeaconDevices @@ -171,16 +174,20 @@ const BluetoothScanPage = ({ ...props }: any) => { }; // Add a beacon with the new UUID to the list of BLE devices to scan - function addNewUUID(newUUID: string) { + function addNewUUID(newUUID: string, newIdentifier: string, newMajor: number, newMinor: number) { console.log("Before adding UUID "+newUUID+" entries = "+sampleBLEDevices); const devicesWithAddition = {...sampleBLEDevices}; devicesWithAddition[newUUID] = { - identifier: 'Test-Beacon', - minor: 4949, - major: 3838, + identifier: newIdentifier, + minor: newMajor, + major: newMinor, in_range: false, } setSampleBLEDevices(devicesWithAddition); + setNewUUID(null); + setNewIdentifier(null); + setNewMajor(null); + setNewMinor(null); } const BluetoothCardList = ({ devices }) => { @@ -277,12 +284,28 @@ const BluetoothScanPage = ({ ...props }: any) => { - setNewUUID(t)} - /> - From 8f9b130eccc1fe1a1c214d3ee0850358dc40ec81 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Thu, 28 Mar 2024 18:23:47 -0700 Subject: [PATCH 4/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20Use=20a=20static=20?= =?UTF-8?q?identifier=20and=20make=20the=20major=20and=20minor=20values=20?= =?UTF-8?q?optional?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2026422960 Testing done: - Added values with and without a major and minor value https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2026438347 --- www/js/bluetooth/BluetoothScanPage.tsx | 39 +++++++++++--------------- 1 file changed, 17 insertions(+), 22 deletions(-) diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index bdb352946..ea209804e 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -21,17 +21,19 @@ import { */ const BluetoothScanPage = ({ ...props }: any) => { + const STATIC_ID = "edu.berkeley.eecs.emission"; + const { t } = useTranslation(); const [bluetoothClassicList, setBluetoothClassicList] = useState([]); const [sampleBLEDevices, setSampleBLEDevices] = useState({ '426C7565-4368-6172-6D42-6561636F6E74': { - identifier: 'Katie_BLEBeacon', + identifier: STATIC_ID, minor: 4949, major: 3838, in_range: false, }, '426C7565-4368-6172-6D42-6561636F6E73': { - identifier: 'Louis-Beacon', + identifier: STATIC_ID, minor: 4949, major: 3838, in_range: false, @@ -41,9 +43,8 @@ const BluetoothScanPage = ({ ...props }: any) => { const [isScanningBLE, setIsScanningBLE] = useState(false); const [isClassic, setIsClassic] = useState(false); const [newUUID, setNewUUID] = useState(null); - const [newIdentifier, setNewIdentifier] = useState(null); - const [newMajor, setNewMajor] = useState(0); - const [newMinor, setNewMinor] = useState(0); + const [newMajor, setNewMajor] = useState(undefined); + const [newMinor, setNewMinor] = useState(undefined); const { colors } = useTheme(); // Flattens the `sampleBeacons` into an array of BLEBeaconDevices @@ -135,7 +136,7 @@ const BluetoothScanPage = ({ ...props }: any) => { // Need UUID value on iOS only, not Android (2nd parameter) // https://stackoverflow.com/questions/38580410/how-to-scan-all-nearby-ibeacons-using-coordova-based-hybrid-application const beaconRegion = new window['cordova'].plugins.locationManager.BeaconRegion( - sampleBeacon.identifier, + STATIC_ID, sampleBeacon.uuid, sampleBeacon.major, sampleBeacon.minor, @@ -155,7 +156,7 @@ const BluetoothScanPage = ({ ...props }: any) => { beaconsToArray().forEach((sampleBeacon: BLEBeaconDevice) => { setRangeStatus(sampleBeacon.uuid, false); // "zero out" the beacons const beaconRegion = new window['cordova'].plugins.locationManager.BeaconRegion( - sampleBeacon.identifier, + STATIC_ID, sampleBeacon.uuid, sampleBeacon.major, sampleBeacon.minor, @@ -174,20 +175,19 @@ const BluetoothScanPage = ({ ...props }: any) => { }; // Add a beacon with the new UUID to the list of BLE devices to scan - function addNewUUID(newUUID: string, newIdentifier: string, newMajor: number, newMinor: number) { + function addNewUUID(newUUID: string, newMajor: number, newMinor: number) { console.log("Before adding UUID "+newUUID+" entries = "+sampleBLEDevices); const devicesWithAddition = {...sampleBLEDevices}; devicesWithAddition[newUUID] = { - identifier: newIdentifier, + identifier: STATIC_ID, minor: newMajor, major: newMinor, in_range: false, } setSampleBLEDevices(devicesWithAddition); setNewUUID(null); - setNewIdentifier(null); - setNewMajor(null); - setNewMinor(null); + setNewMajor(undefined); + setNewMinor(undefined); } const BluetoothCardList = ({ devices }) => { @@ -285,27 +285,22 @@ const BluetoothScanPage = ({ ...props }: any) => { setNewUUID(t)} /> setNewIdentifier(t)} - /> - setNewMajor(t)} /> setNewMinor(t)} /> - From 58b2b0a004c3044018f1d1d449780917e9c6f78b Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Thu, 28 Mar 2024 18:58:14 -0700 Subject: [PATCH 5/8] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20Display=20the=20val?= =?UTF-8?q?ues=20that=20will=20change=20(UUID,=20major,=20minor)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of the statically coded name/identifier This involved changing the text size so that we could see the UUID I wonder if we should make the UUID the subtitle and the major:minor the title Testing done: https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2026438347 --- www/js/bluetooth/BluetoothCard.tsx | 6 +++--- www/js/bluetooth/BluetoothScanPage.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/www/js/bluetooth/BluetoothCard.tsx b/www/js/bluetooth/BluetoothCard.tsx index 4af8240c4..75d27095b 100644 --- a/www/js/bluetooth/BluetoothCard.tsx +++ b/www/js/bluetooth/BluetoothCard.tsx @@ -26,9 +26,9 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => { return ( } /> diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index ea209804e..f9287d211 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -301,7 +301,7 @@ const BluetoothScanPage = ({ ...props }: any) => { /> From 29e434c17a04c7a27d4ab2bee2b2fb87ca1c2e9f Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Thu, 28 Mar 2024 20:41:25 -0700 Subject: [PATCH 6/8] =?UTF-8?q?=E2=9C=85=20Display=20the=20result=20of=20t?= =?UTF-8?q?he=20callback=20in=20the=20list=20+=20test=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We don't know what the result will look like when there are multiple beacons with the same UUID, so we just stringify and display the result. We cannot test this without having an actual BLE beacon, so I have added a "fake callback button to simulate a callback" Changes: - stringify the result in `didDetermineStateForRegion` and pass it in to `setRangeStatus` - Change the BluetoothCard to display the `device.result` as Card.Content - Add a new button to fake a callback for a device by getting the delegate and invoking the `didDetermineStateForRegion` method on it with the device - Remove the existing result in the device before invoking the callback to avoid nested results Testing done: https://github.com/e-mission/e-mission-docs/issues/1062#issuecomment-2026576418 --- www/js/bluetooth/BluetoothCard.tsx | 23 ++++++++++++++++++++++- www/js/bluetooth/BluetoothScanPage.tsx | 14 ++++++++------ www/js/types/BluetoothDevices.ts | 2 +- 3 files changed, 31 insertions(+), 8 deletions(-) diff --git a/www/js/bluetooth/BluetoothCard.tsx b/www/js/bluetooth/BluetoothCard.tsx index 75d27095b..825b47f6f 100644 --- a/www/js/bluetooth/BluetoothCard.tsx +++ b/www/js/bluetooth/BluetoothCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Card, List, useTheme } from 'react-native-paper'; +import { Card, List, Text, Button, useTheme } from 'react-native-paper'; import { StyleSheet } from 'react-native'; type Props = any; @@ -23,6 +23,19 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => { bgColor = device.in_range ? `rgba(200,250,200,1)` : `rgba(250,200,200,1)`; } + async function fakeCallback() { + // If we don't do this, the results start accumulating in the device object + // first call, we put a result into the device + // second call, the device already has a result, so we put another one in... + const deviceWithoutResult = {...device}; + deviceWithoutResult.result = undefined; + window['cordova'].plugins.locationManager.getDelegate().didDetermineStateForRegion({ + region: deviceWithoutResult, + eventType: "didDetermineStateForRegion", + state: "CLRegionStateInside" + }); + } + return ( { subtitle={`Configured major ${device.major} and minor ${device.minor}`} // e.g., left={() => } /> + + {device.result} + + ); }; diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index f9287d211..69a982cdf 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -85,11 +85,12 @@ const BluetoothScanPage = ({ ...props }: any) => { } } - function setRangeStatus(uuid: string, status: boolean) { + function setRangeStatus(uuid: string, result: string, status: boolean) { setSampleBLEDevices((prevDevices) => ({ ...prevDevices, [uuid]: { ...prevDevices[uuid], + result: result, in_range: status, }, })); @@ -104,16 +105,17 @@ const BluetoothScanPage = ({ ...props }: any) => { delegate.didDetermineStateForRegion = function (pluginResult: BLEPluginCallback) { // `stateInside`is returned when the user enters the beacon region // `StateOutside` is either (i) left region, or (ii) started scanner (outside region) + const pluginResultStr = JSON.stringify(pluginResult, null, 2); if (pluginResult.state == 'CLRegionStateInside') { // need toUpperCase(), b/c callback returns with only lowercase values... - setRangeStatus(pluginResult.region.uuid.toUpperCase(), true); + setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, true); } else if (pluginResult.state == 'CLRegionStateOutside') { - setRangeStatus(pluginResult.region.uuid.toUpperCase(), false); + setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, false); } logDebug('[BLE] didDetermineStateForRegion'); - logDebug(JSON.stringify(pluginResult, null, 2)); + logDebug(pluginResultStr); window['cordova'].plugins.locationManager.appendToDeviceLog( - '[DOM] didDetermineStateForRegion: ' + JSON.stringify(pluginResult, null, 2), + '[DOM] didDetermineStateForRegion: ' + pluginResultStr, ); }; @@ -287,7 +289,7 @@ const BluetoothScanPage = ({ ...props }: any) => { setNewUUID(t)} + onChangeText={(t) => setNewUUID(t.toUpperCase())} /> Date: Thu, 28 Mar 2024 20:50:27 -0700 Subject: [PATCH 7/8] =?UTF-8?q?=F0=9F=8E=A8=20Run=20prettier,=20fix=20synt?= =?UTF-8?q?ax?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- www/js/bluetooth/BluetoothCard.tsx | 18 ++++----- www/js/bluetooth/BluetoothScanPage.tsx | 51 +++++++++++++------------- www/js/types/BluetoothDevices.ts | 8 +++- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/www/js/bluetooth/BluetoothCard.tsx b/www/js/bluetooth/BluetoothCard.tsx index 825b47f6f..ef7a3c7cc 100644 --- a/www/js/bluetooth/BluetoothCard.tsx +++ b/www/js/bluetooth/BluetoothCard.tsx @@ -27,12 +27,12 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => { // If we don't do this, the results start accumulating in the device object // first call, we put a result into the device // second call, the device already has a result, so we put another one in... - const deviceWithoutResult = {...device}; + const deviceWithoutResult = { ...device }; deviceWithoutResult.result = undefined; window['cordova'].plugins.locationManager.getDelegate().didDetermineStateForRegion({ region: deviceWithoutResult, - eventType: "didDetermineStateForRegion", - state: "CLRegionStateInside" + eventType: 'didDetermineStateForRegion', + state: 'CLRegionStateInside', }); } @@ -45,12 +45,12 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => { left={() => } /> - {device.result} - + + {device.result} + + ); diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index 69a982cdf..78687b19f 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -21,7 +21,7 @@ import { */ const BluetoothScanPage = ({ ...props }: any) => { - const STATIC_ID = "edu.berkeley.eecs.emission"; + const STATIC_ID = 'edu.berkeley.eecs.emission'; const { t } = useTranslation(); const [bluetoothClassicList, setBluetoothClassicList] = useState([]); @@ -90,7 +90,7 @@ const BluetoothScanPage = ({ ...props }: any) => { ...prevDevices, [uuid]: { ...prevDevices[uuid], - result: result, + result: result, in_range: status, }, })); @@ -178,14 +178,14 @@ const BluetoothScanPage = ({ ...props }: any) => { // Add a beacon with the new UUID to the list of BLE devices to scan function addNewUUID(newUUID: string, newMajor: number, newMinor: number) { - console.log("Before adding UUID "+newUUID+" entries = "+sampleBLEDevices); - const devicesWithAddition = {...sampleBLEDevices}; + console.log('Before adding UUID ' + newUUID + ' entries = ' + sampleBLEDevices); + const devicesWithAddition = { ...sampleBLEDevices }; devicesWithAddition[newUUID] = { identifier: STATIC_ID, minor: newMajor, major: newMinor, in_range: false, - } + }; setSampleBLEDevices(devicesWithAddition); setNewUUID(null); setNewMajor(undefined); @@ -211,7 +211,9 @@ const BluetoothScanPage = ({ ...props }: any) => {
{beaconsAsArray.map((beacon) => { if (beacon) { - return ; + return ( + + ); } })}
@@ -286,25 +288,24 @@ const BluetoothScanPage = ({ ...props }: any) => { - setNewUUID(t.toUpperCase())} - /> - setNewMajor(t)} - /> - setNewMinor(t)} - /> - + setNewUUID(t.toUpperCase())} + /> + setNewMajor(t)} + /> + setNewMinor(t)} + /> + diff --git a/www/js/types/BluetoothDevices.ts b/www/js/types/BluetoothDevices.ts index 1e7f7a3f2..221b4ecdd 100644 --- a/www/js/types/BluetoothDevices.ts +++ b/www/js/types/BluetoothDevices.ts @@ -22,7 +22,13 @@ export type BLEBeaconDevice = { type_name?: string; // e.g., "BeaconRegion"; used for callback }; export type BLEDeviceList = { - [key: string]: { identifier: string; minor: number; major: number; result: string, in_range: boolean }; + [key: string]: { + identifier: string; + minor: number; + major: number; + result: string; + in_range: boolean; + }; }; export type BLEPluginCallback = { From 7c7084047278ab3524dd1c3ca7fd22d4b02db1c7 Mon Sep 17 00:00:00 2001 From: "K. Shankari" Date: Thu, 28 Mar 2024 23:25:03 -0700 Subject: [PATCH 8/8] =?UTF-8?q?=E2=9C=A8=20Implement=20the=20two=20stage?= =?UTF-8?q?=20range=20after=20monitor=20process=20suggested=20by=20iOS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changes: - in the monitor callback, launch the range call with the UUID that was found - change the fake callback to call the range callback 500ms after the merge callback - store the two results separately - display the two results separately using different background colors --- www/js/bluetooth/BluetoothCard.tsx | 27 +++++++++++++++---- www/js/bluetooth/BluetoothScanPage.tsx | 36 +++++++++++++++++++++----- www/js/types/BluetoothDevices.ts | 3 ++- 3 files changed, 54 insertions(+), 12 deletions(-) diff --git a/www/js/bluetooth/BluetoothCard.tsx b/www/js/bluetooth/BluetoothCard.tsx index ef7a3c7cc..e212121a2 100644 --- a/www/js/bluetooth/BluetoothCard.tsx +++ b/www/js/bluetooth/BluetoothCard.tsx @@ -23,17 +23,31 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => { bgColor = device.in_range ? `rgba(200,250,200,1)` : `rgba(250,200,200,1)`; } - async function fakeCallback() { + async function fakeMonitorCallback() { // If we don't do this, the results start accumulating in the device object // first call, we put a result into the device // second call, the device already has a result, so we put another one in... const deviceWithoutResult = { ...device }; - deviceWithoutResult.result = undefined; + deviceWithoutResult.monitorResult = undefined; + deviceWithoutResult.rangeResult = undefined; window['cordova'].plugins.locationManager.getDelegate().didDetermineStateForRegion({ region: deviceWithoutResult, eventType: 'didDetermineStateForRegion', state: 'CLRegionStateInside', }); + let timer: ReturnType = setTimeout(fakeRangeCallback, 500); + } + + async function fakeRangeCallback() { + // If we don't do this, the results start accumulating in the device object + // first call, we put a result into the device + // second call, the device already has a result, so we put another one in... + const deviceWithMajorMinor = { ...device, major: 1234, minor: 4567 }; + window['cordova'].plugins.locationManager.getDelegate().didRangeBeaconsInRegion({ + region: deviceWithMajorMinor, + eventType: 'didRangeBeaconsInRegion', + state: 'CLRegionStateInside', + }); } return ( @@ -45,10 +59,13 @@ const BluetoothCard = ({ device, isClassic, isScanningBLE }: Props) => { left={() => } /> - - {device.result} + + {device.monitorResult} + + + {device.rangeResult} - diff --git a/www/js/bluetooth/BluetoothScanPage.tsx b/www/js/bluetooth/BluetoothScanPage.tsx index 78687b19f..bb96943c7 100644 --- a/www/js/bluetooth/BluetoothScanPage.tsx +++ b/www/js/bluetooth/BluetoothScanPage.tsx @@ -85,17 +85,27 @@ const BluetoothScanPage = ({ ...props }: any) => { } } - function setRangeStatus(uuid: string, result: string, status: boolean) { + function setMonitorStatus(uuid: string, result: string, status: boolean) { setSampleBLEDevices((prevDevices) => ({ ...prevDevices, [uuid]: { ...prevDevices[uuid], - result: result, + monitorResult: result, in_range: status, }, })); } + function setRangeStatus(uuid: string, result: string) { + setSampleBLEDevices((prevDevices) => ({ + ...prevDevices, + [uuid]: { + ...prevDevices[uuid], + rangeResult: result, + }, + })); + } + // BLE LOGIC async function startBeaconScanning() { setIsScanningBLE(true); @@ -108,15 +118,27 @@ const BluetoothScanPage = ({ ...props }: any) => { const pluginResultStr = JSON.stringify(pluginResult, null, 2); if (pluginResult.state == 'CLRegionStateInside') { // need toUpperCase(), b/c callback returns with only lowercase values... - setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, true); + setMonitorStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, true); } else if (pluginResult.state == 'CLRegionStateOutside') { - setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, false); + setMonitorStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr, false); } logDebug('[BLE] didDetermineStateForRegion'); logDebug(pluginResultStr); window['cordova'].plugins.locationManager.appendToDeviceLog( '[DOM] didDetermineStateForRegion: ' + pluginResultStr, ); + const beaconRegion = new window['cordova'].plugins.locationManager.BeaconRegion( + STATIC_ID, + pluginResult.region.uuid, + pluginResult.region.major, + pluginResult.region.minor, + ); + window['cordova'].plugins.locationManager + .startRangingBeaconsInRegion(beaconRegion) + .fail(function (e) { + logWarn(e); + }) + .done(); }; delegate.didStartMonitoringForRegion = function (pluginResult) { @@ -127,7 +149,9 @@ const BluetoothScanPage = ({ ...props }: any) => { delegate.didRangeBeaconsInRegion = function (pluginResult) { // Not seeing this called... logDebug('[BLE] didRangeBeaconsInRegion'); - logDebug(JSON.stringify(pluginResult)); + const pluginResultStr = JSON.stringify(pluginResult, null, 2); + logDebug(pluginResultStr); + setRangeStatus(pluginResult.region.uuid.toUpperCase(), pluginResultStr); }; window['cordova'].plugins.locationManager.setDelegate(delegate); @@ -156,7 +180,7 @@ const BluetoothScanPage = ({ ...props }: any) => { setIsScanningBLE(false); beaconsToArray().forEach((sampleBeacon: BLEBeaconDevice) => { - setRangeStatus(sampleBeacon.uuid, false); // "zero out" the beacons + setMonitorStatus(sampleBeacon.uuid, false); // "zero out" the beacons const beaconRegion = new window['cordova'].plugins.locationManager.BeaconRegion( STATIC_ID, sampleBeacon.uuid, diff --git a/www/js/types/BluetoothDevices.ts b/www/js/types/BluetoothDevices.ts index 221b4ecdd..c29f55740 100644 --- a/www/js/types/BluetoothDevices.ts +++ b/www/js/types/BluetoothDevices.ts @@ -26,7 +26,8 @@ export type BLEDeviceList = { identifier: string; minor: number; major: number; - result: string; + monitorResult: string; + rangeResult: string; in_range: boolean; }; };