Spaces:

Rajkhanke007
/

irrigation_Water_Requirement_Prediction

Running

App Files Files Community

Rajkhanke007 commited on Mar 22

Commit

0994aa5

verified ·

1 Parent(s): 2014c64

Update templates/predict.html

Browse files

Files changed (1) hide show

templates/predict.html +185 -186

templates/predict.html CHANGED Viewed

@@ -1,186 +1,185 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Prediction Results</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-    <style>
-        .container {
-            margin-top: 20px;
-            padding: 20px;
-            border: 1px solid #ddd;
-            border-radius: 10px;
-        }
-        h1 {
-            color: green;
-            font-weight: bold;
-        }
-        .result-container {
-            padding: 20px;
-            margin-top: 20px;
-        }
-        .result-container .row {
-            justify-content: center;
-        }
-        .form-control {
-            height: 45px;
-            font-size: 18px;
-            text-align: center;
-            font-weight: bold; /* Bold text */
-            color: black; /* Black text */
-            border: 2px solid #28a745; /* Green border */
-        }
-        .result {
-            text-align: center;
-        }
-        .gauge-container {
-            margin-top: 20px;
-        }
-        .gauge-container h5 {
-            margin-bottom: 10px;
-        }
-        .btn-green {
-            background-color: green;
-            color: white;
-        }
-        /* New styles below */
-        .info-text {
-            font-size: 24px; /* Increased font size */
-            font-weight: bold;
-            color: black;
-            margin-top: 40px;
-            text-align: center; /* Center-aligned */
-        }
-        .camera-container {
-            margin-top: 20px;
-            text-align: center;
-            display: none; /* Hidden by default, shown after button click */
-        }
-        .timer {
-            font-size: 36px; /* Increased size */
-            color: white; /* White text */
-            background-color: green; /* Green background */
-            font-weight: bold; /* Bold font */
-            padding: 20px;
-            border-radius: 5px;
-            display: inline-block;
-        }
-        video {
-            width: 100%;
-            height: auto;
-            border: 1px solid #ddd;
-        }
-        .btn-start {
-            margin-top: 20px;
-            background-color: green;
-            color: white;
-            font-size: 18px;
-            padding: 10px 20px;
-        }
-        .alert-message {
-            font-size: 36px; /* Increased size for alert message */
-            color: red;
-            font-weight: bold;
-            margin-top: 20px;
-            text-align: center;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1 class="text-center">Water Requirement Prediction Results</h1>
-        <div class="result-container row">
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="water_requirement">Water Requirement Prediction (m³/sq.m):</label>
-                    <input type="text" class="form-control" id="water_requirement" value="{{ water_requirement }}" readonly>
-                </div>
-                <div class="gauge-container">
-                    <h5>Water Requirement Gauge:</h5>
-                    {{ water_gauge|safe }}
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="form-group">
-                    <label for="estimated_time">Estimated Time Duration (seconds) for which motor should be On:</label>
-                    <input type="text" class="form-control" id="estimated_time" value="{{ estimated_time_duration }} {{ time_unit }}" readonly>
-                </div>
-                <div class="gauge-container">
-                    <h5>Estimated Motor On-Time Gauge:</h5>
-                    {{ time_gauge|safe }}
-                </div>
-            </div>
-        </div>
-        <!-- New section below -->
-        <div class="info-text">
-            Want to automatically inspect your irrigation process using AI-driven Irrigation Monitoring?
-            <br><strong>Press "Start Motor" button</strong>
-            <br>Then click the green <strong>Start</strong> button below.
-        </div>
-        <!-- "Start Motor" Button -->
-        <div class="text-center">
-            <button id="startMotor" class="btn btn-start">Start Motor</button>
-        </div>
-        <div class="camera-container">
-            <video id="videoElement" autoplay></video>
-            <div class="timer" id="timer"></div>
-        </div>
-        <div class="alert-message" id="alertMessage"></div>
-    </div>
-    <script>
-        // Access camera and start video stream
-        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
-            .then(function(stream) {
-                document.getElementById('videoElement').srcObject = stream;
-            })
-            .catch(function(err) {
-                console.log("Error: " + err);
-            });
-        document.getElementById('startMotor').addEventListener('click', function() {
-            let estimatedTime = {{ estimated_time_duration }};
-            if (estimatedTime < 10) {
-              estimatedTime = estimatedTime * 60; // Convert minutes to seconds
-            }
-            let timeUnit = "{{ time_unit }}";
-            // Show the camera container after the button is clicked
-            document.querySelector('.camera-container').style.display = 'block';
-            // Start the timer
-            let timer = document.getElementById('timer');
-            let timeRemaining = parseInt(estimatedTime, 10);  // Convert to integer
-            let countdown = setInterval(function() {
-                let seconds = timeRemaining;
-                timer.textContent = seconds + "s";
-                if (timeRemaining <= 0) {
-                    clearInterval(countdown);
-                    // Play beep sound
-                    let beep = new Audio('/static/alarn_tune.mp3');
-                    beep.play();
-                    // Display alert message
-                    document.getElementById('alertMessage').textContent = "Stop Irrigation!";
-                }
-                timeRemaining--;
-            }, 1000);
-            fetch('/start_motor', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ estimated_time_duration: estimated_time_duration_seconds })
-            });
-        });
-    </script>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Prediction Results</title>
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+      .container {
+          margin-top: 20px;
+          padding: 20px;
+          border: 1px solid #ddd;
+          border-radius: 10px;
+      }
+      h1 {
+          color: green;
+          font-weight: bold;
+      }
+      .result-container {
+          padding: 20px;
+          margin-top: 20px;
+      }
+      .result-container .row {
+          justify-content: center;
+      }
+      .form-control {
+          height: 45px;
+          font-size: 18px;
+          text-align: center;
+          font-weight: bold;
+          color: black;
+          border: 2px solid #28a745;
+      }
+      .gauge-container {
+          margin-top: 20px;
+      }
+      .gauge-container h5 {
+          margin-bottom: 10px;
+      }
+      .btn-green {
+          background-color: green;
+          color: white;
+      }
+      .info-text {
+          font-size: 24px;
+          font-weight: bold;
+          color: black;
+          margin-top: 40px;
+          text-align: center;
+      }
+      .camera-container {
+          margin-top: 20px;
+          text-align: center;
+          display: none;
+      }
+      .timer {
+          font-size: 36px;
+          color: white;
+          background-color: green;
+          font-weight: bold;
+          padding: 20px;
+          border-radius: 5px;
+          display: inline-block;
+      }
+      video {
+          width: 100%;
+          height: auto;
+          border: 1px solid #ddd;
+      }
+      .btn-start {
+          margin-top: 20px;
+          background-color: green;
+          color: white;
+          font-size: 18px;
+          padding: 10px 20px;
+      }
+      .alert-message {
+          font-size: 36px;
+          color: red;
+          font-weight: bold;
+          margin-top: 20px;
+          text-align: center;
+      }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1 class="text-center">Water Requirement Prediction Results</h1>
+    <div class="result-container row">
+      <div class="col-md-6">
+        <div class="form-group">
+          <label for="water_requirement">Water Requirement Prediction (m³/sq.m):</label>
+          <input type="text" class="form-control" id="water_requirement" value="{{ water_requirement }}" readonly>
+        </div>
+        <div class="gauge-container">
+          <h5>Water Requirement Gauge:</h5>
+          {{ water_gauge|safe }}
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="form-group">
+          <label for="estimated_time">Estimated Time Duration (seconds) for which motor should be On:</label>
+          <input type="text" class="form-control" id="estimated_time" value="{{ estimated_time_duration }} {{ time_unit }}" readonly>
+        </div>
+        <div class="gauge-container">
+          <h5>Estimated Motor On-Time Gauge:</h5>
+          {{ time_gauge|safe }}
+        </div>
+      </div>
+    </div>
+    <div class="info-text">
+      Want to automatically inspect your irrigation process using AI-driven Irrigation Monitoring?
+      <br><strong>Press "Start Motor" button</strong>
+      <br>Then click the green <strong>Start</strong> button below.
+    </div>
+    <div class="text-center">
+      <button id="startMotor" class="btn btn-start">Start Motor</button>
+    </div>
+    <div class="camera-container">
+      <video id="videoElement" autoplay></video>
+      <div class="timer" id="timer"></div>
+    </div>
+    <div class="alert-message" id="alertMessage"></div>
+  </div>
+  <script>
+    // Start video stream from camera
+    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+      .then(function(stream) {
+        document.getElementById('videoElement').srcObject = stream;
+      })
+      .catch(function(err) {
+        console.log("Error: " + err);
+      });
+    document.getElementById('startMotor').addEventListener('click', function() {
+      // Prompt for motor start confirmation via WhatsApp reply simulation
+      let userResponse = prompt("Do you want to start the motor? Reply 1 to start, 0 to not start:");
+      if (userResponse !== "1") {
+        alert("Motor start canceled.");
+        return;
+      }
+      // Calculate estimated time in seconds
+      let estimatedTime = parseFloat("{{ estimated_time_duration }}");
+      let timeUnit = "{{ time_unit }}";
+      let estimatedTimeSeconds = timeUnit === "minutes" ? estimatedTime * 60 : estimatedTime;
+      // Show camera container and start timer
+      document.querySelector('.camera-container').style.display = 'block';
+      let timerElem = document.getElementById('timer');
+      let timeRemaining = Math.floor(estimatedTimeSeconds);
+      let countdown = setInterval(function() {
+        timerElem.textContent = timeRemaining + "s";
+        if (timeRemaining <= 0) {
+          clearInterval(countdown);
+          // Play beep sound
+          let beep = new Audio('/static/alarn_tune.mp3');
+          beep.play();
+          document.getElementById('alertMessage').textContent = "Irrigation time is over. Motor is off. Pump is auto-off.";
+          // Send irrigation complete WhatsApp message
+          fetch('/irrigation_complete', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ crop_type: "{{ crop_type }}", city: "{{ city }}" })
+          })
+          .then(response => response.json())
+          .then(data => console.log("Irrigation complete message sent:", data))
+          .catch(error => console.error("Error sending complete message:", error));
+        }
+        timeRemaining--;
+      }, 1000);
+      // Trigger motor start
+      fetch('/start_motor', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ estimated_time_duration: estimatedTimeSeconds, time_unit: "seconds" })
+      })
+      .then(response => response.json())
+      .then(data => console.log("Motor started:", data))
+      .catch(error => console.error("Error starting motor:", error));
+    });
+  </script>
+</body>
+</html>