Skip to content

E
EmidWife-New
Commit eded323f authored by Malsha Jayakody's avatar Malsha Jayakody
Browse files
Options

new changes

parent fbc714d4
Hide whitespace changes
Inline Side-by-side
Showing with 754 additions and 691 deletions
src/screens/home/skin/AdditionalSymptoms.js
View file @ eded323f
import React, { useState, useRef, useEffect } from 'react'; import React, {useState, useRef, useEffect} from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native'; import {
import { COLORS ,IMGS, ROUTES} from '../../../constants'; View,
StyleSheet,
Text,
ScrollView,
TouchableOpacity,
ActivityIndicator,
Image,
} from 'react-native';
import {COLORS, IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import {SafeAreaView} from 'react-native-safe-area-context';
import { Dimensions } from 'react-native'; import {Dimensions} from 'react-native';
import { Linking } from 'react-native'; import {Linking} from 'react-native';
const AdditionalSymptomsScreen2 = ({navigation}) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({
symptom1: false,
symptom2: false,
symptom3: false,
symptom4: false,
symptom5: false,
symptom6: false,
symptom7: false,
symptom8: false,
symptom9: false,
symptom10: false,
symptom11: false,
symptom12: false,
symptom13: false,
symptom14: false,
});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const AdditionalSymptomsScreen2 = ({ navigation }) => { const URL_link =
const [selectedSymptoms, setSelectedSymptoms] = useState({ 'https://res.cloudinary.com/dl207ux6g/video/upload/v1715374532/3D/wfu4pr9phnadjqargex4.mp4';
symptom1: false, symptom2: false, symptom3: false, symptom4: false,
symptom5: false, symptom6: false, symptom7: false, symptom8: false,
symptom9: false, symptom10: false, symptom11: false, symptom12: false,
symptom13: false, symptom14: false
});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374532/3D/wfu4pr9phnadjqargex4.mp4"; const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const videoRef = useRef(null); const imageHeight = screenHeight * 0.2;
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{key: 'symptom1', text: 'Headache | හිසරදය'},
{key: 'symptom2', text: 'Shoulder pain | උරහිස් වේදනාව'},
{key: 'symptom3', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව'},
{key: 'symptom4', text: 'Lower Abdomen pain | පහළ උදරයේ වේදනාව'},
],
[
{key: 'symptom5', text: 'Swollen Ankle pain | ඉදිමුණු වළලුකර වේදනාව'},
{key: 'symptom6', text: 'Leg joint pain | පාදයේ සන්ධි වේදනාව'},
{key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව'},
{key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව'},
{key: 'symptom9', text: 'Breast Pain |පියයුරු වේදනාව'},
{key: 'symptom10', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
],
[
{key: 'symptom11', text: 'Upper arm pain | ඉහළ අතේ වේදනාව'},
{key: 'symptom12', text: 'Heart burn | හදවත දැවෙනවා'},
{key: 'symptom13', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
{key: 'symptom14', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
],
// Add more groups as needed
];
const symptomsGroups = [ const handleLoad = () => {
[ setLoading(false);
{ key: 'symptom1', text: 'Headache | හිසරදය' }, };
{ key: 'symptom2', text: 'Shoulder pain | උරහිස් වේදනාව' },
{ key: 'symptom3', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව' },
{ key: 'symptom4', text: 'Lower Abdomen pain | පහළ උදරයේ වේදනාව' },
],
[
{ key: 'symptom5', text: 'Swollen Ankle pain | ඉදිමුණු වළලුකර වේදනාව' },
{ key: 'symptom6', text: 'Leg joint pain | පාදයේ සන්ධි වේදනාව' },
{ key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව' },
{ key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව' },
{ key: 'symptom9', text: 'Breast Pain |පියයුරු වේදනාව'},
{ key: 'symptom10', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
],
[
{ key: 'symptom11', text: 'Upper arm pain | ඉහළ අතේ වේදනාව' },
{ key: 'symptom12', text: 'Heart burn | හදවත දැවෙනවා' },
{ key: 'symptom13', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
{ key: 'symptom14', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
],
// Add more groups as needed
];
const handleLoad = () => { const handleBuffer = () => {
setLoading(false); setLoading(true);
}; };
const handleBuffer = () => { const toggleCheckbox = symptom => {
setLoading(true); setSelectedSymptoms(prevState => ({
}; ...prevState,
[symptom]: !prevState[symptom],
}));
};
const toggleCheckbox = (symptom) => { const handleSubmit = () => {
setSelectedSymptoms(prevState => ({ // Checking for specific symptoms that lead to SKIN_RISK
...prevState, const skinRiskSymptoms = [
[symptom]: !prevState[symptom], 'symptom12',
})); 'symptom5',
}; 'symptom4',
'symptom10',
'symptom8',
'symptom6',
];
const toSkinRisk = skinRiskSymptoms.some(
symptom => selectedSymptoms[symptom],
);
const handleSubmit = () => { // Navigate based on condition
// Checking for specific symptoms that lead to SKIN_RISK if (toSkinRisk) {
const skinRiskSymptoms = ['symptom12', 'symptom5', 'symptom4','symptom10', 'symptom8', 'symptom6']; navigation.navigate(ROUTES.SKIN_RISK, {
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]); origin: 'AdditionalSymptomsScreen2',
});
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
};
// Navigate based on condition const toggleFullscreen = () => {
if (toSkinRisk) { if (videoRef.current) {
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen2' }); if (!fullscreen) {
} else { videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
navigation.navigate(ROUTES.SKIN_INFO); } else {
} videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}; }
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const toggleFullscreen = () => { const togglePlayPause = () => {
if (videoRef.current) { setVideoPaused(!videoPaused);
if (!fullscreen) { showControlsTemporarily(); // Toggle the pause state of the video
videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen };
} else {
videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const togglePlayPause = () => { const showControlsTemporarily = () => {
setVideoPaused(!videoPaused); setControlsVisible(true);
showControlsTemporarily(); // Toggle the pause state of the video if (hideTimer.current) {
}; clearTimeout(hideTimer.current);
}
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
};
const showControlsTemporarily = () => { useEffect(() => {
setControlsVisible(true); return () => {
if (hideTimer.current) { if (hideTimer.current) {
clearTimeout(hideTimer.current); clearTimeout(hideTimer.current);
} }
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
}; };
}, []);
useEffect(() => { return (
return () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}> <ScrollView
<View style={styles.topContainer}> style={styles.scrollContainer}
<Text style={styles.topicText}>Discoid Additional Symptoms </Text> contentContainerStyle={styles.contentContainer}>
<View style={styles.qrCodeBox1}> <View style={styles.topContainer}>
<Image <Text style={styles.topicText}>Discoid Additional Symptoms </Text>
source={IMGS.sk_24} // Make sure the path is correct <View style={styles.qrCodeBox1}>
style={styles.qrCodeImage1} <Image
/> source={IMGS.sk_24} // Make sure the path is correct
<Text style={styles.dscriptionText1}> style={styles.qrCodeImage1}
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත. />
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න. <Text style={styles.dscriptionText1}>
</Text> මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ
<Text style={styles.dscriptionText1}> සඳහා වීඩියෝවක් ලබා දී ඇත. වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය
Check if you have the symptoms listed below. Watch the video for guidance. ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව
If the video is unclear, scan the QR code or click the button to view a 3D model of a woman displaying these symptoms. නිරීක්ෂණය කරන්න.
</Text>
</View>
<Image source={IMGS.sk_25}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -45 ,marginTop:-24}} />
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_26} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text> </Text>
<Text style={styles.dscriptionText1}>
Check if you have the symptoms listed below. Watch the video for
guidance. If the video is unclear, scan the QR code or click the
button to view a 3D model of a woman displaying these symptoms.
</Text>
</View>
<Image
source={IMGS.sk_25}
style={{
width: '50%',
height: imageHeight,
alignSelf: 'center',
resizeMode: 'contain',
marginBottom: -45,
marginTop: -24,
}}
/>
<View style={styles.qrCodeBox}>
<Image
source={IMGS.sk_26} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<TouchableOpacity
style={styles.orButton}
onPress={() =>
Linking.openURL('https://mywebar.com/p/Project_4_lpf4ury2jc')
}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View> </View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}> <TouchableOpacity
<Video style={styles.videoContainer}
onPress={showControlsTemporarily}>
<Video
// ref={videoRef} // ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file source={{uri: URL_link}} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]} style={[styles.video, {height: fullscreen ? '100%' : 300}]}
paused={videoPaused} paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)} onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)} onError={error => console.error('Video playback error:', error)}
/> />
{controlsVisible && ( {controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}> <TouchableOpacity
<Image style={styles.playPauseButton}
onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon} style={styles.playPauseIcon}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19} source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text> <Text style={styles.checkboxLabel}>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text> Check the symptom that you have{' '}
<View style={styles.checkboxContainer}> </Text>
{symptomsGroups.map((group, index) => ( <Text style={styles.checkboxLabel}>
<View key={index}> ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න{' '}
{group.map(symptom => ( </Text>
<View style={styles.individualCheckboxContainer} key={symptom.key}> <View style={styles.checkboxContainer}>
<CheckBox {symptomsGroups.map((group, index) => (
value={selectedSymptoms[symptom.key]} <View key={index}>
onValueChange={() => toggleCheckbox(symptom.key)} {group.map(symptom => (
/> <View
<Text style={styles.checkboxText}>{symptom.text}</Text> style={styles.individualCheckboxContainer}
</View> key={symptom.key}>
))} <CheckBox
{index !== symptomsGroups.length - 1 && ( value={selectedSymptoms[symptom.key]}
<View style={styles.separator} /> onValueChange={() => toggleCheckbox(symptom.key)}
)} />
</View> <Text style={styles.checkboxText}>{symptom.text}</Text>
))} </View>
</View> ))}
</View> {index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
<Button <Button
title="Evaluate the risk level" title="Evaluate the risk level"
style={styles.nextButton} style={styles.nextButton}
onPress={handleSubmit} onPress={handleSubmit}
/> />
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
flexGrow: 1, flexGrow: 1,
}, },
container: { container: {
flexGrow: 1, flexGrow: 1,
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
}, },
topContainer: { topContainer: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
// This creates the curve effect for the background // This creates the curve effect for the background
}, },
topicText: { topicText: {
fontSize: 24, fontSize: 24,
fontWeight: 'bold', fontWeight: 'bold',
color: COLORS.black, color: COLORS.black,
textAlign: 'center', textAlign: 'center',
marginVertical: 20, marginVertical: 20,
}, },
descriptionText: { descriptionText: {
fontSize: 18, fontSize: 18,
textAlign: 'center', textAlign: 'center',
marginHorizontal: 20, marginHorizontal: 20,
marginBottom: 20, marginBottom: 20,
color:COLORS.white, color: COLORS.white,
fontWeight: 'bold', fontWeight: 'bold',
}, },
separator: { separator: {
height: 2, height: 2,
backgroundColor: COLORS.blue, backgroundColor: COLORS.blue,
marginVertical: 10, marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center', alignSelf: 'center',
marginLeft:-197, marginLeft: -197,
},
}, checkboxContainer: {
backgroundColor: COLORS.lightBlue,
checkboxContainer: { borderRadius: 25,
backgroundColor: COLORS.lightBlue, width: '100%', // Ensure it's taking the full width of its parent
borderRadius: 25, alignSelf: 'center', // This ensures it's centered relative to the parent
width: '100%', // Ensure it's taking the full width of its parent paddingTop: 10,
alignSelf: 'center', // This ensures it's centered relative to the parent marginLeft: 197,
paddingTop: 10, },
marginLeft:197, checkboxLabel: {
fontSize: 16,
},
checkboxLabel: {
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
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',
backgroundColor: 'black'
},
video: {
width: '110%',
height: '100%',
},
individualCheckboxContainer: { marginBottom: 10,
backgroundColor: COLORS.white, // Set the background color to white alignSelf: 'center',
borderRadius: 10, // Set border radius for rounded corners color: COLORS.black,
padding: 10, // Add some padding around the content },
marginBottom: 10, // Add bottom margin for spacing between items checkboxRow: {
flexDirection: 'row', // Align checkbox and label in a row flexDirection: 'row',
alignItems: 'center', // Center align items vertically alignItems: 'center',
borderWidth: 0.6, // Optional border width marginBottom: 10,
width: '98%', // Width 100% to fill container width },
marginLeft:-95, checkboxText: {
elevation: 6, fontSize: 16,
minHeight: 50, marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
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',
backgroundColor: 'black',
},
video: {
width: '110%',
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: '98%', // Width 100% to fill container width
marginLeft: -95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: { fullscreenButton: {
marginTop: 10, marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)', backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10, padding: 10,
borderRadius: 5, borderRadius: 5,
}, },
fullscreenButtonText: { fullscreenButtonText: {
color: '#fff', color: '#fff',
}, },
videoBox: { videoBox: {
backgroundColor: '#11324D', // Set background color to white backgroundColor: '#11324D', // Set background color to white
borderWidth: 2, // Set the border width borderWidth: 2, // Set the border width
borderColor: '#80BCBD', // Set the border color borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 40, // Add bottom margin for spacing marginBottom: 40, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
shadowColor: "#000", shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 2, height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
}, },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: { playPauseButton: {
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
left: '50%', left: '50%',
bottom:'30%', bottom: '30%',
transform: [{ translateX: -25 }, { translateY: -25 }], transform: [{translateX: -25}, {translateY: -25}],
width: 50, width: 50,
height: 50, height: 50,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
playPauseIcon: { playPauseIcon: {
width: 50, width: 50,
height: 50, height: 50,
}, },
contentContainer: { contentContainer: {
paddingBottom: 20, // Adds padding at the bottom paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 40,
shadowColor: '#000',
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
}, },
qrCodeBox: { shadowOpacity: 0.25,
width: '90%', shadowRadius: 3.84,
justifyContent: 'center', elevation: 5,
alignItems: 'center', marginTop: 16,
padding: 20, },
backgroundColor: COLORS.white, qrCodeImage: {
marginBottom: 40, width: 200, // Adjust size as needed
shadowColor: "#000", height: 200, // Adjust size as needed
borderColor: '#80BCBD', },
borderWidth: 2, orButton: {
borderRadius: 10, marginTop: 30,
shadowOffset: { backgroundColor: COLORS.primary,
width: 0, padding: 10,
height: 2, borderRadius: 5,
}, alignItems: 'center',
shadowOpacity: 0.25, justifyContent: 'center',
shadowRadius: 3.84, },
elevation: 5, orButtonText: {
marginTop:16 color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
},
qrCodeBox1: {
width: '95%',
justifyContent: 'center',
alignItems: 'center',
padding: 30,
backgroundColor: COLORS.white,
marginBottom: 40,
shadowColor: '#000',
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
}, },
qrCodeImage: { shadowOpacity: 0.25,
width: 200, // Adjust size as needed shadowRadius: 3.84,
height: 200, // Adjust size as needed elevation: 10,
}, marginTop: 10,
orButton: { },
marginTop: 30,
backgroundColor: COLORS.primary, qrCodeImage1: {
padding: 10, width: 210, // Adjust size as needed
borderRadius: 5, height: 170,
alignItems: 'center', },
justifyContent: 'center', dscriptionText1: {
}, fontSize: 14,
orButtonText: { textAlign: 'center',
color: COLORS.white, color: COLORS.darkGray,
fontSize: 14, marginTop: 20,
fontWeight: 'bold', marginBottom: 20,
}, },
qrCodeBox1: {
width: '95%',
justifyContent: 'center',
alignItems: 'center',
padding: 30,
backgroundColor: COLORS.white,
marginBottom: 40,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 10,
marginTop:10
},
qrCodeImage1:{
width: 210, // Adjust size as needed
height: 170,
},
dscriptionText1: {
fontSize: 14,
textAlign: 'center',
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
// ... possibly other styles
// ... possibly other styles
}); });
export default AdditionalSymptomsScreen2; export default AdditionalSymptomsScreen2;
src/screens/home/skin/SkinUploader.js
View file @ eded323f
import React, { useState } from 'react'; import React, {useState} from 'react';
import { View, StyleSheet, Image, TouchableOpacity, PermissionsAndroid, Text, ScrollView } from 'react-native'; import {
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'; View,
import { COLORS, IMGS, ROUTES } from '../../../constants'; StyleSheet,
Image,
TouchableOpacity,
PermissionsAndroid,
Text,
ScrollView,
ActivityIndicator,
} from 'react-native';
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';
import {COLORS, IMGS, ROUTES} from '../../../constants';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import axios from 'axios'; // Import Axios import axios from 'axios'; // Import Axios
const Camera = ({ navigation }) => { const Camera = ({navigation}) => {
const [cameraPhoto, setCameraPhoto] = useState(); const [cameraPhoto, setCameraPhoto] = useState();
const [galleryPhoto, setGalleryPhoto] = useState(); const [galleryPhoto, setGalleryPhoto] = useState();
const REACT_APP_API_URL='https://us-central1-skin-condition-detection.cloudfunctions.net/predict'; const REACT_APP_API_URL =
const [prediction, setPrediction] = useState(null); 'https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
const [prediction, setPrediction] = useState(null);
const [loading, setLoading] = useState(false);
const [photo, setPhoto] = useState(null);
const [photo, setPhoto] = useState(null); let options = {
saveToPhotos: true,
mediaType: 'photo',
};
const openCamera = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
const result = await launchCamera(options);
if (result.assets) {
setPhoto(result.assets[0].uri);
submitPhoto(result.assets[0].uri);
}
}
};
const openGallery = async () => {
const result = await launchImageLibrary(options);
if (result.assets) {
setPhoto(result.assets[0].uri);
submitPhoto(result.assets[0].uri);
}
};
let options = { const submitPhoto = async photoUri => {
saveToPhotos: true, try {
mediaType: 'photo', const formData = new FormData();
}; formData.append('file', {
uri: photoUri,
type: 'image/jpeg',
name: 'photo.jpg',
});
const openCamera = async () => { const response = await axios.post(REACT_APP_API_URL, formData, {
const granted = await PermissionsAndroid.request( headers: {
PermissionsAndroid.PERMISSIONS.CAMERA, 'Content-Type': 'multipart/form-data',
); },
if (granted === PermissionsAndroid.RESULTS.GRANTED) { });
const result = await launchCamera(options);
if (result.assets) {
setPhoto(result.assets[0].uri);
submitPhoto(result.assets[0].uri);
}
}
};
const openGallery = async () => { if (response.status === 200) {
const result = await launchImageLibrary(options); setPrediction(response.data); // Set prediction state with the received data
if (result.assets) { } else {
setPhoto(result.assets[0].uri); console.error('Error:', response.status);
submitPhoto(result.assets[0].uri); }
} } catch (error) {
}; console.error('Error:', error);
}
};
const submitPhoto = async (photoUri) => { const handleContinue = () => {
try { let route; // Variable to store the route name
const formData = new FormData();
formData.append('file', {
uri: photoUri,
type: 'image/jpeg',
name: 'photo.jpg',
});
const response = await axios.post(REACT_APP_API_URL, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
if (response.status === 200) {
setPrediction(response.data); // Set prediction state with the received data
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
};
// 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
}
};
const handleContinue = () => { return (
let route; // Variable to store the route name <View style={styles.container}>
<View style={styles.topContainer}>
// Check the class and assign the route accordingly <Text style={styles.topicText}>Skin Diagnostic Photo Upload</Text>
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
}
};
<Image style={styles.babyImage} source={IMGS.sk_1} />
return ( <View style={styles.buttonContainer}>
<View style={styles.container}> <TouchableOpacity
<View style={styles.topContainer}> onPress={openGallery}
<Text style={styles.topicText}>Skin Diagnostic Photo Upload</Text> style={[styles.button, styles.buttonLeft]}>
<Image source={IMGS.sk_3} style={styles.buttonImage} />
<Image style={styles.babyImage} source={IMGS.sk_1} /> </TouchableOpacity>
<TouchableOpacity
<View style={styles.buttonContainer}> onPress={openCamera}
<TouchableOpacity onPress={openGallery} style={[styles.button, styles.buttonLeft]}> style={[styles.button, styles.buttonRight]}>
<Image source={IMGS.sk_3} style={styles.buttonImage} /> <Image source={IMGS.sk_2} style={styles.buttonImage} />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity onPress={openCamera} style={[styles.button, styles.buttonRight]}> </View>
<Image source={IMGS.sk_2} style={styles.buttonImage} /> {photo && (
</TouchableOpacity> <View style={styles.photoContainer}>
</View> <Image source={{uri: photo}} style={styles.photo} />
{photo && ( </View>
<View style={styles.photoContainer}>
<Image source={{ uri: photo }} style={styles.photo} />
</View>
)}
</View>
<Text style={styles.descriptionText}>'Use phone camera or select a photo from the gallery that clearly shows your skin.'</Text>
<View style={styles.bottomContainer}>
{!prediction && (
<>
<Text style={styles.resultsHeading}>Results will appear below</Text>
</>
)} )}
{prediction && ( </View>
<View style={styles.predictionContainer}> <Text style={styles.descriptionText}>
<Text style={styles.predictionText}>Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}</Text> 'Use phone camera or select a photo from the gallery that clearly shows
<Text style={styles.predictionText}>How sure are we | නිරවද්යතාව: {prediction.confidence}</Text> your skin.'
</View> </Text>
<View style={styles.bottomContainer}>
{loading ? (
<View style={styles.loaderContainer}>
<ActivityIndicator size="large" color={COLORS.primary} />
</View>
) : (
<>
{!prediction && (
<>
<Text style={styles.resultsHeading}>
Results will appear below
</Text>
</>
)}
{!loading && prediction && (
<View style={styles.predictionContainer}>
<Text style={styles.predictionText}>
Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}
</Text>
<Text style={styles.predictionText}>
How sure are we | නිරවද්යතාව: {prediction.confidence}
</Text>
</View>
)} )}
<Button <Button
title="Take your next step" title="Take your next step"
style={styles.nextButton} style={styles.nextButton}
onPress={handleContinue} onPress={handleContinue}
/> />
</View> </>
</View> )}
); </View>
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flexGrow: 1, flexGrow: 1,
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
}, },
predictionText: { predictionText: {
fontSize: 16, fontSize: 16,
color: '#000', // Text color color: '#000', // Text color
textAlign: 'center', textAlign: 'center',
marginBottom: 5, // Space between text lines marginBottom: 5, // Space between text lines
}, },
topContainer: { topContainer: {
flex: 3, flex: 3,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
// This creates the curve effect for the background // This creates the curve effect for the background
}, },
buttonContainer: {
flexDirection: 'row',
marginTop: -26,
alignSelf: 'center', // Center the button container
borderRadius: 30,
overflow: 'hidden',
maxWidth: 300, // Set the max width for the container
borderWidth: 1, // Border for the whole container
borderColor: COLORS.blue, // Color of the container border and the separator line
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 10,
backgroundColor: COLORS.white, // White background for the buttons
// Adding border only for the right button to act as the line separator
},
buttonImage: {
width: 50, // Adjust as necessary for your design
height: 50, // Adjust as necessary for your design
resizeMode: 'contain',
},
buttonContainer: { buttonLeft: {
flexDirection: 'row', borderTopLeftRadius: 30, // Rounded left-top edge
marginTop: -26, borderBottomLeftRadius: 30, // Rounded left-bottom edge
alignSelf: 'center', // Center the button container borderRightWidth: 1, // Separator line
borderRadius: 30, borderColor: COLORS.lightGray, // Color of the separator line
overflow: 'hidden', },
maxWidth: 300, // Set the max width for the container
borderWidth: 1, // Border for the whole container
borderColor: COLORS.blue, // Color of the container border and the separator line
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 10,
backgroundColor: COLORS.white, // White background for the buttons
// Adding border only for the right button to act as the line separator
},
buttonImage: {
width: 50, // Adjust as necessary for your design
height: 50, // Adjust as necessary for your design
resizeMode: 'contain',
},
buttonLeft: {
borderTopLeftRadius: 30, // Rounded left-top edge
borderBottomLeftRadius: 30, // Rounded left-bottom edge
borderRightWidth: 1, // Separator line
borderColor: COLORS.lightGray, // Color of the separator line
},
buttonRight: { buttonRight: {
borderTopRightRadius: 30, // Rounded right-top edge borderTopRightRadius: 30, // Rounded right-top edge
borderBottomRightRadius: 30, // Rounded right-bottom edge borderBottomRightRadius: 30, // Rounded right-bottom edge
}, },
babyImage: {
width: 100,
height: 100,
resizeMode: 'contain',
marginVertical: 20,
},
topicText: {
fontSize: 22,
fontWeight: 'bold',
color: COLORS.black,
textAlign: 'center',
marginBottom: 20,
},
descriptionText: {
fontSize: 16,
textAlign: 'center',
marginHorizontal: 10,
marginBottom: -10,
marginTop:-40
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 75,
borderTopLeftRadius: 75,
},
nextButton: {
width: '90%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
photoContainer: { babyImage: {
elevation: 4, // Android shadow width: 100,
shadowColor: '#000', // iOS shadow height: 100,
shadowOffset: { width: 0, height: 2 }, // iOS shadow resizeMode: 'contain',
shadowOpacity: 0.1, // iOS shadow marginVertical: 20,
shadowRadius: 2, // iOS shadow },
borderRadius: 10, topicText: {
marginTop: 20, fontSize: 22,
marginBottom: 20, fontWeight: 'bold',
}, color: COLORS.black,
photo: { textAlign: 'center',
width: 100, marginBottom: 20,
height: 100, },
borderRadius: 10, descriptionText: {
}, fontSize: 16,
textAlign: 'center',
marginHorizontal: 10,
marginBottom: -10,
marginTop: -40,
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop: 20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 75,
borderTopLeftRadius: 75,
},
nextButton: {
width: '90%',
paddingVertical: 10,
marginBottom: 80, // Adjust the margin to move the button up further if necessary
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
predictionContainer: { photoContainer: {
width: '80%', elevation: 4, // Android shadow
backgroundColor: COLORS.white, // White background for the prediction box shadowColor: '#000', // iOS shadow
borderRadius: 10, shadowOffset: {width: 0, height: 2}, // iOS shadow
padding: 15, shadowOpacity: 0.1, // iOS shadow
marginVertical: 20, // Adjust as needed shadowRadius: 2, // iOS shadow
alignSelf: 'center', borderRadius: 10,
alignItems: 'center', marginTop: 20,
justifyContent: 'center', marginBottom: 20,
// Add shadows if you like for better visual separation },
elevation: 4, // Android shadow photo: {
shadowColor: '#000', // iOS shadow width: 100,
shadowOffset: { width: 0, height: 2 }, // iOS shadow height: 100,
shadowOpacity: 0.1, // iOS shadow borderRadius: 10,
shadowRadius: 2, // iOS shadow },
bottom:75,
top:-10
},
resultsHeading: {
fontSize: 16,
color: '#000',
fontWeight: 'bold',
padding: 10,
textAlign: 'center',
marginBottom: 90,
marginLeft:0
},
predictionContainer: {
width: '80%',
backgroundColor: COLORS.white, // White background for the prediction box
borderRadius: 10,
padding: 15,
marginVertical: 20, // Adjust as needed
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
// Add shadows if you like for better visual separation
elevation: 4, // Android shadow
shadowColor: '#000', // iOS shadow
shadowOffset: {width: 0, height: 2}, // iOS shadow
shadowOpacity: 0.1, // iOS shadow
shadowRadius: 2, // iOS shadow
bottom: 75,
top: -10,
},
resultsHeading: {
fontSize: 16,
color: '#000',
fontWeight: 'bold',
padding: 10,
textAlign: 'center',
marginBottom: 90,
marginLeft: 0,
},
resultImage: { resultImage: {
width: 100, // Set your desired width width: 100, // Set your desired width
height: 100, // Set your desired height height: 100, // Set your desired height
alignSelf: 'center', alignSelf: 'center',
marginVertical: 20, // Adjust margin as needed marginVertical: 20, // Adjust margin as needed
}, },
loaderContainer: {
}); flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default Camera; export default Camera;
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