Commit c54d65fc authored by Devin B's avatar Devin B

feature_skin_risk_updated

parent c8f2b6e0
...@@ -210,7 +210,6 @@ const styles = StyleSheet.create({ ...@@ -210,7 +210,6 @@ const styles = StyleSheet.create({
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',
......
...@@ -146,12 +146,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -146,12 +146,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} /> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct source={require('./skinassets/QR2.png')} // Make sure the path is correct
style={styles.qrCodeImage} style={styles.qrCodeImage}
/> />
<TouchableOpacity <TouchableOpacity
style={styles.orButton} style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_1_kashsimytd')}>
<Text style={styles.orButtonText}>OR Click This</Text> <Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
......
...@@ -142,12 +142,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -142,12 +142,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} /> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct source={require('./skinassets/QR4.png')} // Make sure the path is correct
style={styles.qrCodeImage} style={styles.qrCodeImage}
/> />
<TouchableOpacity <TouchableOpacity
style={styles.orButton} style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_3_oq5mkmz3uu')}>
<Text style={styles.orButtonText}>OR Click This</Text> <Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
......
...@@ -137,12 +137,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -137,12 +137,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} /> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct source={require('./skinassets/QR3.png')} // Make sure the path is correct
style={styles.qrCodeImage} style={styles.qrCodeImage}
/> />
<TouchableOpacity <TouchableOpacity
style={styles.orButton} style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_2_qbealmm517')}>
<Text style={styles.orButtonText}>OR Click This</Text> <Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
......
...@@ -135,12 +135,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -135,12 +135,12 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} /> style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct source={require('./skinassets/QR5.png')} // Make sure the path is correct
style={styles.qrCodeImage} style={styles.qrCodeImage}
/> />
<TouchableOpacity <TouchableOpacity
style={styles.orButton} style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}> onPress={() => Linking.openURL('https://mywebar.com/p/Project_4_wzkzvl12m')}>
<Text style={styles.orButtonText}>OR Click This</Text> <Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
......
import React, { useState } from 'react'; import React, { useState,useRef, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image } from 'react-native'; import { View, StyleSheet, Text, TouchableOpacity, ScrollView, Image, Animated, Easing } from 'react-native';
// import Video from 'react-native-video'; // or any other audio player you prefer // import Video from 'react-native-video'; // or any other audio player you prefer
import { launchCamera, launchImageLibrary } from 'react-native-image-picker'; import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import { COLORS, IMGS, ROUTES } from '../../../constants'; import { COLORS, IMGS, ROUTES } from '../../../constants';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import Video from 'react-native-video'; import Video from 'react-native-video';
import { SafeAreaView } from 'react-native-safe-area-context';
const RiskEvaluationScreen = ({ navigation }) => { const RiskEvaluationScreen = ({ navigation }) => {
const [audioPaused, setAudioPaused] = useState(true); const [audioPaused, setAudioPaused] = useState(true);
const [progress, setProgress] = useState(0);
const audioRef = useRef(null);
const progressAnim = useRef(new Animated.Value(0)).current;
// Function to handle the continuation to the next screen // Function to handle the continuation to the next screen
const handleContinue = () => { const handleContinue = () => {
// navigation.navigate('NextScreenRoute'); // navigation.navigate('NextScreenRoute');
}; };
useEffect(() => {
if (audioPaused) {
progressAnim.stopAnimation();
} else {
Animated.timing(progressAnim, {
toValue: 1,
duration: 30000, // Duration of the audio file in milliseconds
easing: Easing.linear,
useNativeDriver: false,
}).start();
}
}, [audioPaused]);
const togglePlayPause = () => {
setAudioPaused(!audioPaused);
if (!audioPaused) {
progressAnim.stopAnimation();
progressAnim.setValue(0);
}
};
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1716112518/audio/fzkd6v8lnmnsa4onm8sx.mp3";
return ( return (
<View style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Risk evaluation</Text> <Text style={styles.topicText}>Risk evaluation</Text>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Your Condition Risk Level: High,Low will be displayed below Your Condition Risk Level: High,Low will be displayed below
</Text> </Text>
<Text style={styles.subTopicText}>Why High Risk ?</Text> <Text style={styles.subTopicText}>Please listen to the below audio</Text>
<View style={styles.audioPlayerContainer}>
{/* <Video
source={require("./skinassets/pause.png")}
style={styles.audioPlayer}
controls={true}
audioOnly={true}
resizeMode="cover" // Cover the audio's aspect ratio
paused={audioPaused}
repeat={true}
onLoad={() => setAudioPaused(false)}
/> */} <Image source={require('./skinassets/musicicon.png')} style={styles.musicIcon} />
<View style={styles.playerContainer}>
<View style={styles.controlsContainer}>
<TouchableOpacity onPress={togglePlayPause} style={styles.playPauseButton}>
<Image
source={audioPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
style={styles.playPauseIcon}
/>
</TouchableOpacity>
<Video
ref={audioRef}
source={{ uri: URL_link }}
paused={audioPaused}
audioOnly={true}
onEnd={() => setAudioPaused(true)}
/>
<View style={styles.progressContainer}>
<Image source={require('./skinassets/sound-waves.png')} style={styles.progressBarBackground} />
<Animated.View style={[styles.progressBar, { width: progressAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0%', '100%']
}) }]} />
</View>
</View>
</View> </View>
</View>
<View style={styles.bottomContainer}>
<Image style={styles.babyImage} source={IMGS.sk_14} /> <Image style={styles.babyImage} source={IMGS.sk_14} />
<View style={styles.resultBox}> <View style={styles.resultBox}>
<Text style={styles.resultText}>High Risk</Text> <Text style={styles.resultText}>Most likley to be High Risk</Text>
</View> </View>
</View>
<View style={styles.bottomContainer}>
<Button <Button
title="Continue for more information" title="What should I do next"
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_INFO)} onPress={() => navigation.navigate(ROUTES.SKIN_INFO)}
/> />
</View> </View>
</View> </SafeAreaView>
); );
}; };
...@@ -78,6 +120,7 @@ const styles = StyleSheet.create({ ...@@ -78,6 +120,7 @@ const styles = StyleSheet.create({
color: COLORS.black, color: COLORS.black,
textAlign: 'center', textAlign: 'center',
marginVertical: 20, marginVertical: 20,
marginTop:-60
}, },
descriptionText: { descriptionText: {
fontSize: 16, fontSize: 16,
...@@ -156,29 +199,72 @@ const styles = StyleSheet.create({ ...@@ -156,29 +199,72 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, // Shadow radius for iOS shadowRadius: 3.84, // Shadow radius for iOS
elevation: 5, // Elevation for Android elevation: 5, // Elevation for Android
alignSelf: 'center', alignSelf: 'center',
marginTop: 148, // Adjust the margin to fit your layout marginTop: 80, // Adjust the margin to fit your layout
marginLeft:20 marginLeft:10,
bottom:117
}, },
audioPlayerContainer: { audioPlayerContainer: {
width: '90%', alignItems: 'center',
height: 50, // Set a fixed height for the audio player container marginBottom: 20,
alignSelf: 'center', },
justifyContent: 'center', musicIcon: {
marginTop: 20, // Space between the text and the player width: 60,
height: 60,
marginBottom: -10,
marginTop:30
}, },
audioPlayer: { controlsContainer: {
width: '100%', // Fill the container width flexDirection: 'row',
height: '100%', // Fill the container height alignItems: 'center',
// Add more styles as needed },
playPauseButton: {
marginRight: 20,
},
playPauseIcon: {
width: 30,
height: 30,
marginTop:1,
marginLeft:10
}, },
progressContainer: {
flex: 1,
height: 30,
justifyContent: 'center',
alignItems: 'center',
marginTop:1,
marginRight:40
},
playerContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: COLORS.white,
borderWidth: 0.5,
borderColor: COLORS.lightGray,
borderRadius: 10,
padding: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
width: '90%',
height:'10%',
justifyContent: 'space-between',
bottom:-20
},
progressBarBackground: {
width: '140%',
height: '70%',
position: 'absolute',
},
babyImage: { babyImage: {
position: 'absolute', // Use absolute positioning position: 'absolute', // Use absolute positioning
width: 200, width: 200,
height: 100, height: 100,
resizeMode: 'contain', resizeMode: 'contain',
bottom: 70, // Adjust this value based on the height of your result box + desired gap bottom: 320, // Adjust this value based on the height of your result box + desired gap
alignSelf: 'center', // Center the image horizontally alignSelf: 'center', // Center the image horizontally
marginLeft:40, marginLeft:40,
marginRight:100, marginRight:100,
......
...@@ -140,10 +140,19 @@ const Camera = ({ navigation }) => { ...@@ -140,10 +140,19 @@ const Camera = ({ navigation }) => {
<Text style={styles.predictionText}>Confidence: {prediction.confidence}</Text> <Text style={styles.predictionText}>Confidence: {prediction.confidence}</Text>
</View> </View>
)} )}
<Button {/* <Button
title="Continue for more information" title="Continue for more information"
style={styles.nextButton} style={styles.nextButton}
onPress={handleContinue} onPress={handleContinue}
/> */}
<Button
title="Start Today"
style={{
marginTop: 12,
width: "100%",
marginTop:43
}}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> />
</View> </View>
</View> </View>
......
...@@ -18,7 +18,6 @@ import {COLORS, IMGS, ROUTES} from '../../../constants'; ...@@ -18,7 +18,6 @@ import {COLORS, IMGS, ROUTES} from '../../../constants';
import Button from '../../../components/Button'; import Button from '../../../components/Button';
const WelcomeExercise = ({ navigation }) => { const WelcomeExercise = ({ navigation }) => {
return ( return (
<LinearGradient <LinearGradient
......
...@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => { ...@@ -156,7 +156,7 @@ const Additionalinformation = ({ navigation }) => {
</View> </View>
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <Image
source={require('./skinassets/Vectorw.png')} // Make sure the path is correct source={require('./skinassets/Vectorw.jpg')} // Make sure the path is correct
style={styles.qrCodeImage1} style={styles.qrCodeImage1}
/> />
<Text style={styles.dscriptionText}> <Text style={styles.dscriptionText}>
......
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