<!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"> <!-- <meta http-equiv="refresh" content="5" /> 每 content 秒網頁自動更新--> <!-- 新 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"> <!-- Socket.IO --> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script> <script type="text/javascript" charset="UTF-8"> /* $(document).ready(function(){ var url = 'http://0.0.0.0'; var port = '5000'; var socket = io.connent(url + ':' + port); socket.on('connect', function(){ socket.emit('connect_event', { data: 'connected!'}); }) socket.on('server_response', function(event){ socket.emit('client_event', {data: $('#emit_data').val()}); return false; }); }) */ </script> <script language="JavaScript"> // 指定 10秒 刷新網頁一次 var ctid = '{{tid}}'; console.log('ctid:' + ctid) // WebUpdate_set = setTimeout(function(){WebUpdate(ctid)} , 5 * 1000) // var WebUpdate_set $(document).ready(function(){ // WebUpdate_set = setTimeout(function(){WebUpdate(ctid)}, 5 * 1000); // var WebUpdate_set // setInterval(function(){location.reload()}, 300 * 1000) // 每八分鐘重新整理 }); </script> <style> .footer{ position: absolute; width: 100%; background-color: #eee; text-align: center; } body { margin: 0; } input[type="button"] { padding: 4px 15px; background: #f3f3f3; border: 0 none; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px; } .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: 70px; 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: left; } .set-link { display: inline-block; width: 350px; height: 70px; line-height: 70px; 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: 70px; } } @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> <script> // 清洗浮選 制動器開關 var tank_num = '{{tid}}'; // 入料 真空吸料機 function inputVacuum() { var status = "off"; var check = $("input[name=input_vacuum_status]:checked"); // 這裡面是 jQuery 撈取資料的方法, jQuery 常使用到 $ 錢字號 console.log('check:', check); //大於0代表有被選中, 如果有多個可以呈現勾取的項目數量 if (check.length > 0) { status = "on"; $("#cmn-toggle-02").prop('checked', false); // 確認是否勾選 if (!confirm("你確定要開啟入料儲豆槽真空吸料機嗎?")) { return false; }; } else { $("#cmn-toggle-02").prop('checked', true); if (!confirm("你確定要關閉入料儲豆槽真空吸料機嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "input_vacuum_status", "value": status }; // jquery 請求 '/mqtt/{{tid}}' 頁面 $.post('/mqtt/{{tid}}', data, function (res) { //res:HTTP response argument to the middleware function console.log('data:', data) if (res == 'on') { $("#cmn-toggle-02").prop('checked', true); setTimeout("alert('入料儲豆槽真空吸料機_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-02").prop('checked', false); setTimeout("alert('入料儲豆槽真空吸料機_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function inputVacuum_ON() { var data = { "tank_num": "C" + tank_num, "command": "input_vacuum_status", "value": "on" }; // jquery 請求 '/mqtt/{{tid}}' 頁面 $.post('/mqtt/{{tid}}', data, function (res) { //res:HTTP response argument to the middleware function console.log('data:', data) if (res == 'on') { $("#cmn-toggle-02").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-02").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function inputVacuum_OFF() { var data = { "tank_num": "C" + tank_num, "command": "input_vacuum_status", "value": "off" }; // jquery 請求 '/mqtt/{{tid}}' 頁面 $.post('/mqtt/{{tid}}', data, function (res) { //res:HTTP response argument to the middleware function console.log('data:', data) if (res == 'on') { $("#cmn-toggle-02").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-02").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 桶內 真空吸料機 function tankVacuum() { var status = "off"; var check = $("input[name=tank_vacuum_status]:checked"); console.log('check:', check); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-05").prop('checked', false); if (!confirm("你確定要開啟真空吸料機嗎?")) { return false; }; } else { $("#cmn-toggle-05").prop('checked', true); if (!confirm("你確定要關閉真空吸料機嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": status }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-05").prop('checked', true); setTimeout("alert('真空吸料機_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-05").prop('checked', false); setTimeout("alert('真空吸料機_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankVacuum_ON() { var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "on" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-05").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-05").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankVacuum_OFF() { var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-05").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-05").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 浮選槽注水 雙核隔膜泵 出水口 2、3_雙核泵 function tankPumpWaterL2L3() { //<!--setInterval(Relay,10000);--> var status = "off"; var check = $("input[name=tank_pump_waterL2L3_status]:checked"); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-08").prop('checked', false); if (!confirm("你確定要開啟浮選槽注水嗎?")) { return false; }; } else { $("#cmn-toggle-08").prop('checked', true); if (!confirm("你確定要關閉浮選槽注水嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterL2L3_status", "value": status }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-08").prop('checked', true); setTimeout("alert('浮選槽注水入料_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-08").prop('checked', false); setTimeout("alert('浮選槽注水排氣_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankPumpWaterL2L3_ON() { var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterL2L3_status", "value": "on" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-08").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-08").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankPumpWaterL2L3_OFF() { var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterL2L3_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-08").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-08").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 第 2 層灑水 雙核隔膜泵 出水口 4、5_雙核泵 function tankPumpWaterL4L5() { //<!--setInterval(Relay,10000);--> var status = "off"; var check = $("input[name=tank_pump_waterL4L5_status]:checked"); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-11").prop('checked', false); if (!confirm("你確定要開啟清洗第 2 層灑水嗎?")) { return false; }; } else { $("#cmn-toggle-11").prop('checked', true); if (!confirm("你確定要關閉清洗第 2 層灑水嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterL4L5_status", "value": status }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-11").prop('checked', true); setTimeout("alert('清洗第 2 層灑水_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-11").prop('checked', false); setTimeout("alert('清洗第 2 層灑水_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankPumpWaterL4L5_ON() { var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterL4L5_status", "value": "on" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-11").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-11").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankPumpWaterL4L5_OFF() { var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterL4L5_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-11").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-11").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 第 4 層灑水 雙核隔膜泵 入水口_雙核泵 function tankPumpWaterInput() { var status = "off"; var check = $("input[name=tank_pump_waterInput_status]:checked"); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-14").prop('checked', false); if (!confirm("你確定要開啟清洗第 4 層灑水嗎?")) { return false; }; } else { $("#cmn-toggle-14").prop('checked', true); if (!confirm("你確定要關閉清洗第 4 層灑水嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterInput_status", "value": status }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-14").prop('checked', true); setTimeout("alert('清洗第 4 層灑水_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-14").prop('checked', false); setTimeout("alert('清洗第 4 層灑水_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankPumpWaterInput_ON() { var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterInput_status", "value": "on" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-14").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-14").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankPumpWaterInput_OFF() { var data = { "tank_num": "C" + tank_num, "command": "tank_pump_waterInput_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-14").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-14").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 清洗第 3 層 電磁閥 出水口 2、3_電磁閥 function tankSolenoidWaterL2L3() { var status = "off"; var check = $("input[name=tank_solenoid_waterL2L3_status]:checked"); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-17").prop('checked', false); if (!confirm("你確定要開啟清洗第 3 層電磁閥嗎?")) { return false; }; } else { $("#cmn-toggle-17").prop('checked', true); if (!confirm("你確定要關閉清洗第 3 層電磁閥嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_waterL2L3_status", "value": status }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-17").prop('checked', true); setTimeout("alert('清洗第 3 層電磁閥_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-17").prop('checked', false); setTimeout("alert('清洗第 3 層電磁閥_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSolenoidWaterL2L3_ON() { var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_waterL2L3_status", "value": "on" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-17").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-17").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSolenoidWaterL2L3_OFF() { var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_waterL2L3_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-17").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-17").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 清洗第 5 層 電磁閥 出水口 4、5_電磁閥 function tankSolenoidWaterL4L5() { var status = "off"; var check = $("input[name=tank_solenoid_waterL4L5_status]:checked"); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-20").prop('checked', false); if (!confirm("你確定要開啟清洗第 5 層電磁閥嗎?")) { return false; }; } else { $("#cmn-toggle-20").prop('checked', true); if (!confirm("你確定要關閉清洗第 5 層電磁閥嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_waterL4L5_status", "value": status }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-20").prop('checked', true); setTimeout("alert('清洗第 5 層電磁閥_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-20").prop('checked', false); setTimeout("alert('清洗第 5 層電磁閥_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSolenoidWaterL4L5_ON() { var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_waterL4L5_status", "value": "on" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-20").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-20").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSolenoidWaterL4L5_OFF() { var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_waterL4L5_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { $("#cmn-toggle-20").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-20").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; // 步進馬達 /* function tankSteppingMotor() { var motor_data = $("input[name=steppingmotor_rpm_data]").val(); if (motor_data == '') { alert("請先輸入要運轉的值!"); return false; } else if (motor_data == 0) { alert("轉速 0 為關閉步進馬達"); } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) { alert("您輸入的值已超過範圍,請重新輸入!" + !Number(motor_data)); return false; }; if (motor_data != 0) { value = motor_data; if (!confirm("你確定要開啟步進馬達,運轉速度為 " + motor_data + " 嗎?")) { return false; }; } else { if (!confirm("你確定要關閉步進馬達嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": motor_data }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) if (res == 'on') { setTimeout("alert('步進馬達_開啟成功!')", 500); } else if (res == 'off') { setTimeout("alert('步進馬達_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; */ function tankSteppingMotor_STOP() { var data = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "off" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSteppingMotor_UP() { var data = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "on", "dir":"up"}; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSteppingMotor_DOWN() { var data = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "on", "dir":"down" }; $.post('/mqtt/{{tid}}', data, function (res) { console.log('data:', data) }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function tankSteppingMotor_UPSTOP() { var data_up = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "on", "dir":"up"}; $.post('/mqtt/{{tid}}', data_up, function (res) { console.log('data:', data_up) }, 'text') var time = new Date(); while ((new Date() - time) < 1 * 1000) { }; var data_stop = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "off" }; $.post('/mqtt/{{tid}}', data_stop, function (res) { console.log('data:', data_stop) }, 'text') }; function tankSteppingMotor_DOWNSTOP() { var data_down = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "on", "dir":"down"}; $.post('/mqtt/{{tid}}', data_down, function (res) { console.log('data:', data_down) }, 'text') var time = new Date(); while ((new Date() - time) < 1 * 1000) { }; var data_stop = { "tank_num": "C" + tank_num, "command": "step_motor_status", "value": "off" }; $.post('/mqtt/{{tid}}', data_stop, function (res) { console.log('data:', data_stop) }, 'text') }; // 出料 真空吸料機 function outputVacuum() { var status = "off"; var check = $("input[name=output_vacuum_status]:checked"); //大於0代表有被選中 if (check.length > 0) { status = "on"; $("#cmn-toggle-26").prop('checked', false); if (!confirm("你確定要開啟出料儲豆槽真空吸料機嗎?")) { return false; }; } else { $("#cmn-toggle-26").prop('checked', true); if (!confirm("你確定要關閉出料儲豆槽真空吸料機嗎?")) { return false; }; }; var data = { "tank_num": "C" + tank_num, "command": "output_vacuum_status", "value": status }; console.log('data:', data) $.post('/mqtt/{{tid}}', data, function (res) { if (res == 'on') { $("#cmn-toggle-26").prop('checked', true); setTimeout("alert('出料儲豆槽真空吸料機_開啟成功!')", 500); } else if (res == 'off') { $("#cmn-toggle-26").prop('checked', false); setTimeout("alert('出料儲豆槽真空吸料機_關閉成功!')", 500); } else { alert(res); }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function outputVacuum_ON() { var data = { "tank_num": "C" + tank_num, "command": "output_vacuum_status", "value": "on" }; console.log('data:', data) $.post('/mqtt/{{tid}}', data, function (res) { if (res == 'on') { $("#cmn-toggle-26").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-26").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; function outputVacuum_OFF() { var data = { "tank_num": "C" + tank_num, "command": "output_vacuum_status", "value": "off" }; console.log('data:', data) $.post('/mqtt/{{tid}}', data, function (res) { if (res == 'on') { $("#cmn-toggle-26").prop('checked', true); } else if (res == 'off') { $("#cmn-toggle-26").prop('checked', false); } else { }; }, 'text') // setTimeout(function () { location.reload(); }, 500); }; </script> </head> <body> 狀態更新時間(秒): <input name="webupdate_time" type="text" value="5" style="width:100px;"> <input type="button" value="設定更新時間" onclick="changeUpdate()"> <script language="JavaScript"> function changeUpdate() { clearInterval(WebUpdate_set); var webupdate_time = $("input[name=webupdate_time]").val() console.log('webupdate_time' + webupdate_time) WebUpdate_set = setTimeout(function(){WebUpdate(ctid)} , webupdate_time * 1000); } // jQuery 更新感測器制動器狀態 function WebUpdate(ctid) { $.get('/loading/C' + ctid, '', function (res) { if (res.tank_vacuum == 0) { $("#cmn-toggle-05").prop('checked', false); } else if (res.tank_vacuum == 1) { $("#cmn-toggle-05").prop('checked', true); } if (res.tank_pump_waterFloat == 0) { $("#cmn-toggle-08").prop('checked', false); } else if (res.tank_pump_waterFloat == 1) { $("#cmn-toggle-08").prop('checked', true); } if (res.tank_pump_waterL4L5 == 0) { $("#cmn-toggle-11").prop('checked', false); } else if (res.tank_pump_waterL4L5 == 1) { $("#cmn-toggle-11").prop('checked', true); } if (res.tank_pump_waterInput == 0) { $("#cmn-toggle-14").prop('checked', false); } else if (res.tank_pump_waterInput == 1) { $("#cmn-toggle-14").prop('checked', true); } if (res.tank_solenoid_waterL2L3 == 0) { $("#cmn-toggle-17").prop('checked', false); } else if (res.tank_solenoid_waterL2L3 == 1) { $("#cmn-toggle-17").prop('checked', true); } if (res.tank_solenoid_waterL4L5 == 0) { $("#cmn-toggle-20").prop('checked', false); } else if (res.tank_solenoid_waterL4L5 == 1) { $("#cmn-toggle-20").prop('checked', true); } if (res.tank_stepping_motor == 0) { $("#cmn-toggle-23").prop('checked', false); } else if (res.tank_stepping_motor == 1) { $("#cmn-toggle-23").prop('checked', true); } $("#tank_stepping_motor_t_status").text(res.tank_stepping_motor); $("#UltraSonic_t_status").text(res.UltraSonic); setTimeout(function(){WebUpdate(ctid)}, 5 * 1000); }, 'json'); } </script> <h4>制動器</h4> <table border="1px solid black" style="font-size:18px;" width=100%> <tr> <td style="color:red;">Valve</td> <td>入料<br>真空吸料機</td> <td>浮選入豆<br>真空吸料機</td> <td>出水口 2、3_<br>雙核隔膜泵</td> <td>出水口 4、5_<br>雙核隔膜泵</td> <td>入水口_<br>雙核隔膜泵</td> <td>清洗第 3 層<br>電磁閥</td> <td>清洗第 5 層<br>電磁閥</td> <td> 步進馬達 <span id="tank_stepping_motor_t_status">{{tank_stepping_motor}}</span> </td> <td>出料<br>真空吸料機</td> </tr> <tr> <td> <span style="color:#C0C0C0;">off</span> <span style="color:#008CBA;">on</span> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-01" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-01"></label> </div> <div class="switch text-center"> {% if input_vacuum=='ON' %} <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="tank_vacuum_status" value="ON" onclick="inputVacuum()"> {% else %} <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_vacuum_status" value="OFF" onclick="inputVacuum()"> {% endif %} <label for="cmn-toggle-02"></label> </div> <div class="switch"> <input id="cmn-toggle-03" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-03" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-04" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-04"></label> </div> <div class="switch text-center"> {% if tank_vacuum=='ON' %} <input id="cmn-toggle-05" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="tank_vacuum_status" value="ON" onclick="tankVacuum()"> {% else %} <input id="cmn-toggle-05" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_vacuum_status" value="OFF" onclick="tankVacuum()"> {% endif %} <label for="cmn-toggle-05"></label> </div> <div class="switch"> <input id="cmn-toggle-06" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-06" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-07" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-07"></label> </div> <div class="switch text-center"> {% if tank_pump_waterL2L3=='ON' %} <input id="cmn-toggle-08" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="tank_pump_waterL2L3_status" value="ON" onclick="tankPumpWaterL2L3()"> {% else %} <input id="cmn-toggle-08" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_pump_waterL2L3_status" value="OFF" onclick="tankPumpWaterL2L3()"> {% endif %} <label for="cmn-toggle-08"></label> </div> <div class="switch"> <input id="cmn-toggle-09" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-09" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-10" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-10"></label> </div> <div class="switch text-center"> {% if tank_pump_waterL4L5=='ON' %} <input id="cmn-toggle-11" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="tank_pump_waterL4L5_status" value="ON" onclick="tankPumpWaterL4L5()"> {% else %} <input id="cmn-toggle-11" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_pump_waterL4L5_status" value="OFF" onclick="tankPumpWaterL4L5()"> {% endif %} <label for="cmn-toggle-11"></label> </div> <div class="switch"> <input id="cmn-toggle-12" class="cmn-toggle cmn-toggle-on-off" type="checkbox"> <label for="cmn-toggle-12" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-13" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-13"></label> </div> <div class="switch text-center"> {% if tank_pump_waterInput=='ON' %} <input id="cmn-toggle-14" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="tank_pump_waterInput_status" value="ON" onclick="tankPumpWaterInput()"> {% else %} <input id="cmn-toggle-14" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_pump_waterInput_status" value="OFF" onclick="tankPumpWaterInput()"> {% endif %} <label for="cmn-toggle-14"></label> </div> <div class="switch"> <input id="cmn-toggle-15" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-15" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-16" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-16"></label> </div> <div class="switch text-center"> {% if tank_solenoid_waterL2L3=='ON' %} <input id="cmn-toggle-17" class="cmn-toggle cmn-toggle-round-flat" checked type="checkbox" name="tank_solenoid_waterL2L3_status" value="ON" onclick="tankSolenoidWaterL2L3()"> {% else %} <input id="cmn-toggle-17" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_solenoid_waterL2L3_status" value="OFF" onclick="tankSolenoidWaterL2L3()"> {% endif %} <label for="cmn-toggle-17"></label> </div> <div class="switch"> <input id="cmn-toggle-18" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-18" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-19" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-19"></label> </div> <div class="switch text-center"> {% if tank_solenoid_waterL4L5=='ON' %} <input id="cmn-toggle-20" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="tank_solenoid_waterL4L5_status" value="ON" onclick="tankSolenoidWaterL4L5()"> {% else %} <input id="cmn-toggle-20" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="tank_solenoid_waterL4L5_status" value="OFF" onclick="tankSolenoidWaterL4L5()"> {% endif %} <label for="cmn-toggle-20"></label> </div> <div class="switch"> <input id="cmn-toggle-21" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-21" data-on="Yes" data-off="No"></label> </div> </div> </td> <td> <input type="button" value="UP" name="tank_stepping_motor_UP" onclick="tankSteppingMotor_UP()"> <input type="button" value="STOP" name="tank_stepping_motor_STOP" onclick="tankSteppingMotor_STOP()"> <input type="button" value="DOWN" name="tank_stepping_motor_DOWN" onclick="tankSteppingMotor_DOWN()"> </td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-25" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-25"></label> </div> <div class="switch text-center"> {% if output_vacuum=='ON' %} <input id="cmn-toggle-26" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="output_vacuum_status" value="ON" onclick="outputVacuum()"> {% else %} <input id="cmn-toggle-26" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="output_vacuum_status" value="OFF" onclick="outputVacuum()"> {% endif %} <label for="cmn-toggle-26"></label> </div> <div class="switch"> <input id="cmn-toggle-27" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-27" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td><span style="color:#008CBA;"><b>ON</b></span></td> <td><input type="button" value="ON" name="input_vacuum_ON" onclick="inputVacuum_ON()"></td> <td><input type="button" value="ON" name="tank_vacuum_ON" onclick="tankVacuum_ON()"></td> <td><input type="button" value="ON" name="tank_pump_water_float_ON" onclick="tankPumpWaterL2L3_ON()"></td> <td><input type="button" value="ON" name="tank_pump_waterL4L5_ON" onclick="tankPumpWaterL4L5_ON()"> </td> <td><input type="button" value="ON" name="tank_pump_waterInput_ON" onclick="tankPumpWaterInput_ON()"> </td> <td><input type="button" value="ON" name="tank_solenoid_waterL2L3_ON" onclick="tankSolenoidWaterL2L3_ON()"> </td> <td><input type="button" value="ON" name="tank_solenoid_waterL4L5_ON" onclick="tankSolenoidWaterL4L5_ON()"> </td> <td><input type="button" value="UP" name="tank_stepping_motor_UP" onclick="tankSteppingMotor_UPSTOP()"> </td> <td><input type="button" value="ON" name="output_vacuum_ON" onclick="outputVacuum_ON()"></td> </tr> <tr> <td><span style="color:#C0C0C0;"><b>OFF</b></span></td> <td><input type="button" value="OFF" name="input_vacuum_OFF" onclick="inputVacuum_OFF()"></td> <td><input type="button" value="OFF" name="tank_vacuum_OFF" onclick="tankVacuum_OFF()"></td> <td><input type="button" value="OFF" name="tank_pump_water_float_OFF" onclick="tankPumpWaterL2L3_OFF()"> </td> <td><input type="button" value="OFF" name="tank_pump_waterL4L5_OFF" onclick="tankPumpWaterL4L5_OFF()"> </td> <td><input type="button" value="OFF" name="tank_pump_waterInput_OFF" onclick="tankPumpWaterInput_OFF()"> </td> <td><input type="button" value="OFF" name="tank_solenoid_waterL2L3_OFF" onclick="tankSolenoidWaterL2L3_OFF()"> </td> <td><input type="button" value="OFF" name="tank_solenoid_waterL4L5_OFF" onclick="tankSolenoidWaterL4L5_OFF()"> </td> <td><input type="button" value="DOWN" name="tank_stepping_motor_STOP" onclick="tankSteppingMotor_DOWNSTOP()"> </td> <td><input type="button" value="OFF" name="output_vacuum_OFF" onclick="outputVacuum_OFF()"></td> </tr> </table> <br> <h4>感測器</h4> <table style="font-size:18px; border:2px #cccccc solid;" cellpadding="10" border='1' width=100%> <tr> <td>[桶內] 生豆高度:<span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span></td> </tr> </table> <br> <h4>排程測試</h4> <table style="font-size:18px; border:2px #cccccc solid;" cellpadding="10" border='1' width=100%> <tr> <td>水路測試</td> <td>排氣下豆測試</td> <td>生豆閘門測試</td> <td>出料測試</td> <td>出水口 4、5 <br>電磁閥逆洗</td> <td>出水口 2、3 <br>電磁閥逆洗</td> <td>清洗浮選連動</td> </tr> <tr> <td> 入水口_雙核泵 ON <input name="waiting_time_1" type="text" value="30" style="width:50px;"> 秒 <br> 出水口 4、5_雙核泵 ON <input name="waiting_time_2" type="text" value="30" style="width:50px;"> 秒 <br> 出水口 2、3_雙核泵 ON <input name="waiting_time_3" type="text" value="0" style="width:50px;"> 秒 </td> <td> 真空吸料機 ON <input name="waiting_time_8" type="text" value="1" style="width:50px;"> 秒 <br> 真空吸料機 OFF <input name="waiting_time_9" type="text" value="10" style="width:50px;"> 秒 <br> * 循環次數 <input name="waiting_loop_3" type="text" value="3" style="width:50px;"> </td> <td> 上升 <input name="waiting_time_4" type="text" value="3.5" style="width:50px;"> 秒 <br> 停止 <input name="waiting_time_5" type="text" value="3" style="width:50px;"> 秒 <br> 下降 <input name="waiting_time_6" type="text" value="3.5" style="width:50px;"> 秒 <br> 停止 <input name="waiting_time_7" type="text" value="3" style="width:50px;"> 秒 <br> * 循環次數 <input name="waiting_loop_2" type="text" value="3" style="width:50px;"> </td> <td> 出料_吸料機 ON <input name="waiting_time_16" type="text" value="1" style="width:50px;"> 秒 <br> 出料_吸料機 OFF <input name="waiting_time_17" type="text" value="10" style="width:50px;"> 秒 <br> * 循環次數 <input name="waiting_loop_4" type="text" value="3" style="width:50px;"> </td> <td> 請依序開啟: <br> 入_雙核泵 <br> 水龍頭 <br> 出 4、5_電磁閥 </td> <td> 請依序開啟: <br> 入_雙核泵 <br> 水龍頭 <br> 出 4、5_雙核泵 <br> 出 2、3_電磁閥 </td> <td> <font color = "red">生豆閘門零點</font> <br> 入水口_雙核泵 ON <input name="waiting_time_10" type="text" value="30" style="width:50px;"> 秒 <br> 出水口 4、5_雙核泵 ON <input name="waiting_time_11" type="text" value="30" style="width:50px;"> 秒 <br> 出水口 2、3_雙核泵 ON <input name="waiting_time_12" type="text" value="60" style="width:50px;"> 秒 <br> 真空吸料機 ON <input name="waiting_time_13" type="text" value="1" style="width:50px;"> 秒 <br> 真空吸料機 OFF <input name="waiting_time_14" type="text" value="10" style="width:50px;"> 秒 <br> * 循環次數 <input name="waiting_loop_6" type="text" value="3" style="width:50px;"> <br> 生豆閘門 升 <br> <input name="waiting_time_15" type="text" value="10" style="width:50px;"> 秒 <br> 生豆閘門 降 <br> 等待出豆時間 <input name="waiting_time_20" type="text" value="120" style="width:50px;"> 秒 <br> 出料_吸料機 ON <input name="waiting_time_18" type="text" value="1" style="width:50px;"> 秒 <br> 出料_吸料機 OFF <input name="waiting_time_19" type="text" value="10" style="width:50px;"> 秒 <br> * 循環次數 <input name="waiting_loop_5" type="text" value="3" style="width:50px;"> </td> </tr> <tr> <td> <button type="submit" class="btn btn-primary" onclick="tank_WaterIn_testing()">水路測試</button> <button type="submit" class="btn btn-primary" onclick="tank_WaterIn_testing_OFF()">水路測試 OFF</button> <script> function tank_WaterIn_testing() { // 清洗第 4 層灑水 ON tankPumpWaterInput_ON() console.log('tank_pump_waterInput_status ON') // 等待時間(秒) var time1 = $("input[name=waiting_time_1]").val(); console.log('等待 ' + time1 + ' 秒') var time = new Date(); while ((new Date() - time) < time1 * 1000) { }; // 清洗第 2 層灑水 ON tankPumpWaterL4L5_ON() console.log('tank_pump_waterL4L5_status ON') // 等待時間(秒) var time2 = $("input[name=waiting_time_2]").val(); console.log('等待 ' + time2 + ' 秒') var time = new Date(); while ((new Date() - time) < time2 * 1000) { }; // 浮選槽注水 ON tankPumpWaterL2L3_ON() console.log('tank_pump_waterL2L3_status ON') // 等待時間(秒) var time3 = $("input[name=waiting_time_3]").val(); console.log('等待 ' + time3 + ' 秒') var time = new Date(); while ((new Date() - time) < time3 * 1000) { }; }; </script> <script> function tank_WaterIn_testing_OFF(){ tankPumpWaterInput_OFF() console.log('tankPumpWaterInput_OFF') var time = new Date(); while ((new Date() - time) < 2 * 1000) { }; tankPumpWaterL4L5_OFF() console.log('tankPumpWaterL4L5_OFF') var time = new Date(); while ((new Date() - time) < 2 * 1000) { }; tankPumpWaterL2L3_OFF() console.log('tankPumpWaterL2L3_OFF') } </script> </td> <td> <button type="submit" class="btn btn-primary" onclick="tank_BeanInputAir_testing()">排氣下豆測試</button> <script> function tank_BeanInputAir_testing() { // 循環次數 var loop3 = $("input[name=waiting_loop_3]").val(); console.log('--- 循環 ' + loop3 + ' 次 ---') for (step = 1; step <= loop3; step++) { // 真空吸料機 ON tankVacuum_ON() console.log('tankVacuum_ON') // 吸料時間 var time8 = $("input[name=waiting_time_8]").val(); console.log('等待 ' + time8 + ' 秒') var time = new Date(); while ((new Date() - time) < time8 * 1000) { }; // 真空吸料機 OFF tankVacuum_OFF() console.log('tankVacuum_OFF') // 吸料時間 var time9 = $("input[name=waiting_time_9]").val(); console.log('等待 ' + time9 + ' 秒') var time = new Date(); while ((new Date() - time) < time9 * 1000) { }; } } </script> </td> <td> <button type="submit" class="btn btn-primary" onclick="tank_BeanBaffle_testing()">生豆閘門測試</button> <script> function tank_BeanBaffle_testing() { // 循環次數 var loop2 = $("input[name=waiting_loop_2]").val(); console.log('--- 循環 ' + loop2 + ' 次 ---') for (step = 1; step <= loop2; step++) { // 生豆閘門 上升 tankSteppingMotor_UP() console.log('tankSteppingMotor_UP') // 上升持續時間(秒) var time4 = $("input[name=waiting_time_4]").val(); console.log('等待 ' + time4 + ' 秒') var time = new Date(); while ((new Date() - time) < time4 * 1000) { }; // 生豆閘門 停止 tankSteppingMotor_STOP() console.log('tankSteppingMotor_STOP') // 暫停時間(秒) var time5 = $("input[name=waiting_time_5]").val(); console.log('等待 ' + time5 + ' 秒') var time = new Date(); while ((new Date() - time) < time5 * 1000) { }; // 生豆閘門 下降 tankSteppingMotor_DOWN() console.log('tankSteppingMotor_DOWN') // 下降持續時間(秒) var time6 = $("input[name=waiting_time_6]").val(); console.log('等待 ' + time6 + ' 秒') var time = new Date(); while ((new Date() - time) < time6 * 1000) { }; // 生豆閘門 停止 tankSteppingMotor_STOP() console.log('tankSteppingMotor_STOP') // 暫停時間(秒) var time7 = $("input[name=waiting_time_7]").val(); console.log('等待 ' + time7 + ' 秒') var time = new Date(); while ((new Date() - time) < time7 * 1000) { }; } } </script> </td> <td> <button type="submit" class="btn btn-primary" onclick="output_Bean_testing()">出料測試</button> <script> function output_Bean_testing(){ // 循環次數 var loop4 = $("input[name=waiting_loop_4]").val(); console.log('--- 循環 ' + loop4 + ' 次 ---') for (step = 1; step <= loop4; step++) { // 出料_吸料機 ON outputVacuum_ON() console.log('outputVacuum_ON') // 吸料時間 var time16 = $("input[name=waiting_time_16]").val(); console.log('等待 ' + time16 + ' 秒') var time = new Date(); while ((new Date() - time) < time16 * 1000) { }; // 出料_吸料機 OFF outputVacuum_OFF() console.log('outputVacuum_OFF') // 放料時間 var time17 = $("input[name=waiting_time_17]").val(); console.log('等待 ' + time17 + ' 秒') var time = new Date(); while ((new Date() - time) < time17 * 1000) { }; }; }; </script> </td> <td> <button type="submit" class="btn btn-primary" onclick="tank_SolenoidWaterL4L5_testing()">出 4、5 閥逆洗</button> <br> <button type="submit" class="btn btn-primary" onclick="tank_SolenoidWaterL4L5_testing_OFF()">出 4、5 閥逆洗 OFF</button> <script> function tank_SolenoidWaterL4L5_testing(){ // 入水口_雙核泵 ON tankPumpWaterInput_ON() console.log('tankPumpWaterInput_ON') // 水龍頭 ON var time = new Date(); while ((new Date() - time) < 3 * 1000) { }; // 出水口 4、5_電磁閥 ON tankSolenoidWaterL4L5_ON() console.log('tankSolenoidWaterL4L5_ON') }; function tank_SolenoidWaterL4L5_testing_OFF(){ // 出水口 4、5_電磁閥 OFF tankSolenoidWaterL4L5_OFF() console.log('tankSolenoidWaterL4L5_OFF') // 水龍頭 OFF var time = new Date(); while ((new Date() - time) < 3 * 1000) { }; // 入水口_雙核泵 OFF tankPumpWaterInput_OFF() console.log('tankPumpWaterInput_OFF') }; </script> </td> <td> <button type="submit" class="btn btn-primary" onclick="tank_SolenoidWaterL2L3_testing()">出 2、3 閥逆洗</button> <br> <button type="submit" class="btn btn-primary" onclick="tank_SolenoidWaterL2L3_testing_OFF()">出 2、3 閥逆洗 OFF</button> <script> function tank_SolenoidWaterL2L3_testing(){ // 入水口_雙核泵 ON tankPumpWaterInput_ON() console.log('tankPumpWaterInput_ON') // 水龍頭 ON var time = new Date(); while ((new Date() - time) < 3 * 1000) { }; // 出水口 4、5_雙核泵 ON tankPumpWaterL4L5_ON() console.log('tankPumpWaterL4L5_ON') // 出水口 2、3_電磁閥 ON tankSolenoidWaterL2L3_ON() console.log('tankSolenoidWaterL2L3_ON') }; function tank_SolenoidWaterL2L3_testing_OFF(){ // 出水口 2、3_電磁閥 OFF tankSolenoidWaterL2L3_OFF() console.log('tankSolenoidWaterL2L3_OFF') // 出水口 4、5_雙核泵 OFF tankPumpWaterL4L5_OFF() console.log('tankPumpWaterL4L5_OFF') // 水龍頭 OFF var time = new Date(); while ((new Date() - time) < 3 * 1000) { }; // 入水口_雙核泵 OFF tankPumpWaterInput_OFF() console.log('tankPumpWaterInput_OFF') }; </script> </td> <td> <button type="submit" class="btn btn-primary" onclick="tank_CleanWash_testing()">清洗浮選連動測試</button> <script> function tank_CleanWash_testing(){ // 生豆閘門 DOWN // tankSteppingMotor_DOWNSTOP() // console.log('tankSteppingMotor_DOWN') //入水口_雙核泵 ON tankPumpWaterInput_ON() console.log('tankPumpWaterInput_ON') //入水口_雙核泵 ON 等待時間 var time10 = $("input[name=waiting_time_10]").val(); console.log('等待 ' + time10 + ' 秒') var time = new Date(); while ((new Date() - time) < time10 * 1000) { }; //出水口 4、5_雙核泵 ON tankPumpWaterL4L5_ON() console.log('tankPumpWaterL4L5_ON') //出水口 4、5_雙核泵 ON 等待時間 var time11 = $("input[name=waiting_time_11]").val(); console.log('等待 ' + time11 + ' 秒') var time = new Date(); while ((new Date() - time) < time11 * 1000) { }; //出水口 2、3_雙核泵 ON tankPumpWaterL2L3_ON() console.log('tankPumpWaterL2L3_ON') //出水口 2、3_雙核泵 ON 等待時間 var time12 = $("input[name=waiting_time_12]").val(); console.log('等待 ' + time12 + ' 秒') var time = new Date(); while ((new Date() - time) < time12 * 1000) { }; //* 循環次數 var loop6 = $("input[name=waiting_loop_6]").val(); console.log('--- 循環 ' + loop6 + ' 次 ---') for (step = 1; step <= loop6; step++) { // 真空吸料機 ON tankVacuum_ON() console.log('tankVacuum_ON') // 吸料時間 var time13 = $("input[name=waiting_time_13]").val(); console.log('等待 ' + time13 + ' 秒') var time = new Date(); while ((new Date() - time) < time13 * 1000) { }; // 真空吸料機 OFF tankVacuum_OFF() console.log('tankVacuum_OFF') // 吸料時間 var time14 = $("input[name=waiting_time_14]").val(); console.log('等待 ' + time14 + ' 秒') var time = new Date(); while ((new Date() - time) < time14 * 1000) { }; }; // 生豆閘門 UP tankSteppingMotor_UP() console.log('tankSteppingMotor_UP') var time = new Date(); while ((new Date() - time) < 3 * 1000) { }; tankSteppingMotor_STOP() console.log('tankSteppingMotor_STOP') // 閘門開啟時間 var time15 = $("input[name=waiting_time_15]").val(); console.log('等待 ' + time15 + ' 秒') var time = new Date(); while ((new Date() - time) < time15 * 1000) { }; // 生豆閘門 DOWN tankSteppingMotor_DOWN() console.log('tankSteppingMotor_DOWN') var time = new Date(); while ((new Date() - time) < 3 * 1000) { }; tankSteppingMotor_STOP() console.log('tankSteppingMotor_STOP') var time20 = $("input[name=waiting_time_20]").val(); console.log('等待 ' + time20 + ' 秒') var time = new Date(); while ((new Date() - time) < time20 * 1000) { }; // 循環次數 var loop5 = $("input[name=waiting_loop_5]").val(); console.log('--- 循環 ' + loop5 + ' 次 ---') for (step = 1; step <= loop5; step++) { // 出料_吸料機 ON outputVacuum_ON() console.log('outputVacuum_ON') // 吸料時間 var time18 = $("input[name=waiting_time_18]").val(); console.log('等待 ' + time18 + ' 秒') var time = new Date(); while ((new Date() - time) < time18 * 1000) { }; // 出料_吸料機 OFF outputVacuum_OFF() console.log('outputVacuum_OFF') // 放料時間 var time19 = $("input[name=waiting_time_19]").val(); console.log('等待 ' + time19 + ' 秒') var time = new Date(); while ((new Date() - time) < time19 * 1000) { }; }; }; </script> <button type="submit" class="btn btn-primary" onclick="tank_CleanWash_OFF_testing()">清洗浮選出入水 OFF</button> <script> function tank_CleanWash_OFF_testing(){ //入水口_雙核泵 OFF tankPumpWaterInput_OFF() console.log('tankPumpWaterInput_OFF') var time = new Date(); while ((new Date() - time) < 1 * 1000) { }; //出水口 4、5_雙核泵 OFF tankPumpWaterL4L5_OFF() console.log('tankPumpWaterL4L5_OFF') var time = new Date(); while ((new Date() - time) < 1 * 1000) { }; //出水口 2、3_雙核泵 OFF tankPumpWaterL2L3_OFF() console.log('tankPumpWaterL2L3_OFF') }; </script> </td> </tr> </table> <br> <h4>攝影機 M5CameraF</h4> <div class="container-fluid"> <div class="row" style="margin-top:10px;"> <div class="col flex"> <div class="col-md-12 row flex" style="text-align:left; margin-top:5px;"> <div class="col-md-12 row flex"> <img src="" id="three" width="90%" height="90%"> </div> </div> <script> // M5 攝影機 //const img = document.querySelector('#one'); const img2 = document.querySelector('#three'); const WS_URL2 = 'ws:///60.250.156.230:8088'; // M5CameraF (有廣角的) //const WS_URL2 = 'ws:///60.250.156.230:8090'; // M5Camera const ws2 = new WebSocket(WS_URL2); let urlObject2; ws2.onopen = () => console.log(`Connected to ${WS_URL2}`); ws2.onmessage = message2 => { const arrayBuffer2 = message2.data; if (urlObject2) { URL.revokeObjectURL(urlObject2); } urlObject2 = URL.createObjectURL(new Blob([arrayBuffer2])); // console.log(urlObject2) img2.src = urlObject2; } </script> </div> </div> </div> <footer class="footer"> <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;"> Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有 <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a> </div> </footer> </body> </html>