<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smart Coffee - clean</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>
.C1_position {
position: absolute;
top: 135px;
left: 210px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.C2_position {
position: absolute;
top: 400px;
left: 210px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.S1_position {
position: absolute;
top: 135px;
left: 550px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.S2_position {
position: absolute;
top: 400px;
left: 550px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.P1_position {
position: absolute;
top: 135px;
left: 890px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.P2_position {
position: absolute;
top: 400px;
left: 890px;
width: 170px;
height: 230px;
border-style: solid;
border-color: aqua;
}
</style>
<script language="JavaScript">
// 指定 10秒 刷新網頁一次
var WebRestart
// WebRestart = setTimeout(function () { location.reload() }, 10000);
</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_CleanColorPeel_container.png" width="1500x" style="margin: auto;"></center>
<!-- 清洗浮選槽 C1 -->
<div id="C1" tabindex="0" class="C1_position" role="button">
C1 status
<!-- C1 狀態點點-->
<div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 清洗浮選槽 C2 -->
<div id="C2" tabindex="0" class="C2_position" role="button">
C2 status
<div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 色選機 S1 -->
<div id="S1" tabindex="0" class="S1_position" role="button">
S1 status
<div id="S1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 色選機 S2 -->
<div id="S2" tabindex="0" class="S2_position" role="button">
S2 status
<div id="S2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 脫皮機 P1 -->
<div id="P1" tabindex="0" class="P1_position" role="button">
P1 status
<div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 脫皮機 P2 -->
<div id="P2" tabindex="0" class="P2_position" role="button">
P2 status
<div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="C1_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">清洗浮選槽 C1 狀態</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="/clean_container/1">制動器狀態</a></strong></td>
<td><strong><a href="/clean_container/1">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_vacuum=='ON' %}
<div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% elif tank_vacuum=='OFF' %}
<div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% else %}
<div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
真空吸料機
</td>
</tr>
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_pump_waterFloat=='ON' %}
<div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% elif tank_pump_waterFloat=='OFF' %}
<div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% else %}
<div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
浮選槽注水雙核隔膜泵
</td>
</tr>
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_pump_waterL2=='ON' %}
<div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% elif tank_pump_waterL2=='OFF' %}
<div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% else %}
<div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
第 2 層灑水雙核隔膜泵
</td>
</tr>
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_pump_waterL4=='ON' %}
<div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% elif tank_pump_waterL4=='OFF' %}
<div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% else %}
<div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
第 4 層灑水雙核隔膜泵
</td>
</tr>
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_solenoid_waterL3=='ON' %}
<div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% elif tank_vacuum=='OFF' %}
<div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% else %}
<div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
清洗第 3 層電磁閥
</td>
</tr>
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_solenoid_waterL5=='ON' %}
<div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% elif tank_solenoid_waterL5=='OFF' %}
<div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% else %}
<div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
清洗第 5 層電磁閥
</td>
</tr>
<tr>
<td>
<div id="tank_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
{% if tank_stepping_motor==0 %}
<div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>
{% elif (tank_stepping_motor>0) or (0>tank_stepping_motor) %}
<div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>
{% else %}
<div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>
{% endif %}
</td>
<td>
***步進馬達***
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
咖啡生豆高度
</td>
<td>
{{tank_UltraSonic.UltraSonic}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
function update_data_C(ctid) {
console.log('cleaning_tank_id:' + ctid)
$.get('/loading/C' + ctid, '', function (res) {
}, 'json');
$('#C1_Modal').modal('show');
}
function update_data_S(stid) {
console.log('ColorSelection_tank_id:' + stid)
$.get('/loading/S' + stid, '', function (res) {
}, 'json');
$('#S1_Modal').modal('show');
}
function update_data_P(ptid) {
console.log('peeling_tank_id:' + ptid)
$.get('/loading/P' + ptid, '', function (res) {
}, 'json');
$('#P1_Modal').modal('show');
}
var button_C1 = document.getElementById('C1');
button_C1.addEventListener('click', function () { update_data_C("1") });
var button_C2 = document.getElementById('C2');
button_C2.addEventListener('click', function () { update_data_C("2") });
var button_S1 = document.getElementById('S1');
button_S1.addEventListener('click', function () { update_data_S("1") });
var button_S2 = document.getElementById('S2');
button_S2.addEventListener('click', function () { update_data_S("2") });
var button_P1 = document.getElementById('P1');
button_P1.addEventListener('click', function () { update_data_P("1") });
var button_P2 = document.getElementById('P2');
button_P2.addEventListener('click', function () { update_data_P("2") });
</script>
</body>
</html>