update readme
This commit is contained in:
lucadruda
Родитель
576905d1f8
Коммит
701d0c87c7
50
README.md
50
README.md
|
|
@ -7,14 +7,13 @@ develop: [ and registered health platforms (Apple Health Kit, Google Fit). It can also receive properties and commands to demonstrate basic functionalities.
|
||||
An useful tool to start playing with Azure IoT Central without using a real IoT device. The smartphone or tablet can send telemetry data from its embedded sensors (accelerometer, gyroscope...) and Bluetooth-LowEnergy (BLE) devices. It can also receive properties and commands to demonstrate basic functionalities.
|
||||
|
||||
## Features
|
||||
|
||||
The main features of the app are:
|
||||
|
||||
- Telemetry data from real embedded sensors and health platform records.
|
||||
- Real-time charts.
|
||||
- Sample properties (readonly and writeable).
|
||||
- Commands handling to enable/disable telemetry items and set their sending interval.
|
||||
- Commands logs to trace data in app.
|
||||
|
|
@ -25,26 +24,39 @@ The main features of the app are:
|
|||
The application is available for both Android and iOS.
|
||||
It can be run on simulator as well (Android Studio or Xcode required). In this case, sensor data is randomly generated.
|
||||
|
||||
|
||||
### Required tools
|
||||
See [React Native Getting Started](https://reactnative.dev/docs/getting-started)
|
||||
and click on React Native CLI Quickstart for more detailed instructions.
|
||||
"Installing dependencies" is the section that explains
|
||||
developer setup. If you are developing on Windows for Android you will need:
|
||||
|
||||
1. Node.JS (12+)
|
||||
1. Java SE Development Kit (JDK 8+)
|
||||
1. Python 3.7+
|
||||
1. Android Studio
|
||||
1. React Native command line interface
|
||||
1. Npm or Yarn
|
||||
|
||||
To set up a real device for development, follow the instructions for device setup [here.](https://reactnative.dev/docs/running-on-device)
|
||||
|
||||
## Installation
|
||||
### Setup
|
||||
```shell
|
||||
git clone https://github.com/Azure/iot-central-paad
|
||||
cd iot-central-paad
|
||||
npm install
|
||||
```
|
||||
|
||||
#### iOS
|
||||
Install pods
|
||||
```shell
|
||||
cd ios && pod install
|
||||
```
|
||||
|
||||
### Build source code
|
||||
Source code can be validated and formatted to ensure js bundle gets correctly generated. However this does not guarantee the application can run as expected on each platform due to the various native modules. Always run the application on simulators to check functionalities.
|
||||
|
||||
#### Format, Lint and Typescript compile:
|
||||
```shell
|
||||
npm run build
|
||||
```
|
||||
|
||||
#### Run Android
|
||||
```shell
|
||||
# runs on default simulator (as configured in Android Studio)
|
||||
npm run android
|
||||
|
||||
```
|
||||
|
||||
#### Run iOS
|
||||
```shell
|
||||
# runs on default simulator (as configured in XCode)
|
||||
npm run ios
|
||||
|
||||
# runs on specific device
|
||||
npm run ios --device <device-id>
|
||||
```
|
||||
|
|
@ -34,6 +34,32 @@ import BottomPopup from 'components/bottomPopup';
|
|||
import {CircleSnail} from 'react-native-progress';
|
||||
import {Literal, StyleDefinition} from 'types';
|
||||
|
||||
const getCardValue = ({
|
||||
uploading,
|
||||
fileSize,
|
||||
fileName,
|
||||
uploadStatus,
|
||||
setUploading,
|
||||
}: {
|
||||
uploading: boolean;
|
||||
fileSize: string;
|
||||
fileName: string;
|
||||
uploadStatus?: boolean;
|
||||
setUploading: ISetBooleanFunctions;
|
||||
}) => {
|
||||
if (uploading) {
|
||||
return () => (
|
||||
<UploadProgress
|
||||
fileSize={fileSize}
|
||||
filename={fileName}
|
||||
uploadStatus={uploadStatus}
|
||||
setUploading={setUploading}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return () => <UploadIcon />;
|
||||
};
|
||||
|
||||
export default function FileUpload() {
|
||||
const {colors} = useTheme();
|
||||
const [client] = useIoTCentralClient();
|
||||
|
|
@ -120,7 +146,6 @@ export default function FileUpload() {
|
|||
if (!curfileName && Platform.OS === 'ios') {
|
||||
curfileName = response.assets?.[0].uri?.split('/').pop();
|
||||
}
|
||||
console.log(`Current file name: ${curfileName}`);
|
||||
try {
|
||||
append({
|
||||
eventName: 'FILE UPLOAD',
|
||||
|
|
@ -183,18 +208,13 @@ export default function FileUpload() {
|
|||
enabled={false}
|
||||
title=""
|
||||
onPress={setShowSelector.True}
|
||||
value={
|
||||
uploading
|
||||
? () => (
|
||||
<UploadProgress
|
||||
fileSize={fileSize}
|
||||
filename={fileName}
|
||||
uploadStatus={uploadStatus}
|
||||
setUploading={setUploading}
|
||||
/>
|
||||
)
|
||||
: () => <UploadIcon />
|
||||
}
|
||||
value={getCardValue({
|
||||
uploading,
|
||||
fileSize,
|
||||
fileName,
|
||||
uploadStatus,
|
||||
setUploading,
|
||||
})}
|
||||
/>
|
||||
</View>
|
||||
|
||||
|
|
|
|||
185
src/Home.tsx
185
src/Home.tsx
|
|
@ -49,6 +49,111 @@ import {BluetoothPage} from 'bluetooth/Bluetooth';
|
|||
|
||||
const Tab = createBottomTabNavigator<NavigationScreens>();
|
||||
|
||||
const icons: {
|
||||
[x in ScreenNames]: (props: {
|
||||
focused: boolean;
|
||||
color: string;
|
||||
size: number;
|
||||
}) => React.ReactNode;
|
||||
} = {
|
||||
[Screens.TELEMETRY_SCREEN]: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
size={size}
|
||||
color={color}
|
||||
icon={
|
||||
Platform.select({
|
||||
ios: {
|
||||
name: 'stats-chart-outline',
|
||||
type: 'ionicon',
|
||||
},
|
||||
android: {
|
||||
name: 'chart-bar',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon
|
||||
}
|
||||
/>
|
||||
),
|
||||
[Screens.PROPERTIES_SCREEN]: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
size={size}
|
||||
color={color}
|
||||
icon={
|
||||
Platform.select({
|
||||
ios: {
|
||||
name: 'create-outline',
|
||||
type: 'ionicon',
|
||||
},
|
||||
android: {
|
||||
name: 'playlist-edit',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon
|
||||
}
|
||||
/>
|
||||
),
|
||||
[Screens.HEALTH_SCREEN]: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
size={size}
|
||||
color={color}
|
||||
icon={
|
||||
{
|
||||
name: 'heartbeat',
|
||||
type: 'font-awesome',
|
||||
} as IIcon
|
||||
}
|
||||
/>
|
||||
),
|
||||
[Screens.FILE_UPLOAD_SCREEN]: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
size={size}
|
||||
color={color}
|
||||
icon={
|
||||
Platform.select({
|
||||
ios: {
|
||||
name: 'cloud-upload-outline',
|
||||
type: 'ionicon',
|
||||
},
|
||||
android: {
|
||||
name: 'cloud-upload-outline',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon
|
||||
}
|
||||
/>
|
||||
),
|
||||
[Screens.LOGS_SCREEN]: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
size={size}
|
||||
color={color}
|
||||
icon={
|
||||
Platform.select({
|
||||
ios: {
|
||||
name: 'console',
|
||||
type: 'material-community',
|
||||
},
|
||||
android: {
|
||||
name: 'console',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon
|
||||
}
|
||||
/>
|
||||
),
|
||||
[Screens.BLUETOOTH_STACK]: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
size={size}
|
||||
color={color}
|
||||
icon={
|
||||
{
|
||||
name: 'bluetooth',
|
||||
type: 'material-community',
|
||||
} as IIcon
|
||||
}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
const Root = React.memo<{
|
||||
route: RouteProp<
|
||||
Record<string, NavigationParams & {previousScreen?: string}>,
|
||||
|
|
@ -81,58 +186,6 @@ const Root = React.memo<{
|
|||
);
|
||||
const [iotcentralClient] = useIoTCentralClient(onConnectionRefresh);
|
||||
|
||||
const iconsRef = useRef<{[x in ScreenNames]: IIcon}>({
|
||||
[Screens.TELEMETRY_SCREEN]: Platform.select({
|
||||
ios: {
|
||||
name: 'stats-chart-outline',
|
||||
type: 'ionicon',
|
||||
},
|
||||
android: {
|
||||
name: 'chart-bar',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon,
|
||||
[Screens.PROPERTIES_SCREEN]: Platform.select({
|
||||
ios: {
|
||||
name: 'create-outline',
|
||||
type: 'ionicon',
|
||||
},
|
||||
android: {
|
||||
name: 'playlist-edit',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon,
|
||||
[Screens.HEALTH_SCREEN]: {
|
||||
name: 'heartbeat',
|
||||
type: 'font-awesome',
|
||||
} as IIcon,
|
||||
[Screens.FILE_UPLOAD_SCREEN]: Platform.select({
|
||||
ios: {
|
||||
name: 'cloud-upload-outline',
|
||||
type: 'ionicon',
|
||||
},
|
||||
android: {
|
||||
name: 'cloud-upload-outline',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon,
|
||||
[Screens.LOGS_SCREEN]: Platform.select({
|
||||
ios: {
|
||||
name: 'console',
|
||||
type: 'material-community',
|
||||
},
|
||||
android: {
|
||||
name: 'console',
|
||||
type: 'material-community',
|
||||
},
|
||||
}) as IIcon,
|
||||
[Screens.BLUETOOTH_STACK]: {
|
||||
name: 'bluetooth',
|
||||
type: 'material-community',
|
||||
},
|
||||
});
|
||||
|
||||
const icons = iconsRef.current;
|
||||
const sensorRef = useRef(sensors);
|
||||
// const healthRef = useRef(healths);
|
||||
|
||||
|
|
@ -311,9 +364,7 @@ const Root = React.memo<{
|
|||
<Tab.Screen
|
||||
name={Screens.TELEMETRY_SCREEN}
|
||||
options={{
|
||||
tabBarIcon: ({color, size}) => (
|
||||
<TabBarIcon icon={icons.Telemetry} color={color} size={size} />
|
||||
),
|
||||
tabBarIcon: icons.Telemetry,
|
||||
}}>
|
||||
{getCardView(sensors, 'Telemetry')}
|
||||
</Tab.Screen>
|
||||
|
|
@ -329,9 +380,7 @@ const Root = React.memo<{
|
|||
<Tab.Screen
|
||||
name={Screens.PROPERTIES_SCREEN}
|
||||
options={{
|
||||
tabBarIcon: ({color, size}) => (
|
||||
<TabBarIcon icon={icons.Properties} color={color} size={size} />
|
||||
),
|
||||
tabBarIcon: icons.Properties,
|
||||
}}>
|
||||
{propertiesLoading
|
||||
? () => (
|
||||
|
|
@ -377,13 +426,7 @@ const Root = React.memo<{
|
|||
name={Screens.BLUETOOTH_STACK}
|
||||
component={BluetoothPage}
|
||||
options={{
|
||||
tabBarIcon: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
icon={icons[Screens.BLUETOOTH_STACK]}
|
||||
color={color}
|
||||
size={size}
|
||||
/>
|
||||
),
|
||||
tabBarIcon: icons.Bluetooth,
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
@ -391,22 +434,14 @@ const Root = React.memo<{
|
|||
name={Screens.FILE_UPLOAD_SCREEN}
|
||||
component={FileUpload}
|
||||
options={{
|
||||
tabBarIcon: ({color, size}) => (
|
||||
<TabBarIcon
|
||||
icon={icons['Image Upload']}
|
||||
color={color}
|
||||
size={size}
|
||||
/>
|
||||
),
|
||||
tabBarIcon: icons['Image Upload'],
|
||||
}}
|
||||
/>
|
||||
<Tab.Screen
|
||||
name={Screens.LOGS_SCREEN}
|
||||
component={Logs}
|
||||
options={{
|
||||
tabBarIcon: ({color, size}) => (
|
||||
<TabBarIcon icon={icons.Logs} color={color} size={size} />
|
||||
),
|
||||
tabBarIcon: icons.Logs,
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче