<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</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>
<!--可用來建立使用者小圖示-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.span-sensor-value {
font-weight:600;
padding-left: 3px;
}
.demo_status_css {
font-weight: bold;
text-align: center;
}
.input-text {
height: 25px;
width: 35px;
text-align: center;
margin-left: 2px;
margin-right: 5px;
}
</style>
<script>
$(document).ready(function(){
$("#coffee_title_pc").text('DEMO 貨櫃');
$("#coffee_title_phone").text('DEMO 貨櫃');
// $(document).attr("title", '{{title}}');
loading_status();
loading_sensors();
});
clean_input_status = ['{{CI1}}', '{{CI2}}']
// console.log('clean_input_status: ' + clean_input_status)
clean_tank_status = ['{{C1}}', '{{C2}}']
// console.log('clean_tank_status: ' + clean_tank_status)
colorselect_tank_status = ['{{S1}}', '{{S2}}']
// console.log('colorselect_tank_status: ' + colorselect_tank_status)
colorselect_outputg_status = ['{{SOg1}}', '{{SOg2}}']
// console.log('colorselect_outputg_status: ' + colorselect_outputg_status)
colorselect_outputb_status = ['{{SOb1}}', '{{SOb2}}']
// console.log('colorselect_outputb_status: ' + colorselect_outputb_status)
peel_tank_status = ['{{P1}}', '{{P2}}']
// console.log('peel_tank_status: ' + peel_tank_status)
peel_output_status = ['{{PO1}}', '{{PO2}}']
// console.log('peel_output_status: ' + peel_output_status)
ferment_tank_status = ['{{F1}}', '{{F2}}']
dry_tank_status = ['{{D1}}', '{{D2}}']
dry_output_status = ['{{DO1}}', '{{DO2}}']
peel_outputb_status = ['{{POb1}}']
// console.log('peel_outputb_status: ' + peel_outputb_status)
// 更新桶槽狀態
function loading_status(){
for (let i=0; i<clean_input_status.length; i++) {
if (clean_input_status[i] == 'CI_InputtingBean') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
} else if (clean_input_status[i] == 'CI_Waiting') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
} else if (clean_input_status[i] == 'CI_OutputtingBean') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
} else if (clean_input_status[i] == 'CI_Warning') {
$("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 發生錯誤")
$("#CI"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('CI pass')
}
}
for (let i=0; i<clean_tank_status.length; i++) {
if (clean_tank_status[i] == 'C_InputtingBean') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
} else if (clean_tank_status[i] == 'C_Waiting') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
} else if (clean_tank_status[i] == 'C_OutputtingBean') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
} else if (clean_tank_status[i] == 'C_Warning') {
$("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 發生錯誤")
$("#C"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('C pass')
}
}
for (let i=0; i<colorselect_tank_status.length; i++) {
if (colorselect_tank_status[i] == 'S_InputtingBean') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
} else if (colorselect_tank_status[i] == 'S_Waiting') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
} else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
} else if (colorselect_tank_status[i] == 'S_Warning') {
$("#S"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 發生錯誤")
$("#S"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('S pass')
}
}
for (let i=0; i<colorselect_outputg_status.length; i++) {
if (colorselect_outputg_status[i] == 'SO_InputtingBean') {
$("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 入豆中")
} else if (colorselect_outputg_status[i] == 'SO_Waiting') {
$("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 空桶等待")
} else if (colorselect_outputg_status[i] == 'SO_OutputtingBean') {
$("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 可出豆")
} else if (colorselect_outputg_status[i] == 'SO_Warning') {
$("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 發生錯誤")
$("#SOg"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('SOg pass')
}
}
for (let i=0; i<colorselect_outputb_status.length; i++) {
if (colorselect_outputb_status[i] == 'SO_InputtingBean') {
$("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 入豆中")
} else if (colorselect_outputb_status[i] == 'SO_Waiting') {
$("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 空桶等待")
} else if (colorselect_outputb_status[i] == 'SO_OutputtingBean') {
$("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 可出豆")
} else if (colorselect_outputb_status[i] == 'SO_Warning') {
$("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 發生錯誤")
$("#SOb"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('SOb pass')
}
}
for (let i=0; i<peel_tank_status.length; i++) {
if (peel_tank_status[i] == 'P_Waiting') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 等待中")
} else if (peel_tank_status[i] == 'P_Peeling') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 脫皮中")
// } else if (peel_tank_status[i] == 'P_InputtingBean') {
// $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
// $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
// } else if (peel_tank_status[i] == 'P_OutputtingBean') {
// $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
// $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
} else if (peel_tank_status[i] == 'P_Warning') {
$("#P"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 發生錯誤")
$("#P"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('P pass')
}
}
for (let i=0; i<peel_output_status.length; i++) {
if (peel_output_status[i] == 'PO_InputtingBean') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
} else if (peel_output_status[i] == 'PO_Waiting') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
} else if (peel_output_status[i] == 'PO_OutputtingBean') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
} else if (peel_output_status[i] == 'PO_Warning') {
$("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 發生錯誤")
$("#PO"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('PO pass')
}
}
for (let i=0; i<ferment_tank_status.length; i++) {
if (ferment_tank_status[i] == 'F_InputtingBean') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆中")
} else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆暫停")
} else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入豆完成")
} else if (ferment_tank_status[i] == 'F_InputtingWater') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 入水中")
} else if (ferment_tank_status[i] == 'F_Waiting') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 空桶等待")
} else if (ferment_tank_status[i] == 'F_Cleaning') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 清洗中")
} else if (ferment_tank_status[i] == 'F_Fermenting') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發酵中")
} else if (ferment_tank_status[i] == 'F_OutputtingBean') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 可出豆")
} else if (ferment_tank_status[i] == 'F_Warning') {
$("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + " 發生錯誤")
$("#F"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('F pass')
}
}
for (let i=0; i<dry_tank_status.length; i++) {
if (dry_tank_status[i] == 'D_InputtingBean') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆中")
} else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆暫停")
} else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 入豆完成")
} else if (dry_tank_status[i] == 'D_Waiting') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 空桶等待")
} else if (dry_tank_status[i] == 'D_Cleaning') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 清洗中")
} else if (dry_tank_status[i] == 'D_Drying') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 乾燥中")
} else if (dry_tank_status[i] == 'D_OutputtingBean') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 可出豆")
} else if (dry_tank_status[i] == 'D_Warning') {
$("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
$("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 發生錯誤")
$("#D"+parseInt(i+1)+"_status").css("color", "crimson")
} else {
console.log('pass')
}
}
for (let i=0; i<dry_output_status.length; i++) {
if (dry_output_status[i] == 'DO_InputtingBean') {
$("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
} else if (dry_output_status[i] == 'DO_Waiting') {
$("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
} else if (dry_output_status[i] == 'DO_OutputtingBean') {
$("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
} else {
console.log('DO pass')
}
}
for (let i=0; i<peel_outputb_status.length; i++) {
if (peel_outputb_status[i] == 'PO_InputtingBean') {
$("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 入豆中")
} else if (peel_outputb_status[i] == 'PO_Waiting') {
$("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
$("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 空桶等待")
} else if (peel_outputb_status[i] == 'PO_OutputtingBean') {
$("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
$("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 可出豆")
} else {
console.log('POb pass')
}
}
//
};
// 更新 UltraSonic 數值
function loading_sensors(){
$.get('/loading_sensors', '', function (res){
$("#C1_UltraSonic").text(res.C1_UltraSonic);
$("#C2_UltraSonic").text(res.C2_UltraSonic);
$("#PO1_UltraSonic").text(res.PO1_UltraSonic);
$("#PO2_UltraSonic").text(res.PO2_UltraSonic);
$("#F1_UltraSonic").text(res.F1_UltraSonic);
$("#F1_SHT11Temp").text(res.F1_SHT11Temp);
$("#F1_SHT11Humidity").text(res.F1_SHT11Humidity);
$("#F2_UltraSonic").text(res.F2_UltraSonic);
$("#D1_UltraSonic").text(res.D1_UltraSonic);
$("#D1_SHT11Temp").text(res.D1_SHT11Temp);
$("#D1_SHT11Humidity").text(res.D1_SHT11Humidity);
$("#D2_UltraSonic").text(res.D2_UltraSonic);
$("#DO1_UltraSonic").text(res.DO1_UltraSonic);
$("#DO2_UltraSonic").text(res.DO2_UltraSonic);
}, 'json');
}
var data; // 狀態判斷傳參數用
var peel_status_process = 0;
var peel_status_interval; // 脫皮機自動化, 間隔 5 秒執行
var ferment_status_process = 0;
var ferment_status_interval; // 發酵槽自動化, 間隔 5 秒執行
var dry_status_process = 0;
var dry_status_interval; // 乾燥槽自動化, 間隔 5 秒執行
</script>
</head>
<body>
<div id="wrapper">
<div id="coffee_header">
<!-- 匯入共同使用的 header.html 內容 -->
{% include 'header.html' %}
</div>
<div>
<!-- DEMO 貨櫃 狀態表格 -->
<table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
<tr>
<td>
<!-- 清洗浮選槽入料 CI1 -->
<div id="CI1" tabindex="0" class="CI1_position" role="button" style="text-align: center;">
<span id="CI1_status" class="demo_status_css">CI1 status</span>
<div id="CI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 清洗浮選槽 C1 -->
<div id="C1" tabindex="0" class="C1_position" role="button" style="text-align: center;">
<span id="C1_status" class="demo_status_css">C1 status</span>
<div id="C1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
中水桶
</td>
<td>
<!-- 色選機 S1 -->
<div id="S1" tabindex="0" class="S1_position" role="button" style="text-align: center;">
<span id="S1_status" class="demo_status_css">S1 status</span>
<div id="S1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 色選機好果 SOg1 -->
<div id="SOg1" tabindex="0" class="SOg1_position" role="button" style="text-align: center;">
<span id="SOg1_status" class="demo_status_css">SOg1 status</span>
<div id="SOg1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 色選機好果 SOb1 -->
<div id="SOb1" tabindex="0" class="SOb1_position" role="button" style="text-align: center;">
<span id="SOb1_status" class="demo_status_css">SOb1 status</span>
<div id="SOb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 脫皮機 P1 -->
<div id="P1" tabindex="0" class="P1_position" role="button" style="text-align: center;">
<span id="P1_status" class="demo_status_css">P1 status</span>
<div id="P1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 脫皮機出料儲豆槽 PO1 -->
<div id="PO1" tabindex="0" class="PO1_position" role="button" style="text-align: center;">
<span id="PO1_status" class="demo_status_css">PO1 status</span>
<div id="PO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 發酵槽 F1 -->
<div id="F1" tabindex="0" class="F1_position" role="button" style="vertical-align: bottom;">
<span id="F1_status" class="demo_status_css">F1 status</span>
<div id="F1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 乾燥槽 D1 -->
<div id="D1" tabindex="0" class="D1_position" role="button" style="vertical-align: bottom;">
<span id="D1_status" class="demo_status_css">D1 status</span>
<div id="D1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 乾燥槽 DO1 -->
<div id="DO1" tabindex="0" class="DO1_position" role="button" style="vertical-align: bottom;">
<span id="DO1_status" class="demo_status_css">DO1 status</span>
<div id="DO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
清洗<br>
入料儲豆槽
</td>
<td>
清洗浮選槽
</td>
<td>
中水桶
</td>
<td>
色選機
</td>
<td>
色選機出料<br>好果
</td>
<td>
色選機出料<br>壞果
</td>
<td>
脫皮機
</td>
<td>
脫皮機<br>出料儲豆槽
</td>
<td>
發酵槽
</td>
<td>
乾燥槽
</td>
<td>
乾燥<br>
出料除豆槽
</td>
<td>
壞豆
</td>
</tr>
<tr>
<td>
<!-- 清洗浮選槽入料 CI2 -->
<div id="CI2" tabindex="0" class="CI2_position" role="button" style="text-align: center;">
<span id="CI2_status" class="demo_status_css">CI2 status</span>
<div id="CI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 清洗浮選槽 C2 -->
<div id="C2" tabindex="0" class="C2_position" role="button" style="text-align: center;">
<span id="C2_status" class="demo_status_css">C2 status</span>
<div id="C2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
中水桶
</td>
<td>
<!-- 色選機 S2 -->
<div id="S2" tabindex="0" class="S2_position" role="button" style="text-align: center;">
<span id="S2_status" class="demo_status_css">S2 status</span>
<div id="S2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 色選機好果 SOg2 -->
<div id="SOg2" tabindex="0" class="SOg2_position" role="button" style="text-align: center;">
<span id="SOg2_status" class="demo_status_css">SOg2 status</span>
<div id="SOg2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 色選機好果 SOb2 -->
<div id="SOb2" tabindex="0" class="SOb2_position" role="button" style="text-align: center;">
<span id="SOb2_status" class="demo_status_css">SOb2 status</span>
<div id="SOb2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 脫皮機 P2 -->
<div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">
<span id="P2_status" class="demo_status_css">P2 status</span>
<div id="P2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 脫皮機出料儲豆槽 PO2 -->
<div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">
<span id="PO2_status" class="demo_status_css">PO2 status</span>
<div id="PO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 發酵槽 F2 -->
<div id="F2" tabindex="0" class="F2_position" role="button" style="vertical-align: bottom;">
<span id="F2_status" class="demo_status_css">F2 status</span>
<div id="F2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 乾燥槽 D2 -->
<div id="D2" tabindex="0" class="D2_position" role="button" style="vertical-align: bottom;">
<span id="D2_status" class="demo_status_css">D2 status</span>
<div id="D2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 乾燥槽 DO2 -->
<div id="DO2" tabindex="0" class="DO2_position" role="button" style="vertical-align: bottom;">
<span id="DO2_status" class="demo_status_css">DO2 status</span>
<div id="DO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
<td>
<!-- 壞豆槽 POb1 -->
<div id="POb1" tabindex="0" class="POb1_position" role="button" style="vertical-align: bottom;">
<span id="POb1_status" class="demo_status_css">POb1 status</span>
<div id="POb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
</div>
</td>
</tr>
</table>
<!-- DEMO 貨櫃 參數設定 -->
<table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
<tr>
<td>
清洗入料
</td>
<td>
清洗浮選
</td>
<td>
中水桶
</td>
<td>
色選機
</td>
<td>
出料好果
</td>
<td>
出料壞果
</td>
<td>
脫皮機
</td>
<td>
脫皮機出料
</td>
<td>
發酵槽
</td>
<td>
乾燥槽
</td>
<td>
乾燥出料
</td>
</tr>
<tr style="vertical-align: top;">
<td colspan="3">
CI1_UltraSonic: <span id="CI1_UltraSonic" class="span-sensor-value">null</span><br>
C1_UltraSonic: <span id="C1_UltraSonic" class="span-sensor-value">null</span><br>
----- 清洗入料 -----<br>
生豆高度
<input id="DEMO_CI_Bean_height" type="text" class="input-text" value="10">cm<br>
吸料時間
<input id="DEMO_CI_vacuumON_time" type="text" class="input-text" value="5">秒<br>
放料時間
<input id="DEMO_CI_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
----- 清洗浮選 -----<br>
生豆高度
<input id="DEMO_C_Bean_height" type="text" class="input-text" value="10">cm<br>
吸料時間
<input id="DEMO_C_vacuumON_time" type="text" class="input-text" value="5">秒<br>
放料時間
<input id="DEMO_C_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
水位高度
<input id="DEMO_W_Bean_height" type="text" class="input-text" value="10">cm<br>
------ 中水桶 ------<br>
水位高度
<input id="DEMO_WaterTank_Water_height" type="text" class="input-text" value="50">cm<br>
</td>
<td colspan="3">
S1_UltraSonic: <span id="S1_UltraSonic" class="span-sensor-value">null</span><br>
------ 色選機 ------<br>
生豆高度
<input id="DEMO_S_Bean_height" type="text" class="input-text" value="10">cm<br>
吸料時間
<input id="DEMO_S_vacuumON_time" type="text" class="input-text" value="5">秒<br>
放料時間
<input id="DEMO_S_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
----- 出料好果 -----<br>
生豆高度
<input id="DEMO_SOg_Bean_height" type="text" class="input-text" value="10">cm<br>
----- 出料壞果 -----<br>
生豆高度
<input id="DEMO_SOb_Bean_height" type="text" class="input-text" value="10">cm<br>
</td>
<td colspan="2">
PO1_UltraSonic: <span id="PO1_UltraSonic" class="span-sensor-value">null</span><br>
------ 脫皮機 ------<br>
馬達轉速
<input name="Peel_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
吸料時間
<input name="Peel_Tank_vacuumON_time" type="text" class="input-text" value="3">秒<br>
放料時間
<input name="Peel_Tank_vacuumOFF_time" type="text" class="input-text" value="30">秒<br>
--- 脫皮機出料 ---<br>
生豆高度
<input name="Peel_Tank_bean_height" type="text" class="input-text" value="10">cm<br>
</td>
<td>
F1_UltraSonic: <span id="F1_UltraSonic" class="span-sensor-value">null</span><br>
F1_SHT11Temp: <span id="F1_SHT11Temp" class="span-sensor-value">null</span><br>
F1_SHT11Humidity: <span id="F1_SHT11Humidity" class="span-sensor-value">null</span><br>
------ 發酵槽 ------<br>
生豆高度
<input name="Ferment_Tank_bean_height" class="input-text" type="text" value="10">cm<br>
吸料時間
<input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>
放料時間
<input name="Ferment_Tank_vacuumOFF_time" class="input-text" type="text" value="10">秒<br>
<br>
水位高度
<input name="Ferment_Tank_water_height" class="input-text" type="text" value="15">cm<br>
馬達轉速
<input name="Ferment_Tank_motor_rpm" class="input-text" type="text" value="15">rpm<br>
<br>
發酵溫度
<input name="Ferment_Tank_fermenting_temp" class="input-text" type="text" value="10">℃<br>
發酵等待
<input name="Ferment_Tank_fermenting_time" class="input-text" type="text" value="5">秒<br>
廢水排放
<input name="Ferment_Tank_WaterOut_time" class="input-text" type="text" value="5">秒
</td>
<td>
D1_UltraSonic: <span id="D1_UltraSonic" class="span-sensor-value">null</span><br>
D1_SHT11Temp: <span id="D1_SHT11Temp" class="span-sensor-value">null</span><br>
D1_SHT11Humidity: <span id="D1_SHT11Humidity" class="span-sensor-value">null</span><br>
------ 乾燥槽 ------<br>
<!-- 乾燥槽 -->
生豆高度
<input name="Dry_Tank_bean_height" type="text" class="input-text" value="10">cm<br>
吸料時間
<input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="5">秒<br>
放料時間
<input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
馬達轉速
<input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="0">rpm<br>
<br>
指定溫度
<input name="Dry_Tank_drying_temp" type="text" class="input-text" value="38">℃<br>
指定濕度
<input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="11">%<br>
返潮時間
<input name="Dry_Tank_drying_time" type="text" class="input-text" value="5">秒<br>
</td>
<td>
DO1_UltraSonic: <span id="DO1_UltraSonic" class="span-sensor-value">null</span><br>
----- 乾燥出料 -----<br>
<!-- 乾燥出料 -->
生豆高度
<input name="Dry_Output_bean_height" type="text" class="input-text" value="10">cm<br>
吸料時間
<input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>
放料時間
<input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="stop_Drying_OutputtingBean()">
暫停乾燥<br><u>開啟 D1 蝴蝶閥</u></button>
<br>
<br>
<div style="font-size: 12px; color: crimson; line-height: 15px;">測試水份後<br>將桶槽改為入料中<br>D1_UltraSonic 改為 0</div>
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('1')">
D1 蝴蝶閥 ON</u></button><br>
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('0')">
D1 蝴蝶閥 OFF</u></button>
<script>
function DtankDiskValve(params) {
if (params == '1') {
data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "on" };
} else if (params == '0') {
data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "off" };
} else {
data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": params };
}
$.post('/mqtt/1', data, function (res) {
console.log('data: ', data)
console.log('res: ', res)
}, 'text')
}
// var outputtingBean_interval
// function stop_Drying_OutputtingBean_IN(){
// console.log("---- 測試後入料 ----")
// }
function stop_Drying_OutputtingBean(){
clearInterval(dry_status_interval)
console.log("------- 狀態自動化判斷 停止 -------")
console.log("---- 出料至儲豆槽 ----")
var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
data = {"command": "stop_Drying_OutputtingBean",
"Dry_Output_bean_height": Dry_Output_bean_height,
"Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
"Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time
};
// 更新桶槽狀態
$.get('/dryDEMO_outputtingBean', data, function (res){
D1 = res.Dry_Tank_1
D2 = res.Dry_Tank_2
DO1 = res.Dry_Output_1
DO2 = res.Dry_Output_2
dry_tank_status = [D1, D2]
dry_output_status = [DO1, DO2]
loading_status();
loading_sensors();
}, 'json');
}
</script>
</td>
</tr>
<tr>
<td colspan="3">
清洗自動化
</td>
<td colspan="3">
色選自動化
</td>
<td colspan="2">
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_testing()">
脫皮自動化</button>
<br>
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_stop()">
<u>脫皮停止</u></button>
<script>
function peel_auto_status_stop(){
clearInterval(peel_status_interval)
console.log("------- 脫皮自動化判斷 停止 -------")
}
function peel_auto_status_testing(){
console.log("------- 脫皮自動化判斷 開始 -------")
var Peel_Tank_bean_height = $('input[name=Peel_Tank_bean_height]').val();
var Peel_Tank_motor_rpm = $('input[name=Peel_Tank_motor_rpm]').val();
var Peel_Tank_vacuumON_time = $('input[name=Peel_Tank_vacuumON_time]').val();
var Peel_Tank_vacuumOFF_time = $('input[name=Peel_Tank_vacuumOFF_time]').val();
data = {"Peel_Tank_bean_height":Peel_Tank_bean_height,
"Peel_Tank_motor_rpm":Peel_Tank_motor_rpm,
"Peel_Tank_vacuumON_time":Peel_Tank_vacuumON_time,
"Peel_Tank_vacuumOFF_time":Peel_Tank_vacuumOFF_time
}
// 更新桶槽狀態
peel_status_interval = setInterval(peel_auto_status, 5*1000);
// peel_auto_status()
function peel_auto_status(){
if (peel_status_process == 1) { return }
peel_status_process = 1;
$.get('/peel_auto_status', data, function (res){
P1 = res.Peel_Tank_1
P2 = res.Peel_Tank_2
PO1 = res.Peel_Output_1
PO2 = res.Peel_Output_2
peel_tank_status = [P1, P2]
peel_output_status = [PO1, PO2]
loading_status();
loading_sensors();
peel_status_process = 0;
}, 'json');
}
}
</script>
</td>
<td>
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_testing()">
發酵自動化</button>
<br>
<button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_stop()">
<u>發酵停止</u></button>
<script>
function ferment_auto_status_stop(){
clearInterval(ferment_status_interval)
console.log("------- 發酵自動化判斷 停止 -------")
}
function ferment_auto_status_testing(){
console.log("------- 發酵自動化判斷 開始 -------")
var Ferment_Tank_bean_height = $("input[name=Ferment_Tank_bean_height]").val();
var Ferment_Tank_vacuumON_time = $("input[name=Ferment_Tank_vacuumON_time]").val();
var Ferment_Tank_vacuumOFF_time = $("input[name=Ferment_Tank_vacuumOFF_time]").val();
var Ferment_Tank_water_height = $("input[name=Ferment_Tank_water_height]").val();
var Ferment_Tank_motor_rpm = $("input[name=Ferment_Tank_motor_rpm]").val();
var Ferment_Tank_fermenting_temp = $("input[name=Ferment_Tank_fermenting_temp]").val();
var Ferment_Tank_fermenting_time = $("input[name=Ferment_Tank_fermenting_time]").val();
var Ferment_Tank_WaterOut_time = $("input[name=Ferment_Tank_WaterOut_time]").val();
data = {"Ferment_Tank_bean_height":Ferment_Tank_bean_height,
"Ferment_Tank_vacuumON_time":Ferment_Tank_vacuumON_time,
"Ferment_Tank_vacuumOFF_time":Ferment_Tank_vacuumOFF_time,
"Ferment_Tank_water_height":Ferment_Tank_water_height,
"Ferment_Tank_motor_rpm":Ferment_Tank_motor_rpm,
"Ferment_Tank_fermenting_temp":Ferment_Tank_fermenting_temp,
"Ferment_Tank_fermenting_time":Ferment_Tank_fermenting_time,
"Ferment_Tank_WaterOut_time":Ferment_Tank_WaterOut_time
}
// 更新桶槽狀態
ferment_status_interval = setInterval(ferment_auto_status, 5*1000);
// ferment_auto_status();
function ferment_auto_status(){
if (ferment_status_process == 1) { return }
ferment_status_process = 1;
$.get('/fermentDEMO_auto_status', data, function (res){
F1 = res.Ferment_Tank_1
F2 = res.Ferment_Tank_2
ferment_tank_status = [F1, F2]
loading_status();
loading_sensors();
ferment_status_process = 0;
}, 'json');
}
}
</script>
</td>
<td colspan="2">
<button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">
<u>乾燥自動化</u></button>
<br>
<button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">
<u>乾燥停止</u></button>
<script>
function dry_auto_status_stop(){
clearInterval(dry_status_interval)
console.log("------- 狀態自動化判斷 停止 -------")
}
function dry_auto_status_testing(){
console.log("------- 發酵自動化判斷 開始 -------")
var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
data = {"command": "Dry_auto_parameter",
"Dry_Tank_bean_height": Dry_Tank_bean_height,
"Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,
"Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,
"Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,
"Dry_Tank_drying_temp": Dry_Tank_drying_temp,
"Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,
"Dry_Tank_drying_time": Dry_Tank_drying_time,
"Dry_Output_bean_height": Dry_Output_bean_height,
"Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
"Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time
};
// 更新桶槽狀態
dry_status_interval = setInterval(dry_auto_status, 5*1000);
// dry_auto_status();
function dry_auto_status(){
if (dry_status_process == 1) { return }
dry_status_process = 1;
$.get('/dryDEMO_auto_status', data, function (res){
D1 = res.Dry_Tank_1
D2 = res.Dry_Tank_2
DO1 = res.Dry_Output_1
DO2 = res.Dry_Output_2
dry_tank_status = [D1, D2]
dry_output_status = [DO1, DO2]
loading_status();
loading_sensors();
dry_status_process = 0;
}, 'json');
}
}
</script>
</td>
</tr>
</table>
</div>
<div id="coffee_footer">
<!-- 匯入共同使用的 footer.html 內容 -->
{% include 'footer.html' %}
</div>
</div>
</body>
</html>