<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Aisky-coffee</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> <script> //relay抓取狀態函數 function Relay(){ $.get('/relay','',function(res){ //console.log(res.relay); if(res.relay == '1'){ $("#relay-status").text('加熱中!(每10秒更新一次)'); }else{ $("#relay-status").text('斷電中!'); }; },'json'); }; //脫皮機抓取狀態函數 function Peeling(){ $.get('/peeling','',function(res){ //console.log(res.peeling); $("#peeling-status").text(res.peeling + ' rpm(每1分鐘更新一次)'); },'json'); }; //控制蝴蝶閥函數 function ButterflyValve(){ //<!--setInterval(Relay,10000);--> var status = "off"; var check = $("input[name=butterfly-valve-on]:checked"); //大於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-number":"1", "command":"butterfly-valve", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ 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') }; //控制抽水馬達函數 function PumpingMotor(){ var status = "off"; var check = $("input[name=pumping-motor-on]:checked"); //大於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-number":"1", "command":"pump", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ 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') }; //控制真空吸料機函數 function SuctionMachine(){ var status = "off"; var check = $("input[name=suction-machine-on]: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-number":"1", "command":"suction-machine", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ 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') }; //控制真空吸料機閥門函數 function SuctionMachineValve(){ var status = "off"; var check = $("input[name=suction-machine-valve-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-11").prop('checked', false); if(!confirm("你確定要開啟真空吸料機閥門嗎?")){ return false; }; }else{ $("#cmn-toggle-11").prop('checked', true); if(!confirm("你確定要關閉真空吸料機閥門嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"suction-machine-valve", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-11").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-11").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //控制脫皮機馬達函數 function PeelingMachine(){ var peeling_data = $("input[name=peeling-data]").val(); if(peeling_data == ''){ $("#cmn-toggle-14").prop('checked', false); alert("請先輸入要運轉的值!"); return false; }else if(Number(peeling_data) < -50 || Number(peeling_data) > 50 || !Number(peeling_data)){ $("#cmn-toggle-14").prop('checked', false); alert("您輸入的值已超過範圍,請重新輸入!"); return false; }; var value = "off"; var check = $("input[name=peeling-machine-on]:checked"); //大於0代表有被選中 if(check.length > 0){ value = "on"; $("#cmn-toggle-14").prop('checked', false); if(!confirm("你確定要開啟脫皮機馬達,運轉速度為" + peeling_data + "rpm嗎?")){ return false; }; }else{ $("#cmn-toggle-14").prop('checked', true); if(!confirm("你確定要關閉脫皮機馬達嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"peeling-machine", "value":value, "volume":peeling_data}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-14").prop('checked', true); setTimeout("alert('開啟成功!')", 500); var timer = setInterval(Peeling,60000); }else if(res == 'off'){ $("#cmn-toggle-14").prop('checked', false); setTimeout("alert('關閉成功!')", 500); clearInterval(timer); $("#peeling-status").text(''); }else{ alert(res); }; }, 'text') }; //改變脫皮機rpm函數 function ChangePeeling(){ var peeling_data = $("input[name=peeling-data]").val(); if(!confirm("你確定要更改轉速為" + peeling_data + "嗎?")){ return false; }; var data = {"tank-number":"1", "command":"peeling-machine", "value":"on", "volume":peeling_data}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ alert('更改成功'); }else{ alert(res); }; }, 'text'); }; //控制攪拌函數 function Stir(){ var stir_data = $("input[name=stir-data]").val(); if(stir_data == ''){ $("#cmn-toggle-17").prop('checked', false); alert("請先輸入要運轉的數值!"); return false; }else if(Number(stir_data) < 0 || Number(stir_data) > 50){ $("#cmn-toggle-17").prop('checked', false); alert("您輸入的值已超過範圍,請重新輸入!"); return false; }; var value = 'off'; var check = $("input[name=stir-on]:checked"); if(check.length > 0){ value = 'on'; $("#cmn-toggle-17").prop('checked', false); if(!confirm("你確定要開啟攪拌機馬達,運轉速度為" + stir_data + "rpm嗎?")){ return false; }; }else{ $("#cmn-toggle-17").prop('checked', true); if(!confirm("你確定要關閉攪拌機馬達嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":'stir', "value":value, "volume":stir_data} $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-17").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-17").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //改變攪拌機rpm函數 function ChangeStir(){ var stir_data = $("input[name=stir-data]").val(); if(!confirm("你確定要更改轉速為" + stir_data + "嗎?")){ return false; }; var data = {"tank-number":"1", "command":"stir", "value":"on", "volume":stir_data}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ alert('更改成功'); }else{ alert(res); }; }, 'text'); }; //恆溫控制函數 function TemSubmit(){ var tem_data = $("input[name=tem-data]").val(); if(tem_data == ''){ alert('請先填入要恆溫的數值!'); return false; }else{ if(!confirm('你填入的溫度為' + tem_data + '度,確定送出?')){ return false; }; }; var data = {"command":"temp","value":tem_data}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ alert('送出成功!'); setInterval(Relay,10000); }else{ alert(res); }; }, 'text') }; //Valve1函數 function Valve1(){ var status = "off"; var check = $("input[name=valve1-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-20").prop('checked', false); if(!confirm("你確定要開啟Valve1嗎?")){ return false; }; }else{ $("#cmn-toggle-20").prop('checked', true); if(!confirm("你確定要關閉Valve1嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"valve1", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-20").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-20").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //Valve2函數 function Valve2(){ var status = "off"; var check = $("input[name=valve2-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-23").prop('checked', false); if(!confirm("你確定要開啟Valve2嗎?")){ return false; }; }else{ $("#cmn-toggle-23").prop('checked', true); if(!confirm("你確定要關閉Valve2嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"valve2", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-23").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-23").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //Pump1函數 function Pump1(){ var status = "off"; var check = $("input[name=pump1-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-26").prop('checked', false); if(!confirm("你確定要開啟Pump1嗎?")){ return false; }; }else{ $("#cmn-toggle-26").prop('checked', true); if(!confirm("你確定要關閉Pump1嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"pump1", "value":status}; $.post('/mqtt/{{params.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') }; //Pump2函數 function Pump2(){ var status = "off"; var check = $("input[name=pump2-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-29").prop('checked', false); if(!confirm("你確定要開啟Pump2嗎?")){ return false; }; }else{ $("#cmn-toggle-29").prop('checked', true); if(!confirm("你確定要關閉Pump2嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"pump2", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-29").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-29").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //Pump3函數 function Pump3(){ var status = "off"; var check = $("input[name=pump3-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-32").prop('checked', false); if(!confirm("你確定要開啟Pump3嗎?")){ return false; }; }else{ $("#cmn-toggle-32").prop('checked', true); if(!confirm("你確定要關閉Pump3嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"pump3", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-32").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-32").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //鼓風機函數 function Blower(){ var status = "off"; var check = $("input[name=blower-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-35").prop('checked', false); if(!confirm("你確定要開啟鼓風機嗎?")){ return false; }; }else{ $("#cmn-toggle-35").prop('checked', true); if(!confirm("你確定要關閉鼓風機嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"blower", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-35").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-35").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //電熱管1函數 function Heater1(){ var status = "off"; var check = $("input[name=heater1-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-38").prop('checked', false); if(!confirm("你確定要開啟電熱管1嗎?")){ return false; }; }else{ $("#cmn-toggle-38").prop('checked', true); if(!confirm("你確定要關閉電熱管1嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"heater1", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-38").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-38").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; //電熱管2函數 function Heater2(){ var status = "off"; var check = $("input[name=heater2-on]:checked"); //大於0代表有被選中 if(check.length > 0){ status = "on"; $("#cmn-toggle-41").prop('checked', false); if(!confirm("你確定要開啟電熱管2嗎?")){ return false; }; }else{ $("#cmn-toggle-41").prop('checked', true); if(!confirm("你確定要關閉電熱管2嗎?")){ return false; }; }; var data = {"tank-number":"1", "command":"heater2", "value":status}; $.post('/mqtt/{{params.tid}}', data, function(res){ if(res == 'on'){ $("#cmn-toggle-41").prop('checked', true); setTimeout("alert('開啟成功!')", 500); }else if(res == 'off'){ $("#cmn-toggle-41").prop('checked', false); setTimeout("alert('關閉成功!')", 500); }else{ alert(res); }; }, 'text') }; </script> </head> <body> <nav class="fixed-top"> <nav class="navbar navbar-expand-md nav-top justify-content-center"> <div> <span class="website_title">發酵槽{{params.tid}}</span> </div> </nav> <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="/">首頁</a> </li> <li class="nav-item"> <a class="nav-link" href="#">關於我們</a> </li> <li class="nav-item"> <a class="nav-link" href="#">資訊</a> </li> <li class="nav-item"> <a class="nav-link" href="#">聯絡方法</a> </li> <li class="nav-item"> <a class="nav-link" href="/cargo_list">咖啡貨櫃</a> </li> <li class="nav-item"> <a class="nav-link" href="/video">影像串流</a> </li> <li class="li-block"></li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a> </li> <li class="nav-item"> <a class="nav-link" href="/logout">Logout</a> </li> </ul> </div> </nav> </nav> <div class="main-page"> <div class="text-center"> <h1 style="margin-bottom:50px;">制動器狀態</h1> </div> <form method="" action=""> <div class="container-fluid row"> <div class="col-2"></div> <!--<div class="col-4">--> <div class="col-md-4 col-sm-12"> <table border="1px solid black" style="font-size:20px;"> <tr> <td style="color:red;">Valve</td> <td> <span style="color:#C0C0C0;">off</span> <span style="color:#008CBA;">on</span> </td> </tr> <tr> <td>1.蝴蝶閥</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"> <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="butterfly-valve-on" value="ON" onclick="ButterflyValve()"> <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> </tr> <tr> <td>2.抽水馬達</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"> <input id="cmn-toggle-05" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="pumping-motor-on" value="ON" onclick="PumpingMotor()"> <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> </tr> <tr> <td>3.真空吸料機</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"> <input id="cmn-toggle-08" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="suction-machine-on" value="ON" onclick="SuctionMachine()"> <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> </tr> <tr> <td>4.真空吸料機閥門</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"> <input id="cmn-toggle-11" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="suction-machine-valve-on" value="ON" onclick="SuctionMachineValve()"> <label for="cmn-toggle-11"></label> </div> <div class="switch"> <input id="cmn-toggle-12" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-12" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td>5.Valve1</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"> <input id="cmn-toggle-20" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="valve1-on" value="ON" onclick="Valve1()"> <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> </tr> <tr> <td>6.Valve2</td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-22" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-22"></label> </div> <div class="switch text-center"> <input id="cmn-toggle-23" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="valve2-on" value="ON" onclick="Valve2()"> <label for="cmn-toggle-23"></label> </div> <div class="switch"> <input id="cmn-toggle-24" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-24" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td>7.Pump1</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"> <input id="cmn-toggle-26" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="pump1-on" value="ON" onclick="Pump1()"> <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>8.Pump2</td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-28" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-28"></label> </div> <div class="switch text-center"> <input id="cmn-toggle-29" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="pump2-on" value="ON" onclick="Pump2()"> <label for="cmn-toggle-29"></label> </div> <div class="switch"> <input id="cmn-toggle-30" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-30" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td>9.Pump3</td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-31" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-31"></label> </div> <div class="switch text-center"> <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="pump3-on" value="ON" onclick="Pump3()"> <label for="cmn-toggle-32"></label> </div> <div class="switch"> <input id="cmn-toggle-33" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-33" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> </table> </div> <!--<div>--> <!--<!–<div class="switch_div">–>--> <!--<!–<span>蝴蝶閥</span>–>--> <!--<!–<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">–>--> <!--<!–<input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="butterfly-valve-on" value="ON" onclick="ButterflyValve()">–>--> <!--<!–<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>–>--> <!--</div>--> <!--<div>--> <!--攪拌機馬達:--> <!--<input name="" type="text" placeholder="請輸入你要運轉的趴數(1~100)" style="width:225px;"> %--> <!--<input name="" type="button" value="送出">--> <!--</div>--> <div class="col-md-4 col-sm-12"> <table border="1px solid black" style="width:500px;height:300px;font-size:20px;"> <tr> <td>10.鼓風機</td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-34" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-34"></label> </div> <div class="switch text-center"> <input id="cmn-toggle-35" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="blower-on" value="ON" onclick="Blower()"> <label for="cmn-toggle-35"></label> </div> <div class="switch"> <input id="cmn-toggle-36" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-36" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td>11.電熱管1</td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-37" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-37"></label> </div> <div class="switch text-center"> <input id="cmn-toggle-38" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="heater1-on" value="ON" onclick="Heater1()"> <label for="cmn-toggle-38"></label> </div> <div class="switch"> <input id="cmn-toggle-39" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-39" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td>12.電熱管2</td> <td> <div class="switch_div"> <div class="switch"> <input id="cmn-toggle-40" class="cmn-toggle cmn-toggle-round" type="checkbox"> <label for="cmn-toggle-40"></label> </div> <div class="switch text-center"> <input id="cmn-toggle-41" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="heater2-on" value="ON" onclick="Heater2()"> <label for="cmn-toggle-41"></label> </div> <div class="switch"> <input id="cmn-toggle-42" class="cmn-toggle cmn-toggle-yes-no" type="checkbox"> <label for="cmn-toggle-42" data-on="Yes" data-off="No"></label> </div> </div> </td> </tr> <tr> <td>10.脫皮機馬達</td> <td> <input name="peeling-data" type="text" placeholder="請輸入你要運轉的rpm(-50~50)" style="width:280px;"> rpm <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"> <input id="cmn-toggle-14" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="peeling-machine-on" value="ON" onclick="PeelingMachine()"> <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> 狀態: <span id="peeling-status" style="color:red;"></span> <br> <input type="button" value="送出(需改變rpm值時請點擊)" name="change-peeling" onclick="ChangePeeling()"> </td> </tr> <tr> <td>11.攪拌機馬達:</td> <td> <input name="stir-data" type="text" placeholder="請輸入你要運轉的rpm(0~50)" style="width:280px;"> rpm <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"> <input id="cmn-toggle-17" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" name="stir-on" value="ON" onclick="Stir()"> <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> <input type="button" value="送出(需改變rpm值時請點擊)" name="change-stir" onclick="ChangeStir()"> <!--<input name="stir-on" type="button" value="開啟" onclick="Stir('on')">--> <!--<input name="stir-off" type="button" value="關閉" onclick="Stir('off')">--> </td> </tr> <tr> <td>12.恆溫的目標溫度:</td> <td> <input name="tem-data" type="text" placeholder="請輸入你要設定的目標溫度" style="width:280px;"> ℃ <input name="tem-submit" type="button" value="送出" onclick="TemSubmit()"> Relay狀態: <span id="relay-status" style="color:red;"></span> </td> </tr> </table> </div> </div> </form> </div> </body> </html>