Spaces:

rajkhanke
/

Pump_status

Runtime error

App Files Files Community

rajkhanke commited on Dec 1, 2024

Commit

8508900

verified ·

1 Parent(s): 3223c7e

Upload 5 files

Browse files

Files changed (5) hide show

static/alarn_tune.mp3 +0 -0
static/images/irrigation_image.jpeg +0 -0
templates/index.html +169 -0
templates/predict.html +247 -0
templates/sample.html +42 -0

static/alarn_tune.mp3 ADDED Viewed

Binary file (229 kB). View file

static/images/irrigation_image.jpeg ADDED Viewed

templates/index.html ADDED Viewed

	@@ -0,0 +1,169 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Irrigation System</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <style>
+        body {
+            background-color: #f0f8f5;
+        }
+        .container {
+            background-color: #ffffff;
+            border-radius: 10px;
+            margin-top: 50px;
+            padding: 30px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            border: 2px solid green;
+            margin-bottom: 20px; /* Add bottom margin here */
+        }
+        h1 {
+            color: green;
+            text-align: center;
+            font-weight: bold;
+        }
+        .left-box, .right-box {
+            padding: 20px;
+        }
+        .form-group label {
+            font-weight: bold;
+        }
+        .form-control, .form-control-file {
+            border: 2px solid green;
+            border-radius: 5px;
+        }
+        #image-preview {
+            display: block;
+            margin: 10px auto; /* Centering the image */
+            width: 100px; /* Size of the preview */
+            height: 100px; /* Size of the preview */
+            border-radius: 5px;
+            object-fit: cover;
+            border: 2px solid green; /* Optional: Border around the preview */
+        }
+        #weather-box {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e0f8e0;
+            border-radius: 8px;
+            border: 2px solid green;
+        }
+        #decorative-image {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Smart Irrigation System</h1>
+        <form method="POST" action="/" enctype="multipart/form-data">
+            <div class="row">
+                <!-- Left side: Input Fields -->
+                <div class="col-md-7 left-box">
+                    <!-- Crop Type Dropdown -->
+                    <div class="form-group">
+                        <label for="crop_type">Select Crop Type</label>
+                        <select class="form-control" id="crop_type" name="crop_type" required>
+                            <option value="">--Select Crop Type--</option>
+                            {% for crop, value in crop_types.items() %}
+                                <option value="{{ crop }}" {% if crop == crop_type %}selected{% endif %}>{{ crop }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <!-- Crop Age Input -->
+                    <div class="form-group">
+                        <label for="crop_age">Enter Crop Age (in days)</label>
+                        <input type="number" class="form-control" id="crop_age" name="crop_age" value="{{ crop_age }}" required>
+                    </div>
+                    <!-- Region Dropdown -->
+                    <div class="form-group">
+                        <label for="region">Select Region</label>
+                        <select class="form-control" id="region" name="region" required>
+                            <option value="">--Select Region--</option>
+                            {% for region, value in regions.items() %}
+                                <option value="{{ region }}" {% if region == region %}selected{% endif %}>{{ region }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <!-- Irrigation Type Dropdown -->
+                    <div class="form-group">
+                        <label for="irrigation_type">Select Irrigation Type</label>
+                        <select class="form-control" id="irrigation_type" name="irrigation_type" required>
+                            <option value="">--Select Irrigation Type--</option>
+                            {% for irrigation, value in irrigation_types.items() %}
+                                <option value="{{ irrigation }}" {% if irrigation == irrigation_type %}selected{% endif %}>{{ irrigation }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <!-- Weather Data Section -->
+                    <div class="form-group">
+                        <label for="city">Enter Your City for Weather</label>
+                        <input type="text" class="form-control" id="city" name="city" value="{{ city }}">
+                        <button type="submit" name="fetch_weather" class="btn btn-success mt-2">Fetch Weather Data</button>
+                    </div>
+                    <!-- Display weather data -->
+                    {% if temperature %}
+                    <div id="weather-box">
+                        <p><strong>Weather Description:</strong> {{ weather_desc }}</p>
+                        <p><strong>Temperature:</strong> {{ temperature }} °C</p>
+                        <p><strong>Humidity:</strong> {{ humidity }}%</p>
+                        <p><strong>Pressure:</strong> {{ pressure }} hPa</p>
+                    </div>
+                    {% endif %}
+                    <div class="form-group">
+                       <label for="soil_moisture">Upload Soil Moisture Data (CSV)</label>
+                       <input type="file" class="form-control-file" id="soil_moisture" name="soil_moisture" accept=".csv" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="soil_image">Upload Soil Image</label>
+                        <input type="file" class="form-control-file" id="soil_image" name="soil_image" accept="image/*" onchange="previewImage(event)">
+                    </div>
+                    <!-- Image Preview Section -->
+                    <img id="image-preview" src="{{ soil_image_url }}" alt="Image Preview" style="display: {% if soil_image_url %}block{% else %}none{% endif %};">
+                    {% if predicted_soil_type %}
+                    <div class="form-group">
+                       <label for="predicted_soil_type"><strong>Predicted Soil Type:</strong></label>
+                       <input type="text" class="form-control" id="predicted_soil_type" value="{{ soil_label }}" readonly>
+                    </div>
+                    {% endif %}
+                </div>
+                <!-- Right side: Static Image Decoration -->
+                <div class="col-md-5 right-box text-center">
+                    <img id="decorative-image" src="static/images/irrigation_image.jpeg" alt="Decorative Irrigation Image">
+                </div>
+            </div>
+            <button type="submit" name="predict" class="btn btn-primary btn-block">Predict Pump Status</button>
+        </form>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        // Preview uploaded image
+        function previewImage(event) {
+            const [file] = event.target.files;
+            const preview = document.getElementById('image-preview');
+            if (file) {
+                preview.src = URL.createObjectURL(file);
+                preview.style.display = 'block'; // Show the image preview
+            } else {
+                preview.style.display = 'none'; // Hide if no file is selected
+            }
+        }
+    </script>
+</body>
+</html>

templates/predict.html ADDED Viewed

	@@ -0,0 +1,247 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pump Prediction</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        body {
+            background-color: #f0f8f5;
+        }
+        .container {
+            background-color: #ffffff;
+            border-radius: 10px;
+            margin-top: 100px;
+            padding: 30px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            position: relative;
+        }
+        .status {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+        .status.on {
+            color: green;
+            border: 2px solid green;
+            padding: 10px;
+            display: inline-block;
+            border-radius: 5px;
+        }
+        .status.off {
+            color: red;
+            border: 2px solid red;
+            padding: 10px;
+            display: inline-block;
+            border-radius: 5px;
+        }
+        h2 {
+            color: green;
+            font-weight: bold;
+            text-align: center;
+        }
+        #time-counter {
+            position: absolute;
+            top: 60px;
+            right: 20px;
+            font-size: 1.5rem;
+            color: brown; /* Brown color for the time counter */
+        }
+        /* Center-align and highlight the gauge chart */
+        #gauge-container {
+            text-align: center;
+            padding: 20px;
+        }
+        #gauge {
+            margin-left : 60px;
+            display: inline-block;
+            width: 650px;
+            height: 450px;
+            border: 2px solid #4CAF50; /* Highlight with green border */
+            border-radius: 10px;
+            padding: 10px;
+        }
+    </style>
+    <script>
+        let alertSound = new Audio('{{ url_for("static", filename="alarn_tune.mp3") }}');
+        function playAlertSound() {
+            alertSound.currentTime = 0;
+            alertSound.play().catch(error => console.error("Error playing sound:", error));
+        }
+        function fetchPumpStatus() {
+            fetch('/update_pump_status')
+                .then(response => response.json())
+                .then(data => {
+                    const statusElement = document.getElementById('pumpStatus');
+                    statusElement.innerHTML = 'Pump Status: ' + data.pump_status;
+                    statusElement.className = data.pump_status === 'On' ? 'status on' : 'status off';
+                    if (data.pump_status === 'Off') {
+                        console.log("Pump status is Off. Playing alert sound.");
+                        playAlertSound();
+                    }
+                })
+                .catch(err => console.error("Error fetching pump status:", err));
+        }
+        function fetchGraphData() {
+            fetch('/update_graph')
+                .then(response => response.json())
+                .then(data => {
+                    const time = data.map((_, index) => index + 1);
+                    const soilMoisture = data.map(entry => entry[0]);
+                    const pumpStatus = data.map(entry => entry[1]);
+                    // Update Gauge chart with soil moisture
+                    const currentSoilMoisture = soilMoisture[soilMoisture.length - 1];
+                    updateGaugeChart(currentSoilMoisture);
+                    // Pump Status vs. Time
+                    const binaryPumpStatus = pumpStatus.map(status => status);
+                    const trace1 = {
+                        x: time,
+                        y: binaryPumpStatus,
+                        mode: 'lines+markers',
+                        type: 'scatter',
+                        name: 'Pump Status',
+                        line: { color: 'blue' },
+                    };
+                    const layout1 = {
+                        title: 'Pump Status (On/Off) vs. Time',
+                        xaxis: { title: 'Time (s)' },
+                        yaxis: { title: 'Pump Status', tickvals: [-1, 1], ticktext: ['Off', 'On'], range: [-1.5, 1.5] },
+                        showlegend: true
+                    };
+                    Plotly.newPlot('graph1', [trace1], layout1);
+                    // Soil Moisture vs. Time
+                    const trace2 = {
+                        x: time,
+                        y: soilMoisture,
+                        mode: 'lines+markers',
+                        type: 'scatter',
+                        name: 'Soil Moisture',
+                        line: { color: 'green' },
+                    };
+                    const layout2 = {
+                        title: 'Soil Moisture vs. Time',
+                        xaxis: { title: 'Time (s)' },
+                        yaxis: { title: 'Soil Moisture' },
+                        showlegend: true
+                    };
+                    Plotly.newPlot('graph2', [trace2], layout2);
+                    // Combined Graph for Soil Moisture vs. Pump Status
+                    const trace3 = {
+                        x: soilMoisture,
+                        y: binaryPumpStatus,
+                        mode: 'lines',
+                        type: 'scatter',
+                        name: 'Pump Status',
+                        line: { color: 'blue' },
+                    };
+                    const layout3 = {
+                        title: 'Pump Status and Soil Moisture',
+                        xaxis: { title: 'Soil Moisture' },
+                        yaxis: { title: 'Pump Status', tickvals: [-1, 1], ticktext: ['Off', 'On'], range: [-1.5, 1.5] },
+                        showlegend: true
+                    };
+                    Plotly.newPlot('graph3', [trace3], layout3);
+                    // Histogram for Soil Moisture
+                    const trace4 = {
+                        x: soilMoisture,
+                        type: 'histogram',
+                    };
+                    const layout4 = {
+                        title: 'Histogram of Soil Moisture',
+                        xaxis: { title: 'Soil Moisture' },
+                        yaxis: { title: 'Frequency' }
+                    };
+                    Plotly.newPlot('graph4', [trace4], layout4);
+                })
+                .catch(err => console.error("Error fetching graph data:", err));
+        }
+        // Function to update the gauge chart
+        function updateGaugeChart(value) {
+            const data = [
+                {
+                    type: "indicator",
+                    mode: "gauge+number+delta",
+                    value: value,
+                    title: { text: "Soil Moisture", font: { size: 24 } },
+                    gauge: {
+                        axis: { range: [0, 100] },
+                        steps: [
+                            { range: [0, 30], color: "red" },
+                            { range: [30, 60], color: "yellow" },
+                            { range: [60, 100], color: "green" }
+                        ],
+                        threshold: {
+                            line: { color: "black", width: 4 },
+                            thickness: 0.75,
+                            value: value
+                        }
+                    }
+                }
+            ];
+            const layout = {
+                width: 600,
+                height: 400,
+                margin: { t: 0, b: 0 }
+            };
+            Plotly.newPlot('gauge', data, layout);
+        }
+        // Time counter functionality
+        let timeCounter = 0;
+        function updateTimeCounter() {
+            timeCounter++;
+            document.getElementById('time-counter').innerText = `Time: ${timeCounter} seconds`;
+        }
+        // Set intervals for data fetching and time counting
+        setInterval(fetchPumpStatus, 2000); // Update every 2 seconds
+        setInterval(fetchGraphData, 2000); // Update every 2 seconds
+        setInterval(updateTimeCounter, 1000); // Update time counter every second
+        document.addEventListener('click', () => {
+            alertSound.load(); // Load the sound on user interaction
+        });
+    </script>
+</head>
+<body>
+    <div class="container">
+        <h2>Pump & Irrigation Status Prediction</h2>
+        <div id="pumpStatus" class="status {{ 'on' if pump_status == 'On' else 'off' }}">
+            Pump Status: {{ pump_status }}
+        </div>
+        <div id="time-counter">Time: 0 seconds</div>
+        <!-- Soil Moisture Gauge Chart with center alignment and highlight -->
+        <div id="gauge-container">
+            <div id="gauge"></div>
+        </div>
+        <div id="graph1" style="width:100%; height:400px;"></div>
+        <div id="graph2" style="width:100%; height:400px;"></div>
+        <div id="graph3" style="width:100%; height:400px;"></div>
+        <div id="graph4" style="width:100%; height:400px;"></div>
+    </div>
+</body>
+</html>

templates/sample.html ADDED Viewed

	@@ -0,0 +1,42 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Value Beep</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            margin-top: 50px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <h1>Random Value Checker</h1>
+    <button id="generateButton">Generate Random Value</button>
+    <p id="result"></p>
+    <audio id="beepSound" src="/alarn_tune.mp3"></audio>
+    <script>
+        document.getElementById("generateButton").onclick = function() {
+            // Generate a random value between 0 and 20
+            var randomValue = Math.floor(Math.random() * 21);
+            document.getElementById("result").innerText = "Generated Value: " + randomValue;
+            // Check if the random value is greater than 10
+            if (randomValue > 10) {
+                document.getElementById("beepSound").play();
+            }
+        }
+    </script>
+</body>
+</html>