coffeeproject20230512/coffeeproject/app/templates/board_loader-1.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block script %}
    <script src="../static/js/blockly_compressed.js"></script>
    <script src="../static/js/blocks_compressed.js"></script>
    <script src="../static/js/en.js"></script>
    <script>
        var status = '{{status}}';
        var username = '{{username}}';
        $(document).ready(function(){
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
            });
    </script>
    
    <script language="JavaScript">
        // TODO 要考慮 初始生成幾個後, 在定義 new_condition_i = (現有的)+1, new_condition_i 是生成總條件的總條件數
        var new_condition_i             // 總條件數
        var cond_add_child_i            // 子條件數
        var act_add_child_i             // 子物件數
        
        // 乾燥桶槽 積木條件狀態
        const COND1 = {{BCD.cond|tojson}};
        // console.log("COND1: " + COND1);

        const pin_data_relay = ['', '{{pin_data.R1}}','{{pin_data.R2}}','{{pin_data.R3}}','{{pin_data.R4}}',
                                    '{{pin_data.R5}}','{{pin_data.R6}}','{{pin_data.R7}}','{{pin_data.R8}}','{{pin_data.R9}}',
                                    '{{pin_data.R10}}','{{pin_data.R11}}','{{pin_data.R12}}','{{pin_data.R13}}','{{pin_data.R14}}',
                                    '{{pin_data.R15}}','{{pin_data.R16}}','{{pin_data.R17}}','{{pin_data.R18}}','{{pin_data.R19}}','{{pin_data.R20}}'
                                ]
        const pin_data_sensor = ['', '{{pin_data.M1}}','{{pin_data.M2}}','{{pin_data.M3}}','{{pin_data.M4}}',
                                    '{{pin_data.M5}}','{{pin_data.M6}}','{{pin_data.M7}}','{{pin_data.M8}}','{{pin_data.M9}}',
                                    '{{pin_data.M10}}','{{pin_data.M11}}','{{pin_data.M12}}','{{pin_data.M13}}','{{pin_data.M14}}',
                                    '{{pin_data.M15}}','{{pin_data.M16}}','{{pin_data.M17}}','{{pin_data.M18}}','{{pin_data.M19}}'
                                ]
        const pin_data_sensorHz = ['', '{{pin_data.M1_Hz}}','{{pin_data.M2_Hz}}','{{pin_data.M3_Hz}}','{{pin_data.M4_Hz}}',
                                    '{{pin_data.M5_Hz}}','{{pin_data.M6_Hz}}','{{pin_data.M7_Hz}}','{{pin_data.M8_Hz}}','{{pin_data.M9_Hz}}',
                                    '{{pin_data.M10_Hz}}','{{pin_data.M11_Hz}}','{{pin_data.M12_Hz}}','{{pin_data.M13_Hz}}','{{pin_data.M14_Hz}}',
                                    '{{pin_data.M15_Hz}}','{{pin_data.M16_Hz}}','{{pin_data.M17_Hz}}','{{pin_data.M18_Hz}}','{{pin_data.M19_Hz}}'
                                ]
        console.log("pin_data_sensorHz: " + pin_data_sensorHz)
        const Tank_ID = '{{TankID}}';
        
        var pin_data_sensor_option = '';        // 腳位配置-sensor 匯出整理成 下拉式選單的選項
        var pin_data_relay_option = '';         // 腳位配置-relay 匯出整理成 下拉式選單的選項
        var set_Hz_sensor = '';

        $(function(){
            // 網頁 title
            $("#coffee_title_pc").text("板子燒錄程式");
            $("#coffee_title_phone").text("板子燒錄程式");
            // 使用者權限判斷
            // $('.select-input').prop('disabled', false);

            const pin_data_ethernet = '{{pin_data.ethernet}}';
            if (pin_data_ethernet == 'ON') {
                $("#select_ethernet_1").val('ON');
            }
            const pin_data_wifi = '{{pin_data.wifi}}';
            if (pin_data_wifi == 'ON') {
                $("#select_wifi_1").val('ON');
            }
            const pin_data_zigbee = '{{pin_data.zigbee}}';
            if (pin_data_zigbee == 'ON') {
                $("#select_zigbee_1").val('ON');
            }
            
            // tid 燒錄桶槽初始判斷
              if (Tank_ID.substring(0,2) === 'DI') {
                $("#prog_container").val('DI');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,2) === 'DO') {
                $("#prog_container").val('DO');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,1) === 'D') {
                $("#prog_container").val('D');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,2) === 'FI') {
                $("#prog_container").val('FI');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,2) === 'FO') {
                $("#prog_container").val('FO');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,1) === 'F') {
                $("#prog_container").val('F');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,2) === 'CI') {
                $("#prog_container").val('CI');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,1) === 'C') {
                $("#prog_container").val('C');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,1) === 'R') {
                $("#prog_container").val('R');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,2) === 'SO') {
                $("#prog_container").val('SO');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,1) === 'S') {
                $("#prog_container").val('S');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,2) === 'PO') {
                $("#prog_container").val('PO');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else if (Tank_ID.substring(0,1) === 'P') {
                $("#prog_container").val('P');
                renew_tank();
                $("#prog_tank").val(Tank_ID);
            } else {
                $("#prog_container").val('');
                $("#prog_tank").val('');
            }
            
            // 0531 0526 tttest start
            // 腳位配置-relay 匯出整理成 下拉式選單的選項
            pin_data_relay_option = '<option value=""></option>';
            for (let s_o = 0; s_o < pin_data_sensor.length; s_o++) {
                // console.log("pin_data_sensor[" + s_o + "]: " + pin_data_sensor[s_o]);
                if (pin_data_sensor[s_o] === 'Motor' || pin_data_sensor[s_o] === 'Servo') {
                    pin_data_relay_option += '<option value="M' + s_o + '_' + pin_data_sensor[s_o] + '">M' + s_o + '_' + pin_data_sensor[s_o] + '</option>';
                }
            }
            for (let r_o = 1; r_o < pin_data_relay.length; r_o++) {
                if (pin_data_relay[r_o] !== '') {
                    pin_data_relay_option += '<option value="R' + r_o + '_' + pin_data_relay[r_o] + '">R' + r_o + '_' + pin_data_relay[r_o] + '</option>';
                }
            }
            pin_data_relay_option += '<option value="sleep">sleep</option>' +
                                    '<option value="tankstatus">tankstatus</option>';
            
            // 腳位配置-sensor 匯出整理成 下拉式選單的選項
            // 感測器取值頻率 匯出整理成 輸入 range
            pin_data_sensor_option = '<option value=""></option>';
            for (let s_o = 0; s_o < pin_data_sensor.length; s_o++) {
                if (pin_data_sensor[s_o] !== '' && pin_data_sensor[s_o] !== 'Motor' && pin_data_sensor[s_o] !== 'Servo') {
                    pin_data_sensor_option += '<option value="M' + s_o + '_' + pin_data_sensor[s_o] + '">M' + s_o + '_' + pin_data_sensor[s_o] + '</option>';
                    set_Hz_sensor += 'M' + s_o + '_' + pin_data_sensor[s_o] + ' 取值頻率 ' + 
                                     '<input type="range" style="cursor: pointer;" id="M' + s_o + '_Hz" min="0" max="60" step="5" value="10" oninput="showSensorHzValue(\'M' + s_o + '\', this.value)" onchange="showSensorHzValue(\'M' + s_o + '\', this.value)">' + 
                                     '<span id="M' + s_o + '_HzText">10 秒/次</span>' + 
                                     '<br>';
                }
            }

            var SensorHz_div = document.getElementById("SensorHz");
            SensorHz_div.insertAdjacentHTML('beforeend', set_Hz_sensor);

            // 腳位配置-relay 匯出整理成 下拉式選單的選項
            for (let p_r = 1; p_r <= pin_data_relay.length; p_r++) {
                if (pin_data_relay[p_r] != '') {
                    $("#select_relay_" + p_r).val(pin_data_relay[p_r]);
                }
            }

            // 腳位配置-sensor 匯出整理成 下拉式選單的選項
            for (let p_m = 1; p_m <= pin_data_sensor.length; p_m++) {
                if (pin_data_sensor[p_m] != '') {
                    $("#selectSensor_M" + p_m).val(pin_data_sensor[p_m]);
                }
            }

            // 板子圖片顯示對應 relay、sensor
            for (let RelayNum = 1; RelayNum < 21; RelayNum++) {
                select_relay(RelayNum);
            }
            for (let SensorNum = 1; SensorNum < 20; SensorNum++) {
                selectSensor("M" + SensorNum);
            }

            // 感測器取值頻率
            // pin_data_sensorHz.length
            for (let SensorHzNum = 1; SensorHzNum < pin_data_sensorHz.length; SensorHzNum++) {
                try {
                    var target_Hz_range = $("#M" + SensorHzNum + "_Hz");
                    if (pin_data_sensorHz[SensorHzNum] !== '' && pin_data_sensorHz[SensorHzNum] !== 'None') {
                        $("#M" + SensorHzNum + "_Hz").val(pin_data_sensorHz[SensorHzNum]);
                        eval('showSensorHzValue("M" + SensorHzNum, pin_data_sensorHz[SensorHzNum])');
                    }
                } catch (error) {
                    // console.log("M" + SensorHzNum + "_Hz:" + error)
                }
                // var target_Hz_range = $("#M" + SensorHzNum + "_Hz");
                // // $("#M" + SensorHzNum + "_Hz").val(pin_data_sensorHz[SensorHzNum]);
                // console.log("target_Hz_range: " + target_Hz_range);
                // if (target_Hz_range) {
                //     $("#M" + SensorHzNum + "_Hz").val(pin_data_sensorHz[SensorHzNum]);
                // } else {

                // }
                
            }


            try {
                var cond = JSON.parse(COND1);       // cond: [object Object]
                // var cond = JSON.parse(COND1);       // cond: [object Object]
                var cond_cond = cond.cond;          // cond_cond: [object Object],[object Object]
                // console.log("cond_cond: " + cond_cond);

                // 取得總條件數、子條件數、子物件數最大值
                const COND_NUMS = cond_cond.length;                                 // 總條件數
                // alert("COND_NUMS: " + COND_NUMS);
                var COND_ADD_NUMS_LIST = [];
                var COND_COM_NUMS_LIST = [];
                for (let Z = 0; Z < cond_cond.length; Z++) {
                    COND_ADD_NUMS_LIST.push(cond_cond[Z].cond_add.length)
                    COND_COM_NUMS_LIST.push(cond_cond[Z].cond_com.length)
                }
                // console.log("COND_ADD_NUMS_LIST: " + COND_ADD_NUMS_LIST);
                // console.log("COND_COM_NUMS_LIST: " + COND_COM_NUMS_LIST);
                const COND_ADD_NUMS = Math.max(...COND_ADD_NUMS_LIST)+1;            // 子條件數
                const COND_COM_NUMS = Math.max(...COND_COM_NUMS_LIST);              // 子物件數
                // console.log("COND_ADD_NUMS: " + COND_ADD_NUMS);
                // console.log("COND_COM_NUMS: " + COND_COM_NUMS);

                // 生成積木
                DBvalue_btn(COND_NUMS, COND_ADD_NUMS, COND_COM_NUMS);

                // 賦值
                for (let c_n = 0; c_n < cond_cond.length; c_n++) {
                    // console.log("cond_cond[" + c_n + "]: " + cond_cond[c_n] + "_" + typeof(cond_cond[c_n]))
                    if (typeof(cond_cond[c_n]) === 'object') {
                        // main
                        // console.log("cond_main: " + cond_cond[c_n].cond_main);
                        var target_main = cond_cond[c_n].cond_main.split(' ');
                        if (target_main[0] === 'else' && target_main[1] === 'if') {
                            target_main[0] = target_main[0] + " " + target_main[1];
                            target_main[1] = target_main[2];
                            target_main[2] = target_main[3];
                            target_main[3] = target_main[4];
                        }
                        $("#cond_z" + (c_n+1) + "_1").val(target_main[0]);
                        $("#cond_a" + (c_n+1) + "_1").val(target_main[1]);
                        $("#cond_b" + (c_n+1) + "_1").val(target_main[2]);
                        $("#cond_c" + (c_n+1) + "_1").val(target_main[3]);

                        // add
                        // console.log("cond_add: " + cond_cond[c_n].cond_add + "_" + typeof(cond_cond[c_n].cond_add));
                        if (typeof(cond_cond[c_n].cond_add) === 'object') {
                            for (let add_n = 0; add_n < cond_cond[c_n].cond_add.length; add_n++) {
                                // console.log("cond_cond[" + c_n + "].cond_add[" + add_n + "]: " + cond_cond[c_n].cond_add[add_n])
                                var target_add = cond_cond[c_n].cond_add[add_n].split(' ');
                                $("#cond_d" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[0]);
                                $("#cond_a" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[1]);
                                $("#cond_b" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[2]);
                                $("#cond_c" + (c_n+1) + "_" + (add_n+2) + "").val(target_add[3]);
                            }
                        }

                        // com
                        // console.log("cond_com: " + cond_cond[c_n].cond_com + "_" + typeof(cond_cond[c_n].cond_com));
                        if (typeof(cond_cond[c_n].cond_com) === 'object') {
                            for (let obj_n = 0; obj_n < cond_cond[c_n].cond_com.length; obj_n++) {
                                // console.log("cond_cond[" + c_n + "].cond_com[" + obj_n + "]: " + cond_cond[c_n].cond_com[obj_n])    // R1_vacuum on
                                var target_obj = cond_cond[c_n].cond_com[obj_n].split(' ');
                                // console.log("target_obj: " + target_obj);                                                           // R1_vacuum,on
                                // console.log(pin_data_relay_option.includes(target_obj[0]))
                                if (pin_data_relay_option.includes(target_obj[0]) ) {
                                    // 物件動作包含此積木程式的物件
                                    $("#do_obj" + (c_n+1) + "_" + (obj_n+1) + "").val(target_obj[0]);
                                    // console.log('renew((' + (c_n+1) + ') + "_" + (' + (obj_n+1) + '))')
                                    eval('renew((c_n+1) + "_" + (obj_n+1))');
                                    $("#do_act" + (c_n+1) + "_" + (obj_n+1) + "").val(target_obj[1]);
                                    // console.log("target_obj[0]: " + target_obj[0]);
                                    if (target_obj[0] === 'sleep') {
                                        showSleepValue((c_n+1) + "_" + (obj_n+1), target_obj[1]);
                                    } else if (target_obj[0].includes("Motor")) {
                                        showMotorValue((c_n+1) + "_" + (obj_n+1), target_obj[1]);
                                    }
                                }
                                
                            }
                        }
                    }
                }

                new_condition_i = COND_NUMS;                    // 總條件數
                cond_add_child_i = COND_ADD_NUMS;              // 子條件數
                act_add_child_i = COND_COM_NUMS;               // 子物件數

                
            } catch (error) {
                console.log("cond = JSON.parse(COND1) → catch error")
                DBvalue_btn(1, 2, 1);
                new_condition_i = 1;                    // 總條件數
                cond_add_child_i = 2;              // 子條件數
                act_add_child_i = 1;               // 子物件數
            }

            // console.log("new_condition_i: " + new_condition_i + "__type: " + typeof(new_condition_i))
            // console.log("cond_add_child_i: " + cond_add_child_i);
            // console.log("act_add_child_i: " + act_add_child_i);

        });
        
        var Z;
        var X;
        var Y;
        var TT = {};  // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合                          
    </script>
{% endblock %}

{% block style %} 
    <style>
        /* .boardpic_position {
            position: absolute;
            top: 80px;
            left: 25px;
        } */

        .r5_position {
            position: absolute;
            top: 160px;
            left: 310px;
            width: 40px;
            height: 150px;
            border-style: solid;
            border-color: aqua;
        }
        /* header */
        /* 文字輸入框 */
        .input-text {
            height: 25px;
            width: 40px;
            text-align: center;
            margin-left: 2px;
            margin-right: 5px;
        }
        /* 致動器狀態表格置中 */
        .label_ActuatorStatus {
            margin: auto;
        }
        /* 致動器 ON 樣式 */
        .input-button-on {
            color: #008CBA;
            border: 2px rgb(182, 181, 181) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
            width: 45px;
        }
        /* 致動器 OFF 樣式 */
        .input-button-off {
            color: #707070;
            border: 2px rgb(192, 192, 192) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
            width: 45px;
        }
        /* 輸入按鈕 */
        .input-button {
            font-size: 14px;
            color: #008CBA;
            border: 2px rgb(182, 181, 181) solid;
            background-color: whitesmoke;
            padding: 1px 3px;
        }
        /* 大表格樣式 */
        .table-all {
            font-size:18px; 
            border:2px #cccccc solid; 
            margin-left: 10px; 
            margin-right: 10px; 
            width: 98%;
        }
        /* footer */
        .footer{
            height: 40px;
            box-sizing: border-box;
            /* 設定footer絕對位置在底部 */
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #eee;
            text-align: center;
        }

        html, body {
            height: 100%;
            /* margin: 0; */
            position: relative;
        }

        #wrapper {
            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
            /* min-height: 100%; */
            /* 位置設為relative, 作為footer區塊位置的參考 */
            position: relative;
        }
        .div_relay_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent; 
            text-align: center;
            font-size: 12px;
        }
        .div_analog_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent; 
            text-align: center;
            font-size: 12px;
        }
        .div_digital_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent; 
            text-align: center;
            font-size: 12px;
        }
        .div_PWM_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent; 
            text-align: center;
            font-size: 12px;
        }
        .div_UART_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent; 
            text-align: center;
            font-size: 12px;
        }
        .div_I2C_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent; 
            text-align: center;
            font-size: 12px;
        }
        .div_485_css {
            position: absolute; 
            border-style: solid; 
            border-color: transparent;  
            text-align: center;
            font-size: 12px;
        }
        .div_analog2_css {
            position: absolute; 
            border-color: transparent; 
            border-style: solid; 
            text-align: center;
            font-size: 12px;
        }
        .demo {
         padding: 1rem;
        }
    </style>
{% endblock %}   
    
{% block main %}
    <div id="wrapper" style="height: 1900px;">

        <table align="center"> 
            <!-- 選擇燒錄桶槽 -->
            <tr>
                <td colspan="5" align="center">
                    <script>
                        // 貨櫃-桶槽對應
                        const containerTOtank = {
                            'CI':[{'CI1':'1'}, {'CI2':'2'}],   
                            'C':[{'C1':'1'}, {'C2':'2'}, {'C3':'3'}, {'C4':'4'}], 
                            'R':[{'R1':'1'}],     
                            'S':[{'S1':'1'},{'S2':'2'}],  
                            'SO':[{'SO1':'1'},{'SO2':'2'}], 
                            'P':[{'P1':'1'},{'P2':'2'}],  
                            'PO':[{'PO1':'1'},{'PO2':'2'}],         
                            'FI':[{'FI1':'1'},{'FI2':'2'}],                
                            'F':[{'F1':'1'}, {'F2':'2'}, {'F3':'3'}, {'F4':'4'}, {'F5':'5'}, {'F6':'6'}, 
                                 {'F7':'7'}, {'F8':'8'}, {'F9':'9'}, {'F10':'10'}, {'F11':'11'}, {'F12':'12'}],
                            'FO':[{'FO1':'1'}, {'FO2':'2'}],
                            'DI':[{'DI1':'1'}, {'DI2':'2'}],
                            'D':[{'D1':'1'}, {'D2':'2'}, {'D3':'3'}, {'D4':'4'}, {'D5':'5'}, {'D6':'6'}, 
                                 {'D7':'7'}, {'D8':'8'}, {'D9':'9'}, {'D10':'10'}, {'D11':'11'}, {'D12':'12'}],
                            'DO':[{'DO1':'1'}, {'DO2':'2'}]
                        }
                    </script>
                    <h1 class="h3 mb-4 fw-normal"style="background-color: 	Silver; height: 50px; text-align:center;">選擇燒錄桶槽:</h1>
                    <div style="height: 30px">
                    <select id="prog_container" onchange="renew_tank()" class="select-input">
                        <option value="CI">清洗入料槽</option>
                        <option value="C">清洗槽</option>
                        <option value="R">中水桶</option>
                        <option value="S">色選機</option>
                        <option value="SO">色選機出料槽</option>
                        <option value="P">脫皮機</option>
                        <option value="PO">脫皮機出料槽</option>
                        <option value="FI">發酵入料槽</option>
                        <option value="F">發酵槽</option>
                        <option value="FO">發酵出料槽</option>
                        <option value="DI">乾燥入料槽</option>
                        <option value="D">乾燥槽</option>
                        <option value="DO">乾燥出料槽</option>
                    </select>
                    <select id="prog_tank" onchange="" class="select-input">
                        <option value="CI1">1</option>
                        <option value="CI2">2</option>
                    </select>
                    <input type="button" class="btn btn-secondary" value="確認" onclick="GoToBoardLoaderPage()">
                    </div>
                    <script>
                        function GoToBoardLoaderPage() {
                            var target_tank = $("#prog_tank").val();
                            var confirm_GoToBoardLoaderPage = confirm("目前燒錄桶槽為 " + Tank_ID + "\n點擊 [確定] 按鈕後, 前往指定燒錄桶槽介面 " + target_tank);
                            if (confirm_GoToBoardLoaderPage) {
                                location.href = "/board_loader_" + target_tank;
                            }
                        }
                    </script>
                    <br>
                </td>
            </tr>
            <!-- coffee1.0 板子圖片 -->
            <!-- 燒錄制動器 / 感測器 -->
            <center><tr>
               <td colspan="5" align="center">
                    <h1 class="h3 mb-4 fw-normal"style="text-align:center; background-color: 	Silver; height: 50px; vertical-align: middle;">桶槽腳位設定:</h1>
                    <input type="button" id= "crl_RF" class="btn btn-secondary" value="通訊介面設定">
                    <input type="button" id= "crl" class="btn btn-secondary" value="致動器腳位設定">
                    <input type="button" id= "crl_sensor" class="btn btn-secondary" value="感測器腳位設定">
                    <input type="button" class="btn btn-secondary" value="保存腳位配置" onclick="ItemGetValueToDB()">
                </td>
            </tr></center>
            <tr style="height: 30px">
            </tr>
            <tr>
                <td style="width: 900px; vertical-align: top;">
                 <div style="position:relative;">
                   <!-- relay1 顯示框 -->
                   <div id="relay1" tabindex="0" role="button" class="div_relay_css"
                     style=" top: 45px; left: 20px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay2 顯示框 -->
                   <div id="relay2" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 63px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay3 顯示框 -->
                   <div id="relay3" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 103px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay4 顯示框 -->
                   <div id="relay4" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 146px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay5 顯示框 -->
                   <div id="relay5" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 189px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay6 顯示框 -->
                   <div id="relay6" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 232px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay7 顯示框 -->
                   <div id="relay7" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 275px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay8 顯示框 -->
                   <div id="relay8" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 318px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay9 顯示框 -->
                   <div id="relay9" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 361px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay10 顯示框 -->
                   <div id="relay10" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 404px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay11 顯示框 -->
                   <div id="relay11" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 447px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay12 顯示框 -->
                   <div id="relay12" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 490px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay13 顯示框 -->
                   <div id="relay13" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 533px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay14 顯示框 -->
                   <div id="relay14" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 576px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay15 顯示框 -->
                   <div id="relay15" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 619px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay16 顯示框 -->
                   <div id="relay16" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 662px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay17 顯示框 -->
                   <div id="relay17" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 705px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay18 顯示框 -->
                   <div id="relay18" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 748px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay19 顯示框 -->
                   <div id="relay19" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 791px; width: 28px; height: 110px;">
                   </div>
                   <!-- relay20 顯示框 -->
                   <div id="relay20" tabindex="0" role="button" class="div_relay_css"
                     style="top: 45px; left: 834px; width: 28px; height: 110px;">
                   </div>

                   <!-- 類比 sensor_M4 顯示框 -->
                   <div id="sensor_M4" tabindex="0" role="button" class="div_analog_css"
                     style="top: 290px; left: 0px; width: 42px; height: 20px;">
                   </div>
                   <!-- 類比 sensor_M5 顯示框 -->
                   <div id="sensor_M5" tabindex="0" role="button" class="div_analog_css"
                     style="top: 320px; left: 0px; width: 42px; height: 20px;">
                   </div>
                   <!-- 類比 sensor_M7 顯示框 -->
                   <div id="sensor_M7" tabindex="0" role="button" class="div_analog_css"
                     style="top: 350px; left: 0px; width: 42px; height: 20px;">
                   </div>

                   <!-- PWM sensor_M10 顯示框 -->
                   <div id="sensor_M10" tabindex="0" role="button" class="div_PWM_css"
                     style="top: 290px; left: 40px; width: 45px; height: 20px;">
                   </div>
                   <!-- PWM sensor_M2 顯示框 -->
                   <div id="sensor_M2" tabindex="0" role="button" class="div_PWM_css"
                     style="top: 320px; left: 40px; width: 45px; height: 20px;">
                   </div>
                   <!-- PWM sensor_M3 顯示框 -->
                   <div id="sensor_M3" tabindex="0" role="button" class="div_PWM_css"
                     style="top: 350px; left: 40px; width: 45px; height: 20px;">
                   </div>

                   <!-- 數位 sensor_M9 顯示框 -->
                   <div id="sensor_M9" tabindex="0" role="button" class="div_digital_css"
                     style="top: 380px; left: 0px; width: 42px; height: 20px;">
                   </div>
                   <!-- 數位 sensor_M12 顯示框 -->
                   <div id="sensor_M12" tabindex="0" role="button" class="div_digital_css"
                     style="top: 410px; left: 0px; width: 42px; height: 20px;">
                   </div>
                   <!-- 數位 sensor_M19 顯示框 -->
                   <div id="sensor_M19" tabindex="0" role="button" class="div_digital_css"
                     style="top: 440px; left: 0px; width: 42px; height: 20px;">
                   </div>
                   <!-- 數位 sensor_M14 顯示框 -->
                   <div id="sensor_M14" tabindex="0" role="button" class="div_digital_css"
                     style="top: 380px; left: 45px; width: 42px; height: 20px;">
                   </div>
                   <!-- 數位 sensor_M11 顯示框 -->
                   <div id="sensor_M11" tabindex="0" role="button" class="div_digital_css"
                     style="top: 410px; left: 45px; width: 42px; height: 20px;">
                   </div>

                   <!-- UART sensor_M16 顯示框 -->
                   <div id="sensor_M16" tabindex="0" role="button" class="div_UART_css"
                     style="top: 290px; left: 90px; width: 42px; height: 20px;">
                   </div>
                   <!-- UART sensor_M17 顯示框 -->
                   <div id="sensor_M17" tabindex="0" role="button" class="div_UART_css"
                     style="top: 320px; left: 90px; width: 42px; height: 20px;">
                   </div>
                   <!-- UART sensor_M18 顯示框 -->
                   <div id="sensor_M18" tabindex="0" role="button" class="div_UART_css"
                     style="top: 350px; left: 90px; width: 42px; height: 20px;">
                   </div>

                   <!-- i2c sensor_M15 顯示框 -->
                   <div id="sensor_M15" tabindex="0" role="button" class="div_I2C_css"
                     style="top: 380px; left: 90px; width: 45px; height: 20px;">
                   </div>
                   <!-- 485 sensor_M8 顯示框 -->
                   <div id="sensor_M8" tabindex="0" role="button" class="div_485_css"
                     style="top: 410px; left: 90px; width: 45px; height: 20px;">
                   </div>

                   <!-- ppa sensor_M6 顯示框 -->
                   <div id="sensor_M6" tabindex="0" role="button" class="div_analog2_css"
                     style="top: 350px; left: 140px; width: 42px; height: 20px;">
                   </div>
                   <!-- ppa sensor_M13 顯示框 -->
                   <div id="sensor_M13" tabindex="0" role="button" class="div_analog2_css"
                     style="top: 380px; left: 140px; width: 42px; height: 20px;">
                   </div>
                   <!-- ppa3 sensor_M1 顯示框 -->
                   <div id="sensor_M1" tabindex="0" role="button" class="div_analog2_css"
                     style="top: 410px; left: 140px; width: 42px; height: 20px;">
                   </div>                   
                   <img src="../static/img/board.png" style="width: 100%;">
                 </div>
                </td>
            </tr>
            <!-- 感測器取值頻率 -->
            <tr>
                <td colspan="5">
                    <span style="background-color:	Silver">感測器取值頻率</span><br>
                    <div id="SensorHz">
                    </div><br>
                    
                </td>
            </tr>

            <!-- 0526 積木測試 -->
            <!-- <tr>
                <td colspan="5" style="background-color:aqua">
                    test
                </td>
            </tr> -->
            
            <!-- 積木程式 -->
            <tr>
                <td>
                    燒錄器 : <input type="text" id="burner_mac" value="b8:27:eb:7e:24:78"><br>
                    <br>

                    <span style="background-color:	Silver">積木條件</span><br>
                    <div class="demo">
                      <div id="blocklyDiv" style="height: 400px; width: 100%;"></div>
                    </div>
                    <!--<span>入料儲豆槽為：{{tank_import}}</span><br>-->
                    <!--<span>出料儲豆槽為：{{tank_export}}</span><br>-->
                    <div id="DBvalue">
                        <!-- 積木條件 -->
                    </div>

                    <script>
                        // 指令燒錄桶槽時, 跳出桶槽選項
                        var Value = '';
                        function renew_tank() {
                            var prog_container_value = $("#prog_container").val();
                            // console.log("prog_container_value: " + prog_container_value);

                            Value = '';
                            try {
                                for (let i = 0; i < containerTOtank[prog_container_value].length; i++) {
                                    Value += '<option value="' + Object.keys(containerTOtank[prog_container_value][i]) + '">' + Object.values(containerTOtank[prog_container_value][i]) + '</option>';
                                }
                            } catch (error) {
                                if (error.name === 'TypeError') {
                                    Value = '';
                                }
                            }
                            
                            var sectorSelect = document.getElementById("prog_tank");
                            if (sectorSelect != null) {
                                sectorSelect.innerHTML = Value;
                            }
                        }

                        function DBvalue_btn(z_notempty_NUM, a_notempty_NUM, o_notempty_NUM) {
                            var html = '<div id="box">';
                            for (let condadd_parent_num = 1; condadd_parent_num <= z_notempty_NUM; condadd_parent_num++) {
                                html += '' + 
                                        '<div id="newcondition_' + condadd_parent_num + '" class="newcondition_css">' +

                                        '<div id="condition' + condadd_parent_num + '">' +
                                        '<div id="condition' + condadd_parent_num + '_' + '1' + '">' +
                                        '條件 ' +
                                        '<select id="cond_z' + condadd_parent_num + '_' + '1' + '">' +
                                        '<option value="if">if</option>' +
                                        '<option value="else if">else if</option>' +
                                        '<option value="else">else</option>' +
                                        '</select> ' +
                                        '<select id="cond_a' + condadd_parent_num + '_' + '1' + '">' +
                                        pin_data_sensor_option + 
                                        '<option value="tankstatus">tankstatus</option>' +
                                        '</select> ' +
                                        '<select id="cond_b' + condadd_parent_num + '_' + '1' + '">' +
                                        '<option value=""></option>' + 
                                        '<option value=">">&gt;</option>' + 
                                        '<option value=">=">&gt;=</option>' + 
                                        '<option value="==">==</option>' + 
                                        '<option value="<=">&lt;=</option>' + 
                                        '<option value="<">&lt;</option>' + 
                                        '</select> ' +
                                        '<input list="cond_list_c' + condadd_parent_num + '_' + '1' + '" id="cond_c' + condadd_parent_num + '_' + '1' + '">' +
                                        '<datalist id="cond_list_c' + condadd_parent_num + '_' + '1' + '">' +
                                        '<option value="on">ON</option>' +
                                        '<option value="off">OFF</option>' +
                                        '<option value="">(或請自行輸入數值)</option>' +
                                        '<option value="Waiting">空桶等待</option>' +
                                        '<option value="InputtingBean">入豆中</option>' +
                                        '<option value="InputtingBean_Pause">入豆暫停</option>' +
                                        '<option value="InputtingBean_Finish">入豆完成</option>' +
                                        '<option value="InputtingWater">夾層入水</option>' +
                                        '<option value="Drying">乾燥中</option>' +
                                        '<option value="Drying_Finish">乾燥完成</option>' +
                                        '<option value="OutputtingBean">可出豆</option>' +
                                        '<option value="OutputtingBean_Finish">出豆完成</option>' +
                                        '</datalist> ' +
                                        '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + '1' + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + '1' + ')"><br>' +
                                        '</div>';
                                for (let cond_add_child_i = 2; cond_add_child_i <= a_notempty_NUM; cond_add_child_i++) {
                                    // if (cond_d_data[condadd_parent_num][cond_add_child_i] == '') {
                                    //     // alert("cond_d_data[" + condadd_parent_num + "][" + cond_add_child_i + " ] + 為空值")
                                    //     continue
                                    // }
                                    html += 
                                    '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                                    '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    '<option value=""></option>' + 
                                    '<option value="&&">&&</option>' + 
                                    '<option value="||">||</option>' + 
                                    '</select> ' + 
                                    '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    pin_data_sensor_option + 
                                    '<option value="tankstatus">tankstatus</option>' +
                                    // '</optgroup>' + 
                                    '</select> ' + 
                                    '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    '<option value=""></option>' + 
                                    '<option value=">">&gt;</option>' + 
                                    '<option value=">=">&gt;=</option>' + 
                                    '<option value="==">==</option>' + 
                                    '<option value="<=">&lt;=</option>' + 
                                    '<option value="<">&lt;</option>' + 
                                    '</select> ' +
                                    '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                    '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                                    '<option value="on">ON</option>' +
                                    '<option value="off">OFF</option>' +
                                    '<option value="">(或請自行輸入數值)</option>' +
                                    '<option value="Waiting">空桶等待</option>' +
                                    '<option value="InputtingBean">入豆中</option>' +
                                    '<option value="InputtingBean_Pause">入豆暫停</option>' +
                                    '<option value="InputtingBean_Finish">入豆完成</option>' +
                                    '<option value="InputtingWater">夾層入水</option>' +
                                    '<option value="Drying">乾燥中</option>' +
                                    '<option value="Drying_Finish">乾燥完成</option>' +
                                    '<option value="OutputtingBean">可出豆</option>' +
                                    '<option value="OutputtingBean_Finish">出豆完成</option>' +
                                    '</datalist> ' +
                                    '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">';
                                    if (cond_add_child_i == 2) {
                                        html +=
                                        '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>';
                                    } else {
                                        html +=
                                        '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');" style="display: none;"><br>';
                                    }
                                    html += '</div>';
                                }

                                html += '</div>';

                                // 新增的物件動作
                                html += '<div id="action' + condadd_parent_num + '">';
                                for (let cond_add_child_i = 1; cond_add_child_i <= o_notempty_NUM; cond_add_child_i++) {
                                    // if (cond_obj_data[condadd_parent_num][cond_add_child_i] == '') {
                                    //     // alert("cond_d_data[" + condadd_parent_num + "][" + cond_add_child_i + " ] + 為空值")
                                    //     continue
                                    // }
                                    html += 
                                    '<div id="action' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                                    '物件 ' +
                                    '<select id="do_obj' + condadd_parent_num + '_' + cond_add_child_i + '" onChange="renew(\''+ condadd_parent_num + '_' + cond_add_child_i + '\', this.selectedIndex);">' +
                                    // '<option value=" ">制動器 / 暫停秒數 / 桶槽狀態</option>' +
                                    pin_data_relay_option +  
                                    // '<option value="input_vacuum_status">入料儲豆槽真空吸料機</option>' +
                                    // '<option value="tank_vacuum_status">真空吸料機</option>' +
                                    // '<option value="tank_threewayvalve_vacuum_status">吸料機三通閥</option>' +
                                    // '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
                                    // '<option value="tank_motor_status">馬達</option>' +
                                    // '<option value="outer_solenoid_water_status">桶外進水電磁閥</option>' +
                                    // '<option value="tank_solenoid_water_out_status">廢水排水電磁閥</option>' +
                                    // '<option value="tank_heater1_status">加熱棒 1</option>' +
                                    // '<option value="tank_heater2_status">加熱棒 2</option>' +
                                    // '<option value="tank_temp_enable">溫控開關</option>' +
                                    // '<option value="tank_temp">溫度設定</option>' +
                                    // '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
                                    // '<option value="output_vacuum_status">出料儲豆槽真空吸料機</option>' +
                                    // '<option value="tank_magneticSwitch_status">電磁開關</option>' +
                                    // '<option value="tank_emergencySwitch_status">緊急開關</option>' +
                                    // '<option value="tank_camera_status">攝影機</option>' +
                                    // '<option value="tank_warningLight_status">警示燈</option>' +
                                    '</select>' +
                                    // '<select id="do_act' + new_condition_i + '_1">' +
                                    // '<option value="">請由左方選取物件' +
                                    // '</select> ' +
                                    ' 動作 ' +
                                    '<div id="do_action' + condadd_parent_num + '_' + cond_add_child_i + '" style="display: inline-block;">' +
                                    '</div>' +
                                    '<input type="button" class="input-act-delete" id="act_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="物件動作--" onclick="act_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">';
                                    if (cond_add_child_i == 1) {
                                        html +=
                                        '<input type="button" class="input-act-add" id="act_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>';
                                    } else {
                                        html +=
                                        '<input type="button" class="input-act-add" id="act_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + condadd_parent_num + '_' + cond_add_child_i + ');" style="display: none;"><br>';
                                    }
                                    
                                    html += '</div>';
                                }
                                html += '</div>';

                                // 新增的 條件物件動作++ 條件物件動作-- 按鈕
                                html += '<input type="button" class="input-delete" id="del' + condadd_parent_num + '" value="條件物件動作--" onclick="Delete(' + condadd_parent_num + ');"><br>' +
                                        '<input type="button" class="input-add" id="add' + condadd_parent_num + '" value="條件物件動作++" onclick="Add(add' + condadd_parent_num + ');">' +
                                        '</div><br>' ;
                            }
                            html += '</div>' ;
                            var divbox = document.getElementById('DBvalue');
                            divbox.insertAdjacentHTML('beforeend', html);
                        }
                    </script>
                    <center><input type="button"  class="btn btn-secondary" value="燒錄" onclick="prog_OTA();"></center>
                </td>
                
            </tr>
            <tr style="height: 30px">
            </tr>
            <tr>
                <td colspan="5" style="background-color: 	Silver; height: 50px; vertical-align: middle; text-align: center;">
                <h1 class="h3 mb-4 fw-normal">燒錄結果:</h1>
                </td>  
            </tr>
            <script>
                function prog_creat_hex() {
                    MQTTgetValue();
                    $.ajax({
                        type:"GET",
                        url:"/creat_hex",
                        data:TT,
                        dataType:"text",
                        async:false,
                        success:function (res) {
                            $("#creat_hex_Value").text(res);
                            return 0;
                        },
                        error: function (thrownError) {
                            alert(thrownError.statusText);
                            $("#creat_hex_Value").text(thrownError.statusText);
                            return 1;
                        }
                    })
                }

                var prog_result_interval;
                function programmer(params) {
                    MQTTgetValue();
                    var msg;
                    $.ajax({
                        type:"GET",
                        url:"/creat_hex",
                        data:TT,
                        dataType:"text",
                        async:false,
                        success:function (res) {
                             if(res=="NG")
                             {
                               $("#creat_hex_Value").text("生成hex檔失敗");
                             }
                             else
                             {
                               $("#creat_hex_Value").text("生成hex檔成功");
                             }
                            msg=res;
                        
                        }
                    })
                    
                    if(msg=="NG")
                    {
                     $("#programmer_Value").text("上一步驟失敗");
                    }
                    else
                    {
                       var USERNAME = '{{username}}';
                       var confirm_programmer = confirm("即將燒錄 Coffee1.0, 確定請按下 [確認] :");
                       if (!confirm_programmer) {
                            alert("已取消燒錄");
                        } 
                       else {
                        var prog_tank_data = $('#prog_tank').find(':selected').val();
                        var prog_burner_mac = $('#burner_mac').val();
                        console.log("prog_burner_mac: " + prog_burner_mac);
                        var prog_data = {'tank':prog_tank_data,
                                         'USERNAME': USERNAME,
                                         'burner_mac':prog_burner_mac}
                        $("#programmer_Value").text("準備燒錄...");
                        $.get('/board_programmer', prog_data, function (res) {
                            prog_result_interval = setInterval("board_programmer_result(\'" + prog_tank_data + "\')", 5000);
                        }, 'text');
                       }
                    }
           
                }

                // 燒錄結果取值時判斷用
                var prog_tank_data = $('#prog_tank').find(':selected').val();
                var board_programmer_process = 0;
                function board_programmer_result(tid) {
                    if (board_programmer_process == 1) {
                        return;
                    }

                    board_programmer_process = 1;
                    $.ajax({
                        type:"GET",
                        url:"/board_programmer_result_" + tid,
                        dataType:"text",
                        async:false,
                        success:function(response){
                            console.log("board_programmer_result: " + response);
                            console.log(response != '0')
                            if (response != '0') {
                                $("#programmer_Value").text(response);
                                alert("燒錄結果: " + response);
                                clearInterval(prog_result_interval);
                            }
                            board_programmer_process = 0;
                        },
                        error: function(thrownError){
                            console.log(thrownError);
                            board_programmer_process = 0;
                        }
                    });
                }

                function prog_OTA() {
                    //prog_creat_hex();
                    programmer();
                
                }
            </script>

            <!-- 燒錄結果顯示 -->
            <tr>
                <td colspan="2">
                    積木條件 : <span id="show_MQTTcommand"></span>
                    <br>
                    <br>
                    生成hex檔：<span id="creat_hex_Value"></span>
                    <br>
                    <br>
                    燒錄hex檔：<span id="programmer_Value"></span>
                </td>
            </tr>
        </table>
        


        <!-- Relay、感測器選值時, 左側圖片顯示對應項目 -->
        <script>
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - relay
            function select_relay(id) {
                var select_relay_text = $("#select_relay_" + id).find(':selected').text()
                 console.log("select_relay_text: " + select_relay_text)
                if (select_relay_text == '') {
                    $("#relay" + id).text('');
                    document.getElementById("relay" + id).style.backgroundColor = 'transparent';
                }
                else {
                    $("#relay" + id).text(select_relay_text);
                    document.getElementById("relay" + id).style.backgroundColor = 'transparent';
                    document.getElementById("relay" + id).style.color = 'white';
                    document.getElementById("relay" + id).style.fontWeight = '600';
                }
            }
            
            var sensorlist = ['', '分壓類比', 'PWM', 'PWM', '類比', '類比', '分壓類比', '類比', '485', '數位', 
                                'PWM', '數位', '數位', '分壓類比', '數位', 'I2C', 'UART', 'UART', 'UART', '數位']
            // selectSensor 
            function selectSensor(PinNum) {
                var Pin_sensor = $("#selectSensor_" + PinNum).find(':selected').text();
                // console.log("Pin_sensor: " + Pin_sensor)
                if (Pin_sensor == '') {
                    $("#sensor_" + PinNum).text('');
                    document.getElementById("sensor_" + PinNum).style.backgroundColor = 'transparent';
                } else {
                    $("#sensor_" + PinNum).text(Pin_sensor);
                    // alert("sensorlist[PinNum]]\n" + sensorlist[PinNum.substring(1)])
                 
                    document.getElementById("sensor_" + PinNum).style.backgroundColor = 'transparent';
                    document.getElementById("sensor_" + PinNum).style.color = 'white';
                    document.getElementById("sensor_" + PinNum).style.fontWeight = '600';
                }
            }
        </script>
        


        <!--  -->
        <script>
            var relay_data = '';        // 積木程式 制動器選項
            var sensor_data = '';       // 積木程式 感測器選項
            var obj_data = '';          // 積木程式 物件選項：桶槽狀態 暫停秒數

            const list_R = ['R1','R2','R3','R4','R5','R6','R7','R8','R9','R10','R11','R12','R13','R14','R15','R16','R17','R18','R19','R20']
            var list_relay_item = [];   // R1~R20 對應的 relay 取值

            const list_M = ['M1','M2','M3','M4','M5','M6','M7','M8','M9','M10','M11','M12','M13','M14','M15','M16','M17','M18','M19']
            var list_sensor_item = [];   // M1~M19 對應的 sensor 取值

            const list_M_Hz = ['M1_Hz','M2_Hz','M3_Hz','M4_Hz','M5_Hz','M6_Hz','M7_Hz','M8_Hz','M9_Hz','M10_Hz',
                                'M11_Hz','M12_Hz','M13_Hz','M14_Hz','M15_Hz','M16_Hz','M17_Hz','M18_Hz','M19_Hz'];
            var list_sensorHz_item = [] // M1~M19 對應的取值頻率

            function ItemGetValueToDB() {
                var ethernet_text = $("#select_ethernet_1").find(':selected').val();
                var wifi_text = $("#select_wifi_1").find(':selected').val();
                var zigbee_text = $("#select_zigbee_1").find(':selected').val();
                var tank_text = $('#prog_tank').find(':selected').val();
                console.log("ethernet_text: " + ethernet_text);
                console.log("wifi_text: " + wifi_text);
                console.log("zigbee_text: " + zigbee_text);
                console.log("tank_text: " + tank_text);

                list_relay_item = [];
                for (let i = 1; i < 21; i++) {
                    var relay_text = $("#select_relay_" + i).find(':selected').val();
                    if (relay_text != '') {
                        list_relay_item.push(relay_text);
                    } else {
                        list_relay_item.push('');
                    }
                }
                console.log("list_relay_item: " + list_relay_item);

                list_sensor_item = [];
                for (let i = 1; i < 20; i++) {
                    var sensor_text = $("#selectSensor_M" + i).find(':selected').val();
                    if (sensor_text != '') {
                        list_sensor_item.push(sensor_text);
                    } else {
                        list_sensor_item.push('');
                    }
                }
                console.log("list_sensor_item: " + list_sensor_item);

                list_sensorHz_item = [];
                // list_M_Hz = ['M1_Hz','M2_Hz','M3_Hz','M4_Hz','M5_Hz','M6_Hz','M7_Hz','M8_Hz','M9_Hz','M10_Hz',
                //                 'M11_Hz','M12_Hz','M13_Hz','M14_Hz','M15_Hz','M16_Hz','M17_Hz','M18_Hz','M19_Hz'];
                // var list_sensorHz_item
                for (let i = 1; i < 20; i++) {
                    var sensor_text = $("#M" + i + "_Hz").val();
                    if (sensor_text !== undefined) {
                        console.log("sensor_text: ", sensor_text);
                        list_sensorHz_item.push(sensor_text);
                    } else {
                        list_sensorHz_item.push('');
                    }
                }
                
                var SQL_insert = 'INSERT INTO `coffee1_0_pin` (' + 
                                '`datetime`, `tid`, `ethernet`, `wifi`, `zigbee`, `' + 
                                list_R.join("`, `") + 
                                '`, `' + 
                                list_M.join("`, `") + 
                                '`, `' + 
                                list_M_Hz.join("`, `") + 
                                '`) VALUES (' + 
                                'current_timestamp(), "' + Tank_ID + '", "' + ethernet_text + '", "' + wifi_text + '", "' + zigbee_text + '", "' +
                                list_relay_item.join('", "')  + 
                                '", "' + 
                                list_sensor_item.join('", "')  + 
                                '", "' + 
                                list_sensorHz_item.join('", "')  + 
                                '")';

                var sql_data = { "sql":SQL_insert };
                console.log(sql_data)
                $.get('/sql_get', sql_data, function (res) {
                    if (res['response'] == '') {
                        alert("OK");
                    } else {
                        alert(res['response']);
                    }
                    location.reload();
                }, 'json');

                // ItemGetValue();
                // location.reload();
            }

            function ItemGetValue() {
                list_relay_item = [];
                // ethernet、wifi、zigbee 取值測試
                // var select_ethernet_text = $("#select_ethernet_1").find(':selected').text()
                // var select_wifi_text = $("#select_wifi_1").find(':selected').text()
                // var select_zigbee_text = $("#select_zigbee_1").find(':selected').text()
                // console.log("select_ethernet_text: " + select_ethernet_text)
                // console.log("select_wifi_text: " + select_wifi_text)
                // console.log("select_zigbee_text: " + select_zigbee_text)

                // 制動器感測器 下拉式選單 不可更改
                $('.select-input').prop('disabled', true);

                // relay 取值
                relay_dict = {};
                for (let i = 1; i < 21; i++) {
                    var relay_text = $("#select_relay_" + i).find(':selected').val();
                    if (relay_text != '') {
                        relay_dict["R" + i] = "R" + i + "_" + relay_text;
                        // console.log("R" + i + " : " + relay_text);
                        list_relay_item.push(relay_text);
                    } else {
                        // relay_dict["R" + i] = "";
                        // console.log("R" + i + " : ");
                        list_relay_item.push('');
                    }
                }
                // console.log("list_relay_item: " + list_relay_item);

                // relay_data = '<optgroup label="制動器狀態">';
                relay_data = '<option value=""></option>';
                for (let r in relay_dict) {
                    // console.log(r + " : " + relay_dict[r]);
                    relay_data += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
                }
                relay_data += '<option value="sleep">sleep</option>' +
                              '<option value="tankstatus">tankstatus</option>';
                // relay_data += '</optgroup>'
                // console.log("relay_data: " + relay_data)
                

                // sensor 取值 dict
                sensor_dict = {};
                for (let i = 1; i < 20; i++) {
                    var sensor_text = $("#selectSensor_M" + i).find(':selected').text();
                    if (sensor_text != '') {
                        sensor_dict["M" + i] = "M" + i + "_" + sensor_text;
                        // console.log("selectSensor_M" + i);
                        // console.log("M" + i + "_" + sensor_text);
                    } else {
                        // sensor_dict["M" + i] = "";
                        // console.log("selectSensor_M" + i);
                        // console.log("");
                    }
                }
                sensor_data = '';
                // sensor_data = '<optgroup label="感測器數值">';
                for (let s in sensor_dict) {
                    // console.log(s + " : " + sensor_dict[s])
                    sensor_data += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
                }
                sensor_data += '<option value="tankstatus">tankstatus</option>';
                // sensor_data += '</optgroup>';
                // console.log("sensor_data: " + sensor_data)

                console.log("relay_data: " + relay_data);
                console.log("sensor_data: " + sensor_data);

                var relay_select_data = document.getElementById("");

                // // 賦值條件 a 
                // var sectorSelect = document.getElementById("cond_a1_1");
                // sectorSelect.innerHTML = '<option value="">制動器 / 感測器</option>' +  relay_data + sensor_data;

                // obj_data = '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' + 
                //            '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</option>';

                // // 賦值物件 a 
                // var sectorSelect = document.getElementById("do_obj1_1");
                // sectorSelect.innerHTML = '<option value="">制動器 / 暫停秒數 / 桶槽狀態</option>' + relay_data + obj_data;



                //  ===== 下方傳值未測試 ====================================================

                // var loader_data = {
                //     "ethernet_list":select_ethernet_text,
                //     "wifi_list":select_wifi_text,
                //     "zigbee_list":select_zigbee_text,

                //     "relay_list":String(relay_list),
                //     "pwm_list":String(pwm_list),
                //     "digital_list":String(digital_list),
                //     "uart_list":String(uart_list),
                //     "i2c_list":String(i2c_list),
                //     "s485_list":String(s485_list),
                //     "ppa_list":String(ppa_list)
                // };

                // $.ajax({
                //     type:"GET",
                //     url:"/loader",
                //     dataType:"JSON",
                //     data:loader_data,
                //     success:function (res) {
                //         alert("ItemGetValue loader: " + res.response)
                //     },
                //     error: function (thrownError) {
                //         alert(thrownError)
                //     }

                // })
                
            }

            relay_obj2act = {'vacuum':['on', 'off'],
                             'solenoidvalve':['on', 'off'],
                             'diskvalve':['on', 'off'],
                             'warninglight':['on', 'off'],
                             'camera':['on', 'off'],
                             'heater':['on', 'off'],
                             'pump':['on', 'off'],
                             'sleep':'',
                             'tankstatus':['Waiting', 'InputtingBean', 'InputtingBean_Pause', 'InputtingBean_Finish', 
                                           'Drying', 'OutputtingBean', 'InputtingWater']
                            }
            dry_object = new Array();
            dry_object['tankstatus'] = ["Waiting", "InputtingBean", "InputtingBean_Pause", "InputtingBean_Finish", 
                                        "InputtingWater", "Drying", "Drying_Finish", "OutputtingBean", "OutputtingBean_Finish"];  // 暫停秒數
            // DRY_CONTAINER_STATUS 讓 do_act / dry_object 判斷用
            const DRY_CONTAINER_STATUS = {
                                            'Waiting':'空桶等待',
                                            'InputtingBean':'入豆中',
                                            'InputtingBean_Pause':'入豆暫停',
                                            'InputtingBean_Finish':'入豆完成',
                                            'InputtingWater':'夾層入水',
                                            'Drying':'乾燥中',
                                            'Drying_Finish':'乾燥完成',
                                            'OutputtingBean':'可出豆',
                                            'OutputtingBean_Finish':'出豆完成'
                                        }

            function renew(obj_num, index) {
                // console.log("renew!!!" + obj_num + "_____" + index);
                var index_name = $('#do_obj' + obj_num).val();
                // console.log("index_name: " + index_name);
                var Value = '';
                if (index_name === 'sleep') {
                    Value = '   暫停秒數 : ' + 
                            ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="5" max="60" step="5" value="10" oninput="showSleepValue(\'' + obj_num + '\', this.value)" onchange="showSleepValue(\'' + obj_num + '\', this.value)">' + 
                            ' <span id="sleepValue_text' + obj_num + '">10s</span>';
                } else if (index_name === 'tankstatus') {
                    Value = '<select id="do_act' + obj_num + '">';
                    for(var i=0; i<dry_object['tankstatus'].length; i++){
                        Value += '<option value=' + dry_object['tankstatus'][i] + '>' + DRY_CONTAINER_STATUS[dry_object['tankstatus'][i]] + '</option>';
                    }
                    Value += '</select>';
                } else if (index_name.includes('Motor')) {
                    Value = '   指定轉速 : ' + 
                            ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="-50" max="50" step="5" value="20" oninput="showMotorValue(\'' + obj_num + '\', this.value)" onchange="showMotorValue(\'' + obj_num + '\', this.value)">' + 
                            ' <span id="motorValue_text' + obj_num + '">20rpm</span>';
                } else if (index_name === '' || index_name == undefined) {
                } else {
                    Value = '<select id="do_act' + obj_num + '">' + 
                            '<option value="on">on</option>' + 
                            '<option value="off">off</option>' + 
                            '</select>';
                }
                // try {
                //     Value = '<select id="do_act' + obj_num + '">';
                //     for(var i=0; i<dry_object[index].length; i++){
                //         Value += '<option value=' + dry_object[index][i] + '>' + dry_object[index][i] + '</option>';
                //     }
                //     Value += '</select>';
                // } catch (e) {
                //     if (e.name == 'TypeError' && index == '5') {
                //         Value = '   轉速 : ' + 
                //                 ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="-50" max="50" step="5" value="0" oninput="showMotorValue(\'' + obj_num + '\', this.value)" onchange="showMotorValue(\'' + obj_num + '\', this.value)">' + 
                //                 ' <span id="motorValue_text' + obj_num + '">0</span>';
                //     } else if (e.name == 'TypeError' && index == '11') {
                //         Value = '   目標溫度 : ' + 
                //                 ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="20.0" max="50.0" step="0.5" value="28.0" oninput="showTempValue(\'' + obj_num + '\', this.value)" onchange="showTempValue(\'' + obj_num + '\', this.value)">' + 
                //                 ' <span id="tempValue_text' + obj_num + '">28.0</span>';
                //     } else if (e.name == 'TypeError' && index == '18') {
                //         Value = '   暫停秒數 : ' + 
                //                 ' <input type="range" style="cursor: pointer;" id="do_act' + obj_num + '" min="5" max="60" step="5" value="10" oninput="showSleepValue(\'' + obj_num + '\', this.value)" onchange="showSleepValue(\'' + obj_num + '\', this.value)">' + 
                //                 ' <span id="sleepValue_text' + obj_num + '">10s</span>';
                //     }
                // }

                var sectorSelect = document.getElementById("do_action" + obj_num);
                if (sectorSelect != null) {
                    sectorSelect.innerHTML = Value;
                }
            }

            function showSleepValue(obj_num, value) {
                document.getElementById("sleepValue_text" + obj_num).innerText = value + 's';
            }
            function showMotorValue(obj_num, value) {
                document.getElementById("motorValue_text" + obj_num).innerText = value + 'rpm';
            }
            function showSensorHzValue(obj_num, value) {
                document.getElementById(obj_num + "_HzText").innerText = value + ' 秒/次';
            }
        </script>


        <script>
            var cond_main = '';                 // 主條件
            var cond_add_list = [];             // 附加條件 List
            var cond_add_data = '';             // 欲加入附加條件的資料
            var cond_com_list = [];             // 動作 List
            var cond_com_data = '';             // 欲加入動作的資料
            var cond_item = [];                 // 主條件+附加條件+動作 List

            function showValue() {
                cond_item = [];
                var command_test = '';
                Z = 0;
                TT = {};                            // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
                var SQL_insert_total = '';          // MySQL 指令 全部條件輸出

                TT['mainLength'] = 0                    // 總條件數
                TT['addLength'] = 0                     // 子條件數
                TT['comLength'] = 0                     // 子物件數

                // 條件物件動作 取值
                // for (let z = 1; z <= 2; z++) {
                for (let z = 1; z <= new_condition_i; z++) {
                    
                    var set_key = [];                   // List 加入變數名稱, INSERT DB 用
                    var set_value = [];                 // List 加入值, INSERT DB 用

                    // 初始清空
                    cond_main = '';
                    // if-while 取值
                    try {
                        var cond_z_value = document.getElementById("cond_z" + z + "_1").value;
                        if (cond_z_value == '') {
                            // alert('if/while 欄位未輸入')
                        } else {
                            Z = Z + 1;
                            // if (Z > 4) {
                            //     alert("[Z > 4] 總條件數不得超過 3 項")
                            //     break
                            // }
                            // set_key.push('cond_z' + z + '_1');
                            set_key.push('cond_z' + Z + '_1');
                            set_value.push(cond_z_value);
                            console.log("cond_z_value: " + cond_z_value);
                            cond_main += cond_z_value + ' ';
                            console.log("cond_main: " + cond_main);
                        }
                    } catch (error) {
                        if (error.name == 'TypeError') {
                        } else {
                            alert("cond_z" + z + "_1: " + error.name)
                        }
                    }
                    X = 1;
                    cond_add_list = []; // 附加條件 List 清空
                    for (let x = 1; x <= cond_add_child_i; x++) {
                    // for (let x = 1; x <= cond_add_child_i; x++) {
                        cond_add_data = '';  // 附加條件資料 清空
                        if (x == 1) {
                            // 主條件
                            try {
                                var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
                                if (cond_a_value == '') {
                                    // alert('主條件 感測器 欄位未輸入')
                                } else {
                                    // set_key.push('cond_a' + z + '_' + X);
                                    set_key.push('cond_a' + Z + '_' + X);
                                    set_value.push(cond_a_value);
                                    console.log("cond_a_value: " + cond_a_value);
                                    cond_main += cond_a_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_a" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件中 > = <
                            try {
                                var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
                                if (cond_b_value == '') {
                                    // alert('主條件 比較運算子 欄位未輸入')
                                } else {
                                    // set_key.push('cond_b' + z + '_' + X);
                                    set_key.push('cond_b' + Z + '_' + X);
                                    set_value.push(cond_b_value);
                                    console.log("cond_b_value: " + cond_b_value);
                                    // if (cond_b_value == 'MoreThan') { cond_main += '> '; }
                                    // else if (cond_b_value == 'MoreThanEqualTo') { cond_main += '>= '; }
                                    // else if (cond_b_value == 'Equal') { cond_main += '== '; }
                                    // else if (cond_b_value == 'LessThanEqualTo') { cond_main += '<= '; }
                                    // else if (cond_b_value == 'LessThan') { cond_main += '< '; }
                                    cond_main += cond_b_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_b" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件右 ON / OFF / 輸入數值
                            try {
                                var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
                                if (cond_c_value == '') {
                                    // alert('主條件 數值 欄位未輸入')
                                } else {
                                    // console.log("Ctest: " + typeof(cond_c_value))
                                    set_key.push('cond_c' + Z + '_' + X);
                                    set_value.push(cond_c_value);
                                    console.log("cond_c_value: " + cond_c_value);
                                    if (relay_obj2act['tankstatus'].includes(cond_c_value)) {
                                        cond_main += "'" + cond_c_value + "'";
                                    } else {
                                        cond_main += cond_c_value;
                                    }
                                    // set_key.push('cond_c' + z + '_' + X);
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_c" + z + "_" + x + ": " + error.name)
                                }
                            }
                        } else {
                            // 附加條件 x > 1
                            // 子條件取值 : 條件連接 and or
                            try {
                                var cond_d_value = document.getElementById("cond_d" + z + "_" + x).value;
                                if (cond_d_value == '') {
                                    // alert('附加條件 and/or 欄位未輸入')
                                } else {
                                    X = X + 1;
                                    // if (X > 13) {
                                    //     alert("[X > 13] 子條件數不得超過 13 項")
                                    //     break
                                    // }
                                    // set_key.push('cond_d' + z + '_' + X);
                                    set_key.push('cond_d' + Z + '_' + X);
                                    set_value.push(cond_d_value);
                                    cond_add_data += cond_d_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_d" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 感測器取值 : 
                            try {
                                var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
                                if (cond_a_value == '') {
                                    // alert('附加條件 感測器 欄位未輸入')
                                } else {
                                    // set_key.push('cond_a' + z + '_' + X);
                                    set_key.push('cond_a' + Z + '_' + X);
                                    set_value.push(cond_a_value);
                                    cond_add_data += cond_a_value + ' ';
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_a" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件中 > = <
                            try {
                                var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
                                if (cond_b_value == '') {
                                    // alert('附加條件 比較運算子 欄位未輸入')
                                } else {
                                    // set_key.push('cond_b' + z + '_' + X);
                                    set_key.push('cond_b' + Z + '_' + X);
                                    set_value.push(cond_b_value);
                                    // if (cond_b_value == 'MoreThan') { cond_main += '> '; }
                                    // else if (cond_b_value == 'MoreThanEqualTo') { cond_main += '>= '; }
                                    // else if (cond_b_value == 'Equal') { cond_main += '== '; }
                                    // else if (cond_b_value == 'LessThanEqualTo') { cond_main += '<= '; }
                                    // else if (cond_b_value == 'LessThan') { cond_main += '< '; }
                                    cond_add_data += cond_b_value;
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_b" + z + "_" + x + ": " + error.name)
                                }
                            }
                            // 子條件取值 : 條件右 ON / OFF / 輸入數值
                            try {
                                var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
                                if (cond_c_value == '') {
                                    // alert('附加條件 數值 欄位未輸入')
                                } else {
                                    // console.log("Ctest: " + cond_c_value)
                                    set_key.push('cond_c' + Z + '_' + X);
                                    set_value.push(cond_c_value);
                                    if (relay_obj2act['tankstatus'].includes(cond_c_value)) {
                                        cond_add_data += " '" + cond_c_value + "'";
                                    } else {
                                        cond_add_data += " " + cond_c_value;
                                    }
                                    // set_key.push('cond_c' + z + '_' + X);
                                }
                            } catch (error) {
                                if (error.name == 'TypeError') {
                                } else {
                                    alert("cond_c" + z + "_" + x + ": " + error.name)
                                }
                            }
                            if (cond_add_data != '') {
                                console.log("cond_add_list: " + cond_add_list)
                                console.log("cond_add_data: " + cond_add_data)
                                cond_add_list.push(cond_add_data)
                            }
                        }
                    }

                    // 子 物件動作 取值
                    Y = 0;
                    cond_com_list = [];
                    for (let y = 1; y <= act_add_child_i; y++) {
                        cond_com_data = '';
                        // 子物件動作取值 : 物件 do_obj1_1
                        try {
                            var do_obj_value = document.getElementById("do_obj" + z + "_" + y).value;
                            // console.log("do_obj" + z + "_" + y + " : " + do_obj_value)
                            if (do_obj_value == '') {
                                // alert('物件 欄位未輸入')
                            } else {
                                Y = Y + 1;
                                // if (Y > 20) {
                                //     alert("[Y > 20] 子物件數不得超過 20 項")
                                //     break
                                // }
                                set_key.push('do_obj' + Z + '_' + Y);
                                set_value.push(do_obj_value);
                                cond_com_data += do_obj_value + ' ';
                            }
                        } catch (error) {
                            if (error.name == 'TypeError') {
                            } else {
                                alert("do_obj" + z + "_" + y + ": " + error.name)
                            }
                        }

                        // 子物件動作取值 : 動作 do_act1_1
                        try {
                            var do_act_value = document.getElementById("do_act" + z + "_" + y).value;
                            // console.log("do_act" + z + "_" + y + " : " + do_act_value)
                            if (do_act_value == '') {
                                // alert('動作 欄位未輸入')
                            } else {
                                set_key.push('do_act' + Z + '_' + Y);
                                // if (DRY_CONTAINER_STATUS[do_act_value] != undefined ) {
                                //     console.log("=== != undefined ===")
                                //     console.log(DRY_CONTAINER_STATUS[do_act_value])
                                //     set_value.push(DRY_CONTAINER_STATUS[do_act_value]);
                                //     cond_com_data += DRY_CONTAINER_STATUS[do_act_value];

                                //     cond_com_list.push(cond_com_data);
                                // } else {
                                set_value.push(do_act_value);
                                cond_com_data += do_act_value;
                                cond_com_list.push(cond_com_data);
                                // }
                            }
                        } catch (error) {
                            if (error.name == 'TypeError') {
                            } else {
                                alert("do_act" + z + "_" + y + ": " + error.name)
                            }
                        }
                    }
                    // ===== 0324 測試 OK 勿刪 ===================================================
                    var A = 1;
                    var B = 1;
                    console.log("cond_add_list: " + cond_add_list);
                    console.log("cond_com_list: " + cond_com_list);
                    if (cond_main != '') {
                        TT['cond_main' + Z] = cond_main;
                        for (let a = 0; a < cond_add_list.length; a++) {
                            TT['cond_add'+ Z + '_' + A] = cond_add_list[a];
                            A = A + 1;
                        }
                        for (let b = 0; b < cond_com_list.length; b++) { 
                            TT['cond_com'+ Z + '_' + B] = cond_com_list[b]; 
                            B = B + 1;
                        }

                        cond_item.push(
                                '{"cond_main":"' + cond_main + '", ' + 
                                '"cond_add":["' + cond_add_list.join('", "') + '"], ' + 
                                '"cond_com":["' + cond_com_list.join('", "') + '"]}'
                        )
                    }
                    console.log("cond_add_list.length: " + cond_add_list.length + "__" + typeof(cond_add_list.length))
                    console.log("TT['addLength']: " + TT['addLength'] + "__" + typeof(TT['addLength']))
                    if (cond_add_list.length > TT['addLength']) {
                        TT['addLength'] = cond_add_list.length
                    }
                    if (cond_com_list.length > TT['comLength']) {
                        TT['comLength'] = cond_com_list.length
                    }
                    
                }

                // ========================================================
                TT['mainLength'] = Z
                
                console.log("***TT['mainLength']: " + TT['mainLength']);
                console.log("***TT['addLength']: " + TT['addLength']);
                console.log("***TT['comLength']: " + TT['comLength']);
                TT['tank_num'] = $('#prog_tank').find(':selected').val();
                // ========================================================

                //document.getElementById('show_Value').innerText = '"cond": [' + cond_item + ']';   
            }

            function getValue(){
                var confirm_getValue = confirm("請確認積木條件無誤後, 再按下 [確認] :");
                if (!confirm_getValue) {
                    alert("已取消積木取值測試");
                } else {
                    showValue();          
                }
            }

            function MQTTgetValue() {
                var confirm_getValue = confirm("請確認積木條件無誤後, 再按下 [確認] :");
                if (!confirm_getValue) {
                    alert("已取消積木取值測試");
                } else {
                    showValue();
                    var msg_data;
                    var USERNAME = '{{username}}';
                    $.get('/dry_block_format', TT, function (res) {
                        //alert("MQTT OK")
                        document.getElementById('show_MQTTcommand').innerText = JSON.stringify(res.response);
                        msg_data = JSON.stringify(res.response);
                        // 存值
                        var prog_tank_data = $('#prog_tank').find(':selected').val();
                        var SQL_insert = 'INSERT INTO `block_cond_dry_t` (' + 
                                        '`datetime`, `UserName`, `tank_num`, `cond`) VALUES (' + 
                                        'current_timestamp(), \'' + USERNAME + '\', \'' + prog_tank_data + '\', \'' 
                                        + String(msg_data).replaceAll("'", "") + '\');';
                        console.log("SQL_insert: " + SQL_insert);
                        sql_data = { "sql" : SQL_insert };
                        $.get('/sql_get', sql_data, function (res) {
                             //alert("OK")
                        }, 'json');

                    }, 'json');
                }
            }
        </script>

        <!-- 條件物件 ++ -- -->
        <script>
            function act_add(evt) {
                evt.style.display = "none";
                var actadd_parent_num = String(evt.id).split('_')[1].slice(3, )
                // console.log("actadd_parent_num: " + actadd_parent_num)

                act_add_child_i++;

                var html = '';
                html +=
                '<div id="action' + actadd_parent_num + '_' + act_add_child_i + '">' +
                '物件 ' +
                '<select id="do_obj' + actadd_parent_num + '_' + act_add_child_i + '" onChange="renew(\'' + actadd_parent_num + '_' + act_add_child_i + '\', this.selectedIndex);">' +
                // '<option value=" ">制動器 / 暫停秒數 / 桶槽狀態</option>' +
                pin_data_relay_option + 
                // '<option value="input_vacuum_status">入料儲豆槽真空吸料機</option>' +
                // '<option value="tank_vacuum_status">真空吸料機</option>' +
                // '<option value="tank_threewayvalve_vacuum_status">吸料機三通閥</option>' +
                // '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
                // '<option value="tank_motor_status">馬達</option>' +
                // '<option value="outer_solenoid_water_status">桶外進水電磁閥</option>' +
                // '<option value="tank_solenoid_water_out_status">廢水排水電磁閥</option>' +
                // '<option value="tank_heater1_status">加熱棒 1</option>' +
                // '<option value="tank_heater2_status">加熱棒 2</option>' +
                // '<option value="tank_temp_enable">溫控開關</option>' +
                // '<option value="tank_temp">溫度設定</option>' +
                // '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
                // '<option value="output_vacuum_status">出料儲豆槽真空吸料機</option>' +
                // '<option value="tank_magneticSwitch_status">電磁開關</option>' +
                // '<option value="tank_emergencySwitch_status">緊急開關</option>' +
                // '<option value="tank_camera_status">攝影機</option>' +
                // '<option value="tank_warningLight_status">警示燈</option>' +
                '</select> ' +
                '動作 ' +
                '<div id="do_action' + actadd_parent_num + '_' + act_add_child_i + '" style="display: inline-block;">' +
                '</div>' +
                // '<select id="do_act' + actadd_parent_num + '_' + act_add_child_i + '">' +
                // '<option value="">請由左方選取物件</option>' +
                // '</select> ' +
                '<input type="button" class="input-act-delete" id="act_del' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作--" onclick="act_del(\'' + actadd_parent_num + '_' + act_add_child_i + '\');">' +
                '<input type="button" class="input-act-add" id="act_add' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + actadd_parent_num + '_' + act_add_child_i + ');"><br>' +
                '</div>';

                var divbox = document.getElementById('action' + actadd_parent_num);
                divbox.insertAdjacentHTML('beforeend', html);
            }

            function act_del(evt) {
                var del_action = document.getElementById('action' + evt);
                del_action.innerHTML = ""

                var parentObj = del_action.parentNode;       // 取得欲刪除 div 的父類別
                parentObj.removeChild(del_action)            // 刪除 div
                
                var del_act_parent_num = String(evt).split('_')[0]
                var del_act_child_num = String(evt).split('_')[1]
                // console.log('del_act_parent_num: ' + del_act_parent_num)
                // console.log('del_act_child_num: ' + del_act_child_num)
                var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1));
                // console.log("test: " + 'cond_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1))
                // console.log("button_return_id: " + button_return_id)    // null
                if (button_return_id == null) {
                    var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_1');
                }
                button_return_id.style.display = "inline";

            }   
            // --------------------------------------------------------------------------------------------------
            
            
                    
            function cond_add(evt) {                                                // cond_add1_1 下一個是 cond_add1(條件)_2(子條件)
                evt.style.display = "none";                                         // 不顯示原按鈕
                var condadd_parent_num = String(evt.id).split('_')[1].slice(3, )    // 把第一個條件的編號記下
                // console.log("condadd_parent_num: " + condadd_parent_num)

                cond_add_child_i++

                var html = '';
                html +=
                '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                '<option value=""></option>' + 
                '<option value="&&">&&</option>' + 
                '<option value="||">||</option>' + 
                '</select> ' + 
                '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                pin_data_sensor_option + 
                '<option value="tankstatus">tankstatus</option>' +
                '</optgroup>' + 
                '</select> ' + 
                '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                '<option value=""></option>' + 
                '<option value=">">&gt;</option>' + 
                '<option value=">=">&gt;=</option>' + 
                '<option value="==">==</option>' + 
                '<option value="<=">&lt;=</option>' + 
                '<option value="<">&lt;</option>' + 
                '</select> ' +
                '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
                '<option value="on">ON</option>' +
                '<option value="off">OFF</option>' +
                '<option value="">(或請自行輸入數值)</option>' +
                '<option value="Waiting">空桶等待</option>' +
                '<option value="InputtingBean">入豆中</option>' +
                '<option value="InputtingBean_Pause">入豆暫停</option>' +
                '<option value="InputtingBean_Finish">入豆完成</option>' +
                '<option value="InputtingWater">夾層入水</option>' +
                '<option value="Drying">乾燥中</option>' +
                '<option value="Drying_Finish">乾燥完成</option>' +
                '<option value="OutputtingBean">可出豆</option>' +
                '<option value="OutputtingBean_Finish">出豆完成</option>' +
                '</datalist> ' +
                '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">' +
                '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>' +
                '</div>';

                var divbox = document.getElementById('condition' + condadd_parent_num);
                divbox.insertAdjacentHTML('beforeend', html);
            }

            function cond_del(evt) {
                // console.log('evt: ' + evt)
                var del_cond_child = document.getElementById('condition' + evt);
                // console.log("del_cond_child: " + del_cond_child)
                del_cond_child.innerHTML = ""

                var parentObj = del_cond_child.parentNode;       // 取得欲刪除 div 的父類別
                parentObj.removeChild(del_cond_child)            // 刪除 div

                // 上一個按鈕要顯示出來
                var del_cond_parent_num = String(evt).split('_')[0]
                var del_cond_child_num = String(evt).split('_')[1]
                console.log('del_cond_parent_num: ' + del_cond_parent_num)
                console.log('del_cond_child_num: ' + del_cond_child_num)
                var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1));
                console.log("test: " + 'cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1))
                console.log("button_return_id: " + button_return_id)    // null
                if (button_return_id == null) {
                    var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_1');
                }
                try {
                    button_return_id.style.display = "inline";
                } catch (error) {
                    if (error.name !== 'TypeError') {
                        alert("cond_add" + del_cond_parent_num + "_" + String(parseInt(del_cond_child_num)-1) + " 子條件刪除錯誤\n" + 
                                error.name + "\n" + 
                                error.message);
                    }
                }
                
            }

            // -------------------------------------------------------------------------------------------------------------


            

            function Add(evt) {                                 // 網頁初始按鈕 onclick="Add(add1);
                evt.style.display = "none";                     // 元素不顯示。將 add1 的 input-button 不顯示
                new_condition_i++;                                            // 設定編號用
                // var div = document.createElement('div');        // 輸出 <div></div>。此時並不會顯示, 
                                                                // 需透過 appendChild()、insertBefore() 或 replaceChild() 等方法將新元素加入至指定的位置之後才會顯示。
                // var cond_number = String(evt).slice(3, )        // 目前的 condition 條件物件動作 數 (最外層)
                // var cond_a = 'cond_a' + cond_number + '_' + new_condition_i;  // [條件] 左方 : 制動器感測器
                // var cond_b = 'cond_b' + cond_number + '_' + new_condition_i;  // [條件] 中間 : > / = / < 
                // var cond_c = 'cond_c' + cond_number + '_' + new_condition_i;  // [條件] 右方 : ON / OFF / 數值
                // var cond_d = 'cond_d' + cond_number + '_' + new_condition_i;  // 條件] 最左方條件連接 : and / or
                // div.id = 'newcondition_' + new_condition_i;                   // 設定 div 的 id
                // div.style.marginTop = "10px";                   // 新增的 div 設定 marginTop 屬性值
                var html = ''

                

                // 新增的條件
                html += 
                '<div id="newcondition_' + new_condition_i + '" class="newcondition_css">' +
                
                // 新增的分隔線
                // '<hr size="50" width="100%">' +


                '<div id="condition' + new_condition_i + '">' +
                '<div id="condition' + new_condition_i + '_1">' +
                '條件 ' +
                '<select id="cond_z' + new_condition_i + '_1">' +
                '<option value="if">if</option>' +
                '<option value="else if">else if</option>' +
                '<option value="else">else</option>' +
                '</select> ' +
                '<select id="cond_a' + new_condition_i + '_1">' +
                pin_data_sensor_option + 
                '<option value="tankstatus">tankstatus</option>' +
                '</optgroup>' + 
                '</select> ' +
                '<select id="cond_b' + new_condition_i + '_1">' +
                '<option value=""></option>' + 
                '<option value=">">&gt;</option>' + 
                '<option value=">=">&gt;=</option>' + 
                '<option value="==">==</option>' + 
                '<option value="<=">&lt;=</option>' + 
                '<option value="<">&lt;</option>' + 
                '</select> ' +
                '<input list="cond_list_c' + new_condition_i + '_1" id="cond_c' + new_condition_i + '_1">' +
                '<datalist id="cond_list_c' + new_condition_i + '_1">' +
                '<option value="on">ON</option>' +
                '<option value="off">OFF</option>' +
                '<option value="">(或請自行輸入數值)</option>' +
                '<option value="Waiting">空桶等待</option>' +
                '<option value="InputtingBean">入豆中</option>' +
                '<option value="InputtingBean_Pause">入豆暫停</option>' +
                '<option value="InputtingBean_Finish">入豆完成</option>' +
                '<option value="InputtingWater">夾層入水</option>' +
                '<option value="Drying">乾燥中</option>' +
                '<option value="Drying_Finish">乾燥完成</option>' +
                '<option value="OutputtingBean">可出豆</option>' +
                '<option value="OutputtingBean_Finish">出豆完成</option>' +
                '</datalist> ' +
                '<input type="button" class="input-cond-add" id="cond_add' + new_condition_i + '_1" value="條件++" onclick="cond_add(cond_add' + new_condition_i + '_1)"><br>' +
                '</div></div>';

                // 新增的物件動作
                html +=
                '<div id="action' + new_condition_i + '">' +
                '<div id="action' + new_condition_i + '_1">' +
                '物件 ' +
                '<select id="do_obj' + new_condition_i + '_1" onChange="renew(\''+ new_condition_i + '_1\', this.selectedIndex);">' +
                pin_data_relay_option + 
                '</select>' +
                '動作 ' +
                '<div id="do_action' + new_condition_i + '_1" style="display: inline-block;">' +
                '</div>' +
                '<input type="button" class="input-act-add" id="act_add' + new_condition_i + '_1" value="物件動作++" onclick="act_add(act_add' + new_condition_i + '_1);"><br>' +
                '</div>' +
                '</div>' +

                // 新增的 條件物件動作++ 條件物件動作-- 按鈕
                '<input type="button" class="input-delete" id="del' + new_condition_i + '" value="條件物件動作--" onclick="Delete(' + new_condition_i + ');"><br>' +
                '<input type="button" class="input-add" id="add' + new_condition_i + '" value="條件物件動作++" onclick="Add(add' + new_condition_i + ');">' +
                '</div>' ;

                var divbox = document.getElementById('box');
                divbox.insertAdjacentHTML('beforeend', html);

            };
            function Delete(evt) {
                var del_condition = document.getElementById('newcondition_' + evt);
                del_condition.innerHTML = ""

                var parentObj = del_condition.parentNode;       // 取得欲刪除 div 的父類別
                parentObj.removeChild(del_condition)            // 刪除 div

                // 上一個按鈕要顯示出來
                var button_return_id = document.getElementById('add' + String(parseInt(evt)-1));
                if (button_return_id == null) {
                    var button_return_id = document.getElementById('add1');
                }
                // console.log('button_return_id: ' + button_return_id)
                button_return_id.style.display = "block";        // 元素顯示。顯示前一個 input-button
            };
            // -------------------------------------------------------------------------------------- 
        </script>
        
        <!-- 燒錄通訊器互動視窗 -->
        <div class="modal fade" id="control_RF_Modal">
            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_RF_title_input" class="modal-title"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a>通訊介面</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="3">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>                                                                                                                       
                                                ethernet :   
                                                <select id="select_ethernet_1" onchange="" class="select-input">
                                                  <option>OFF</option>
                                                  <option>ON</option>
                                                </select>
                                                <!--<span id="tank_vacuum_t_status"></span>-->
                                            </td>
                                            <td>
                                                Wi-Fi :   
                                                <select id="select_wifi_1" onchange="" class="select-input">
                                                  <option>OFF</option>
                                                  <option>ON</option>
                                                </select>
                                            </td>
                                            <td>
                                                zigbee :   
                                                <select id="select_zigbee_1" onchange="" class="select-input">
                                                  <option>OFF</option>
                                                  <option>ON</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>



        <!-- 燒錄致動器互動視窗 -->
        <div class="modal fade" id="control_Modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_title_input" class="modal-title"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="4">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a id="actuator_link_input" >致動器</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="4">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                Relay1:
                                                <br>    
                                                <select id="select_relay_1" onchange="select_relay('1')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay2:
                                                <br>    
                                                <select id="select_relay_2" onchange="select_relay('2')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay3:
                                                <br>    
                                                <select id="select_relay_3" onchange="select_relay('3')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay4:
                                                <br>    
                                                <select id="select_relay_4" onchange="select_relay('4')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                    </table>
                                    <table style="border:0px gray solid;" cellpadding="4">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                Relay5:
                                                <br>   
                                                <select id="select_relay_5" onchange="select_relay('5')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay6: 
                                                <br>   
                                                <select id="select_relay_6" onchange="select_relay('6')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay7: 
                                                <br>   
                                                <select id="select_relay_7" onchange="select_relay('7')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay8: 
                                                <br>   
                                                <select id="select_relay_8" onchange="select_relay('8')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                    </table>
                                    <table style="border:0px gray solid;" cellpadding="4">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                Relay9:    
                                                <br>
                                                <select id="select_relay_9" onchange="select_relay('9')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay10: 
                                                <br>   
                                                <select id="select_relay_10" onchange="select_relay('10')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay11:  
                                                <br>  
                                                <select id="select_relay_11" onchange="select_relay('11')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay12:  
                                                <br>  
                                                <select id="select_relay_12" onchange="select_relay('12')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                    </table>
                                    <table style="border:0px gray solid;" cellpadding="4">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                Relay13: 
                                                <br>   
                                                <select id="select_relay_13" onchange="select_relay('13')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay14: 
                                                <br>   
                                                <select id="select_relay_14" onchange="select_relay('14')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay15:
                                                <br>    
                                                <select id="select_relay_15" onchange="select_relay('15')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay16: 
                                                <br>   
                                                <select id="select_relay_16" onchange="select_relay('16')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                    </table>
                                    <table style="border:0px gray solid;" cellpadding="4">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                                Relay17:  
                                                <br>  
                                                <select id="select_relay_17" onchange="select_relay('17')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay18: 
                                                <br>   
                                                <select id="select_relay_18" onchange="select_relay('18')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay19:
                                                <br>    
                                                <select id="select_relay_19" onchange="select_relay('19')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                            <td>
                                                Relay20:
                                                <br>    
                                                <select id="select_relay_20" onchange="select_relay('20')" class="select-input">
                                                  <option></option>
                                                  <option value="vacuum">真空吸料機</option>
                                                  <option value="solenoid_reclaimed_in">中水入水</option>
                                                  <option value="solenoid_water_in">清水入水</option>
                                                  <option value="pump_water_in">幫浦</option>
                                                  <option value="solenoid_water_out">排水廢水</option>
                                                  <option value="solenoid_reclaimed_out">排水中水</option>
                                                  <option value="solenoidvalve_disinfect">桶內消毒</option>
                                                  <option value="pump_disinfect">混合槽幫浦</option>
                                                  <option value="diskvalve">蝴蝶閥</option>
                                                  <option value="pump_reclaimed_out">入水清洗槽幫浦</option> 
                                                  <option value="solenoid_outer_water">保溫夾層進水</option>
                                                  <option value="solenoid_tank_pump">逆洗幫浦</option> 
                                                  <option value="pump_sensor">雙核隔膜泵</option> 
                                                  <option value="warninglight">警示燈</option>
                                                  <option value="camera">攝影機</option>
                                                  <option value="heater1">加熱器</option>
                                                  <option value="heater2">加熱器</option>
                                                  <option value="vacuum_pump">乾燥真空機</option>
                                                  <option value="nozzle">喷嘴</option>
                                                </select>
                                            </td>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 燒錄感測器互動視窗 -->
        <div class="modal fade" id="control_sensor_Modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_sensor_title_input" class="modal-title"></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <table style="border:0px gray solid; width: 100%;" cellpadding="4">
                            <!--<table style="border:0px gray solid;-->
                            <tr>
                                <td><strong><a>感測器</a></strong></td>
                            </tr>
                            <tr>
                                <td style="vertical-align:text-top;">
                                    <table style="border:0px gray solid;" cellpadding="4">
                                        <!--font-size:12px; -->
                                        <tr>
                                            <td>
                                             類比 M4 : 
                                             <br>
                                             <select id="selectSensor_M4" onchange="selectSensor('M4')" class="select-input">
                                               <option></option>  
                                               <option value="PH">PH計</option>
                                               <option value="DO">DO計</option>
                                               <option value="ORP">ORP計</option>
                                             </select>
                                            <br>
                                            類比 M5 : 
                                            <br>
                                            <select id="selectSensor_M5" onchange="selectSensor('M5')" class="select-input">
                                               <option></option>  
                                               <option value="PH">PH計</option>
                                               <option value="DO">DO計</option>
                                               <option value="ORP">ORP計</option>
                                            </select>
                                            <br>
                                            類比 M7 : 
                                            <br>
                                            <select id="selectSensor_M7" onchange="selectSensor('M7')"  class="select-input">
                                               <option></option>  
                                               <option value="PH">PH計</option>
                                               <option value="DO">DO計</option>
                                               <option value="ORP">ORP計</option>
                                            </select>
                                            <br>
                                            數位 M9 :
                                            <br>
                                            <select id="selectSensor_M9" onchange="selectSensor('M9')" class="select-input">
                                                <option></option>
                                                <option value="WATERLEVEL">水位計</option>
                                                <option value="motorfeedback">馬達編碼器</option>
                                                <option value="butterflyvalvefeedback">蝴蝶閥編碼器</option>
                                            </select>
                                            <br>
                                            數位 M12 :
                                            <br>
                                            <select id="selectSensor_M12" onchange="selectSensor('M12')" class="select-input">
                                                <option></option>
                                                <option value="WATERLEVEL">水位計</option>
                                                <option value="motorfeedback">馬達編碼器</option>
                                                <option value="butterflyvalvefeedback">蝴蝶閥編碼器</option>
                                            </select>
                                            <br>
                                            數位 M19 :
                                            <br>
                                            <select id="selectSensor_M19" onchange="selectSensor('M19')" class="select-input">
                                               <option></option>
                                               <option value="WATERLEVEL">水位計</option>
                                               <option value="motorfeedback">馬達編碼器</option>
                                               <option value="butterflyvalvefeedback">蝴蝶閥編碼器</option>
                                            </select>
                                            </td>  
                                            <td> 
                                            PWM M10 :
                                            <br>
                                            <select id="selectSensor_M10" onchange="selectSensor('M10')" class="select-input">
                                               <option></option>
                                               <option value="Motor">馬達</option>
                                            </select>
                                            <br>                                            
                                             PWM M2 :
                                             <br>
                                            <select id="selectSensor_M2" onchange="selectSensor('M2')" class="select-input">
                                               <option></option>
                                               <option value="Servo">三通閥</option>
                                            </select>
                                            <br>
                                            PWM M3 :
                                            <br>
                                            <select id="selectSensor_M3" onchange="selectSensor('M3')" class="select-input">
                                               <option></option>
                                               <option value="Servo">三通閥</option>
                                            </select>  
                                            <br>
                                             數位 M14 :
                                             <br>
                                            <select id="selectSensor_M14" onchange="selectSensor('M14')" class="select-input">
                                               <option></option>
                                               <option value="SHT11">溫溼度</option>
                                               <option value="DS18B20">水溫計</option>
                                            </select> 
                                            <br>                                          
                                            數位 M11 :
                                            <br>
                                            <select id="selectSensor_M11" onchange="selectSensor('M11')" class="select-input">
                                               <option></option>
                                               <option value="WATERLEVEL">水位計</option>
                                               <option value="motorfeedback">馬達編碼器</option>
                                               <option value="butterflyvalvefeedback">蝴蝶閥編碼器</option>
                                            </select>                                                                                                                     
                                            </td>      
                                            <td>
                                            UART M16 :
                                            <br>
                                            <select id="selectSensor_M16" onchange="selectSensor('M16')" class="select-input">
                                               <option></option>
                                               <option value="EC">EC計</option>
                                               <option value="DS18B20">水溫計</option>
                                               <option value="Servo">真空閥</option>
                                            </select>
                                            <br>
                                            UART M17 :
                                            <br>
                                            <select id="selectSensor_M17" onchange="selectSensor('M17')" class="select-input">
                                               <option></option>
                                               <option value="SHT11">溫溼度</option>
                                               <option value="Servo">真空閥</option>
                                            </select>  
                                            <br> 
                                            UART M18 :
                                            <br>
                                            <select id="selectSensor_M18" onchange="selectSensor('M18')" class="select-input">
                                               <option></option>
                                               <option>未定義</option>
                                            </select>  
                                            <br>
                                            I2C M15:
                                            <br>
                                            <select id="selectSensor_M15" onchange="selectSensor('M15')" class="select-input">
                                               <option></option>
                                               <option value="BMP280">大氣壓力計</option>
                                            </select>  
                                            <br>
                                            485 M8:
                                            <br>
                                            <select id="selectSensor_M8" onchange="selectSensor('M8')" class="select-input">
                                               <option></option>
                                               <option value="Soil">土壤檢測計</option>
                                            </select>                            
                                            </td>      
                                            <td>
                                            <br>
                                            <br>
                                            <br>
                                            <br>
                                             分壓類比 M6:
                                            <br>
                                            <select id="selectSensor_M6" onchange="selectSensor('M6')" class="select-input">
                                               <option></option>
                                               <option value="SEN0189">濁度計</option>
                                            </select>                                           
                                            <br>
                                            分壓類比 M13:
                                            <br>
                                            <select id="selectSensor_M13" onchange="selectSensor('M13')" class="select-input">
                                               <option></option>
                                               <option value="SEN0189">濁度計</option>
                                            </select>
                                            <br>
                                            分壓類比 M1:
                                            <br>
                                            <select id="selectSensor_M1" onchange="selectSensor('M1')" class="select-input">
                                               <option></option>
                                               <option value="SonicESMUS07">超音波</option>
                                            </select>                                                                                       
                                            </td>                              
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script2 %}        
<script>
            function update_data_crl(tid){
                $('#Modal_title_input').text("控制板 " + tid+"致動器腳位設定" )
                $('#control_Modal').modal('show');
            };
            function update_data_crl_sensor(tid){
                $('#Modal_sensor_title_input').text("控制板 " + tid+"感測器腳位設定" )
                $('#control_sensor_Modal').modal('show');
            };
            function update_data_crl_RF(tid){
                $('#Modal_RF_title_input').text("控制板 " + tid+"通訊設定" )
                $('#control_RF_Modal').modal('show');
            };
            var button_crl = document.getElementById('crl');
            button_crl.addEventListener('click', function () { update_data_crl(Tank_ID) });
            var button_crl_sensor = document.getElementById('crl_sensor');
            button_crl_sensor.addEventListener('click', function () { update_data_crl_sensor(Tank_ID) });
            var button_crl_RF = document.getElementById('crl_RF');
            button_crl_RF.addEventListener('click', function () { update_data_crl_RF(Tank_ID) });
</script> 

 <script>
    var toolbox = {
        "kind":"categoryToolbox",
        "contents":[
          {
            "kind":"category",
            "name":"Logic",
            "categorystyle":"logic_category",
            "contents":[
                  {
                    "kind":"block",
                    "type":"controls_if",
                  },
                  {
                    "kind":"block",
                    "type":"controls_if",
                    "extraState":{
                      "hasElse":"true"
                    }
                  },
                  {
                    "kind":"block",
                    "type":"controls_if",
                    "extraState":{
                      "hasElse":"true",
                      "elseIfCount":1
                    }
                  }
             ]
          },
          {
                "kind":"category",
                "name":"Boolean",
                "categorystyle":"logic_category",
                "contents":[
                  {
                    "kind":"block",
                    "type":"logic_compare"
                  },
                  {
                    "kind":"block",
                    "type":"logic_operation"
                  },
                  {
                    "kind":"block",
                    "type":"logic_negate"
                  },
                  {
                    "kind":"block",
                    "type":"logic_boolean"
                  },
                  {
                    "kind":"block",
                    "type":"logic_null"
                  },
                  {
                    "kind":"block",
                    "type":"logic_ternary"
                  }
                ]
          },
          {
            "kind":"category",
            "name":"Loops",
            "categorystyle":"loop_category",
            "contents":[
              {
                "kind":"block",
                "type":"controls_repeat_ext",
                "inputs":{
                  "TIMES":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":10
                      }
                    }
                  }
                }
              },
              {
                "kind":"block",
                "type":"controls_whileUntil"
              },
              {
                "kind":"block",
                "type":"controls_for",
                "fields":{
                  "VAR":"i"
                },
                "inputs":{
                  "FROM":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":1
                      }
                    }
                  },
                  "TO":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":10
                      }
                    }
                  },
                  "BY":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":1
                      }
                    }
                  }
                }
              },
              {
                "kind":"block",
                "type":"controls_forEach"
              },
              {
                "kind":"block",
                "type":"controls_flow_statements"
              }
            ]
          },
          {
            "kind":"category",
            "name":"Math",
            "categorystyle":"math_category",
            "contents":[
              {
                "kind":"block",
                "type":"math_number",
                "fields":{
                  "NUM":123
                }
              },
              {
                "kind":"block",
                "type":"math_arithmetic",
                "fields":{
                  "OP":"ADD"
                }
              },
              {
                "kind":"block",
                "type":"math_single",
                "fields":{
                  "OP":"ROOT"
                }
              },
              {
                "kind":"block",
                "type":"math_trig",
                "fields":{
                  "OP":"SIN"
                }
              },
              {
                "kind":"block",
                "type":"math_constant",
                "fields":{
                  "CONSTANT":"PI"
                }
              },
              {
                "kind":"block",
                "type":"math_number_property",
                "extraState":"<mutation divisor_input=\"false\"></mutation>",
                "fields":{
                  "PROPERTY":"EVEN"
                }
              },
              {
                "kind":"block",
                "type":"math_round",
                "fields":{
                  "OP":"ROUND"
                }
              },
              {
                "kind":"block",
                "type":"math_on_list",
                "extraState":"<mutation op=\"SUM\"></mutation>",
                "fields":{
                  "OP":"SUM"
                }
              },
              {
                "kind":"block",
                "type":"math_modulo"
              },
              {
                "kind":"block",
                "type":"math_constrain",
                "inputs":{
                  "LOW":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":1
                      }
                    }
                  },
                  "HIGH":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":100
                      }
                    }
                  }
                }
              },
              {
                "kind":"block",
                "type":"math_random_int",
                "inputs":{
                  "FROM":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":1
                      }
                    }
                  },
                  "TO":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":100
                      }
                    }
                  }
                }
              },
              {
                "kind":"block",
                "type":"math_random_float"
              },
              {
                "kind":"block",
                "type":"math_atan2"
              }
            ]
          },
          {
            "kind":"category",
            "name":"Lists",
            "categorystyle":"list_category",
            "contents":[
              {
                "kind":"block",
                "type":"lists_create_empty"
              },
              {
                "kind":"block",
                "type":"lists_create_with",
                "extraState":{
                  "itemCount":3
                }
              },
              {
                "kind":"block",
                "type":"lists_repeat",
                "inputs":{
                  "NUM":{
                    "block":{
                      "type":"math_number",
                      "fields":{
                        "NUM":5
                      }
                    }
                  }
                }
              },
              {
                "kind":"block",
                "type":"lists_length"
              },
              {
                "kind":"block",
                "type":"lists_isEmpty"
              },
              {
                "kind":"block",
                "type":"lists_indexOf",
                "fields":{
                  "END":"FIRST"
                }
              },
              {
                "kind":"block",
                "type":"lists_getIndex",
                "fields":{
                  "MODE":"GET",
                  "WHERE":"FROM_START"
                }
              },
              {
                "kind":"block",
                "type":"lists_setIndex",
                "fields":{
                  "MODE":"SET",
                  "WHERE":"FROM_START"
                }
              }
            ]
          },
          {
            "kind":"sep"
          },
          {
            "kind":"category",
            "name":"Text",
            "categorystyle":"text_category",
            "contents":[
                  {
                    "kind":"block",
                    "type":"text"
                  }
            ]
          },
          {
            "kind":"category",
            "name":"Variables",
            "categorystyle":"variable_category",
            "custom":"VARIABLE"
          },
          {
            "kind":"category",
            "name":"Functions",
            "categorystyle":"procedure_category",
            "custom":"PROCEDURE"
          },
        ]
      }
    var demoWorkspace = Blockly.inject('blocklyDiv',
        {media: '../static/media/',
         toolbox: toolbox});
  </script>    
{% endblock %}