Spaces:
Sleeping
Sleeping
File size: 4,368 Bytes
37b358c 7858726 228e63f 37b358c 5b0cefa 7858726 228e63f 7858726 37b358c 7858726 37b358c 7858726 228e63f 37b358c 228e63f 7858726 228e63f 37b358c 7858726 228e63f 7858726 228e63f 7858726 228e63f 7858726 228e63f 7858726 228e63f 7858726 228e63f 7858726 228e63f 37b358c |
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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мониторинг растения</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
color: #2e7d32;
}
#plantImage {
max-width: 100%;
height: auto;
border: 2px solid #ddd;
border-radius: 8px;
margin-bottom: 20px;
}
.stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.stat-item {
padding: 10px 15px;
border-radius: 5px;
font-weight: bold;
min-width: 120px;
}
.green {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #a5d6a7;
}
.yellow {
background-color: #fffde7;
color: #f9a825;
border: 1px solid #fff59d;
}
.orange {
background-color: #fff3e0;
color: #ef6c00;
border: 1px solid #ffcc80;
}
.brown {
background-color: #efebe9;
color: #6d4c41;
border: 1px solid #d7ccc8;
}
.color-value {
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Анализ состояния растения</h1>
<img id="plantImage" src="/last_image" alt="Текущее состояние растения">
<div class="stats">
<div class="stat-item green">
Зелёный: <span class="color-value" id="green">0</span>%
</div>
<div class="stat-item yellow">
Жёлтый: <span class="color-value" id="yellow">0</span>%
</div>
<div class="stat-item orange">
Оранжевый: <span class="color-value" id="orange">0</span>%
</div>
<div class="stat-item brown">
Коричневый: <span class="color-value" id="brown">0</span>%
</div>
</div>
<script>
function updateImageAndStats() {
// Добавляем timestamp для предотвращения кеширования
const timestamp = new Date().getTime();
const imgElement = document.getElementById("plantImage");
imgElement.src = "/last_image?t=" + timestamp;
// Показываем загрузку
imgElement.style.opacity = "0.7";
// Загружаем статистику цветов
fetch("/color_stats?t=" + timestamp)
.then(response => response.json())
.then(data => {
document.getElementById("green").textContent = data.green || 0;
document.getElementById("yellow").textContent = data.yellow || 0;
document.getElementById("orange").textContent = data.orange || 0;
document.getElementById("brown").textContent = data.brown || 0;
// Возвращаем нормальную прозрачность после загрузки
imgElement.style.opacity = "1";
})
.catch(error => {
console.error("Ошибка при загрузке данных:", error);
});
}
// Первичная загрузка при открытии страницы
document.addEventListener('DOMContentLoaded', updateImageAndStats);
// Автоматическое обновление каждые 10 секунд
setInterval(updateImageAndStats, 10000);
// Кнопка для ручного обновления (по желанию)
document.body.innerHTML += '<button onclick="updateImageAndStats()" style="margin-top:20px;padding:10px 15px;background:#2196f3;color:white;border:none;border-radius:5px;cursor:pointer;">Обновить данные</button>';
</script>
</body>
</html>
|