| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634 | <!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>
 |