Skip to content

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

new changes

parent fbc714d4
Show 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 { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import React, {useState, useRef, useEffect} from 'react';
import {
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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {Dimensions} from 'react-native';
import {Linking} from 'react-native';
const AdditionalSymptomsScreen2 = ({ navigation }) => {
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
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);
......@@ -22,39 +39,37 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374532/3D/wfu4pr9phnadjqargex4.mp4";
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 imageHeight = screenHeight * 0.20;
const imageHeight = screenHeight * 0.2;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Headache | හිසරදය' },
{ key: 'symptom2', text: 'Shoulder pain | උරහිස් වේදනාව' },
{ key: 'symptom3', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව' },
{ key: 'symptom4', text: 'Lower Abdomen pain | පහළ උදරයේ වේදනාව' },
{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: '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 |පිටුපස මාංශ පේශි වේදනාව'},
{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 = () => {
setLoading(false);
};
......@@ -63,7 +78,7 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
setLoading(true);
};
const toggleCheckbox = (symptom) => {
const toggleCheckbox = symptom => {
setSelectedSymptoms(prevState => ({
...prevState,
[symptom]: !prevState[symptom],
......@@ -72,12 +87,23 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
const handleSubmit = () => {
// Checking for specific symptoms that lead to SKIN_RISK
const skinRiskSymptoms = ['symptom12', 'symptom5', 'symptom4','symptom10', 'symptom8', 'symptom6'];
const toSkinRisk = skinRiskSymptoms.some(symptom => selectedSymptoms[symptom]);
const skinRiskSymptoms = [
'symptom12',
'symptom5',
'symptom4',
'symptom10',
'symptom8',
'symptom6',
];
const toSkinRisk = skinRiskSymptoms.some(
symptom => selectedSymptoms[symptom],
);
// Navigate based on condition
if (toSkinRisk) {
navigation.navigate(ROUTES.SKIN_RISK, {origin: 'AdditionalSymptomsScreen2' });
navigation.navigate(ROUTES.SKIN_RISK, {
origin: 'AdditionalSymptomsScreen2',
});
} else {
navigation.navigate(ROUTES.SKIN_INFO);
}
......@@ -119,7 +145,9 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Discoid Additional Symptoms </Text>
<View style={styles.qrCodeBox1}>
......@@ -128,17 +156,28 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText1}>
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ සඳහා වීඩියෝවක් ලබා දී ඇත.
වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව නිරීක්ෂණය කරන්න.
මෙම පිටුවේ පහළ දක්වා ඇති රෝග ලක්ෂණ ඔබට තිබේදැයි පරික්ෂා කරන්න. ඒ
සඳහා වීඩියෝවක් ලබා දී ඇත. වීඩියෝව පැහැදිලි නොවේ නම්, පහත QR කේතය
ස්කෑන් කර හෝ බොත්තම ක්ලික් කිරීමෙන් මෙම රෝග ලක්ෂණ සහිත 3D කාන්තාව
නිරීක්ෂණය කරන්න.
</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.
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}} />
<Image
source={IMGS.sk_25}
style={{
width: '50%',
height: imageHeight,
alignSelf: 'center',
resizeMode: 'contain',
marginBottom: -45,
marginTop: -24,
}}
/>
<View style={styles.qrCodeBox}>
<Image
......@@ -147,7 +186,9 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
/>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
onPress={() =>
Linking.openURL('https://mywebar.com/p/Project_4_lpf4ury2jc')
}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
......@@ -157,18 +198,22 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<TouchableOpacity
style={styles.videoContainer}
onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
source={{uri: URL_link}} // Replace with the path to your video file
style={[styles.video, {height: fullscreen ? '100%' : 300}]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
onError={error => console.error('Video playback error:', error)}
/>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<TouchableOpacity
style={styles.playPauseButton}
onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? IMGS.sk_20 : IMGS.sk_19}
......@@ -177,13 +222,19 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the symptom that you have </Text>
<Text style={styles.checkboxLabel}>ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න </Text>
<Text style={styles.checkboxLabel}>
Check the symptom that you have{' '}
</Text>
<Text style={styles.checkboxLabel}>
ඔබට ඇති රෝග ලක්ෂණය ඇතුල් කරන්න{' '}
</Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<View
style={styles.individualCheckboxContainer}
key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
......@@ -209,13 +260,11 @@ const AdditionalSymptomsScreen2 = ({ navigation }) => {
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
},
container: {
flexGrow: 1,
backgroundColor: COLORS.white,
......@@ -239,7 +288,7 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.white,
color: COLORS.white,
fontWeight: 'bold',
},
separator: {
......@@ -248,8 +297,7 @@ const styles = StyleSheet.create({
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
marginLeft: -197,
},
checkboxContainer: {
......@@ -258,17 +306,14 @@ const styles = StyleSheet.create({
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
marginLeft: 197,
},
checkboxLabel: {
fontSize: 16,
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
color: COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -292,12 +337,11 @@ const styles = StyleSheet.create({
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:-20,
marginTop: -20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 85,
borderTopLeftRadius: 85,
},
nextButton: {
width: '70%',
......@@ -306,14 +350,13 @@ const styles = StyleSheet.create({
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'
backgroundColor: 'black',
},
video: {
width: '110%',
......@@ -329,10 +372,9 @@ const styles = StyleSheet.create({
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '98%', // Width 100% to fill container width
marginLeft:-95,
marginLeft: -95,
elevation: 6,
minHeight: 50,
},
fullscreenButton: {
......@@ -355,7 +397,7 @@ const styles = StyleSheet.create({
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
......@@ -365,13 +407,12 @@ const styles = StyleSheet.create({
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
bottom: '30%',
transform: [{translateX: -25}, {translateY: -25}],
width: 50,
height: 50,
justifyContent: 'center',
......@@ -392,7 +433,7 @@ const styles = StyleSheet.create({
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 40,
shadowColor: "#000",
shadowColor: '#000',
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
......@@ -403,7 +444,7 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginTop:16
marginTop: 16,
},
qrCodeImage: {
width: 200, // Adjust size as needed
......@@ -429,7 +470,7 @@ const styles = StyleSheet.create({
padding: 30,
backgroundColor: COLORS.white,
marginBottom: 40,
shadowColor: "#000",
shadowColor: '#000',
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
......@@ -440,10 +481,10 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 10,
marginTop:10
marginTop: 10,
},
qrCodeImage1:{
qrCodeImage1: {
width: 210, // Adjust size as needed
height: 170,
},
......@@ -453,9 +494,7 @@ const styles = StyleSheet.create({
color: COLORS.darkGray,
marginTop: 20,
marginBottom: 20,
}
},
// ... possibly other styles
});
......
src/screens/home/skin/SkinUploader.js
View file @ eded323f
import React, { useState } from 'react';
import { View, StyleSheet, Image, TouchableOpacity, PermissionsAndroid, Text, ScrollView } from 'react-native';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import { COLORS, IMGS, ROUTES } from '../../../constants';
import React, {useState} from 'react';
import {
View,
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 axios from 'axios'; // Import Axios
const Camera = ({ navigation }) => {
const Camera = ({navigation}) => {
const [cameraPhoto, setCameraPhoto] = useState();
const [galleryPhoto, setGalleryPhoto] = useState();
const REACT_APP_API_URL='https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
const REACT_APP_API_URL =
'https://us-central1-skin-condition-detection.cloudfunctions.net/predict';
const [prediction, setPrediction] = useState(null);
const [loading, setLoading] = useState(false);
const [photo, setPhoto] = useState(null);
let options = {
saveToPhotos: true,
mediaType: 'photo',
......@@ -41,7 +49,7 @@ const Camera = ({ navigation }) => {
}
};
const submitPhoto = async (photoUri) => {
const submitPhoto = async photoUri => {
try {
const formData = new FormData();
formData.append('file', {
......@@ -66,7 +74,6 @@ const Camera = ({ navigation }) => {
}
};
const handleContinue = () => {
let route; // Variable to store the route name
......@@ -98,13 +105,11 @@ const Camera = ({ navigation }) => {
} 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.");
console.log('No valid prediction available.');
// navigation.navigate(ROUTES.DEFAULT_ROUTE); // Example fallback
}
};
return (
<View style={styles.container}>
<View style={styles.topContainer}>
......@@ -113,31 +118,49 @@ const Camera = ({ navigation }) => {
<Image style={styles.babyImage} source={IMGS.sk_1} />
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={openGallery} style={[styles.button, styles.buttonLeft]}>
<TouchableOpacity
onPress={openGallery}
style={[styles.button, styles.buttonLeft]}>
<Image source={IMGS.sk_3} style={styles.buttonImage} />
</TouchableOpacity>
<TouchableOpacity onPress={openCamera} style={[styles.button, styles.buttonRight]}>
<TouchableOpacity
onPress={openCamera}
style={[styles.button, styles.buttonRight]}>
<Image source={IMGS.sk_2} style={styles.buttonImage} />
</TouchableOpacity>
</View>
{photo && (
<View style={styles.photoContainer}>
<Image source={{ uri: photo }} style={styles.photo} />
<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>
<Text style={styles.descriptionText}>
'Use phone camera or select a photo from the gallery that clearly shows
your skin.'
</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>
<Text style={styles.resultsHeading}>
Results will appear below
</Text>
</>
)}
{prediction && (
{!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>
<Text style={styles.predictionText}>
Diagnosed Condition | හඳුනාගත් සමේ ආසාදනය: {prediction.class}
</Text>
<Text style={styles.predictionText}>
How sure are we | නිරවද්යතාව: {prediction.confidence}
</Text>
</View>
)}
<Button
......@@ -145,6 +168,8 @@ const Camera = ({ navigation }) => {
style={styles.nextButton}
onPress={handleContinue}
/>
</>
)}
</View>
</View>
);
......@@ -170,7 +195,6 @@ const styles = StyleSheet.create({
// This creates the curve effect for the background
},
buttonContainer: {
flexDirection: 'row',
marginTop: -26,
......@@ -225,18 +249,17 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginHorizontal: 10,
marginBottom: -10,
marginTop:-40
marginTop: -40,
},
bottomContainer: {
flex: 2,
justifyContent: 'flex-end',
marginBottom: 2,
marginTop:20,
marginTop: 20,
alignItems: 'center',
backgroundColor: COLORS.blue,
borderTopRightRadius: 75,
borderTopLeftRadius: 75,
},
nextButton: {
width: '90%',
......@@ -245,13 +268,12 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
borderRadius: 20,
alignSelf: 'center',
},
photoContainer: {
elevation: 4, // Android shadow
shadowColor: '#000', // iOS shadow
shadowOffset: { width: 0, height: 2 }, // iOS shadow
shadowOffset: {width: 0, height: 2}, // iOS shadow
shadowOpacity: 0.1, // iOS shadow
shadowRadius: 2, // iOS shadow
borderRadius: 10,
......@@ -276,11 +298,11 @@ const styles = StyleSheet.create({
// Add shadows if you like for better visual separation
elevation: 4, // Android shadow
shadowColor: '#000', // iOS shadow
shadowOffset: { width: 0, height: 2 }, // iOS shadow
shadowOffset: {width: 0, height: 2}, // iOS shadow
shadowOpacity: 0.1, // iOS shadow
shadowRadius: 2, // iOS shadow
bottom:75,
top:-10
bottom: 75,
top: -10,
},
resultsHeading: {
fontSize: 16,
......@@ -289,18 +311,20 @@ const styles = StyleSheet.create({
padding: 10,
textAlign: 'center',
marginBottom: 90,
marginLeft:0
marginLeft: 0,
},
resultImage: {
width: 100, // Set your desired width
height: 100, // Set your desired height
alignSelf: 'center',
marginVertical: 20, // Adjust margin as needed
},
});
loaderContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
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