fatwolf
/
NEW_coffee_project


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888
							<!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="10" />每 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>
    <!--
    <script src="../static/js/sign_in.js"></script>

    <link rel="stylesheet" href="../static/css/sign_in.css">
    -->
    <script>
        $(document).ready(function(){
            $("#coffee_title_pc").text('乾燥自動化');
            $("#coffee_title_phone").text('乾燥自動化');
            // 桶槽入料顯示
            dry_input_status_N = ['{{DI1}}', '{{DI2}}']
            for (let i=0; i<dry_input_status_N.length; i++) {
                // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                // console.log(i+1 + ' : '+ dry_input_status_N[i])
                // 1 : F_InputtingBean
                // 2 : F_Waiting
                if (dry_input_status_N[i] == 'DI_InputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                } else if (dry_input_status_N[i] == 'DI_Waiting') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                } else if (dry_input_status_N[i] == 'DI_OutputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                } else if (dry_input_status_N[i] == 'DI_Stand_by') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
            }
            // 桶槽狀態顯示
            dry_tank_status_N = ['{{D1}}', '{{D2}}', '{{D3}}', '{{D4}}', '{{D5}}', '{{D6}}',
                                 '{{D7}}', '{{D8}}', '{{D9}}', '{{D10}}', '{{D11}}', '{{D12}}']
            for (let i=0; i<dry_tank_status_N.length; i++) {
                // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                // console.log(i+1 + ' : '+ dry_tank_status_N[i])
                // 1 : D_InputtingBean
                // 2 : D_Waiting
                if (dry_tank_status_N[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                } else if (dry_tank_status_N[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                } else if (dry_tank_status_N[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                } else if (dry_tank_status_N[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                } else if (dry_tank_status_N[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                } else if (dry_tank_status_N[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                } else if (dry_input_status_N[i] == 'D_Stand_by') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
            }
            // 桶槽出料顯示
            dry_output_status_N = ['{{DO1}}', '{{DO2}}']
                        for (let i=0; i<dry_output_status_N.length; i++) {
                // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                // console.log(i+1 + ' : '+ dry_output_status[i])
                // 1 : D_InputtingBean
                // 2 : D_Waiting
                if (dry_output_status_N[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")

                } else if (dry_output_status_N[i] == 'DO_Waiting') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")

                } else if (dry_output_status_N[i] == 'DO_OutputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
                } else if (dry_output_status_N[i] == 'DO_Stand_by') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 待命")

                } else {
                    console.log('pass')
                }

            }
            loading_D_status()
            loading_D()

            var data
            var dry_status_interval

            // css
            // height: 185px; 取代成 height: 210px;
            // DI2 DO2  top: 620px; 取代成 top: 645px;
        });

        function loading_D_status(){
            // console.log('dry_input_status_N: ' + dry_input_status_N)
            for (let i=0; i<dry_input_status_N.length; i++) {
                // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                // console.log(i+1 + ' : '+ dry_input_status_N[i])
                // 1 : F_InputtingBean
                // 2 : F_Waiting
                if (dry_input_status_N[i] == 'DI_InputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                } else if (dry_input_status_N[i] == 'DI_Waiting') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                } else if (dry_input_status_N[i] == 'DI_OutputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                } else {
                    console.log('pass')
                }
            }
            // console.log('dry_tank_status_N: ' + dry_tank_status_N)
            for (let i=0; i<dry_tank_status_N.length; i++) {
                // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                // console.log(i+1 + ' : '+ dry_tank_status_N[i])
                // 1 : D_InputtingBean
                // 2 : D_Waiting
                if (dry_tank_status_N[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                } else if (dry_tank_status_N[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                } else if (dry_tank_status_N[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                } else if (dry_tank_status_N[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                } else if (dry_tank_status_N[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                } else if (dry_tank_status_N[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                } else {
                    console.log('pass')
                }
            }
            // console.log('dry_output_status_N: ' + dry_output_status_N)
            for (let i=0; i<dry_output_status_N.length; i++) {
                // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                // console.log(i+1 + ' : '+ dry_output_status[i])
                // 1 : D_InputtingBean
                // 2 : D_Waiting
                if (dry_output_status_N[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")

                } else if (dry_output_status_N[i] == 'DO_Waiting') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")

                } else if (dry_output_status_N[i] == 'DO_OutputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
                } else if (dry_output_status_N[i] == 'DO_Stand_by') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 待命")

                } else {
                    console.log('pass')
                }

            }
        }

        function loading_D(){
            $.get('/loading/DI1', '', function (res) {
                $("#actuator_00").text(res.input_vacuum);
                $("#sensor_00").text(res.input_UltraSonic);
            }, 'json');
            $.get('/loading/D2', '', function (res) {
                $("#actuator_1").text(res.tank_vacuum);
                $("#actuator_2").text(res.tank_threewayvalve);
                $("#actuator_3").text(res.tank_diskvalve);
                $("#actuator_4").text(res.tank_solenoid_disinfect);
                $("#actuator_5").text(res.tank_solenoid_water);
                $("#actuator_6").text(res.tank_motor);
                $("#actuator_7").text(res.tank_blower);
                $("#actuator_8").text(res.tank_heater1);
                $("#actuator_9").text(res.tank_heater2);
                $("#actuator_10").text(res.tank_temp1_enable);
                $("#actuator_11").text(res.tank_temp1);
                $("#sensor_1").text(res.UltraSonic);
                $("#sensor_2").text(res.SHT11_Temp);
                $("#sensor_3").text(res.SHT11_Humidity);
                $("#sensor_4").text(res.soil_Temp);
                $("#sensor_5").text(res.soil_Humidity);
                $("#sensor_6").text(res.soil_EC);
                $("#sensor_7").text(res.PA);
            }, 'json');
            $.get('/loading/DO1', '', function (res) {
                $("#actuator_99").text(res.output_vacuum);
                $("#sensor_99").text(res.output_UltraSonic);
            }, 'json');
        };

        function getting_parameters_D(){
            var Dry_Input_bean_height = $("input[name=Dry_Input_bean_height]").val();
            var Dry_Input_vacuumON_time = $("input[name=Dry_Input_vacuumON_time]").val();
            var Dry_Input_vacuumOFF_time = $("input[name=Dry_Input_vacuumOFF_time]").val();
            var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
            var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
            var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
            var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
            var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
            var Dry_Tank_drying_EC = $("input[name=Dry_Tank_drying_EC]").val();
            var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
            var Dry_Tank_TempWeight_SHT11 = $("input[name=Dry_Tank_TempWeight_SHT11]").val();
            var Dry_Tank_TempWeight_soil = $("input[name=Dry_Tank_TempWeight_soil]").val();
            var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
            var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
            var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
            var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
            var Dry_Tank_Disinfect_time = $("input[name=Dry_Tank_Disinfect_time]").val();

            data = {"command": "Dry_auto_parameter",
                    "Dry_Input_bean_height": Dry_Input_bean_height,
                    "Dry_Input_vacuumON_time": Dry_Input_vacuumON_time,
                    "Dry_Input_vacuumOFF_time": Dry_Input_vacuumOFF_time,
                    "Dry_Tank_bean_height": Dry_Tank_bean_height,
                    "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,
                    "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,
                    "Dry_Tank_drying_temp": Dry_Tank_drying_temp,
                    "Dry_Tank_drying_time": Dry_Tank_drying_time,
                    "Dry_Tank_drying_EC": Dry_Tank_drying_EC,
                    "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,
                    "Dry_Tank_TempWeight_SHT11": Dry_Tank_TempWeight_SHT11,
                    "Dry_Tank_TempWeight_soil": Dry_Tank_TempWeight_soil,
                    "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,
                    "Dry_Output_bean_height": Dry_Output_bean_height,
                    "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
                    "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time,
                    "Dry_Tank_Disinfect_time": Dry_Tank_Disinfect_time
                    };
        }
    </script>

    <style>
        .D_status_css {
            font-weight: bold;
            text-align: center;
        }
        .DryContainer_position {
            position: absolute;
            top: 95px;
            left: 53px;
        }
        .D1_position {
            width: 110px;
        }
        .D2_position {
            width: 110px;
        }
        .D3_position {
            width: 110px;
        }
        .D4_position {
            width: 110px;
        }
        .D5_position {
            width: 110px;
        }
        .D6_position {
            width: 110px;
        }
        .D7_position {
            width: 110px;
        }
        .D8_position {
            width: 110px;
        }
        .D9_position {
            width: 110px;
        }
        .D10_position {
            width: 110px;
        }
        .D11_position {
            width: 110px;
        }
        .D12_position {
            width: 110px;
        }

        .DI1_position {
            width: 110px;
        }

        .DI2_position {
            width: 110px;
        }

        .DO1_position {
            width: 110px;
        }

        .DO2_position {
            width: 110px;
        }
        .footer{
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }
        .input-text {
            height: 25px;
            width: 40px;
            text-align: center;
            margin-left: 2px;
            margin-right: 5px;
        }
    </style>

</head>

<body>
    <div id="wrapper">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>

        <div>
            <div style="text-align: center;">
                <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">
                    <u>狀態判斷_停止</u></button>

                <script>
                    function dry_auto_status_stop(){
                        // clearInterval(loading_D_interval)
                        clearInterval(dry_status_interval)
                        console.log("------- 狀態自動化判斷 停止 -------")
                    }
                </script>

                <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">
                    <u>[測試] 乾燥自動化_狀態判斷</u></button>

                <script>
                    var loading_D_interval
                    // var loading_D_interval
                    var dry_status_process = 0;

                    function dry_auto_status_testing(){
                        console.log("------- 狀態自動化判斷 開始 -------")
                        // 取得桶槽狀態
                        // loading_D_interval = setInterval(loading_D, 10*1000)
                        // 取得目前乾燥參數
                        getting_parameters_D()

                        // 更新桶槽狀態
                        dry_status_interval = setInterval(dry_auto_status, 10*1000);

                        function dry_auto_status(){
                            if (dry_status_process == 1) { return };

                            dry_status_process = 1;
                            $.get('dry_auto_status', data, function (res){
                                DI1 = res.Dry_Input_1
                                D1 = res.Dry_Tank_1
                                D2 = res.Dry_Tank_2
                                D3 = res.Dry_Tank_3
                                D4 = res.Dry_Tank_4
                                D5 = res.Dry_Tank_5
                                D6 = res.Dry_Tank_6
                                DO1 = res.Dry_Output_1
                                console.log('DI1: ' + DI1)
                                console.log('D1: ' + D1)
                                console.log('D2: ' + D2)
                                console.log('D3: ' + D3)
                                console.log('D4: ' + D4)
                                console.log('D5: ' + D5)
                                console.log('D6: ' + D6)
                                console.log('DO1: ' + DO1)

                                // ----- 乾燥入料 DI1 狀態 --------------------------------------------------------------
                                dry_input_status_N = [res.Dry_Input_1]
                                // ----- 乾燥桶槽 D1~D6 狀態 --------------------------------------------------------------
                                dry_tank_status_N = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
                                // ----- 乾燥出料 DO1 狀態 --------------------------------------------------------------
                                dry_output_status_N = [res.Dry_Output_1]
                                loading_D_status()
                                dry_status_process = 0;
                            }, 'json');

                        };

                    };
                </script>
            </div>

            <!-- 乾燥貨櫃 狀態表格 -->
            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 乾燥槽入料儲豆槽 DI1 -->
                                    <div id="DI1" tabindex="0" class="DI1_position" role="button" style="text-align: center;">
                                        <span id="DI1_status" class="D_status_css">DI1 status</span>
                                        <div id="DI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 乾燥槽 D1 -->
                                    <div id="D1" tabindex="0" class="D1_position" role="button">
                                        <span id="D1_status" class="D_status_css">D1 status</span>
                                        <!-- D1 狀態點點-->
                                        <div id="D1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D2 -->
                                    <div id="D2" tabindex="0" class="D2_position" role="button">
                                        <span id="D2_status" class="D_status_css">D2 status</span>
                                        <div id="D2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D3 -->
                                    <div id="D3" tabindex="0" class="D3_position" role="button">
                                        <span id="D3_status" class="D_status_css">D3 status</span>
                                        <div id="D3_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D4 -->
                                    <div id="D4" tabindex="0" class="D4_position" role="button">
                                        <span id="D4_status" class="D_status_css">D4 status</span>
                                        <div id="D4_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D5 -->
                                    <div id="D5" tabindex="0" class="D5_position" role="button">
                                        <span id="D5_status" class="D_status_css">D5 status</span>
                                        <div id="D5_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D6 -->
                                    <div id="D6" tabindex="0" class="D6_position" role="button">
                                        <span id="D6_status" class="D_status_css">D6 status</span>
                                        <div id="D6_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                         <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 乾燥槽出料儲豆槽 DO1 -->
                                    <div id="DO1" tabindex="0" class="DO1_position" role="button">
                                        <span id="DO1_status" class="D_status_css">DO1 status</span>
                                        <div id="DO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        入料儲豆槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        乾燥桶槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        出料儲豆槽
                    </td>
                </tr>

                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 乾燥槽入料儲豆槽 DI2 -->
                                    <div id="DI2" tabindex="0" class="DI2_position" role="button">
                                        <span id="DI2_status" class="D_status_css">DI2 status</span>
                                        <div id="DI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 乾燥槽 D7 -->
                                    <div id="D7" tabindex="0" class="D7_position" role="button" style="vertical-align: bottom;">
                                        <span id="D7_status" class="D_status_css">D7 status</span>
                                        <div id="D7_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D8 -->
                                    <div id="D8" tabindex="0" class="D8_position" role="button">
                                        <span id="D8_status" class="D_status_css">D8 status</span>
                                        <div id="D8_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D9 -->
                                    <div id="D9" tabindex="0" class="D9_position" role="button">
                                        <span id="D9_status" class="D_status_css">D9 status</span>
                                        <div id="D9_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D10 -->
                                    <div id="D10" tabindex="0" class="D10_position" role="button">
                                        <span id="D10_status" class="D_status_css">D10 status</span>
                                        <div id="D10_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D11 -->
                                    <div id="D11" tabindex="0" class="D11_position" role="button">
                                        <span id="D11_status" class="D_status_css">D11 status</span>
                                        <div id="D11_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                                <td>
                                    <!-- 乾燥槽 D12 -->
                                    <div id="D12" tabindex="0" class="D12_position" role="button">
                                        <span id="D12_status" class="D_status_css">D12 status</span>
                                        <div id="D12_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <!-- 乾燥槽出料儲豆槽 DO2 -->
                                    <div id="DO2" tabindex="0" class="DO2_position" role="button">
                                        <span id="DO2_status" class="D_status_css">DO2 status</span>
                                        <div id="DO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <!-- 乾燥貨櫃 致動器狀態 感測器數值 -->
            <div style="text-align: center;">
                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
                    <tr>
                        <td>
                            入料<br>Vacuum
                        </td>
                        <td>
                            桶槽<br>
                            Vacuum
                        </td>
                        <td>
                            入料<br>三通閥
                        </td>
                        <td>
                            蝴蝶閥
                        </td>
                        <td>
                            消毒<br>電磁閥
                        </td>
                        <td>
                            排水<br>電磁閥
                        </td>
                        <td>
                            馬達
                        </td>
                        <td>
                            鼓風機
                        </td>
                        <td>
                            加熱器<br>1
                        </td>
                        <td>
                            加熱器<br>2
                        </td>
                        <td>
                            溫控開關
                        </td>
                        <td>
                            設定溫度
                        </td>
                        <td>
                            出料<br>Vacuum
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="actuator_00">x</span>
                        </td>
                        <td>
                            <span id="actuator_1">x</span>
                        </td>
                        <td>
                            <span id="actuator_2">x</span>
                        </td>
                        <td>
                            <span id="actuator_3">x</span>
                        </td>
                        <td>
                            <span id="actuator_4">x</span>
                        </td>
                        <td>
                            <span id="actuator_5">x</span>
                        </td>
                        <td>
                            <span id="actuator_6">x</span>
                        </td>
                        <td>
                            <span id="actuator_7">x</span>
                        </td>
                        <td>
                            <span id="actuator_8">x</span>
                        </td>
                        <td>
                            <span id="actuator_9">x</span>
                        </td>
                        <td>
                            <span id="actuator_10">x</span>
                        </td>
                        <td>
                            <span id="actuator_11">x</span>
                        </td>
                        <td>
                            <span id="actuator_99">x</span>
                        </td>

                    </tr>

                </table>

                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
                    <tr>
                        <td>
                            入料<br>高度
                        </td>
                        <td>
                            桶內<br>高度
                        </td>
                        <td>
                            SHT11<br>溫度
                        </td>
                        <td>
                            SHT11<br>濕度
                        </td>
                        <td>
                            Soil<br>溫度
                        </td>
                        <td>
                            Soil<br>濕度
                        </td>
                        <td>
                            Soil<br>EC
                        </td>
                        <td>
                            PA
                        </td>
                        <td>
                            出料<br>高度
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="sensor_00">{{UltraSonic_input}}</span>
                        </td>
                        <td>
                            <span id="sensor_1">{{UltraSonic_tank}}</span>
                        </td>
                        <td>
                            <span id="sensor_2">{{sht11_Temp}}</span>
                        </td>
                        <td>
                            <span id="sensor_3">{{sht11_Humidity}}</span>
                        </td>
                        <td>
                            <span id="sensor_4">{{Soil_Temp}}</span>
                        </td>
                        <td>
                            <span id="sensor_5">{{Soil_Humidity}}</span>
                        </td>
                        <td>
                            <span id="sensor_6">{{Soil_EC}}</span>
                        </td>
                        <td>
                            <span id="sensor_7">{{PA}}</span>
                        </td>
                        <td>
                            <span id="sensor_99">{{UltraSonic_output}}</span>
                        </td>
                    </tr>
                </table>
            </div>


            <!-- 乾燥貨櫃 參數設定 -->
            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                <tr>
                    <td>
                        入料儲豆槽<br>
                        參數設定
                    </td>
                    <td>
                        桶槽<br>
                        參數設定
                    </td>
                    <td>
                        出料儲豆槽<br>
                        參數設定
                    </td>
                </tr>
                <tr>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        生豆高度
                        <input name="Dry_Input_bean_height" type="text" class="input-text" value="5">公分<br>
                        吸料時間
                        <input name="Dry_Input_vacuumON_time" type="text" class="input-text" value="5">秒<br>
                        放料時間
                        <input name="Dry_Input_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                    </td>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        生豆高度
                        <input name="Dry_Tank_bean_height" type="text" class="input-text" value="5">公分<br>
                        吸料時間
                        <input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="10">秒,
                        放料時間
                        <input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                        馬達轉速
                        <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
                        ----- 溫度權重設定 ----------------------------------------------<br>
                        [SHT11]桶內溫度×權重
                        <input name="Dry_Tank_TempWeight_SHT11" type="text" class="input-text" value="0.5">
                        +
                        [soil]生豆溫度×權重
                        <input name="Dry_Tank_TempWeight_soil" type="text" class="input-text" value="0.5">
                        <br>
                        ----- 乾燥完成條件 (輸入 0 代表不設定) ------------------------<br>
                        指定溫度
                        <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="40">℃
                        , 指定濕度
                        <input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="30">%
                        , 持溫時間
                        <input name="Dry_Tank_drying_time" type="text" class="input-text" value="60">秒<br>
                        <del>指定 EC</del>
                        <input name="Dry_Tank_drying_EC" type="text" class="input-text" value="300">,
                        消毒開啟
                        <input name="Dry_Tank_Disinfect_time" class="input-text" type="text" value="10">秒
                    </td>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        生豆高度
                        <input name="Dry_Output_bean_height" type="text" class="input-text" value="5">公分<br>
                        吸料時間
                        <input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>
                        放料時間
                        <input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>
                    </td>
                </tr>
            </table>

            <center><button style="margin: 15px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto()">
                [測試] MQTT + 每 60 秒更新貨櫃狀態</button></center>
            <script>
                function dry_auto(){
                    getting_parameters_D()

                    $.post('/mqtt/101', data, function (res) {
                        console.log('data: ', data)
                        console.log('res: ', res)
                    }, 'text')

                    var dry_interval = setInterval(testing_D_auto, 30*1000)
                }
            </script>

            <center><button style="margin: 15px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="testing_D_auto()">
                [測試] 乾燥貨櫃狀態</button></center>

            <script>
                function testing_D_auto(){
                    $.get('/dry_auto', '', function (res) {
                        console.log('DI1: ' + res.Dry_Input_1)
                        console.log('D1: ' + res.Dry_Tank_1)
                        console.log('D2: ' + res.Dry_Tank_2)
                        console.log('D3: ' + res.Dry_Tank_3)
                        console.log('D4: ' + res.Dry_Tank_4)
                        console.log('D5: ' + res.Dry_Tank_5)
                        console.log('D6: ' + res.Dry_Tank_6)
                        console.log('DO1: ' + res.Dry_Output_1)

                        // ----- 乾燥入料 DI1 狀態 --------------------------------------------------------------
                        dry_input_status_N = [res.Dry_Input_1]
                        // ----- 乾燥桶槽 D1~D6 狀態 --------------------------------------------------------------
                        dry_tank_status_N = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
                        // ----- 乾燥出料 DO1 狀態 --------------------------------------------------------------
                        dry_output_status_N = [res.Dry_Output_1]
                        loading_D_status()

                    }, 'json');
                    // console.log("-- 自動化程式 end --")
                }
            </script>


        </div>


        <br>
        <br>
        <br>

    </div>

</body>

</html>