-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(settings): add a simple settings menu to the objectdetection sam…
…ple (#79) * feat(settings): add slider ui for max results and score threshold * feat(settings): add in pickers for delegate and model selections * feat(settings): create an applications state and modify settings there * feat(settings): get ios version working * fix(settings): get picker working on Android * fix(settings): make the camera stream respect settings * fix(settings): use debounce to prevent reloading the object detector too frequently * fix(settings): get ios working with settings This reverts commit 075206b. * fix(settings): comment out model chooser temporarily * fix(image-picker): update podfile
- Loading branch information
Showing
9 changed files
with
2,335 additions
and
903 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,127 @@ | ||
| import type { BottomTabScreenProps } from "@react-navigation/bottom-tabs"; | ||
| import React from "react"; | ||
| import { View, Text } from "react-native"; | ||
| import { View, Text, StyleSheet } from "react-native"; | ||
| import type { RootTabParamList } from "./navigation"; | ||
| import Slider from "@react-native-community/slider"; | ||
| import RNPickerSelect from "react-native-picker-select"; | ||
| import { Delegate } from "react-native-mediapipe"; | ||
| import { useSettings } from "./app-settings"; | ||
|
|
||
| type SlidersComponentProps = { | ||
| label: string; | ||
| value: number; | ||
| setValue: (value: number) => void; | ||
| minValue?: number; | ||
| maxValue?: number; | ||
| }; | ||
|
|
||
| type SelectComponentProps = { | ||
| label: string; | ||
| value: unknown; | ||
| setValue: (value: unknown) => void; | ||
| items: { label: string; value: unknown }[]; | ||
| }; | ||
|
|
||
| const OptionSlider: React.FC<SlidersComponentProps> = ({ | ||
| label, | ||
| value, | ||
| setValue, | ||
| minValue = 1, | ||
| maxValue = 10, | ||
| }) => { | ||
| return ( | ||
| <View style={styles.item}> | ||
| <Text style={styles.label}> | ||
| {label.replace("${value}", value.toString())} | ||
| </Text> | ||
| <Slider | ||
| value={value} | ||
| onValueChange={setValue} | ||
| minimumValue={minValue} | ||
| maximumValue={maxValue} | ||
| step={1} | ||
| style={styles.slider} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const OptionSelect: React.FC<SelectComponentProps> = ({ | ||
| label, | ||
| value, | ||
| setValue, | ||
| items, | ||
| }) => { | ||
| return ( | ||
| <View style={styles.item}> | ||
| <Text style={styles.label}>{label}</Text> | ||
| <RNPickerSelect | ||
| value={value} | ||
| onValueChange={setValue} | ||
| style={{ inputAndroid: styles.picker, inputIOS: styles.picker }} | ||
| useNativeAndroidPickerStyle={false} | ||
| items={items} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| type Props = BottomTabScreenProps<RootTabParamList, "Settings">; | ||
|
|
||
| export const Settings: React.FC<Props> = () => { | ||
| const { settings, setSettings } = useSettings(); | ||
|
|
||
| return ( | ||
| <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> | ||
| <Text>Settings Placeholder</Text> | ||
| <View style={styles.container}> | ||
| <OptionSelect | ||
| label="Processor: " | ||
| value={settings.processor} | ||
| setValue={(value) => | ||
| setSettings({ ...settings, processor: value as Delegate }) | ||
| } | ||
| items={[ | ||
| { label: "GPU", value: Delegate.GPU }, | ||
| { label: "CPU", value: Delegate.CPU }, | ||
| ]} | ||
| /> | ||
| {/* Disable Model selection temporarily | ||
| <OptionSelect | ||
| label="Model selections: " | ||
| value={settings.model} | ||
| setValue={(value) => | ||
| setSettings({ ...settings, model: value as string }) | ||
| } | ||
| items={[ | ||
| { label: "EfficientDet-Lite0", value: "efficientdet-lite0" }, | ||
| { label: "EfficientDet-Lite2", value: "efficientdet-lite2" }, | ||
| { label: "SSD MobileNetV2", value: "ssd-mobilenetv2" }, | ||
| ]} | ||
| /> */} | ||
| <OptionSlider | ||
| label="Max results: ${value}" | ||
| value={settings.maxResults} | ||
| setValue={(value) => setSettings({ ...settings, maxResults: value })} | ||
| /> | ||
| <OptionSlider | ||
| label="Score threshold: ${value}%" | ||
| value={settings.threshold} | ||
| setValue={(value) => setSettings({ ...settings, threshold: value })} | ||
| minValue={0} | ||
| maxValue={100} | ||
| /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| alignItems: "flex-start", | ||
| justifyContent: "flex-start", | ||
| position: "relative", | ||
| }, | ||
| item: { padding: 10 }, | ||
| slider: { width: 250, height: 40 }, | ||
| picker: { width: 250, height: 40, marginLeft: 15 }, | ||
| label: { marginLeft: 15 }, | ||
| }); |
Oops, something went wrong.