<!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>
body {
margin: 0;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
cursor: pointer;
text-decoration: none;
width: 110px;
height: 46px;
}
.nav-top {
line-height: 40px;
background-color: #C4C4C4;
}
.website_title {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 30px;
color: #000000;
}
.navbar-nav>li {
float: none;
display: inline-block;
width: 100px;
margin: 0 auto;
text-align: center;
}
.navbar-nav>li a {
font-size: 20px;
}
.main-page {
margin-top: 200px;
}
.page-title {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 36px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.set-link {
display: inline-block;
width: 350px;
height: 100px;
line-height: 100px;
background: #008CBA;
border: 1px solid #CFCFCF;
box-sizing: border-box;
color: #FFFFFF;
border-radius: 10px;
font-size: 36px;
}
.cmn-toggle {
position: absolute;
margin-left: 0px;
visibility: hidden;
}
.cmn-toggle+label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-round-flat+label {
padding: 2px;
width: 60px;
height: 30px;
background-color: #C0C0C0;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat+label:before,
input.cmn-toggle-round-flat+label:after {
display: block;
position: absolute;
content: "";
}
input.cmn-toggle-round-flat+label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 60px;
transition: background 0.4s;
}
input.cmn-toggle-round-flat+label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 24px;
background-color: #dddddd;
border-radius: 52px;
transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked+label {
background-color: #C0C0C0;
}
input.cmn-toggle-round-flat:checked+label:after {
margin-left: 27px;
background-color: #008CBA;
}
@media(max-width:373px) {
.card {
margin-right: 0px;
}
.set-link {
width: 250px;
}
}
@media(max-width:577px) {}
@media(min-width:576px) {}
@media(min-width:768px) {
.navbar-nav>li {
margin-left: 0px;
}
.navbar-nav .li-block {
display: none;
}
}
@media(min-width:991px) {
.navbar-nav>li {
margin-left: 20px;
}
.navbar-nav .li-block {
display: none;
}
}
@media(min-width:1200px) {
.navbar-nav>li {
margin-left: 50px;
}
.navbar-nav .li-block {
display: inline-block;
width: 100px;
}
}
@media(min-width:1400px) {
.navbar-nav .li-block {
display: inline-block;
width: 200px;
}
}
@media(min-width:1689px) {
.navbar-nav>li {
margin-left: 50px;
}
.navbar-nav .li-block {
display: inline-block;
width: 500px;
}
}
</style>
</head>
<body>
<h6>感測器數值</h6>
入料儲豆槽液位計高度(cm)：!測試時請用生豆高度!{{input_UltraSonic.UltraSonic}}
<div id="input_UltraSonic" d={{input_UltraSonic.UltraSonic}} style="display:none"></div>
<br>
設定空桶高度應低於 10
<br>
乾燥槽液位計高度(cm)：!測試時請用生豆高度!{{tank_UltraSonic.UltraSonic}}
<div id="tank_UltraSonic" d={{tank_UltraSonic.UltraSonic}} style="display:none"></div>
<br>
<hr size="50" width="100%">
<h6>入料排程</h6>
設定入料儲豆槽生豆高度(cm)：
<input name="schedule_input_height" id="schedule_input_height" type="text" style="width:100px;" value="70">
<br>
設定吸料時間(s)：
<input name="schedule_tank_vacuumin" id="schedule_tank_vacuumin" type="text" style="width:100px;" value="5">
<br>
設定放料時間(s)：
<input name="schedule_tank_vacuumout" id="schedule_tank_vacuumout" type="text" style="width:100px;" value="10">
<br>
設定乾燥槽生豆高度(cm)：
<input name="schedule_tank_height" id="schedule_tank_height" type="text" style="width:100px;" value="70">
<br>
入料時馬達轉速(rpm)：
<input name="schedule_tank_motorrpm" id="schedule_tank_motorrpm" type="text" style="width:100px;" value="10">
<br>
<button type="submit" class="btn btn-primary" onclick="schedule_Start()">開始入料</button>
<script>
function schedule_Start() {
//word = document.getElementById("schedule_SOP").innerHTML;
//document.getElementById("schedule_SOP").innerHTML = word+'<br>*';
var schedule_input_height = $("input[name=schedule_input_height]").val();
var schedule_tank_vacuumin = $("input[name=schedule_tank_vacuumin]").val();
var schedule_tank_vacuumout = $("input[name=schedule_tank_vacuumout]").val();
var schedule_tank_height = $("input[name=schedule_tank_height]").val();
var schedule_tank_motorrpm = $("input[name=schedule_tank_motorrpm]").val();
var tank_UltraSonic = parseInt(document.getElementById('tank_UltraSonic').getAttribute('d'));
// 入料判斷
if (schedule_input_height <= input_UltraSonic) {
console.log('儲豆槽達指定高度')
console.log('tank_UltraSonic:' + tank_UltraSonic)
if (tank_UltraSonic <= 10) {
var DRY_STATE = 'Ready'
console.log('乾燥桶為空, 狀態為 Ready, 準備入料')
// 開始入料
while (schedule_tank_height >= tank_UltraSonic) {
// 真空吸料機 ON
var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "on" };
console.log('data:', data)
/*
$.post('/mqtt/{{tid}}', data, function (res) {
console.log('真空吸料機 '+res)
}, 'text')
*/
// 吸料時間
var time = new Date();
while ((new Date() - time) < schedule_tank_vacuumin * 1000) { }
// 真空吸料機 OFF
var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "off" };
console.log('data:', data)
/*
$.post('/mqtt/{{tid}}', data, function (res) {
console.log('真空吸料機 '+ res)
}, 'text')
*/
// 放料時間
var time = new Date();
while ((new Date() - time) < schedule_tank_vacuumout * 1000) { }
location.reload();
}
console.log('乾燥桶生豆以達指定高度, 入料結束')
} else { console.log('乾燥桶不為空, 無法入料') }
} else { console.log('儲豆槽未達指定高度, 無法入料') }
}
</script>
<br>
<hr size="50" width="100%">
<!--
<h6>入料排程_程式</h6>
<p id="schedule_SOP">按下"開始入料"</p>
-->
<script>
dry_object = new Array();
dry_object[0] = ["ON", "OFF"]; // 入料真空吸料機
dry_object[1] = ["ON", "OFF"]; // 真空吸料機
dry_object[2] = ["ON 吸料", "OFF 排氣"]; // 三通閥
dry_object[3] = ["0", "10", "20", "30", "40", "50"]; // 馬達
dry_object[4] = ["ON", "OFF"]; // 鼓風機
dry_object[5] = ["ON", "OFF"]; // 加熱器 1
dry_object[6] = ["ON", "OFF"]; // 加熱器 2
dry_object[7] = ["ON", "OFF"]; // 蝴蝶閥
dry_object[8] = ["ON", "OFF"]; // 消毒電磁閥
dry_object[9] = ["ON", "OFF"]; // 排水電磁閥
dry_object[10] = ["ON", "OFF"]; // 溫控開關
dry_object[11] = ["OFF", "28", "30", "32", "34", "36", "38", "40"]; // 設定溫度
dry_object[12] = ["ON", "OFF"]; // 出料真空吸料機
dry_object[13] = ["ON", "OFF"]; // 入料儲豆槽_液位計
dry_object[14] = ["ON", "OFF"]; // 液位計
dry_object[15] = ["ON", "OFF"]; // SHT11_溫度
dry_object[16] = ["ON", "OFF"]; // SHT11_濕度
dry_object[17] = ["ON", "OFF"]; // 土壤三合一_溫度
dry_object[18] = ["ON", "OFF"]; // 土壤三合一_濕度
dry_object[19] = ["ON", "OFF"]; // 土壤三合一_EC
dry_object[20] = ["ON", "OFF"]; // 氣壓
dry_object[21] = ["ON", "OFF"]; // 出料儲豆槽_液位計
function renew1(index) {
console.log('index' + index)
for (var i = 0; i < dry_object[index].length; i++)
document.action.do_act1.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
document.action.do_act1.length = dry_object[index].length; // 刪除多餘的選項
}
function renew2(index) {
console.log('index' + index)
for (var i = 0; i < dry_object[index].length; i++)
document.action.dryinput_do_act2.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
document.action.dryinput_do_act2.length = dry_object[index].length; // 刪除多餘的選項
}
</script>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<div id="box">
<form name="condition">
條件
<select name="cond_a1">
<optgroup label="Actuator">
<option value="input_vacuum">入料真空吸料機</option>
<option value="tank_vacuum">真空吸料機</option>
<option value="tank_threewayvalve">三通閥</option>
<option value="tank_motor">馬達</option>
<option value="tank_blower">鼓風機</option>
<option value="tank_heater1">加熱器 1</option>
<option value="tank_heater2">加熱器 2</option>
<option value="tank_diskvalve">蝴蝶閥</option>
<option value="tank_solenoid_disinfect">消毒電磁閥</option>
<option value="tank_solenoid_water">排水電磁閥</option>
<option value="tank_temp1_enable">溫控開關</option>
<option value="tank_temp1">設定溫度</option>
<option value="output_vacuum">出料真空吸料機</option>
</optgroup>
<optgroup label="Sensor">
<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>
<option value="tank_UltraSonic">液位計(cm)</option>
<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>
<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>
<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>
<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>
<option value="tank_soil_EC">土壤三合一_EC(%)</option>
<option value="tank_PA">氣壓(PA)</option>
<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>
</optgroup>
</select>
<select name="cond_cal1">
<option value="cal1_equal">==</option>
<option value="cal1_more">>=</option>
<option value="cal1_less"><=</option>
<option value="cal1_and">and</option>
<option value="cal1_or">or</option>
</select>
<input list="cal1" name="cond_b1">
<datalist id="cal1">
<option value="ON">
<option value="OFF">
<option value="(或請自行輸入數值)">
</datalist>
</form>
<form name="action">
物件：
<select name="do_obj1" onChange="renew1(this.selectedIndex);">
<optgroup label="Actuator">
<option value="input_vacuum1">入料真空吸料機
<option value="tank_vacuum1">真空吸料機</option>
<option value="tank_threewayvalve1">三通閥</option>
<option value="tank_motor1">馬達</option>
<option value="tank_blower1">鼓風機</option>
<option value="tank_heater11">加熱器 1</option>
<option value="tank_heater21">加熱器 2</option>
<option value="tank_diskvalve1">蝴蝶閥</option>
<option value="tank_solenoid_disinfect1">消毒電磁閥</option>
<option value="tank_solenoid_water1">排水電磁閥</option>
<option value="tank_temp1_enable1">溫控開關</option>
<option value="tank_temp11">設定溫度</option>
<option value="output_vacuum1">出料真空吸料機</option>
</optgroup>
<optgroup label="Sensor">
<option value="input_UltraSonic1">入料儲豆槽_液位計</option>
<option value="tank_UltraSonic1">液位計</option>
<option value="tank_SHT11_Temp1">SHT11_溫度</option>
<option value="tank_SHT11_Humidity1">SHT11_濕度</option>
<option value="tank_soil_Temp1">土壤三合一_溫度</option>
<option value="tank_soil_Humidity1">土壤三合一_濕度</option>
<option value="tank_soil_EC1">土壤三合一_EC</option>
<option value="tank_PA1">氣壓</option>
<option value="output_UltraSonic1">出料儲豆槽_液位計</option>
</optgroup>
</select>
動作：
<select name="do_act1">
<option value="">請由左方選取物件
</select>
</form>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<div id="new">
新增的條件物件放這裡
</div>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<script>
var i = 1
function Add(evt) {
// onclick = "Add(hoist_add1);""
// evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)
evt.style.display = "none"; // 元素不顯示
i++;
var div = document.createElement('div'); // 輸出 <div></div>
var cond_a = 'cond_a' + i;
var cond_b = 'cond_b' + i;
var cond_cal = 'cond_cal' + i;
var id = evt.getAttribute('id'); // 輸出 dryinput_add1
console.log('id:' + id)
var add = id.split('_')[0] + '_add' + i; // dryinput + _add + 2 => 輸出 hoist_add2
var del = id.split('_')[0] + '_del' + i; // dryinput + _del + 2 => 輸出 hoist_del2
var html = '';
var begin = id.split('_')[0]; // 輸出 dryinput
div.className = "col-12 row";
div.style.marginTop = "10px";
html += '<form name="dryinput_condition">';
html += '條件';
if (begin == 'dryinput') {
html += ' <select name="dryinput_cond_a' + i + '">';
} else {
};
html += '<optgroup label="Actuator">' +
'<option value="input_vacuum">入料真空吸料機</option>' +
'<option value="tank_vacuum">真空吸料機</option>' +
'<option value="tank_threewayvalve">三通閥</option>' +
'<option value="tank_motor">馬達</option>' +
'<option value="tank_blower">鼓風機</option>' +
'<option value="tank_heater1">加熱器 1</option>' +
'<option value="tank_heater2">加熱器 2</option>' +
'<option value="tank_diskvalve">蝴蝶閥</option>' +
'<option value="tank_solenoid_disinfect">消毒電磁閥</option>' +
'<option value="tank_solenoid_water">排水電磁閥</option>' +
'<option value="tank_temp1_enable">溫控開關</option>' +
'<option value="tank_temp1">設定溫度</option>' +
'<option value="output_vacuum">出料真空吸料機</option>' +
'</optgroup>' +
'<optgroup label="Sensor">' +
'<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +
'<option value="tank_UltraSonic">液位計(cm)</option>' +
'<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +
'<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +
'<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +
'<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +
'<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +
'<option value="tank_PA">氣壓(PA)</option>' +
'<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +
'</optgroup>' +
'</select>';
if (begin == 'dryinput') {
html += '<select name="dryinput_cond_cal' + i + '">';
} else {
};
html += '<option value="cal1_equal">==</option>' +
'<option value="cal1_more">>=</option>' +
'<option value="cal1_less"><=</option>' +
'<option value="cal1_and">and</option>' +
'<option value="cal1_or">or</option>' +
'</select>';
if (begin == 'dryinput') {
html += '<input list="cal' + i + '" name="dryinput_cond_b' + i + '">';
} else {
};
html += '<datalist id="cal' + i + '">' +
'<option value="ON">' +
'<option value="OFF">' +
'<option value="(或請自行輸入數值)">' +
'</datalist>' +
'</form>';
html += '<form name="dryinput_action">';
html += '物件：';
html += '<script>' +
'dry_object = new Array();' +
'dry_object[0] = ["ON", "OFF"];' +
'dry_object[1] = ["ON", "OFF"];' +
'dry_object[2] = ["ON 吸料", "OFF 排氣"];' +
'dry_object[3] = ["0", "10", "20", "30", "40", "50"];' +
'dry_object[4] = ["ON", "OFF"];' +
'dry_object[5] = ["ON", "OFF"];' +
'dry_object[6] = ["ON", "OFF"];' +
'dry_object[7] = ["ON", "OFF"]; ' +
'function renew' + i + '(index) {' +
'for (var i = 0; i < dry_object[index].length; i++)' +
'document.action.dryinput_do_act' + i + '.options[i] = new Option(dry_object[index][i], dry_object[index][i]);' +
'document.action.dryinput_do_act' + i + '.length = dry_object[index].length;' +
'}' +
'<\/script>';
if (begin == 'dryinput') {
html += '<select name="dryinput_do_obj' + i + '" onChange="renew' + i + '(this.selectedIndex);">';
} else {
};
html += '<optgroup label="Actuator">' +
'<option value="input_vacuum1">入料真空吸料機' +
'<option value="tank_vacuum1">真空吸料機</option>' +
'<option value="tank_threewayvalve1">三通閥</option>' +
'<option value="tank_motor1">馬達</option>' +
'<option value="tank_blower1">鼓風機</option>' +
'<option value="tank_heater11">加熱器 1</option>' +
'<option value="tank_heater21">加熱器 2</option>' +
'<option value="tank_diskvalve1">蝴蝶閥</option>' +
'<option value="tank_solenoid_disinfect1">消毒電磁閥</option>' +
'<option value="tank_solenoid_water1">排水電磁閥</option>' +
'<option value="tank_temp1_enable1">溫控開關</option>' +
'<option value="tank_temp11">設定溫度</option>' +
'<option value="output_vacuum1">出料真空吸料機</option>' +
'</optgroup>' +
'<optgroup label="Sensor">' +
'<option value="input_UltraSonic1">入料儲豆槽_液位計</option>' +
'<option value="tank_UltraSonic1">液位計</option>' +
'<option value="tank_SHT11_Temp1">SHT11_溫度</option>' +
'<option value="tank_SHT11_Humidity1">SHT11_濕度</option>' +
'<option value="tank_soil_Temp1">土壤三合一_溫度</option>' +
'<option value="tank_soil_Humidity1">土壤三合一_濕度</option>' +
'<option value="tank_soil_EC1">土壤三合一_EC</option>' +
'<option value="tank_PA1">氣壓</option>' +
'<option value="output_UltraSonic1">出料儲豆槽_液位計</option>' +
'</optgroup>' +
'</select>';
html += '動作：';
if (begin == 'dryinput') {
html += '<select name="dryinput_do_act' + i + '">';
} else {
};
html += '<option value="">請由左方選取物件' +
'</select>' +
'<input id=dryinput_del' + i + ' class="delete" type="button" value="條件物件--" onclick="Delete(dryinput_del' + i + ');">'
'</form>' +
'</div>';
//html += ;
html += '<br><input id="dryinput_add' + i + '" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add' + i + ');"><br>';
html += '</div><div id="dry_con_act' + (i + 1) + '"></div>';
var divbox = document.getElementById('box');
divbox.insertAdjacentHTML('beforeend', html);
};
function Delete(evt) {
// evt = dryinput_del2
var id = evt.getAttribute('id'); // 輸出 dryinput_del2
//console.log('id:'+id)
var begin = id.split('_')[0]; // 輸出 dryinput
//console.log('begin:'+begin)
var del_num = id.split('_')[1].replace("del", "");
//console.log('del_num:'+del_num)
var obox = document.getElementById("box");
var target = "dry_con_act" + del_num
console.log('target:' + target)
var divs = obox.getElementById(target);
if (divs.length > 0) {
obox.removeChild(divs[0]);
}
};
</script>
<!--
<input type="button" onclick="document.body.insertAdjacentHTML('beforeEnd', box)" value="新增">
box = '<input type=text name=' + i + ' value=' + i + '><br>'
-->
<input id="dryinput_add1" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add1);">
<br>
<div id="dry_con_act2"></div>
</div>
<hr size="50" width="100%">
</body>
</html>