Spaces:

RushiMane2003
/

Irrigation_Monitoring

Sleeping

App Files Files Community

RushiMane2003 commited on Sep 20, 2025

Commit

94ffab5

verified ·

1 Parent(s): acbd0d5

Update templates/predict.html

Browse files

Files changed (1) hide show

templates/predict.html +208 -206

templates/predict.html CHANGED Viewed

@@ -1,206 +1,208 @@
-<!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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
-  <style>
-      body {
-          background-color: #f4f8f4;
-          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      }
-      .header {
-          background-color: #28a745;
-          color: white;
-          padding: 20px;
-          text-align: center;
-          font-weight: bold;
-      }
-      .container {
-          margin-top: 30px;
-          padding: 20px;
-          background-color: white;
-          border-radius: 15px;
-          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-      }
-      .result-label {
-          font-weight: bold;
-          color: #555;
-      }
-      .form-control[readonly] {
-          font-size: 1.2rem;
-          text-align: center;
-          font-weight: bold;
-          color: #28a745;
-          background-color: #e9f5e9;
-          border: 2px solid #28a745;
-      }
-      .gauge-container {
-          margin-top: 20px;
-          text-align: center;
-      }
-      .info-card {
-          background-color: #f8f9fa;
-          border: 1px solid #dee2e6;
-          border-radius: 10px;
-          padding: 25px;
-          margin-top: 40px;
-          text-align: center;
-      }
-      .info-card h4 {
-          color: #28a745;
-          font-weight: bold;
-      }
-      .btn-start-motor {
-          background-color: #28a745;
-          color: white;
-          font-size: 1.2rem;
-          padding: 12px 25px;
-          font-weight: bold;
-          border-radius: 8px;
-          transition: background-color 0.3s;
-      }
-      .btn-start-motor:hover {
-          background-color: #218838;
-      }
-      .camera-container {
-          margin-top: 20px;
-          text-align: center;
-          display: none;
-      }
-      .timer {
-          font-size: 2.5rem;
-          color: white;
-          background-color: #28a745;
-          font-weight: bold;
-          padding: 15px 30px;
-          border-radius: 10px;
-          display: inline-block;
-          margin-top: 15px;
-      }
-      video {
-          width: 100%;
-          max-width: 600px;
-          height: auto;
-          border-radius: 10px;
-          border: 2px solid #ddd;
-      }
-      .alert-message {
-          font-size: 1.5rem;
-          color: #dc3545;
-          font-weight: bold;
-          margin-top: 20px;
-          text-align: center;
-      }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>Water Requirement Prediction Results</h1>
-  </div>
-  <div class="container">
-    <div class="row">
-      <!-- Water Requirement -->
-      <div class="col-md-6 mb-4">
-        <label for="water_requirement" class="result-label">Predicted Water Requirement (m³/sq.m):</label>
-        <input type="text" class="form-control" id="water_requirement" value="{{ water_requirement }}" readonly>
-        <div class="gauge-container">
-          {{ water_gauge|safe }}
-        </div>
-      </div>
-      <!-- Motor On Time -->
-      <div class="col-md-6 mb-4">
-        <label for="estimated_time" class="result-label">Estimated Motor On-Time:</label>
-        <input type="text" class="form-control" id="estimated_time" value="{{ estimated_time_duration }} {{ time_unit }}" readonly>
-        <div class="gauge-container">
-          {{ time_gauge|safe }}
-        </div>
-      </div>
-    </div>
-    <!-- AI Monitoring Section -->
-    <div class="info-card">
-      <h4>Want to automatically inspect your irrigation process?</h4>
-      <p class="mt-3">Use our AI-driven Irrigation Monitoring to watch the process from your phone. You will receive a WhatsApp message to start the motor. Once started, you can monitor it live here.</p>
-      <button id="startMonitoring" class="btn btn-start-motor">Start AI Monitoring</button>
-    </div>
-    <div class="camera-container" id="cameraContainer">
-      <h4 class="text-center mb-3">Live Irrigation Feed</h4>
-      <video id="videoElement" autoplay playsinline></video>
-      <div class="timer" id="timer"></div>
-    </div>
-    <div class="alert-message" id="alertMessage"></div>
-  </div>
-  <script>
-    document.getElementById('startMonitoring').addEventListener('click', function() {
-      // Show camera container
-      document.getElementById('cameraContainer').style.display = 'block';
-      // Start video stream from camera
-      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
-          .then(function(stream) {
-            document.getElementById('videoElement').srcObject = stream;
-          })
-          .catch(function(err) {
-            console.log("Camera Error: " + err);
-            alert("Could not access the camera. Please ensure you have given permission.");
-          });
-      }
-      // The prompt for starting the motor is now handled via WhatsApp.
-      // The timer will start based on the reply from WhatsApp.
-      // This front-end logic is now primarily for viewing the stream.
-      // For demonstration purposes, we will simulate the timer start here after a delay.
-      // Calculate estimated time in seconds for the timer display
-      let estimatedTime = parseFloat("{{ estimated_time_duration }}");
-      let timeUnit = "{{ time_unit }}";
-      let estimatedTimeSeconds = timeUnit === "minutes" ? estimatedTime * 60 : estimatedTime;
-      let timerElem = document.getElementById('timer');
-      let timeRemaining = Math.floor(estimatedTimeSeconds);
-      // A message to inform user to check WhatsApp
-      alert("Check your WhatsApp to start the motor. The timer and monitoring will begin here once you confirm.");
-      // NOTE: The actual countdown should be triggered by a confirmation from the backend (e.g., via WebSocket).
-      // For this example, we'll just start it to demonstrate the UI.
-      let countdown = setInterval(function() {
-        if (timeRemaining <= 0) {
-          clearInterval(countdown);
-          timerElem.textContent = "Finished";
-          // Play beep sound
-          let beep = new Audio('/static/alarn_tune.mp3');
-          beep.play();
-          document.getElementById('alertMessage').textContent = "Irrigation time is over. Motor is off automatically.";
-        } else {
-          timerElem.textContent = timeRemaining + "s";
-        }
-        timeRemaining--;
-      }, 1000);
-      // Simulate sending a request to the backend (already done on page load via python)
-      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("Monitoring started:", data))
-      .catch(error => console.error("Error starting monitoring:", error));
-    });
-  </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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+  <style>
+      body {
+          background-color: #f4f8f4;
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      }
+      .header {
+          background-color: #28a745;
+          color: white;
+          padding: 20px;
+          text-align: center;
+          font-weight: bold;
+      }
+      .container {
+          margin-top: 30px;
+          padding: 20px;
+          background-color: white;
+          border-radius: 15px;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+          /* FIX 3: Start with content hidden and add a smooth fade-in transition */
+          opacity: 0;
+          transition: opacity 0.5s ease-in-out;
+      }
+      .result-label {
+          font-weight: bold;
+          color: #555;
+      }
+      .form-control[readonly] {
+          font-size: 1.2rem;
+          text-align: center;
+          font-weight: bold;
+          color: #28a745;
+          background-color: #e9f5e9;
+          border: 2px solid #28a745;
+      }
+      .gauge-container {
+          margin-top: 20px;
+          text-align: center;
+      }
+      .info-card {
+          background-color: #f8f9fa;
+          border: 1px solid #dee2e6;
+          border-radius: 10px;
+          padding: 25px;
+          margin-top: 40px;
+          text-align: center;
+      }
+      .btn-start-motor {
+          background-color: #28a745;
+          color: white;
+          font-size: 1.2rem;
+          padding: 12px 25px;
+          font-weight: bold;
+          border-radius: 8px;
+          transition: background-color 0.3s;
+      }
+      .btn-start-motor:hover {
+          background-color: #218838;
+      }
+      /* --- FIX 1 & 2: Camera Container, Video, and Timer Styles --- */
+      .camera-container {
+          margin-top: 20px;
+          display: none; /* Keep hidden by default */
+          /* Use Flexbox to stack and center children */
+          display: flex;
+          flex-direction: column; /* Stack items vertically */
+          align-items: center;   /* Center items horizontally */
+          gap: 20px; /* Add space between video and timer */
+      }
+      video {
+          width: 100%; /* Be responsive to container width */
+          max-width: 720px; /* Set a max-width for larger screens */
+          height: auto;
+          border-radius: 10px;
+          border: 2px solid #ddd;
+          background-color: #000; /* Add a background for when the feed is loading */
+      }
+      .timer {
+          font-size: 2rem;
+          color: white;
+          background-color: #28a745;
+          font-weight: bold;
+          padding: 10px 25px;
+          border-radius: 10px;
+          display: inline-block;
+          min-width: 120px; /* Give it a minimum width */
+          text-align: center;
+      }
+      /* Style for the "Finished" button state */
+      .timer-finished {
+          font-size: 1.5rem;
+          padding: 15px 40px;
+          background-color: #28a745; /* Green button color */
+      }
+      .alert-message {
+          font-size: 1.5rem;
+          color: #dc3545;
+          font-weight: bold;
+          margin-top: 20px;
+          text-align: center;
+      }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>Water Requirement Prediction Results</h1>
+  </div>
+  <div class="container">
+    <div class="row">
+      <!-- Water Requirement -->
+      <div class="col-md-6 mb-4">
+        <label for="water_requirement" class="result-label">Predicted Water Requirement (m³/sq.m):</label>
+        <input type="text" class="form-control" id="water_requirement" value="{{ water_requirement }}" readonly>
+        <div class="gauge-container">
+          {{ water_gauge|safe }}
+        </div>
+      </div>
+      <!-- Motor On Time -->
+      <div class="col-md-6 mb-4">
+        <label for="estimated_time" class="result-label">Estimated Motor On-Time:</label>
+        <input type="text" class="form-control" id="estimated_time" value="{{ estimated_time_duration }} {{ time_unit }}" readonly>
+        <div class="gauge-container">
+          {{ time_gauge|safe }}
+        </div>
+      </div>
+    </div>
+    <!-- AI Monitoring Section -->
+    <div class="info-card">
+      <h4>Want to automatically inspect your irrigation process?</h4>
+      <p class="mt-3">Use our AI-driven Irrigation Monitoring to watch the process from your phone. You will receive a WhatsApp message to start the motor. Once started, you can monitor it live here.</p>
+      <button id="startMonitoring" class="btn btn-start-motor">Start AI Monitoring</button>
+    </div>
+    <!-- The camera and timer are now properly styled to be centered and stacked -->
+    <div class="camera-container" id="cameraContainer">
+      <h4 class="text-center mb-0">Live Irrigation Feed</h4>
+      <video id="videoElement" autoplay playsinline></video>
+      <div class="timer" id="timer"></div>
+    </div>
+    <div class="alert-message" id="alertMessage"></div>
+  </div>
+  <script>
+    // FIX 3: Wait for the entire page to load, then fade in the content
+    window.onload = function() {
+      document.querySelector('.container').style.opacity = 1;
+    };
+    document.getElementById('startMonitoring').addEventListener('click', function() {
+      document.getElementById('cameraContainer').style.display = 'flex'; // Use flex to show it
+      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
+          .then(function(stream) {
+            document.getElementById('videoElement').srcObject = stream;
+          })
+          .catch(function(err) {
+            console.log("Camera Error: " + err);
+            alert("Could not access the camera. Please ensure you have given permission.");
+          });
+      }
+      let estimatedTime = parseFloat("{{ estimated_time_duration }}");
+      let timeUnit = "{{ time_unit }}";
+      let estimatedTimeSeconds = timeUnit === "minutes" ? estimatedTime * 60 : estimatedTime;
+      let timerElem = document.getElementById('timer');
+      let timeRemaining = Math.floor(estimatedTimeSeconds);
+      alert("Check your WhatsApp to start the motor. The timer and monitoring will begin here once you confirm.");
+      let countdown = setInterval(function() {
+        if (timeRemaining <= 0) {
+          clearInterval(countdown);
+          // Update timer to look like a finished button
+          timerElem.textContent = "Finished";
+          timerElem.classList.add('timer-finished'); // Add the new class
+          let beep = new Audio('/static/alarn_tune.mp3');
+          beep.play();
+          document.getElementById('alertMessage').textContent = "Irrigation time is over. Motor is off automatically.";
+        } else {
+          timerElem.textContent = timeRemaining + "s";
+        }
+        timeRemaining--;
+      }, 1000);
+      fetch('/start_motor', { method: 'POST' })
+      .then(response => response.json())
+      .then(data => console.log("Monitoring request sent:", data))
+      .catch(error => console.error("Error sending monitoring request:", error));
+    });
+  </script>
+</body>
+</html>