coffeeproject20230512/coffeeproject/app/templates/index_zh-Hant.html

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

{% block link %}
    <link rel="stylesheet" type="text/css" href="../static/css/prettify.css">
    
    <link rel="stylesheet" type="text/css" href="../static/css/jquery.terminal.css">
    <script type="text/javascript" src="../static/js/blockly_compressed.js"></script>
    <script type="text/javascript" src="../static/js/blocks_compressed.js"></script>
    <script type="text/javascript" src="../static/js/cake_compressed.js"></script>
    <script type="text/javascript" src="../static/msg/js/zh-hant.js"></script>
    <script type="text/javascript" src="../static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../static/js/code.js"></script>
    <script type="text/javascript" src="../static/js/FileSaver.js"></script>
    <script type="text/javascript" src="../static/js/prettify.js"></script>
    <script type="text/javascript" src="../static/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="../static/js/pin_set.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
{% endblock %}

{% block script %}
<script>
var status = '{{status}}';

Blockly.Blocks['var'] = {
  init: function() {
    this.appendDummyInput()
        .appendField(new Blockly.FieldDropdown([["u8_t","u8_t"], ["__IO","__IO"], ["char","char"], ["int","int"], ["uint8_t","uint8_t"], ["uint16_t","uint16_t"], ["uint32_t","uint32_t"]]), "1")
        .appendField("變數名稱")
        .appendField(new Blockly.FieldTextInput("myvar"), "NAME1")
        .appendField("初始值")
        .appendField(new Blockly.FieldTextInput("0"), "NAME");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  }
};

Blockly.cake['var'] = function(block) {
  var dropdown_1 = block.getFieldValue('1');
  var text_12 = block.getFieldValue('NAME1');
  var text_2 = block.getFieldValue('NAME');
  // TODO: Assemble JavaScript into code variable.
  var code = dropdown_1+" "+text_12+"="+text_2+';\n';
  return code;
};






Blockly.Blocks['control'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("控制腳位")
        .appendField(new Blockly.FieldDropdown([["relay1","HAL_GPIO_WritePin(GPIOA,GPIO_PIN_13,"], ["relay2","HAL_GPIO_WritePin(GPIOA,GPIO_PIN_12,"], ["relay3","HAL_GPIO_WritePin(GPIOA,GPIO_PIN_11,"], ["relay4","HAL_GPIO_WritePin(GPIOA,GPIO_PIN_10,"], ["relay5","HAL_GPIO_WritePin(GPIOA,GPIO_PIN_9,"], ["relay6","HAL_GPIO_WritePin(GPIOA,GPIO_PIN_8,"], ["relay7","HAL_GPIO_WritePin(GPIOC,GPIO_PIN_9,"], ["relay8","HAL_GPIO_WritePin(GPIOD,GPIO_PIN_15,"], ["relay9","HAL_GPIO_WritePin(GPIOD,GPIO_PIN_14,"], ["relay10","HAL_GPIO_WritePin(GPIOD,GPIO_PIN_13,"], ["relay11","HAL_GPIO_WritePin(GPIOD,GPIO_PIN_12,"], ["relay12","HAL_GPIO_WritePin(GPIOD,GPIO_PIN_11,"], ["relay13","HAL_GPIO_WritePin(GPIOD,GPIO_PIN_10,"], ["relay14","HAL_GPIO_WritePin(GPIOB,GPIO_PIN_15,"], ["relay15","HAL_GPIO_WritePin(GPIOB,GPIO_PIN_14,"], ["relay16","HAL_GPIO_WritePin(GPIOE,GPIO_PIN_15,"], ["relay17","HAL_GPIO_WritePin(GPIOE,GPIO_PIN_14,"], ["relay18","HAL_GPIO_WritePin(GPIOE,GPIO_PIN_13,"], ["relay19","HAL_GPIO_WritePin(GPIOE,GPIO_PIN_12,"], ["relay20","HAL_GPIO_WritePin(GPIOE,GPIO_PIN_11,"]]), "NAME")
        .appendField(",")
        .appendField(new Blockly.FieldDropdown([["開啟","GPIO_PIN_RESET)"], ["關閉","GPIO_PIN_SET)"]]), "NAME1");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  }
};


Blockly.cake['control'] = function(block) {
  var dropdown_name = block.getFieldValue('NAME');
  var dropdown_name1 = block.getFieldValue('NAME1');
  // TODO: Assemble JavaScript into code variable.
  var code = dropdown_name+dropdown_name1+";\n"
  // TODO: Change ORDER_NONE to the correct strength.
  return code;
};

Blockly.Blocks['free'] = {
  init: function() {
    this.appendDummyInput()
        .appendField("自由定義")
        .appendField(new Blockly.FieldTextInput("default"), "NAME");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(230);
  }
};

Blockly.cake['free'] = function(block) {
  var text_name = block.getFieldValue('NAME');
  // TODO: Assemble JavaScript into code variable.
  var code =text_name+';\n';
  return code;
};
</script>
<script>
function load_xml() {
  var a = document.getElementById("program_name");
  a.value = '{{TankID}}';
  tid='{{TankID}}';
  $.get('/load_xml_'+tid, function (resText) {  
                try {
                     var xml = Blockly.Xml.textToDom(resText.xml);
                } 
                catch (e) {
                     alert('剖析XML錯誤:\n' + e);
                     return;
                }
                var count = Blockly.mainWorkspace.getAllBlocks().length;
                if (count) {
                     Blockly.mainWorkspace.clear();
                }
                Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml);      
          },'json');
}


function save_xml() {
  var xml = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
  var xml_text = Blockly.Xml.domToPrettyText(xml);
  console.log(xml_text);
  var json = {
            'tank_num': '{{TankID}}',
            'xml': xml_text,
        };

  $.get('/save_xml',json,function(resText){
                  if(resText.pass=="pass"){
                      alert('儲存成功');
                    }
                  else{
                      alert('儲存失敗');
                  }
   
                },'json');
  
  
}


function save_code() {
  var code = Blockly.cake.workspaceToCode();
  console.log(code);
  var json = {
            'user':'{{username}}',
            'tank_num': '{{TankID}}',
            'code': code
        };
  $.get('/save_code',json,function(resText){
                  if(resText.pass=="pass"){
                      alert('下載成功');
                    }
                  else{
                      alert('下載失敗');
                  }
                },'json');
  
  
}


function back(){
    window.location.href='/board';
};




function programmer() {
                    var msg;
                    $.get('/make_hex',function(res){
                           if(res.pass=="NG"){
                                $("#creat_hex_Value").text("生成hex檔失敗");
                                $("#programmer_Value").text("上一步驟失敗");
                           }
                           else{
                                $("#creat_hex_Value").text("生成hex檔成功");
                           }
                           if(res.pass=="pass")
                           {
                              alert("生成hex檔成功");
                           }
                           else
                           {
                              alert("生成hex檔失敗");
                           }
                           
                           if(res.pass=="NG")
                           {
                              $("#programmer_Value").text("上一步驟失敗");
                           }
                           else
                           {
                              var USERNAME = '{{username}}';
                              var confirm_programmer = confirm("即將燒錄 Coffee1.0, 確定請按下 [確認] :");
                              if (!confirm_programmer) {
                                     alert("已取消燒錄");
                                     $("#programmer_Value").text("燒錄取消");
                              } 
                              else {
                                      var prog_tank_data = '{{TankID}}';
                                      var prog_burner_mac = "b8:27:eb:b4:59:3e";
                                      console.log("prog_burner_mac: " + prog_burner_mac);
                                      var prog_data = {'tank':prog_tank_data,
                                                        'USERNAME': USERNAME,
                                                        'burner_mac':prog_burner_mac}
                                      $.get('/programmer', prog_data, function (res) {
                                      
                                        if(res=="start burn")
                                        {
                                          $("#programmer_Value").text("準備燒錄...");
                                        }
                                        else
                                        {
                                          $("#programmer_Value").text("燒錄失敗");
                                        }}, 'text');
                              }
                          }
                           
                    },'json');
                    
           
                } 



$(document).ready(function(){
            load_xml();
        });
</script>

<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('');
                    
                }
                else {
                    $("#relay" + id).text(select_relay_text);
                }
}

function selectSensor(PinNum) {
                var Pin_sensor = $("#selectSensor_" + PinNum).find(':selected').text();
                // console.log("Pin_sensor: " + Pin_sensor)
                if (Pin_sensor == '') {
                    $("#" + PinNum).text('');
                } else {
                    $("#" + PinNum).text(Pin_sensor);
                    // alert("sensorlist[PinNum]]\n" + sensorlist[PinNum.substring(1)])
                 
                }
            }


function select_RF(rf) {
                var rf_sensor = $("#select_" + rf).find(':selected').text();
               
                if (rf_sensor == "ON") {
                    $("#" + rf).css("fill", "rgb(60, 179, 113)");
                } else {
                    $("#" + rf).css("fill", "rgb(107, 107, 107)");
                }
}
            
            
const list_R = ['R1','R2','R3','R4','R5','R6','R7','R8','R9','R10','R11','R12','R13','R14','R15','R16','R17','R18','R19','R20']
           
const list_M = ['M1','M2','M3','M4','M5','M6','M7','M8','M9','M10','M11','M12','M13','M14','M15','M16','M17','M18','M19']
          
function ItemGetValueToDB() {
                var ethernet_text = $("#select_eth").find(':selected').val();
                var wifi_text = $("#select_wifi").find(':selected').val();
                var zigbee_text = $("#select_zigbee").find(':selected').val();
                var tank_text = '{{TankID}}';
                console.log("ethernet_text: " + ethernet_text);
                console.log("wifi_text: " + wifi_text);
                console.log("zigbee_text: " + zigbee_text);
                console.log("tank_text: " + tank_text);

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

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

                
                var SQL_insert = 'INSERT INTO `coffee1_0_pin` (' + 
                                '`datetime`, `tid`, `ethernet`, `wifi`, `zigbee`, `' + 
                                list_R.join("`, `") + 
                                '`, `' + 
                                list_M.join("`, `") + 
                                '`) VALUES (' + 
                                'current_timestamp(), "' + tank_text + '", "' + ethernet_text + '", "' + wifi_text + '", "' + zigbee_text + '", "' +
                                list_relay_item.join('", "')  + 
                                '", "' + 
                                list_sensor_item.join('", "') + 
                                '")';

                var sql_data = { "sql":SQL_insert };
                console.log(sql_data)
                $.get('/sql_get', sql_data, function (res) {
                    if (res['response'] == '') {
                        alert("腳位配置儲存成功");
                    } else {
                        alert(res['response']);
                    }
                    location.reload();
                }, 'json');
} 


$(function(){
            

            const pin_data_ethernet = '{{pin_data.ethernet}}';
            if (pin_data_ethernet == 'ON') {
                $("#select_eth").val('ON');
                $("#eth").css("fill", "rgb(60, 179, 113)");
            }
            else{
                $("#select_eth").val('OFF');
                $("#eth").css("fill", "rgb(107, 107, 107)");
            }
            const pin_data_wifi = '{{pin_data.wifi}}';
            if (pin_data_wifi == 'ON') {
                $("#select_wifi").val('ON');
                $("#wifi").css("fill", "rgb(60, 179, 113)");
            }
            else{
                $("#select_wifi").val('OFF');
                $("#wifi").css("fill", "rgb(107, 107, 107)");
            }
            const pin_data_zigbee = '{{pin_data.zigbee}}';
            if (pin_data_zigbee == 'ON') {
                $("#select_zigbee").val('ON');
                $("#zigbee").css("fill", "rgb(60, 179, 113)");
            }
            else{
                $("#select_zigbee").val('OFF');
                $("#zigbee").css("fill", "rgb(107, 107, 107)");
            }
            

        const pin_data_relay = ['', '{{pin_data.R1}}','{{pin_data.R2}}','{{pin_data.R3}}','{{pin_data.R4}}',
                                    '{{pin_data.R5}}','{{pin_data.R6}}','{{pin_data.R7}}','{{pin_data.R8}}','{{pin_data.R9}}',
                                    '{{pin_data.R10}}','{{pin_data.R11}}','{{pin_data.R12}}','{{pin_data.R13}}','{{pin_data.R14}}',
                                    '{{pin_data.R15}}','{{pin_data.R16}}','{{pin_data.R17}}','{{pin_data.R18}}','{{pin_data.R19}}','{{pin_data.R20}}'
                                ]
        const pin_data_sensor = ['', '{{pin_data.M1}}','{{pin_data.M2}}','{{pin_data.M3}}','{{pin_data.M4}}',
                                    '{{pin_data.M5}}','{{pin_data.M6}}','{{pin_data.M7}}','{{pin_data.M8}}','{{pin_data.M9}}',
                                    '{{pin_data.M10}}','{{pin_data.M11}}','{{pin_data.M12}}','{{pin_data.M13}}','{{pin_data.M14}}',
                                    '{{pin_data.M15}}','{{pin_data.M16}}','{{pin_data.M17}}','{{pin_data.M18}}','{{pin_data.M19}}'
                                ]            
            
            // 腳位配置-relay
            for (let p_r = 1; p_r <= pin_data_relay.length; p_r++) {
                if (pin_data_relay[p_r] != '') {
                    $("#select_relay_" + p_r).val(pin_data_relay[p_r]);
                    $("#relay" + p_r).text(pin_data_relay[p_r]);
                }
            }
            // 腳位配置-sensor
            for (let p_m = 1; p_m <= pin_data_sensor.length; p_m++) {
                if (pin_data_sensor[p_m] != '') {
                    $("#selectSensor_M" + p_m).val(pin_data_sensor[p_m]);
                    $("#M" + p_m).text(pin_data_sensor[p_m]);
                }
            }
})     
</script>


<script>
// the URL or IP address of the MQTT server to connect to
const mqtt_server = "60.250.156.234"
// the port of the MQTT server to connect to
const mqtt_port = 8080

// the MQTT topic to publish to   9c:65:f9:1e:6c:68   b8:27:eb:84:e9:3f  b8:27:eb:f8:24:92    b8:27:eb:7e:24:78  b8:27:eb:b4:59:3e
const mqtt_pub_topic = "AISKY/Coffee/MK-G/b8:27:eb:b4:59:3e";
// the MQTT topic to subscribe to   b8:27:eb:b4:59:3e b8:27:eb:7e:24:78   9c:65:f9:1e:84:9f   b8:27:eb:7e:24:78   b8:27:eb:b4:59:3e
const mqtt_sub_topic = "AISKY/Coffee/MK-G/b8:27:eb:b4:59:3e/Log";
var client = false;
// the function to be executed when connected to the MQTT broker
function onConnect() {
    // once connected, start subscribing to the topic
    console.log("onConnect: start subscribing to the topic");
    client.subscribe(mqtt_sub_topic, { qos: Number(2) });
}

// the function to be executed when the message is received
function onMessageArrived(message) {
    console.log("onMessageArrived:" + message.payloadString);
    // display received messages on the webpage
    //document.getElementById("mqtt_monitor").innerText = message.payloadString;
    var data = JSON.parse(message.payloadString);
    
    if(data.command=="Code_upload")
    {
      if(data.response=="no reply")
      {
        $("#programmer_Value").text("無回覆");
        alert("控制板無回覆");
      }
      else if(data.response=="success")
      {
        $("#programmer_Value").text("成功燒錄");
        alert("燒錄成功");
      }
      else if(data.response=="upload error")
      {
        $("#programmer_Value").text("上傳失敗");
        alert("資料上傳失敗");
      }
      else
      {
        $("#programmer_Value").text("上傳失敗");
        alert("資料上傳失敗");
      }
      var json = {
            'user':'{{username}}',
            'tank_num': '{{TankID}}',
            'result': data.response,
        };
        
       
      $.get('/result', json, function (res) {
                    if (res.pass == 'pass') {
                        alert("燒錄結果已儲存");
                    } else {
                        alert("燒錄結果儲存失敗");
                    }
                }, 'json');
    }
}
//-------------------------------------------------------------------------------
function init() {
    // assign the client ID for MQTT broker authentication, you can assign it on your own
    var MQTT_CLIENT_ID = "iot_web_" + Math.floor((1 + Math.random()) * 0x10000000000).toString(16);

    // create a MQTT client instance
    // make sure the MQTT broker address and port number are correct
    // the port number should be used for websocket, not other protocol
    client = new Paho.MQTT.Client(mqtt_server, mqtt_port, '/ws', MQTT_CLIENT_ID);

    // the public MQTT broker "iot.eclipse.org" can be used for testing
    // client = new Paho.MQTT.Client("iot.eclipse.org", 80, '/ws', MQTT_CLIENT_ID);

    // the function to be executed when the message is received
    client.onMessageArrived = onMessageArrived;

    // connect to the MQTT broker
    client.connect({
        // if you don't use user name and password, just remove these lines
        userName: "aisky-server",
        password: "aisky",
        // the function to be executed when connected
        onSuccess:onConnect
    });

}
window.addEventListener('load', init, false);
</script>

<script>
		function pin_record(){
			var nr = '{{TankID}}';
      var datetime= document.getElementById("datetime").value;
			var json = {"nr":nr,"datetime":datetime};
      $.get('/pin_set', json, function(resText){                    
            console.log(resText[0]);
            const pin_data_ethernet = resText[0][3];
            if (pin_data_ethernet == 'ON') {
                $("#select_eth").val('ON');
                $("#eth").css("fill", "rgb(60, 179, 113)");
            }
            else{
                $("#select_eth").val('OFF');
                $("#eth").css("fill", "rgb(107, 107, 107)");
            }
            const pin_data_wifi = resText[0][4];
            if (pin_data_wifi == 'ON') {
                $("#select_wifi").val('ON');
                $("#wifi").css("fill", "rgb(60, 179, 113)");
            }
            else{
                $("#select_wifi").val('OFF');
                $("#wifi").css("fill", "rgb(107, 107, 107)");
            }
            const pin_data_zigbee = resText[0][5];
            if (pin_data_zigbee == 'ON') {
                $("#select_zigbee").val('ON');
                $("#zigbee").css("fill", "rgb(60, 179, 113)");
            }
            else{
                $("#select_zigbee").val('OFF');
                $("#zigbee").css("fill", "rgb(107, 107, 107)");
            }
            
            // 腳位配置-relay
            for (let p_r = 1; p_r < 21; p_r++) {
                    $("#select_relay_" + p_r).val(resText[0][p_r+5]);
                    $("#relay" + p_r).text(resText[0][p_r+5]);
          

            }
            // 腳位配置-sensor
            for (let p_m = 1; p_m < 21; p_m++) {
                    $("#selectSensor_M" + p_m).val(resText[0][p_m+25]);
                    $("#M" + p_m).text(resText[0][p_m+25]);
            }                                       
                                          
			      }, 'json');
      
      
      
		};
  

		function pin_set(){
            var nr = '{{TankID}}';
			      var json = {"nr":nr};
    			  $.get('/pin_history', json, function(resText){                    
            var html_t = '';   
            html_t += '<option value="'  + '">' + '</option>';
            for (let j = 1; j < resText.length; j++) {   
              var obj = resText[j];
              html_t += '<option value="' + obj + '">' + obj + '</option>';
            }
            $("#datetime").html(html_t);                             
                                          
			      }, 'json');

		};
   
   function code_record() {
   var a = document.getElementById("program_name");
   a.value = '{{TankID}}';
   var nr = '{{TankID}}';
   var datetime= document.getElementById("code_record").value;
   var json = {"nr":nr,"datetime":datetime};
   $.get('/code_set',json, function (resText) {  
              try {
                     var xml = Blockly.Xml.textToDom(resText[0][2]);
                } 
                catch (e) {
                     alert('剖析XML錯誤:\n' + e);
                     return;
                }
                var count = Blockly.mainWorkspace.getAllBlocks().length;
                if (count) {
                     Blockly.mainWorkspace.clear();
                }
                Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xml);     
          },'json');
}


		function code_set(){
            var nr = '{{TankID}}';
			      var json = {"nr":nr};
    			  $.get('/code_history', json, function(resText){                  
            var html_t = '';   
            html_t += '<option value="'  + '">' + '</option>';
            for (let j = 1; j < resText.length; j++) {   
              var obj = resText[j];
              html_t += '<option value="' + obj + '">' + obj + '</option>';
            }
            $("#code_record").html(html_t);                             
                                          
			      }, 'json');
		};   
   
</script>
{% endblock %}


{% block style %}
<style>
#main-wrapper {
  height: auto;
  min-height: 560px;
  min-width: 400px;
}
#terminal-wrapper {
  height: auto;
}
#terminal {
  width: 100%;
  height: 300px;
}

#blocklyDiv {
  /* height: auto; */
  height: -moz-calc(100vh - 150px);     /* Firefox  */
  height: -webkit-calc(100vh - 150px);  /* WebKit   */
  height: -o-calc(100vh - 150px);       /* Opera    */
  height: calc(100vh - 150px);          /* Standard */    
  min-height: 560px;
  margin-bottom: 0;
  padding: 0px !important;
}
#code-wrapper {
  height: auto;
}
#code {
  /* height: auto; */
  height: -moz-calc(100vh - 150px);     /* Firefox  */
  height: -webkit-calc(100vh - 150px);  /* WebKit   */
  height: -o-calc(100vh - 150px);       /* Opera    */
  height: calc(100vh - 150px);          /* Standard */   
  min-height: 560px;
  margin-bottom: 0;
}
#toolbox {
  display: none;
}
#footer {
  border-top: 1px solid #e5e5e5;
}
#program_name {
    background-color: transparent;
    border: none !important;
    font-size: 24px;
}

</style>
{% endblock %}


{% block main %}

  <div class="album py-5 bg-light">
    <div class="container">
    
      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
        <div class="col">
          <div class="card shadow-sm">
          <h1 class="h3 mb-4 fw-normal"style="background-color: Silver; height: 50px; text-align:center;">{{TankID}}</h1>
          <h1 class="h3 mb-4 fw-normal"style="background-color: Silver; height: 50px; text-align:center;">桶槽腳位配置</h1>
           <div class="row row-cols-12 row-cols-sm-12 row-cols-md-12">
                <div class="btn-toolbar" role="toolbar" style="justify-content: center;">
                   <div class="btn-group">  
                     <button type="button" class="btn btn-secondary" onclick="back()">
                     <span class="glyphicon glyphicon-folder-open"></span> 重新選擇桶槽
                     </button>   
                     <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#control_record_Modal" onclick="pin_set()">
                     <span class="glyphicon glyphicon-download-alt"></span> 載入腳位配置
                     </button>
                     <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#control_RF_Modal">
                     <span class="glyphicon glyphicon-download-alt"></span> 腳位配置設定
                     </button>
                   </div>
                </div>
        
           </div>
            <div class="card-body">
              <div class="row row-cols-1 row-cols-sm-1 row-cols-md-2"  style="justify-content: center;">
          
              <svg version="1.0" viewBox="0 0 600 500" class="sim" x="0px" y="0px" width="100%" height="100%" fill="rgba(0,0,0,0)">
               //板子形狀
              <rect class="body" x="0" y="0" width="598" height="450" rx="3" ry="3" style=" fill: rgb(60, 179, 113);"></rect>
              //relay形狀
              <rect class="relay" x="0" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="30" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="60" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="90" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="120" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="150" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="180" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="210" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="240" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="270" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="300" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="330" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="360" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="390" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="420" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="450" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="480" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="510" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="540" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="relay" x="570" y="0" width="28" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              //valve形狀
              <rect class="valve" x="0" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="30" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="60" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="90" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="120" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="150" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="180" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="210" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="240" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="270" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
         
              <rect class="valve" x="300" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="330" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="360" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="390" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="420" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="450" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="480" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="510" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="540" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="valve" x="570" y="30" width="28" height="120" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              //莫仕座形狀
              <rect class="sensor" x="0" y="200" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="0" y="240" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="0" y="280" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="0" y="320" width="70" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="0" y="360" width="70" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="0" y="400" width="70" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>


              <rect class="sensor" x="80" y="200" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="80" y="240" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="80" y="280" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="80" y="320" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="80" y="360" width="70" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>


              <rect class="sensor" x="160" y="200" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="160" y="240" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="160" y="280" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="160" y="320" width="70" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="160" y="360" width="70" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>

              <rect class="sensor" x="240" y="280" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="240" y="320" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              <rect class="sensor" x="240" y="360" width="50" height="25" rx="3" ry="3" style=" fill: rgb(250, 240, 230);"></rect>
              //通訊介面
              ------------------------------------
              <rect class="RF" x="528" y="230" width="70" height="60" rx="3" ry="3" style=" fill: rgb(240, 240, 240);"></rect>
              
              <rect id=eth class="RF" x="538" y="250" width="10" height="10" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              ------------------------------------
              <rect class="RF" x="498" y="300" width="100" height="60" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              <rect class="RF" x="502" y="305" width="60" height="50" rx="3" ry="3" style=" fill: rgb(240, 240, 240);"></rect>

              <rect class="RF" x="565" y="305" width="25" height="4" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              <rect class="RF" x="565" y="315" width="23" height="4" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              <rect class="RF" x="565" y="305" width="4" height="14" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              <rect class="RF" x="584" y="315" width="4" height="24" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              <rect class="RF" x="565" y="335" width="22" height="4" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              <rect class="RF" x="565" y="335" width="4" height="14" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              <rect class="RF" x="565" y="345" width="22" height="4" rx="3" ry="3" style=" fill: rgb(255, 255, 0);"></rect>
              
              <rect id=wifi class="RF" x="507" y="330" width="10" height="10" rx="3" ry="3" style=" fill: rgb(107, 107, 107);"></rect>
              ------------------------------------
              <rect class="RF" x="498" y="380" width="100" height="60" rx="3" ry="3" style=" fill: rgb(220, 20, 60);"></rect>
              <rect class="RF" x="500" y="385" width="70" height="50" rx="3" ry="3" style=" fill: rgb(240, 240, 240);"></rect>
              <rect class="RF" x="563" y="385" width="20" height="30" rx="3" ry="3" style=" fill: rgb(240, 240, 240);"></rect>
              
              <rect id=zigbee class="RF" x="500" y="405" width="10" height="10" rx="3" ry="3" style=" fill:rgb(107, 107, 107);"></rect>
              --------------------------------------------
              //relay文字說明
              <text x="0" y="18" fill="#111">R1</text>
              <text x="30" y="18" fill="#111">R2</text>
              <text x="60" y="18" fill="#111">R3</text>
              <text x="90" y="18" fill="#111">R4</text>
              <text x="120" y="18" fill="#111">R5</text>
              <text x="150" y="18" fill="#111">R6</text>
              <text x="180" y="18" fill="#111">R7</text>
              <text x="210" y="18" fill="#111">R8</text>
              <text x="240" y="18" fill="#111">R9</text>
              <text x="270" y="18" fill="#111">R10</text>
              <text x="300" y="18" fill="#111">R11</text>
              <text x="330" y="18" fill="#111">R12</text>
              <text x="360" y="18" fill="#111">R13</text>
              <text x="390" y="18" fill="#111">R14</text>
              <text x="420" y="18" fill="#111">R15</text>
              <text x="450" y="18" fill="#111">R16</text>
              <text x="480" y="18" fill="#111">R17</text>
              <text x="510" y="18" fill="#111">R18</text>
              <text x="540" y="18" fill="#111">R19</text>
              <text x="570" y="18" fill="#111">R20</text>
              //閥門名稱
              <text id =relay1 x="13" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay2 x="43" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay3 x="73" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay4 x="103" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay5 x="133" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay6 x="163" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay7 x="193" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay8 x="223" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay9 x="253" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay10 x="283" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay11 x="313" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay12 x="343" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay13 x="373" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay14 x="403" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay15 x="433" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay16 x="463" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay17 x="493" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay18 x="523" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay19 x="553" y="30" fill="#111" style=" writing-mode: tb;"></text>
              <text id =relay20 x="583" y="30" fill="#111" style=" writing-mode: tb;"></text>
              //通訊介面文字說明
              <text x="550" y="260" fill="#111">eth</text>
              <text x="520" y="340" fill="#111">wifi</text>
              <text x="510" y="415" fill="#111">zigbee</text>
              //感測器文字說明
              <text x="0" y="200" fill="#111">M4</text>
              <text x="0" y="240" fill="#111">M5</text>
              <text x="0" y="280" fill="#111">M7</text>
              <text x="0" y="320" fill="#111">M9</text>
              <text x="0" y="360" fill="#111">M12</text>
              <text x="0" y="400" fill="#111">M19</text>
              <text x="80" y="200" fill="#111">M10</text>
              <text x="80" y="240" fill="#111">M2</text>
              <text x="80" y="280" fill="#111">M3</text>
              <text x="80" y="320" fill="#111">M14</text>
              <text x="80" y="360" fill="#111">M11</text>
              <text x="160" y="200" fill="#111">M16</text>
              <text x="160" y="240" fill="#111">M17</text>
              <text x="160" y="280" fill="#111">M18</text>
              <text x="160" y="320" fill="#111">M15</text>
              <text x="160" y="360" fill="#111">M8</text>
              <text x="240" y="280" fill="#111">M6</text>
              <text x="240" y="320" fill="#111">M13</text>
              <text x="240" y="360" fill="#111">M1</text>
              //感測器名稱
              <text id =M4 x="0" y="220" fill="#111"></text>
              <text id =M5 x="0" y="260" fill="#111"></text>
              <text id =M7 x="0" y="300" fill="#111"></text>
              <text id =M9 x="0" y="340" fill="#111" style="font-size:12px;"></text>
              <text id =M12 x="0" y="380" fill="#111" style="font-size:12px;"></text>
              <text id =M19 x="0" y="420" fill="#111" style="font-size:12px;"></text>
              <text id =M10 x="80" y="220" fill="#111"></text>
              <text id =M2 x="80" y="260" fill="#111"></text>
              <text id =M3 x="80" y="300" fill="#111"></text>
              <text id =M14 x="80" y="340" fill="#111"></text>
              <text id =M11 x="80" y="380" fill="#111" style="font-size:12px;"></text>
              <text id =M16 x="160" y="220" fill="#111"></text>
              <text id =M17 x="160" y="260" fill="#111"></text>
              <text id =M18 x="160" y="300" fill="#111"></text>
              <text id =M15 x="160" y="340" fill="#111" style="font-size:12px;"></text>
              <text id =M8 x="160" y="380" fill="#111" style="font-size:12px;"></text>
              <text id =M6 x="240" y="300" fill="#111"></text>
              <text id =M13 x="240" y="340" fill="#111"></text>
              <text id =M1 x="240" y="380" fill="#111"></text>
              </svg>
           
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  

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

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_RF_title_input" class="modal-title"></h4>
                        <span class="h3 mx-1">腳位配置</span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                        <!-- 燒錄通訊 -->
                                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1">
                                     <strong><a>通訊介面:</a></strong>
                                </div>
                                <div class="row row-cols-5 row-cols-sm-5 row-cols-md-5">
                                  <div class="col">
                                   eth :   
                                   <select id="select_eth" onchange="select_RF('eth')" class="select-input">
                                     <option></option>
                                     <option>OFF</option>
                                     <option>ON</option>
                                   </select>
                                  </div> 
                                  <div class="col">
                                   wifi :   
                                   <select id="select_wifi" onchange="select_RF('wifi')" class="select-input">
                                     <option></option>
                                     <option>OFF</option>
                                     <option>ON</option>
                                   </select>
                                  </div> 
                                  <div class="col">
                                   zigbee :   
                                   <select id="select_zigbee" onchange="select_RF('zigbee')" class="select-input">
                                     <option></option>
                                     <option>OFF</option>
                                     <option>ON</option>
                                   </select>
                                  </div> 
                                </div>
                      
                        <!-- 燒錄致動器 -->


                                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1">
                                     <strong><a>致動器:</a></strong>
                                </div>
                                <div class="row row-cols-2 row-cols-sm-2 row-cols-md-3">
                                  <div class="col">
                                                Relay1:
                                                <br>    
                                                <select id="select_relay_1" onchange="select_relay('1')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div> 
                                  <div class="col">
                                                Relay2:
                                                <br>    
                                                <select id="select_relay_2" onchange="select_relay('2')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div> 
                                  <div class="col">
                                                Relay3:
                                                <br>    
                                                <select id="select_relay_3" onchange="select_relay('3')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay4:
                                                <br>    
                                                <select id="select_relay_4" onchange="select_relay('4')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div> 
                                  <div class="col">
                                                Relay5:
                                                <br>    
                                                <select id="select_relay_5" onchange="select_relay('5')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay6:
                                                <br>    
                                                <select id="select_relay_6" onchange="select_relay('6')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay7:
                                                <br>    
                                                <select id="select_relay_7" onchange="select_relay('7')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay8:
                                                <br>    
                                                <select id="select_relay_8" onchange="select_relay('8')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay9:
                                                <br>    
                                                <select id="select_relay_9" onchange="select_relay('9')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay10:
                                                <br>    
                                                <select id="select_relay_10" onchange="select_relay('10')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay11:
                                                <br>    
                                                <select id="select_relay_11" onchange="select_relay('11')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay12:
                                                <br>    
                                                <select id="select_relay_12" onchange="select_relay('12')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay13:
                                                <br>    
                                                <select id="select_relay_13" onchange="select_relay('13')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay14:
                                                <br>    
                                                <select id="select_relay_14" onchange="select_relay('14')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay15:
                                                <br>    
                                                <select id="select_relay_15" onchange="select_relay('15')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay16:
                                                <br>    
                                                <select id="select_relay_16" onchange="select_relay('16')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay17:
                                                <br>    
                                                <select id="select_relay_17" onchange="select_relay('17')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay18:
                                                <br>    
                                                <select id="select_relay_18" onchange="select_relay('18')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay19:
                                                <br>    
                                                <select id="select_relay_19" onchange="select_relay('19')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                  <div class="col">
                                                Relay20:
                                                <br>    
                                                <select id="select_relay_20" onchange="select_relay('20')" class="select-input">
                                                  <option></option>
                                                  <option value="真空吸料機">真空吸料機</option>
                                                  <option value="中水入水">中水入水</option>
                                                  <option value="清水入水">清水入水</option>
                                                  <option value="幫浦">幫浦</option>
                                                  <option value="排水廢水">排水廢水</option>
                                                  <option value="排水中水">排水中水</option>
                                                  <option value="桶內消毒">桶內消毒</option>
                                                  <option value="混合槽幫浦">混合槽幫浦</option>
                                                  <option value="蝴蝶閥">蝴蝶閥</option>
                                                  <option value="入水清洗槽幫浦">入水清洗槽幫浦</option> 
                                                  <option value="保溫夾層進水">保溫夾層進水</option>
                                                  <option value="逆洗幫浦">逆洗幫浦</option> 
                                                  <option value="雙核隔膜泵">雙核隔膜泵</option> 
                                                  <option value="警示燈">警示燈</option>
                                                  <option value="攝影機">攝影機</option>
                                                  <option value="加熱器1">加熱器1</option>
                                                  <option value="加熱器2">加熱器2</option>
                                                  <option value="乾燥真空機">乾燥真空機</option>
                                                  <option value="噴嘴">噴嘴</option>
                                                </select>
                                  </div>
                                </div> 
                                
                        <!-- 燒錄通訊 -->
                                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1">
                                     <strong><a>感測器:</a></strong>
                                </div>
                                <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4">
                                  <div class="col">
                                             類比 M4 : 
                                             <br>
                                             <select id="selectSensor_M4" onchange="selectSensor('M4')" class="select-input">
                                               <option></option>  
                                               <option value="PH計">PH計</option>
                                               <option value="DO計">DO計</option>
                                               <option value="ORP計">ORP計</option>
                                             </select>
                                  </div> 
                                  <div class="col">
                                            PWM M10 :
                                            <br>
                                            <select id="selectSensor_M10" onchange="selectSensor('M10')" class="select-input">
                                               <option></option>
                                               <option value="馬達">馬達</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            UART M16 :
                                            <br>
                                            <select id="selectSensor_M16" onchange="selectSensor('M16')" class="select-input">
                                               <option></option>
                                               <option value="EC計">EC計</option>
                                               <option value="水溫計">水溫計</option>
                                               <option value="真空閥">真空閥</option>
                                            </select>
                                  </div> 
                                </div> 
                                <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4">
                                    <div class="col">
                                            類比 M5 : 
                                            <br>
                                            <select id="selectSensor_M5" onchange="selectSensor('M5')" class="select-input">
                                               <option></option>  
                                               <option value="PH計">PH計</option>
                                               <option value="DO計">DO計</option>
                                               <option value="ORP計">ORP計</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                             PWM M2 :
                                             <br>
                                            <select id="selectSensor_M2" onchange="selectSensor('M2')" class="select-input">
                                               <option></option>
                                               <option value="三通閥">三通閥</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            UART M17 :
                                            <br>
                                            <select id="selectSensor_M17" onchange="selectSensor('M17')" class="select-input">
                                               <option></option>
                                               <option value="溫溼度">溫溼度</option>
                                               <option value="真空閥">真空閥</option>
                                            </select> 
                                  </div>                               
                                </div>                                
                                <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4">
                                    <div class="col">
                                            類比 M7 : 
                                            <br>
                                            <select id="selectSensor_M7" onchange="selectSensor('M7')"  class="select-input">
                                               <option></option>  
                                               <option value="PH計">PH計</option>
                                               <option value="DO計">DO計</option>
                                               <option value="ORP計">ORP計</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            PWM M3 :
                                            <br>
                                            <select id="selectSensor_M3" onchange="selectSensor('M3')" class="select-input">
                                               <option></option>
                                               <option value="三通閥">三通閥</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            UART M18 :
                                            <br>
                                            <select id="selectSensor_M18" onchange="selectSensor('M18')" class="select-input">
                                               <option></option>
                                               <option>未定義</option>
                                            </select>
                                  </div>
                                  <div class="col">
                                             分壓類比 M6:
                                            <br>
                                            <select id="selectSensor_M6" onchange="selectSensor('M6')" class="select-input">
                                               <option></option>
                                               <option value="濁度計">濁度計</option>
                                            </select>
                                  </div>                                                                 
                                </div>
                                <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4">
                                  <div class="col">
                                            數位 M9 :
                                            <br>
                                            <select id="selectSensor_M9" onchange="selectSensor('M9')" class="select-input">
                                                <option></option>
                                                <option value="水位計">水位計</option>
                                                <option value="馬達編碼器">馬達編碼器</option>
                                                <option value="蝴蝶閥編碼器">蝴蝶閥編碼器</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                             數位 M14 :
                                             <br>
                                            <select id="selectSensor_M14" onchange="selectSensor('M14')" class="select-input">
                                               <option></option>
                                               <option value="溫溼度">溫溼度</option>
                                               <option value="水溫計">水溫計</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            I2C M15:
                                            <br>
                                            <select id="selectSensor_M15" onchange="selectSensor('M15')" class="select-input">
                                               <option></option>
                                               <option value="大氣壓力計">大氣壓力計</option>
                                            </select> 
                                  </div> 
                                  <div class="col">
                                            分壓類比 M13:
                                            <br>
                                            <select id="selectSensor_M13" onchange="selectSensor('M13')" class="select-input">
                                               <option></option>
                                               <option value="濁度計">濁度計</option>
                                            </select>                                                                                                                        
                                  </div> 
                               </div>                               
                               <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4">
                                  <div class="col">
                                            數位 M12 :
                                            <br>
                                            <select id="selectSensor_M12" onchange="selectSensor('M12')" class="select-input">
                                                <option></option>
                                                <option value="水位計">水位計</option>
                                                <option value="馬達編碼器">馬達編碼器</option>
                                                <option value="蝴蝶閥編碼器">蝴蝶閥編碼器</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            數位 M11 :
                                            <br>
                                            <select id="selectSensor_M11" onchange="selectSensor('M11')" class="select-input">
                                               <option></option>
                                               <option value="水位計">水位計</option>
                                               <option value="馬達編碼器">馬達編碼器</option>
                                               <option value="蝴蝶閥編碼器">蝴蝶閥編碼器</option>
                                            </select>
                                  </div> 
                                  <div class="col">
                                            485 M8:
                                            <br>
                                            <select id="selectSensor_M8" onchange="selectSensor('M8')" class="select-input">
                                               <option></option>
                                               <option value="土壤檢測計">土壤檢測計</option>
                                            </select> 
                                  </div> 
                                  <div class="col">
                                            分壓類比 M1:
                                            <br>
                                            <select id="selectSensor_M1" onchange="selectSensor('M1')" class="select-input">
                                               <option></option>
                                               <option value="超音波">超音波</option>
                                            </select>                                                                                                                        
                                  </div>
                               </div>                                
                               <div class="row row-cols-3 row-cols-sm-3 row-cols-md-4">
                                  <div class="col">
                                            數位 M19 :
                                            <br>
                                            <select id="selectSensor_M19" onchange="selectSensor('M19')" class="select-input">
                                               <option></option>
                                                <option value="水位計">水位計</option>
                                                <option value="馬達編碼器">馬達編碼器</option>
                                                <option value="蝴蝶閥編碼器">蝴蝶閥編碼器</option>
                                            </select>                                                                                                                       
                                  </div>                               
                               </div>                                                     
                    </div>
                    <div class="modal-footer flex-nowrap p-0">
                       <button type="button" class="btn btn-primary  fs-6 text-decoration-none col-6 m-0 rounded-0 " onclick="ItemGetValueToDB()"><strong>儲存</strong></button>
                       <button type="button" class="btn btn-secondary fs-6 text-decoration-none col-6 m-0 rounded-0 " data-bs-dismiss="modal"><strong>關閉</strong></button>
                    </div>
                </div>
            </div>
        </div>


         <!-- 載入腳位設定互動視窗 -->
        <div class="modal fade" id="control_record_Modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_RF_title_input" class="modal-title"></h4>
                        <span class="h3 mx-1">載入腳位配置</span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                    <strong><a>歷史腳位配置:</a></strong>
                    <select id="datetime">
                            <option value=""></option>
                           
							      </select>
                      
                                            
                    </div>
                    <div class="modal-footer flex-nowrap p-0">
                       <button type="button" class="btn btn-primary  fs-6 text-decoration-none col-6 m-0 rounded-0 " onclick="pin_record();"><strong>載入</strong></button>
                       <button type="button" class="btn btn-secondary fs-6 text-decoration-none col-6 m-0 rounded-0 " data-bs-dismiss="modal"><strong>關閉</strong></button>
                    </div>
                </div>
            </div>
        </div>
        



         <!-- 載入腳位設定互動視窗 -->
        <div class="modal fade" id="control_code_Modal">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">

                    <!-- 互動視窗 標題 -->
                    <div class="modal-header">
                        <h4 id="Modal_RF_title_input" class="modal-title"></h4>
                        <span class="h3 mx-1">載入積木程式</span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <!-- 互動視窗 內容 -->
                    <div class="modal-body">
                    <strong><a>歷史程式紀錄:</a></strong>
                    <select id="code_record" oninput="">
                            <option value=""></option>
                           
							      </select>
                      
                                            
                    </div>
                    <div class="modal-footer flex-nowrap p-0">
                       <button type="button" class="btn btn-primary  fs-6 text-decoration-none col-6 m-0 rounded-0 " onclick="code_record()"><strong>開啟</strong></button>
                       <button type="button" class="btn btn-secondary fs-6 text-decoration-none col-6 m-0 rounded-0 " data-bs-dismiss="modal"><strong>關閉</strong></button>
                    </div>
                </div>
            </div>
        </div>
        
                
        
  <div class="album py-5 bg-light">
    <div class="container">
    
      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
        <div class="col">
          <div class="card shadow-sm">
          <input id="program_name" type="text" value='{{TankID}}' class="h3 mb-4 fw-normal"style="background-color: Silver; height: 50px; text-align:center;">
          
          <h1 class="h3 mb-4 fw-normal"style="background-color: Silver; height: 50px; text-align:center;">積木程式設定</h1>
            <div class="card-body">
            <body onload="start()">
         <div class="row row-cols-12 row-cols-sm-12 row-cols-md-12">
          <div class="btn-toolbar" role="toolbar" style="justify-content: center;">
            <div class="btn-group">
              <button type="button" class="btn btn-secondary" onclick="back()">
              <span class="glyphicon glyphicon-folder-open"></span> 重新選擇桶槽
              </button>   
              <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#control_code_Modal" onclick="code_set()">
              <span class="glyphicon glyphicon-folder-open"></span> 開啟積木程式
              </button>
              <input type="file" id="load" style="display: none;"/> 
              <button type="button" class="btn btn-secondary" onclick="save_xml()">
              <span class="glyphicon glyphicon-floppy-disk"></span> 儲存積木程式
              </button>
              <button type="button" class="btn btn-secondary" onclick="discard()">
              <span class="glyphicon glyphicon-trash"></span> 清除工作區
              </button>
              <button type="button" class="btn btn-secondary" onclick="save_code()">
              <span class="glyphicon glyphicon-download-alt"></span> 下載 C 程式
              </button>
            </div>
          </div>
         </div>
    <div class="container">
      <div id="main-wrapper" class="row">   
        <div class="col-md-7">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">積木程式</h3>
            </div>
            <div id="blocklyDiv" class="panel-body" ></div>
          </div>
        </div>
        <xml id="toolbox">
            <category name="變數">
                <category name="變數">
                    <block type="variables_declare">
                        <value name="VALUE">
                            <block type="math_number">
                                <field name="NUM">2</field>
                            </block>
                        </value>                    
                    </block>
                    <block type="variables_get"></block>
                    <block type="variables_set">
                        <value name="VALUE">
                            <block type="math_number">
                                <field name="NUM">1</field>
                            </block>
                        </value>                        
                    </block>
                    <block type="library_stdio_text_char"></block>
                    <block type="math_number"></block>
                </category>
                <category name="指標">
                    <block type="variables_pointer_declare">
                        <value name="VALUE">
                            <block type="logic_null"></block>
                        </value>                    
                    </block>
                    <block type="variables_pointer_get"></block>
                    <block type="variables_pointer_set">
                        <value name="VAR">
                            <block type="variables_pointer_get">
                            </block>
                        </value>
                        <value name="VALUE">
                            <block type="variables_pointer_&">
                                 <value name="VALUE">
                                     <block type="variables_get">
                                     </block>
                                 </value> 
                            </block>
                        </value>
                    </block>
                    <block type="variables_pointer_&"></block>
                    <block type="variables_pointer_*"></block>
                </category>
                <category name="陣列">
                    <block type="variables_array_declare">
                        <value name="LENGTH_1">
                            <block type="math_number">
                                <field name="NUM">3</field>
                            </block>
                        </value>
                    </block>
                    <block type="variables_array_initial"></block>
                    <block type="variables_array_get">
                        <value name="LENGTH_1">
                            <block type="math_number">
                                <field name="NUM">0</field>
                            </block>
                        </value>
                    </block>
                    <block type="variables_array_set">
                        <value name="LENGTH_1">
                            <block type="math_number">
                                <field name="NUM">0</field>
                            </block>
                        </value>
                        <value name="VALUE">
                            <block type="math_number">
                                <field name="NUM">1</field>
                            </block>
                        </value>
                    </block>
                    <block type="variables_array_pointer"></block>
                    <block type="variables_string_declare">
                        <value name="LENGTH_1">
                            <block type="math_number">
                                <field name="NUM">15</field>
                            </block>
                        </value>
                        <value name="VALUE">
                            <block type="library_stdio_text">
                                <field name="TEXT">hello!</field>
                            </block>
                        </value>
                    </block>
                    <block type="library_stdio_text_char"></block>                    
                    <block type="variables_string_null"></block>
                    <block type="arr_data"></block>
                </category>
            </category>
            <category name="運算">
                <block type="math_number"></block>
                <block type="math_arithmetic"></block>
                <block type="math_modulo"></block>
                <block type="math_convert_type"></block>
                <block type="math_auto_convert_type"></block>
                <block type="math_increment_expression"></block>
                <block type="math_decrement_expression"></block>
                <block type="math_prev_inc_decrement"></block>
                <block type="math_post_inc_decrement"></block>
            </category>
            <category name="輸出">
                <block type="library_stdio_printf"></block>
                <block type="library_stdio_text"></block>
                <block type="library_stdio_newLine"></block>
                <block type="library_stdio_tab"></block>
                <block type="math_number"></block>
            </category>
            <category name="輸入">
                <block type="library_stdio_scanf">
                    <value name="VAR0">
                       <block type="variables_get">
                       </block>
                    </value> 
                </block>            
            </category>            
            <category name="條件">
                <block type="controls_if"></block>
                <block type="controls_switch"></block>
                <block type="controls_switch_break"></block>
                <block type="logic_ternary"></block>
            </category>
            <category name="迴圈">
                <block type="controls_whileUntil"></block>
                <block type="controls_doWhile"></block>
                <block type="controls_for">
                        <value name="FROM">
                            <block type="math_number">
                                <field name="NUM">1</field>
                            </block>
                        </value>
                        <value name="TO">
                            <block type="math_number">
                                <field name="NUM">10</field>
                            </block>
                        </value>
                        <value name="BY">
                            <block type="math_number">
                                <field name="NUM">1</field>
                            </block>
                        </value>                        
                </block>
                <block type="controls_flow_statements"></block>
                <block type="controls_fors">
                        <value name="FROM">
                            <block type="math_number">
                                <field name="NUM">1</field>
                            </block>
                        </value>
                        <value name="TO">
                            <block type="math_number">
                                <field name="NUM">10</field>
                            </block>
                        </value>
                        <value name="BY">
                            <block type="math_number">
                                <field name="NUM">1</field>
                            </block>
                        </value>                        
                </block>
            </category>
            <category name="邏輯">
                <block type="logic_compare"></block>
                <block type="logic_operation"></block>
                <block type="logic_negate"></block>
                <block type="logic_boolean"></block>
                <block type="logic_null"></block>
            </category>
            <category name="函數" custom="PROCEDURE">                
                <block type="procedures_defnoreturn"></block>
                <block type="procedures_defreturn"></block>
                <block type="procedures_return"></block>
            </category>
            </category>
            <category name="結構" custom="STRUCTURE">
                <block type="structure_define"></block>
                <block type="structure_declare"></block>
            </category>  
            <category name="函數庫">
                <category name="標準函數庫 stdlib.h">
                    <block type="library_stdlib_abs"></block>
                    <block type="library_stdlib_convert"></block>
                    <block type="library_stdlib_rand">
                        <value name="VAR">
                            <block type="library_stdlib_rand_scope">
                                <value name="A">
                                    <block type="library_stdlib_number_forRandScope1"></block>
                                </value>
                                <value name="B">
                                    <block type="library_stdlib_number_forRandScope100"></block>
                                </value>
                            </block>
                        </value>
                    </block>
                    <block type="library_stdlib_malloc">
                        <value name="VAR">
                            <block type="library_stdlib_arithmetic_forMalloc">
                                <value name="A">
                                    <block type="library_stdlib_sizeof_forMalloc"></block>
                                </value>
                                <value name="B">
                                    <block type="library_stdlib_number_forMalloc"></block>
                                </value>
                            </block>
                        </value>
                    </block>
                    <block type="library_stdlib_arithmetic_forMalloc">
                        <value name="A">
                            <block type="library_stdlib_sizeof_forMalloc"></block>
                        </value>
                        <value name="B">
                            <block type="library_stdlib_number_forMalloc"></block>
                        </value>
                    </block>
                    <block type="library_stdlib_free"></block>
                    <block type="library_stdlib_exit"></block>
                </category>
                <category name="字串 string.h">
                    <block type="library_string_strlen"></block>
                    <block type="library_string_strcat"></block>
                    <block type="library_string_strcpy"></block>
                    <block type="library_string_strcmp"></block>
                </category>
                <category name="數學 math.h">
                    <block type="library_math_abs"></block>
                    <block type="library_math_trig"></block>
                    <block type="library_math_logs"></block>
                    <block type="library_math_pow"></block>
                    <block type="library_math_exp"></block>
                    <block type="library_math_sqrt"></block>
                    <block type="library_math_round"></block>
                    <block type="library_math_numcheck"></block>
                    <block type="library_math_numcompare"></block>
                </category>
                <category name="時間 time.h">
                    <block type="library_time_current"></block>
                    <block type="library_time_requiredTime"></block>
                </category>
            </category>
            <category name="巨集">
                <block type="define_declare"></block>
                <block type="define_get"></block>
                <block type="library_stdio_text"></block>
                <block type="math_number"></block>                
            </category>          
            <category name="註解">
                <block type="comment">
                    <value name="VAR0">
                        <block type="library_stdio_text"> 
                        </block>
                    </value>
                </block>
                <block type="library_stdio_text">
                </block>
            </category>
            <category name="stm32 初始設定">
                <block type="include">
                </block>
                <block type="vari">
                    <value name="VALUE">
                            <block type="math_number">
                                <field name="NUM">0</field>
                            </block>
                    </value>  
                </block>
                <block type="def">
                    <value name="VALUE">
                        <block type="arr_data"></block>
                    </value>  
                </block>
                <block type="array_declare">
                     <value name="LENGTH_1">
                            <block type="math_number">
                                <field name="NUM">3</field>
                            </block>
                     </value>
                     <value name="VALUE">
                            <block type="variables_array_initial">
                                <value name="ADD0">
                                   <block type="arr_data">
                                   </block>
                                </value>
                                <value name="ADD1">
                                   <block type="arr_data">
                                   </block>
                                </value>
                                <value name="ADD2">
                                   <block type="arr_data">
                                   </block>
                                </value>
                            </block>
                     </value>
                </block>
            </category>
            <category name="stm32 函式">
                <block type="var">
                </block>
                <block type="control">
                </block>
                <block type="free">
                </block>
            </category>
        </xml>
        <div class="col-md-5">
          <div id="code-wrapper" class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">程式碼</h3>
            </div>
            <pre id="code" class="panel-body"></pre>
          </div>
        </div>
      </div>
    </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
  
  
  
  
  
  
  <div class="album py-5 bg-light">
    <div class="container">
    
      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
        <div class="col">
          <div class="card shadow-sm">
          <h1 class="h3 mb-4 fw-normal"style="background-color: Silver; height: 50px; text-align:center;">{{TankID}}</h1>
          <h1 class="h3 mb-4 fw-normal"style="background-color: Silver; height: 50px; text-align:center;">燒錄結果</h1>
           <div class="row row-cols-12 row-cols-sm-12 row-cols-md-12">
                <div class="btn-toolbar" role="toolbar" style="justify-content: center;">
                   <div class="btn-group">  
                     <button type="button" class="btn btn-secondary" onclick="back()">
                     <span class="glyphicon glyphicon-folder-open"></span> 重新選擇桶槽
                     </button>   
                     <button type="button" class="btn btn-secondary" onclick="programmer()">
                     <span class="glyphicon glyphicon-download-alt"></span> 燒錄
                     </button>
                   </div>
                </div>
        
           </div>
            <div class="card-body">
          
                  生成hex檔：<span id="creat_hex_Value"></span>
                    <br>
                    <br>
                  燒錄hex檔：<span id="programmer_Value"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}