Spaces:

RushiMane2003
/

Irrigation_Monitoring

Sleeping

App Files Files Community

RushiMane2003 commited on Sep 21, 2025

Commit

4210945

verified ·

1 Parent(s): 94ffab5

Update templates/predict.html

Browse files

Files changed (1) hide show

templates/predict.html +80 -29

templates/predict.html CHANGED Viewed

@@ -23,7 +23,6 @@
           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;
       }
@@ -63,24 +62,21 @@
       .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;
@@ -90,16 +86,14 @@
           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;
@@ -107,6 +101,12 @@
           margin-top: 20px;
           text-align: center;
       }
   </style>
 </head>
 <body>
@@ -143,7 +143,7 @@
       <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>
@@ -153,15 +153,56 @@
     <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) {
@@ -172,23 +213,19 @@
             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.";
@@ -198,10 +235,24 @@
         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>

           background-color: white;
           border-radius: 15px;
           box-shadow: 0 4px 12px rgba(0,0,0,0.1);
           opacity: 0;
           transition: opacity 0.5s ease-in-out;
       }
       .btn-start-motor:hover {
           background-color: #218838;
       }
       .camera-container {
           margin-top: 20px;
+          display: none;
           display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 20px;
       }
       video {
+          width: 100%;
+          max-width: 720px;
           height: auto;
           border-radius: 10px;
           border: 2px solid #ddd;
+          background-color: #000;
       }
       .timer {
           font-size: 2rem;
           padding: 10px 25px;
           border-radius: 10px;
           display: inline-block;
+          min-width: 120px;
           text-align: center;
       }
       .timer-finished {
           font-size: 1.5rem;
           padding: 15px 40px;
+          background-color: #28a745;
       }
       .alert-message {
           font-size: 1.5rem;
           color: #dc3545;
           margin-top: 20px;
           text-align: center;
       }
+      /* Modal small style tweak */
+      .modal-header {
+          background-color: #28a745;
+          color: white;
+      }
   </style>
 </head>
 <body>
       <button id="startMonitoring" class="btn btn-start-motor">Start AI Monitoring</button>
     </div>
+    <!-- The camera and timer -->
     <div class="camera-container" id="cameraContainer">
       <h4 class="text-center mb-0">Live Irrigation Feed</h4>
       <video id="videoElement" autoplay playsinline></video>
     <div class="alert-message" id="alertMessage"></div>
   </div>
+  <!-- --- START: Modal asking 1 or 0 --- -->
+  <div class="modal fade" id="startModal" tabindex="-1" aria-labelledby="startModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="startModalLabel">Start Irrigation</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Would you like to start the motor now?</p>
+          <p class="mb-0"><strong>Reply 1</strong> = Start &nbsp;&nbsp; <strong>Reply 0</strong> = Cancel</p>
+        </div>
+        <div class="modal-footer">
+          <button id="modalCancelBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">0 — Don't Start</button>
+          <button id="modalStartBtn" type="button" class="btn btn-success">1 — Start</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- --- END: Modal --- -->
+  <!-- Bootstrap bundle (includes Popper) -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
   <script>
+    // Fade in container
     window.onload = function() {
       document.querySelector('.container').style.opacity = 1;
+      // Show the modal automatically on load
+      var startModalEl = document.getElementById('startModal');
+      var bsModal = new bootstrap.Modal(startModalEl, { backdrop: 'static', keyboard: false });
+      bsModal.show();
+      // Button handlers for modal
+      document.getElementById('modalStartBtn').addEventListener('click', function() {
+        bsModal.hide();
+        // Programmatically click the Start Monitoring button so existing logic executes (camera + client timer + server POST)
+        document.getElementById('startMonitoring').click();
+      });
+      document.getElementById('modalCancelBtn').addEventListener('click', function() {
+        // User chose "0" - do not start monitoring
+        bsModal.hide();
+        document.getElementById('alertMessage').textContent = "Motor was not started.";
+      });
     };
+    document.getElementById('startMonitoring').addEventListener('click', function() {
+      document.getElementById('cameraContainer').style.display = 'flex';
       if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
           .then(function(stream) {
             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);
+      // Note: start_motor fetch is already below. We keep it so server-side timer + completion messages work.
       let countdown = setInterval(function() {
         if (timeRemaining <= 0) {
           clearInterval(countdown);
           timerElem.textContent = "Finished";
+          timerElem.classList.add('timer-finished');
           let beep = new Audio('/static/alarn_tune.mp3');
           beep.play();
           document.getElementById('alertMessage').textContent = "Irrigation time is over. Motor is off automatically.";
         timeRemaining--;
       }, 1000);
+      // Call the server endpoint which now starts the server-side timer (so finalization/WhatsApp behavior remains consistent)
       fetch('/start_motor', { method: 'POST' })
       .then(response => response.json())
+      .then(data => {
+        console.log("Monitoring request sent:", data);
+        if (data && data.status === "motor_started") {
+          // optionally show a confirmation to user
+          document.getElementById('alertMessage').textContent = `Motor started for ${data.estimated_time_duration} ${data.time_unit}.`;
+        } else {
+          if (data && data.status === "no_pending_task") {
+            document.getElementById('alertMessage').textContent = "No pending irrigation task found. Please submit a new prediction.";
+          }
+        }
+      })
+      .catch(error => {
+        console.error("Error sending monitoring request:", error);
+        document.getElementById('alertMessage').textContent = "Error starting motor on server. Check logs.";
+      });
     });
   </script>
 </body>