forked from yudi_xiao/expo-ble-app-demo
416 lines
18 KiB
TypeScript
416 lines
18 KiB
TypeScript
import React from 'react';
|
|
import {Alert, StyleSheet, Button, Switch, ScrollView} from 'react-native';
|
|
import {ThemedText} from '@/components/themed-text';
|
|
import {ThemedView} from '@/components/themed-view';
|
|
import {useBleExplorer} from '@/hooks/useBleExplorer';
|
|
import {useBlePeripheral} from '@/hooks/useBlePeripheral';
|
|
import {BLE_UUIDS, PROTOCOL_VERSION} from '@/ble';
|
|
import ParallaxScrollView from '@/components/parallax-scroll-view';
|
|
import {IconSymbol} from '@/components/ui/icon-symbol';
|
|
|
|
|
|
export default function TabTwoScreen() {
|
|
const [deviceMode, setDeviceMode] = React.useState<'central' | 'peripheral'>('central');
|
|
|
|
|
|
const {
|
|
isScanning,
|
|
isConnected,
|
|
connectedDevice,
|
|
deviceInfo,
|
|
version,
|
|
isActivated,
|
|
transferProgress,
|
|
isTransferring,
|
|
discoveredDevices,
|
|
loading,
|
|
error,
|
|
startScan,
|
|
stopScan,
|
|
connectToDevice,
|
|
disconnectDevice,
|
|
queryActivationStatus,
|
|
queryDeviceVersion,
|
|
requestDeviceInfo,
|
|
updateActivationTime,
|
|
sendIdentityCheck,
|
|
transferSampleFile,
|
|
clearLogs,
|
|
} = useBleExplorer();
|
|
|
|
const {
|
|
isAdvertising,
|
|
connectedCentralCount,
|
|
logs: peripheralLogs,
|
|
deviceInfo: peripheralDeviceInfo,
|
|
loading: peripheralLoading,
|
|
error: peripheralError,
|
|
startAdvertising,
|
|
stopAdvertising,
|
|
getCharacteristicReadValue,
|
|
updateDeviceInfo,
|
|
resetDeviceInfo,
|
|
clearLogs: clearPeripheralLogs,
|
|
} = useBlePeripheral();
|
|
|
|
|
|
return (
|
|
<ParallaxScrollView
|
|
headerBackgroundColor={{light: '#D0D0D0', dark: '#353636'}}
|
|
headerImage={
|
|
<IconSymbol
|
|
size={310}
|
|
color="#808080"
|
|
name="paperplane.fill"
|
|
style={styles.headerImage}
|
|
/>
|
|
}>
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type="title">BLE Explorer</ThemedText>
|
|
</ThemedView>
|
|
|
|
{/* Device Mode Selection */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Device Mode</ThemedText>
|
|
<ThemedView style={styles.modeSwitchContainer}>
|
|
<ThemedText style={styles.modeLabel}>Central</ThemedText>
|
|
<Switch
|
|
value={deviceMode === 'peripheral'}
|
|
onValueChange={async (value) => {
|
|
if (value) {
|
|
// Switching to peripheral mode - stop central operations first
|
|
console.log('Switching to peripheral mode - stopping central operations');
|
|
if (isScanning) {
|
|
await stopScan();
|
|
// Add small delay to ensure cleanup
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
}
|
|
if (isConnected) {
|
|
await disconnectDevice();
|
|
// Add small delay to ensure cleanup
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
}
|
|
} else {
|
|
// Switching to central mode - stop peripheral operations first
|
|
console.log('Switching to central mode - stopping peripheral operations');
|
|
if (isAdvertising) {
|
|
await stopAdvertising();
|
|
// Add small delay to ensure cleanup
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
}
|
|
}
|
|
setDeviceMode(value ? 'peripheral' : 'central');
|
|
}}
|
|
disabled={isScanning || isConnected || isAdvertising || peripheralLoading.advertising}
|
|
/>
|
|
<ThemedText style={styles.modeLabel}>Peripheral</ThemedText>
|
|
</ThemedView>
|
|
<ThemedText style={styles.modeDescription}>
|
|
{deviceMode === 'central'
|
|
? 'Central mode: Scan for and connect to BLE peripherals'
|
|
: `Peripheral mode: Act as BLE receiver`}
|
|
</ThemedText>
|
|
</ThemedView>
|
|
|
|
{deviceMode === 'central' ? (
|
|
<>
|
|
{/* Connection Status */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Connection Status</ThemedText>
|
|
<ThemedText>Scanning: {isScanning ? 'Yes' : 'No'}</ThemedText>
|
|
<ThemedText>Connected: {isConnected ? 'Yes' : 'No'}</ThemedText>
|
|
<ThemedText>Device: {connectedDevice?.name || 'None'}</ThemedText>
|
|
{error && <ThemedText style={styles.errorText}>Error: {error}</ThemedText>}
|
|
</ThemedView>
|
|
|
|
{/* Discovered Devices */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Discovered Devices</ThemedText>
|
|
<ThemedText style={styles.deviceCount}>Total devices
|
|
found: {discoveredDevices.length}</ThemedText>
|
|
{discoveredDevices.length === 0 ? (
|
|
<ThemedText>No devices discovered yet. Start scanning to find devices.</ThemedText>
|
|
) : (
|
|
<ThemedView style={{gap: 8}}>
|
|
{discoveredDevices.map((item) => (
|
|
<ThemedView
|
|
key={item.id}
|
|
style={[styles.deviceItem, item.connected && styles.connectedDevice]}
|
|
lightColor="#eee"
|
|
darkColor="#2a2a2a"
|
|
>
|
|
<ThemedView style={styles.deviceInfo} lightColor="transparent"
|
|
darkColor="transparent">
|
|
<ThemedText style={item.connected && styles.connectedDeviceText}>
|
|
{item.name || 'Unknown Device'}
|
|
</ThemedText>
|
|
<ThemedText style={styles.deviceId}>{item.id}</ThemedText>
|
|
{item.serviceUUIDs && item.serviceUUIDs.length > 0 && (
|
|
<ThemedText style={styles.serviceUuids}>
|
|
Services: {item.serviceUUIDs.join(', ')}
|
|
</ThemedText>
|
|
)}
|
|
{item.connected && (
|
|
<ThemedText style={styles.connectionStatus}>Connected</ThemedText>
|
|
)}
|
|
</ThemedView>
|
|
<Button
|
|
title={loading.connecting ? 'Connecting...' : (item.connected ? 'Connected' : 'Connect')}
|
|
onPress={() => connectToDevice(item)}
|
|
disabled={isConnected || loading.connecting || item.connected}
|
|
/>
|
|
</ThemedView>
|
|
))}
|
|
</ThemedView>
|
|
)}
|
|
</ThemedView>
|
|
|
|
{/* Device Info */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Device Information</ThemedText>
|
|
<ThemedText>Activated: {isActivated ? 'Yes' : 'No'}</ThemedText>
|
|
<ThemedText>Version: {version || 'Unknown'}</ThemedText>
|
|
{deviceInfo && (
|
|
<>
|
|
<ThemedText>Name: {deviceInfo.devname}</ThemedText>
|
|
<ThemedText>Total Space: {deviceInfo.allspace} KB</ThemedText>
|
|
<ThemedText>Free Space: {deviceInfo.freespace} KB</ThemedText>
|
|
<ThemedText>Brand: {deviceInfo.brand}</ThemedText>
|
|
</>
|
|
)}
|
|
</ThemedView>
|
|
|
|
{/* Transfer Status */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">File Transfer</ThemedText>
|
|
<ThemedText>Transferring: {isTransferring ? 'Yes' : 'No'}</ThemedText>
|
|
<ThemedText>Progress: {transferProgress}%</ThemedText>
|
|
</ThemedView>
|
|
|
|
{/* Control Buttons */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Controls</ThemedText>
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button title={isScanning ? 'Stop Scan' : 'Start Scan'}
|
|
onPress={isScanning ? stopScan : startScan}/>
|
|
<Button
|
|
title="Disconnect"
|
|
onPress={disconnectDevice}
|
|
disabled={!isConnected}
|
|
/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button
|
|
title={loading.querying ? 'Querying...' : 'Query Activation'}
|
|
onPress={queryActivationStatus}
|
|
disabled={!isConnected || loading.querying}
|
|
/>
|
|
<Button title={loading.querying ? 'Querying...' : 'Query Version'}
|
|
onPress={queryDeviceVersion} disabled={!isConnected || loading.querying}/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button
|
|
title={loading.querying ? 'Querying...' : 'Device Info'}
|
|
onPress={requestDeviceInfo}
|
|
disabled={!isConnected || loading.querying}
|
|
/>
|
|
<Button title="Update Time" onPress={updateActivationTime} disabled={!isConnected}/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button title="Identity Check (Valid)" onPress={() => sendIdentityCheck()}
|
|
disabled={!isConnected}/>
|
|
<Button title="Identity Check (Invalid)" onPress={() => sendIdentityCheck()}
|
|
disabled={!isConnected}/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button
|
|
title={loading.transferring ? 'Transferring...' : 'Transfer File'}
|
|
onPress={transferSampleFile}
|
|
disabled={!isConnected || loading.transferring}
|
|
/>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
</>
|
|
) : (
|
|
<>
|
|
{/* Peripheral Status */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Peripheral Status</ThemedText>
|
|
<ThemedText>Advertising: {isAdvertising ? 'Yes' : 'No'}</ThemedText>
|
|
<ThemedText>Connected Centrals: {connectedCentralCount}</ThemedText>
|
|
{peripheralError && <ThemedText style={styles.errorText}>Error: {peripheralError}</ThemedText>}
|
|
</ThemedView>
|
|
|
|
{/* Device Information */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Device Information</ThemedText>
|
|
<ThemedText>Activated: {peripheralDeviceInfo.activated ? 'Yes' : 'No'}</ThemedText>
|
|
<ThemedText>Version: {peripheralDeviceInfo.version || 'Unknown'}</ThemedText>
|
|
<ThemedText>Name: {peripheralDeviceInfo.devname || 'Unknown Device'}</ThemedText>
|
|
<ThemedText>Total Space: {peripheralDeviceInfo.allspace || 0} KB</ThemedText>
|
|
<ThemedText>Free Space: {peripheralDeviceInfo.freespace || 0} KB</ThemedText>
|
|
<ThemedText>Brand: {peripheralDeviceInfo.brand || 'Unknown'}</ThemedText>
|
|
</ThemedView>
|
|
|
|
{/* Peripheral Controls */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Peripheral Controls</ThemedText>
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button
|
|
title={peripheralLoading.advertising ? 'Starting...' : 'Start Advertising'}
|
|
onPress={startAdvertising}
|
|
disabled={isAdvertising || peripheralLoading.advertising}
|
|
/>
|
|
<Button title="Stop Advertising" onPress={stopAdvertising} disabled={!isAdvertising}/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button
|
|
title="Test Read Response"
|
|
onPress={() => getCharacteristicReadValue(BLE_UUIDS.READ_CHARACTERISTIC)}
|
|
disabled={!isAdvertising}
|
|
/>
|
|
<Button title="Reset Device Info" onPress={resetDeviceInfo}/>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.buttonRow}>
|
|
<Button title="Toggle Activation"
|
|
onPress={() => updateDeviceInfo({activated: !(peripheralDeviceInfo.activated ?? false)})}/>
|
|
<Button title="Update Free Space"
|
|
onPress={() => updateDeviceInfo({freespace: Math.floor(Math.random() * 1024)})}/>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
|
|
{/* Peripheral Logs */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedView style={styles.logHeader}>
|
|
<ThemedText type="subtitle">Peripheral Logs</ThemedText>
|
|
<Button title="Clear" onPress={clearPeripheralLogs}/>
|
|
</ThemedView>
|
|
<ThemedView style={styles.logContainer} lightColor="#eee" darkColor="#2a2a2a">
|
|
<ScrollView nestedScrollEnabled={false} showsVerticalScrollIndicator={true}>
|
|
{peripheralLogs.map((log, index) => (
|
|
<ThemedText key={index} style={styles.logText}>
|
|
{log}
|
|
</ThemedText>
|
|
))}
|
|
</ScrollView>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
</>
|
|
)}
|
|
|
|
{/* Protocol Info - Available in both modes */}
|
|
<ThemedView style={styles.section}>
|
|
<ThemedText type="subtitle">Protocol Information</ThemedText>
|
|
<ThemedText>Version: {PROTOCOL_VERSION}</ThemedText>
|
|
<ThemedText>Service UUID: {BLE_UUIDS.SERVICE}</ThemedText>
|
|
<ThemedText>Write UUID: {BLE_UUIDS.WRITE_CHARACTERISTIC}</ThemedText>
|
|
<ThemedText>Read UUID: {BLE_UUIDS.READ_CHARACTERISTIC}</ThemedText>
|
|
</ThemedView>
|
|
</ParallaxScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
headerImage: {
|
|
color: '#808080',
|
|
bottom: -90,
|
|
left: -35,
|
|
position: 'absolute',
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
section: {
|
|
gap: 8,
|
|
marginBottom: 8,
|
|
},
|
|
buttonRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 8,
|
|
gap: 8,
|
|
},
|
|
logHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: 8,
|
|
},
|
|
logContainer: {
|
|
maxHeight: 200,
|
|
padding: 8,
|
|
borderRadius: 4,
|
|
},
|
|
logText: {
|
|
fontSize: 12,
|
|
marginBottom: 2,
|
|
},
|
|
deviceItem: {
|
|
padding: 12,
|
|
marginBottom: 8,
|
|
borderRadius: 8,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
deviceInfo: {
|
|
flex: 1,
|
|
marginRight: 12,
|
|
},
|
|
deviceId: {
|
|
fontSize: 12,
|
|
opacity: 0.7,
|
|
},
|
|
deviceCount: {
|
|
fontSize: 14,
|
|
opacity: 0.8,
|
|
marginTop: 4,
|
|
marginBottom: 8,
|
|
fontWeight: '500',
|
|
},
|
|
serviceUuids: {
|
|
fontSize: 11,
|
|
opacity: 0.6,
|
|
marginTop: 2,
|
|
fontStyle: 'italic',
|
|
},
|
|
connectionStatus: {
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
marginTop: 4,
|
|
},
|
|
connectedDevice: {
|
|
borderWidth: 1,
|
|
borderColor: '#4CAF50',
|
|
},
|
|
connectedDeviceText: {
|
|
fontWeight: 'bold',
|
|
},
|
|
errorText: {
|
|
marginTop: 8,
|
|
fontWeight: 'bold',
|
|
},
|
|
modeSwitchContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginVertical: 12,
|
|
},
|
|
modeLabel: {
|
|
fontSize: 16,
|
|
marginHorizontal: 8,
|
|
},
|
|
modeDescription: {
|
|
fontSize: 12,
|
|
opacity: 0.7,
|
|
marginTop: 8,
|
|
},
|
|
});
|