<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <!--可用來建立使用者小圖示-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script language="JavaScript">
        $(function(){
            $("#coffee_title_pc").text("板子燒錄程式");
            $("#coffee_title_phone").text("板子燒錄程式");
            getValue();
            $('.select-input').prop('disabled', false);
        });
        var Z;
        var X;
        var Y;
        var TT = {};  // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
        // DRY_CONTAINER_STATUS 讓 do_act / dry_object 判斷用
        const DRY_CONTAINER_STATUS = {'空桶等待':'D_Waiting',
                                        '入豆中':'D_InputtingBean',
                                        '入豆暫停':'D_InputtingBean_Pause',
                                        '入豆完成':'D_InputtingBean_Finish',
                                        '夾層入水':'D_InputtingWater',
                                        '乾燥':'D_Drying',
                                        '可出豆':'D_OutputtingBean'}
        
    </script>
    <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;
        }
        .div_relay_css {
            position: absolute; 
            border-style: solid; 
            border-color: aqua; 
            text-align: center;
            font-size: 12px;
        }
        /* 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;
        }
    </style>
</head>

<body style="font-size: 18px;">
    <div id="wrapper" style="height: 1500px;">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>
        
        <!-- 底圖 板子 -->
        <div id="board_pic" class="boardpic_position">
            <!-- 無標示版本 -->
            <!-- <img src="../static/img/0103_board_coffee1.0.png" width="905px" style="margin: auto;">   -->
            <!-- 有標示版本 -->
            <img src="../static/img/0103_board_coffee1.0_tag.png" width="900px" style="margin: auto;">
        </div>

        <!-- relay1 顯示框 -->
        <div id="relay1" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 42px; width: 28px; height: 110px;">
        </div>
        <!-- relay2 顯示框 -->
        <div id="relay2" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 85px; width: 28px; height: 110px;">
        </div>
        <!-- relay3 顯示框 -->
        <div id="relay3" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 130px; width: 28px; height: 110px;">
        </div>
        <!-- relay4 顯示框 -->
        <div id="relay4" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 170px; width: 28px; height: 110px;">
        </div>
        <!-- relay5 顯示框 -->
        <div id="relay5" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 210px; width: 28px; height: 110px;">
        </div>
        <!-- relay6 顯示框 -->
        <div id="relay6" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 250px; width: 28px; height: 110px;">
        </div>
        <!-- relay7 顯示框 -->
        <div id="relay7" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 290px; width: 28px; height: 110px;">
        </div>
        <!-- relay8 顯示框 -->
        <div id="relay8" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 335px; width: 28px; height: 110px;">
        </div>
        <!-- relay9 顯示框 -->
        <div id="relay9" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 380px; width: 28px; height: 110px;">
        </div>
        <!-- relay10 顯示框 -->
        <div id="relay10" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 420px; width: 28px; height: 110px;">
        </div>
        <!-- relay11 顯示框 -->
        <div id="relay11" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 460px; width: 28px; height: 110px;">
        </div>
        <!-- relay12 顯示框 -->
        <div id="relay12" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 504px; width: 28px; height: 110px;">
        </div>
        <!-- relay13 顯示框 -->
        <div id="relay13" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 545px; width: 28px; height: 110px;">
        </div>
        <!-- relay14 顯示框 -->
        <div id="relay14" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 585px; width: 28px; height: 110px;">
        </div>
        <!-- relay15 顯示框 -->
        <div id="relay15" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 630px; width: 28px; height: 110px;">
        </div>
        <!-- relay16 顯示框 -->
        <div id="relay16" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 670px; width: 28px; height: 110px;">
        </div>
        <!-- relay17 顯示框 -->
        <div id="relay17" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 713px; width: 28px; height: 110px;">
        </div>
        <!-- relay18 顯示框 -->
        <div id="relay18" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 755px; width: 28px; height: 110px;">
        </div>
        <!-- relay19 顯示框 -->
        <div id="relay19" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 795px; width: 28px; height: 110px;">
        </div>
        <!-- relay20 顯示框 -->
        <div id="relay20" tabindex="0" role="button" class="div_relay_css"
             style="top: 122px; left: 840px; width: 28px; height: 110px;">
        </div>

        <!-- 類比 sensor_M4 顯示框 -->
        <div id="sensor_M4" tabindex="0" role="button" class="div_relay_css"
             style="top: 360px; left: 28px; width: 37px; height: 20px;">
        </div>
        <!-- 類比 sensor_M5 顯示框 -->
        <div id="sensor_M5" tabindex="0" role="button" class="div_relay_css"
             style="top: 390px; left: 28px; width: 37px; height: 20px;">
        </div>
        <!-- 類比 sensor_M7 顯示框 -->
        <div id="sensor_M7" tabindex="0" role="button" class="div_relay_css"
             style="top: 420px; left: 28px; width: 37px; height: 20px;">
        </div>

        <!-- PWM sensor_M10 顯示框 -->
        <div id="sensor_M10" tabindex="0" role="button" class="div_relay_css"
             style="top: 360px; left: 70px; width: 45px; height: 20px;">
        </div>
        <!-- PWM sensor_M2 顯示框 -->
        <div id="sensor_M2" tabindex="0" role="button" class="div_relay_css"
             style="top: 390px; left: 70px; width: 45px; height: 20px;">
        </div>
        <!-- PWM sensor_M3 顯示框 -->
        <div id="sensor_M3" tabindex="0" role="button" class="div_relay_css"
             style="top: 420px; left: 70px; width: 45px; height: 20px;">
        </div>

        <!-- 數位 sensor_M9 顯示框 -->
        <div id="sensor_M9" tabindex="0" role="button" class="div_relay_css"
             style="top: 450px; left: 28px; width: 37px; height: 20px;">
        </div>
        <!-- 數位 sensor_M12 顯示框 -->
        <div id="sensor_M12" tabindex="0" role="button" class="div_relay_css"
             style="top: 480px; left: 28px; width: 37px; height: 20px;">
        </div>
        <!-- 數位 sensor_M19 顯示框 -->
        <div id="sensor_M19" tabindex="0" role="button" class="div_relay_css"
             style="top: 505px; left: 28px; width: 37px; height: 20px;">
        </div>
        <!-- 數位 sensor_M14 顯示框 -->
        <div id="sensor_M14" tabindex="0" role="button" class="div_relay_css"
             style="top: 450px; left: 75px; width: 33px; height: 20px;">
        </div>
        <!-- 數位 sensor_M11 顯示框 -->
        <div id="sensor_M11" tabindex="0" role="button" class="div_relay_css"
             style="top: 480px; left: 75px; width: 33px; height: 20px;">
        </div>

        <!-- UART sensor_M16 顯示框 -->
        <div id="sensor_M16" tabindex="0" role="button" class="div_relay_css"
             style="top: 360px; left: 120px; width: 32px; height: 20px;">
        </div>
        <!-- UART sensor_M17 顯示框 -->
        <div id="sensor_M17" tabindex="0" role="button" class="div_relay_css"
             style="top: 390px; left: 120px; width: 32px; height: 20px;">
        </div>
        <!-- UART sensor_M18 顯示框 -->
        <div id="sensor_M18" tabindex="0" role="button" class="div_relay_css"
             style="top: 420px; left: 120px; width: 32px; height: 20px;">
        </div>

        <!-- i2c sensor_M15 顯示框 -->
        <div id="sensor_M15" tabindex="0" role="button" class="div_relay_css"
             style="top: 450px; left: 115px; width: 42px; height: 20px;">
        </div>
        <!-- 485 sensor_M8 顯示框 -->
        <div id="sensor_M8" tabindex="0" role="button" class="div_relay_css"
             style="top: 480px; left: 115px; width: 42px; height: 20px;">
        </div>

        <!-- ppa sensor_M6 顯示框 -->
        <div id="sensor_M6" tabindex="0" role="button" class="div_relay_css"
             style="top: 420px; left: 165px; width: 42px; height: 20px;">
        </div>
        <!-- ppa sensor_M13 顯示框 -->
        <div id="sensor_M13" tabindex="0" role="button" class="div_relay_css"
             style="top: 450px; left: 165px; width: 42px; height: 20px;">
        </div>
        <!-- ppa3 sensor_M1 顯示框 -->
        <div id="sensor_M1" tabindex="0" role="button" class="div_relay_css"
             style="top: 480px; left: 165px; width: 42px; height: 20px;">
        </div>



        <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 = 'lightblue';
                    document.getElementById("relay" + id).style.color = 'black';
                    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)])
                    if (sensorlist[PinNum.substring(1)] == '類比') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightgreen';
                    } else if (sensorlist[PinNum.substring(1)] == 'PWM') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightcyan';
                    } else if (sensorlist[PinNum.substring(1)] == '數位') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightgoldenrodyellow';
                    } else if (sensorlist[PinNum.substring(1)] == 'UART') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'linen';
                    } else if (sensorlist[PinNum.substring(1)] == '分壓類比') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lavender';
                    } else if (sensorlist[PinNum.substring(1)] == 'I2C' || sensorlist[PinNum.substring(1)] == '485') {
                        document.getElementById("sensor_" + PinNum).style.backgroundColor = 'lightpink';
                    }
                    document.getElementById("sensor_" + PinNum).style.color = 'black';
                    document.getElementById("sensor_" + PinNum).style.fontWeight = '600';
                }
                
            }

            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 類比
            function select_analog(id) {
                var select_analog_text = $("#select_analog_" + id).find(':selected').text()
                console.log("select_analog_: " + select_analog_text)
                if (select_analog_text == ' ') {
                    $("#analog" + id).text('');
                    document.getElementById("analog" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#analog" + id).text(select_analog_text);
                    document.getElementById("analog" + id).style.backgroundColor = 'lightgreen';
                    document.getElementById("analog" + id).style.color = 'black';
                    document.getElementById("analog" + id).style.fontWeight = '600';
                }
            }
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - PWM
            function select_pwm(id) {
                var select_pwm_text = $("#select_pwm_" + id).find(':selected').text()
                console.log("select_pwm_: " + select_pwm_text)
                if (select_pwm_text == ' ') {
                    $("#pwm" + id).text('');
                    document.getElementById("pwm" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#pwm" + id).text(select_pwm_text);
                    document.getElementById("pwm" + id).style.backgroundColor = 'lightcyan';
                    document.getElementById("pwm" + id).style.color = 'black';
                    document.getElementById("pwm" + id).style.fontWeight = '600';
                }
            }
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 數位
            function select_digital(id) {
                var select_digital_text = $("#select_digital_" + id).find(':selected').text()
                console.log("select_digital_: " + select_digital_text)
                if (select_digital_text == ' ') {
                    $("#digital" + id).text('');
                    document.getElementById("digital" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#digital" + id).text(select_digital_text.slice(0,2));
                    document.getElementById("digital" + id).style.backgroundColor = 'lightgoldenrodyellow';
                    document.getElementById("digital" + id).style.color = 'black';
                    document.getElementById("digital" + id).style.fontWeight = '600';
                }
            }
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - UART
            function select_uart(id) {
                var select_uart_text = $("#select_uart_" + id).find(':selected').text()
                console.log("select_uart_: " + select_uart_text)
                if (select_uart_text == ' ') {
                    $("#uart" + id).text('');
                    document.getElementById("uart" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#uart" + id).text(select_uart_text);
                    document.getElementById("uart" + id).style.backgroundColor = 'linen';
                    document.getElementById("uart" + id).style.color = 'black';
                    document.getElementById("uart" + id).style.fontWeight = '600';
                }
            }
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - I2C
            function select_i2c(id) {
                var select_i2c_text = $("#select_i2c_" + id).find(':selected').text()
                console.log("select_i2c_: " + select_i2c_text)
                if (select_i2c_text == ' ') {
                    $("#i2c" + id).text('');
                    document.getElementById("i2c" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#i2c" + id).text(select_i2c_text.slice(0,3));
                    document.getElementById("i2c" + id).style.backgroundColor = 'lightpink';
                    document.getElementById("i2c" + id).style.color = 'black';
                    document.getElementById("i2c" + id).style.fontWeight = '600';
                    document.getElementById("i2c" + id).style.fontSize = '10px';
                }
            }
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 485
            function select_485(id) {
                var select_485_text = $("#select_485_" + id).find(':selected').text()
                console.log("select_485_: " + select_485_text)
                if (select_485_text == ' ') {
                    $("#485" + id).text('');
                    document.getElementById("485" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#485" + id).text(select_485_text);
                    document.getElementById("485" + id).style.backgroundColor = 'lightpink';
                    document.getElementById("485" + id).style.color = 'black';
                    document.getElementById("485" + id).style.fontWeight = '600';
                    document.getElementById("485" + id).style.fontSize = '10px';
                }
            }
            // 當右方的下拉式選單選擇時, 更新左方圖片上的文字 - 分壓類比
            function select_ppa(id) {
                var select_ppa_text = $("#select_ppa_" + id).find(':selected').text()
                console.log("select_ppa_: " + select_ppa_text)
                if (select_ppa_text == ' ') {
                    $("#ppa" + id).text('');
                    document.getElementById("ppa" + id).style.backgroundColor = 'transparent';
                } else {
                    $("#ppa" + id).text(select_ppa_text);
                    document.getElementById("ppa" + id).style.backgroundColor = 'lavender';
                    document.getElementById("ppa" + id).style.color = 'black';
                    document.getElementById("ppa" + id).style.fontWeight = '600';
                    document.getElementById("ppa" + id).style.fontSize = '10px';
                }
            }
        </script>

        <div style="position: absolute; left: 953px;">
            <table border="5" style="border: 3px white solid;">
                <tr>
                    <td>
                        ethernet :
                        <select id="select_ethernet_1" onchange="" class="select-input">
                            <option>OFF</option>
                            <option selected>ON</option>
                        </select>
                        <br>
                        wifi :
                        <select id="select_wifi_1" onchange="" class="select-input">
                            <option>OFF</option>
                            <option selected>ON</option>
                        </select>
                        <br>
                        zigbee :
                        <select id="select_zigbee_1" onchange="" class="select-input">
                            <option>OFF</option>
                            <option selected>ON</option>
                        </select>
                        <br>
                    </td>
                </tr>
                <tr>
                    <!-- Relay 1-10 -->
                    <td style="background-color: lightblue;">
                        Relay 1 :
                        <select id="select_relay_1" onchange="select_relay('1')" class="select-input">
                            <option></option>
                            <option value="vacuum" selected>真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 2 :
                        <select id="select_relay_2" onchange="select_relay('2')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve" selected>電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 3 :
                        <select id="select_relay_3" onchange="select_relay('3')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve" selected>蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 4 :
                        <select id="select_relay_4" onchange="select_relay('4')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight" selected>警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 5 :
                        <select id="select_relay_5" onchange="select_relay('5')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera" selected>攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 6 :
                        <select id="select_relay_6" onchange="select_relay('6')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater" selected>電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 7 :
                        <select id="select_relay_7" onchange="select_relay('7')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump" selected>雙核泵</option>
                        </select>
                        <br>
                        Relay 8 :
                        <select id="select_relay_8" onchange="select_relay('8')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 9 :
                        <select id="select_relay_9" onchange="select_relay('9')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 10 :
                        <select id="select_relay_10" onchange="select_relay('10')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                    </td>
                    <td></td>
                    <!-- Relay 11-20 -->
                    <td style="background-color: lightblue;">
                        Relay 11 :
                        <select id="select_relay_11" onchange="select_relay('11')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 12 :
                        <select id="select_relay_12" onchange="select_relay('12')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 13 :
                        <select id="select_relay_13" onchange="select_relay('13')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 14 :
                        <select id="select_relay_14" onchange="select_relay('14')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 15 :
                        <select id="select_relay_15" onchange="select_relay('15')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 16 :
                        <select id="select_relay_16" onchange="select_relay('16')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 17 :
                        <select id="select_relay_17" onchange="select_relay('17')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 18 :
                        <select id="select_relay_18" onchange="select_relay('18')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 19 :
                        <select id="select_relay_19" onchange="select_relay('19')" class="select-input">
                            <option></option>
                            <option value="vacuum">真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                        Relay 20 :
                        <select id="select_relay_20" onchange="select_relay('20')" class="select-input">
                            <option></option>
                            <option value="vacuum" selected>真空吸料機</option>
                            <option value="solenoidvalve">電磁閥</option>
                            <option value="diskvalve">蝴蝶閥</option>
                            <option value="warninglight">警示燈</option>
                            <option value="camera">攝影機</option>
                            <option value="heater">電熱管</option>
                            <option value="pump">雙核泵</option>
                        </select>
                        <br>
                    </td>
                </tr>
                <tr>
                    <td> </td>
                </tr>
                <tr>
                    <!-- 類比 -->
                    <td style="background-color: lightgreen;">
                        類比 M4 : 
                        <select id="selectSensor_M4" onchange="selectSensor('M4')" class="select-input">
                            <option></option>  
                            <option selected>PH</option>
                            <option>DO</option>
                            <option>ORP</option>
                        </select>
                        <br>
                        類比 M5 : 
                        <select id="selectSensor_M5" onchange="selectSensor('M5')" class="select-input">
                            <option></option>  
                            <option>PH</option>
                            <option selected>DO</option>
                            <option>ORP</option>
                        </select>
                        <br>
                        類比 M7 : 
                        <select id="selectSensor_M7" onchange="selectSensor('M7')"  class="select-input">
                            <option></option>  
                            <option>PH</option>
                            <option>DO</option>
                            <option selected>ORP</option>
                        </select>
                        <br>
                    </td>
                    <td></td>
                    <!-- PWM -->
                    <td style="background-color: lightcyan;">
                        PWM M10 :
                        <select id="selectSensor_M10" onchange="selectSensor('M10')" class="select-input">
                            <option></option>
                            <option selected>Motor</option>
                        </select>
                        <br>
                        PWM M2 :
                        <select id="selectSensor_M2" onchange="selectSensor('M2')" class="select-input">
                            <option></option>
                            <option selected>Servo</option>
                        </select>
                        <br>
                        PWM M3 :
                        <select id="selectSensor_M3" onchange="selectSensor('M3')" class="select-input">
                            <option></option>
                            <option selected>Servo</option>
                        </select>
                        <br>
                        
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <!-- 數位 1-3 -->
                    <td style="background-color: lightgoldenrodyellow;">
                        數位 M9 :
                        <select id="selectSensor_M9" onchange="selectSensor('M9')" class="select-input">
                            <option></option>
                            <option selected>SHT11</option>
                            <option>WATERLEVEL</option>
                            <option>feedback</option>
                        </select>
                        <br>
                        數位 M12 :
                        <select id="selectSensor_M12" onchange="selectSensor('M12')" class="select-input">
                            <option></option>
                            <option>SHT11</option>
                            <option selected>WATERLEVEL</option>
                            <option>feedback</option>
                        </select>
                        <br>
                        數位 M19 :
                        <select id="selectSensor_M19" onchange="selectSensor('M19')" class="select-input">
                            <option></option>
                            <option>SHT11</option>
                            <option>WATERLEVEL</option>
                            <option selected>feedback</option>
                        </select>
                        <br>
                        
                    </td>
                    <td></td>
                    <!-- 數位 4-5 -->
                    <td style="background-color: lightgoldenrodyellow;">
                        數位 M14 :
                        <select id="selectSensor_M14" onchange="selectSensor('M14')" class="select-input">
                            <option></option>
                            <option selected>SHT11</option>
                            <option>WATERLEVEL</option>
                            <option>feedback</option>
                        </select>
                        <br>
                        數位 M11 :
                        <select id="selectSensor_M11" onchange="selectSensor('M11')" class="select-input">
                            <option></option>
                            <option selected>SHT11</option>
                            <option>WATERLEVEL</option>
                            <option>feedback</option>
                        </select>
                        <br>
                        <br>
                    </td>
                </tr>
                <tr>
                    <td> </td>
                </tr>
                <tr>
                    <!-- UART -->
                    <td style="background-color: linen;">
                        UART M16 :
                        <select id="selectSensor_M16" onchange="selectSensor('M16')" class="select-input">
                            <option></option>
                            <option selected>EC</option>
                        </select>
                        <br>
                        UART M17 :
                        <select id="selectSensor_M17" onchange="selectSensor('M17')" class="select-input">
                            <option></option>
                        
                        </select>
                        <br>
                        UART M18 :
                        <select id="selectSensor_M18" onchange="selectSensor('M18')" class="select-input">
                            <option></option>
                        
                        </select>
                        <br>
                    </td>
                    <td></td>
                    <!-- 分壓類比 1 -->
                    <td style="background-color:lavender;">
                        <br>
                        <br>
                        分壓類比 M6:
                        <select id="selectSensor_M6" onchange="selectSensor('M6')" class="select-input">
                            <option></option>
                            <option selected>SEN0189</option>
                        </select>
                        <br>
                    </td>
                </tr>
                <tr>
                    <!-- I2C -->
                    <!-- 485 -->
                    <td style="background-color: lightpink;">
                        I2C M15:
                        <select id="selectSensor_M15" onchange="selectSensor('M15')" class="select-input">
                            <option></option>
                            <option selected>BMP280</option>
                        </select>
                        <br>
                        485 M8:
                        <select id="selectSensor_M8" onchange="selectSensor('M8')" class="select-input">
                            <option></option>
                            <option selected>Soil</option>
                        </select>
                        <br>
                    </td>
                    <td></td>
                    <!-- 分壓類比 2-3 -->
                    <td style="background-color:lavender;">
                        分壓類比 M13:
                        <select id="selectSensor_M13" onchange="selectSensor('M13')" class="select-input">
                            <option></option>
                            <option selected>SEN0189</option>
                        </select>
                        <br>
                        分壓類比 M1:
                        <select id="selectSensor_M1" onchange="selectSensor('M1')" class="select-input">
                            <option></option>
                            <option selected>SonicESMUS07</option>
                        </select>
                        <br>
                    </td>
                </tr>
                <tr>
                    <td> </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="board_getValue" value="制動器感測器項目取值" onclick="getValue()"><br>
                        <br>
                        <br>
                        <input type="button" id="test" value="積木取值" onclick="test();">
                        <input type="button" id="test" value="積木MQTT" onclick="MQTTtest();"><br>
                    </td>
                </tr>
            </table>
        </div>

        <!-- 積木程式 start -->
        <div id="box" style="position: absolute; top: 740px;">
            <div id="newcondition_1" class="newcondition_css">
                <!-- 總 條件 -->
                <div id="condition1">
                    <!-- 子條件 1_1-->
                    <div id="condition1_1">
                        條件
                        <select id="cond_z1_1">
                            <option value="if">if</option>
                            <option value="elif">elif</option>
                            <option value="else">else</option>
                        </select>
                        <select id="cond_tank1_1">
                            <option value="D1">乾燥桶 D1</option>
                            <option value="D2">乾燥桶 D2</option>
                            <option value="D3">乾燥桶 D3</option>
                            <option value="D4">乾燥桶 D4</option>
                            <option value="D5">乾燥桶 D5</option>
                            <option value="D6">乾燥桶 D6</option>
                            <option value="D7">乾燥桶 D7</option>
                            <option value="D8">乾燥桶 D8</option>
                            <option value="D9">乾燥桶 D9</option>
                            <option value="D10">乾燥桶 D10</option>
                            <option value="D11">乾燥桶 D11</option>
                            <option value="D12">乾燥桶 D12</option>
                        </select>
                        <select id="cond_a1_1">
                            <option value="">制動器 / 感測器</option>
                            <optgroup label="制動器狀態">
                                
                            </optgroup>
                            <optgroup label="感測器數值">
                                
                            </optgroup>
                        </select>
                        <select id="cond_b1_1">
                            <!-- <option value="equal">==</option>
                            <option value="morethan">&gt;=</option>
                            <option value="lessthan">&lt;=</option> -->
                            <option value="MoreThan">&gt;</option>
                            <option value="MoreThanEqualTo">&gt;=</option>
                            <option value="Equal" selected>==</option>
                            <option value="LessThanEqualTo">&lt;=</option>
                            <option value="LessThan">&lt;</option>
                        </select>
                        <input list="cond_list_c1_1" id="cond_c1_1">
                        <datalist id="cond_list_c1_1">
                            <option value="on">
                            <option value="off">
                            <option value="(或請自行輸入數值)">
                        </datalist>
                        <input type="button" class="input-cond-add" id="cond_add1_1" value="條件++" onclick="cond_add(cond_add1_1);"><br>
                        <script>
                            var cond_add_child_i = 1                                                // 這是子條件

                            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="and">and</option>' + 
                                '<option value="or">or</option>' + 
                                '</select> ' + 
                                '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                '<option value="">制動器 / 感測器</option>' + 
                                '<optgroup label="制動器狀態">';

                                // 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;
                                    }
                                }
                                for (let r in relay_dict) {
                                    html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
                                }

                                html +=
                                '</optgroup>' + 
                                '<optgroup label="感測器數值">';

                                // 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;
                                    }
                                }
                                for (let s in sensor_dict) {
                                    html += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
                                }

                                html +=
                                '</optgroup>' + 
                                '</select> ' + 
                                '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
                                '<option value="MoreThan">&gt;</option>' + 
                                '<option value="MoreThanEqualTo">&gt;=</option>' + 
                                '<option value="Equal" selected>==</option>' + 
                                '<option value="LessThanEqualTo">&lt;=</option>' + 
                                '<option value="LessThan">&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">' +
                                '<option value="off">' +
                                '<option value="(或請自行輸入數值)">' +
                                '</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');
                                }
                                button_return_id.style.display = "inline";
                            }
                        </script>
                    </div>
                </div>

                <div id="action1">
                    <div id="action1_1">
                        物件
                        <select id="do_obj1_1" onChange="renew('1_1', this.selectedIndex);">
                            <option value="">制動器 / 暫停秒數 / 桶槽狀態</option>

                        </select>
                        動作
                        <div id="do_action1_1" style="display: inline-block;">
                        </div>
                        <input type="button" class="input-act-add" id="act_add1_1" value="物件動作++" onclick="act_add(act_add1_1);"><br>
                        <script>
                            var act_add_child_i = 1
                            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>' + 
                                '<optgroup label="制動器狀態">';
                                
                                // 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;
                                    }
                                }
                                for (let r in relay_dict) {
                                    html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
                                }
                                
                                html +=
                                '</optgroup>' +
                                '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' + 
                                '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</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";
    
                            }
                        </script>
                    </div>
                    
                </div>
                <input type="button" class="input-add" id="add1" value="條件物件動作++" onclick="Add(add1);">
                <script>
                    var new_condition_i = 1
        
                    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">' +
                        
                        '<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="elif">elif</option>' +
                        '<option value="else">else</option>' +
                        '</select> ' +
                        '<select id="cond_tank' + new_condition_i + '_1">' +
                        '<option value="D1">乾燥桶 D1</option>' +
                        '<option value="D2">乾燥桶 D2</option>' +
                        '<option value="D3">乾燥桶 D3</option>' +
                        '<option value="D4">乾燥桶 D4</option>' +
                        '<option value="D5">乾燥桶 D5</option>' +
                        '<option value="D6">乾燥桶 D6</option>' +
                        '<option value="D7">乾燥桶 D7</option>' +
                        '<option value="D8">乾燥桶 D8</option>' +
                        '<option value="D9">乾燥桶 D9</option>' +
                        '<option value="D10">乾燥桶 D10</option>' +
                        '<option value="D11">乾燥桶 D11</option>' +
                        '<option value="D12">乾燥桶 D12</option>' +
                        '</select> ' +
                        '<select id="cond_a' + new_condition_i + '_1">' +
                        '<option value="">制動器 / 感測器</option>' + 
                        '<optgroup label="制動器狀態">';

                        // 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;
                            }
                        }
                        for (let r in relay_dict) {
                            html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
                        }

                        html +=
                        '</optgroup>' + 
                        '<optgroup label="感測器數值">';

                        // 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;
                            }
                        }
                        for (let s in sensor_dict) {
                            html += '<option value="' + sensor_dict[s] + '">' + sensor_dict[s] + '</option>';
                        }

                        html +=
                        '</optgroup>' + 
                        '</select> ' +
                        '<select id="cond_b' + new_condition_i + '_1">' +
                        // '<option value="equal">==</option>' +
                        // '<option value="morethan">&gt;=</option>' +
                        // '<option value="lessthan">&lt;=</option>' +
                        '<option value="MoreThan">&gt;</option>' + 
                        '<option value="MoreThanEqualTo">&gt;=</option>' + 
                        '<option value="Equal" selected>==</option>' + 
                        '<option value="LessThanEqualTo">&lt;=</option>' + 
                        '<option value="LessThan">&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">' +
                        '<option value="off">' +
                        '<option value="(或請自行輸入數值)">' +
                        '</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);">' +
                        '<option value="">制動器 / 暫停秒數 / 桶槽狀態</option>' + 
                        '<optgroup label="制動器狀態">';
                        
                        // 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;
                            }
                        }
                        for (let r in relay_dict) {
                            html += '<option value="' + relay_dict[r] + '">' + relay_dict[r] + '</option>';
                        }
                        
                        html +=
                        '</optgroup>' +
                        '<option value="' + 'sleep' + '">' + 'sleep' + '</option>' + 
                        '<option value="' + 'tankstatus' + '">' + 'tankstatus' + '</option>' +
                        '</select> ' +
                        ' 動作 ' +
                        '<div id="do_action' + new_condition_i + '_1" style="display: inline-block;">' +
                        '</div>' +
                        // '<select id="do_act' + new_condition_i + '_1">' +
                        // '<option value="">請由左方選取物件' +
                        // '</select> ' +
                        '<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>
        </div>
        <!-- 積木程式 finish -->

        <div style="position: absolute; top: 1200px;">
            Value : <span id="show_Value"></span><br>
            MySQL : <span id="show_MySQLcommand"></span><br>
            MQTT : <span id="show_MQTTcommand"></span>
        </div>

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

            function getValue() {
                // 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);
                    } else {
                        // relay_dict["R" + i] = "";
                        // console.log("R" + i + " : ");
                    }
                }

                relay_data = '<optgroup label="制動器狀態">';
                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 += '</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 = '<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 += '</optgroup>';
                // console.log("sensor_data: " + sensor_data)

                // 賦值條件 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("getValue 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', 'Cleaning', 'Warning']
                            }
            // <option value="vacuum">真空吸料機</option>
            // <option value="solenoidvalve">電磁閥</option>
            // <option value="diskvalve">蝴蝶閥</option>
            // <option value="warninglight">警示燈</option>
            // <option value="camera">攝影機</option>
            // <option value="heater">電熱管</option>
            // <option value="pump">雙核泵</option>

            function renew(obj_num, index) {
                var act_item_value = '';
                var objSelect = document.getElementById("do_obj" + obj_num).value;
                // console.log("objSelect: " + objSelect + " / " + typeof(objSelect));
                var actuatorNameIndex = objSelect.indexOf('_') + 1;
                // console.log("actuatorNameIndex: " + actuatorNameIndex)
                // console.log("objSelect.substring(actuatorNameIndex): " + objSelect.substring(actuatorNameIndex))
                // console.log("relay_obj2act[objSelect.substring(actuatorNameIndex)]: " + relay_obj2act[objSelect.substring(actuatorNameIndex)])
                if (objSelect.substring(actuatorNameIndex) !== undefined) {
                    var act_item = relay_obj2act[objSelect.substring(actuatorNameIndex)]
                    console.log(act_item)
                    if (objSelect.substring(actuatorNameIndex) == 'sleep') {
                        console.log("act_item[i] == 'sleep'")
                        act_item_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 {
                        // 建立 do_act 下拉式選單
                        act_item_value += '<select id="do_act' + obj_num + '">';
                        for (let i = 0; i < act_item.length; i++) {
                            act_item_value += '<option value="' + act_item[i] + '">' + act_item[i] + '</option>'
                        }
                        act_item_value += '</select>';
                    }
                    // 將 do_act 放到 do_action 區塊中
                    var sectorSelect = document.getElementById("do_action" + obj_num);
                    if (sectorSelect != null) {
                        sectorSelect.innerHTML = act_item_value;
                    }
                } else {
                    console.log("=== undefined")
                }
            }

            function showSleepValue(obj_num, value) {
                document.getElementById("sleepValue_text" + obj_num).innerText = value + 's';
            }
        </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 test(){
                
                cond_item = [];
                var command_test = '';
                Z = 0;
                TT = {};        // 將總條件句/附加條件句/物件動作句存入 字典, 後續傳給 dry_block_format 再組合
                var set_key = [];                   // List 加入變數名稱, INSERT DB 用
                var set_value = [];                 // List 加入值, INSERT DB 用

                // 條件物件動作 取值
                for (let z = 1; z <= new_condition_i; z++) {
                    // 初始清空
                    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;
                            set_key.push('cond_z' + Z + '_1');
                            set_value.push(cond_z_value);
                            cond_main += cond_z_value + ' ';
                        }
                    } catch (error) {
                        if (error.name == 'TypeError') {
                        } else {
                            alert("cond_z" + z + "_1: " + error.name)
                        }
                    }

                    // 桶槽號碼 取值
                    try {
                        var cond_tank_value = document.getElementById("cond_tank" + z + "_1").value;
                        if (cond_tank_value == '') {
                            alert('桶槽 欄位未輸入')
                        } else {
                            set_key.push('cond_tank' + Z + '_1');
                            set_value.push(cond_tank_value);
                            cond_main += cond_tank_value + ' ';
                        }
                    } catch (error) {
                        if (error.name == 'TypeError') {
                        } else {
                            alert("cond_tank" + z + "_1: " + error.name)
                        }
                    }
                    // 子 條件 取值
                    X = 1;
                    cond_add_list = []; // 附加條件 List 清空
                    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_value.push(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_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 += '< '; }
                                }
                            } 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 {
                                    set_key.push('cond_c' + Z + '_' + X);
                                    set_value.push(cond_c_value);
                                    cond_main += cond_c_value;
                                }
                            } 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;
                                    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_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_value.push(cond_b_value);
                                    if (cond_b_value == 'MoreThan') { cond_add_data += '> '; }
                                    else if (cond_b_value == 'MoreThanEqualTo') { cond_add_data += '>= '; }
                                    else if (cond_b_value == 'Equal') { cond_add_data += '== '; }
                                    else if (cond_b_value == 'LessThanEqualTo') { cond_add_data += '<= '; }
                                    else if (cond_b_value == 'LessThan') { cond_add_data += '< '; }
                                }
                            } 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 {
                                    set_key.push('cond_c' + Z + '_' + X);
                                    set_value.push(cond_c_value);
                                    cond_add_data += cond_c_value;
                                }
                            } 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;
                            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 ) {
                                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;
                        }
                    }
                    // ===== 0324 測試 OK 勿刪 ===================================================

                    
                    cond_item.push(
                            "{'cond_main':'" + cond_main + "'}, " + 
                            "{'cond_add':['" + cond_add_list.join("', '") + "']}, " + 
                            "{'cond_com':['" + cond_com_list.join("', '") + "']}"
                    )
                    console.log("cond_item: [" + cond_item + "]")
                    document.getElementById('show_Value').innerText = "cond_item: [" + cond_item + "]";
                }
                // ===== 0324 測試 OK 勿刪 ===================================================
                TT['mainLength'] = Z
                TT['addLength'] = cond_add_list.length
                TT['comLength'] = cond_com_list.length
                // ===== 0324 測試 OK 勿刪 ===================================================

                // 0321 測試 new
                $('#value_test').text("[{" + cond_item.join('}, {') + "}]")

                var SQL_insert = 'INSERT INTO `dry_block_waiting` (' + 
                                '`datetime`, `' + set_key.join("`, `") + '`) VALUES (' + 
                                'current_timestamp(), "' + set_value.join('", "') + '")';

                var sql_data = { "sql":SQL_insert };
                document.getElementById('show_MySQLcommand').innerText = SQL_insert;
                console.log("sql_data: ", sql_data)
                $.get('/sql_get', sql_data, function (res) {
                    alert("OK")
                }, 'json');
            }

            function MQTTtest() {
                test();
                // ===== 0324 測試 OK 勿刪 ===================================================
                $.get('/dry_block_format', TT, function (res) {
                    // alert("MQTT OK")
                    document.getElementById('show_MQTTcommand').innerText = JSON.stringify(res.response);
                }, 'json');
                // ===== 0324 測試 OK 勿刪 ===================================================       
            }
        </script>
        
        
        <!-- 數位 -->
        <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
            數位 1 :
            <select id="select_digital_1" onchange="select_digital('1')">
                <option></option>
                <option>溫溼度</option>
                <option>水位計</option>
                <option>蝶閥回饋訊號</option>
            </select>
            <br>
        </div> -->
        
        <!-- PWM -->
        <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
            PWM 1 :
            <select id="select_pwm_1" onchange="select_pwm('1')">
                <option></option>
                <option>馬達</option>
                <option>舵機</option>
            </select>
            <br>
        </div> -->
        
        <!-- UART -->
        <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
            UART 1 :
            <select id="select_uart_1" onchange="select_uart('1')">
                <option></option>
                <option>EC</option>
            </select>
            <br>
        </div> -->
        
        <!-- I2C -->
        <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
            I2C:
            <select id="select_i2c_1" onchange="select_i2c('1')">
                <option></option>
                <option>大氣壓力</option>
            </select>
            <br>
        </div> -->
        
        <!-- 485 -->
        <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
            485:
            <select id="select_485_1" onchange="select_485('1')">
                <option></option>
                <option>土壤三合一</option>
            </select>
            <br>
        </div> -->
        
        <!-- 分壓類比 -->
        <!-- <div style="position: absolute; left: 935px; top: 300px; width: 220px;">
            分壓類比 1:
            <select id="select_ppa_1" onchange="select_ppa('1')">
                <option></option>
                <option>濁度計</option>
                <option>超音波</option>
            </select>
            <br>
        </div> -->
        
        

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

</html>