coffeeproject20230512/coffeeproject/app/templates/auto_DO.html

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

{% block script %}
    <script language="JavaScript">
        function myrefresh()
        { 
          $.get('/dry_auto_data', function (resText) {
                var DI = [resText.DI1,resText.DI2];
                var D=[resText.D1,resText.D2,resText.D3,resText.D4,resText.D5,resText.D6,resText.D7,resText.D8,resText.D9,resText.D10,resText.D11,resText.D12];
                var DO = [resText.DO1,resText.DO2];
                for (let i=0; i<2; i++) {
                    if (DI[i] == 'DI_InputtingBean') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                  } else if (DI[i] == 'DI_Waiting') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                  } else if (DI[i] == 'DI_OutputtingBean') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                  } else if (DI[i] == 'DI_Stand_by') {
                        $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }
                for (let i=0; i<12; i++) {
                if (D[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                  } else if (D[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                  } else if (D[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                  } else if (D[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                  } else if (D[i] == 'D_InputtingWater') {
                      $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 外桶入水中")
                  } else if (D[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                  } else if (D[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "Peru")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                  } else if (D[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                  } else if (D[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                  } else if (D[i] == 'D_Stand_by') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 待命")
                  } else {
                    console.log('pass')
                  }
                }                
                for (let i=0; i<2; i++) {
                if (DO[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")

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

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

                  } else {
                    console.log('pass')
                  }                
                }             
          },'json');
          loading_DO()
        }
        setInterval('myrefresh()',1000);
    </script>
    <script>
        var status = '{{status}}';
        var username = '{{username}}';
        $(document).ready(function(){
            $("#coffee_title_pc").text('乾燥出料自動化');
            $("#coffee_title_phone").text('乾燥出料自動化');
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
            // 桶槽入料顯示
            dry_input_status_N = ['{{DI1}}', '{{DI2}}']
            for (let i=0; i<dry_input_status_N.length; i++) {
                if (dry_input_status_N[i] == 'DI_InputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
                } else if (dry_input_status_N[i] == 'DI_Waiting') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
                } else if (dry_input_status_N[i] == 'DI_OutputtingBean') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
                } else if (dry_input_status_N[i] == 'DI_Stand_by') {
                    $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
            }
            // 桶槽狀態顯示
            dry_tank_status_N = ['{{D1}}', '{{D2}}', '{{D3}}', '{{D4}}', '{{D5}}', '{{D6}}',
                                 '{{D7}}', '{{D8}}', '{{D9}}', '{{D10}}', '{{D11}}', '{{D12}}']
            for (let i=0; i<dry_tank_status_N.length; i++) {
                if (dry_tank_status_N[i] == 'D_InputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Pause') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
                } else if (dry_tank_status_N[i] == 'D_InputtingBean_Finish') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
                } else if (dry_tank_status_N[i] == 'D_InputtingWater') {
                      $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "DeepSkyBlue")
                      $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "外桶入水中")
                } else if (dry_tank_status_N[i] == 'D_Waiting') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
                } else if (dry_tank_status_N[i] == 'D_Cleaning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
                } else if (dry_tank_status_N[i] == 'D_Drying') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "Peru")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
                } else if (dry_tank_status_N[i] == 'D_OutputtingBean') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
                } else if (dry_tank_status_N[i] == 'D_Warning') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
                } else if (dry_input_status_N[i] == 'D_Stand_by') {
                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "HotPink")
                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + " 待命")
                } else {
                    console.log('pass')
                }
            }
            // 桶槽出料顯示
            dry_output_status_N = ['{{DO1}}', '{{DO2}}']
                        for (let i=0; i<dry_output_status_N.length; i++) {
                if (dry_output_status_N[i] == 'DO_InputtingBean') {
                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")

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

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

                } else {
                    console.log('pass')
                }
    
            }
            loading_DO()
        });
        
        function loading_DO(){
            var dotid = '{{dotid}}';
            $.get('/loading/DO'+dotid, '', function (resText) {
                var a=[resText.output_vacuum]
                for (let i=0; i<1; i++) {
                    if (a[i] == 1) {
                        $("#actuator_"+parseInt(i)+"_status").css("background-color", "MediumSeaGreen")
                  } else if (a[i] == 0) {
                        $("#actuator_"+parseInt(i)+"_status").css("background-color", "lightgray")
                  }
                    else {
                    $("#actuator_"+parseInt(i)+"_status").css("background-color", "crimson")
                  }
                }              
                $("#sensor_99").text(resText.output_UltraSonic);  
            }, 'json');     
        };
    </script>
{% endblock %}

{% block style %}
    <style>
        .D_status_css {
            font-weight: bold;
            text-align: center;
        }
        .input-text {
            height: 25px;
            width: 40px;
            text-align: center;
            margin-left: 2px;
            margin-right: 5px;
        }
    </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">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
                <div style="text-align: center;">
                <tr>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                   
                                    <div id="DI1" tabindex="0" class="DI1_position" role="button" style="text-align: center;">
                                        <span id="DI1_status" class="D_status_css">DI1 status</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>

                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    
                                    <div id="D1" tabindex="0" class="D1_position" role="button">
                                        <span id="D1_status" class="D_status_css">D1 status</span>
                                        <!-- D1 狀態點點-->
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    
                                   <div id="D2" tabindex="0" class="D2_position" role="button">
                                        <span id="D2_status" class="D_status_css">D2 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    
                                    <div id="D3" tabindex="0" class="D3_position" role="button">
                                        <span id="D3_status" class="D_status_css">D3 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    
                                    <div id="D4" tabindex="0" class="D4_position" role="button">
                                        <span id="D4_status" class="D_status_css">D4 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                   <div id="D5" tabindex="0" class="D5_position" role="button">
                                        <span id="D5_status" class="D_status_css">D5 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                         <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="D6" tabindex="0" class="D6_position" role="button">
                                        <span id="D6_status" class="D_status_css">D6 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                         <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                   <div id="DO1" tabindex="0" class="DO1_position" role="button">
                                        <span id="DO1_status" class="D_status_css">DO1 status</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>

                </tr>
                <tr>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DI1_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D1_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D2_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D3_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D4_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D5_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                     <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D6_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DO1_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>                
                
                </tr>
                <tr>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        入料儲豆槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        乾燥槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        乾燥槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        乾燥槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        乾燥槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        乾燥槽
                    </td>
                     <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        乾燥槽
                    </td>
                    <td style="border: lightsteelblue 1px solid;" width="12.5%">
                        出料儲豆槽
                    </td>
                </tr>

                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="DI2" tabindex="0" class="DI2_position" role="button">
                                        <span id="DI2_status" class="D_status_css">DI2 status</span>
                                        <!-- D1 狀態點點-->
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>

                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="D7" tabindex="0" class="D7_position" role="button">
                                        <span id="D7_status" class="D_status_css">D7 status</span>
                                        
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </td>
                                      
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="D8" tabindex="0" class="D8_position" role="button">
                                        <span id="D8_status" class="D_status_css">D8 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="D9" tabindex="0" class="D9_position" role="button">
                                        <span id="D9_status" class="D_status_css">D9 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                      <div id="D10" tabindex="0" class="D10_position" role="button">
                                        <span id="D10_status" class="D_status_css">D10 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="D11" tabindex="0" class="D11_position" role="button">
                                        <span id="D11_status" class="D_status_css">D11 status</span>
                                        
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    
                    <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="D12" tabindex="0" class="D12_position" role="button">
                                        <span id="D12_status" class="D_status_css">D12 status</span>
                                        
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </td>
                    
                     <td style="border: lightsteelblue 1px solid;">
                        <table style="border: 0px plum solid; margin-right: auto; margin-left: auto; text-align: center;" cellpadding="5">
                            <tr>
                                <td>
                                    <div id="DO2" tabindex="0" class="DO2_position" role="button">
                                        <span id="DO2_status" class="D_status_css">DO2 status</span>
                                        
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </td>
                    
                </tr>
                <tr>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DI2_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D7_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D8_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D9_status_dot" style=" height: 20px; background-color: black;"></div>
                    </td>
                    <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D10_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D11_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                     <td  width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="D12_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>
                    <td width="12.5%" style="border: lightsteelblue 1px solid;">
                        <div id="DO2_status_dot" style="height: 20px; background-color: black;"></div>
                    </td>                
                
                </tr>
            </table>
            </div>
            <!-- 發酵貨櫃 致動器狀態 感測器數值 -->
            <div style="text-align: center;">
                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
                    <tr>
                        <td  width="100%" style="border: lightsteelblue 1px solid;">
                            出料<br>真空吸料機
                        </td>                   
                    </tr>
                    <tr>
                        <td>
                            <div id="actuator_0_status" style="margin:0 auto;  height: 20px; background-color: lightgray;"></div>
                        </td>
                    </tr>

                </table>

                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
                    <tr>
                       
                        <td style="border: lightsteelblue 1px solid;">
                            生豆<br>高度
                        </td>
                    
                    </tr>
                    <tr>
                       
                        <td>
                            <span id="sensor_99"></span>
                        </td>
             
                    </tr>
                </table>
                
                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px; line-height: 28px;" cellpadding="5" border="1">
                <tr>
                    <td style="border: lightsteelblue 1px solid;">
                        桶槽<br>
                        參數設定
                    </td>
                </tr>
                
                <tr>
                    <td style="padding: 10px; text-align: left; vertical-align: text-top;">
                        生豆高度
                        <input name="Ferment_Tank_bean_height" class="input-text" type="text" value="5">公分<br>
                        吸放料時間
                        <input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>

                    </td>
                </tr>
                </table>
                </div>
                
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}