Spaces:
Sleeping
Sleeping
File size: 1,864 Bytes
5b0cefa 37b358c 228e63f 37b358c 5b0cefa 37b358c 228e63f 37b358c 228e63f 37b358c 228e63f 37b358c 228e63f 37b358c 228e63f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!-- show_image.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мониторинг растения</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
img {
max-width: 90%;
height: auto;
border: 2px solid #000;
margin-bottom: 20px;
}
.stats {
font-size: 1.2em;
margin-top: 10px;
}
.green { color: green; }
.yellow { color: goldenrod; }
.brown { color: brown; }
</style>
</head>
<body>
<h1>Последнее изображение растения</h1>
<img id="plantImage" src="/last_image" alt="Растение">
<div class="stats">
<div class="green">Зелёный: <span id="green">0</span>%</div>
<div class="yellow">Жёлтый: <span id="yellow">0</span>%</div>
<div class="brown">Коричневый: <span id="brown">0</span>%</div>
</div>
<script>
function updateImageAndStats() {
const timestamp = new Date().getTime();
document.getElementById("plantImage").src = "/last_image?t=" + timestamp;
fetch("/color_stats")
.then(response => response.json())
.then(data => {
document.getElementById("green").textContent = data.green;
document.getElementById("yellow").textContent = data.yellow;
document.getElementById("brown").textContent = data.brown;
});
}
// Первичная загрузка
updateImageAndStats();
// Обновление каждые 10 секунд
setInterval(updateImageAndStats, 10000);
</script>
</body>
</html>
|