allen
/
coffeeproject20230512


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

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

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!--
    <script src="../static/js/sign_in.js"></script>

    <link rel="stylesheet" href="../static/css/sign_in.css">
    -->
    <style>
        .D1_position {
            position: absolute;
            top: 135px;
            left: 210px;
            width: 175px;
            height: 230px;
            border-style: solid;
            border-color: aqua;

        }

        .D2_position {
            position: absolute;
            top: 135px;
            left: 400px;
            width: 175px;
            height: 230px;
            border-style: solid;
            border-color: aqua;

        }

        .D3_position {
            position: absolute;
            top: 135px;
            left: 590px;
            width: 170px;
            height: 230px;
            border-style: solid;
            border-color: aqua;

        }

        .D4_position {
            position: absolute;
            top: 135px;
            left: 785px;
            width: 165px;
            height: 230px;
            border-style: solid;
            border-color: aqua;

        }

        .D5_position {
            position: absolute;
            top: 135px;
            left: 965px;
            width: 165px;
            height: 230px;
            border-style: solid;
            border-color: aqua;

        }

        .D6_position {
            position: absolute;
            top: 135px;
            left: 1155px;
            width: 165px;
            height: 230px;
            border-style: solid;
            border-color: aqua;

        }
    </style>
    <script language="JavaScript">
        // 指定 10秒 刷新網頁一次
        var WebRestart
        // WebRestart = setTimeout(function () { location.reload() }, 10000);
    </script>

    <script>
        $('#D2').click(
            function () {
                $.get('/loading',
                    '',
                    function (res) {
                        $("#SHT11_Temp_status").text(res.SHT11_Temp);
                    },
                    'json'
                );
            }
        );
        function Peeling() {
            $.get('/loading', '', function (res) {
                //console.log(res.peeling);
                $("#SHT11_Temp_status").text(res.SHT11_Temp);
            }, 'json');
        };
    </script>

</head>

<body>
    <!--
        background-color:rgb(0, 238, 255);
    -->
    <div style="text-align: center; margin-top: 30px;font-size: 24px;">
        Smart Coffee
    </div>
    <div>
        <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
        <center><img src="../static/img/web_dry_container.png" width="1500x" style="margin: auto;"></center>

        <!-- 乾燥槽 D1 START-->
        <div id="D1" tabindex="0" class="D1_position" role="button">
            D1
            status
            <!-- D1 狀態點點-->
            <div id="D1_status"
                style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
        </div>
        <!-- 乾燥槽 D1 END-->

        <!-- 乾燥槽 D2 -->
        <div id="D2" tabindex="0" class="D2_position" role="button">
            D2
            status
            <div id="D2_status"
                style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
        </div>

        <!-- 乾燥槽 D3 -->
        <div id="D3" tabindex="0" class="D3_position" role="button">
            D3
            status
            <div id="D3_status"
                style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
        </div>

        <!-- 乾燥槽 D4 -->
        <div id="D4" tabindex="0" class="D4_position" role="button">
            D4
            status
            <div id="D4_status"
                style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
        </div>

        <!-- 乾燥槽 D5 -->
        <div id="D5" tabindex="0" class="D5_position" role="button">
            D5
            status
            <div id="D5_status"
                style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
        </div>

        <!-- 乾燥槽 D6 -->
        <div id="D6" tabindex="0" class="D6_position" role="button">
            D6
            status
            <div id="D6_status"
                style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
        </div>

    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="D1_Modal">
        <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">


                    <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                        <!--<table style="border:0px gray solid;-->
                        <tr>
                            <td><strong><a href="/dry_container/1">制動器狀態</a></strong></td>
                            <td><strong><a href="/dry_container/1">感測器狀態</a></strong></td>
                        </tr>
                        <tr>
                            <td style="vertical-align:text-top;">
                                <table style="border:0px gray solid;" cellpadding="3">
                                    <!--font-size:12px; -->
                                    <tr>
                                        <td>
                                            <div id="tank_vacuum_status"
                                                style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;">
                                            </div>
                                        </td>
                                        <td>
                                            真空吸料機
                                            <span id="tank_vacuum_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_3wayvalve=='ON' %}
                                            <div id="D1_threewwayvalve_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_3wayvalve=='OFF' %}
                                            <div id="D1_threewwayvalve_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_threewwayvalve_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            三通閥
                                            <span id="tank_3wayvalve_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_solenoid_disinfect=='ON' %}
                                            <div id="D1_solenoid_disinfect_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_solenoid_disinfect=='OFF' %}
                                            <div id="D1_solenoid_disinfect_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_solenoid_disinfect_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            消毒電磁閥
                                            <span id="tank_solenoid_disinfect_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if (tank_motor>0) or (0>tank_motor) %}
                                            <div id="D1_motor_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_motor==0 %}
                                            <div id="D1_motor_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_motor_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            馬達
                                            <span id="tank_motor_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_blower=='ON' %}
                                            <div id="D1_blower_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_blower=='OFF' %}
                                            <div id="D1_blower_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_blower_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            鼓風機
                                            <span id="tank_blower_t_status"></span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            {% if tank_heater1=='ON' %}
                                            <div id="D1_heater1_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_heater1=='OFF' %}
                                            <div id="D1_heater1_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_heater1_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            加熱器 1
                                            <span id="tank_heater1_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_heater2=='ON' %}
                                            <div id="D1_heater2_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_heater2=='OFF' %}
                                            <div id="D1_heater2_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_heater2_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}

                                        </td>
                                        <td>
                                            加熱器 2
                                            <span id="tank_heater2_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_temp1_enable=='ON' %}
                                            <div id="D1_temp_enable_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_temp1_enable=='OFF' %}
                                            <div id="D1_temp_enable_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_temp_enable_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}

                                        </td>
                                        <td>
                                            溫控開關
                                            <span id="tank_temp1_enable_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_temp1==0 %}
                                            <div id="D1_temp_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% elif tank_temp1>0 %}
                                            <div id="D1_temp_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_temp_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}

                                        </td>
                                        <td>
                                            溫度設定
                                            <span id="tank_temp1_t_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            {% if tank_solenoid_water=='ON' %}
                                            <div id="D1_solenoid_water_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_solenoid_water=='OFF' %}
                                            <div id="D1_solenoid_water_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_solenoid_water_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}
                                        </td>
                                        <td>
                                            排水電磁閥
                                            <span id="tank_solenoid_water_t_status"></span>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            {% if tank_diskvalve=='ON' %}
                                            <div id="D1_diskvalve_status"
                                                style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;">
                                            </div>
                                            {% elif tank_diskvalve=='OFF' %}
                                            <div id="D1_diskvalve_status"
                                                style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;">
                                            </div>
                                            {% else %}
                                            <div id="D1_diskvalve_status"
                                                style="width: 18px; height: 18px; background-color: crimson; border-radius: 50%;">
                                            </div>
                                            {% endif %}

                                        </td>
                                        <td>
                                            蝴蝶閥
                                            <span id="tank_diskvalve_t_status"></span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td style="vertical-align:text-top;">
                                <table style="border:0px gray solid;" cellpadding="3">
                                    <!--font-size:12px; -->
                                    <tr>
                                        <td>
                                            咖啡生豆高度
                                        </td>
                                        <td>
                                            {{tank_UltraSonic.UltraSonic}}
                                            <span id="UltraSonic_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <a href="/chart/SHT11_Temp">乾燥槽溫度</a>
                                        </td>
                                        <td>
                                            {{tank_SHT11.SHT11_Temp}}
                                            <span id="SHT11_Temp_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            乾燥槽濕度
                                        </td>
                                        <td>
                                            {{tank_SHT11.SHT11_Humidity}}
                                            <span id="SHT11_Humidity_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            咖啡生豆溫度
                                        </td>
                                        <td>
                                            {{tank_Soil.soil_Temp}}
                                            <span id="soil_Temp_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            咖啡生豆濕度
                                        </td>
                                        <td>
                                            {{tank_Soil.soil_Humidity}}
                                            <span id="soil_Humidity_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            咖啡生豆 EC
                                        </td>
                                        <td>
                                            {{tank_Soil.soil_EC}}
                                            <span id="soil_EC_status"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            桶內壓力
                                        </td>
                                        <td>
                                            {{tank_PA.PA}}
                                            <span id="PA_status"></span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        var button_D1 = document.getElementById('D1');
        button_D1.addEventListener('click', function () {
            $('#D1_Modal').modal('show');
        });

        function update_data(dtn) {
            console.log('dry_tank_num:' + dtn)
            // dtn = dry_tank_num
            $.get('/loading/' + dtn, '', function (res) {

                if (res.tank_vacuum == 0){$("#tank_vacuum_status").css("background-color", "#C0C0C0")
                }else if(res.tank_vacuum == 1){$("#tank_vacuum_status").css("background-color", "forestgreen")
                }else{$("#tank_vacuum_status").css("background-color", "crimson")}

                if (res.tank_3wayvalve == 0){$("#tank_3wayvalve_status").css("background-color", "#C0C0C0")
                }else if(res.tank_3wayvalve == 1){$("#tank_3wayvalve_status").css("background-color", "forestgreen")
                }else{$("#tank_3wayvalve_status").css("background-color", "crimson")}

                if (res.tank_vacuum == 0){$("#tank_vacuum_status").css("background-color", "#C0C0C0")
                }else if(res.tank_vacuum == 1){$("#tank_vacuum_status").css("background-color", "forestgreen")
                }else{$("#tank_vacuum_status").css("background-color", "crimson")}

                
                $("#tank_vacuum_t_status").text(res.tank_vacuum);
                $("#tank_3wayvalve_t_status").text(res.tank_3wayvalve);
                $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
                $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
                $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
                $("#tank_motor_t_status").text(res.tank_motor);
                $("#tank_blower_t_status").text(res.tank_blower);
                $("#tank_heater1_t_status").text(res.tank_heater1);
                $("#tank_heater2_t_status").text(res.tank_heater2);
                $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
                $("#tank_temp1_t_status").text(res.tank_temp1);
                
                $("#UltraSonic_t_status").text(res.UltraSonic);
                $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
                $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
                $("#soil_Temp_t_status").text(res.soil_Temp);
                $("#soil_Humidity_t_status").text(res.soil_Humidity);
                $("#soil_EC_t_status").text(res.soil_EC);
                $("#PA_t_status").text(res.PA);
            }, 'json');

            $('#Modal_title').text("乾燥槽 " + dtn + " 狀態")
            $('#D1_Modal').modal('show');
        }

        var button_D2 = document.getElementById('D2');
        button_D2.addEventListener('click', function(){update_data("D2")});

        var button_D3 = document.getElementById('D3');
        button_D3.addEventListener('click', function(){update_data("D3")});
        
        /*
        $('#D2').click(
            function(){
                $.get('/loading',
                '',
                function(res) {
                    $("#SHT11_Temp_status").text(res.SHT11_Temp);
                },
                'json'
                );
            }
        );
        */

    </script>

</body>

</html>