Skip to content

E
EMidWife
Commit b2eef9e6 authored by Devin B's avatar Devin B
Browse files
Options

Skin_3D_Model

parent 1044da14
Hide whitespace changes
Inline Side-by-side
Showing with 1332 additions and 18 deletions
src/constants/imgs.js
View file @ b2eef9e6
......@@ -14,5 +14,6 @@ export default {
sk_9: require('../assets/sk_9.png'),
sk_11: require ('../assets/sk_11.png'),
sk_10: require('../assets/sk_10.png'),
sk_14: require('../assets/sk_14.png'),
sk_4: require('../screens/home/skin/sd.mp4'),
};
src/constants/routes.js
View file @ b2eef9e6
......@@ -27,7 +27,12 @@ export default {
SKIN_UPLOAD: 'Skin_Upload',
SKIN_VIDEO: 'Skin_Video',
SKIN_RISK: 'Skin_Risk',
VIDEO: 'video',
SKIN_VIDEO1: 'Skin_Video1',
SKIN_VIDEO2: 'Skin_Video2',
SKIN_VIDEO3: 'Skin_Video3',
SKIN_VIDEO4: 'Skin_Video4',
SKIN_VIDEO5: 'Skin_Video5',
};
src/navigations/SkinNavigator.js
View file @ b2eef9e6
......@@ -4,7 +4,11 @@ import WelcomeSkin from '../screens/home/skin/WelcomeSkin';
import Camera from '../screens/home/skin/SkinUploader';
import AdditionalSymptoms from '../screens/home/skin/AdditionalSymptoms';
import SkinRisk from '../screens/home/skin/SkinRisk';
import Video from 'react-native-video';
import AdditionalSymptoms1 from '../screens/home/skin/AdditionalSymptoms1';
import AdditionalSymptoms2 from '../screens/home/skin/AdditionalSymptoms2';
import AdditionalSymptoms3 from '../screens/home/skin/AdditionalSymptoms3';
import AdditionalSymptoms4 from '../screens/home/skin/AdditionalSymptoms4';
import AdditionalSymptoms5 from '../screens/home/skin/AdditionalSymptoms5';
import {COLORS, ROUTES} from "../constants"
const Stack = createStackNavigator();
......@@ -19,7 +23,12 @@ function SkinNavigator() {
<Stack.Screen name={ROUTES.SKIN_UPLOAD} component={Camera} />
<Stack.Screen name={ROUTES.SKIN_VIDEO} component={AdditionalSymptoms} />
<Stack.Screen name={ROUTES.SKIN_RISK} component={SkinRisk} />
<Stack.Screen name={ROUTES.VIDEO} component={Video} />
<Stack.Screen name={ROUTES.SKIN_VIDEO1} component={AdditionalSymptoms1} />
<Stack.Screen name={ROUTES.SKIN_VIDEO2} component={AdditionalSymptoms2} />
<Stack.Screen name={ROUTES.SKIN_VIDEO3} component={AdditionalSymptoms3} />
<Stack.Screen name={ROUTES.SKIN_VIDEO4} component={AdditionalSymptoms4} />
<Stack.Screen name={ROUTES.SKIN_VIDEO5} component={AdditionalSymptoms5} />
</Stack.Navigator>
......
src/screens/home/skin/AdditionalSymptoms.js
View file @ b2eef9e6
......@@ -40,9 +40,10 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Additional Symptoms</Text>
<Text style={styles.topicText}>Discoid Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
</Text>
<View style={styles.videoContainer}>
<Video
......@@ -55,7 +56,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
......@@ -66,21 +67,21 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Symptom one</Text>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Symptom two</Text>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Symptom three</Text>
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
......@@ -213,6 +214,26 @@ const styles = StyleSheet.create({
elevation: 6,
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms1.js 0 → 100644
View file @ b2eef9e6
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const handleLoad = () => {
setLoading(false);
};
const handleBuffer = () => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
}));
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
</Text>
<View style={styles.videoContainer}>
<Video
source={require("./sd.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
},
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
},
checkboxRow: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkboxText: {
fontSize: 16,
marginLeft: 8,
},
submitButton: {
backgroundColor: COLORS.primary,
borderRadius: 20,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
},
video: {
width: '100%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
elevation: 6,
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
src/screens/home/skin/AdditionalSymptoms2.js 0 → 100644
View file @ b2eef9e6
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const handleLoad = () => {
setLoading(false);
};
const handleBuffer = () => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
}));
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Maculopapular Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
</Text>
<View style={styles.videoContainer}>
<Video
source={require("./sd.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
},
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
},
checkboxRow: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkboxText: {
fontSize: 16,
marginLeft: 8,
},
submitButton: {
backgroundColor: COLORS.primary,
borderRadius: 20,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
},
video: {
width: '100%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
elevation: 6,
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
src/screens/home/skin/AdditionalSymptoms3.js 0 → 100644
View file @ b2eef9e6
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const handleLoad = () => {
setLoading(false);
};
const handleBuffer = () => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
}));
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
</Text>
<View style={styles.videoContainer}>
<Video
source={require("./sd.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
},
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
},
checkboxRow: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkboxText: {
fontSize: 16,
marginLeft: 8,
},
submitButton: {
backgroundColor: COLORS.primary,
borderRadius: 20,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
},
video: {
width: '100%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
elevation: 6,
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
src/screens/home/skin/AdditionalSymptoms4.js 0 → 100644
View file @ b2eef9e6
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const handleLoad = () => {
setLoading(false);
};
const handleBuffer = () => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
}));
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Patechiae Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
</Text>
<View style={styles.videoContainer}>
<Video
source={require("./sd.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
},
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
},
checkboxRow: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkboxText: {
fontSize: 16,
marginLeft: 8,
},
submitButton: {
backgroundColor: COLORS.primary,
borderRadius: 20,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
},
video: {
width: '100%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
elevation: 6,
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
src/screens/home/skin/AdditionalSymptoms5.js 0 → 100644
View file @ b2eef9e6
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const handleLoad = () => {
setLoading(false);
};
const handleBuffer = () => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
}));
};
const handleSubmit = () => {
// Handle the submission of symptoms
console.log(selectedSymptoms);
// Navigate or perform next steps
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Herpes HPV Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
</Text>
<View style={styles.videoContainer}>
<Video
source={require("./sd.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
// This creates the curve effect for the background
},
topicText: {
fontSize: 24,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
},
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
},
checkboxLabel: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
},
checkboxRow: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkboxText: {
fontSize: 16,
marginLeft: 8,
},
submitButton: {
backgroundColor: COLORS.primary,
borderRadius: 20,
padding: 15,
marginVertical: 20,
width: '90%',
alignSelf: 'center',
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
videoContainer: {
width: '100%',
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
},
video: {
width: '100%',
height: '100%',
},
individualCheckboxContainer: {
backgroundColor: COLORS.white, // Set the background color to white
borderRadius: 10, // Set border radius for rounded corners
padding: 10, // Add some padding around the content
marginBottom: 10, // Add bottom margin for spacing between items
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
elevation: 6,
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
// ... possibly other styles
});
export default AdditionalSymptomsScreen;
src/screens/home/skin/SkinRisk.js
View file @ b2eef9e6
import React, { useState } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView } from 'react-native';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image } from 'react-native';
// import Video from 'react-native-video'; // or any other audio player you prefer
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import { COLORS, IMGS, ROUTES } from '../../../constants';
import Button from '../../../components/Button';
import Video from 'react-native-video';
const RiskEvaluationScreen = ({ navigation }) => {
const [audioPaused, setAudioPaused] = useState(true);
// Function to handle the continuation to the next screen
const handleContinue = () => {
// navigation.navigate('NextScreenRoute');
......@@ -19,12 +24,22 @@ const RiskEvaluationScreen = ({ navigation }) => {
Your Condition Risk Level: High,Low will be displayed below
</Text>
<Text style={styles.subTopicText}>Why High Risk ?</Text>
{/* You will replace this Video component with your audio player component */}
{/* <Video
source={{ uri: 'path_to_your_audio_file.mp3' }} // The URI of your audio file
<View style={styles.audioPlayerContainer}>
<Video
source={require("./sk_13.mp3")}
style={styles.audioPlayer}
// Other props for the audio player as needed
/> */}
controls={true}
audioOnly={true}
resizeMode="cover" // Cover the audio's aspect ratio
paused={audioPaused}
repeat={true}
onLoad={() => setAudioPaused(false)}
/>
</View>
<Image style={styles.babyImage} source={IMGS.sk_14} />
<View style={styles.resultBox}>
<Text style={styles.resultText}>High Risk</Text>
</View>
......@@ -33,7 +48,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO)}
onPress={handleContinue}
/>
</View>
</View>
......@@ -141,8 +156,34 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, // Shadow radius for iOS
elevation: 5, // Elevation for Android
alignSelf: 'center',
marginTop: 170, // Adjust the margin to fit your layout
marginTop: 148, // Adjust the margin to fit your layout
marginLeft:20
},
audioPlayerContainer: {
width: '90%',
height: 50, // Set a fixed height for the audio player container
alignSelf: 'center',
justifyContent: 'center',
marginTop: 20, // Space between the text and the player
},
audioPlayer: {
width: '100%', // Fill the container width
height: '100%', // Fill the container height
// Add more styles as needed
},
babyImage: {
position: 'absolute', // Use absolute positioning
width: 200,
height: 100,
resizeMode: 'contain',
bottom: 70, // Adjust this value based on the height of your result box + desired gap
alignSelf: 'center', // Center the image horizontally
marginLeft:40,
marginRight:100,
},
});
......
src/screens/home/skin/SkinUploader.js
View file @ b2eef9e6
......@@ -66,6 +66,43 @@ const Camera = ({ navigation }) => {
}
};
const handleContinue = () => {
let route; // Variable to store the route name
// Check the class and assign the route accordingly
if (prediction && prediction.class) {
switch (prediction.class) {
case 'Discoid':
route = ROUTES.SKIN_VIDEO;
break;
case 'Herpes HPV':
route = ROUTES.SKIN_VIDEO5;
break;
case 'Maculopapular':
route = ROUTES.SKIN_VIDEO2;
break;
case 'Melanoma':
route = ROUTES.SKIN_VIDEO3;
break;
case 'patechiae':
route = ROUTES.SKIN_VIDEO4;
break;
case 'PUPP Hives':
route = ROUTES.SKIN_VIDEO1;
break;
default:
route = ROUTES.SKIN_VIDEO1; // Define this route in your ROUTES constant
}
navigation.navigate(route);
} else {
// Handle the scenario where prediction or prediction.class is undefined
// Maybe navigate to an error page or show an alert
console.log("No valid prediction available.");
// navigation.navigate(ROUTES.DEFAULT_ROUTE); // Example fallback
}
};
return (
......@@ -106,7 +143,7 @@ const Camera = ({ navigation }) => {
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_VIDEO)}
onPress={handleContinue}
/>
</View>
</View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment