Skip to content

2
2023-113
Commit 6c0c7ab1 authored by Waththaladeniya N.M's avatar Waththaladeniya N.M
Browse files
Options

Merge branch 'feature/IT20151874/weatherBasedCropRecommendation-1' into 'master' 

Feature/it20151874/weather based crop recommendation 1

See merge request !11
parents 3b1f4cf0 d85e0a56
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 24665 additions and 58 deletions
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/App.js
View file @ 6c0c7ab1
......@@ -6,6 +6,10 @@ import SoilDataOptions from './components/recomendationComponentsBySoil/SoilData
import ManualSoilData from './components/recomendationComponentsBySoil/ManualSoilData';
import MostSutaibleCrops from './components/recomendationComponentsBySoil/MostSutaibleCrops';
import HomePage from './components/common/Home';
import WeatherApp from './components/weatherCrop/Weatherpredict';
import WeatherData from './components/weatherCrop/WeatherData';
import WeatherDataOptions from './components/weatherCrop/WeatherDataOptions';
import Crops from './components/weatherCrop/Crops';
......@@ -19,6 +23,10 @@ export default function App() {
<Stack.Screen name="Most Suitable Crops" component={MostSutaibleCrops}/>
<Stack.Screen name="Add Soil Data Manually " component={ManualSoilData}/>
<Stack.Screen name="TestWithButton" component={TestWithButton}/>
<Stack.Screen name="Weather Data Options" component={WeatherDataOptions} />
<Stack.Screen name="Weather Data" component={WeatherData} />
<Stack.Screen name="Crops" component={Crops} />
<Stack.Screen name='Weather Predict' component={WeatherApp} />
</Stack.Navigator>
</NavigationContainer>
);
......
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/weatherCrop/Crops.js 0 → 100644
View file @ 6c0c7ab1
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import axios from 'axios';
const Crops = ({ route }) => {
const { userInputs } = route.params;
const [isLoading, setIsLoading] = useState(false);
const [suitableCrop, setSuitableCrop] = useState(null);
useEffect(() => {
const fetchCropData = async () => {
console.log("params", typeof userInputs.temperature)
setIsLoading(true);
try {
const response = await axios.post('http://127.0.0.1:5000/predict', {
temperature : userInputs.temperature,
humidity : userInputs.humidity
});
const responseData = response.data;
setSuitableCrop(responseData);
} catch (error) {
console.error('Error fetching crop data:', error);
} finally {
setIsLoading(false);
}
};
fetchCropData();
}, []);
console.log("output", suitableCrop)
return (
<ImageBackground
source={require('../../assets/weatherinput.jpeg')} // Replace with the path to your background image
style={styles.backgroundImage}
>
<View style={styles.container}>
<Text style={styles.title}>Suitable Crop according to current weather :</Text>
<View style={styles.cropContainer}>
<Text style={styles.cropName}>{suitableCrop?.crop}</Text>
</View>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: '#fff',
},
cropContainer: {
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderRadius: 8,
padding: 20,
alignItems: 'center',
},
cropName: {
fontSize: 28,
fontWeight: 'bold',
color: '#000',
},
});
export default Crops;
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/weatherCrop/WeatherData.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import axios from 'axios';
const API_URL = 'http://127.0.0.1:5000/get_weather'; // Replace with your Flask app URL
const PREDICTION_URL = 'http://127.0.0.1:5000/predict'; // Replace with your crop prediction URL
const WeatherData = () => {
const [area, setArea] = useState('');
const [weatherData, setWeatherData] = useState(null);
const [cropPrediction, setCropPrediction] = useState(null);
const fetchWeatherData = () => {
axios
.post(API_URL, { area_name: area })
.then((response) => {
setWeatherData(response.data);
// After receiving weather data, send it for crop prediction
sendWeatherForPrediction(response.data);
})
.catch((error) => {
console.error('Error:', error);
setWeatherData(null);
});
};
const sendWeatherForPrediction = (weatherData) => {
console.log("weather", weatherData)
const temperature = weatherData.temperature.toString()
const humidity = weatherData.humidity.toString()
axios
.post(PREDICTION_URL, { temperature, humidity })
.then((response) => {
console.log("res", response.data)
setCropPrediction(response.data);
})
.catch((error) => {
console.error('Error:', error);
setCropPrediction(null);
});
};
return (
<View style={styles.container}>
<Text style={styles.title}>Check Weather</Text>
<TextInput
style={styles.input}
value={area}
onChangeText={setArea}
placeholder="Enter area name"
/>
<TouchableOpacity style={styles.checkButton} onPress={fetchWeatherData}>
<Text style={styles.checkButtonText}>Check Weather</Text>
</TouchableOpacity>
{weatherData && (
<View style={styles.weatherContainer}>
<Text style={styles.weatherText}>Temperature: {weatherData.temperature}°C</Text>
<Text style={styles.weatherText}>Humidity: {weatherData.humidity}%</Text>
</View>
)}
{cropPrediction && (
<View style={styles.predictionContainer}>
<Text style={styles.predictionTitle}>Crop Prediction:</Text>
<Text style={styles.predictionText}>{cropPrediction.crop}</Text>
</View>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
},
input: {
width: '100%',
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 10,
marginBottom: 10,
},
checkButton: {
backgroundColor: '#007AFF',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
},
checkButtonText: {
fontSize: 16,
fontWeight: 'bold',
color: 'white',
},
weatherContainer: {
marginTop: 20,
alignItems: 'center',
},
weatherText: {
fontSize: 16,
},
predictionContainer: {
marginTop: 20,
alignItems: 'center',
},
predictionTitle: {
fontSize: 16,
fontWeight: 'bold',
},
predictionText: {
fontSize: 16,
},
});
export default WeatherData;
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/weatherCrop/WeatherDataOptions.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const WeatherDataOptions = () => {
const [selectedOption, setSelectedOption] = useState(null);
const navigation = useNavigation();
const handleOptionSelect = (option) => {
setSelectedOption(option);
};
return (
<ImageBackground
source={require('../../assets/weatherinput.jpeg')} // Replace with the path to your background image
style={styles.backgroundImage}
>
<View style={styles.container}>
<TouchableOpacity
style={[styles.optionButton, selectedOption === 'manual' && styles.selectedOptionButton]}
onPress={() => {navigation.navigate("Weather Data")}}
>
<Text style={[styles.optionButtonText, selectedOption === 'manual' && styles.selectedOptionButtonText]}>
Add Weather Data Manually
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.optionButton, selectedOption === 'iot' && styles.selectedOptionButton]}
onPress={() => handleOptionSelect('iot')}
>
<Text
style={[styles.optionButtonText, selectedOption === 'iot' && styles.selectedOptionButtonText]}
>
Get Weather Data from IoT Device
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.optionButton, selectedOption === 'predict' && styles.selectedOptionButton]}
onPress={() => {navigation.navigate("Weather Predict")}}
>
<Text
style={[styles.optionButtonText, selectedOption === 'iot' && styles.selectedOptionButtonText]}
>
Get weather data for next 7 days
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
optionButton: {
backgroundColor: '#eee',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
marginBottom: 10,
},
selectedOptionButton: {
backgroundColor: '#007AFF',
},
optionButtonText: {
fontSize: 16,
fontWeight: 'bold',
},
selectedOptionButtonText: {
color: '#fff',
},
});
export default WeatherDataOptions;
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/components/weatherCrop/Weatherpredict.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, FlatList } from 'react-native';
import axios from 'axios';
const WeatherApp = () => {
const [area, setArea] = useState('');
const [weatherData, setWeatherData] = useState([]);
const API_URL = 'http://127.0.0.1:5000/get_weather/7_days';
const fetchWeatherData = () => {
axios
.post(API_URL, { area_name: area })
.then((response) => {
console.log("data", response.data.forecast_7_days);
setWeatherData(response.data.forecast_7_days);
})
.catch((error) => {
console.error('Error:', error);
setWeatherData(null);
});
};
// Calculate average temperature and humidity
const calculateAverages = () => {
if (weatherData.length === 0) {
return { avgTemperature: 0, avgHumidity: 0 };
}
let totalTemperature = 0;
let totalHumidity = 0;
weatherData.forEach((item) => {
totalTemperature += item.temperature;
totalHumidity += item.humidity;
});
const avgTemperature = totalTemperature / weatherData.length;
const avgHumidity = totalHumidity / weatherData.length;
return { avgTemperature, avgHumidity };
};
const { avgTemperature, avgHumidity } = calculateAverages();
return (
<View style={styles.container}>
<Text style={styles.heading}>Weather App</Text>
<TextInput
placeholder="Enter area"
style={styles.input}
value={area}
onChangeText={(text) => setArea(text)}
/>
<Button title="Fetch Weather" onPress={fetchWeatherData} color="#007BFF" />
{weatherData.length > 0 && (
<View style={styles.averages}>
<Text style={styles.averageText}>Average Temperature: {avgTemperature.toFixed(2)}°C</Text>
<Text style={styles.averageText}>Average Humidity: {avgHumidity.toFixed(2)}%</Text>
</View>
)}
<FlatList
data={weatherData}
keyExtractor={(item, index) => `${item.date}_${index}`}
renderItem={({ item }) => (
<View style={styles.weatherUpdate}>
<Text style={styles.dateText}>Date: {item.date}</Text>
<Text style={styles.weatherText}>Temperature: {item.temperature}°C</Text>
<Text style={styles.weatherText}>Humidity: {item.humidity}%</Text>
<Text style={styles.weatherText}>Rainfall: {item.rainfall} mm</Text>
</View>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: '#F5F7FB',
},
heading: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: 20,
color: '#007BFF',
},
input: {
height: 40,
borderColor: '#ccc',
borderWidth: 1,
marginBottom: 20,
paddingLeft: 10,
fontSize: 16,
backgroundColor: '#fff',
},
averages: {
backgroundColor: '#fff',
padding: 16,
marginVertical: 8,
borderRadius: 8,
},
averageText: {
fontSize: 16,
fontWeight: 'bold',
color: '#007BFF',
},
weatherUpdate: {
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
backgroundColor: '#fff',
marginVertical: 8,
borderRadius: 8,
},
dateText: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
},
weatherText: {
fontSize: 16,
color: '#333',
},
});
export default WeatherApp;
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/package.json
View file @ 6c0c7ab1
......@@ -9,6 +9,7 @@
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "^18.0.1",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"axios": "^1.4.0",
......
Soil Analyzer and Optimized Crop Finder - IT20233808/RP-MobileAPP-FE/yarn.lock
View file @ 6c0c7ab1
This source diff could not be displayed because it is too large. You can view the blob instead.
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/.gitignore 0 → 100644
View file @ 6c0c7ab1
.expo/
.expo-shared/
node_modules/
npm-debug.*
# macOS
.DS_Store
\ No newline at end of file
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/App.js 0 → 100644
View file @ 6c0c7ab1
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import TestWithButton from './components/recomendationComponentsBySoil/TestWithButton';
import SoilDataOptions from './components/recomendationComponentsBySoil/SoilDataOptions';
import ManualSoilData from './components/recomendationComponentsBySoil/ManualSoilData';
import MostSutaibleCrops from './components/recomendationComponentsBySoil/MostSutaibleCrops';
import WeatherData from './components/weatherCrop/WeatherData';
import WeatherDataOptions from './components/weatherCrop/WeatherDataOptions';
import Crops from './components/weatherCrop/Crops';
import HomePage from './components/HomePage';
export default function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home page" component={HomePage} />
<Stack.Screen name="Weather Data Options" component={WeatherDataOptions} />
<Stack.Screen name="Weather Data" component={WeatherData} />
<Stack.Screen name="Crops" component={Crops} />
{/* <Stack.Screen name="Soil Data Options" component={SoilDataOptions}/>
<Stack.Screen name="Most Sutaible Crops" component={MostSutaibleCrops}/>
<Stack.Screen name="Add Soil Data Manually " component={ManualSoilData}/>
<Stack.Screen name="TestWithButton" component={TestWithButton}/> */}
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
\ No newline at end of file
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/Config.js 0 → 100644
View file @ 6c0c7ab1
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import {storage} from "firebase/compat/storage"
const firebaseConfig = {
apiKey: "AIzaSyDTOzmI_-BeqToCTus8C3PngbDqO1elBQw",
authDomain: "ctse-assignment1.firebaseapp.com",
projectId: "ctse-assignment1",
storageBucket: "ctse-assignment1.appspot.com",
messagingSenderId: "148311630175",
appId: "1:148311630175:web:69206c79c9d6e0197916ea"
};
if(!firebase.apps.length){
firebase.initializeApp(firebaseConfig)
}
export {firebase,storage}
\ No newline at end of file
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/app.json 0 → 100644
View file @ 6c0c7ab1
{
"expo": {
"name": "ctse-assignment",
"slug": "ctse-assignment",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/assets/soybean.jpg 0 → 100644
View file @ 6c0c7ab1
This image diff could not be displayed because it is too large. You can view the blob instead.
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/babel.config.js 0 → 100644
View file @ 6c0c7ab1
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/HomePage.js 0 → 100644
View file @ 6c0c7ab1
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
const HomePage = ({ navigation }) => {
const handleOptionSelect = (option) => {
// Handle navigation to the selected option
if (option === 'pestDisease') {
navigation.navigate('PestDiseasePage');
} else if (option === 'soilData') {
navigation.navigate('Soil Data Options');
} else if (option === 'weatherData') {
navigation.navigate('Weather Data Options');
} else if (option === 'cropRotationPlan') {
navigation.navigate('CropRotationPlanPage');
}
};
return (
<ImageBackground source={require('../assets/homepage.jpg')} style={styles.backgroundImage}>
<View style={styles.container}>
<TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('pestDisease')}>
<Text style={styles.optionText}>Pest and Disease</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('soilData')}>
<Text style={styles.optionText}>Soil Data</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('weatherData')}>
<Text style={styles.optionText}>Weather Data</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.optionButton} onPress={() => handleOptionSelect('cropRotationPlan')}>
<Text style={styles.optionText}>Crop Rotation Plan</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
optionButton: {
backgroundColor: '#fff',
borderRadius: 8,
paddingVertical: 20,
marginBottom: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
width: '100%', // Set the width to occupy the entire container
},
optionText: {
fontSize: 20,
fontWeight: 'bold',
color: '#000',
textAlign: 'center',
},
});
export default HomePage;
\ No newline at end of file
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/recomendationComponentsBySoil/ManualSoilData.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet, ImageBackground } from 'react-native';
const ManualSoilData = ({navigation}) => {
const [nitrogenLevel, setNitrogenLevel] = useState("");
const [phosphorusLevel, setPhosphorusLevel] = useState("");
const [potassiumLevel, setPotassiumLevel] = useState("");
const handleAddLevels = () => {
const parsedNitrogenLevel = parseFloat(nitrogenLevel);
const parsedPhosphorusLevel = parseFloat(phosphorusLevel);
const parsedPotassiumLevel = parseFloat(potassiumLevel);
const userNpkData={
Nitrogen:parsedNitrogenLevel,
Phosphorus:parsedPhosphorusLevel,
Potassium:parsedPotassiumLevel
}
console.log(userNpkData);
navigation.navigate("Most Sutaible Crops",{userNpkData})
};
return (
<View style={styles.container}>
<ImageBackground source={require('../../assets/backgroudManualData.jpg')} style={styles.backgroundImage}>
<View style={styles.formContainer}>
<Text style={styles.heading}>Add Soil Levels</Text>
<TextInput
style={styles.input}
placeholder="Enter nitrogen level"
value={nitrogenLevel.toString()}
onChangeText={setNitrogenLevel}
keyboardType="numeric"
/>
<TextInput
style={styles.input}
placeholder="Enter phosphorus level"
value={phosphorusLevel.toString()}
onChangeText={setPhosphorusLevel}
keyboardType="numeric"
/>
<TextInput
style={styles.input}
placeholder="Enter potassium level"
value={potassiumLevel.toString()}
onChangeText={setPotassiumLevel}
keyboardType="numeric"
/>
<TouchableOpacity style={styles.button} onPress={handleAddLevels}>
<Text style={styles.buttonText}>Add Levels</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
alignItems: 'center',
},
formContainer: {
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderRadius: 10,
padding: 20,
width: '80%',
maxWidth: 400,
},
heading: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',
},
input: {
height: 40,
borderColor: '#ccc',
borderWidth: 1,
marginBottom: 20,
paddingHorizontal: 10,
borderRadius: 5,
},
button: {
backgroundColor: '#3498db',
borderRadius: 5,
paddingVertical: 10,
alignItems: 'center',
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
});
export default ManualSoilData;
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/recomendationComponentsBySoil/MostSutaibleCrops.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, ActivityIndicator, StyleSheet, ImageBackground, Image } from 'react-native';
import axios from 'axios';
import { useRoute } from '@react-navigation/native';
import BarleyImage from '../../assets/barley.png';
import WheatImage from '../../assets/wheat.png';
import RiceImage from '../../assets/rice.png';
import MaizeImage from '../../assets/maize.png';
import PotatoImage from '../../assets/potato.png';
import TomatoImage from '../../assets/tomato.png';
import CottonImage from '../../assets/cotton.png';
import SoybeanImage from '../../assets/soybean.jpg';
import BackgroundImage from '../../assets/backgroudManualData.jpg';
const cropImages = {
Soybean: SoybeanImage,
Barley: BarleyImage,
Wheat: WheatImage,
Rice: RiceImage,
Maize: MaizeImage,
Potato: PotatoImage,
Tomato: TomatoImage,
Cotton: CottonImage,
};
const MostSuitableCrops = () => {
const [cropData, setCropData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [mapObject,setMapObject]=useState({});
const route = useRoute();
const { userNpkData } = route.params;
console.log("inside sutaible",userNpkData);
// setMapObject(data)
// const { userNpkData } = route.params;
// if(data && Object.keys(data).length === 0){
// setMapObject(userNpkData)
// }else{
// setMapObject(data)
// }
const handleArduinoClick = async () => {
await axios.get('http://192.168.89.241').then(res=>{
setCropData(res.data)
}).catch(err=>{
console.log(err);
})
// try {
// const response = await axios.get('http://192.168.89.241');
// const data = response.data;
// setCropData(data);
// console.log(data);
// } catch (error) {
// console.error('Error fetching crop data:', error);
// } finally {
// setIsLoading(false);
// }
};
useEffect(() => {
const fetchCropData = async () => {
setIsLoading(true);
try {
const response = await axios.post('http://127.0.0.1:5000/npk-data', {
N: userNpkData['Nitrogen'],
P: userNpkData['Phosphorus'],
K: userNpkData['Potassium']
});
const responseData = response.data;
setCropData(responseData);
} catch (error) {
console.error('Error fetching crop data:', error);
} finally {
setIsLoading(false);
}
};
fetchCropData();
}, []); // Empty dependency array to run effect only once on component mount
return (
<ImageBackground source={BackgroundImage} style={styles.backgroundImage}>
<View style={styles.container}>
{isLoading ? (
<View style={styles.loaderContainer}>
<ActivityIndicator size="large" color="#007AFF" />
<Text style={styles.loaderText}>Finding the most suitable crop for your soil. Please wait...</Text>
</View>
) : cropData ? (
<View style={styles.card}>
<Text style={styles.title}>Most Suitable Crops:</Text>
<View style={styles.cropContainer}>
{cropData.top_crops.map((cropName) => (
<View key={cropName} style={styles.cropItem}>
<Image source={cropImages[cropName]} style={styles.cropImage} />
<Text style={styles.cropText}>{cropName}</Text>
</View>
))}
</View>
<View style={styles.nutrientContainer}>
<Text style={styles.nutrientTitle}>Nutrient Values Present in Your Soil:</Text>
<Text style={styles.nutrientText}>Nitrogen (N): {userNpkData.Nitrogen}</Text>
<Text style={styles.nutrientText}>Phosphorus (P): {userNpkData.Phosphorus}</Text>
<Text style={styles.nutrientText}>Potassium (K): {userNpkData.Potassium}</Text>
</View>
</View>
) : null}
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Add opacity to the background color
},
card: {
backgroundColor: '#fff',
borderRadius: 10,
padding: 20,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
},
title: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 10,
color: '#333',
},
cropContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
marginTop: 20,
},
cropItem: {
alignItems: 'center',
margin: 10,
},
cropImage: {
width: 80,
height: 80,
marginBottom: 10,
borderRadius: 40,
},
cropText: {
fontSize: 14,
fontWeight: 'bold',
textAlign: 'center',
},
button: {
backgroundColor: '#007AFF',
padding: 10,
borderRadius: 5,
},
buttonText: {
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
},
loaderContainer: {
alignItems: 'center',
},
loaderText: {
marginTop: 10,
fontSize: 16,
color: 'white',
textAlign: 'center',
},
nutrientContainer: {
marginTop: 20,
backgroundColor: '#f5f5f5',
borderRadius: 10,
padding: 10,
},
nutrientTitle: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 10,
color: '#333',
},
nutrientText: {
fontSize: 14,
marginBottom: 5,
color: '#007AFF',
textAlign: 'left',
textTransform: 'capitalize',
fontWeight: 'bold',
},
});
export default MostSuitableCrops;
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/recomendationComponentsBySoil/SoilDataOptions.js 0 → 100644
View file @ 6c0c7ab1
import {React,useState} from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
import axios from 'axios';
const SoilDataOptions = (navigation) => {
const [cropData, setCropData] =useState (null);
const handleArduinoRequest =async()=>{
console.log("arduino hit");
const response = await axios.get('http://192.168.89.241');
const userNpkData = response.data;
setCropData(userNpkData);
console.log(userNpkData);
navigation.navigate("Most Sutaible Crops",{userNpkData})
}
return (
<View style={styles.container}>
<Image source={require('../../assets/backgroundSoilData.jpg')} style={styles.backgroundImage} />
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={() => {navigation.navigate("Add Soil Data Manually ")}}>
<Text style={styles.buttonText}>Add soil data manually</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={() => {handleArduinoRequest()}}>
<Text style={styles.buttonText}>Get soil data from sensor</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
backgroundImage: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
opacity: 0.8,
},
buttonContainer: {
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderRadius: 10,
padding: 20,
justifyContent: 'space-between',
alignItems: 'center',
width: '80%',
maxWidth: 400,
},
button: {
backgroundColor: '#3498db',
borderRadius: 5,
paddingVertical: 10,
paddingHorizontal: 20,
marginBottom: 10,
width: 250,
alignItems: 'center',
marginVertical: 20,
},
buttonText: {
color: '#fff',
fontSize: 16,
fontWeight: 'bold',
},
});
export default SoilDataOptions;
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/recomendationComponentsBySoil/TestWithButton.js 0 → 100644
View file @ 6c0c7ab1
import React from 'react';
import { View } from 'react-native';
import { Button, NativeBaseProvider } from "native-base";
import { NativeBaseConfigProvider } from 'native-base/src/core/NativeBaseContext';
const TestWithButton = ({navigation}) => {
return (
<NativeBaseConfigProvider>
<NativeBaseProvider>
<Button onPress={()=>navigation.navigate("Test")}>click</Button>
</NativeBaseProvider>
</NativeBaseConfigProvider>
);
};
export default TestWithButton;
\ No newline at end of file
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/weatherCrop/Crops.js 0 → 100644
View file @ 6c0c7ab1
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
import axios from 'axios';
const Crops = ({ route }) => {
const { userInputs } = route.params;
const [isLoading, setIsLoading] = useState(false);
const [suitableCrop, setSuitableCrop] = useState(null);
useEffect(() => {
const fetchCropData = async () => {
console.log("params", typeof userInputs.temperature)
setIsLoading(true);
try {
const response = await axios.post('http://127.0.0.1:5000/predict', {
temperature : userInputs.temperature,
humidity : userInputs.humidity
});
const responseData = response.data;
setSuitableCrop(responseData);
} catch (error) {
console.error('Error fetching crop data:', error);
} finally {
setIsLoading(false);
}
};
fetchCropData();
}, []);
console.log("output", suitableCrop)
return (
<ImageBackground
source={require('../../assets/weatherinput.jpeg')} // Replace with the path to your background image
style={styles.backgroundImage}
>
<View style={styles.container}>
<Text style={styles.title}>Suitable Crop</Text>
<View style={styles.cropContainer}>
<Text style={styles.cropName}>{suitableCrop?.crop}</Text>
</View>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
color: '#fff',
},
cropContainer: {
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderRadius: 8,
padding: 20,
alignItems: 'center',
},
cropName: {
fontSize: 28,
fontWeight: 'bold',
color: '#000',
},
});
export default Crops;
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/weatherCrop/WeatherData.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const WeatherData = () => {
const [humidity, setHumidity] = useState('');
const [temperature, setTemperature] = useState('');
const navigation = useNavigation();
return (
<ImageBackground
source={require('../../assets/weatherinput.jpeg')} // Replace with the path to your background image
style={styles.backgroundImage}
>
<View style={styles.container}>
<Text style={styles.title}>Add Weather Data Manually</Text>
<View style={styles.inputContainer}>
<Text style={styles.label}>Humidity: </Text>
<TextInput
style={styles.input}
value={humidity}
onChangeText={setHumidity}
placeholder="Enter humidity"
keyboardType="numeric"
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.label}>Temperature:</Text>
<TextInput
style={styles.input}
value={temperature}
onChangeText={setTemperature}
placeholder="Enter temperature"
keyboardType="numeric"
/>
</View>
<TouchableOpacity style={styles.saveButton} onPress={handleSaveData}>
<Text style={styles.saveButtonText}>Save Data</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
color: '#fff',
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 10,
},
label: {
marginRight: 10,
fontSize: 16,
color: '#fff',
},
input: {
flex: 1,
height: 40,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 8,
paddingHorizontal: 10,
color: '#fff',
},
saveButton: {
backgroundColor: '#007AFF',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
marginTop: 20,
},
saveButtonText: {
fontSize: 16,
fontWeight: 'bold',
color: '#fff',
},
});
export default WeatherData;
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/components/weatherCrop/WeatherDataOptions.js 0 → 100644
View file @ 6c0c7ab1
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const WeatherDataOptions = () => {
const [selectedOption, setSelectedOption] = useState(null);
const navigation = useNavigation();
const handleOptionSelect = (option) => {
setSelectedOption(option);
};
return (
<ImageBackground
source={require('../../assets/weatherinput.jpeg')} // Replace with the path to your background image
style={styles.backgroundImage}
>
<View style={styles.container}>
<TouchableOpacity
style={[styles.optionButton, selectedOption === 'manual' && styles.selectedOptionButton]}
onPress={() => {navigation.navigate("Weather Data")}}
>
<Text style={[styles.optionButtonText, selectedOption === 'manual' && styles.selectedOptionButtonText]}>
Add Weather Data Manually
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.optionButton, selectedOption === 'iot' && styles.selectedOptionButton]}
onPress={() => handleOptionSelect('iot')}
>
<Text
style={[styles.optionButtonText, selectedOption === 'iot' && styles.selectedOptionButtonText]}
>
Get Weather Data from IoT Device
</Text>
</TouchableOpacity>
</View>
</ImageBackground>
);
};
const styles = StyleSheet.create({
backgroundImage: {
flex: 1,
resizeMode: 'cover',
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 20,
},
optionButton: {
backgroundColor: '#eee',
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
marginBottom: 10,
},
selectedOptionButton: {
backgroundColor: '#007AFF',
},
optionButtonText: {
fontSize: 16,
fontWeight: 'bold',
},
selectedOptionButtonText: {
color: '#fff',
},
});
export default WeatherDataOptions;
Weather Analyzer and Crop Reccomender-IT20151874/RP-MobileAPP-FE/package.json 0 → 100644
View file @ 6c0c7ab1
{
"name": "ctse-assignment",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "^18.0.1",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"axios": "^1.4.0",
"expo": "~48.0.9",
"expo-status-bar": "~1.4.4",
"firebase": "^9.18.0",
"native-base": "^3.4.28",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-svg": "^13.9.0",
"react-native-web": "~0.18.10"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"private": true
}
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