<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smart Coffee - dry</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--
<script src="../static/js/sign_in.js"></script>
<link rel="stylesheet" href="../static/css/sign_in.css">
-->
<style>
.D1_position {
position: absolute;
top: 135px;
left: 210px;
width: 175px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.D2_position {
position: absolute;
top: 135px;
left: 400px;
width: 175px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.D3_position {
position: absolute;
top: 135px;
left: 590px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.D4_position {
position: absolute;
top: 135px;
left: 785px;
width: 165px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.D5_position {
position: absolute;
top: 135px;
left: 965px;
width: 165px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.D6_position {
position: absolute;
top: 135px;
left: 1155px;
width: 165px;
height: 230px;
border-style: solid;
border-color: aqua;
}
</style>
<script language="JavaScript">
// 指定 10秒 刷新網頁一次
var WebRestart
// WebRestart = setTimeout(function () { location.reload() }, 10000);
</script>
<script>
$('#D2').click(
function () {
$.get('/loading',
'',
function (res) {
$("#SHT11_Temp_status").text(res.SHT11_Temp);
},
'json'
);
}
);
function Peeling() {
$.get('/loading', '', function (res) {
//console.log(res.peeling);
$("#SHT11_Temp_status").text(res.SHT11_Temp);
}, 'json');
};
</script>
</head>
<body>
<!--
background-color:rgb(0, 238, 255);
-->
<div style="text-align: center; margin-top: 30px;font-size: 24px;">
Smart Coffee
</div>
<div>
<!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
<center><img src="../static/img/web_dry_container.png" width="1500x" style="margin: auto;"></center>
<!-- 乾燥槽 D1 START-->
<div id="D1" tabindex="0" class="D1_position" role="button">
D1
status
<!-- D1 狀態點點-->
<div id="D1_status"
style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 乾燥槽 D1 END-->
<!-- 乾燥槽 D2 -->
<div id="D2" tabindex="0" class="D2_position" role="button">
D2
status
<div id="D2_status"
style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 乾燥槽 D3 -->
<div id="D3" tabindex="0" class="D3_position" role="button">
D3
status
<div id="D3_status"
style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 乾燥槽 D4 -->
<div id="D4" tabindex="0" class="D4_position" role="button">
D4
status
<div id="D4_status"
style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 乾燥槽 D5 -->
<div id="D5" tabindex="0" class="D5_position" role="button">
D5
status
<div id="D5_status"
style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 乾燥槽 D6 -->
<div id="D6" tabindex="0" class="D6_position" role="button">
D6
status
<div id="D6_status"
style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="D1_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a href="/dry_container/1">制動器狀態</a></strong></td>
<td><strong><a href="/dry_container/1">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;">
</div>
</td>
<td>
真空吸料機
<span id="tank_vacuum_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_3wayvalve=='ON' %}
<div id="D1_threewwayvalve_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_3wayvalve=='OFF' %}
<div id="D1_threewwayvalve_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_threewwayvalve_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
三通閥
<span id="tank_3wayvalve_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_solenoid_disinfect=='ON' %}
<div id="D1_solenoid_disinfect_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_solenoid_disinfect=='OFF' %}
<div id="D1_solenoid_disinfect_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_solenoid_disinfect_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
消毒電磁閥
<span id="tank_solenoid_disinfect_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if (tank_motor>0) or (0>tank_motor) %}
<div id="D1_motor_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_motor==0 %}
<div id="D1_motor_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_motor_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
馬達
<span id="tank_motor_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_blower=='ON' %}
<div id="D1_blower_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_blower=='OFF' %}
<div id="D1_blower_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_blower_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
鼓風機
<span id="tank_blower_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_heater1=='ON' %}
<div id="D1_heater1_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_heater1=='OFF' %}
<div id="D1_heater1_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_heater1_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
加熱器 1
<span id="tank_heater1_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_heater2=='ON' %}
<div id="D1_heater2_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_heater2=='OFF' %}
<div id="D1_heater2_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_heater2_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
加熱器 2
<span id="tank_heater2_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_temp1_enable=='ON' %}
<div id="D1_temp_enable_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_temp1_enable=='OFF' %}
<div id="D1_temp_enable_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_temp_enable_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
溫控開關
<span id="tank_temp1_enable_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_temp1==0 %}
<div id="D1_temp_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% elif tank_temp1>0 %}
<div id="D1_temp_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% else %}
<div id="D1_temp_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
溫度設定
<span id="tank_temp1_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_solenoid_water=='ON' %}
<div id="D1_solenoid_water_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_solenoid_water=='OFF' %}
<div id="D1_solenoid_water_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_solenoid_water_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
排水電磁閥
<span id="tank_solenoid_water_t_status"></span>
</td>
</tr>
<tr>
<td>
{% if tank_diskvalve=='ON' %}
<div id="D1_diskvalve_status"
style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
</div>
{% elif tank_diskvalve=='OFF' %}
<div id="D1_diskvalve_status"
style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
</div>
{% else %}
<div id="D1_diskvalve_status"
style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
</div>
{% endif %}
</td>
<td>
蝴蝶閥
<span id="tank_diskvalve_t_status"></span>
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<!--font-size:12px; -->
<tr>
<td>
咖啡生豆高度
</td>
<td>
{{tank_UltraSonic.UltraSonic}}
<span id="UltraSonic_status"></span>
</td>
</tr>
<tr>
<td>
<a href="/chart/SHT11_Temp">乾燥槽溫度</a>
</td>
<td>
{{tank_SHT11.SHT11_Temp}}
<span id="SHT11_Temp_status"></span>
</td>
</tr>
<tr>
<td>
乾燥槽濕度
</td>
<td>
{{tank_SHT11.SHT11_Humidity}}
<span id="SHT11_Humidity_status"></span>
</td>
</tr>
<tr>
<td>
咖啡生豆溫度
</td>
<td>
{{tank_Soil.soil_Temp}}
<span id="soil_Temp_status"></span>
</td>
</tr>
<tr>
<td>
咖啡生豆濕度
</td>
<td>
{{tank_Soil.soil_Humidity}}
<span id="soil_Humidity_status"></span>
</td>
</tr>
<tr>
<td>
咖啡生豆 EC
</td>
<td>
{{tank_Soil.soil_EC}}
<span id="soil_EC_status"></span>
</td>
</tr>
<tr>
<td>
桶內壓力
</td>
<td>
{{tank_PA.PA}}
<span id="PA_status"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
var button_D1 = document.getElementById('D1');
button_D1.addEventListener('click', function () {
$('#D1_Modal').modal('show');
});
function update_data(dtn) {
console.log('dry_tank_num:' + dtn)
// dtn = dry_tank_num
$.get('/loading/' + dtn, '', function (res) {
if (res.tank_vacuum == 0){$("#tank_vacuum_status").css("background-color", "#C0C0C0")
}else if(res.tank_vacuum == 1){$("#tank_vacuum_status").css("background-color", "forestgreen")
}else{$("#tank_vacuum_status").css("background-color", "crimson")}
if (res.tank_3wayvalve == 0){$("#tank_3wayvalve_status").css("background-color", "#C0C0C0")
}else if(res.tank_3wayvalve == 1){$("#tank_3wayvalve_status").css("background-color", "forestgreen")
}else{$("#tank_3wayvalve_status").css("background-color", "crimson")}
if (res.tank_vacuum == 0){$("#tank_vacuum_status").css("background-color", "#C0C0C0")
}else if(res.tank_vacuum == 1){$("#tank_vacuum_status").css("background-color", "forestgreen")
}else{$("#tank_vacuum_status").css("background-color", "crimson")}
$("#tank_vacuum_t_status").text(res.tank_vacuum);
$("#tank_3wayvalve_t_status").text(res.tank_3wayvalve);
$("#tank_diskvalve_t_status").text(res.tank_diskvalve);
$("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
$("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
$("#tank_motor_t_status").text(res.tank_motor);
$("#tank_blower_t_status").text(res.tank_blower);
$("#tank_heater1_t_status").text(res.tank_heater1);
$("#tank_heater2_t_status").text(res.tank_heater2);
$("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
$("#tank_temp1_t_status").text(res.tank_temp1);
$("#UltraSonic_t_status").text(res.UltraSonic);
$("#SHT11_Temp_t_status").text(res.SHT11_Temp);
$("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
$("#soil_Temp_t_status").text(res.soil_Temp);
$("#soil_Humidity_t_status").text(res.soil_Humidity);
$("#soil_EC_t_status").text(res.soil_EC);
$("#PA_t_status").text(res.PA);
}, 'json');
$('#Modal_title').text("乾燥槽 " + dtn + " 狀態")
$('#D1_Modal').modal('show');
}
var button_D2 = document.getElementById('D2');
button_D2.addEventListener('click', function(){update_data("D2")});
var button_D3 = document.getElementById('D3');
button_D3.addEventListener('click', function(){update_data("D3")});
/*
$('#D2').click(
function(){
$.get('/loading',
'',
function(res) {
$("#SHT11_Temp_status").text(res.SHT11_Temp);
},
'json'
);
}
);
*/
</script>
</body>
</html>