|
|
<!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 Motor On Time in Seconds:</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> |
|
|
|
|
|
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 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; |
|
|
} |
|
|
|
|
|
let estimatedTime = parseFloat("{{ estimated_time_duration }}"); |
|
|
let timeUnit = "{{ time_unit }}"; |
|
|
let estimatedTimeSeconds = timeUnit === "minutes" ? estimatedTime * 60 : estimatedTime; |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
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."; |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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> |
|
|
|
