%!s(int64=3) %!d(string=hai) anos · fe72c2c8da
--- a/app/templates/GoldIn
+++ b/app/templates/GoldIn
@@ -1,51 +1,51 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>GoldIn</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">
			
 
				-
			
 
				-</head>
			
 
				-<body>
			
 
				-    <div class="container" style="text-align: center;">
			
 
				-        <div class="row">
			
 
				-            <div class="col-1"></div>
			
 
				-            <div class="col">
			
 
				-                <div class="row">
			
 
				-                    <div class="col-12" style="margin-top: 100px; font-size: 24px;">
			
 
				-                        GoldIn's  Coffee
			
 
				-                    </div>                    
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="col-1"></div>
			
 
				-        </div>
			
 
				-        <div class="row">
			
 
				-            <div class="col-1"></div>
			
 
				-            <div class="col">
			
 
				-                <div class="row">
			
 
				-                    <div class="col-12">
			
 
				-                        <img src="../static/img/web_dry_container.png" style="vertical-align: middle; text-align: center;" class="img-fluid">
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="col-1"></div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>GoldIn</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">

			
 
				+

			
 
				+</head>

			
 
				+<body>

			
 
				+    <div class="container" style="text-align: center;">

			
 
				+        <div class="row">

			
 
				+            <div class="col-1"></div>

			
 
				+            <div class="col">

			
 
				+                <div class="row">

			
 
				+                    <div class="col-12" style="margin-top: 100px; font-size: 24px;">

			
 
				+                        GoldIn's  Coffee

			
 
				+                    </div>                    

			
 
				+                </div>

			
 
				+            </div>

			
 
				+            <div class="col-1"></div>

			
 
				+        </div>

			
 
				+        <div class="row">

			
 
				+            <div class="col-1"></div>

			
 
				+            <div class="col">

			
 
				+                <div class="row">

			
 
				+                    <div class="col-12">

			
 
				+                        <img src="../static/img/web_dry_container.png" style="vertical-align: middle; text-align: center;" class="img-fluid">

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+            <div class="col-1"></div>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/GoldIn.html
+++ b/app/templates/GoldIn.html
@@ -1,64 +1,64 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>GoldIn</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_status {
			
 
				-            width: 20px;
			
 
				-            height: 20px;
			
 
				-            background-color:cornflowerblue;
			
 
				-            border-radius: 50%;
			
 
				-        }
			
 
				-
			
 
				-        .absolute {
			
 
				-            position: absolute;
			
 
				-            top: 175px;
			
 
				-            left: 195px;
			
 
				-            width: 170px;
			
 
				-            height: 230px;
			
 
				-            border-style: solid;
			
 
				-            border-color: aqua;
			
 
				-
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <!--
			
 
				-        background-color:rgb(0, 238, 255);
			
 
				-    -->
			
 
				-    <div style="text-align: center; margin-top: 70px;font-size: 24px;">
			
 
				-        GoldIn's Coffee
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <img src="../static/img/web_dry_container.png" width="1500x" style="margin: auto;">
			
 
				-        <div class="absolute">
			
 
				-            D1
			
 
				-            status
			
 
				-            <div id="D1_status"></div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>GoldIn</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_status {

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            background-color:cornflowerblue;

			
 
				+            border-radius: 50%;

			
 
				+        }

			
 
				+

			
 
				+        .absolute {

			
 
				+            position: absolute;

			
 
				+            top: 175px;

			
 
				+            left: 195px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <!--

			
 
				+        background-color:rgb(0, 238, 255);

			
 
				+    -->

			
 
				+    <div style="text-align: center; margin-top: 70px;font-size: 24px;">

			
 
				+        GoldIn's Coffee

			
 
				+    </div>

			
 
				+    <div>

			
 
				+        <img src="../static/img/web_dry_container.png" width="1500x" style="margin: auto;">

			
 
				+        <div class="absolute">

			
 
				+            D1

			
 
				+            status

			
 
				+            <div id="D1_status"></div>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/camera.html
+++ b/app/templates/camera.html
@@ -1,310 +1,311 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-
			
 
				-    <!-- 新 Bootstrap4 核心 CSS 文件 -->
			
 
				-    <link rel="stylesheet" href="https://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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    
			
 
				-    <style>
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-
			
 
				-        var tid = '{{tid}}';
			
 
				-        var WS_URL = '{{WS_URL}}';
			
 
				-        var camera_title = '{{camera_title}}';
			
 
				-
			
 
				-        console.log('tid:' + tid)
			
 
				-        console.log('camera_title: ' + camera_title)
			
 
				-        $(document).ready(function (){
			
 
				-            $("#camera_dry_title").text("M5 攝影機_" + camera_title + " " + tid);
			
 
				-            $("#coffee_title").text("攝影機_" + camera_title + " " + tid);
			
 
				-            $("#coffee_title").text(tid + " " + camera_title + "攝影機畫面");
			
 
				-/*
			
 
				-            if (camera_title == '乾燥出料儲豆槽' | camera_title == '乾燥入料儲豆槽' | camera_title == '乾燥槽' | 
			
 
				-                camera_title == '乾燥貨櫃內部' | camera_title == '乾燥貨櫃外部') {
			
 
				-                $("#PreviousPage").attr('href','/dry');
			
 
				-                $("#PreviousPage").text('返回乾燥貨櫃');
			
 
				-                $("#NextPage").attr('href','/camera_dry');
			
 
				-                $("#NextPage").text('前往乾燥貨櫃總攝影機畫面');
			
 
				-            } else if (camera_title == '發酵出料儲豆槽' | camera_title == '發酵入料儲豆槽' | camera_title == '發酵槽' | 
			
 
				-                        camera_title == '發酵貨櫃內部' | camera_title == '發酵貨櫃外部') {
			
 
				-                $("#PreviousPage").attr('href','/ferment');
			
 
				-                $("#PreviousPage").text('返回發酵貨櫃');
			
 
				-                $("#NextPage").attr('href','/camera_ferment');
			
 
				-                $("#NextPage").text('前往發酵貨櫃總攝影機畫面');
			
 
				-            } else if (camera_title == '清洗浮選出料儲豆槽' | camera_title == '清洗浮選槽' | camera_title == '色選機出料儲豆槽' | 
			
 
				-                        camera_title == '色選機' | camera_title == '脫皮機出料儲豆槽' | camera_title == '脫皮機' | 
			
 
				-                        camera_title == '清洗貨櫃內部' | camera_title == '清洗貨櫃外部') {
			
 
				-                $("#PreviousPage").attr('href','/clean');
			
 
				-                $("#PreviousPage").text('返回清洗貨櫃');
			
 
				-                $("#NextPage").attr('href','/camera_clean');
			
 
				-                $("#NextPage").text('前往清洗貨櫃總攝影機畫面');
			
 
				-            }            
			
 
				-*/            
			
 
				-        });
			
 
				-    </script>
			
 
				-
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="coffee_header">
			
 
				-        {% include 'header.html' %}
			
 
				-    </div>
			
 
				-
			
 
				-<!--
			
 
				-    <div style="text-align: left;">
			
 
				-        <a id="PreviousPage" href="" style="float: left;">________________</a>
			
 
				-    </div>
			
 
				-    <div style="text-align: right;">
			
 
				-        <a id="NextPage" href="" style="float: right;">________________</a>
			
 
				-    </div>
			
 
				-
			
 
				-    <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">
			
 
				-        M5 攝影機
			
 
				-    </div>
			
 
				--->
			
 
				-    <div class="container-fluid">
			
 
				-        <div class="row" style="margin-top:50px;">
			
 
				-            <div class="col flex">
			
 
				-                <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
			
 
				-                    <div class="col-md-12 row flex">
			
 
				-                        <img src="" id="four" width="90%" height="90%">
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-                <script>
			
 
				-                    // M5 攝影機
			
 
				-
			
 
				-                    //const img = document.querySelector('#one');
			
 
				-                    const img3 = document.querySelector('#four');
			
 
				-
			
 
				-                    //const WS_URL3 = 'ws:///60.250.156.230:0000';
			
 
				-                    const WS_URL3 = WS_URL;
			
 
				-
			
 
				-                    const ws3 = new WebSocket(WS_URL3);
			
 
				-                    let urlObject3;
			
 
				-                    ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
			
 
				-                    ws3.onmessage = message3 => {
			
 
				-                        const arrayBuffer3 = message3.data;
			
 
				-                        if (urlObject3) {
			
 
				-                            URL.revokeObjectURL(urlObject3);
			
 
				-                        }
			
 
				-                        urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
			
 
				-                        img3.src = urlObject3;
			
 
				-                    }
			
 
				-                </script>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-    <div id="coffee_footer">
			
 
				-        {% include 'footer.html' %}
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    

			
 
				+    <style>

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+

			
 
				+        var tid = '{{tid}}';

			
 
				+        var WS_URL = '{{WS_URL}}';

			
 
				+        var camera_title = '{{camera_title}}';

			
 
				+

			
 
				+        console.log('tid:' + tid)

			
 
				+        console.log('camera_title: ' + camera_title)

			
 
				+        $(document).ready(function (){

			
 
				+            $("#camera_dry_title").text("M5 攝影機_" + camera_title + " " + tid);

			
 
				+            $("#coffee_title_pc").text(tid + " " + camera_title + "攝影機畫面");

			
 
				+            $("#coffee_title_phone").text("攝影機_" + camera_title + " " + tid);

			
 
				+/*

			
 
				+            if (camera_title == '乾燥出料儲豆槽' | camera_title == '乾燥入料儲豆槽' | camera_title == '乾燥槽' | 

			
 
				+                camera_title == '乾燥貨櫃內部' | camera_title == '乾燥貨櫃外部') {

			
 
				+                $("#PreviousPage").attr('href','/dry');

			
 
				+                $("#PreviousPage").text('返回乾燥貨櫃');

			
 
				+                $("#NextPage").attr('href','/camera_dry');

			
 
				+                $("#NextPage").text('前往乾燥貨櫃總攝影機畫面');

			
 
				+            } else if (camera_title == '發酵出料儲豆槽' | camera_title == '發酵入料儲豆槽' | camera_title == '發酵槽' | 

			
 
				+                        camera_title == '發酵貨櫃內部' | camera_title == '發酵貨櫃外部') {

			
 
				+                $("#PreviousPage").attr('href','/ferment');

			
 
				+                $("#PreviousPage").text('返回發酵貨櫃');

			
 
				+                $("#NextPage").attr('href','/camera_ferment');

			
 
				+                $("#NextPage").text('前往發酵貨櫃總攝影機畫面');

			
 
				+            } else if (camera_title == '清洗浮選出料儲豆槽' | camera_title == '清洗浮選槽' | camera_title == '色選機出料儲豆槽' | 

			
 
				+                        camera_title == '色選機' | camera_title == '脫皮機出料儲豆槽' | camera_title == '脫皮機' | 

			
 
				+                        camera_title == '清洗貨櫃內部' | camera_title == '清洗貨櫃外部') {

			
 
				+                $("#PreviousPage").attr('href','/clean');

			
 
				+                $("#PreviousPage").text('返回清洗貨櫃');

			
 
				+                $("#NextPage").attr('href','/camera_clean');

			
 
				+                $("#NextPage").text('前往清洗貨櫃總攝影機畫面');

			
 
				+            }            

			
 
				+*/            

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+    <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a id="PreviousPage" href="" style="float: left;">________________</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="NextPage" href="" style="float: right;">________________</a>

			
 
				+        </div>

			
 
				+

			
 
				+        <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            M5 攝影機

			
 
				+        </div>

			
 
				+    -->

			
 
				+        <div class="container-fluid">

			
 
				+            <div class="row" style="margin-top:50px;">

			
 
				+                <div class="col flex">

			
 
				+                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">

			
 
				+                        <div class="col-md-12 row flex">

			
 
				+                            <img src="" id="four" width="90%" height="90%">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                    <script>

			
 
				+                        // M5 攝影機

			
 
				+

			
 
				+                        //const img = document.querySelector('#one');

			
 
				+                        const img3 = document.querySelector('#four');

			
 
				+

			
 
				+                        //const WS_URL3 = 'ws:///60.250.156.230:0000';

			
 
				+                        const WS_URL3 = WS_URL;

			
 
				+

			
 
				+                        const ws3 = new WebSocket(WS_URL3);

			
 
				+                        let urlObject3;

			
 
				+                        ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);

			
 
				+                        ws3.onmessage = message3 => {

			
 
				+                            const arrayBuffer3 = message3.data;

			
 
				+                            if (urlObject3) {

			
 
				+                                URL.revokeObjectURL(urlObject3);

			
 
				+                            }

			
 
				+                            urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));

			
 
				+                            img3.src = urlObject3;

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/camera_clean.html
+++ b/app/templates/camera_clean.html
@@ -1,328 +1,322 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-
			
 
				-    <!-- 新 Bootstrap4 核心 CSS 文件 -->
			
 
				-    <link rel="stylesheet" href="https://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">
			
 
				-    -->
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 10秒 刷新網頁一次
			
 
				-        var WebRestart
			
 
				-        // WebRestart = setTimeout(function () { location.reload() }, 10000);
			
 
				-        $(document).ready(function (){
			
 
				-            $("#coffee_title").text("清洗貨櫃攝影機");
			
 
				-        });
			
 
				-    </script>
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-        .video_1 img{
			
 
				-            padding: 10px 10px 0px 10px;   
			
 
				-            width: 448px;        
			
 
				-            height: 336px;
			
 
				-        }
			
 
				-        .video_31 img{
			
 
				-            margin: 5px 3px 0px 3px;   
			
 
				-            width: 320px;        
			
 
				-            height: 240px;
			
 
				-        }
			
 
				-        .video_32 img{
			
 
				-            margin: 0px 5px 0px 5px;   
			
 
				-            width: 240px;        
			
 
				-            height: 180px;
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-            background-color:rgb(0, 238, 255);
			
 
				-        -->
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/clean" style="float: left;">&nbsp;&nbsp;&nbsp;返回清洗貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        
			
 
				-        <div id="camera_ferment_title" style="text-align: center; margin-top: 30px; font-size: 24px;">
			
 
				-            清洗貨櫃攝影機
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <center>0.75 × 0.75</center>
			
 
				-        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
			
 
				-            <tr>
			
 
				-                <td></td>
			
 
				-                <td></td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_CCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_CCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td></td>
			
 
				-                <td></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td></td>
			
 
				-                <td></td>
			
 
				-                <td class="title_32">
			
 
				-                    清洗貨櫃內部
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    清洗貨櫃外部
			
 
				-                </td>
			
 
				-                <td></td>
			
 
				-                <td></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="6" style="color: lightgray;">
			
 
				-                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_C1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_CO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_S1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_SO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_P1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_PO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="title_32">
			
 
				-                    清洗浮選槽 C1
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    清洗浮選出料儲豆槽 CO1
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    色選機 S1
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    色選機出料儲豆槽 SO1
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    脫皮機 P1
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    脫皮機出料儲豆槽 PO1
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_C2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_CO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_S2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_SO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_P2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_32">
			
 
				-                    <a href="/camera_PO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="title_32">
			
 
				-                    清洗浮選槽 C2
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    清洗浮選出料儲豆槽 CO2
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    色選機 S2
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    色選機出料儲豆槽 SO2
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    脫皮機 P2
			
 
				-                </td>
			
 
				-                <td class="title_32">
			
 
				-                    脫皮機出料儲豆槽 PO2
			
 
				-                </td>
			
 
				-            </tr>        
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-        <br>
			
 
				-        <hr>
			
 
				-        <br>
			
 
				-        <br>
			
 
				-
			
 
				-        <center>1 × 1 ( 320 × 240)</center>
			
 
				-
			
 
				-        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
			
 
				-            <tr>
			
 
				-                <td></td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_CCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_CCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td></td>
			
 
				-                <td class="title_31">
			
 
				-                    清洗貨櫃內部
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    清洗貨櫃外部
			
 
				-                </td>
			
 
				-                <td></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="4" style="color: lightgray;">
			
 
				-                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_C1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_CO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_C2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_CO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="title_31">
			
 
				-                    清洗浮選槽 C1
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    清洗浮選出料儲豆槽 CO1
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    清洗浮選槽 C2
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    清洗浮選出料儲豆槽 CO2
			
 
				-                </td>
			
 
				-            </tr>      
			
 
				-            <tr>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_S1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_SO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_S2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_SO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="title_31">
			
 
				-                    色選機 S1
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    色選機出料儲豆槽 SO1
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    色選機 S2
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    色選機出料儲豆槽 SO2
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_P1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_PO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_P2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-                <td class="video_31">
			
 
				-                    <a href="/camera_PO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td class="title_31">
			
 
				-                    脫皮機 P1
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    脫皮機出料儲豆槽 PO1
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    脫皮機 P2
			
 
				-                </td>
			
 
				-                <td class="title_31">
			
 
				-                    脫皮機出料儲豆槽 PO2
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-        <br>
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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">

			
 
				+    -->

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+        $(document).ready(function (){

			
 
				+            $("#coffee_title_pc").text("清洗貨櫃攝影機");

			
 
				+            $("#coffee_title_phone").text("清洗貨櫃攝影機");

			
 
				+        });

			
 
				+    </script>

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+        .video_1 img{

			
 
				+            padding: 10px 10px 0px 10px;   

			
 
				+            width: 448px;        

			
 
				+            height: 336px;

			
 
				+        }

			
 
				+        .video_31 img{

			
 
				+            margin: 5px 3px 0px 3px;   

			
 
				+            width: 320px;        

			
 
				+            height: 240px;

			
 
				+        }

			
 
				+        .video_32 img{

			
 
				+            margin: 0px 5px 0px 5px;   

			
 
				+            width: 240px;        

			
 
				+            height: 180px;

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <center>0.75 × 0.75</center>

			
 
				+        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">

			
 
				+            <tr>

			
 
				+                <td></td>

			
 
				+                <td></td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_CCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_CCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_R1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td></td>

			
 
				+                <td></td>

			
 
				+                <td class="title_32">

			
 
				+                    清洗貨櫃內部

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    清洗貨櫃外部

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    中水桶

			
 
				+                </td>

			
 
				+                <td></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="6" style="color: lightgray;">

			
 
				+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_C1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_C2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_S1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_SO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_P1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_PO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="title_32">

			
 
				+                    清洗浮選槽 C1

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    清洗浮選槽 C2

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    色選機 S1

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    色選機出料儲豆槽 SO1

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    脫皮機 P1

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    脫皮機出料儲豆槽 PO1

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_C3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_C4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_S2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_SO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_P2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_32">

			
 
				+                    <a href="/camera_PO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="title_32">

			
 
				+                    清洗浮選槽 C3

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    清洗浮選槽 C4

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    色選機 S2

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    色選機出料儲豆槽 SO2

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    脫皮機 P2

			
 
				+                </td>

			
 
				+                <td class="title_32">

			
 
				+                    脫皮機出料儲豆槽 PO2

			
 
				+                </td>

			
 
				+            </tr>        

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+        <br>

			
 
				+        <hr>

			
 
				+        <br>

			
 
				+        <br>

			
 
				+

			
 
				+        <center>1 × 1 ( 320 × 240)</center>

			
 
				+

			
 
				+        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">

			
 
				+            <tr>

			
 
				+                <td></td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_CCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_CCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_R1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td></td>

			
 
				+                <td class="title_31">

			
 
				+                    清洗貨櫃內部

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    清洗貨櫃外部

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    中水桶

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="4" style="color: lightgray;">

			
 
				+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_C1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_C2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_C3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_C4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="title_31">

			
 
				+                    清洗浮選槽 C1

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    清洗浮選槽 C2

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    清洗浮選槽 C3   

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    清洗浮選槽 C4

			
 
				+                </td>

			
 
				+            </tr>      

			
 
				+            <tr>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_S1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_SO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_S2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_SO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="title_31">

			
 
				+                    色選機 S1

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    色選機出料儲豆槽 SO1

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    色選機 S2

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    色選機出料儲豆槽 SO2

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_P1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_PO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_P2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+                <td class="video_31">

			
 
				+                    <a href="/camera_PO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td class="title_31">

			
 
				+                    脫皮機 P1

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    脫皮機出料儲豆槽 PO1

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    脫皮機 P2

			
 
				+                </td>

			
 
				+                <td class="title_31">

			
 
				+                    脫皮機出料儲豆槽 PO2

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+        <br>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/camera_dry.html
+++ b/app/templates/camera_dry.html
--- a/app/templates/camera_dry_0819.html
+++ b/app/templates/camera_dry_0819.html
@@ -1,269 +1,269 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-
			
 
				-    <!-- 新 Bootstrap4 核心 CSS 文件 -->
			
 
				-    <link rel="stylesheet" href="https://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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    
			
 
				-    <style>
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-
			
 
				-        var tid = '{{tid}}';
			
 
				-        var WS_URL = '{{WS_URL}}';
			
 
				-        var camera_title = '{{camera_title}}';
			
 
				-
			
 
				-        console.log('tid:' + tid)
			
 
				-        $(document).ready(function (){
			
 
				-            $("#camera_dry_title").text("M5 攝影機畫面_" + camera_title + " " + tid);
			
 
				-        });
			
 
				-    </script>
			
 
				-
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">
			
 
				-        M5 攝影機畫面
			
 
				-    </div>
			
 
				-
			
 
				-    <div class="container-fluid">
			
 
				-        <div class="row" style="margin-top:50px;">
			
 
				-            <div class="col flex">
			
 
				-                <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
			
 
				-                    <div class="col-md-12 row flex">
			
 
				-                        <img src="" id="four" width="90%" height="90%">
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-                <script>
			
 
				-                    // M5 攝影機
			
 
				-
			
 
				-                    //const img = document.querySelector('#one');
			
 
				-                    const img3 = document.querySelector('#four');
			
 
				-
			
 
				-                    //const WS_URL3 = 'ws:///60.250.156.230:0000';
			
 
				-                    const WS_URL3 = WS_URL;
			
 
				-
			
 
				-                    const ws3 = new WebSocket(WS_URL3);
			
 
				-                    let urlObject3;
			
 
				-                    ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
			
 
				-                    ws3.onmessage = message3 => {
			
 
				-                        const arrayBuffer3 = message3.data;
			
 
				-                        if (urlObject3) {
			
 
				-                            URL.revokeObjectURL(urlObject3);
			
 
				-                        }
			
 
				-                        urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
			
 
				-                        img3.src = urlObject3;
			
 
				-                    }
			
 
				-                </script>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    

			
 
				+    <style>

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+

			
 
				+        var tid = '{{tid}}';

			
 
				+        var WS_URL = '{{WS_URL}}';

			
 
				+        var camera_title = '{{camera_title}}';

			
 
				+

			
 
				+        console.log('tid:' + tid)

			
 
				+        $(document).ready(function (){

			
 
				+            $("#camera_dry_title").text("M5 攝影機畫面_" + camera_title + " " + tid);

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+        M5 攝影機畫面

			
 
				+    </div>

			
 
				+

			
 
				+    <div class="container-fluid">

			
 
				+        <div class="row" style="margin-top:50px;">

			
 
				+            <div class="col flex">

			
 
				+                <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">

			
 
				+                    <div class="col-md-12 row flex">

			
 
				+                        <img src="" id="four" width="90%" height="90%">

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+                <script>

			
 
				+                    // M5 攝影機

			
 
				+

			
 
				+                    //const img = document.querySelector('#one');

			
 
				+                    const img3 = document.querySelector('#four');

			
 
				+

			
 
				+                    //const WS_URL3 = 'ws:///60.250.156.230:0000';

			
 
				+                    const WS_URL3 = WS_URL;

			
 
				+

			
 
				+                    const ws3 = new WebSocket(WS_URL3);

			
 
				+                    let urlObject3;

			
 
				+                    ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);

			
 
				+                    ws3.onmessage = message3 => {

			
 
				+                        const arrayBuffer3 = message3.data;

			
 
				+                        if (urlObject3) {

			
 
				+                            URL.revokeObjectURL(urlObject3);

			
 
				+                        }

			
 
				+                        urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));

			
 
				+                        img3.src = urlObject3;

			
 
				+                    }

			
 
				+                </script>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/camera_dry_1.html
+++ b/app/templates/camera_dry_1.html
@@ -1,317 +1,317 @@
 
				-<!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">
			
 
				-    -->
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 10秒 刷新網頁一次
			
 
				-        var WebRestart
			
 
				-        // WebRestart = setTimeout(function () { location.reload() }, 10000);
			
 
				-    </script>
			
 
				-    <style>
			
 
				-        .video_1 img{
			
 
				-            padding: 5px 3px 0px 3px;   
			
 
				-            width: 448px;        
			
 
				-            height: 336px;
			
 
				-        }
			
 
				-        .video_2 img{
			
 
				-            padding: 5px 3px 0px 3px;   
			
 
				-            width: 288px;        
			
 
				-            height: 216px;
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <!--
			
 
				-        background-color:rgb(0, 238, 255);
			
 
				-    -->
			
 
				-    <div style="text-align: left;">
			
 
				-        <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-    </div>
			
 
				-    <div style="text-align: right;">
			
 
				-        <a href="/index_new" style="float: right;">_________________</a>
			
 
				-    </div>
			
 
				-    
			
 
				-    <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">
			
 
				-        乾燥貨櫃攝影機
			
 
				-    </div>
			
 
				-
			
 
				-    <center>1.4 × 1.4</center>
			
 
				-
			
 
				-    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
			
 
				-        <tr>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_1">
			
 
				-                乾燥入料儲豆槽 DI1
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥入料儲豆槽 DI2
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-    </table>
			
 
				-
			
 
				-    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
			
 
				-        <!-- cellpadding="10" -->
			
 
				-        <tr>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D1
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D2
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D3
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D4
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D5
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D6
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D7
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D8
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D9
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D10
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D11
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥槽 D12
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-    </table>
			
 
				-
			
 
				-    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
			
 
				-        <tr>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_1">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_1">
			
 
				-                乾燥出料儲豆槽 DO1
			
 
				-            </td>
			
 
				-            <td class="title_1">
			
 
				-                乾燥出料儲豆槽 DO2
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-    </table>
			
 
				-<!--
			
 
				-    <br>
			
 
				-    <hr>
			
 
				-    <br>
			
 
				-
			
 
				-    <center>0.9 × 0.9</center>
			
 
				-
			
 
				-    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
			
 
				-        <tr>
			
 
				-            <td class="video_2" rowspan="4">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-                <br>乾燥入料儲豆槽 DI1
			
 
				-            </td>
			
 
				-
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2" rowspan="4">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-                <br>乾燥出料儲豆槽 DO1
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D1
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D2
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D3
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D4
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D5
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D6
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="video_2" rowspan="4">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-                <br>乾燥入料儲豆槽 DI2
			
 
				-            </td>
			
 
				-
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2" rowspan="4">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-                <br>乾燥出料儲豆槽 DO2
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D7
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D8
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D9
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-            <td class="video_2">
			
 
				-                <img src="../static/img/video_pic_2.png" alt="影片">
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-        <tr>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D10
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D11
			
 
				-            </td>
			
 
				-            <td class="title_2">
			
 
				-                乾燥槽 D12
			
 
				-            </td>
			
 
				-        </tr>
			
 
				-
			
 
				-
			
 
				-        
			
 
				-        
			
 
				-
			
 
				-
			
 
				-    </table>
			
 
				--->
			
 
				-
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!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">

			
 
				+    -->

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+    </script>

			
 
				+    <style>

			
 
				+        .video_1 img{

			
 
				+            padding: 5px 3px 0px 3px;   

			
 
				+            width: 448px;        

			
 
				+            height: 336px;

			
 
				+        }

			
 
				+        .video_2 img{

			
 
				+            padding: 5px 3px 0px 3px;   

			
 
				+            width: 288px;        

			
 
				+            height: 216px;

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <!--

			
 
				+        background-color:rgb(0, 238, 255);

			
 
				+    -->

			
 
				+    <div style="text-align: left;">

			
 
				+        <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+    </div>

			
 
				+    <div style="text-align: right;">

			
 
				+        <a href="/index_new" style="float: right;">_________________</a>

			
 
				+    </div>

			
 
				+    

			
 
				+    <div id="camera_dry_title" style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+        乾燥貨櫃攝影機

			
 
				+    </div>

			
 
				+

			
 
				+    <center>1.4 × 1.4</center>

			
 
				+

			
 
				+    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">

			
 
				+        <tr>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_1">

			
 
				+                乾燥入料儲豆槽 DI1

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥入料儲豆槽 DI2

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+    </table>

			
 
				+

			
 
				+    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">

			
 
				+        <!-- cellpadding="10" -->

			
 
				+        <tr>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D1

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D2

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D3

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D4

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D5

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D6

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D7

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D8

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D9

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D10

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D11

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥槽 D12

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+    </table>

			
 
				+

			
 
				+    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">

			
 
				+        <tr>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_1">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_1">

			
 
				+                乾燥出料儲豆槽 DO1

			
 
				+            </td>

			
 
				+            <td class="title_1">

			
 
				+                乾燥出料儲豆槽 DO2

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+    </table>

			
 
				+<!--

			
 
				+    <br>

			
 
				+    <hr>

			
 
				+    <br>

			
 
				+

			
 
				+    <center>0.9 × 0.9</center>

			
 
				+

			
 
				+    <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">

			
 
				+        <tr>

			
 
				+            <td class="video_2" rowspan="4">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+                <br>乾燥入料儲豆槽 DI1

			
 
				+            </td>

			
 
				+

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2" rowspan="4">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+                <br>乾燥出料儲豆槽 DO1

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D1

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D2

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D3

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D4

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D5

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D6

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="video_2" rowspan="4">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+                <br>乾燥入料儲豆槽 DI2

			
 
				+            </td>

			
 
				+

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2" rowspan="4">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+                <br>乾燥出料儲豆槽 DO2

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D7

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D8

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D9

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+            <td class="video_2">

			
 
				+                <img src="../static/img/video_pic_2.png" alt="影片">

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+        <tr>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D10

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D11

			
 
				+            </td>

			
 
				+            <td class="title_2">

			
 
				+                乾燥槽 D12

			
 
				+            </td>

			
 
				+        </tr>

			
 
				+

			
 
				+

			
 
				+        

			
 
				+        

			
 
				+

			
 
				+

			
 
				+    </table>

			
 
				+-->

			
 
				+

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/camera_ferment.html
+++ b/app/templates/camera_ferment.html
--- a/app/templates/camera_test.html
+++ b/app/templates/camera_test.html
--- a/app/templates/cargo1.html
+++ b/app/templates/cargo1.html
@@ -1,236 +1,236 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">貨櫃1</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid">
			
 
				-                <div class="row" style="margin-top:100px;">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">感測器</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo1_schedule">排程</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">制動器</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">參數設置</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃1</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row" style="margin-top:100px;">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">感測器</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo1_schedule">排程</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">制動器</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">參數設置</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/cargo1_schedule.html
+++ b/app/templates/cargo1_schedule.html
--- a/app/templates/cargo2.html
+++ b/app/templates/cargo2.html
@@ -1,236 +1,236 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">貨櫃2</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid">
			
 
				-                <div class="row" style="margin-top:100px;">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor_tanks">感測器</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule_tanks">排程</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator_tanks">制動器</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">參數設置</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃2</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row" style="margin-top:100px;">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor_tanks">感測器</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule_tanks">排程</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator_tanks">制動器</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">參數設置</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/cargo2_actuator.html
+++ b/app/templates/cargo2_actuator.html
--- a/app/templates/cargo2_actuator_tanks.html
+++ b/app/templates/cargo2_actuator_tanks.html
@@ -1,279 +1,279 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 300px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">貨櫃2</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <div class="text-center">
			
 
				-            <h1>發酵槽</h1>
			
 
				-        </div>
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid" style="margin-top:100px;">
			
 
				-                <div class="row">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/1">1</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/2">2</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/3">3</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/4">4</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/5">5</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/6">6</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/7">7</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/8">8</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/9">9</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/10">10</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/11">11</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_actuator/12">12</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 300px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃2</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <div class="text-center">

			
 
				+            <h1>發酵槽</h1>

			
 
				+        </div>

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid" style="margin-top:100px;">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/1">1</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/2">2</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/3">3</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/4">4</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/5">5</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/6">6</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/7">7</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/8">8</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/9">9</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/10">10</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/11">11</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_actuator/12">12</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/cargo2_schedule.html
+++ b/app/templates/cargo2_schedule.html
--- a/app/templates/cargo2_schedule_tanks.html
+++ b/app/templates/cargo2_schedule_tanks.html
@@ -1,279 +1,279 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 300px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">貨櫃2</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <div class="text-center">
			
 
				-            <h1>發酵槽</h1>
			
 
				-        </div>
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid" style="margin-top:100px;">
			
 
				-                <div class="row">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/1">1</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/2">2</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/3">3</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/4">4</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/5">5</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/6">6</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/7">7</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/8">8</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/9">9</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/10">10</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/11">11</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_schedule/12">12</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 300px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃2</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <div class="text-center">

			
 
				+            <h1>發酵槽</h1>

			
 
				+        </div>

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid" style="margin-top:100px;">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/1">1</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/2">2</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/3">3</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/4">4</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/5">5</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/6">6</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/7">7</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/8">8</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/9">9</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/10">10</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/11">11</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_schedule/12">12</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/cargo2_sensor.html
+++ b/app/templates/cargo2_sensor.html
--- a/app/templates/cargo2_sensor_tanks.html
+++ b/app/templates/cargo2_sensor_tanks.html
@@ -1,279 +1,279 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 300px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">貨櫃2</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <div class="text-center">
			
 
				-            <h1>發酵槽</h1>
			
 
				-        </div>
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid" style="margin-top:100px;">
			
 
				-                <div class="row">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/1">1</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/2">2</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/3">3</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/4">4</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/5">5</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/6">6</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/7">7</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/8">8</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/9">9</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/10">10</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/11">11</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2_sensor/12">12</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 300px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃2</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <div class="text-center">

			
 
				+            <h1>發酵槽</h1>

			
 
				+        </div>

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid" style="margin-top:100px;">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/1">1</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/2">2</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/3">3</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/4">4</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/5">5</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/6">6</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/7">7</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/8">8</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/9">9</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/10">10</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/11">11</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2_sensor/12">12</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/cargo3.html
+++ b/app/templates/cargo3.html
@@ -1,236 +1,236 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">貨櫃3</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid">
			
 
				-                <div class="row" style="margin-top:100px;">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">感測器</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo3_schedule">排程</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">制動器</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">參數設置</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃3</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row" style="margin-top:100px;">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">感測器</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo3_schedule">排程</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">制動器</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">參數設置</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;"></div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/cargo3_schedule
+++ b/app/templates/cargo3_schedule
@@ -0,0 +1,828 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <script>

			
 
				+        $(function () {

			
 
				+            //提升機

			
 
				+            {% if params.hoists %}

			
 
				+            var hoist_num = 0;

			
 
				+            {% for hoist in params.hoists %}

			
 
				+            if ('{{hoist.start}}' != '00:00' && '{{hoist.end}}' != '00:00' && hoist_num == 0) {

			
 
				+                var ho = $(".set-schedule")[0];

			
 
				+                var ho_div = $("#hoist_div");

			
 
				+                ho.style.display = 'none';

			
 
				+                ho_div.css('visibility', 'visible');

			
 
				+

			
 
				+                $('select[name=hoist_duration1]').val('{{hoist.duration}}');

			
 
				+                $('select[name=hoist_from_hr1]').val('{{hoist.start}}'.split(':')[0]);

			
 
				+                $('select[name=hoist_from_min1]').val('{{hoist.start}}'.split(':')[1]);

			
 
				+                $('select[name=hoist_to_hr1]').val('{{hoist.end}}'.split(':')[0]);

			
 
				+                $('select[name=hoist_to_min1]').val('{{hoist.end}}'.split(':')[1]);

			
 
				+

			
 
				+                hoist_num++;

			
 
				+            } else if (hoist_num > 0) {

			
 
				+                if (hoist_num == 1) {

			
 
				+                    var add = document.getElementById('hoist_add1');

			
 
				+                    hoist_num++;

			
 
				+                } else {

			
 
				+                    var add = document.getElementById('hoist_add' + i);

			
 
				+                };

			
 
				+                Add(add);

			
 
				+                // Rita 從資料庫回傳最新資料 ???

			
 
				+                $('select[name=hoist_duration' + i + ']').val('{{hoist.duration}}');

			
 
				+                $('select[name=' + 'hoist_from_hr' + i + ']').val('{{hoist.start}}'.split(':')[0]);

			
 
				+                $('select[name=' + 'hoist_from_min' + i + ']').val('{{hoist.start}}'.split(':')[1]);

			
 
				+                $('select[name=' + 'hoist_to_hr' + i + ']').val('{{hoist.end}}'.split(':')[0]);

			
 
				+                $('select[name=' + 'hoist_to_min' + i + ']').val('{{hoist.end}}'.split(':')[1]);

			
 
				+            };

			
 
				+            {% endfor %}

			
 
				+            {% endif %}

			
 
				+

			
 
				+            //烘乾機

			
 
				+            {% if params.dryers %}

			
 
				+            var dryer_num = 0;

			
 
				+            {% for dryer in params.dryers %}

			
 
				+            if ('{{dryer.start}}' != '00:00' && '{{dryer.end}}' != '00:00' && dryer_num == 0) {

			
 
				+                var dry = $(".set-schedule")[1];

			
 
				+                var dry_div = $("#dryer_div");

			
 
				+                dry.style.display = 'none';

			
 
				+                dry_div.css('visibility', 'visible');

			
 
				+

			
 
				+                $('select[name=dryer_duration1]').val('{{dryer.duration}}');

			
 
				+                $('select[name=dryer_from_hr1]').val('{{dryer.start}}'.split(':')[0]);

			
 
				+                $('select[name=dryer_from_min1]').val('{{dryer.start}}'.split(':')[1]);

			
 
				+                $('select[name=dryer_to_hr1]').val('{{dryer.end}}'.split(':')[0]);

			
 
				+                $('select[name=dryer_to_min1]').val('{{dryer.end}}'.split(':')[1]);

			
 
				+

			
 
				+                dryer_num++;

			
 
				+            } else if (dryer_num > 0) {

			
 
				+                if (dryer_num == 1) {

			
 
				+                    var add = document.getElementById('dryer_add1');

			
 
				+                    dryer_num++;

			
 
				+                } else {

			
 
				+                    var add = document.getElementById('dryer_add' + i);

			
 
				+                };

			
 
				+                Add(add);

			
 
				+                $('select[name=dryer_duration' + i + ']').val('{{dryer.duration}}');

			
 
				+                $('select[name=' + 'dryer_from_hr' + i + ']').val('{{dryer.start}}'.split(':')[0]);

			
 
				+                $('select[name=' + 'dryer_from_min' + i + ']').val('{{dryer.start}}'.split(':')[1]);

			
 
				+                $('select[name=' + 'dryer_to_hr' + i + ']').val('{{dryer.end}}'.split(':')[0]);

			
 
				+                $('select[name=' + 'dryer_to_min' + i + ']').val('{{dryer.end}}'.split(':')[1]);

			
 
				+            };

			
 
				+            {% endfor %}

			
 
				+            {% endif %}

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <script>

			
 
				+        var i = 1;

			
 
				+

			
 
				+        function Cancel() {

			
 
				+            window.location.href = '/cargo3';

			
 
				+        };

			
 
				+

			
 
				+        function Add(evt) {

			
 
				+            // onclick = "Add(hoist_add1);""

			
 
				+            // evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)

			
 
				+            evt.style.display = "none";                 // 元素不顯示

			
 
				+            i++;

			
 
				+            var div = document.createElement('div');    // 輸出 <div></div>

			
 
				+            var from_hr = 'from_hr' + i;

			
 
				+            var from_min = 'from_min' + i;

			
 
				+            var to_hr = 'to_hr' + i;

			
 
				+            var to_min = 'to_min' + i;

			
 
				+            var id = evt.getAttribute('id');            // 輸出 hoist_add1

			
 
				+            var len = id.length;

			
 
				+            var add = id.split('_')[0] + '_add' + i;    // hoist + _add + 2 => 輸出 hoist_add2

			
 
				+            var del = id.split('_')[0] + '_del' + i;    // hoist + _del + 2 => 輸出 hoist_del2

			
 
				+            var html = '';

			
 
				+            var begin = id.split('_')[0];               // 輸出 hoist

			
 
				+            div.className = "col-12 row";

			
 
				+            div.style.marginTop = "10px";

			
 
				+            console.log(div)

			
 
				+

			
 
				+            html += '<div class="col-xl-5 col-lg-5 col-md-4"  style="margin-top:10px;">';

			
 
				+            html += '<span>Duration</span>';

			
 
				+            if (begin == 'hoist') {

			
 
				+                html += ' <select name="hoist_duration' + i + '" class="duration">';

			
 
				+            } else if (begin == 'dryer') {

			
 
				+                html += ' <select name="dryer_duration' + i + '" class="duration">';

			
 
				+            } else {

			
 
				+

			
 
				+            };

			
 
				+

			
 
				+            html += '<option selected value="30min">30 min</option><option value="60min">60 min</option><option value="90min">90 min</option><option value="120min">120 min</option><option value="150min">150 min</option></select>';

			
 
				+            html += '</div>';

			
 
				+            html += '<div class="from-to col-xl-7 col-lg-7 col-md-8"  style="margin-top:10px;">';

			
 
				+            html += '<div>';

			
 
				+            html += '<div class="from row">';

			
 
				+

			
 
				+            html += '<div class="col-3">';

			
 
				+            html += '<span>From</span>';

			
 
				+            html += '</div>';

			
 
				+            html += '<div  class="col-xs-6">';

			
 
				+            if (id.split('_')[0] == 'hoist') {

			
 
				+                html += '<select name="hoist_from_hr' + i + '">';

			
 
				+            } else if (id.split('_')[0] == 'dryer') {

			
 
				+                html += '<select name="dryer_from_hr' + i + '">';

			
 
				+            } else {

			
 
				+

			
 
				+            };

			
 
				+            for (var hr = 0; hr < 24; hr++) {

			
 
				+                if (hr < 10) {

			
 
				+                    html += '<option value="0' + hr + '">0' + hr + '</option>';

			
 
				+                } else {

			
 
				+                    html += '<option value="' + hr + '">' + hr + '</option>';

			
 
				+                };

			
 
				+            };

			
 
				+            html += '</select>';

			
 
				+            if (id.split('_')[0] == 'hoist') {

			
 
				+                html += ' : <select name="hoist_from_min' + i + '">';

			
 
				+            } else if (id.split('_')[0] == 'dryer') {

			
 
				+                html += ' : <select name="dryer_from_min' + i + '">';

			
 
				+            } else {

			
 
				+

			
 
				+            };

			
 
				+            for (var min = 0; min < 60; min++) {

			
 
				+                if (min < 10) {

			
 
				+                    html += '<option value="0' + min + '">0' + min + '</option>';

			
 
				+                } else {

			
 
				+                    html += '<option value="' + min + '">' + min + '</option>';

			
 
				+                };

			
 
				+            };

			
 
				+            html += '</select>';

			
 
				+            html += '</div>';

			
 
				+            html += '<div  class="col-xs-3">';

			
 
				+            html += '<input  id=' + del + ' class="delete" type="button" value="Delete" onclick="Delete(' + del + ');">';

			
 
				+            html += '</div>';

			
 
				+            html += '</div>';

			
 
				+            html += '<div class="to row">';

			
 
				+            html += '<div  class="col-3">';

			
 
				+            html += '<span>To</span>';

			
 
				+            html += '</div>';

			
 
				+            html += '<div  class="col-xs-6">';

			
 
				+            if (id.split('_')[0] == 'hoist') {

			
 
				+                html += '<select name="hoist_to_hr' + i + '">';

			
 
				+            } else if (id.split('_')[0] == 'dryer') {

			
 
				+                html += '<select name="dryer_to_hr' + i + '">';

			
 
				+            } else {

			
 
				+

			
 
				+            };

			
 
				+            for (var hr = 0; hr < 24; hr++) {

			
 
				+                if (hr < 10) {

			
 
				+                    html += '<option value="0' + hr + '">0' + hr + '</option>';

			
 
				+                } else {

			
 
				+                    html += '<option value="' + hr + '">' + hr + '</option>';

			
 
				+                };

			
 
				+            };

			
 
				+            html += '</select>';

			
 
				+            if (id.split('_')[0] == 'hoist') {

			
 
				+                html += ' : <select name="hoist_to_min' + i + '">';

			
 
				+            } else if (id.split('_')[0] == 'dryer') {

			
 
				+                html += ' : <select name="dryer_to_min' + i + '">';

			
 
				+            } else {

			
 
				+

			
 
				+            };

			
 
				+            for (var min = 0; min < 60; min++) {

			
 
				+                if (min < 10) {

			
 
				+                    html += '<option value="0' + min + '">0' + min + '</option>';

			
 
				+                } else {

			
 
				+                    html += '<option value="' + min + '">' + min + '</option>';

			
 
				+                };

			
 
				+            };

			
 
				+            html += '</select><br>';

			
 
				+            html += '<input  id=' + add + ' class="add" type="button" value="Add" onclick="Add(' + add + ');">';

			
 
				+            html += '</div>';

			
 
				+            html += '<div  class="col-xs-3"></div>';

			
 
				+            html += '</div>';

			
 
				+            html += '</div>';

			
 
				+            html += '</div>';

			
 
				+

			
 
				+

			
 
				+            div.innerHTML = html;

			
 
				+            //console.log(html)

			
 
				+            div.style.marginTop = '15px';

			
 
				+            div.style.zIndex = '100';

			
 
				+            evt.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(div);

			
 
				+

			
 
				+        };

			
 
				+

			
 
				+        function Delete(evt) {

			
 
				+            var id = evt.getAttribute('id');                // dryinput_del2

			
 
				+            var add = id.split('_')[0] + '_' + 'add';       // add = dryinput_add

			
 
				+            var clo_xs_3 = evt.parentNode;

			
 
				+            var from = clo_xs_3.parentNode;

			
 
				+            var begin = id.split('_')[0];                   // begin = dryinput

			
 
				+            var div = from.parentNode.parentNode.parentNode;    // 輸出 div[object HTMLDivElement]

			
 
				+            var next_div = div.nextElementSibling;              // 輸出 null

			
 
				+            var pre_div = div.previousElementSibling;           // 輸出 null

			
 
				+

			
 
				+            if (next_div && pre_div == null) {                  // 1 && null == null (true)

			
 
				+                div.parentNode.removeChild(div);

			
 
				+                next_div.style.marginTop = '0px';

			
 
				+            } else if (next_div && pre_div) {                   // 兩者都有時 true

			
 
				+                div.parentNode.removeChild(div);

			
 
				+            } else if (next_div == null && pre_div == null) {   // 兩者都沒有時 true

			
 
				+                div.parentNode.parentNode.children[1].style.display = 'inline-block';

			
 
				+                div.parentNode.style.visibility = 'hidden';

			
 
				+                var name = id.split('_')[0];

			
 
				+                var from_hr = name + '_from_hr' + 1;

			
 
				+                var from_min = name + '_from_min' + 1;

			
 
				+                var to_hr = name + '_to_hr' + 1;

			
 
				+                var to_min = name + '_to_min' + 1;

			
 
				+                $('select[name=' + from_hr + ']').val('00');

			
 
				+                $('select[name=' + from_min + ']').val('00');

			
 
				+                $('select[name=' + to_hr + ']').val('00');

			
 
				+                $('select[name=' + to_min + ']').val('00');

			
 
				+            } else {

			
 
				+                div.parentNode.removeChild(div);

			
 
				+                i--;

			
 
				+                add = add + i;

			
 
				+                add = document.getElementById(add);

			
 
				+                if (add == null) {

			
 
				+                    add = pre_div.children[1].children[0].children[1].children[1].children[3];

			
 
				+                };

			
 
				+                add.style.display = 'block';

			
 
				+            };

			
 
				+        };

			
 
				+

			
 
				+        $(function () {

			
 
				+            var hoist = $(".set-schedule")[0];

			
 
				+            var hoist_div = $("#hoist_div");

			
 
				+            var dryer = $(".set-schedule")[1];

			
 
				+            var dryer_div = $("#dryer_div");

			
 
				+

			
 
				+            hoist.onclick = function () {

			
 
				+                hoist.style.display = 'none';

			
 
				+                hoist_div.css('visibility', 'visible');

			
 
				+            };

			
 
				+

			
 
				+            dryer.onclick = function () {

			
 
				+                dryer.style.display = 'none';

			
 
				+                dryer_div.css('visibility', 'visible');

			
 
				+            };

			
 
				+

			
 
				+

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        form {

			
 
				+            margin-top: 70px;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .flex span {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 18px;

			
 
				+            margin-left: 20px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .duration {

			
 
				+            background: #FFFFFF;

			
 
				+            border: 1px solid #000000;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            width: 110px;

			
 
				+            height: 40px;

			
 
				+            font-size: 20px;

			
 
				+            margin-left: 15px;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .from select,

			
 
				+        .to select {

			
 
				+            width: 65px;

			
 
				+            height: 35px;

			
 
				+

			
 
				+            margin-left: 2px;

			
 
				+        }

			
 
				+

			
 
				+        .to {

			
 
				+            margin-top: 10px;

			
 
				+            margin-left: 10px;

			
 
				+        }

			
 
				+

			
 
				+        .from {

			
 
				+            margin-left: 10px;

			
 
				+        }

			
 
				+

			
 
				+        .from>div:first-child,

			
 
				+        .to>div:first-child {

			
 
				+            padding-right: 0px;

			
 
				+            text-align: right;

			
 
				+            margin-right: 5px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+        .hoist,

			
 
				+        .dryer {

			
 
				+            height: 400px;

			
 
				+            border: 2px solid #E5E5E5;

			
 
				+            border-radius: 5px;

			
 
				+            margin-top: 35px;

			
 
				+            margin-left: 35px;

			
 
				+        }

			
 
				+

			
 
				+        .item-title {

			
 
				+            display: inline-block;

			
 
				+            margin-top: 20px;

			
 
				+            margin-left: 20px;

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 24px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .set-schedule {

			
 
				+            width: 200px;

			
 
				+            height: 45px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 5px;

			
 
				+            font-size: 17px;

			
 
				+            margin-left: 10px;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+        .delete {

			
 
				+            background: #E43030;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            width: 65px;

			
 
				+            height: 33px;

			
 
				+            font-size: 16px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+

			
 
				+        .add {

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-top: 10px;

			
 
				+            margin-left: 82px;

			
 
				+            ;

			
 
				+            width: 65px;

			
 
				+            height: 33px;

			
 
				+            font-size: 16px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+

			
 
				+        .page-bottom {

			
 
				+            margin-top: 100px;

			
 
				+        }

			
 
				+

			
 
				+        .form-control {

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            width: 120px;

			
 
				+            height: 58px;

			
 
				+            text-align: center;

			
 
				+            line-height: 50px;

			
 
				+            color: #FFFFFF;

			
 
				+            display: inline-block;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .hoist,

			
 
				+            .dryer {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .col {

			
 
				+                padding-right: 0px;

			
 
				+                padding-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .from,

			
 
				+            .to {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .flex span {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .from select,

			
 
				+            .to select {

			
 
				+                width: 45px;

			
 
				+            }

			
 
				+

			
 
				+            .add {

			
 
				+                width: 50px;

			
 
				+                margin-left: 62px;

			
 
				+            }

			
 
				+

			
 
				+            .delete {

			
 
				+                width: 58px;

			
 
				+            }

			
 
				+

			
 
				+            .col-xs-8:not(:first-child) {

			
 
				+                margin-top: 150px;

			
 
				+            }

			
 
				+

			
 
				+            .form-group {

			
 
				+                margin-top: 50px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+

			
 
				+            .page-bottom input:last-child {

			
 
				+                margin-left: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+

			
 
				+            .page-bottom input:last-child {

			
 
				+                margin-left: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+            .page-bottom input:last-child {

			
 
				+                margin-left: 100px;

			
 
				+            }

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+

			
 
				+            .page-bottom input:last-child {

			
 
				+                margin-left: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">貨櫃3</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <div class="page-title text-center">

			
 
				+

			
 
				+        </div>

			
 
				+        <form method="post" action="/b_cargo3">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="hoist col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">

			
 
				+                            <h2 class="item-title">提升機</h2>

			
 
				+                            <input class="set-schedule" type="button" value="Set up the schedule">

			
 
				+                            <br>

			
 
				+                            <div id="hoist_div" class="row" style="visibility:hidden;">

			
 
				+                                <div class="col-12 row">

			
 
				+                                    <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12"

			
 
				+                                        style="margin-top:10px;">

			
 
				+                                        <span>Duration</span>

			
 
				+                                        <select name="hoist_duration1" class="duration">

			
 
				+                                            <option selected value="30min">30 min</option>

			
 
				+                                            <option value="60min">60 min</option>

			
 
				+                                            <option value="90min">90 min</option>

			
 
				+                                            <option value="120min">120 min</option>

			
 
				+                                            <option value="150min">150 min</option>

			
 
				+                                        </select>

			
 
				+                                    </div>

			
 
				+                                    <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12"

			
 
				+                                        style="margin-top:10px;">

			
 
				+                                        <div>

			
 
				+                                            <div class="from row">

			
 
				+                                                <div class="col-3">

			
 
				+                                                    <span>From</span>

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-6">

			
 
				+                                                    <select name="hoist_from_hr1">

			
 
				+                                                        {% for hr in range(0, 24) %}

			
 
				+                                                        {% if hr < 10 %} 

			
 
				+                                                        <option value="0{{hr}}">0{{hr}}</option>

			
 
				+                                                        {% else %}

			
 
				+                                                        <option value="{{hr}}">{{hr}}</option>

			
 
				+                                                        {% endif %}

			
 
				+                                                        {% endfor %}

			
 
				+                                                    </select>

			
 
				+                                                    : 

			
 
				+                                                    <select name="hoist_from_min1">

			
 
				+                                                        {% for min in range(0, 60) %}

			
 
				+                                                        {% if min < 10 %} <option value="0{{min}}">0{{min}}</option>

			
 
				+                                                        {% else %}

			
 
				+                                                        <option value="{{min}}">{{min}}</option>

			
 
				+                                                        {% endif %}

			
 
				+                                                        {% endfor %}

			
 
				+                                                    </select>

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-3">

			
 
				+                                                    <input id="hoist_del1" class="delete" type="button" value="Delete"

			
 
				+                                                        onclick="Delete(hoist_del1);">

			
 
				+                                                </div>

			
 
				+                                            </div>

			
 
				+                                            <div class="to row">

			
 
				+                                                <div class="col-3">

			
 
				+                                                    <span>To</span>

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-6">

			
 
				+                                                    <select name="hoist_to_hr1">

			
 
				+                                                        {% for hr in range(0, 24) %}

			
 
				+                                                        {% if hr < 10 %} 

			
 
				+                                                        <option value="0{{hr}}">0{{hr}}</option>

			
 
				+                                                        {% else %}

			
 
				+                                                        <option value="{{hr}}">{{hr}}</option>

			
 
				+                                                        {% endif %}

			
 
				+                                                        {% endfor %}

			
 
				+                                                    </select>

			
 
				+                                                    : <select name="hoist_to_min1">

			
 
				+                                                        {% for min in range(0, 60) %}

			
 
				+                                                        {% if min < 10 %} <option value="0{{min}}">0{{min}}</option>

			
 
				+                                                            {% else %}

			
 
				+                                                            <option value="{{min}}">{{min}}</option>

			
 
				+                                                            {% endif %}

			
 
				+                                                            {% endfor %}

			
 
				+                                                    </select><br>

			
 
				+                                                    <input id="hoist_add1" class="add" type="button" value="Add"

			
 
				+                                                        onclick="Add(hoist_add1);">

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-3"></div>

			
 
				+                                            </div>

			
 
				+                                        </div>

			
 
				+                                    </div>

			
 
				+                                </div>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+

			
 
				+                        <div class="dryer col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">

			
 
				+                            <h2 class="item-title">烘乾機</h2>

			
 
				+                            <input class="set-schedule" type="button" value="Set up the schedule">

			
 
				+                            <br>

			
 
				+                            <div id="dryer_div" class="row" style="visibility:hidden;">

			
 
				+                                <div class="col-12 row">

			
 
				+                                    <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12"

			
 
				+                                        style="margin-top:10px;">

			
 
				+                                        <span>Duration</span>

			
 
				+                                        <select name="dryer_duration1" class="duration">

			
 
				+                                            <option selected value="30min">30 min</option>

			
 
				+                                            <option value="60min">60 min</option>

			
 
				+                                            <option value="90min">90 min</option>

			
 
				+                                            <option value="120min">120 min</option>

			
 
				+                                            <option value="150min">150 min</option>

			
 
				+                                        </select>

			
 
				+                                    </div>

			
 
				+                                    <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12"

			
 
				+                                        style="margin-top:10px;">

			
 
				+                                        <div>

			
 
				+                                            <div class="from row">

			
 
				+                                                <div class="col-3">

			
 
				+                                                    <span>From</span>

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-6">

			
 
				+                                                    <select name="dryer_from_hr1">

			
 
				+                                                        {% for hr in range(0, 24) %}

			
 
				+                                                        {% if hr < 10 %} <option value="0{{hr}}">0{{hr}}</option>

			
 
				+                                                            {% else %}

			
 
				+                                                            <option value="{{hr}}">{{hr}}</option>

			
 
				+                                                            {% endif %}

			
 
				+                                                            {% endfor %}

			
 
				+                                                    </select>

			
 
				+                                                    : <select name="dryer_from_min1">

			
 
				+                                                        {% for min in range(0, 60) %}

			
 
				+                                                        {% if min < 10 %} <option value="0{{min}}">0{{min}}</option>

			
 
				+                                                            {% else %}

			
 
				+                                                            <option value="{{min}}">{{min}}</option>

			
 
				+                                                            {% endif %}

			
 
				+                                                            {% endfor %}

			
 
				+                                                    </select>

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-3">

			
 
				+                                                    <input id="dryer_del1" class="delete" type="button" value="Delete"

			
 
				+                                                        onclick="Delete(dryer_del1);">

			
 
				+                                                </div>

			
 
				+                                            </div>

			
 
				+                                            <div class="to row">

			
 
				+                                                <div class="col-3">

			
 
				+                                                    <span>To</span>

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-6">

			
 
				+                                                    <select name="dryer_to_hr1">

			
 
				+                                                        {% for hr in range(0, 24) %}

			
 
				+                                                        {% if hr < 10 %} <option value="0{{hr}}">0{{hr}}</option>

			
 
				+                                                            {% else %}

			
 
				+                                                            <option value="{{hr}}">{{hr}}</option>

			
 
				+                                                            {% endif %}

			
 
				+                                                            {% endfor %}

			
 
				+                                                    </select>

			
 
				+                                                    : <select name="dryer_to_min1">

			
 
				+                                                        {% for min in range(0, 60) %}

			
 
				+                                                        {% if min < 10 %} <option value="0{{min}}">0{{min}}</option>

			
 
				+                                                            {% else %}

			
 
				+                                                            <option value="{{min}}">{{min}}</option>

			
 
				+                                                            {% endif %}

			
 
				+                                                            {% endfor %}

			
 
				+                                                    </select><br>

			
 
				+                                                    <input id="dryer_add1" class="add" type="button" value="Add"

			
 
				+                                                        onclick="Add(dryer_add1);">

			
 
				+                                                </div>

			
 
				+                                                <div class="col-xs-3"></div>

			
 
				+                                            </div>

			
 
				+                                        </div>

			
 
				+                                    </div>

			
 
				+                                </div>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+            <div class="row page-bottom">

			
 
				+                <div class="col"></div>

			
 
				+                <div class="col-xl-4 col-lg-6 col-md-8 col-sm-10 col-xs-10" style="text-align:center;">

			
 
				+                    <div class="form-group">

			
 
				+                        <input type="button" class="form-control" value="Cancel" onclick="Cancel();">

			
 
				+                        <input type="submit" class="form-control" value="Confirm">

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+                <div class="col"></div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/cargo3_schedule.html
+++ b/app/templates/cargo3_schedule.html
--- a/app/templates/cargo_list.html
+++ b/app/templates/cargo_list.html
@@ -1,232 +1,232 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">咖啡貨櫃</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid">
			
 
				-                <div class="row">
			
 
				-                    <div class="col flex">
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo1">貨櫃1</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo2">貨櫃2</a>
			
 
				-                           </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo3">貨櫃3</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">咖啡貨櫃</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex">

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo1">貨櫃1</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo2">貨櫃2</a>

			
 
				+                           </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12" style="margin-right: 20px ;margin-left: 20px; margin-top:20px; margin-bottom:20px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo3">貨櫃3</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/chart.html
+++ b/app/templates/chart.html
@@ -1,65 +1,65 @@
 
				-<!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="https://cdn.jsdelivr.net/npm/chart.js"></script>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <canvas id="myChart" width="400px" height="400px"></canvas>
			
 
				-    <script>
			
 
				-        var ctx = document.getElementById('myChart').getContext('2d');
			
 
				-        var myChart = new Chart(ctx, {
			
 
				-            type: 'bar',
			
 
				-            data: {
			
 
				-                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
			
 
				-                datasets: [{
			
 
				-                    label: '# of Votes',
			
 
				-                    data: [12, 19, 3, 5, 2, 3],
			
 
				-                    backgroundColor: [
			
 
				-                        'rgba(255, 99, 132, 0.2)',
			
 
				-                        'rgba(54, 162, 235, 0.2)',
			
 
				-                        'rgba(255, 206, 86, 0.2)',
			
 
				-                        'rgba(75, 192, 192, 0.2)',
			
 
				-                        'rgba(153, 102, 255, 0.2)',
			
 
				-                        'rgba(255, 159, 64, 0.2)'
			
 
				-                    ],
			
 
				-                    borderColor: [
			
 
				-                        'rgba(255, 99, 132, 1)',
			
 
				-                        'rgba(54, 162, 235, 1)',
			
 
				-                        'rgba(255, 206, 86, 1)',
			
 
				-                        'rgba(75, 192, 192, 1)',
			
 
				-                        'rgba(153, 102, 255, 1)',
			
 
				-                        'rgba(255, 159, 64, 1)'
			
 
				-                    ],
			
 
				-                    borderWidth: 1
			
 
				-                }]
			
 
				-            },
			
 
				-            options: {
			
 
				-                scales: {
			
 
				-                    y: {
			
 
				-                        beginAtZero: true
			
 
				-                    }
			
 
				-                }
			
 
				-            }
			
 
				-        });
			
 
				-    </script>
			
 
				-</body>
			
 
				-
			
 
				+<!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="https://cdn.jsdelivr.net/npm/chart.js"></script>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <canvas id="myChart" width="400px" height="400px"></canvas>

			
 
				+    <script>

			
 
				+        var ctx = document.getElementById('myChart').getContext('2d');

			
 
				+        var myChart = new Chart(ctx, {

			
 
				+            type: 'bar',

			
 
				+            data: {

			
 
				+                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

			
 
				+                datasets: [{

			
 
				+                    label: '# of Votes',

			
 
				+                    data: [12, 19, 3, 5, 2, 3],

			
 
				+                    backgroundColor: [

			
 
				+                        'rgba(255, 99, 132, 0.2)',

			
 
				+                        'rgba(54, 162, 235, 0.2)',

			
 
				+                        'rgba(255, 206, 86, 0.2)',

			
 
				+                        'rgba(75, 192, 192, 0.2)',

			
 
				+                        'rgba(153, 102, 255, 0.2)',

			
 
				+                        'rgba(255, 159, 64, 0.2)'

			
 
				+                    ],

			
 
				+                    borderColor: [

			
 
				+                        'rgba(255, 99, 132, 1)',

			
 
				+                        'rgba(54, 162, 235, 1)',

			
 
				+                        'rgba(255, 206, 86, 1)',

			
 
				+                        'rgba(75, 192, 192, 1)',

			
 
				+                        'rgba(153, 102, 255, 1)',

			
 
				+                        'rgba(255, 159, 64, 1)'

			
 
				+                    ],

			
 
				+                    borderWidth: 1

			
 
				+                }]

			
 
				+            },

			
 
				+            options: {

			
 
				+                scales: {

			
 
				+                    y: {

			
 
				+                        beginAtZero: true

			
 
				+                    }

			
 
				+                }

			
 
				+            }

			
 
				+        });

			
 
				+    </script>

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/clean
+++ b/app/templates/clean
@@ -0,0 +1,361 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Smart Coffee - clean</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>

			
 
				+        .C1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 210px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .C2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 210px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 550px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .S2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 550px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 890px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .P2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 890px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+    </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_CleanColorPeel_container.png" width="1500x" style="margin: auto;"></center>

			
 
				+

			
 
				+        <!-- 清洗浮選槽 C1 -->

			
 
				+        <div id="C1" tabindex="0" class="C1_position" role="button">

			
 
				+            C1 status

			
 
				+            <!-- C1 狀態點點-->

			
 
				+            <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+        </div>

			
 
				+        

			
 
				+        <!-- 清洗浮選槽 C2 -->

			
 
				+        <div id="C2" tabindex="0" class="C2_position" role="button">

			
 
				+            C2 status

			
 
				+            <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 色選機 S1 -->

			
 
				+        <div id="S1" tabindex="0" class="S1_position" role="button">

			
 
				+            S1 status

			
 
				+            <div id="S1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 色選機 S2 -->

			
 
				+        <div id="S2" tabindex="0" class="S2_position" role="button">

			
 
				+            S2 status

			
 
				+            <div id="S2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 P1 -->

			
 
				+        <div id="P1" tabindex="0" class="P1_position" role="button">

			
 
				+            P1 status

			
 
				+            <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 P2 -->

			
 
				+        <div id="P2" tabindex="0" class="P2_position" role="button">

			
 
				+            P2 status

			
 
				+            <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+        </div>

			
 
				+

			
 
				+        

			
 
				+    </div>

			
 
				+

			
 
				+    <!-- 模态框 -->

			
 
				+    <div class="modal fade" id="C1_Modal">

			
 
				+        <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+            <div class="modal-content">

			
 
				+

			
 
				+                <div class="modal-header">

			
 
				+                    <h4 class="modal-title">清洗浮選槽 C1 狀態</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="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                            </tr>

			
 
				+                            <tr>

			
 
				+                                <td style="vertical-align:text-top;">

			
 
				+                                    <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_vacuum=='ON' %}

			
 
				+                                                <div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% elif tank_vacuum=='OFF' %}

			
 
				+                                                <div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_vacuum_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                真空吸料機

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_pump_waterFloat=='ON' %}

			
 
				+                                                <div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% elif tank_pump_waterFloat=='OFF' %}

			
 
				+                                                <div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_pump_waterFloat_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                浮選槽注水雙核隔膜泵

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_pump_waterL2=='ON' %}

			
 
				+                                                <div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% elif tank_pump_waterL2=='OFF' %}

			
 
				+                                                <div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_pump_waterL2_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                第 2 層灑水雙核隔膜泵

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_pump_waterL4=='ON' %}

			
 
				+                                                <div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% elif tank_pump_waterL4=='OFF' %}

			
 
				+                                                <div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_pump_waterL4_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                第 4 層灑水雙核隔膜泵

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_solenoid_waterL3=='ON' %}

			
 
				+                                                <div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% elif tank_vacuum=='OFF' %}

			
 
				+                                                <div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_solenoid_waterL3_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                清洗第 3 層電磁閥

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_solenoid_waterL5=='ON' %}

			
 
				+                                                <div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% elif tank_solenoid_waterL5=='OFF' %}

			
 
				+                                                <div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_solenoid_waterL5_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                清洗第 5 層電磁閥

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_vacuum_status"

			
 
				+                                                    style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                </div>

			
 
				+                                                {% if tank_stepping_motor==0 %}

			
 
				+                                                <div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color: #C0C0C0; border-radius: 50%;"></div>

			
 
				+                                                {% elif (tank_stepping_motor>0) or (0>tank_stepping_motor) %}

			
 
				+                                                <div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color: forestgreen; border-radius: 50%;"></div>

			
 
				+                                                {% else %}

			
 
				+                                                <div id="C1_steppingmotor_tatus" style="width: 18px; height: 18px; background-color:crimson; border-radius: 50%;"></div>

			
 
				+                                                {% endif %}

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                ***步進馬達***

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                    </table> 

			
 
				+                                </td>

			
 
				+                                <td style="vertical-align:text-top;">

			
 
				+                                    <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                咖啡生豆高度

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                {{tank_UltraSonic.UltraSonic}}

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                    </table>

			
 
				+                </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+            </div>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+    </div>

			
 
				+

			
 
				+

			
 
				+    <script>

			
 
				+        function update_data_C(ctid) {

			
 
				+            console.log('cleaning_tank_id:' + ctid)

			
 
				+            $.get('/loading/C' + ctid, '', function (res) {

			
 
				+

			
 
				+            }, 'json');

			
 
				+

			
 
				+            $('#C1_Modal').modal('show');

			
 
				+        }

			
 
				+

			
 
				+        function update_data_S(stid) {

			
 
				+            console.log('ColorSelection_tank_id:' + stid)

			
 
				+            $.get('/loading/S' + stid, '', function (res) {

			
 
				+

			
 
				+            }, 'json');

			
 
				+

			
 
				+            $('#S1_Modal').modal('show');

			
 
				+        }

			
 
				+

			
 
				+        function update_data_P(ptid) {

			
 
				+            console.log('peeling_tank_id:' + ptid)

			
 
				+            $.get('/loading/P' + ptid, '', function (res) {

			
 
				+

			
 
				+            }, 'json');

			
 
				+

			
 
				+            $('#P1_Modal').modal('show');

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        var button_C1 = document.getElementById('C1');

			
 
				+        button_C1.addEventListener('click', function () { update_data_C("1") });

			
 
				+

			
 
				+        var button_C2 = document.getElementById('C2');

			
 
				+        button_C2.addEventListener('click', function () { update_data_C("2") });

			
 
				+

			
 
				+        var button_S1 = document.getElementById('S1');

			
 
				+        button_S1.addEventListener('click', function () { update_data_S("1") });

			
 
				+

			
 
				+        var button_S2 = document.getElementById('S2');

			
 
				+        button_S2.addEventListener('click', function () { update_data_S("2") });

			
 
				+

			
 
				+        var button_P1 = document.getElementById('P1');

			
 
				+        button_P1.addEventListener('click', function () { update_data_P("1") });

			
 
				+

			
 
				+        var button_P2 = document.getElementById('P2');

			
 
				+        button_P2.addEventListener('click', function () { update_data_P("2") });

			
 
				+

			
 
				+    </script>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/clean.html
+++ b/app/templates/clean.html
--- a/app/templates/clean_1118????footer.html
+++ b/app/templates/clean_1118????footer.html
@@ -0,0 +1,831 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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">

			
 
				+-->

			
 
				+    <script>

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title_pc").text('清洗貨櫃');

			
 
				+            $("#coffee_title_phone").text('清洗貨櫃');

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .C1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 205px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .C2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 205px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .CO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 400px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .CO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 400px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 945px;

			
 
				+            width: 115px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 945px;

			
 
				+            width: 115px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .SO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1065px;

			
 
				+            width: 60px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .SO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1065px;

			
 
				+            width: 60px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1150px;

			
 
				+            width: 95px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1150px;

			
 
				+            width: 95px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .PO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1250px;

			
 
				+            width: 50px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .PO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1250px;

			
 
				+            width: 50px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        /* .footer{

			
 
				+            position: absolute;

			
 
				+            bottom: 0px;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        } */

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+    </script>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+    

			
 
				+        <!--

			
 
				+            background-color:rgb(0, 238, 255);

			
 
				+        -->

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>

			
 
				+        </div>

			
 
				+        

			
 
				+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            Smart Coffee

			
 
				+        </div>

			
 
				+        -->

			
 
				+        <div>

			
 
				+            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->

			
 
				+            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>

			
 
				+

			
 
				+            <!-- 清洗浮選槽 C1 -->

			
 
				+            <div id="C1" tabindex="0" class="C1_position" role="button">

			
 
				+                C1 status

			
 
				+                <!-- C1 狀態點點-->

			
 
				+                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+            

			
 
				+            <!-- 清洗浮選槽 C2 -->

			
 
				+            <div id="C2" tabindex="0" class="C2_position" role="button">

			
 
				+                C2 status

			
 
				+                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 清洗浮選 CO1 出料儲豆槽 -->

			
 
				+            <div id="CO1" tabindex="0" class="CO1_position" role="button">

			
 
				+                CO1 status

			
 
				+                <!-- CO1 狀態點點-->

			
 
				+                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 清洗浮選 CO2 出料儲豆槽 -->

			
 
				+            <div id="CO2" tabindex="0" class="CO2_position" role="button">

			
 
				+                CO2 status

			
 
				+                <!-- CO2 狀態點點-->

			
 
				+                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 S1 -->

			
 
				+            <div id="S1" tabindex="0" class="S1_position" role="button">

			
 
				+                S1 status

			
 
				+                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 S2 -->

			
 
				+            <div id="S2" tabindex="0" class="S2_position" role="button">

			
 
				+                S2 status

			
 
				+                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 SO1 出料儲豆槽 -->

			
 
				+            <div id="SO1" tabindex="0" class="SO1_position" role="button">

			
 
				+                SO1 status

			
 
				+                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 SO2 出料儲豆槽 -->

			
 
				+            <div id="SO2" tabindex="0" class="SO2_position" role="button">

			
 
				+                SO2 status

			
 
				+                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 P1 -->

			
 
				+            <div id="P1" tabindex="0" class="P1_position" role="button">

			
 
				+                P1 status

			
 
				+                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 P2 -->

			
 
				+            <div id="P2" tabindex="0" class="P2_position" role="button">

			
 
				+                P2 status

			
 
				+                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 PO1 出料儲豆槽 -->

			
 
				+            <div id="PO1" tabindex="0" class="PO1_position" role="button">

			
 
				+                PO1 status

			
 
				+                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 PO2 出料儲豆槽 -->

			
 
				+            <div id="PO2" tabindex="0" class="PO2_position" role="button">

			
 
				+                PO2 status

			
 
				+                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 清洗浮選 模态框 -->

			
 
				+        <div class="modal fade" id="C_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</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 id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="C_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterInput_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    入水口_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterL2L3_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 2、3_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterL4L5_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 4、5_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_solenoid_waterL2L3_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 2、3_電磁閥

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_solenoid_waterL4L5_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 4、5_電磁閥

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_stepping_motor_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    步進馬達

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    咖啡生豆高度

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="UltraSonic_t_status"></span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 清洗浮選 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="CO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</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 id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="CO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 色選機 模态框 -->

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 色選機 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="SO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</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 id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="SO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 模态框 -->

			
 
				+        <div class="modal fade" id="P_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</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 id="P_actuator_link" href="">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="P_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_motor_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    馬達

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="SENSOR_t_status">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="PO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</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 id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="PO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <script>

			
 
				+            function update_data_C(ctid) {

			
 
				+                console.log('clean_tank_id:' + ctid)

			
 
				+                $.get('/loading/C' + ctid, '', function (res) {

			
 
				+

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#C_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#C_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#C_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterInput == 0) {

			
 
				+                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterInput == 1) {

			
 
				+                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterL2L3 == 0) {

			
 
				+                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterL2L3 == 1) {

			
 
				+                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterL4L5 == 0) {

			
 
				+                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterL4L5 == 1) {

			
 
				+                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_waterL2L3 == 0) {

			
 
				+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_waterL2L3 == 1) {

			
 
				+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_waterL4L5 == 0) {

			
 
				+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_waterL4L5 == 1) {

			
 
				+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {

			
 
				+                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {

			
 
				+                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");

			
 
				+                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);

			
 
				+                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);

			
 
				+                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);

			
 
				+                $('#C_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_SO(sotid){

			
 
				+                console.log('color-select_tank_id:' + sotid)

			
 
				+                $.get('/loading/SO' + sotid, '', function (res) {

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#SO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");

			
 
				+                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);

			
 
				+                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);

			
 
				+                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);

			
 
				+                $('#SO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+            function update_data_S(stid) {

			
 
				+                console.log('color-select_tank_id:' + stid)

			
 
				+                $.get('/loading/S' + stid, '', function (res) {

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);

			
 
				+                $('#S1_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_P(ptid) {

			
 
				+                console.log('peel_tank_id:' + ptid)

			
 
				+                $.get('/loading/P' + ptid, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#P_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#P_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#P_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_motor > 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else if (res.tank_motor == 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else { $("#tank_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");

			
 
				+                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);

			
 
				+                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);

			
 
				+                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);

			
 
				+                $('#P_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_CO(cotid){

			
 
				+                console.log('clean_output_tank_id:' + cotid)

			
 
				+                $.get('loading/CO' + cotid, '', function (res){

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#CO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");

			
 
				+                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);

			
 
				+                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);

			
 
				+                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);

			
 
				+                $('#CO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+            function update_data_PO(potid){

			
 
				+                console.log('peel_output_tank_id' + potid)

			
 
				+                $.get('loading/PO' + potid, '', function (res){

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#PO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");

			
 
				+                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);

			
 
				+                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);

			
 
				+                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);

			
 
				+                $('#PO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+            var button_C1 = document.getElementById('C1');

			
 
				+            button_C1.addEventListener('click', function () { update_data_C("1") });

			
 
				+

			
 
				+            var button_C2 = document.getElementById('C2');

			
 
				+            button_C2.addEventListener('click', function () { update_data_C("2") });

			
 
				+

			
 
				+            var button_CO1 = document.getElementById('CO1');

			
 
				+            button_CO1.addEventListener('click', function () { update_data_CO("1") });

			
 
				+

			
 
				+            var button_CO2 = document.getElementById('CO2');

			
 
				+            button_CO2.addEventListener('click', function () { update_data_CO("2") });

			
 
				+

			
 
				+            var button_S1 = document.getElementById('S1');

			
 
				+            button_S1.addEventListener('click', function () { update_data_S("1") });

			
 
				+

			
 
				+            var button_S2 = document.getElementById('S2');

			
 
				+            button_S2.addEventListener('click', function () { update_data_S("2") });

			
 
				+

			
 
				+            var button_SO1 = document.getElementById('SO1');

			
 
				+            button_SO1.addEventListener('click', function () { update_data_SO("1") });

			
 
				+

			
 
				+            var button_SO2 = document.getElementById('SO2');

			
 
				+            button_SO2.addEventListener('click', function () { update_data_SO("2") });

			
 
				+

			
 
				+            var button_P1 = document.getElementById('P1');

			
 
				+            button_P1.addEventListener('click', function () { update_data_P("1") });

			
 
				+

			
 
				+            var button_P2 = document.getElementById('P2');

			
 
				+            button_P2.addEventListener('click', function () { update_data_P("2") });

			
 
				+

			
 
				+            var button_PO1 = document.getElementById('PO1');

			
 
				+            button_PO1.addEventListener('click', function () { update_data_PO("1") });

			
 
				+

			
 
				+            var button_PO2 = document.getElementById('PO2');

			
 
				+            button_PO2.addEventListener('click', function () { update_data_PO("2") });

			
 
				+

			
 
				+        </script>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/clean_1124?????.html
+++ b/app/templates/clean_1124?????.html
@@ -0,0 +1,823 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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">

			
 
				+-->

			
 
				+    <script>

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title").text('清洗貨櫃');

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .C1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 205px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .C2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 205px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .CO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 400px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .CO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 400px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 945px;

			
 
				+            width: 115px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 945px;

			
 
				+            width: 115px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .SO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1065px;

			
 
				+            width: 60px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .SO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1065px;

			
 
				+            width: 60px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1150px;

			
 
				+            width: 95px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1150px;

			
 
				+            width: 95px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .PO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1250px;

			
 
				+            width: 50px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .PO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1250px;

			
 
				+            width: 50px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+    </script>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+    

			
 
				+        <!--

			
 
				+            background-color:rgb(0, 238, 255);

			
 
				+        -->

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>

			
 
				+        </div>

			
 
				+        

			
 
				+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            Smart Coffee

			
 
				+        </div>

			
 
				+        -->

			
 
				+        <div>

			
 
				+            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->

			
 
				+            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>

			
 
				+

			
 
				+            <!-- 清洗浮選槽 C1 -->

			
 
				+            <div id="C1" tabindex="0" class="C1_position" role="button">

			
 
				+                C1 status

			
 
				+                <!-- C1 狀態點點-->

			
 
				+                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+            

			
 
				+            <!-- 清洗浮選槽 C2 -->

			
 
				+            <div id="C2" tabindex="0" class="C2_position" role="button">

			
 
				+                C2 status

			
 
				+                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 清洗浮選 CO1 出料儲豆槽 -->

			
 
				+            <div id="CO1" tabindex="0" class="CO1_position" role="button">

			
 
				+                CO1 status

			
 
				+                <!-- CO1 狀態點點-->

			
 
				+                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 清洗浮選 CO2 出料儲豆槽 -->

			
 
				+            <div id="CO2" tabindex="0" class="CO2_position" role="button">

			
 
				+                CO2 status

			
 
				+                <!-- CO2 狀態點點-->

			
 
				+                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 S1 -->

			
 
				+            <div id="S1" tabindex="0" class="S1_position" role="button">

			
 
				+                S1 status

			
 
				+                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 S2 -->

			
 
				+            <div id="S2" tabindex="0" class="S2_position" role="button">

			
 
				+                S2 status

			
 
				+                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 SO1 出料儲豆槽 -->

			
 
				+            <div id="SO1" tabindex="0" class="SO1_position" role="button">

			
 
				+                SO1 status

			
 
				+                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 SO2 出料儲豆槽 -->

			
 
				+            <div id="SO2" tabindex="0" class="SO2_position" role="button">

			
 
				+                SO2 status

			
 
				+                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 P1 -->

			
 
				+            <div id="P1" tabindex="0" class="P1_position" role="button">

			
 
				+                P1 status

			
 
				+                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 P2 -->

			
 
				+            <div id="P2" tabindex="0" class="P2_position" role="button">

			
 
				+                P2 status

			
 
				+                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 PO1 出料儲豆槽 -->

			
 
				+            <div id="PO1" tabindex="0" class="PO1_position" role="button">

			
 
				+                PO1 status

			
 
				+                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 PO2 出料儲豆槽 -->

			
 
				+            <div id="PO2" tabindex="0" class="PO2_position" role="button">

			
 
				+                PO2 status

			
 
				+                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 清洗浮選 模态框 -->

			
 
				+        <div class="modal fade" id="C_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</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 id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="C_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterInput_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    入水口_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterL2L3_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 2、3_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterL4L5_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 4、5_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_solenoid_waterL2L3_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 2、3_電磁閥

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_solenoid_waterL4L5_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 4、5_電磁閥

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_stepping_motor_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    步進馬達

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    咖啡生豆高度

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="UltraSonic_t_status"></span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 清洗浮選 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="CO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</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 id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="CO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 色選機 模态框 -->

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 色選機 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="SO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</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 id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="SO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 模态框 -->

			
 
				+        <div class="modal fade" id="P_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</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 id="P_actuator_link" href="">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="P_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_motor_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    馬達

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="SENSOR_t_status">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="PO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</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 id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="PO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <script>

			
 
				+            function update_data_C(ctid) {

			
 
				+                console.log('clean_tank_id:' + ctid)

			
 
				+                $.get('/loading/C' + ctid, '', function (res) {

			
 
				+

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#C_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#C_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#C_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterInput == 0) {

			
 
				+                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterInput == 1) {

			
 
				+                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterL2L3 == 0) {

			
 
				+                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterL2L3 == 1) {

			
 
				+                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterL4L5 == 0) {

			
 
				+                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterL4L5 == 1) {

			
 
				+                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_waterL2L3 == 0) {

			
 
				+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_waterL2L3 == 1) {

			
 
				+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_waterL4L5 == 0) {

			
 
				+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_waterL4L5 == 1) {

			
 
				+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {

			
 
				+                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {

			
 
				+                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");

			
 
				+                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);

			
 
				+                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);

			
 
				+                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);

			
 
				+                $('#C_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_SO(sotid){

			
 
				+                console.log('color-select_tank_id:' + sotid)

			
 
				+                $.get('/loading/SO' + sotid, '', function (res) {

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#SO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");

			
 
				+                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);

			
 
				+                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);

			
 
				+                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);

			
 
				+                $('#SO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+            function update_data_S(stid) {

			
 
				+                console.log('color-select_tank_id:' + stid)

			
 
				+                $.get('/loading/S' + stid, '', function (res) {

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);

			
 
				+                $('#S1_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_P(ptid) {

			
 
				+                console.log('peel_tank_id:' + ptid)

			
 
				+                $.get('/loading/P' + ptid, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#P_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#P_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#P_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_motor > 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else if (res.tank_motor == 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else { $("#tank_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");

			
 
				+                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);

			
 
				+                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);

			
 
				+                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);

			
 
				+                $('#P_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_CO(cotid){

			
 
				+                console.log('clean_output_tank_id:' + cotid)

			
 
				+                $.get('loading/CO' + cotid, '', function (res){

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#CO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");

			
 
				+                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);

			
 
				+                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);

			
 
				+                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);

			
 
				+                $('#CO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+            function update_data_PO(potid){

			
 
				+                console.log('peel_output_tank_id' + potid)

			
 
				+                $.get('loading/PO' + potid, '', function (res){

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#PO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");

			
 
				+                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);

			
 
				+                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);

			
 
				+                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);

			
 
				+                $('#PO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+            var button_C1 = document.getElementById('C1');

			
 
				+            button_C1.addEventListener('click', function () { update_data_C("1") });

			
 
				+

			
 
				+            var button_C2 = document.getElementById('C2');

			
 
				+            button_C2.addEventListener('click', function () { update_data_C("2") });

			
 
				+

			
 
				+            var button_CO1 = document.getElementById('CO1');

			
 
				+            button_CO1.addEventListener('click', function () { update_data_CO("1") });

			
 
				+

			
 
				+            var button_CO2 = document.getElementById('CO2');

			
 
				+            button_CO2.addEventListener('click', function () { update_data_CO("2") });

			
 
				+

			
 
				+            var button_S1 = document.getElementById('S1');

			
 
				+            button_S1.addEventListener('click', function () { update_data_S("1") });

			
 
				+

			
 
				+            var button_S2 = document.getElementById('S2');

			
 
				+            button_S2.addEventListener('click', function () { update_data_S("2") });

			
 
				+

			
 
				+            var button_SO1 = document.getElementById('SO1');

			
 
				+            button_SO1.addEventListener('click', function () { update_data_SO("1") });

			
 
				+

			
 
				+            var button_SO2 = document.getElementById('SO2');

			
 
				+            button_SO2.addEventListener('click', function () { update_data_SO("2") });

			
 
				+

			
 
				+            var button_P1 = document.getElementById('P1');

			
 
				+            button_P1.addEventListener('click', function () { update_data_P("1") });

			
 
				+

			
 
				+            var button_P2 = document.getElementById('P2');

			
 
				+            button_P2.addEventListener('click', function () { update_data_P("2") });

			
 
				+

			
 
				+            var button_PO1 = document.getElementById('PO1');

			
 
				+            button_PO1.addEventListener('click', function () { update_data_PO("1") });

			
 
				+

			
 
				+            var button_PO2 = document.getElementById('PO2');

			
 
				+            button_PO2.addEventListener('click', function () { update_data_PO("2") });

			
 
				+

			
 
				+        </script>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/clean_1125????.html
+++ b/app/templates/clean_1125????.html
@@ -0,0 +1,823 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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">

			
 
				+-->

			
 
				+    <script>

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title").text('清洗貨櫃');

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .C1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 205px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .C2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 205px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .CO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 400px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .CO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 400px;

			
 
				+            width: 175px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 945px;

			
 
				+            width: 115px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .S2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 945px;

			
 
				+            width: 115px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .SO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1065px;

			
 
				+            width: 60px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .SO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1065px;

			
 
				+            width: 60px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1150px;

			
 
				+            width: 95px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .P2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1150px;

			
 
				+            width: 95px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .PO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 135px;

			
 
				+            left: 1250px;

			
 
				+            width: 50px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .PO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 400px;

			
 
				+            left: 1250px;

			
 
				+            width: 50px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+    </script>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+    

			
 
				+        <!--

			
 
				+            background-color:rgb(0, 238, 255);

			
 
				+        -->

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>

			
 
				+        </div>

			
 
				+        

			
 
				+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            Smart Coffee

			
 
				+        </div>

			
 
				+        -->

			
 
				+        <div>

			
 
				+            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->

			
 
				+            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>

			
 
				+

			
 
				+            <!-- 清洗浮選槽 C1 -->

			
 
				+            <div id="C1" tabindex="0" class="C1_position" role="button">

			
 
				+                C1 status

			
 
				+                <!-- C1 狀態點點-->

			
 
				+                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+            

			
 
				+            <!-- 清洗浮選槽 C2 -->

			
 
				+            <div id="C2" tabindex="0" class="C2_position" role="button">

			
 
				+                C2 status

			
 
				+                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 清洗浮選 CO1 出料儲豆槽 -->

			
 
				+            <div id="CO1" tabindex="0" class="CO1_position" role="button">

			
 
				+                CO1 status

			
 
				+                <!-- CO1 狀態點點-->

			
 
				+                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 清洗浮選 CO2 出料儲豆槽 -->

			
 
				+            <div id="CO2" tabindex="0" class="CO2_position" role="button">

			
 
				+                CO2 status

			
 
				+                <!-- CO2 狀態點點-->

			
 
				+                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 S1 -->

			
 
				+            <div id="S1" tabindex="0" class="S1_position" role="button">

			
 
				+                S1 status

			
 
				+                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 S2 -->

			
 
				+            <div id="S2" tabindex="0" class="S2_position" role="button">

			
 
				+                S2 status

			
 
				+                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 SO1 出料儲豆槽 -->

			
 
				+            <div id="SO1" tabindex="0" class="SO1_position" role="button">

			
 
				+                SO1 status

			
 
				+                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 色選機 SO2 出料儲豆槽 -->

			
 
				+            <div id="SO2" tabindex="0" class="SO2_position" role="button">

			
 
				+                SO2 status

			
 
				+                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 P1 -->

			
 
				+            <div id="P1" tabindex="0" class="P1_position" role="button">

			
 
				+                P1 status

			
 
				+                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 P2 -->

			
 
				+            <div id="P2" tabindex="0" class="P2_position" role="button">

			
 
				+                P2 status

			
 
				+                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 PO1 出料儲豆槽 -->

			
 
				+            <div id="PO1" tabindex="0" class="PO1_position" role="button">

			
 
				+                PO1 status

			
 
				+                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 脫皮機 PO2 出料儲豆槽 -->

			
 
				+            <div id="PO2" tabindex="0" class="PO2_position" role="button">

			
 
				+                PO2 status

			
 
				+                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 清洗浮選 模态框 -->

			
 
				+        <div class="modal fade" id="C_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</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 id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="C_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterInput_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    入水口_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterL2L3_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 2、3_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_pump_waterL4L5_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 4、5_雙核泵

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_solenoid_waterL2L3_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 2、3_電磁閥

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_solenoid_waterL4L5_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    出水口 4、5_電磁閥

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_stepping_motor_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    步進馬達

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    咖啡生豆高度

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="UltraSonic_t_status"></span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 清洗浮選 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="CO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</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 id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="CO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 色選機 模态框 -->

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 色選機 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="SO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</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 id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="SO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 模态框 -->

			
 
				+        <div class="modal fade" id="P_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</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 id="P_actuator_link" href="">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="P_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="tank_motor_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    馬達

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="SENSOR_t_status">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- 脫皮機 出料儲豆槽 模态框 -->

			
 
				+        <div class="modal fade" id="PO_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</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 id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>

			
 
				+                                </tr>

			
 
				+                                <tr>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <div id="PO_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                    

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    真空吸料機

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table> 

			
 
				+                                    </td>

			
 
				+                                    <td style="vertical-align:text-top;">

			
 
				+                                        <table style="border:0px gray solid;" cellpadding="3">

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    (感測器)

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="">000</span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <script>

			
 
				+            function update_data_C(ctid) {

			
 
				+                console.log('clean_tank_id:' + ctid)

			
 
				+                $.get('/loading/C' + ctid, '', function (res) {

			
 
				+

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#C_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#C_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#C_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterInput == 0) {

			
 
				+                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterInput == 1) {

			
 
				+                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterL2L3 == 0) {

			
 
				+                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterL2L3 == 1) {

			
 
				+                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_pump_waterL4L5 == 0) {

			
 
				+                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_pump_waterL4L5 == 1) {

			
 
				+                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_waterL2L3 == 0) {

			
 
				+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_waterL2L3 == 1) {

			
 
				+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_waterL4L5 == 0) {

			
 
				+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_waterL4L5 == 1) {

			
 
				+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {

			
 
				+                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {

			
 
				+                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");

			
 
				+                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);

			
 
				+                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);

			
 
				+                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);

			
 
				+                $('#C_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_SO(sotid){

			
 
				+                console.log('color-select_tank_id:' + sotid)

			
 
				+                $.get('/loading/SO' + sotid, '', function (res) {

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#SO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");

			
 
				+                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);

			
 
				+                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);

			
 
				+                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);

			
 
				+                $('#SO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+            function update_data_S(stid) {

			
 
				+                console.log('color-select_tank_id:' + stid)

			
 
				+                $.get('/loading/S' + stid, '', function (res) {

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);

			
 
				+                $('#S1_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_P(ptid) {

			
 
				+                console.log('peel_tank_id:' + ptid)

			
 
				+                $.get('/loading/P' + ptid, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#P_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#P_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#P_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_motor > 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else if (res.tank_motor == 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else { $("#tank_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");

			
 
				+                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);

			
 
				+                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);

			
 
				+                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);

			
 
				+                $('#P_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+            function update_data_CO(cotid){

			
 
				+                console.log('clean_output_tank_id:' + cotid)

			
 
				+                $.get('loading/CO' + cotid, '', function (res){

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#CO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");

			
 
				+                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);

			
 
				+                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);

			
 
				+                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);

			
 
				+                $('#CO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+            function update_data_PO(potid){

			
 
				+                console.log('peel_output_tank_id' + potid)

			
 
				+                $.get('loading/PO' + potid, '', function (res){

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#PO_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }

			
 
				+                }, 'json');

			
 
				+

			
 
				+                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");

			
 
				+                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);

			
 
				+                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);

			
 
				+                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);

			
 
				+                $('#PO_Modal').modal('show');

			
 
				+

			
 
				+            }

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+            var button_C1 = document.getElementById('C1');

			
 
				+            button_C1.addEventListener('click', function () { update_data_C("1") });

			
 
				+

			
 
				+            var button_C2 = document.getElementById('C2');

			
 
				+            button_C2.addEventListener('click', function () { update_data_C("2") });

			
 
				+

			
 
				+            var button_CO1 = document.getElementById('CO1');

			
 
				+            button_CO1.addEventListener('click', function () { update_data_CO("1") });

			
 
				+

			
 
				+            var button_CO2 = document.getElementById('CO2');

			
 
				+            button_CO2.addEventListener('click', function () { update_data_CO("2") });

			
 
				+

			
 
				+            var button_S1 = document.getElementById('S1');

			
 
				+            button_S1.addEventListener('click', function () { update_data_S("1") });

			
 
				+

			
 
				+            var button_S2 = document.getElementById('S2');

			
 
				+            button_S2.addEventListener('click', function () { update_data_S("2") });

			
 
				+

			
 
				+            var button_SO1 = document.getElementById('SO1');

			
 
				+            button_SO1.addEventListener('click', function () { update_data_SO("1") });

			
 
				+

			
 
				+            var button_SO2 = document.getElementById('SO2');

			
 
				+            button_SO2.addEventListener('click', function () { update_data_SO("2") });

			
 
				+

			
 
				+            var button_P1 = document.getElementById('P1');

			
 
				+            button_P1.addEventListener('click', function () { update_data_P("1") });

			
 
				+

			
 
				+            var button_P2 = document.getElementById('P2');

			
 
				+            button_P2.addEventListener('click', function () { update_data_P("2") });

			
 
				+

			
 
				+            var button_PO1 = document.getElementById('PO1');

			
 
				+            button_PO1.addEventListener('click', function () { update_data_PO("1") });

			
 
				+

			
 
				+            var button_PO2 = document.getElementById('PO2');

			
 
				+            button_PO2.addEventListener('click', function () { update_data_PO("2") });

			
 
				+

			
 
				+        </script>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/clean_container.html
+++ b/app/templates/clean_container.html
--- a/app/templates/clean_container_0805.html
+++ b/app/templates/clean_container_0805.html
--- a/app/templates/clean_container_1124?????.html
+++ b/app/templates/clean_container_1124?????.html
--- a/app/templates/clean_container_tank.html
+++ b/app/templates/clean_container_tank.html
@@ -0,0 +1,903 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+      <!--  <meta http-equiv="refresh" content="5" /> 每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Socket.IO -->

			
 
				+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>

			
 
				+    

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var ctn = '{{tid}}';

			
 
				+        var status = '{{status}}';

			
 
				+        console.log('ctn:' + ctn)

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#coffee_title_pc").text('C' + ctn + ' 清洗浮選槽操作介面');

			
 
				+            $("#coffee_title_phone").text('C' + ctn + ' 清洗浮選槽操作介面');

			
 
				+

			
 
				+            if (status == 2) {

			
 
				+                $('input').prop('disabled', true);

			
 
				+                $('button').prop('disabled', true);

			
 
				+            } else if ( (status == 0) || (status == 1) ) {

			
 
				+                $('input').prop('disabled', false);

			
 
				+                $('button').prop('disabled', false);   

			
 
				+            }

			
 
				+        });

			
 
				+        var WebUpdate_set;

			
 
				+        WebUpdate_set = setInterval(function(){WebUpdate(ctn)} , 10 * 1000)

			
 
				+        

			
 
				+    </script>

			
 
				+

			
 
				+    <script>

			
 
				+        // 清洗浮選 致動器開關

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        // 桶內 真空吸料機

			
 
				+        function tankVacuum(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_vacuum_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟真空吸料機嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉真空吸料機嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 吸料機三通閥

			
 
				+        function tankThreeWayValveInput(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_threewayvalve_input_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-05").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟吸料機三通閥[入料]嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-05").prop('checked', true);

			
 
				+                    if (!confirm("你確定要開啟吸料機三通閥[排氣]嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-05").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-05").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 馬達

			
 
				+        function tankMotor_set() {

			
 
				+            var motor_data = $("input[id=motor_rpm_data]").val();

			
 
				+            if (motor_data == '') {

			
 
				+                alert("請先輸入要運轉的值!");

			
 
				+                return false;

			
 
				+            } else if (motor_data == 0) {

			
 
				+                alert("轉速 0 為關閉馬達");

			
 
				+

			
 
				+            } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {

			
 
				+                alert("您輸入的值已超過範圍，請重新輸入!" + !Number(motor_data));

			
 
				+                return false;

			
 
				+            };

			
 
				+            var value = "off";

			
 
				+            if (motor_data != 0) {

			
 
				+                value = motor_data;

			
 
				+                if (!confirm("你確定要開啟攪拌馬達，運轉速度為 " + motor_data + " RPM 嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            } else {

			
 
				+                if (!confirm("你確定要關閉攪拌馬達嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            };

			
 
				+

			
 
				+            var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": motor_data };

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    setTimeout("alert('攪拌馬達_開啟成功!')", 500);

			
 
				+                    var timer = setInterval(Rotate, 60000);

			
 
				+                } else if (res == 'off') {

			
 
				+                    setTimeout("alert('攪拌馬達_關閉成功!')", 500);

			
 
				+                    clearInterval(timer);

			
 
				+                    $("#motor_rpm_status").text('')

			
 
				+                } else {

			
 
				+                    alert(res);

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+

			
 
				+        function tankMotor(params) {

			
 
				+            var params_int = parseInt(params)

			
 
				+            if (-50 <= params_int <= 50) {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": params };

			
 
				+            } else {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": '0' };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-08").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-08").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 中水入水電磁閥

			
 
				+        function tankSolenoidReclaimedIn(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_solenoid_reclaimed_in_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-11").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟中水入水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-11").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉中水入水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-11").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-11").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 清水入水電磁閥

			
 
				+        function tankSolenoidWaterIn(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_solenoid_water_in_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟清水入水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉清水入水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-14").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-14").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 幫浦 (清水入水)

			
 
				+        function tankPumpWaterIn(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_pump_water_in_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-17").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟清水入水幫浦嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-17").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉清水入水幫浦嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-17").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-17").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 排水廢水電磁閥

			
 
				+        function tankSolenoidWaterOut(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_solenoid_water_out_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-20").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟排水廢水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-20").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉排水廢水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-20").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-20").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 排水中水電磁閥

			
 
				+        function tankSolenoidReclaimedOut(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_solenoid_reclaimed_out_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-23").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟排水中水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-23").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉排水中水電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-23").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-23").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 消毒電磁閥

			
 
				+        function tankSolenoidDisinfect(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_solenoid_disinfect_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-26").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟消毒電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-26").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉消毒電磁閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-26").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-26").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 混合槽幫浦

			
 
				+        function tankPumpDisinfect(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_pump_disinfect_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-29").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟混合槽幫浦嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-29").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉混合槽幫浦嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-29").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-29").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 桶內 蝴蝶閥

			
 
				+        function tankDiskvalve(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_diskvalve_status]:checked");

			
 
				+                //大於0代表有被選中 

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-32").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟蝴蝶閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-32").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉蝴蝶閥嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+

			
 
				+                var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+    </script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        function changeUpdate() {

			
 
				+            clearInterval(WebUpdate_set);

			
 
				+

			
 
				+            var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+            console.log('webupdate_time' + webupdate_time)

			
 
				+            WebUpdate_set = setInterval(function(){WebUpdate(ctn)} , webupdate_time * 1000);

			
 
				+        }

			
 
				+

			
 
				+        // jQuery 更新感測器致動器狀態

			
 
				+        function WebUpdate(ctn) {

			
 
				+            $.get('/loading/C' + ctn, '', function (res) {

			
 
				+                if (res.tank_vacuum == 0) {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                } else if (res.tank_vacuum == 1) {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_threewayvalve_input == 0) {

			
 
				+                    $("#cmn-toggle-05").prop('checked', false);

			
 
				+                } else if (res.tank_threewayvalve_input == 1) {

			
 
				+                    $("#cmn-toggle-05").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_solenoid_reclaimed_in == 0) {

			
 
				+                    $("#cmn-toggle-11").prop('checked', false);

			
 
				+                } else if (res.tank_solenoid_reclaimed_in == 1) {

			
 
				+                    $("#cmn-toggle-11").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_solenoid_water_in == 0) {

			
 
				+                    $("#cmn-toggle-14").prop('checked', false);

			
 
				+                } else if (res.tank_solenoid_water_in == 1) {

			
 
				+                    $("#cmn-toggle-14").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_pump_water_in == 0) {

			
 
				+                    $("#cmn-toggle-17").prop('checked', false);

			
 
				+                } else if (res.tank_pump_water_in == 1) {

			
 
				+                    $("#cmn-toggle-17").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_solenoid_water_out == 0) {

			
 
				+                    $("#cmn-toggle-20").prop('checked', false);

			
 
				+                } else if (res.tank_solenoid_water_out == 1) {

			
 
				+                    $("#cmn-toggle-20").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_solenoid_reclaimed_out == 0) {

			
 
				+                    $("#cmn-toggle-23").prop('checked', false);

			
 
				+                } else if (res.tank_solenoid_reclaimed_out == 1) {

			
 
				+                    $("#cmn-toggle-23").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_solenoid_disinfect == 0) {

			
 
				+                    $("#cmn-toggle-26").prop('checked', false);

			
 
				+                } else if (res.tank_solenoid_disinfect == 1) {

			
 
				+                    $("#cmn-toggle-26").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_pump_disinfect == 0) {

			
 
				+                    $("#cmn-toggle-29").prop('checked', false);

			
 
				+                } else if (res.tank_pump_disinfect == 1) {

			
 
				+                    $("#cmn-toggle-29").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                if (res.tank_diskvalve == 0) {

			
 
				+                    $("#cmn-toggle-32").prop('checked', false);

			
 
				+                } else if (res.tank_diskvalve == 1) {

			
 
				+                    $("#cmn-toggle-32").prop('checked', true);

			
 
				+                }

			
 
				+

			
 
				+                $("#motor_rpm_data").attr("placeholder", res.tank_motor);

			
 
				+                $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                $("#MotorEncoder_t_status").text(res.Encoder);

			
 
				+                $("#tankTurbidity_t_status").text(res.tankTurbidity);

			
 
				+                $("#filterTurbidity_t_status").text(res.filterTurbidity);

			
 
				+

			
 
				+                // setTimeout(function(){WebUpdate(ctn)}, 10 * 1000);

			
 
				+

			
 
				+            }, 'json');

			
 
				+

			
 
				+            

			
 
				+        }

			
 
				+    </script>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+    

			
 
				+        <h4>致動器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">

			
 
				+            <tr>

			
 
				+                <td style="color:red;">Valve</td>

			
 
				+                <td>真空吸料機</td>

			
 
				+                <td>吸料機<br>三通閥</td>

			
 
				+                <td>馬達</td>

			
 
				+                <td>中水入水<br>電磁閥</td>

			
 
				+                <td>清水入水<br>電磁閥</td>

			
 
				+                <td>幫浦<br>(清水入水)</td>

			
 
				+                <td>排水廢水<br>電磁閥</td>

			
 
				+                <td>排水中水<br>電磁閥</td>

			
 
				+                <td>消毒<br>電磁閥</td>

			
 
				+                <td>混合槽<br>幫浦</td>

			
 
				+                <td>蝴蝶閥</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <span style="color:#C0C0C0;">off</span>

			
 
				+                    <span style="color:#008CBA;">on</span>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_vacuum == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked

			
 
				+                                name="tank_vacuum_status" value="ON" onclick="tankVacuum()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02"

			
 
				+                                name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-03">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-04">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_threewayvalve_input == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-05" checked

			
 
				+                                name="tank_threewayvalve_input_status" value="ON" onclick="tankThreeWayValveInput()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-05"

			
 
				+                                name="tank_threewayvalve_input_status" value="OFF" onclick="tankThreeWayValveInput()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-05"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-06">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM

			
 
				+                    <br>

			
 
				+                    <span id="motor_rpm_status" style="color:red;"></span>

			
 
				+                    <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-10">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_solenoid_reclaimed_in == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-11" checked

			
 
				+                                name="tank_solenoid_reclaimed_in_status" value="ON" onclick="tankSolenoidReclaimedIn()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-11"

			
 
				+                                name="tank_solenoid_reclaimed_in_status" value="OFF" onclick="tankSolenoidReclaimedIn()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-11"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-12">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-13">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_solenoid_water_in == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-14" checked

			
 
				+                                name="tank_solenoid_water_in_status" value="ON" onclick="tankSolenoidWaterIn()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-14"

			
 
				+                                name="tank_solenoid_water_in_status" value="OFF" onclick="tankSolenoidWaterIn()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-14"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-15">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-16">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_pump_water_in == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-17" checked

			
 
				+                                name="tank_pump_water_in_status" value="ON" onclick="tankPumpWaterIn()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-17"

			
 
				+                                name="tank_pump_water_in_status" value="OFF" onclick="tankPumpWaterIn()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-17"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-18">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-19">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_solenoid_water_out == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-20" checked

			
 
				+                                name="tank_solenoid_water_out_status" value="ON" onclick="tankSolenoidWaterOut()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-20"

			
 
				+                                name="tank_solenoid_water_out_status" value="OFF" onclick="tankSolenoidWaterOut()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-20"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-21">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-22">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_solenoid_reclaimed_out == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-23" checked

			
 
				+                                name="tank_solenoid_reclaimed_out_status" value="ON" onclick="tankSolenoidReclaimedOut()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-23"

			
 
				+                                name="tank_solenoid_reclaimed_out_status" value="OFF" onclick="tankSolenoidReclaimedOut()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-23"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-24">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-25">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_solenoid_disinfect == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-26" checked

			
 
				+                                name="tank_solenoid_disinfect_status" value="ON" onclick="tankSolenoidDisinfect()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-26"

			
 
				+                                name="tank_solenoid_disinfect_status" value="OFF" onclick="tankSolenoidDisinfect()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-26"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-27">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-28">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_pump_disinfect == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-29" checked

			
 
				+                                name="tank_pump_disinfect_status" value="ON" onclick="tankPumpDisinfect()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-29"

			
 
				+                                name="tank_pump_disinfect_status" value="OFF" onclick="tankPumpDisinfect()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-29"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-30">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-31">

			
 
				+                        </div>

			
 
				+                        <div class="text-center">

			
 
				+                            {% if tank_diskvalve == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32" checked

			
 
				+                                name="tank_diskvalve_status" value="ON" onclick="tankDiskvalve()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32"

			
 
				+                                name="tank_diskvalve_status" value="OFF" onclick="tankDiskvalve()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-32"></label>

			
 
				+                        </div>

			
 
				+                        <div>

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-33">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#008CBA;"><b>ON</b></span></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankThreeWayValveInput('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="20" onclick="tankMotor('20')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedIn('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterIn('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpWaterIn('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterOut('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedOut('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidDisinfect('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpDisinfect('1')"></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankDiskvalve('1')"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankThreeWayValveInput('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedIn('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterIn('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpWaterIn('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterOut('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedOut('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidDisinfect('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpDisinfect('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankDiskvalve('0')"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>感測器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="5">

			
 
				+            <tr>

			
 
				+                <td style="background-color:#f3f3f3">生豆高度</td>

			
 
				+                <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>

			
 
				+                <td style="background-color:#f3f3f3">桶內濁度計</td>

			
 
				+                <td><span id="tankTurbidity_t_status">{{tank_Turbidity.tankTurbidity}}</span> NTU</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td style="background-color:#f3f3f3">馬達編碼器</td>

			
 
				+                <td><span id="MotorEncoder_t_status">{{tank_Encoder.Encoder}}</span> RPM</td>

			
 
				+                <td style="background-color:#f3f3f3">過濾器濁度計</td>

			
 
				+                <td><span id="filterTurbidity_t_status">{{filter_Turbidity.filterTurbidity}}</span> NYU</td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>排程測試</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="5">

			
 
				+            <tr>

			
 
				+                <td>排氣下豆測試</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    吸料

			
 
				+                    <input type="text" class="input-text" name="waiting_time_8" value="5">

			
 
				+                    秒                

			
 
				+                    <br>

			
 
				+                    放料

			
 
				+                    <input type="text" class="input-text" name="waiting_time_9" value="10">

			
 
				+                    秒

			
 
				+                    <br>

			
 
				+                    循環

			
 
				+                    <input type="text" class="input-text" name="waiting_loop_3" value="4">

			
 
				+                    次

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="tank_BeanInputAir_testing()">排氣下豆測試</button>

			
 
				+                    <script>

			
 
				+                        function tank_BeanInputAir_testing() {

			
 
				+                            // 循環次數

			
 
				+                            var loop3 = $("input[name=waiting_loop_3]").val();

			
 
				+                            console.log('--- 循環 ' + loop3 + ' 次 ---')

			
 
				+

			
 
				+                            for (step = 1; step <= loop3; step++) {

			
 
				+                                // 真空吸料機 ON

			
 
				+                                tankVacuum_ON()

			
 
				+                                console.log('tankVacuum_ON')

			
 
				+

			
 
				+                                // 吸料時間 

			
 
				+                                var time8 = $("input[name=waiting_time_8]").val();

			
 
				+                                console.log('等待 ' + time8 + ' 秒')

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < time8 * 1000) { };

			
 
				+

			
 
				+                                // 真空吸料機 OFF

			
 
				+                                tankVacuum_OFF()

			
 
				+                                console.log('tankVacuum_OFF')

			
 
				+

			
 
				+                                // 吸料時間

			
 
				+                                var time9 = $("input[name=waiting_time_9]").val();

			
 
				+                                console.log('等待 ' + time9 + ' 秒')

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < time9 * 1000) { };

			
 
				+                            }                        

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/colorselect_container_tank.html
+++ b/app/templates/colorselect_container_tank.html
@@ -0,0 +1,324 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <script language="JavaScript">

			
 
				+        var ptid = '{{tid}}';

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title_pc").text('S' + ptid + ' 色選機操作介面');

			
 
				+            $("#coffee_title_phone").text('S' + ptid + ' 操作介面');

			
 
				+        });

			
 
				+

			
 
				+        var WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , 10 * 1000);

			
 
				+    </script>

			
 
				+

			
 
				+    <script>

			
 
				+        // 清洗浮選 致動器開關

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        // 桶內 真空吸料機

			
 
				+        function tankVacuum(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_vacuum_status]:checked");

			
 
				+                console.log('check：', check);

			
 
				+                //大於0代表有被選中

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-65").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟真空吸料機嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-65").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉真空吸料機嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-35").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-35").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+

			
 
				+        // 馬達

			
 
				+        function tankMotor_set() {

			
 
				+            var motor_data = $("#motor_rpm_data").val();

			
 
				+            console.log("motor_data: " + motor_data)

			
 
				+            if (motor_data == '') {

			
 
				+                //$("#cmn-toggle-20").prop('checked', false);

			
 
				+                alert("請先輸入要運轉的值!");

			
 
				+                return false;

			
 
				+            } else if (motor_data == 0) {

			
 
				+                alert("轉速 0 為關閉馬達");

			
 
				+            } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {

			
 
				+                // 

			
 
				+                //$("#cmn-toggle-20").prop('checked', false);

			
 
				+                alert("您輸入的值已超過範圍，請重新輸入!" + !Number(motor_data));

			
 
				+                return false;

			
 
				+            };

			
 
				+            var value = "off";

			
 
				+            //var check = $("input[name=peeling-machine-on]:checked");

			
 
				+            if (motor_data != 0) {

			
 
				+                value = motor_data;

			
 
				+                //$("#cmn-toggle-20").prop('checked', false);

			
 
				+                if (!confirm("你確定要開啟攪拌馬達，運轉速度為 " + motor_data + " RPM 嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            } else {

			
 
				+                //$("#cmn-toggle-20").prop('checked', true);

			
 
				+                if (!confirm("你確定要關閉攪拌馬達嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            };

			
 
				+

			
 
				+            var data = { "tank_num": "S" + tank_num, "command": "tank_motor_status", "value": motor_data };

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    //$("#cmn-toggle-14").prop('checked', true); // prop 設置元素屬型與元素值, 設定 checked 屬性為 true

			
 
				+                    setTimeout("alert('攪拌馬達_開啟成功!')", 500); // 設定時間執行函式 delay(500), 只執行一次

			
 
				+                    var timer = setInterval(Rotate, 60000); // 啟動後會在 60000 毫秒(更新時間一分鐘)內不斷執行 (原因須配合更新時間？)

			
 
				+                } else if (res == 'off') {

			
 
				+                    //$("#cmn-toggle-14").prop('checked', false);

			
 
				+                    setTimeout("alert('攪拌馬達_關閉成功!')", 500);

			
 
				+                    clearInterval(timer);                   // 取消 timer 的不斷執行

			
 
				+                    $("#motor_rpm_status").text('');        // 設置 #motor_rpm_status 的文字為空, #井字號

			
 
				+                } else {

			
 
				+                    alert(res);

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+

			
 
				+        function tankMotor(params) {

			
 
				+            var data = { "tank_num": "S" + tank_num, "command": "tank_motor_status", "value": params };

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    var timer = setInterval(Rotate, 60000);

			
 
				+                } else if (res == 'off') {

			
 
				+                    clearInterval(timer);

			
 
				+                    $("#motor_rpm_status").text('');

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+

			
 
				+        function Rotate() {

			
 
				+            $.get('/peel', '', function (res) {

			
 
				+                //console.log(res.peeling);

			
 
				+                $("#motor_rpm_status").text(res.peeling + ' rpm(每1分鐘更新一次)');

			
 
				+            }, 'json');

			
 
				+

			
 
				+            setTimeout(function () { location.reload(); }, 500);

			
 
				+        };

			
 
				+

			
 
				+        // 馬達 反轉

			
 
				+        function tankMotor_Reverse() {

			
 
				+            $("#input").attr('placeholder');

			
 
				+            var tankMotor_now = ($('#motor_rpm_data').attr('placeholder'))*-1

			
 
				+            console.log('tankMotor_now: ' + tankMotor_now)

			
 
				+            tankMotor(String(tankMotor_now))

			
 
				+            setTimeout(function () { location.reload(); }, 3*1000);

			
 
				+        }

			
 
				+

			
 
				+        // 噴嘴

			
 
				+        function tankNozzle(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var status = "off";

			
 
				+                var check = $("input[name=tank_nozzle_status]:checked");

			
 
				+                //大於0代表有被選中

			
 
				+                if (check.length > 0) {

			
 
				+                    status = "on";

			
 
				+                    $("#cmn-toggle-38").prop('checked', false);

			
 
				+                    if (!confirm("你確定要開啟噴嘴嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                } else {

			
 
				+                    $("#cmn-toggle-38").prop('checked', true);

			
 
				+                    if (!confirm("你確定要關閉噴嘴嗎?")) {

			
 
				+                        return false;

			
 
				+                    };

			
 
				+                };

			
 
				+                var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": status };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-38").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-38").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+    </script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        function changeUpdate() {

			
 
				+            clearInterval(WebUpdate_set);

			
 
				+

			
 
				+            var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+            console.log('webupdate_time' + webupdate_time)

			
 
				+            WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , webupdate_time * 1000);

			
 
				+        }

			
 
				+    </script>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        

			
 
				+        <h4>致動器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">

			
 
				+            <tr>

			
 
				+                <td style="color:red;">Valve</td>

			
 
				+                <td>真空吸料機</td>

			
 
				+                <td>馬達</td>

			
 
				+                <td>噴嘴</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <span style="color:#C0C0C0;">off</span>

			
 
				+                    <span style="color:#008CBA;">on</span>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-34">

			
 
				+                        </div>

			
 
				+                        <div class="switch text-center">

			
 
				+                            {% if tank_vacuum== 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-35" checked

			
 
				+                                name="tank_vacuum_status" value="ON" onclick="tankVacuum()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-35"

			
 
				+                                name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-35"></label>

			
 
				+                        </div>

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-36">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM<br>

			
 
				+                    <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-37">

			
 
				+                        </div>

			
 
				+                        <div class="switch text-center">

			
 
				+                            {% if tank_nozzle == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-38" checked

			
 
				+                                name="tank_nozzle_status" value="ON" onclick="tankNozzle()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-38"

			
 
				+                                name="tank_nozzle_status" value="OFF" onclick="tankNozzle()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-38"></label>

			
 
				+                        </div>

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-39">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#008CBA;"><b>ON</b></span></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>

			
 
				+                <td>

			
 
				+                    <input type="button" class="input-button-on" value="20" onclick="tankMotor('20')">

			
 
				+                    <input type="button" class="input-button-on" value="Rev." onclick="tankMotor_Reverse()">

			
 
				+                </td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="tankNozzle('1')"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankNozzle('0')"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>感測器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3">

			
 
				+            <tr>

			
 
				+                <td style="background-color:#f3f3f3">生豆高度</td>

			
 
				+                <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>

			
 
				+                <td style="background-color:#f3f3f3">顏色感測器</td>

			
 
				+                <td><span id="Color_t_status">{{tank_color.color}}</span> (單位)</td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+        

			
 
				+    </div>

			
 
				+</body>

			
 
				+

			
 
				+<script>

			
 
				+    // jQuery 更新感測器致動器狀態

			
 
				+    function WebUpdate(ptid) {

			
 
				+        $.get('/loading/S' + ptid, '', function (res) {

			
 
				+            if (res.tank_vacuum == 0) {

			
 
				+                $("#cmn-toggle-35").prop('checked', false);

			
 
				+            } else if (res.tank_vacuum == 1) {

			
 
				+                $("#cmn-toggle-35").prop('checked', true);

			
 
				+            }

			
 
				+

			
 
				+            if (res.tank_nozzle == 0) {

			
 
				+                $("#cmn-toggle-38").prop('checked', false);

			
 
				+            } else if (res.tank_nozzle == 1) {

			
 
				+                $("#cmn-toggle-38").prop('checked', true);

			
 
				+            }

			
 
				+

			
 
				+            $("#motor_rpm_data").attr("placeholder", res.tank_motor);

			
 
				+            $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+            $("#Color_t_status").text(res.color);

			
 
				+            

			
 
				+        }, 'json');

			
 
				+    }

			
 
				+</script>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/ctrl_DI_Vacuum.html
+++ b/app/templates/ctrl_DI_Vacuum.html
--- a/app/templates/ctrl_DO_Vacuum.html
+++ b/app/templates/ctrl_DO_Vacuum.html
--- a/app/templates/ctrl_D_Blower.html
+++ b/app/templates/ctrl_D_Blower.html
@@ -1,358 +1,358 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_Blower_title").text('乾燥槽 D' + tid + ' 鼓風機')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_鼓風機');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_Blower_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 鼓風機
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    鼓風機 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_blower == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_blower == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 鼓風機</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankBlower_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 鼓風機</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankBlower_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_blower == 0) {
			
 
				-                        $("#cmn-toggle-23").prop('checked', false);
			
 
				-                    } else if (res.tank_blower == 1) {
			
 
				-                        $("#cmn-toggle-23").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_Blower_title").text('乾燥槽 D' + tid + ' 鼓風機')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_鼓風機');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_Blower_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 鼓風機

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    鼓風機 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_blower == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_blower == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 鼓風機</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankBlower_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 鼓風機</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankBlower_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_blower == 0) {

			
 
				+                        $("#cmn-toggle-23").prop('checked', false);

			
 
				+                    } else if (res.tank_blower == 1) {

			
 
				+                        $("#cmn-toggle-23").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_DiskValve.html
+++ b/app/templates/ctrl_D_DiskValve.html
@@ -1,337 +1,337 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_DiskValve_title").text('乾燥槽 D' + tid + ' 蝴蝶閥')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_蝴蝶閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_DiskValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 蝴蝶閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    蝴蝶閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_diskvalve == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_diskvalve == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 蝴蝶閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankDiskValve_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 蝴蝶閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankDiskValve_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_DiskValve_title").text('乾燥槽 D' + tid + ' 蝴蝶閥')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_蝴蝶閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_DiskValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 蝴蝶閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    蝴蝶閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_diskvalve == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_diskvalve == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 蝴蝶閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankDiskValve_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 蝴蝶閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankDiskValve_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_Heater1.html
+++ b/app/templates/ctrl_D_Heater1.html
@@ -1,360 +1,360 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_Heater1_title").text('乾燥槽 D' + tid + ' 加熱器 1')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_加熱器 1');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-    
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_Heater1_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 加熱器 1
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    加熱器 1 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_heater1 == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_heater1 == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 加熱器 1</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankHeater1_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 加熱器 1</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankHeater1_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-26").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-26").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-<!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				--->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_Heater1_title").text('乾燥槽 D' + tid + ' 加熱器 1')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_加熱器 1');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+    

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_Heater1_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 加熱器 1

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    加熱器 1 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_heater1 == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_heater1 == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 加熱器 1</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankHeater1_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 加熱器 1</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankHeater1_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-26").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-26").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+<!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+-->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_Heater2.html
+++ b/app/templates/ctrl_D_Heater2.html
@@ -1,358 +1,358 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_Heater2_title").text('乾燥槽 D' + tid + ' 加熱器 2')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_加熱器 2');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_Heater2_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 加熱器 2
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    加熱器 2 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_heater2 == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_heater2 == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 加熱器 2</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankHeater2_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 加熱器 2</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankHeater2_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-29").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-29").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_Heater2_title").text('乾燥槽 D' + tid + ' 加熱器 2')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_加熱器 2');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_Heater2_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 加熱器 2

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    加熱器 2 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_heater2 == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_heater2 == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 加熱器 2</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankHeater2_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 加熱器 2</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankHeater2_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-29").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-29").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_Motor.html
+++ b/app/templates/ctrl_D_Motor.html
@@ -1,348 +1,348 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_Motor_title").text('乾燥槽 D' + tid + ' 馬達')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_馬達');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_Motor_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 馬達
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    馬達 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if (50 >= tank_motor > 0) or (0 > tank_motor >= -50) %}
			
 
				-                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_motor}}</strong></span>&nbsp;rpm
			
 
				-                    {% elif tank_motor == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:20px;"><strong>0</strong></span>&nbsp;rpm
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定馬達 20 rpm</td>
			
 
				-                <td><input type="button" value="ON" onclick="ChangeMotor_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定馬達 0 rpm</td>
			
 
				-                <td><input type="button" value="OFF" onclick="ChangeMotor_OFF()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定馬達轉速</td>   
			
 
				-                <td>
			
 
				-                    <input id="motor_rpm_data" type="text" placeholder="{{tank_motor}}" style="width: 40px;">           
			
 
				-                    <span>&nbsp;rpm (±50)</span>
			
 
				-                    <span id="motor_rpm_status" style="color:red;"></span>
			
 
				-                    <input type="button" value="送出" name="tank_motor_status" onclick="ChangeMotor()">
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_Motor_title").text('乾燥槽 D' + tid + ' 馬達')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_馬達');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_Motor_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 馬達

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    馬達 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if (50 >= tank_motor > 0) or (0 > tank_motor >= -50) %}

			
 
				+                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_motor}}</strong></span>&nbsp;rpm

			
 
				+                    {% elif tank_motor == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:20px;"><strong>0</strong></span>&nbsp;rpm

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定馬達 20 rpm</td>

			
 
				+                <td><input type="button" value="ON" onclick="ChangeMotor_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定馬達 0 rpm</td>

			
 
				+                <td><input type="button" value="OFF" onclick="ChangeMotor_OFF()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定馬達轉速</td>   

			
 
				+                <td>

			
 
				+                    <input id="motor_rpm_data" type="text" placeholder="{{tank_motor}}" style="width: 40px;">           

			
 
				+                    <span>&nbsp;rpm (±50)</span>

			
 
				+                    <span id="motor_rpm_status" style="color:red;"></span>

			
 
				+                    <input type="button" value="送出" name="tank_motor_status" onclick="ChangeMotor()">

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_SolenoidDisinfect.html
+++ b/app/templates/ctrl_D_SolenoidDisinfect.html
@@ -1,337 +1,337 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 消毒電磁閥')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_消毒電磁閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 消毒電磁閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    桶內消毒電磁閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_solenoid_disinfect == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_solenoid_disinfect == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 桶內消毒電磁閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankSolenoidDisinfect_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 桶內消毒電磁閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankSolenoidDisinfect_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 消毒電磁閥')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_消毒電磁閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 消毒電磁閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    桶內消毒電磁閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_solenoid_disinfect == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_solenoid_disinfect == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 桶內消毒電磁閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankSolenoidDisinfect_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 桶內消毒電磁閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankSolenoidDisinfect_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_SolenoidWater.html
+++ b/app/templates/ctrl_D_SolenoidWater.html
@@ -1,340 +1,340 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_SolenoidWater_title").text('乾燥槽 D' + tid + ' 排水電磁閥')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_排水電磁閥')
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_SolenoidWater_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 排水電磁閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    排水電磁閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_solenoid_water == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_solenoid_water == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 排水電磁閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankSolenoidWater_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 排水電磁閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankSolenoidWater_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_solenoid_water == 0) {
			
 
				-                        $("#cmn-toggle-17").prop('checked', false);
			
 
				-                    } else if (res.tank_solenoid_water == 1) {
			
 
				-                        $("#cmn-toggle-17").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_SolenoidWater_title").text('乾燥槽 D' + tid + ' 排水電磁閥')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_排水電磁閥')

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_SolenoidWater_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 排水電磁閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    排水電磁閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_solenoid_water == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_solenoid_water == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 排水電磁閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankSolenoidWater_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 排水電磁閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankSolenoidWater_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_solenoid_water == 0) {

			
 
				+                        $("#cmn-toggle-17").prop('checked', false);

			
 
				+                    } else if (res.tank_solenoid_water == 1) {

			
 
				+                        $("#cmn-toggle-17").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_Temp.html
+++ b/app/templates/ctrl_D_Temp.html
@@ -1,471 +1,474 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_Temp_title").text('乾燥槽 D' + tid + ' 設定溫度')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_設定溫度');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_Temp_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 設定溫度
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    目前溫度
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_temp1 >= 0 %}
			
 
				-                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_temp1}}</strong></span>&nbsp;℃
			
 
				-                    {% elif tank_temp1 == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:20px;"><strong>未設定溫度</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    溫控開關 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_temp1_enable == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_temp1_enable == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 / 關閉 溫控開關</td>
			
 
				-                <td>
			
 
				-                    <input type="button" value="ON" onclick="tankTemp1Enable_ON()"> / 
			
 
				-                    <input type="button" value="OFF" onclick="tankTemp1Enable_OFF()">
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定溫度 30℃</td>
			
 
				-                <td><input type="button" value="ON" onclick="ChangeTemp1_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定溫度 25℃</td>
			
 
				-                <td><input type="button" value="OFF" onclick="ChangeTemp1_OFF()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="2">
			
 
				-                    <strong>
			
 
				-                        溫度權重設定：
			
 
				-                        桶內溫度：&nbsp;<input id="Temp_Weights_SHT11" type="text" value="0.5" style="width: 40px;">&nbsp;+&nbsp;
			
 
				-                        咖啡生豆溫度：&nbsp;<input id="Temp_Weights_Soil" type="text" value="0.5" style="width: 40px;" >
			
 
				-                    </strong>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    設定溫度
			
 
				-                </td>   
			
 
				-                
			
 
				-                <td>
			
 
				-                    <input id="tank_temp1_data" type="text" placeholder="{{tank_temp1}}" style="width: 40px;">&nbsp;℃
			
 
				-                    <!--<span id="tank_temp1_status" style="color:red;"></span>-->
			
 
				-                    <input type="button" value="送出" name="tank_temp1_status" onclick="setTemp1_func()"><br>
			
 
				-                    <span id="testing_Temp_Weight" style="color: #f00;"></span>
			
 
				-
			
 
				-                    <script>
			
 
				-                        var setTemp_process = 0;
			
 
				-                        
			
 
				-                        function setTemp1_func(){
			
 
				-                            var temp_data = $("input[id=tank_temp1_data]").val();
			
 
				-                            console.log('設定溫度: ', temp_data)
			
 
				-                            var Temp_Weights_SHT11 = parseFloat($('#Temp_Weights_SHT11').val());
			
 
				-                            var Temp_Weights_Soil = parseFloat($('#Temp_Weights_Soil').val());
			
 
				-                            setTemp1()
			
 
				-                            var temp_interval = setInterval(checkTemp, 5000);
			
 
				-
			
 
				-                            function checkTemp(){
			
 
				-                                if (setTemp_process == 1) {
			
 
				-                                    return;
			
 
				-                                }
			
 
				-
			
 
				-                                setTemp_process = 1;
			
 
				-                                $.ajax({
			
 
				-                                    async:false,
			
 
				-                                    type:"GET",
			
 
				-                                    url:"/dry_Temp/"+tank_num+"/"+Temp_Weights_SHT11+"/"+Temp_Weights_Soil+"/"+temp_data,
			
 
				-                                    dataType:"JSON",
			
 
				-                                    success:function(response){
			
 
				-                                        // 0915 var present_SHT11_Temp = parseFloat(response.SHT11_Temp)
			
 
				-                                        // 0915 var present_SOIL_Temp = parseFloat(response.Soil_Temp)
			
 
				-                                        // Math.round 會將數值四捨五入至整數位
			
 
				-                                        // 所以 Math.round(x * 100)/100 就可以取小數點第二位
			
 
				-                                        // 0915 present_temp = Math.round((present_SHT11_Temp*Temp_Weights_SHT11 + present_SOIL_Temp*Temp_Weights_Soil)/(Temp_Weights_SHT11+Temp_Weights_Soil)*100) / 100
			
 
				-                                        
			
 
				-                                        console.log('目前溫度(加權):', response.present_temp)
			
 
				-                                        if (response.TempUpTime == '指定溫度過高, 持續升溫中') {
			
 
				-                                            $('#testing_Temp_Weight').text('目前溫度(加權):' + response.present_temp + '℃, 指定溫度過高, 持續升溫中')
			
 
				-                                        } else {
			
 
				-                                            $('#testing_Temp_Weight').text('目前溫度(加權):' + response.present_temp + response.TempUpTime)
			
 
				-                                        }
			
 
				-                                        $('#SHT11_Temp_status').text(response.SHT11_Temp);
			
 
				-                                        $('#SHT11_Humidity_status').text(response.SHT11_Humidity);
			
 
				-                                        $('#soil_Temp_status').text(response.Soil_Temp);
			
 
				-                                        $('#soil_Humidity_status').text(response.Soil_Humidity);
			
 
				-                                        
			
 
				-
			
 
				-                                        if (response.present_temp >= temp_data) {
			
 
				-                                            clearInterval(temp_interval);
			
 
				-                                            $('#testing_Temp_Weight').text('已達指定溫度, 關閉加熱裝置')
			
 
				-                                            console.log('已達指定溫度, 關閉溫控開關')
			
 
				-                                            var time = new Date();
			
 
				-                                            while ((new Date() - time) < 3 * 1000) { };
			
 
				-
			
 
				-                                            tankTemp1Enable_OFF()
			
 
				-                                            tankBlower_OFF()
			
 
				-                                            tankHeater1_OFF()
			
 
				-                                            tankHeater2_OFF()
			
 
				-
			
 
				-                                            $('#testing_Temp_Weight').text('')
			
 
				-                                        }
			
 
				-                                        setTemp_process = 0;
			
 
				-                                    },
			
 
				-                                    error:function(thrownError){
			
 
				-                                        console.log('dry_Temp_Error: ', thrownError)
			
 
				-                                        setTemp_process = 0;
			
 
				-                                    }
			
 
				-                                });
			
 
				-                            }
			
 
				-                        };
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_Temp_title").text('乾燥槽 D' + tid + ' 設定溫度')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_設定溫度');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_Temp_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 設定溫度

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    目前溫度

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_temp1 >= 0 %}

			
 
				+                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_temp1}}</strong></span>&nbsp;℃

			
 
				+                    {% elif tank_temp1 == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:20px;"><strong>未設定溫度</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    溫控開關 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_temp1_enable == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_temp1_enable == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 / 關閉 溫控開關</td>

			
 
				+                <td>

			
 
				+                    <input type="button" value="ON" onclick="tankTemp1Enable_ON()"> / 

			
 
				+                    <input type="button" value="OFF" onclick="tankTemp1Enable_OFF()">

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定溫度 30℃</td>

			
 
				+                <td><input type="button" value="ON" onclick="ChangeTemp1_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定溫度 25℃</td>

			
 
				+                <td><input type="button" value="OFF" onclick="ChangeTemp1_OFF()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="2">

			
 
				+                    <strong>

			
 
				+                        溫度權重設定：

			
 
				+                        桶內溫度：&nbsp;<input id="Temp_Weights_SHT11" type="text" value="0.5" style="width: 40px;">&nbsp;+&nbsp;

			
 
				+                        咖啡生豆溫度：&nbsp;<input id="Temp_Weights_Soil" type="text" value="0.5" style="width: 40px;" >

			
 
				+                    </strong>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    設定溫度

			
 
				+                </td>   

			
 
				+                

			
 
				+                <td>

			
 
				+                    <span id="tank_temp1_status" style="color:red;"></span>

			
 
				+                    <input id="tank_temp1_data" type="text" placeholder="{{tank_temp1}}" style="width: 40px;">&nbsp;℃, 持續&nbsp;

			
 
				+                    <input id="tank_temp_duration" type="text" placeholder="" style="width: 40px;">&nbsp;分鐘&nbsp;

			
 
				+                    <input type="button" value="送出" name="tank_temp1_status" onclick="setTemp1_func()"><br>

			
 
				+                    <span id="testing_Temp_Weight" style="color: #f00;"></span>

			
 
				+

			
 
				+                    <script>

			
 
				+                        var setTemp_process = 0;

			
 
				+                        

			
 
				+                        function setTemp1_func(){

			
 
				+                            var temp_data = $("input[id=tank_temp1_data]").val();

			
 
				+                            console.log('設定溫度: ', temp_data)

			
 
				+                            var temp_duration = $("input[id=tank_temp_duration]").val();

			
 
				+                            console.log('持溫時間: ', temp_duration)

			
 
				+                            var Temp_Weights_SHT11 = parseFloat($('#Temp_Weights_SHT11').val());

			
 
				+                            var Temp_Weights_Soil = parseFloat($('#Temp_Weights_Soil').val());

			
 
				+                            setTemp1(temp_data, temp_duration)

			
 
				+                            // var temp_interval = setInterval(checkTemp, 5000);

			
 
				+

			
 
				+                            function checkTemp(){

			
 
				+                                if (setTemp_process == 1) {

			
 
				+                                    return;

			
 
				+                                }

			
 
				+

			
 
				+                                setTemp_process = 1;

			
 
				+                                $.ajax({

			
 
				+                                    async:false,

			
 
				+                                    type:"GET",

			
 
				+                                    url:"/dry_Temp/"+tank_num+"/"+Temp_Weights_SHT11+"/"+Temp_Weights_Soil+"/"+temp_data,

			
 
				+                                    dataType:"JSON",

			
 
				+                                    success:function(response){

			
 
				+                                        // 0915 var present_SHT11_Temp = parseFloat(response.SHT11_Temp)

			
 
				+                                        // 0915 var present_SOIL_Temp = parseFloat(response.Soil_Temp)

			
 
				+                                        // Math.round 會將數值四捨五入至整數位

			
 
				+                                        // 所以 Math.round(x * 100)/100 就可以取小數點第二位

			
 
				+                                        // 0915 present_temp = Math.round((present_SHT11_Temp*Temp_Weights_SHT11 + present_SOIL_Temp*Temp_Weights_Soil)/(Temp_Weights_SHT11+Temp_Weights_Soil)*100) / 100

			
 
				+                                        

			
 
				+                                        console.log('目前溫度(加權):', response.present_temp)

			
 
				+                                        if (response.TempUpTime == '指定溫度過高, 持續升溫中') {

			
 
				+                                            $('#testing_Temp_Weight').text('目前溫度(加權):' + response.present_temp + '℃, 指定溫度過高, 持續升溫中')

			
 
				+                                        } else {

			
 
				+                                            $('#testing_Temp_Weight').text('目前溫度(加權):' + response.present_temp + response.TempUpTime)

			
 
				+                                        }

			
 
				+                                        $('#SHT11_Temp_status').text(response.SHT11_Temp);

			
 
				+                                        $('#SHT11_Humidity_status').text(response.SHT11_Humidity);

			
 
				+                                        $('#soil_Temp_status').text(response.Soil_Temp);

			
 
				+                                        $('#soil_Humidity_status').text(response.Soil_Humidity);

			
 
				+                                        

			
 
				+

			
 
				+                                        if (response.present_temp >= temp_data) {

			
 
				+                                            clearInterval(temp_interval);

			
 
				+                                            $('#testing_Temp_Weight').text('已達指定溫度, 關閉加熱裝置')

			
 
				+                                            console.log('已達指定溫度, 關閉溫控開關')

			
 
				+                                            var time = new Date();

			
 
				+                                            while ((new Date() - time) < 3 * 1000) { };

			
 
				+

			
 
				+                                            tankTemp1Enable_OFF()

			
 
				+                                            tankBlower_OFF()

			
 
				+                                            tankHeater1_OFF()

			
 
				+                                            tankHeater2_OFF()

			
 
				+

			
 
				+                                            $('#testing_Temp_Weight').text('')

			
 
				+                                        }

			
 
				+                                        setTemp_process = 0;

			
 
				+                                    },

			
 
				+                                    error:function(thrownError){

			
 
				+                                        console.log('dry_Temp_Error: ', thrownError)

			
 
				+                                        setTemp_process = 0;

			
 
				+                                    }

			
 
				+                                });

			
 
				+                            }

			
 
				+                        };

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆溫度：<span id="soil_Temp_status">{{tank_Soil.soil_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    咖啡生豆濕度：<span id="soil_Humidity_status">{{tank_Soil.soil_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_TempEnable.html
+++ b/app/templates/ctrl_D_TempEnable.html
@@ -1,339 +1,339 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_TempEnable_title").text('乾燥槽 D' + tid + ' 溫控開關')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_溫控開關');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_TempEnable_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 溫控開關
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    溫控開關 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_temp1_enable == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_temp1_enable == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 溫控開關</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankTemp1Enable_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 溫控開關</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankTemp1Enable_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_TempEnable_title").text('乾燥槽 D' + tid + ' 溫控開關')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title").text('D' + tid + ' 乾燥槽_溫控開關');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_TempEnable_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            乾燥槽 D_ 溫控開關

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    溫控開關 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_temp1_enable == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_temp1_enable == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 溫控開關</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankTemp1Enable_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 溫控開關</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankTemp1Enable_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_ThreeWayValve.html
+++ b/app/templates/ctrl_D_ThreeWayValve.html
@@ -1,336 +1,325 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/dry_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 三通閥')
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
			
 
				-            $("#coffee_title").text('D' + tid + ' 乾燥槽_三通閥');
			
 
				-        });
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-    
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥槽 D_ 三通閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    三通閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_threewayvalve == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_threewayvalve == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 三通閥 吸料</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankThreeWayValve_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 三通閥 排氣</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankThreeWayValve_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-08").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-08").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 三通閥')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title_pc").text('D' + tid + ' 乾燥槽_三通閥');

			
 
				+            $("#coffee_title_phone").text('D' + tid + ' _三通閥');

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    三通閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_threewayvalve == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_threewayvalve == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 三通閥 吸料</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankThreeWayValve_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 三通閥 排氣</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankThreeWayValve_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-08").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-08").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_D_ThreeWayValveBean.html
+++ b/app/templates/ctrl_D_ThreeWayValveBean.html
@@ -0,0 +1,308 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 測豆三通閥')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title_pc").text('D' + tid + ' 乾燥槽_測豆三通閥');

			
 
				+            $("#coffee_title_phone").text('D' + tid + ' _測豆三通閥');

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    測豆三通閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_threewayvalve_bean == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_threewayvalve_bean == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 測豆三通閥 吸料</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankThreeWayValveBean('1')"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 測豆三通閥 排氣</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankThreeWayValveBean('0')"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-08").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-08").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/ctrl_D_ThreeWayValveInput.html
+++ b/app/templates/ctrl_D_ThreeWayValveInput.html
@@ -0,0 +1,308 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/dry_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 入料三通閥')

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)

			
 
				+            $("#coffee_title_pc").text('D' + tid + ' 乾燥槽_入料三通閥');

			
 
				+            $("#coffee_title_phone").text('D' + tid + ' _入料三通閥');

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    入料三通閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_threewayvalve_input == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_threewayvalve_input == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 入料三通閥 吸料</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankThreeWayValveInput('1')"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 入料三通閥 排氣</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankThreeWayValveInput('0')"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-08").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-08").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/ctrl_D_Vacuum.html
+++ b/app/templates/ctrl_D_Vacuum.html
--- a/app/templates/ctrl_FI_Vacuum.html
+++ b/app/templates/ctrl_FI_Vacuum.html
--- a/app/templates/ctrl_FO_Vacuum.html
+++ b/app/templates/ctrl_FO_Vacuum.html
--- a/app/templates/ctrl_F_DiskValve.html
+++ b/app/templates/ctrl_F_DiskValve.html
@@ -1,339 +1,339 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_DiskValve_title").text('發酵槽 F' + tid + ' 蝴蝶閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_蝴蝶閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_DiskValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 蝴蝶閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    蝴蝶閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_diskvalve == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_diskvalve == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 蝴蝶閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankDiskValve_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 蝴蝶閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankDiskValve_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_DiskValve_title").text('發酵槽 F' + tid + ' 蝴蝶閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_蝴蝶閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_DiskValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 蝴蝶閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    蝴蝶閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_diskvalve == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_diskvalve == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 蝴蝶閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankDiskValve_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 蝴蝶閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankDiskValve_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_Heater1.html
+++ b/app/templates/ctrl_F_Heater1.html
@@ -1,353 +1,353 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_Heater1_title").text('發酵槽 F' + tid + ' 加熱器 1')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_加熱器 1');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_Heater1_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 加熱器 1
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    加熱器 1 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_heater1 == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_heater1 == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 加熱器 1</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankHeater1_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 加熱器 1</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankHeater1_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-26").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-26").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_Heater1_title").text('發酵槽 F' + tid + ' 加熱器 1')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_加熱器 1');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_Heater1_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 加熱器 1

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    加熱器 1 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_heater1 == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_heater1 == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 加熱器 1</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankHeater1_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 加熱器 1</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankHeater1_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-26").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-26").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_Heater2.html
+++ b/app/templates/ctrl_F_Heater2.html
@@ -1,352 +1,352 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_Heater1_title").text('發酵槽 F' + tid + ' 加熱器 2')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_加熱器 2');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_Heater1_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 加熱器 2
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    加熱器 2 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_heater2 == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_heater2 == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 加熱器 2</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankHeater2_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 加熱器 2</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankHeater2_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater2 == 0) {
			
 
				-                        $("#cmn-toggle-26").prop('checked', false);
			
 
				-                    } else if (res.tank_heater2 == 1) {
			
 
				-                        $("#cmn-toggle-26").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_Heater1_title").text('發酵槽 F' + tid + ' 加熱器 2')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_加熱器 2');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_Heater1_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 加熱器 2

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    加熱器 2 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_heater2 == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_heater2 == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 加熱器 2</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankHeater2_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 加熱器 2</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankHeater2_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater2 == 0) {

			
 
				+                        $("#cmn-toggle-26").prop('checked', false);

			
 
				+                    } else if (res.tank_heater2 == 1) {

			
 
				+                        $("#cmn-toggle-26").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_Motor.html
+++ b/app/templates/ctrl_F_Motor.html
@@ -1,350 +1,350 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_Motor_title").text('發酵槽 F' + tid + ' 馬達')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_馬達');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(tid)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_Motor_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 馬達
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    馬達 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if (50 >= tank_motor > 0) or (0 > tank_motor >= -50) %}
			
 
				-                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_motor}}</strong></span>&nbsp;rpm
			
 
				-                    {% elif tank_motor == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:20px;"><strong>0</strong></span>&nbsp;rpm
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定馬達 20 rpm</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankMotor_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定馬達 0 rpm</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankMotor_OFF()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定馬達轉速</td>   
			
 
				-                <td>
			
 
				-                    <input id="motor_rpm_data" type="text" placeholder="{{tank_motor}}" style="width: 40px;">           
			
 
				-                    <span>&nbsp;rpm (±50)</span>
			
 
				-                    <span id="motor_rpm_status" style="color:red;"></span>
			
 
				-                    <input type="button" value="送出" name="tank_motor_status" onclick="tankMotor()">
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(tid)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(tid) {
			
 
				-                $.get('/loading/F' + tid, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_Motor_title").text('發酵槽 F' + tid + ' 馬達')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_馬達');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(tid)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_Motor_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 馬達

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    馬達 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if (50 >= tank_motor > 0) or (0 > tank_motor >= -50) %}

			
 
				+                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_motor}}</strong></span>&nbsp;rpm

			
 
				+                    {% elif tank_motor == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:20px;"><strong>0</strong></span>&nbsp;rpm

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定馬達 20 rpm</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankMotor_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定馬達 0 rpm</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankMotor_OFF()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定馬達轉速</td>   

			
 
				+                <td>

			
 
				+                    <input id="motor_rpm_data" type="text" placeholder="{{tank_motor}}" style="width: 40px;">           

			
 
				+                    <span>&nbsp;rpm (±50)</span>

			
 
				+                    <span id="motor_rpm_status" style="color:red;"></span>

			
 
				+                    <input type="button" value="送出" name="tank_motor_status" onclick="tankMotor()">

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(tid)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(tid) {

			
 
				+                $.get('/loading/F' + tid, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_PumpSensor.html
+++ b/app/templates/ctrl_F_PumpSensor.html
@@ -1,426 +1,426 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_ThreeWayValve_title").text('發酵槽 F' + tid + ' 感測器抽水雙核隔膜泵')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_感測器抽水雙核隔膜泵');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>    
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 感測器抽水雙核隔膜泵
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    感測器抽水雙核隔膜泵 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_pump_sensor == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_pump_sensor == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 感測器抽水雙核隔膜泵</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankPumpSensor_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 感測器抽水雙核隔膜泵</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankPumpSensor_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td>循環抽水</td>
			
 
				-                <td>
			
 
				-                    抽水
			
 
				-                    <input name="testing_tank_pump_on" id="testing_tank_pump_on" value="10" type="text" style="width: 40px;">秒<br>
			
 
				-                    關閉
			
 
				-                    <input name="testing_tank_pump_off" id="testing_tank_pump_off" value="10" type="text" style="width: 40px;">秒
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="WATER_testing_START()">水質測量 ON</button>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="WATER_testing_STOP()">水質測量 OFF</button>
			
 
				-                    <script>
			
 
				-                        var watertesting_process = 0;
			
 
				-
			
 
				-                        function WATER_testing_START(){
			
 
				-                            var watertesting_interval = setInterval(PumpSensor, 5000)
			
 
				-                        };
			
 
				-
			
 
				-                        function PumpSensor(){
			
 
				-                                if (watertesting_process == 1) {
			
 
				-                                    return;
			
 
				-                                }
			
 
				-
			
 
				-                                watertesting_process = 1;
			
 
				-                                $.ajax({
			
 
				-                                    async:false,
			
 
				-                                    type:"GET",
			
 
				-                                    url:"/ferment_watertesting_" + tank_num,
			
 
				-                                    dataType:"JSON",
			
 
				-                                    success:function(response){
			
 
				-                                        // var present_PH = response.PH
			
 
				-                                        $('#PH').text(response.PH)
			
 
				-                                        console.log(response.PH)
			
 
				-                                        $('#ORP').text(response.ORP)
			
 
				-                                        console.log(response.ORP)
			
 
				-                                        $('#DO').text(response.DO)
			
 
				-                                        console.log(response.DO)
			
 
				-                                        $('#EC').text(response.EC)
			
 
				-                                        console.log(response.EC)
			
 
				-
			
 
				-                                        // aaa tankPumpSensor_ON()
			
 
				-                                        console.log('tankPumpSensor_ON')
			
 
				-
			
 
				-                                        var testing_tank_pump_on = $("input[name=testing_tank_pump_on]").val();
			
 
				-                                        var time = new Date();
			
 
				-                                        while ((new Date() - time) < testing_tank_pump_on * 1000) { };
			
 
				-
			
 
				-                                        // aaa tankPumpSensor_OFF()
			
 
				-                                        console.log('tankPumpSensor_OFF')
			
 
				-
			
 
				-                                        var testing_tank_pump_off = $("input[name=testing_tank_pump_off]").val();
			
 
				-                                        var time = new Date();
			
 
				-                                        while ((new Date() - time) < testing_tank_pump_off * 1000) { };
			
 
				-                                    
			
 
				-                                        watertesting_process = 0;
			
 
				-                                    },
			
 
				-                                    error:function(thrownError){
			
 
				-                                        console.log("Error: " + thrownError)
			
 
				-                                        watertesting_process = 0;
			
 
				-                                    }
			
 
				-                                });
			
 
				-                            }; 
			
 
				-
			
 
				-                        function WATER_testing_STOP(){
			
 
				-                            clearInterval(PumpSensor);
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-                <tr>
			
 
				-                    <td colspan="3">
			
 
				-                        PH 酸鹼度：<spap id="PH">{{PH}}</spap>
			
 
				-                    </td>
			
 
				-                </tr>
			
 
				-                <tr>
			
 
				-                    <td colspan="3">
			
 
				-                        ORP 氧化還原電位：<spap id="ORP">{{ORP}}</spap>&nbsp;mV
			
 
				-                    </td>
			
 
				-                </tr>
			
 
				-                <tr>
			
 
				-                    <td colspan="3">
			
 
				-                        DO 溶氧量：<spap id="DO">{{DO}}</spap>&nbsp;%
			
 
				-                    </td>
			
 
				-                </tr>
			
 
				-                <tr>
			
 
				-                    <td colspan="3">
			
 
				-                        EC 電導度：<spap id="EC">{{EC}}</spap>&nbsp;μS/cm
			
 
				-                    </td>
			
 
				-                </tr>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_ThreeWayValve_title").text('發酵槽 F' + tid + ' 感測器抽水雙核隔膜泵')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_感測器抽水雙核隔膜泵');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>    

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 感測器抽水雙核隔膜泵

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    感測器抽水雙核隔膜泵 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_pump_sensor == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_pump_sensor == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 感測器抽水雙核隔膜泵</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankPumpSensor_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 感測器抽水雙核隔膜泵</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankPumpSensor_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td>循環抽水</td>

			
 
				+                <td>

			
 
				+                    抽水

			
 
				+                    <input name="testing_tank_pump_on" id="testing_tank_pump_on" value="10" type="text" style="width: 40px;">秒<br>

			
 
				+                    關閉

			
 
				+                    <input name="testing_tank_pump_off" id="testing_tank_pump_off" value="10" type="text" style="width: 40px;">秒

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="WATER_testing_START()">水質測量 ON</button>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="WATER_testing_STOP()">水質測量 OFF</button>

			
 
				+                    <script>

			
 
				+                        var watertesting_process = 0;

			
 
				+

			
 
				+                        function WATER_testing_START(){

			
 
				+                            var watertesting_interval = setInterval(PumpSensor, 5000)

			
 
				+                        };

			
 
				+

			
 
				+                        function PumpSensor(){

			
 
				+                                if (watertesting_process == 1) {

			
 
				+                                    return;

			
 
				+                                }

			
 
				+

			
 
				+                                watertesting_process = 1;

			
 
				+                                $.ajax({

			
 
				+                                    async:false,

			
 
				+                                    type:"GET",

			
 
				+                                    url:"/ferment_watertesting_" + tank_num,

			
 
				+                                    dataType:"JSON",

			
 
				+                                    success:function(response){

			
 
				+                                        // var present_PH = response.PH

			
 
				+                                        $('#PH').text(response.PH)

			
 
				+                                        console.log(response.PH)

			
 
				+                                        $('#ORP').text(response.ORP)

			
 
				+                                        console.log(response.ORP)

			
 
				+                                        $('#DO').text(response.DO)

			
 
				+                                        console.log(response.DO)

			
 
				+                                        $('#EC').text(response.EC)

			
 
				+                                        console.log(response.EC)

			
 
				+

			
 
				+                                        // aaa tankPumpSensor_ON()

			
 
				+                                        console.log('tankPumpSensor_ON')

			
 
				+

			
 
				+                                        var testing_tank_pump_on = $("input[name=testing_tank_pump_on]").val();

			
 
				+                                        var time = new Date();

			
 
				+                                        while ((new Date() - time) < testing_tank_pump_on * 1000) { };

			
 
				+

			
 
				+                                        // aaa tankPumpSensor_OFF()

			
 
				+                                        console.log('tankPumpSensor_OFF')

			
 
				+

			
 
				+                                        var testing_tank_pump_off = $("input[name=testing_tank_pump_off]").val();

			
 
				+                                        var time = new Date();

			
 
				+                                        while ((new Date() - time) < testing_tank_pump_off * 1000) { };

			
 
				+                                    

			
 
				+                                        watertesting_process = 0;

			
 
				+                                    },

			
 
				+                                    error:function(thrownError){

			
 
				+                                        console.log("Error: " + thrownError)

			
 
				+                                        watertesting_process = 0;

			
 
				+                                    }

			
 
				+                                });

			
 
				+                            }; 

			
 
				+

			
 
				+                        function WATER_testing_STOP(){

			
 
				+                            clearInterval(PumpSensor);

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+                <tr>

			
 
				+                    <td colspan="3">

			
 
				+                        PH 酸鹼度：<spap id="PH">{{PH}}</spap>

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+                <tr>

			
 
				+                    <td colspan="3">

			
 
				+                        ORP 氧化還原電位：<spap id="ORP">{{ORP}}</spap>&nbsp;mV

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+                <tr>

			
 
				+                    <td colspan="3">

			
 
				+                        DO 溶氧量：<spap id="DO">{{DO}}</spap>&nbsp;%

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+                <tr>

			
 
				+                    <td colspan="3">

			
 
				+                        EC 電導度：<spap id="EC">{{EC}}</spap>&nbsp;μS/cm

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_SolenoidDisinfect.html
+++ b/app/templates/ctrl_F_SolenoidDisinfect.html
@@ -1,337 +1,337 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_SolenoidDisinfect_title").text('發酵槽 F' + tid + ' 桶內消毒電磁閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_桶內消毒電磁閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_SolenoidDisinfect_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 桶內消毒電磁閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    桶內消毒電磁閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_solenoid_tank_disinfect == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_solenoid_tank_disinfect == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 桶內消毒電磁閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankSolenoidDisinfect_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 桶內消毒電磁閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankSolenoidDisinfect_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_SolenoidDisinfect_title").text('發酵槽 F' + tid + ' 桶內消毒電磁閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_桶內消毒電磁閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_SolenoidDisinfect_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 桶內消毒電磁閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    桶內消毒電磁閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_solenoid_tank_disinfect == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_solenoid_tank_disinfect == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 桶內消毒電磁閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankSolenoidDisinfect_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 桶內消毒電磁閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankSolenoidDisinfect_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_SolenoidOuterWater.html
+++ b/app/templates/ctrl_F_SolenoidOuterWater.html
@@ -1,399 +1,399 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_SolenoidOuterWater_title").text('發酵槽 F' + tid + ' 保溫夾層進水電磁閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_保溫夾層進水電磁閥')
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_SolenoidOuterWater_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 保溫夾層進水電磁閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    保溫夾層進水電磁閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_solenoid_outer_water == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_solenoid_outer_water == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 保溫夾層進水電磁閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="outerSolenoidWater_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 保溫夾層進水電磁閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="outerSolenoidWater_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                {% if WaterLevel == '1' %}
			
 
				-                <span id="WaterLevel_t_status">保溫夾層：滿水位</span>
			
 
				-                {% elif WaterLevel == '0' %}
			
 
				-                <span id="WaterLevel_t_status">保溫夾層：未達滿水高度</span>
			
 
				-                {% else %}
			
 
				-                <span id="WaterLevel_t_status">FERMENT SENSOR WATERLEVEL ERROR</span>
			
 
				-                {% endif %}
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="OuterWaterIn()">入水至保溫夾層滿水位</button>
			
 
				-                    <script>
			
 
				-                        function OuterWaterIn(){
			
 
				-                            var OuterWaterIn_process = 0;
			
 
				-                            var OuterWaterIn_interval;
			
 
				-
			
 
				-                            $.get("/ferment_WaterLevel_" + tank_num, '', function (response) {
			
 
				-                                if (response.WaterLevel == 0) {
			
 
				-                                    // aaa outerSolenoidWater_ON()
			
 
				-                                    console.log('outerSolenoidWater_ON()')
			
 
				-                                    OuterWaterIn_interval = setInterval(OuterWaterFull, 5000)
			
 
				-                                } else if (response.WaterLevel == 1) {
			
 
				-                                    console.log('保溫夾層已達滿水位')
			
 
				-                                }
			
 
				-                            }, 'json');
			
 
				-                            
			
 
				-                            function OuterWaterFull(){
			
 
				-                                if (OuterWaterIn_process == 1) {
			
 
				-                                    return
			
 
				-                                }
			
 
				-                                OuterWaterIn_process = 1;
			
 
				-                                $.ajax({
			
 
				-                                    type:"GET",
			
 
				-                                    url:"/ferment_WaterLevel_" + tank_num,
			
 
				-                                    dataType:"JSON",
			
 
				-                                    success:function(response){
			
 
				-                                        var WaterLevel_status = response.WaterLevel
			
 
				-                                        if (WaterLevel_status == 1) {
			
 
				-                                            $('#WaterLevel_t_status').text('保溫夾層：滿水位')
			
 
				-                                            console.log('保溫夾層達滿水位, 關閉保溫夾層進水電磁閥')
			
 
				-                                            outerSolenoidWater_OFF()
			
 
				-                                            clearInterval(OuterWaterIn_interval)
			
 
				-                                        } else if (WaterLevel_status == 0) {
			
 
				-                                            $('#WaterLevel_t_status').text('保溫夾層：未達滿水高度')
			
 
				-                                            console.log('保溫夾層加水中')
			
 
				-                                        }
			
 
				-                                        OuterWaterIn_process = 0;
			
 
				-                                    },
			
 
				-                                    error:function(thrownError){
			
 
				-                                        console.log('Error: ' + thrownError)
			
 
				-                                        OuterWaterIn_process = 0;
			
 
				-                                    }
			
 
				-                                });
			
 
				-                            };
			
 
				-                        };
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_SolenoidOuterWater_title").text('發酵槽 F' + tid + ' 保溫夾層進水電磁閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_保溫夾層進水電磁閥')

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_SolenoidOuterWater_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 保溫夾層進水電磁閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    保溫夾層進水電磁閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_solenoid_outer_water == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_solenoid_outer_water == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 保溫夾層進水電磁閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="outerSolenoidWater_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 保溫夾層進水電磁閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="outerSolenoidWater_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                {% if WaterLevel == '1' %}

			
 
				+                <span id="WaterLevel_t_status">保溫夾層：滿水位</span>

			
 
				+                {% elif WaterLevel == '0' %}

			
 
				+                <span id="WaterLevel_t_status">保溫夾層：未達滿水高度</span>

			
 
				+                {% else %}

			
 
				+                <span id="WaterLevel_t_status">FERMENT SENSOR WATERLEVEL ERROR</span>

			
 
				+                {% endif %}

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="OuterWaterIn()">入水至保溫夾層滿水位</button>

			
 
				+                    <script>

			
 
				+                        function OuterWaterIn(){

			
 
				+                            var OuterWaterIn_process = 0;

			
 
				+                            var OuterWaterIn_interval;

			
 
				+

			
 
				+                            $.get("/ferment_WaterLevel_" + tank_num, '', function (response) {

			
 
				+                                if (response.WaterLevel == 0) {

			
 
				+                                    // aaa outerSolenoidWater_ON()

			
 
				+                                    console.log('outerSolenoidWater_ON()')

			
 
				+                                    OuterWaterIn_interval = setInterval(OuterWaterFull, 5000)

			
 
				+                                } else if (response.WaterLevel == 1) {

			
 
				+                                    console.log('保溫夾層已達滿水位')

			
 
				+                                }

			
 
				+                            }, 'json');

			
 
				+                            

			
 
				+                            function OuterWaterFull(){

			
 
				+                                if (OuterWaterIn_process == 1) {

			
 
				+                                    return

			
 
				+                                }

			
 
				+                                OuterWaterIn_process = 1;

			
 
				+                                $.ajax({

			
 
				+                                    type:"GET",

			
 
				+                                    url:"/ferment_WaterLevel_" + tank_num,

			
 
				+                                    dataType:"JSON",

			
 
				+                                    success:function(response){

			
 
				+                                        var WaterLevel_status = response.WaterLevel

			
 
				+                                        if (WaterLevel_status == 1) {

			
 
				+                                            $('#WaterLevel_t_status').text('保溫夾層：滿水位')

			
 
				+                                            console.log('保溫夾層達滿水位, 關閉保溫夾層進水電磁閥')

			
 
				+                                            outerSolenoidWater_OFF()

			
 
				+                                            clearInterval(OuterWaterIn_interval)

			
 
				+                                        } else if (WaterLevel_status == 0) {

			
 
				+                                            $('#WaterLevel_t_status').text('保溫夾層：未達滿水高度')

			
 
				+                                            console.log('保溫夾層加水中')

			
 
				+                                        }

			
 
				+                                        OuterWaterIn_process = 0;

			
 
				+                                    },

			
 
				+                                    error:function(thrownError){

			
 
				+                                        console.log('Error: ' + thrownError)

			
 
				+                                        OuterWaterIn_process = 0;

			
 
				+                                    }

			
 
				+                                });

			
 
				+                            };

			
 
				+                        };

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_SolenoidWaterIn.html
+++ b/app/templates/ctrl_F_SolenoidWaterIn.html
@@ -1,405 +1,405 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_SolenoidWaterIn_title").text('發酵槽 F' + tid + ' 桶內進水電磁閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_桶內進水電磁閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_SolenoidWaterIn_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 桶內進水電磁閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    桶內進水電磁閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_solenoid_tank_water_in == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_solenoid_tank_water_in == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 桶內進水電磁閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankSolenoidWaterIn_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 桶內進水電磁閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankSolenoidWaterIn_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="2">
			
 
				-                    桶內水位高度：<span id="PressureWaterLevel_t_status">{{PressureWaterLevel}}</span>公分
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    指定水位高度
			
 
				-                    <input name="testing_tank_water_height" id="testing_tank_water_height" type="text" value="100" style="width: 40px;">公分
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="tankWaterIn()">入水至指定高度</button>
			
 
				-                    <script>
			
 
				-                        var WaterIn_Process = 0;
			
 
				-                        var WaterIn_interval
			
 
				-                        function tankWaterIn() {
			
 
				-                            var testing_tank_water_height = parseFloat($("input[name=testing_tank_water_height]").val());
			
 
				-                            console.log('testing_tank_water_height: ' + testing_tank_water_height)
			
 
				-
			
 
				-                            $.get('/ferment_PressureWaterLevel_' + tank_num, '', function (res) {
			
 
				-                                if ( res.PressureWaterLevel < testing_tank_water_height ){
			
 
				-                                    // aaa tankSolenoidWaterIn_ON();
			
 
				-                                    console.log('tankSolenoidWaterIn_ON')
			
 
				-                                    WaterIn_interval = setInterval(tankWaterIn, 5000);
			
 
				-                                } else if ( res.PressureWaterLevel > testing_tank_water_height ) {
			
 
				-                                    console.log('已達指定水位高度')
			
 
				-                                };
			
 
				-                            }, 'json');
			
 
				-
			
 
				-                            function tankWaterIn(){
			
 
				-                                if(WaterIn_Process == 1){
			
 
				-                                    return;
			
 
				-                                }
			
 
				-                                WaterIn_Process = 1;
			
 
				-                                $.ajax({
			
 
				-                                    type:"GET",
			
 
				-                                    url:'/ferment_PressureWaterLevel_' + tank_num,
			
 
				-                                    dataType:'json',
			
 
				-                                    success:function(response){
			
 
				-                                        var present_water_height = response.PressureWaterLevel
			
 
				-                                        $('#PressureWaterLevel_t_status').text(present_water_height)
			
 
				-                                        console.log('目前水位高度: ' + present_water_height)
			
 
				-
			
 
				-                                        if( parseFloat(present_water_height) >= parseFloat(testing_tank_water_height) ){
			
 
				-                                            clearInterval(WaterIn_interval);
			
 
				-                                            console.log('達到目標水位！')
			
 
				-                                            // aaa tankSolenoidWaterIn_OFF();
			
 
				-                                            console.log('tankSolenoidWaterIn_OFF')
			
 
				-                                        }
			
 
				-                                        WaterIn_Process = 0;
			
 
				-                                    },
			
 
				-                                    error:function(thrownError){
			
 
				-                                        console.log("Error: " + thrownError)
			
 
				-                                        WaterIn_Process = 0;
			
 
				-                                    }
			
 
				-                                });
			
 
				-                                WaterIn_Process = 0;
			
 
				-                            }
			
 
				-                        };
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_SolenoidWaterIn_title").text('發酵槽 F' + tid + ' 桶內進水電磁閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_桶內進水電磁閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_SolenoidWaterIn_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 桶內進水電磁閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    桶內進水電磁閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_solenoid_tank_water_in == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_solenoid_tank_water_in == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 桶內進水電磁閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankSolenoidWaterIn_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 桶內進水電磁閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankSolenoidWaterIn_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="2">

			
 
				+                    桶內水位高度：<span id="PressureWaterLevel_t_status">{{PressureWaterLevel}}</span>公分

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    指定水位高度

			
 
				+                    <input name="testing_tank_water_height" id="testing_tank_water_height" type="text" value="100" style="width: 40px;">公分

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="tankWaterIn()">入水至指定高度</button>

			
 
				+                    <script>

			
 
				+                        var WaterIn_Process = 0;

			
 
				+                        var WaterIn_interval

			
 
				+                        function tankWaterIn() {

			
 
				+                            var testing_tank_water_height = parseFloat($("input[name=testing_tank_water_height]").val());

			
 
				+                            console.log('testing_tank_water_height: ' + testing_tank_water_height)

			
 
				+

			
 
				+                            $.get('/ferment_PressureWaterLevel_' + tank_num, '', function (res) {

			
 
				+                                if ( res.PressureWaterLevel < testing_tank_water_height ){

			
 
				+                                    // aaa tankSolenoidWaterIn_ON();

			
 
				+                                    console.log('tankSolenoidWaterIn_ON')

			
 
				+                                    WaterIn_interval = setInterval(tankWaterIn, 5000);

			
 
				+                                } else if ( res.PressureWaterLevel > testing_tank_water_height ) {

			
 
				+                                    console.log('已達指定水位高度')

			
 
				+                                };

			
 
				+                            }, 'json');

			
 
				+

			
 
				+                            function tankWaterIn(){

			
 
				+                                if(WaterIn_Process == 1){

			
 
				+                                    return;

			
 
				+                                }

			
 
				+                                WaterIn_Process = 1;

			
 
				+                                $.ajax({

			
 
				+                                    type:"GET",

			
 
				+                                    url:'/ferment_PressureWaterLevel_' + tank_num,

			
 
				+                                    dataType:'json',

			
 
				+                                    success:function(response){

			
 
				+                                        var present_water_height = response.PressureWaterLevel

			
 
				+                                        $('#PressureWaterLevel_t_status').text(present_water_height)

			
 
				+                                        console.log('目前水位高度: ' + present_water_height)

			
 
				+

			
 
				+                                        if( parseFloat(present_water_height) >= parseFloat(testing_tank_water_height) ){

			
 
				+                                            clearInterval(WaterIn_interval);

			
 
				+                                            console.log('達到目標水位！')

			
 
				+                                            // aaa tankSolenoidWaterIn_OFF();

			
 
				+                                            console.log('tankSolenoidWaterIn_OFF')

			
 
				+                                        }

			
 
				+                                        WaterIn_Process = 0;

			
 
				+                                    },

			
 
				+                                    error:function(thrownError){

			
 
				+                                        console.log("Error: " + thrownError)

			
 
				+                                        WaterIn_Process = 0;

			
 
				+                                    }

			
 
				+                                });

			
 
				+                                WaterIn_Process = 0;

			
 
				+                            }

			
 
				+                        };

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_SolenoidWaterTotal.html
+++ b/app/templates/ctrl_F_SolenoidWaterTotal.html
@@ -1,333 +1,333 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_SolenoidOuterWater_title").text('發酵槽 F' + tid + ' 總進水電磁閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_總進水電磁閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_SolenoidOuterWater_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 總進水電磁閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    總進水電磁閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_solenoid_tank_water_total == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_solenoid_tank_water_total == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 總進水電磁閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankSolenoidWaterTotal_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 總進水電磁閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankSolenoidWaterTotal_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_SolenoidOuterWater_title").text('發酵槽 F' + tid + ' 總進水電磁閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_總進水電磁閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_SolenoidOuterWater_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 總進水電磁閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    總進水電磁閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_solenoid_tank_water_total == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_solenoid_tank_water_total == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 總進水電磁閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankSolenoidWaterTotal_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 總進水電磁閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankSolenoidWaterTotal_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_Temp.html
+++ b/app/templates/ctrl_F_Temp.html
@@ -1,431 +1,435 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_Temp_title").text('發酵槽 F' + tid + ' 設定溫度')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_設定溫度');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_Temp_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 設定溫度
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    目前溫度
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_temp >= 0 %}
			
 
				-                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_temp}}</strong></span>&nbsp;℃
			
 
				-                    {% elif tank_temp == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:20px;"><strong>未設定溫度</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    溫控開關 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_temp_enable == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_temp_enable == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 / 關閉 溫控開關</td>
			
 
				-                <td>
			
 
				-                    <input type="button" value="ON" onclick="tankTempEnable_ON()"> / 
			
 
				-                    <input type="button" value="OFF" onclick="tankTempEnable_OFF()">
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定溫度 30℃</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankTemp_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定溫度 0℃</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankTempEnable_OFF()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>設定溫度</td>   
			
 
				-                <td>
			
 
				-                    <input id="tank_temp_data" type="text" placeholder="{{tank_temp}}" style="width: 40px;">&nbsp;℃
			
 
				-                    <span id="tank_temp_status" style="color:red;"></span>
			
 
				-                    <input type="button" value="送出" name="tank_temp_status" onclick="setTemp_func()"><br>
			
 
				-                    <span id="testing_Tempsetting_time" style="color: #f00;"></span>
			
 
				-
			
 
				-                    <script>
			
 
				-                        var setTemp_process = 0;
			
 
				-                        
			
 
				-                        function setTemp_func(){
			
 
				-                            var temp_data = $("input[id=tank_temp_data]").val();
			
 
				-                            console.log('設定溫度: ', temp_data)
			
 
				-                            setTemp()
			
 
				-                            var temp_interval = setInterval(checkTemp, 5000);
			
 
				-
			
 
				-                            function checkTemp(){
			
 
				-                                if (setTemp_process == 1) {
			
 
				-                                    return;
			
 
				-                                }
			
 
				-
			
 
				-                                setTemp_process = 1;
			
 
				-                                $.ajax({
			
 
				-                                    async:false,
			
 
				-                                    type:"GET",
			
 
				-                                    url:"/ferment_SHT11_"+tank_num,
			
 
				-                                    dataType:"JSON",
			
 
				-                                    success:function(response){
			
 
				-                                        var present_temp = response.SHT11_Temp
			
 
				-                                        console.log('目前溫度:', present_temp)
			
 
				-                                        $('#testing_Tempsetting_time').text('目前溫度:' + present_temp)
			
 
				-
			
 
				-                                        if (present_temp >= temp_data) {
			
 
				-                                            clearInterval(temp_interval);
			
 
				-                                            $('#testing_Tempsetting_time').text('已達指定溫度, 關閉加熱裝置')
			
 
				-                                            console.log('已達指定溫度, 關閉溫控開關')
			
 
				-                                            var time = new Date();
			
 
				-                                            while ((new Date() - time) < 3 * 1000) { };
			
 
				-
			
 
				-                                            tankTempEnable_OFF()
			
 
				-                                            tankHeater1_OFF()
			
 
				-                                            tankHeater2_OFF()
			
 
				-
			
 
				-                                            $('#testing_Tempsetting_time').text('')
			
 
				-                                        }
			
 
				-                                        setTemp_process = 0;
			
 
				-                                    },
			
 
				-                                    error:function(thrownError){
			
 
				-                                        console.log('ferment_Temp_Error: ', thrownError)
			
 
				-                                        setTemp_process = 0;
			
 
				-                                    }
			
 
				-                                });
			
 
				-                            }
			
 
				-                        };
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td colspan="3">
			
 
				-                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃
			
 
				-                </td>
			
 
				-                <td colspan="3">
			
 
				-                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_Temp_title").text('發酵槽 F' + tid + ' 設定溫度')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_設定溫度');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_Temp_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 設定溫度

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    目前溫度

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_temp >= 0 %}

			
 
				+                    <span style="color:#008CBA; font-size:20px;"><strong>{{tank_temp}}</strong></span>&nbsp;℃

			
 
				+                    {% elif tank_temp == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:20px;"><strong>未設定溫度</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    溫控開關 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_temp_enable == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_temp_enable == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 / 關閉 溫控開關</td>

			
 
				+                <td>

			
 
				+                    <input type="button" value="ON" onclick="tankTempEnable_ON()"> / 

			
 
				+                    <input type="button" value="OFF" onclick="tankTempEnable_OFF()">

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定溫度 30℃</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankTemp_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定溫度 0℃</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankTempEnable_OFF()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>設定溫度</td>   

			
 
				+                <td>

			
 
				+                    <span id="tank_temp_status" style="color:red;"></span>

			
 
				+                    <input id="tank_temp_data" type="text" placeholder="{{tank_temp}}" style="width: 40px;">&nbsp;℃, 持續&nbsp;

			
 
				+                    <input id="tank_temp_duration" type="text" placeholder="" style="width: 40px;">&nbsp;分鐘&nbsp;

			
 
				+                    <input type="button" value="送出" name="tank_temp_status" onclick="setTemp_func()"><br>

			
 
				+                    <span id="testing_Tempsetting_time" style="color: #f00;"></span>

			
 
				+

			
 
				+                    <script>

			
 
				+                        var setTemp_process = 0;

			
 
				+                        

			
 
				+                        function setTemp_func(){

			
 
				+                            var temp_data = $("input[id=tank_temp_data]").val();

			
 
				+                            console.log('設定溫度: ', temp_data)

			
 
				+                            var temp_duration = $("input[id=tank_temp_duration]").val();

			
 
				+                            console.log('持溫時間: ', temp_duration)

			
 
				+

			
 
				+                            setTemp(temp_data, temp_duration)  // js function

			
 
				+                            // var temp_interval = setInterval(checkTemp, 5000);

			
 
				+

			
 
				+                            function checkTemp(){

			
 
				+                                if (setTemp_process == 1) {

			
 
				+                                    return;

			
 
				+                                }

			
 
				+

			
 
				+                                setTemp_process = 1;

			
 
				+                                $.ajax({

			
 
				+                                    async:false,

			
 
				+                                    type:"GET",

			
 
				+                                    url:"/ferment_SHT11_"+tank_num,

			
 
				+                                    dataType:"JSON",

			
 
				+                                    success:function(response){

			
 
				+                                        var present_temp = response.SHT11_Temp

			
 
				+                                        console.log('目前溫度:', present_temp)

			
 
				+                                        $('#testing_Tempsetting_time').text('目前溫度:' + present_temp)

			
 
				+

			
 
				+                                        if (present_temp >= temp_data) {

			
 
				+                                            clearInterval(temp_interval);

			
 
				+                                            $('#testing_Tempsetting_time').text('已達指定溫度, 關閉加熱裝置')

			
 
				+                                            console.log('已達指定溫度, 關閉溫控開關')

			
 
				+                                            var time = new Date();

			
 
				+                                            while ((new Date() - time) < 3 * 1000) { };

			
 
				+

			
 
				+                                            tankTempEnable_OFF()

			
 
				+                                            tankHeater1_OFF()

			
 
				+                                            tankHeater2_OFF()

			
 
				+

			
 
				+                                            $('#testing_Tempsetting_time').text('')

			
 
				+                                        }

			
 
				+                                        setTemp_process = 0;

			
 
				+                                    },

			
 
				+                                    error:function(thrownError){

			
 
				+                                        console.log('ferment_Temp_Error: ', thrownError)

			
 
				+                                        setTemp_process = 0;

			
 
				+                                    }

			
 
				+                                });

			
 
				+                            }

			
 
				+                        };

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td colspan="3">

			
 
				+                    桶內溫度：<span id="SHT11_Temp_status">{{tank_SHT11.SHT11_Temp}}</span>&nbsp;℃

			
 
				+                </td>

			
 
				+                <td colspan="3">

			
 
				+                    桶內濕度：<span id="SHT11_Humidity_status">{{tank_SHT11.SHT11_Humidity}}</span>&nbsp;%

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_TempEnable.html
+++ b/app/templates/ctrl_F_TempEnable.html
@@ -1,337 +1,337 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_TempEnable_title").text('發酵槽 F' + tid + ' 溫控開關')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_溫控開關');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_TempEnable_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 溫控開關
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    溫控開關 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_temp_enable == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_temp_enable == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 溫控開關</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankTempEnable_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 溫控開關</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankTempEnable_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_heater1 == 0) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', false);
			
 
				-                    } else if (res.tank_heater1 == 1) {
			
 
				-                        $("#cmn-toggle-35").prop('checked', true);
			
 
				-                    }
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_TempEnable_title").text('發酵槽 F' + tid + ' 溫控開關')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_溫控開關');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_TempEnable_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 溫控開關

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    溫控開關 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_temp_enable == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_temp_enable == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 溫控開關</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankTempEnable_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 溫控開關</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankTempEnable_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', false);

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#cmn-toggle-35").prop('checked', true);

			
 
				+                    }

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_ThreeWayValveBean.html
+++ b/app/templates/ctrl_F_ThreeWayValveBean.html
@@ -1,339 +1,339 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_ThreeWayValve_title").text('發酵槽 F' + tid + ' 感測模組下豆三通閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_感測模組下豆三通閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 感測模組下豆三通閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    感測模組下豆三通閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_threewayvalve_bean == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_threewayvalve_bean == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 感測模組下豆三通閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankThreeWayValveBean_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 感測模組下豆三通閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankThreeWayValveBean_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-        
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_ThreeWayValve_title").text('發酵槽 F' + tid + ' 感測模組下豆三通閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_感測模組下豆三通閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 感測模組下豆三通閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    感測模組下豆三通閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_threewayvalve_bean == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_threewayvalve_bean == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 感測模組下豆三通閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankThreeWayValveBean_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 感測模組下豆三通閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankThreeWayValveBean_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+        

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_ThreeWayValveFloat.html
+++ b/app/templates/ctrl_F_ThreeWayValveFloat.html
@@ -1,338 +1,338 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_D_ThreeWayValve_title").text('發酵槽 F' + tid + ' 外桶浮選三通閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_外桶浮選三通閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_D_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 外桶浮選三通閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    外桶浮選三通閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_threewayvalve_outer_float == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_threewayvalve_outer_float == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 外桶浮選三通閥</td>
			
 
				-                <td><input type="button" value="ON" onclick="outerThreeWayValveFloat_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 外桶浮選三通閥</td>
			
 
				-                <td><input type="button" value="OFF" onclick="outerThreeWayValveFloat_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-14").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#UltraSonic_t_status").text(res.UltraSonic);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_D_ThreeWayValve_title").text('發酵槽 F' + tid + ' 外桶浮選三通閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_外桶浮選三通閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_D_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 外桶浮選三通閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    外桶浮選三通閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_threewayvalve_outer_float == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_threewayvalve_outer_float == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 外桶浮選三通閥</td>

			
 
				+                <td><input type="button" value="ON" onclick="outerThreeWayValveFloat_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 外桶浮選三通閥</td>

			
 
				+                <td><input type="button" value="OFF" onclick="outerThreeWayValveFloat_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-14").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#UltraSonic_t_status").text(res.UltraSonic);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_ThreeWayValveInput.html
+++ b/app/templates/ctrl_F_ThreeWayValveInput.html
@@ -1,340 +1,340 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->
			
 
				-    <script type="text/javascript" src="../static/js/ferment_function.js"></script>
			
 
				-
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var tid = '{{tid}}';
			
 
				-        console.log('tid:' + tid)
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ctrl_F_ThreeWayValveInput_title").text('發酵槽 F' + tid + ' 入料三通閥')
			
 
				-            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')
			
 
				-            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)
			
 
				-            $("#coffee_title").text('F' + tid + ' 發酵槽_入料三通閥');
			
 
				-        });
			
 
				-
			
 
				-        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ctrl_F_ThreeWayValveInput_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵槽 F_ 入料三通閥
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <!--
			
 
				-                <td rowspan="3">
			
 
				-                    手動控制
			
 
				-                </td>
			
 
				-                -->
			
 
				-                <td>
			
 
				-                    入料三通閥 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    {% if tank_threewayvalveinput == 1 %}
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                    {% elif tank_threewayvalveinput == 0 %}
			
 
				-                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
			
 
				-                    {% else %}
			
 
				-                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
			
 
				-                    {% endif %}
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 入料三通閥 (入料)</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankThreeWayValveInput_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 入料三通閥 (排氣)</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankThreeWayValveInput_OFF()"></td>
			
 
				-            </tr>
			
 
				-            
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <div style="text-align: center;">
			
 
				-            狀態更新時間(秒)：
			
 
				-            <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-            <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-        </div>
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            function changeUpdate() {
			
 
				-                // clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/D' + dtn, '', function (res) {
			
 
				-                    if (res.tank_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', false);
			
 
				-                    } else if (res.tank_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-05").prop('checked', true);
			
 
				-                    }
			
 
				-                    $("#LiDAR_t_status").text(res.LiDAR);
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <br>
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 發酵貨櫃 - 入料、桶槽、出料制動器 function-->

			
 
				+    <script type="text/javascript" src="../static/js/ferment_function.js"></script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var tid = '{{tid}}';

			
 
				+        console.log('tid:' + tid)

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ctrl_F_ThreeWayValveInput_title").text('發酵槽 F' + tid + ' 入料三通閥')

			
 
				+            $("#ferment_tank_page").text('發酵槽 F' + tid + ' 操作介面   ')

			
 
				+            $('#ferment_tank_page').attr("href", "/ferment_container/" + tid)

			
 
				+            $("#coffee_title").text('F' + tid + ' 發酵槽_入料三通閥');

			
 
				+        });

			
 
				+

			
 
				+        //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a id="ferment_tank_page" href="/index_new" style="float: right;">___________________</a>

			
 
				+        </div>

			
 
				+        <div id="ctrl_F_ThreeWayValveInput_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">

			
 
				+            發酵槽 F_ 入料三通閥

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <!--

			
 
				+                <td rowspan="3">

			
 
				+                    手動控制

			
 
				+                </td>

			
 
				+                -->

			
 
				+                <td>

			
 
				+                    入料三通閥 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    {% if tank_threewayvalveinput == 1 %}

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                    {% elif tank_threewayvalveinput == 0 %}

			
 
				+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>

			
 
				+                    {% else %}

			
 
				+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>

			
 
				+                    {% endif %}

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 入料三通閥 (入料)</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankThreeWayValveInput_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 入料三通閥 (排氣)</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankThreeWayValveInput_OFF()"></td>

			
 
				+            </tr>

			
 
				+            

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <div style="text-align: center;">

			
 
				+            狀態更新時間(秒)：

			
 
				+            <input name="webupdate_time" type="text" value="5" style="width: 40px;">

			
 
				+            <input type="button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+        </div>

			
 
				+

			
 
				+        <script language="JavaScript">

			
 
				+            function changeUpdate() {

			
 
				+                // clearInterval(WebUpdate_set);

			
 
				+

			
 
				+                var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+                console.log('webupdate_time' + webupdate_time)

			
 
				+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+            }

			
 
				+

			
 
				+            // jQuery 更新感測器制動器狀態

			
 
				+            function WebUpdate(dtn) {

			
 
				+                $.get('/loading/D' + dtn, '', function (res) {

			
 
				+                    if (res.tank_vacuum == 0) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', false);

			
 
				+                    } else if (res.tank_vacuum == 1) {

			
 
				+                        $("#cmn-toggle-05").prop('checked', true);

			
 
				+                    }

			
 
				+                    $("#LiDAR_t_status").text(res.LiDAR);

			
 
				+                }, 'json');

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <br>

			
 
				+        <!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+        -->

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ctrl_F_Vacuum.html
+++ b/app/templates/ctrl_F_Vacuum.html
--- a/app/templates/demo.html
+++ b/app/templates/demo.html
@@ -0,0 +1,949 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{title}}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <style>

			
 
				+        .span-sensor-value {

			
 
				+            font-weight:600;

			
 
				+            padding-left: 3px;

			
 
				+        }

			
 
				+        .demo_status_css {

			
 
				+            font-weight: bold;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+        .input-text {

			
 
				+            height: 25px;

			
 
				+            width: 35px;

			
 
				+            text-align: center;

			
 
				+            margin-left: 2px;

			
 
				+            margin-right: 5px;

			
 
				+        }

			
 
				+    </style>

			
 
				+    <script>

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title_pc").text('DEMO 貨櫃');

			
 
				+            $("#coffee_title_phone").text('DEMO 貨櫃');

			
 
				+            // $(document).attr("title", '{{title}}');

			
 
				+            loading_status();

			
 
				+            loading_sensors();

			
 
				+        });

			
 
				+

			
 
				+        clean_input_status = ['{{CI1}}', '{{CI2}}']

			
 
				+        // console.log('clean_input_status: ' + clean_input_status)

			
 
				+        clean_tank_status = ['{{C1}}', '{{C2}}']

			
 
				+        // console.log('clean_tank_status: ' + clean_tank_status)

			
 
				+        colorselect_tank_status = ['{{S1}}', '{{S2}}']

			
 
				+        // console.log('colorselect_tank_status: ' + colorselect_tank_status)

			
 
				+        colorselect_outputg_status = ['{{SOg1}}', '{{SOg2}}']

			
 
				+        // console.log('colorselect_outputg_status: ' + colorselect_outputg_status)

			
 
				+        colorselect_outputb_status = ['{{SOb1}}', '{{SOb2}}']

			
 
				+        // console.log('colorselect_outputb_status: ' + colorselect_outputb_status)

			
 
				+        peel_tank_status = ['{{P1}}', '{{P2}}']

			
 
				+        // console.log('peel_tank_status: ' + peel_tank_status)

			
 
				+        peel_output_status = ['{{PO1}}', '{{PO2}}']

			
 
				+        // console.log('peel_output_status: ' + peel_output_status)

			
 
				+        ferment_tank_status = ['{{F1}}', '{{F2}}']

			
 
				+        dry_tank_status = ['{{D1}}', '{{D2}}']

			
 
				+        dry_output_status = ['{{DO1}}', '{{DO2}}']

			
 
				+        peel_outputb_status = ['{{POb1}}']

			
 
				+        // console.log('peel_outputb_status: ' + peel_outputb_status)

			
 
				+

			
 
				+

			
 
				+        // 更新桶槽狀態

			
 
				+        function loading_status(){

			
 
				+            for (let i=0; i<clean_input_status.length; i++) {

			
 
				+                if (clean_input_status[i] == 'CI_InputtingBean') {

			
 
				+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (clean_input_status[i] == 'CI_Waiting') {

			
 
				+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (clean_input_status[i] == 'CI_OutputtingBean') {

			
 
				+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (clean_input_status[i] == 'CI_Warning') {

			
 
				+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#CI"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('CI pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<clean_tank_status.length; i++) {

			
 
				+                if (clean_tank_status[i] == 'C_InputtingBean') {

			
 
				+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (clean_tank_status[i] == 'C_Waiting') {

			
 
				+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (clean_tank_status[i] == 'C_OutputtingBean') {

			
 
				+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (clean_tank_status[i] == 'C_Warning') {

			
 
				+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#C"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('C pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<colorselect_tank_status.length; i++) {

			
 
				+                if (colorselect_tank_status[i] == 'S_InputtingBean') {

			
 
				+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (colorselect_tank_status[i] == 'S_Waiting') {

			
 
				+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (colorselect_tank_status[i] == 'S_OutputtingBean') {

			
 
				+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (colorselect_tank_status[i] == 'S_Warning') {

			
 
				+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#S"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('S pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<colorselect_outputg_status.length; i++) {

			
 
				+                if (colorselect_outputg_status[i] == 'SO_InputtingBean') {

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (colorselect_outputg_status[i] == 'SO_Waiting') {

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (colorselect_outputg_status[i] == 'SO_OutputtingBean') {

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (colorselect_outputg_status[i] == 'SO_Warning') {

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#SOg"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('SOg pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<colorselect_outputb_status.length; i++) {

			
 
				+                if (colorselect_outputb_status[i] == 'SO_InputtingBean') {

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (colorselect_outputb_status[i] == 'SO_Waiting') {

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (colorselect_outputb_status[i] == 'SO_OutputtingBean') {

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (colorselect_outputb_status[i] == 'SO_Warning') {

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#SOb"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('SOb pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<peel_tank_status.length; i++) {

			
 
				+                if (peel_tank_status[i] == 'P_Waiting') {

			
 
				+                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 等待中")

			
 
				+                } else if (peel_tank_status[i] == 'P_Peeling') {

			
 
				+                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 脫皮中")

			
 
				+                // } else if (peel_tank_status[i] == 'P_InputtingBean') {

			
 
				+                //     $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                //     $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")

			
 
				+                // } else if (peel_tank_status[i] == 'P_OutputtingBean') {

			
 
				+                //     $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                //     $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (peel_tank_status[i] == 'P_Warning') {

			
 
				+                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#P"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('P pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<peel_output_status.length; i++) {

			
 
				+                if (peel_output_status[i] == 'PO_InputtingBean') {

			
 
				+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (peel_output_status[i] == 'PO_Waiting') {

			
 
				+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (peel_output_status[i] == 'PO_OutputtingBean') {

			
 
				+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")

			
 
				+                } else if (peel_output_status[i] == 'PO_Warning') {

			
 
				+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#PO"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('PO pass')

			
 
				+                }

			
 
				+            }

			
 
				+            

			
 
				+            for (let i=0; i<ferment_tank_status.length; i++) {

			
 
				+                if (ferment_tank_status[i] == 'F_InputtingBean') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆中")

			
 
				+                } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆暫停")

			
 
				+                } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆完成")

			
 
				+                } else if (ferment_tank_status[i] == 'F_InputtingWater') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入水中")

			
 
				+                } else if (ferment_tank_status[i] == 'F_Waiting') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  空桶等待")

			
 
				+                } else if (ferment_tank_status[i] == 'F_Cleaning') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "plum")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  清洗中")

			
 
				+                } else if (ferment_tank_status[i] == 'F_Fermenting') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")

			
 
				+                } else if (ferment_tank_status[i] == 'F_OutputtingBean') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  可出豆")

			
 
				+                } else if (ferment_tank_status[i] == 'F_Warning') {

			
 
				+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發生錯誤")

			
 
				+                    $("#F"+parseInt(i+1)+"_status").css("color", "crimson")

			
 
				+                } else {

			
 
				+                    console.log('F pass')

			
 
				+                }

			
 
				+            }

			
 
				+            

			
 
				+            for (let i=0; i<dry_tank_status.length; i++) {

			
 
				+                if (dry_tank_status[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[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[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[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[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[i] == 'D_Drying') {

			
 
				+                    $("#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[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[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 {

			
 
				+                    console.log('pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<dry_output_status.length; i++) {

			
 
				+                if (dry_output_status[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[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[i] == 'DO_OutputtingBean') {

			
 
				+                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")

			
 
				+                } else {

			
 
				+                    console.log('DO pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            for (let i=0; i<peel_outputb_status.length; i++) {

			
 
				+                if (peel_outputb_status[i] == 'PO_InputtingBean') {

			
 
				+                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 入豆中")

			
 
				+                } else if (peel_outputb_status[i] == 'PO_Waiting') {

			
 
				+                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")

			
 
				+                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 空桶等待")

			
 
				+                } else if (peel_outputb_status[i] == 'PO_OutputtingBean') {

			
 
				+                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")

			
 
				+                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 可出豆")

			
 
				+                } else {

			
 
				+                    console.log('POb pass')

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            // 

			
 
				+

			
 
				+        };

			
 
				+

			
 
				+        // 更新 UltraSonic 數值

			
 
				+        function loading_sensors(){

			
 
				+            $.get('/loading_sensors', '', function (res){

			
 
				+                $("#C1_UltraSonic").text(res.C1_UltraSonic);

			
 
				+                $("#C2_UltraSonic").text(res.C2_UltraSonic);

			
 
				+                $("#PO1_UltraSonic").text(res.PO1_UltraSonic);

			
 
				+                $("#PO2_UltraSonic").text(res.PO2_UltraSonic);

			
 
				+                $("#F1_UltraSonic").text(res.F1_UltraSonic);

			
 
				+                $("#F1_SHT11Temp").text(res.F1_SHT11Temp);

			
 
				+                $("#F1_SHT11Humidity").text(res.F1_SHT11Humidity);

			
 
				+                $("#F2_UltraSonic").text(res.F2_UltraSonic);

			
 
				+                $("#D1_UltraSonic").text(res.D1_UltraSonic);

			
 
				+                $("#D1_SHT11Temp").text(res.D1_SHT11Temp);

			
 
				+                $("#D1_SHT11Humidity").text(res.D1_SHT11Humidity);

			
 
				+                $("#D2_UltraSonic").text(res.D2_UltraSonic);

			
 
				+                $("#DO1_UltraSonic").text(res.DO1_UltraSonic);

			
 
				+                $("#DO2_UltraSonic").text(res.DO2_UltraSonic);

			
 
				+            }, 'json');

			
 
				+        }

			
 
				+

			
 
				+        var data;                       // 狀態判斷傳參數用

			
 
				+        var peel_status_process = 0;    

			
 
				+        var peel_status_interval;       // 脫皮機自動化, 間隔 5 秒執行

			
 
				+        var ferment_status_process = 0;

			
 
				+        var ferment_status_interval;    // 發酵槽自動化, 間隔 5 秒執行

			
 
				+        var dry_status_process = 0;

			
 
				+        var dry_status_interval;        // 乾燥槽自動化, 間隔 5 秒執行

			
 
				+                    

			
 
				+    </script>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+            

			
 
				+        </div>

			
 
				+

			
 
				+        <div>

			
 
				+            <!-- DEMO 貨櫃 狀態表格 -->

			
 
				+            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">

			
 
				+                <tr>

			
 
				+                    <td>

			
 
				+                        <!-- 清洗浮選槽入料 CI1 -->

			
 
				+                        <div id="CI1" tabindex="0" class="CI1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="CI1_status" class="demo_status_css">CI1 status</span>

			
 
				+                            <div id="CI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 清洗浮選槽 C1 -->

			
 
				+                        <div id="C1" tabindex="0" class="C1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="C1_status" class="demo_status_css">C1 status</span>

			
 
				+                            <div id="C1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        中水桶

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 色選機 S1 -->

			
 
				+                        <div id="S1" tabindex="0" class="S1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="S1_status" class="demo_status_css">S1 status</span>

			
 
				+                            <div id="S1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 色選機好果 SOg1 -->

			
 
				+                        <div id="SOg1" tabindex="0" class="SOg1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="SOg1_status" class="demo_status_css">SOg1 status</span>

			
 
				+                            <div id="SOg1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 色選機好果 SOb1 -->

			
 
				+                        <div id="SOb1" tabindex="0" class="SOb1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="SOb1_status" class="demo_status_css">SOb1 status</span>

			
 
				+                            <div id="SOb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 脫皮機 P1 -->

			
 
				+                        <div id="P1" tabindex="0" class="P1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="P1_status" class="demo_status_css">P1 status</span>

			
 
				+                            <div id="P1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 脫皮機出料儲豆槽 PO1 -->

			
 
				+                        <div id="PO1" tabindex="0" class="PO1_position" role="button" style="text-align: center;">

			
 
				+                            <span id="PO1_status" class="demo_status_css">PO1 status</span>

			
 
				+                            <div id="PO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 發酵槽 F1 -->

			
 
				+                        <div id="F1" tabindex="0" class="F1_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="F1_status" class="demo_status_css">F1 status</span>

			
 
				+                            <div id="F1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 乾燥槽 D1 -->

			
 
				+                        <div id="D1" tabindex="0" class="D1_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="D1_status" class="demo_status_css">D1 status</span>

			
 
				+                            <div id="D1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 乾燥槽 DO1 -->

			
 
				+                        <div id="DO1" tabindex="0" class="DO1_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="DO1_status" class="demo_status_css">DO1 status</span>

			
 
				+                            <div id="DO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+

			
 
				+                <tr>

			
 
				+                    <td>

			
 
				+                        清洗<br>

			
 
				+                        入料儲豆槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        清洗浮選槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        中水桶

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        色選機

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        色選機出料<br>好果

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        色選機出料<br>壞果

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        脫皮機

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        脫皮機<br>出料儲豆槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        發酵槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        乾燥槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        乾燥<br>

			
 
				+                        出料除豆槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        壞豆

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+

			
 
				+                <tr>

			
 
				+                    <td>

			
 
				+                        <!-- 清洗浮選槽入料 CI2 -->

			
 
				+                        <div id="CI2" tabindex="0" class="CI2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="CI2_status" class="demo_status_css">CI2 status</span>

			
 
				+                            <div id="CI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 清洗浮選槽 C2 -->

			
 
				+                        <div id="C2" tabindex="0" class="C2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="C2_status" class="demo_status_css">C2 status</span>

			
 
				+                            <div id="C2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        中水桶

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 色選機 S2 -->

			
 
				+                        <div id="S2" tabindex="0" class="S2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="S2_status" class="demo_status_css">S2 status</span>

			
 
				+                            <div id="S2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 色選機好果 SOg2 -->

			
 
				+                        <div id="SOg2" tabindex="0" class="SOg2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="SOg2_status" class="demo_status_css">SOg2 status</span>

			
 
				+                            <div id="SOg2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 色選機好果 SOb2 -->

			
 
				+                        <div id="SOb2" tabindex="0" class="SOb2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="SOb2_status" class="demo_status_css">SOb2 status</span>

			
 
				+                            <div id="SOb2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 脫皮機 P2 -->

			
 
				+                        <div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="P2_status" class="demo_status_css">P2 status</span>

			
 
				+                            <div id="P2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 脫皮機出料儲豆槽 PO2 -->

			
 
				+                        <div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">

			
 
				+                            <span id="PO2_status" class="demo_status_css">PO2 status</span>

			
 
				+                            <div id="PO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 發酵槽 F2 -->

			
 
				+                        <div id="F2" tabindex="0" class="F2_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="F2_status" class="demo_status_css">F2 status</span>

			
 
				+                            <div id="F2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 乾燥槽 D2 -->

			
 
				+                        <div id="D2" tabindex="0" class="D2_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="D2_status" class="demo_status_css">D2 status</span>

			
 
				+                            <div id="D2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 乾燥槽 DO2 -->

			
 
				+                        <div id="DO2" tabindex="0" class="DO2_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="DO2_status" class="demo_status_css">DO2 status</span>

			
 
				+                            <div id="DO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <!-- 壞豆槽 POb1 -->

			
 
				+                        <div id="POb1" tabindex="0" class="POb1_position" role="button" style="vertical-align: bottom;">

			
 
				+                            <span id="POb1_status" class="demo_status_css">POb1 status</span>

			
 
				+                            <div id="POb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>

			
 
				+                        </div>

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+            </table>

			
 
				+

			
 
				+            <!-- DEMO 貨櫃 參數設定 -->

			
 
				+            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">

			
 
				+                <tr>

			
 
				+                    <td>

			
 
				+                        清洗入料

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        清洗浮選

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        中水桶

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        色選機

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        出料好果

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        出料壞果

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        脫皮機

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        脫皮機出料

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        發酵槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        乾燥槽

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        乾燥出料

			
 
				+                    </td>

			
 
				+

			
 
				+                </tr>

			
 
				+                <tr style="vertical-align: top;">

			
 
				+                    <td colspan="3">

			
 
				+                        CI1_UltraSonic: <span id="CI1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        C1_UltraSonic: <span id="C1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        ----- 清洗入料 -----<br>

			
 
				+                        生豆高度

			
 
				+                        <input id="DEMO_CI_Bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        吸料時間

			
 
				+                        <input id="DEMO_CI_vacuumON_time" type="text" class="input-text" value="5">秒<br>

			
 
				+                        放料時間

			
 
				+                        <input id="DEMO_CI_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>

			
 
				+                        ----- 清洗浮選 -----<br>

			
 
				+                        生豆高度

			
 
				+                        <input id="DEMO_C_Bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        吸料時間

			
 
				+                        <input id="DEMO_C_vacuumON_time" type="text" class="input-text" value="5">秒<br>

			
 
				+                        放料時間

			
 
				+                        <input id="DEMO_C_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>

			
 
				+                        水位高度

			
 
				+                        <input id="DEMO_W_Bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        ------ 中水桶 ------<br>

			
 
				+                        水位高度

			
 
				+                        <input id="DEMO_WaterTank_Water_height" type="text" class="input-text" value="50">cm<br>

			
 
				+                    </td>

			
 
				+                    <td colspan="3">

			
 
				+                        S1_UltraSonic: <span id="S1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        ------ 色選機 ------<br>

			
 
				+                        生豆高度

			
 
				+                        <input id="DEMO_S_Bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        吸料時間

			
 
				+                        <input id="DEMO_S_vacuumON_time" type="text" class="input-text" value="5">秒<br>

			
 
				+                        放料時間

			
 
				+                        <input id="DEMO_S_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>

			
 
				+                        ----- 出料好果 -----<br>

			
 
				+                        生豆高度

			
 
				+                        <input id="DEMO_SOg_Bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        ----- 出料壞果 -----<br>

			
 
				+                        生豆高度

			
 
				+                        <input id="DEMO_SOb_Bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                    </td>

			
 
				+                    <td colspan="2">

			
 
				+                        PO1_UltraSonic: <span id="PO1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        ------ 脫皮機 ------<br>

			
 
				+                        馬達轉速

			
 
				+                        <input name="Peel_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>

			
 
				+                        吸料時間

			
 
				+                        <input name="Peel_Tank_vacuumON_time" type="text" class="input-text" value="3">秒<br>

			
 
				+                        放料時間

			
 
				+                        <input name="Peel_Tank_vacuumOFF_time" type="text" class="input-text" value="30">秒<br>

			
 
				+                        --- 脫皮機出料 ---<br>

			
 
				+                        生豆高度

			
 
				+                        <input name="Peel_Tank_bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        F1_UltraSonic: <span id="F1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        F1_SHT11Temp: <span id="F1_SHT11Temp" class="span-sensor-value">null</span><br>

			
 
				+                        F1_SHT11Humidity: <span id="F1_SHT11Humidity" class="span-sensor-value">null</span><br>

			
 
				+                        ------ 發酵槽 ------<br>

			
 
				+                        生豆高度

			
 
				+                        <input name="Ferment_Tank_bean_height" class="input-text" type="text" value="10">cm<br>

			
 
				+                        吸料時間

			
 
				+                        <input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>

			
 
				+                        放料時間

			
 
				+                        <input name="Ferment_Tank_vacuumOFF_time" class="input-text" type="text" value="10">秒<br>

			
 
				+                        <br>

			
 
				+                        水位高度

			
 
				+                        <input name="Ferment_Tank_water_height" class="input-text" type="text" value="15">cm<br>

			
 
				+                        馬達轉速

			
 
				+                        <input name="Ferment_Tank_motor_rpm" class="input-text" type="text" value="15">rpm<br>

			
 
				+                        <br>

			
 
				+                        發酵溫度

			
 
				+                        <input name="Ferment_Tank_fermenting_temp" class="input-text" type="text" value="10">℃<br>

			
 
				+                        發酵等待

			
 
				+                        <input name="Ferment_Tank_fermenting_time" class="input-text" type="text" value="5">秒<br>

			
 
				+                        廢水排放

			
 
				+                        <input name="Ferment_Tank_WaterOut_time" class="input-text" type="text" value="5">秒

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        D1_UltraSonic: <span id="D1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        D1_SHT11Temp: <span id="D1_SHT11Temp" class="span-sensor-value">null</span><br>

			
 
				+                        D1_SHT11Humidity: <span id="D1_SHT11Humidity" class="span-sensor-value">null</span><br>

			
 
				+                        ------ 乾燥槽 ------<br>

			
 
				+                        <!-- 乾燥槽 -->

			
 
				+                        生豆高度

			
 
				+                        <input name="Dry_Tank_bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        吸料時間

			
 
				+                        <input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="5">秒<br>

			
 
				+                        放料時間

			
 
				+                        <input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>

			
 
				+                        馬達轉速

			
 
				+                        <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="0">rpm<br>

			
 
				+                        <br>

			
 
				+                        指定溫度

			
 
				+                        <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="38">℃<br>

			
 
				+                        指定濕度 

			
 
				+                        <input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="11">%<br>

			
 
				+                        返潮時間

			
 
				+                        <input name="Dry_Tank_drying_time" type="text" class="input-text" value="5">秒<br>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        DO1_UltraSonic: <span id="DO1_UltraSonic" class="span-sensor-value">null</span><br>

			
 
				+                        ----- 乾燥出料 -----<br>

			
 
				+                        <!-- 乾燥出料 -->

			
 
				+                        生豆高度

			
 
				+                        <input name="Dry_Output_bean_height" type="text" class="input-text" value="10">cm<br>

			
 
				+                        吸料時間

			
 
				+                        <input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>

			
 
				+                        放料時間 

			
 
				+                        <input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="stop_Drying_OutputtingBean()">

			
 
				+                            暫停乾燥<br><u>開啟 D1 蝴蝶閥</u></button>

			
 
				+                        <br>

			
 
				+                        <br>

			
 
				+                        <div style="font-size: 12px; color: crimson; line-height: 15px;">測試水份後<br>將桶槽改為入料中<br>D1_UltraSonic 改為 0</div>

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('1')">

			
 
				+                            D1 蝴蝶閥 ON</u></button><br>

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('0')">

			
 
				+                            D1 蝴蝶閥 OFF</u></button>

			
 
				+                        <script>

			
 
				+                            function DtankDiskValve(params) {

			
 
				+                                if (params == '1') {

			
 
				+                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "on" };

			
 
				+                                } else if (params == '0') {

			
 
				+                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "off" };

			
 
				+                                } else {

			
 
				+                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": params };

			
 
				+                                }

			
 
				+                                $.post('/mqtt/1', data, function (res) {

			
 
				+                                    console.log('data: ', data)

			
 
				+                                    console.log('res: ', res)

			
 
				+                                }, 'text')

			
 
				+                            }

			
 
				+                            

			
 
				+                            // var outputtingBean_interval

			
 
				+

			
 
				+                            // function stop_Drying_OutputtingBean_IN(){

			
 
				+                            //     console.log("---- 測試後入料 ----")

			
 
				+                            // }

			
 
				+

			
 
				+                            function stop_Drying_OutputtingBean(){

			
 
				+                                clearInterval(dry_status_interval)

			
 
				+                                console.log("------- 狀態自動化判斷 停止 -------")

			
 
				+                                console.log("---- 出料至儲豆槽 ----")

			
 
				+

			
 
				+                                var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();

			
 
				+                                var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();

			
 
				+                                var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();

			
 
				+

			
 
				+                                data = {"command": "stop_Drying_OutputtingBean",

			
 
				+                                        "Dry_Output_bean_height": Dry_Output_bean_height,

			
 
				+                                        "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,

			
 
				+                                        "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time

			
 
				+                                        };

			
 
				+

			
 
				+                                // 更新桶槽狀態

			
 
				+                                $.get('/dryDEMO_outputtingBean', data, function (res){

			
 
				+                                    D1 = res.Dry_Tank_1

			
 
				+                                    D2 = res.Dry_Tank_2

			
 
				+                                    DO1 = res.Dry_Output_1

			
 
				+                                    DO2 = res.Dry_Output_2

			
 
				+                                    dry_tank_status = [D1, D2]

			
 
				+                                    dry_output_status = [DO1, DO2]

			
 
				+

			
 
				+                                    loading_status();

			
 
				+                                    loading_sensors();

			
 
				+

			
 
				+                                }, 'json');

			
 
				+

			
 
				+                            }

			
 
				+                        </script>

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+                <tr>

			
 
				+                    <td colspan="3">

			
 
				+                        清洗自動化

			
 
				+                    </td>

			
 
				+                    <td colspan="3">

			
 
				+                        色選自動化

			
 
				+                    </td>

			
 
				+                    <td colspan="2">

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_testing()">

			
 
				+                            脫皮自動化</button>

			
 
				+                        <br>

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_stop()">

			
 
				+                            <u>脫皮停止</u></button>

			
 
				+                        <script>

			
 
				+                            function peel_auto_status_stop(){

			
 
				+                                clearInterval(peel_status_interval)

			
 
				+                                console.log("------- 脫皮自動化判斷 停止 -------")

			
 
				+                            }

			
 
				+

			
 
				+                            function peel_auto_status_testing(){

			
 
				+                                console.log("------- 脫皮自動化判斷 開始 -------")

			
 
				+                                var Peel_Tank_bean_height = $('input[name=Peel_Tank_bean_height]').val();

			
 
				+                                var Peel_Tank_motor_rpm = $('input[name=Peel_Tank_motor_rpm]').val();

			
 
				+                                var Peel_Tank_vacuumON_time = $('input[name=Peel_Tank_vacuumON_time]').val();

			
 
				+                                var Peel_Tank_vacuumOFF_time = $('input[name=Peel_Tank_vacuumOFF_time]').val();

			
 
				+

			
 
				+                                data = {"Peel_Tank_bean_height":Peel_Tank_bean_height,

			
 
				+                                        "Peel_Tank_motor_rpm":Peel_Tank_motor_rpm,

			
 
				+                                        "Peel_Tank_vacuumON_time":Peel_Tank_vacuumON_time,

			
 
				+                                        "Peel_Tank_vacuumOFF_time":Peel_Tank_vacuumOFF_time

			
 
				+                                        }

			
 
				+

			
 
				+                                // 更新桶槽狀態

			
 
				+                                peel_status_interval = setInterval(peel_auto_status, 5*1000);

			
 
				+                                // peel_auto_status()

			
 
				+

			
 
				+                                function peel_auto_status(){

			
 
				+                                    if (peel_status_process == 1) { return }

			
 
				+

			
 
				+                                    peel_status_process = 1;

			
 
				+                                    $.get('/peel_auto_status', data, function (res){

			
 
				+                                        P1 = res.Peel_Tank_1

			
 
				+                                        P2 = res.Peel_Tank_2

			
 
				+                                        PO1 = res.Peel_Output_1

			
 
				+                                        PO2 = res.Peel_Output_2

			
 
				+

			
 
				+                                        peel_tank_status = [P1, P2]

			
 
				+                                        peel_output_status = [PO1, PO2]

			
 
				+                                        loading_status();

			
 
				+                                        loading_sensors();

			
 
				+

			
 
				+                                        peel_status_process = 0;

			
 
				+                                    }, 'json');

			
 
				+                                }

			
 
				+                            }

			
 
				+                        </script>

			
 
				+                    </td>

			
 
				+                    <td>

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_testing()">

			
 
				+                            發酵自動化</button>

			
 
				+                        <br>

			
 
				+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_stop()">

			
 
				+                            <u>發酵停止</u></button>

			
 
				+                        <script>

			
 
				+                            function ferment_auto_status_stop(){

			
 
				+                                clearInterval(ferment_status_interval)

			
 
				+                                console.log("------- 發酵自動化判斷 停止 -------")

			
 
				+                            }

			
 
				+

			
 
				+                            function ferment_auto_status_testing(){

			
 
				+                                console.log("------- 發酵自動化判斷 開始 -------")

			
 
				+                                var Ferment_Tank_bean_height = $("input[name=Ferment_Tank_bean_height]").val();

			
 
				+                                var Ferment_Tank_vacuumON_time = $("input[name=Ferment_Tank_vacuumON_time]").val();

			
 
				+                                var Ferment_Tank_vacuumOFF_time = $("input[name=Ferment_Tank_vacuumOFF_time]").val();

			
 
				+                                var Ferment_Tank_water_height = $("input[name=Ferment_Tank_water_height]").val();

			
 
				+                                var Ferment_Tank_motor_rpm = $("input[name=Ferment_Tank_motor_rpm]").val();

			
 
				+                                var Ferment_Tank_fermenting_temp = $("input[name=Ferment_Tank_fermenting_temp]").val();

			
 
				+                                var Ferment_Tank_fermenting_time = $("input[name=Ferment_Tank_fermenting_time]").val();

			
 
				+                                var Ferment_Tank_WaterOut_time = $("input[name=Ferment_Tank_WaterOut_time]").val();

			
 
				+

			
 
				+                                data = {"Ferment_Tank_bean_height":Ferment_Tank_bean_height,

			
 
				+                                        "Ferment_Tank_vacuumON_time":Ferment_Tank_vacuumON_time,

			
 
				+                                        "Ferment_Tank_vacuumOFF_time":Ferment_Tank_vacuumOFF_time,

			
 
				+                                        "Ferment_Tank_water_height":Ferment_Tank_water_height,

			
 
				+                                        "Ferment_Tank_motor_rpm":Ferment_Tank_motor_rpm,

			
 
				+                                        "Ferment_Tank_fermenting_temp":Ferment_Tank_fermenting_temp,

			
 
				+                                        "Ferment_Tank_fermenting_time":Ferment_Tank_fermenting_time,

			
 
				+                                        "Ferment_Tank_WaterOut_time":Ferment_Tank_WaterOut_time

			
 
				+                                        }

			
 
				+

			
 
				+                                // 更新桶槽狀態

			
 
				+                                ferment_status_interval = setInterval(ferment_auto_status, 5*1000);

			
 
				+                                // ferment_auto_status();

			
 
				+

			
 
				+                                function ferment_auto_status(){

			
 
				+                                    if (ferment_status_process == 1) { return }

			
 
				+

			
 
				+                                    ferment_status_process = 1;

			
 
				+                                    $.get('/fermentDEMO_auto_status', data, function (res){

			
 
				+                                        F1 = res.Ferment_Tank_1

			
 
				+                                        F2 = res.Ferment_Tank_2

			
 
				+                                        ferment_tank_status = [F1, F2]

			
 
				+

			
 
				+                                        loading_status();

			
 
				+                                        loading_sensors();

			
 
				+                                        ferment_status_process = 0;

			
 
				+                                    }, 'json');

			
 
				+                                }

			
 
				+

			
 
				+                            }

			
 
				+                        </script>

			
 
				+                    </td>

			
 
				+                    <td colspan="2">

			
 
				+                        <button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">

			
 
				+                            <u>乾燥自動化</u></button>

			
 
				+                            <br>

			
 
				+                        <button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">

			
 
				+                            <u>乾燥停止</u></button>

			
 
				+                        <script>

			
 
				+                            function dry_auto_status_stop(){

			
 
				+                                clearInterval(dry_status_interval)

			
 
				+                                console.log("------- 狀態自動化判斷 停止 -------")

			
 
				+                            }

			
 
				+                            function dry_auto_status_testing(){

			
 
				+                                console.log("------- 發酵自動化判斷 開始 -------")

			
 
				+                                

			
 
				+                                var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();

			
 
				+                                var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();

			
 
				+                                var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();

			
 
				+                                var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();

			
 
				+                                var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();

			
 
				+                                var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();

			
 
				+                                var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();

			
 
				+                                var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();

			
 
				+                                var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();

			
 
				+                                var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();

			
 
				+                            

			
 
				+

			
 
				+                                data = {"command": "Dry_auto_parameter",

			
 
				+                                        "Dry_Tank_bean_height": Dry_Tank_bean_height,

			
 
				+                                        "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,

			
 
				+                                        "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,

			
 
				+                                        "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,

			
 
				+                                        "Dry_Tank_drying_temp": Dry_Tank_drying_temp,

			
 
				+                                        "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,

			
 
				+                                        "Dry_Tank_drying_time": Dry_Tank_drying_time,

			
 
				+                                        "Dry_Output_bean_height": Dry_Output_bean_height,

			
 
				+                                        "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,

			
 
				+                                        "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time

			
 
				+                                        };

			
 
				+

			
 
				+                                // 更新桶槽狀態

			
 
				+                                dry_status_interval = setInterval(dry_auto_status, 5*1000);

			
 
				+                                // dry_auto_status();

			
 
				+

			
 
				+                                function dry_auto_status(){

			
 
				+                                    if (dry_status_process == 1) { return }

			
 
				+

			
 
				+                                    dry_status_process = 1;

			
 
				+                                    $.get('/dryDEMO_auto_status', data, function (res){

			
 
				+                                        D1 = res.Dry_Tank_1

			
 
				+                                        D2 = res.Dry_Tank_2

			
 
				+                                        DO1 = res.Dry_Output_1

			
 
				+                                        DO2 = res.Dry_Output_2

			
 
				+                                        dry_tank_status = [D1, D2]

			
 
				+                                        dry_output_status = [DO1, DO2]

			
 
				+

			
 
				+                                        loading_status();

			
 
				+                                        loading_sensors();

			
 
				+                                        dry_status_process = 0;

			
 
				+                                    }, 'json');

			
 
				+                                }

			
 
				+

			
 
				+                            }

			
 
				+                        </script>

			
 
				+                    </td>

			
 
				+                </tr>

			
 
				+            </table>

			
 
				+        </div>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+    </div>

			
 
				+    

			
 
				+</body>

			
 
				+</html>
			
--- a/app/templates/drop_down_list.html
+++ b/app/templates/drop_down_list.html
@@ -0,0 +1,300 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <style>

			
 
				+        .newcondition_css {

			
 
				+            padding: 10px;

			
 
				+            margin-top: 10px;

			
 
				+            background-color: honeydew;

			
 
				+        }

			
 
				+

			
 
				+        hr {

			
 
				+            margin-top: 5px;

			
 
				+            margin-bottom: 5px;

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <!--     

			
 
				+    <script>

			
 
				+        // [系統]更新: Array / renew_system function

			
 
				+        system_object = new Array();

			
 
				+        system_object[0] = ["   "];

			
 
				+        system_object[1] = ["   ", "清洗槽組立"];

			
 
				+        system_object[2] = ["   ", "發酵桶組立"];

			
 
				+        system_object[3] = ["   ", "乾燥桶組立"];

			
 
				+        function renew_system(index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<system_object[index].length; i++){

			
 
				+                Value = Value + '<option value=' + system_object[index][i] + '> ' + system_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("system");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+            $('#product_index').text(index)

			
 
				+        }

			
 
				+        // [模組]更新: Array / renew_system function

			
 
				+        module_object = new Array();

			
 
				+        module_object[0] = ["   "];

			
 
				+        module_object[1] = ["   ", "c1上蓋組立", "c2內桶槽組立"];

			
 
				+        module_object[2] = ["   ", "f1上蓋組立", "f2控制盒組立"];

			
 
				+        module_object[3] = ["   ", "d1上蓋組立", "d2控制盒組立"];

			
 
				+        

			
 
				+        function renew_module(index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<module_object[index].length; i++){

			
 
				+                Value = Value + '<option value=' + module_object[index][i] + '>' + module_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("module");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+            $('#system_index').text(index)

			
 
				+        }

			
 
				+        // // [零件]更新: Array / renew_system function

			
 
				+        component_object = new Array();

			
 
				+        component_object[0] = ["   "];

			
 
				+        component_object[1][1] = ["   ", "c1_M10平墊圈", "c1_M10螺帽"];

			
 
				+        component_object[1][2] = ["   ", "c2_內桶槽", "c2_內桶槽固定環"];

			
 
				+        component_object[2][1] = ["   ", "f1_吸料機入料管", "f1_入料斗擋板"];

			
 
				+        component_object[2][2] = ["   ", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];

			
 
				+        component_object[3][1] = ["   ", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];

			
 
				+        component_object[3][2] = ["   ", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];

			
 
				+        function renew_component(product_index, index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<component_object[product_index][index].length; i++){

			
 
				+                Value = Value + '<option value=' + component_object[product_index][index] + '>' + component_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("component");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+            $('#module_index').text(index)

			
 
				+        }

			
 
				+        // // 輸出零件 index

			
 
				+        function renew_item(index) {

			
 
				+            $('#component_index').text(index)

			
 
				+        }

			
 
				+

			
 
				+    </script>

			
 
				+     -->

			
 
				+    <br>

			
 
				+

			
 
				+    產品:

			
 
				+    <select id="product" onChange="renew_system(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    系統:

			
 
				+    <select id="system" onChange="renew_module(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    模組:

			
 
				+    <select id="module" onChange="renew_component(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    零件:

			
 
				+    <select id="component" onChange="">

			
 
				+        <input type="button" id="input_value" value="取值" onclick="printValue();"><br>

			
 
				+        取值: <span id="span_value"></span>

			
 
				+    </select><br>

			
 
				+

			
 
				+    <script>

			
 
				+        // 輸出關鍵字

			
 
				+        function printValue() {

			
 
				+            // database 取值語法

			
 
				+            var data = 'select * from teststock1213';

			
 
				+            // 取得下拉式選單選擇的 value

			
 
				+            var product_value = $("#product").val();

			
 
				+            var system_value = $("#system").val();

			
 
				+            var module_value = $("#module").val();

			
 
				+            var component_value = $("#component").val();

			
 
				+            if (product_value != '*' || system_value != '*' || module_value != '*' || component_value != '*') {

			
 
				+                data += ' WHERE ';

			
 
				+

			
 
				+                if (product_value != '*') {

			
 
				+                    data += '`產品` = ' + product_value;

			
 
				+                    if (system_value != '*' || module_value != '*' || component_value != '*') {

			
 
				+                        data += ' AND ';

			
 
				+                    }

			
 
				+                }

			
 
				+                if (system_value != '*') {

			
 
				+                    data += '`系統` = ' + system_value;

			
 
				+                    if (module_value != '*' || component_value != '*') {

			
 
				+                        data += ' AND ';

			
 
				+                    }

			
 
				+                }

			
 
				+                if (module_value != '*') {

			
 
				+                    data += '`模組` = ' + module_value;

			
 
				+                    if (component_value != '*') {

			
 
				+                        data += ' AND ';

			
 
				+                    }

			
 
				+                }

			
 
				+                if (component_value != '*') {

			
 
				+                    data += '`零件` = ' + component_value;

			
 
				+                }

			
 
				+            }

			
 
				+

			
 
				+            // if product_value

			
 
				+            $("#span_value").text(data)

			
 
				+        }

			
 
				+

			
 
				+        // 資料庫中的所有 [產品]

			
 
				+        var product_item = ["*", "清洗貨櫃", "發酵貨櫃", "乾燥貨櫃"]

			
 
				+        var inner = '';

			
 
				+        for (let i = 0; i < product_item.length; i++) {

			
 
				+            inner += '<option value="' + product_item[i] + '">' + product_item[i] + '</option>';

			
 
				+        }

			
 
				+        var sectorSelect = document.getElementById("product");

			
 
				+        sectorSelect.innerHTML = inner;

			
 
				+        // 資料庫中的所有 [系統]

			
 
				+        var system_item = ["*", "清洗槽組立", "發酵桶組立", "乾燥桶組立"]

			
 
				+        var inner = '';

			
 
				+        for (let i = 0; i < system_item.length; i++) {

			
 
				+            inner += '<option value="' + system_item[i] + '">' + system_item[i] + '</option>';

			
 
				+        }

			
 
				+        var sectorSelect = document.getElementById("system");

			
 
				+        sectorSelect.innerHTML = inner;

			
 
				+        // 資料庫中的所有 [模組]

			
 
				+        var module_item = ["*", "上蓋組立", "內桶槽組立", "控制盒組立"]

			
 
				+        var inner = '';

			
 
				+        for (let i = 0; i < module_item.length; i++) {

			
 
				+            inner += '<option value="' + module_item[i] + '">' + module_item[i] + '</option>';

			
 
				+        }

			
 
				+        var sectorSelect = document.getElementById("module");

			
 
				+        sectorSelect.innerHTML = inner;

			
 
				+        // 資料庫中的所有 [零件]

			
 
				+        var component_item = ["*", "M10平墊圈", "M10螺帽", "內桶槽", "內桶槽固定環", "吸料機入料管",

			
 
				+            "入料斗擋板", "LED指示燈_綠色 TB12LED-G0201", "K3 LED指示燈-主板",

			
 
				+            "軸心(單邊出軸)", "墊片M18x25x1.5", "M3x5螺絲", "M3x5銅柱 1公1母"]

			
 
				+        var inner = '';

			
 
				+        for (let i = 0; i < component_item.length; i++) {

			
 
				+            inner += '<option value="' + component_item[i] + '">' + component_item[i] + '</option>';

			
 
				+        }

			
 
				+        var sectorSelect = document.getElementById("component");

			
 
				+        sectorSelect.innerHTML = inner;

			
 
				+

			
 
				+

			
 
				+        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

			
 
				+        // 系統的 index

			
 
				+        var sysIndex;

			
 
				+        // [系統]更新: Array / renew_system function

			
 
				+        system_object = new Array();

			
 
				+        system_object[0] = ["*"];

			
 
				+        system_object[1] = ["*", "清洗槽組立"];

			
 
				+        system_object[2] = ["*", "發酵桶組立"];

			
 
				+        system_object[3] = ["*", "乾燥桶組立"];

			
 
				+        function renew_system(index) {

			
 
				+            sysIndex = index

			
 
				+            var inner = '';

			
 
				+            for (let i = 0; i < system_object[index].length; i++) {

			
 
				+                inner += '<option value="' + system_object[index][i] + '">' + system_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("system");

			
 
				+            sectorSelect.innerHTML = inner;

			
 
				+        }

			
 
				+

			
 
				+        // 模組的 index

			
 
				+        var moIndex;

			
 
				+        // [模組]更新: Array / renew_system function

			
 
				+        module_object = new Array();

			
 
				+        module_object[0] = ["*"];

			
 
				+        module_object[1] = ["*", "清洗槽組立"];

			
 
				+        module_object[2] = ["*", "發酵桶組立"];

			
 
				+        module_object[3] = ["*", "乾燥桶組立"];

			
 
				+        module_object[0][0] = ["*"];

			
 
				+        module_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];

			
 
				+        module_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];

			
 
				+        module_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];

			
 
				+        function renew_module(index) {

			
 
				+            moIndex = index

			
 
				+            var inner = '';

			
 
				+            for (let i = 0; i < module_object[sysIndex][index].length; i++) {

			
 
				+                inner += '<option value="' + module_object[sysIndex][index][i] + '">' + module_object[sysIndex][index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("module");

			
 
				+            sectorSelect.innerHTML = inner;

			
 
				+        }

			
 
				+

			
 
				+        // 零件

			
 
				+        // // [零件]更新: Array / renew_system function

			
 
				+        component_object = new Array();

			
 
				+        component_object[0] = ["*"];

			
 
				+        component_object[1] = ["*", "清洗槽組立"];

			
 
				+        component_object[2] = ["*", "發酵桶組立"];

			
 
				+        component_object[3] = ["*", "乾燥桶組立"];

			
 
				+        component_object[0][0] = ["*"];

			
 
				+        component_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];

			
 
				+        component_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];

			
 
				+        component_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];

			
 
				+        component_object[0][0][0] = ["*"];

			
 
				+        component_object[1][1][0] = ["*"];

			
 
				+        component_object[1][1][1] = ["*", "c1_M10平墊圈", "c1_M10螺帽"];

			
 
				+        component_object[1][1][2] = ["*", "c2_內桶槽", "c2_內桶槽固定環"];

			
 
				+        component_object[2][1][0] = ["*"];

			
 
				+        component_object[2][1][1] = ["*", "f1_吸料機入料管", "f1_入料斗擋板"];

			
 
				+        component_object[2][1][2] = ["*", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];

			
 
				+        component_object[3][1][0] = ["*"];

			
 
				+        component_object[3][1][1] = ["*", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];

			
 
				+        component_object[3][1][2] = ["*", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];

			
 
				+        function renew_component(index) {

			
 
				+            var Value = "";

			
 
				+            for (var i = 0; i < component_object[sysIndex][moIndex][index].length; i++) {

			
 
				+                Value = Value + '<option value="' + component_object[sysIndex][moIndex][index][i] + '">' + component_object[sysIndex][moIndex][index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("component");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+        }

			
 
				+    </script>

			
 
				+    <!-- // 資料庫中的所有 [產品]

			
 
				+        var product_item = ["*", "清洗貨櫃", "發酵貨櫃", "乾燥貨櫃"]

			
 
				+        var inner = '';

			
 
				+        for (let i = 0; i < product_item.length; i++) {

			
 
				+            inner += '<option value="' + product_item[i] + '">' + product_item[i] + '</option>';

			
 
				+        }

			
 
				+        var sectorSelect = document.getElementById("product");

			
 
				+        sectorSelect.innerHTML = inner; -->

			
 
				+

			
 
				+    <table class="table table-bordered">

			
 
				+        <tr>

			
 
				+            {% for i1 in labels %}

			
 
				+            <th>{{i1}}</th>

			
 
				+            {% endfor %}

			
 
				+        </tr>

			
 
				+        {% for i in content %}

			
 
				+        

			
 
				+        <tr id="tr_content">

			
 
				+            

			
 
				+            <td>{{ i[0] }}</td>

			
 
				+            <td>{{ i[1] }}</td>

			
 
				+            <td>{{ i[2] }}</td>

			
 
				+            <td>{{ i[3] }}</td>

			
 
				+            <td>{{ i[4] }}</td>

			
 
				+            <td>{{ i[5] }}</td>

			
 
				+            <td>{{ i[6] }}</td>

			
 
				+            <td>{{ i[7] }}</td>

			
 
				+            <td>{{ i[8] }}</td>

			
 
				+            <td>{{ i[9] }}</td>

			
 
				+            <td>{{ i[10] }}</td>

			
 
				+            <td>{{ i[11] }}</td>

			
 
				+            <td>{{ i[12] }}</td>

			
 
				+            <td>{{ i[13] }}</td>

			
 
				+            <td>{{ i[14] }}</td>

			
 
				+            <td>{{ i[15] }}</td>

			
 
				+        </tr>

			
 
				+        {% endfor %}

			
 
				+    </table>

			
 
				+

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/drop_down_list_12094layers.html
+++ b/app/templates/drop_down_list_12094layers.html
@@ -0,0 +1,202 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <style>

			
 
				+        .newcondition_css {

			
 
				+            padding: 10px;

			
 
				+            margin-top: 10px;

			
 
				+            background-color:honeydew;

			
 
				+        }

			
 
				+        hr {

			
 
				+            margin-top: 5px;

			
 
				+            margin-bottom: 5px;

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <!--     

			
 
				+    <script>

			
 
				+        // [系統]更新：Array / renew_system function

			
 
				+        system_object = new Array();

			
 
				+        system_object[0] = ["   "];

			
 
				+        system_object[1] = ["   ", "清洗槽組立"];

			
 
				+        system_object[2] = ["   ", "發酵桶組立"];

			
 
				+        system_object[3] = ["   ", "乾燥桶組立"];

			
 
				+        function renew_system(index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<system_object[index].length; i++){

			
 
				+                Value = Value + '<option value=' + system_object[index][i] + '> ' + system_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("system");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+            $('#product_index').text(index)

			
 
				+        }

			
 
				+        // [模組]更新：Array / renew_system function

			
 
				+        module_object = new Array();

			
 
				+        module_object[0] = ["   "];

			
 
				+        module_object[1] = ["   ", "c1上蓋組立", "c2內桶槽組立"];

			
 
				+        module_object[2] = ["   ", "f1上蓋組立", "f2控制盒組立"];

			
 
				+        module_object[3] = ["   ", "d1上蓋組立", "d2控制盒組立"];

			
 
				+        

			
 
				+        function renew_module(index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<module_object[index].length; i++){

			
 
				+                Value = Value + '<option value=' + module_object[index][i] + '>' + module_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("module");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+            $('#system_index').text(index)

			
 
				+        }

			
 
				+        // // [零件]更新：Array / renew_system function

			
 
				+        component_object = new Array();

			
 
				+        component_object[0] = ["   "];

			
 
				+        component_object[1][1] = ["   ", "c1_M10平墊圈", "c1_M10螺帽"];

			
 
				+        component_object[1][2] = ["   ", "c2_內桶槽", "c2_內桶槽固定環"];

			
 
				+        component_object[2][1] = ["   ", "f1_吸料機入料管", "f1_入料斗擋板"];

			
 
				+        component_object[2][2] = ["   ", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];

			
 
				+        component_object[3][1] = ["   ", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];

			
 
				+        component_object[3][2] = ["   ", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];

			
 
				+        function renew_component(product_index, index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<component_object[product_index][index].length; i++){

			
 
				+                Value = Value + '<option value=' + component_object[product_index][index] + '>' + component_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("component");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+            $('#module_index').text(index)

			
 
				+        }

			
 
				+        // // 輸出零件 index

			
 
				+        function renew_item(index) {

			
 
				+            $('#component_index').text(index)

			
 
				+        }

			
 
				+

			
 
				+    </script>

			
 
				+     -->

			
 
				+    <br>

			
 
				+

			
 
				+    產品：

			
 
				+    <!--   -->

			
 
				+    <select id="product" onChange="renew_system(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    系統：

			
 
				+    <select id="system" onChange="renew_module(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    模組：

			
 
				+    <select id="module" onChange="renew_component(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    零件：

			
 
				+    <select id="component" onChange="renew_item(this.selectedIndex);">

			
 
				+    </select>

			
 
				+    <br>

			
 
				+    產品：<span id="product_index"></span><br>

			
 
				+    系統：<span id="system_index"></span><br>

			
 
				+    模組：<span id="module_index"></span><br>

			
 
				+    零件：<span id="component_index"></span><br>

			
 
				+

			
 
				+    <script>

			
 
				+        // 資料庫中的所有 [產品]

			
 
				+        var product_item = ['*', '清洗貨櫃', '發酵貨櫃', '乾燥貨櫃']

			
 
				+        var inner = '';

			
 
				+        for (let i = 0; i < product_item.length; i++) {

			
 
				+            inner += '<option value=' + i + '>' + product_item[i] + '</option>';

			
 
				+        }

			
 
				+        var sectorSelect = document.getElementById("product");

			
 
				+        sectorSelect.innerHTML = inner;

			
 
				+

			
 
				+        // 系統的 index

			
 
				+        var noIndex;

			
 
				+        // [系統]更新：Array / renew_system function

			
 
				+        system_object = new Array();

			
 
				+        system_object[0] = ["*"];

			
 
				+        system_object[1] = ["*", "清洗槽組立", "CCC"];

			
 
				+        system_object[2] = ["*", "發酵桶組立", "FFF"];

			
 
				+        system_object[3] = ["*", "乾燥桶組立", "DDD"];

			
 
				+        function renew_system(index) {

			
 
				+            noIndex = index

			
 
				+            var inner = '';

			
 
				+            for (let i = 0; i < system_object[index].length; i++) {

			
 
				+                inner += '<option value=' + i + '>' + system_object[index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("system");

			
 
				+            sectorSelect.innerHTML = inner;

			
 
				+        }

			
 
				+

			
 
				+        // 模組的 index

			
 
				+        var moIndex;

			
 
				+        // [模組]更新：Array / renew_system function

			
 
				+        module_object = new Array();

			
 
				+        module_object[0] = ["*"];

			
 
				+        module_object[1] = ["*", "清洗槽組立", "ccc"];

			
 
				+        module_object[2] = ["*", "發酵桶組立", "fff"];

			
 
				+        module_object[3] = ["*", "乾燥桶組立", "ddd"];

			
 
				+        module_object[0][0] = ["*"];

			
 
				+        module_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];

			
 
				+        module_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];

			
 
				+        module_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];

			
 
				+        function renew_module(index) {

			
 
				+            moIndex = index

			
 
				+            console.log("renew_module START")

			
 
				+            var inner = '';

			
 
				+            for (let i = 0; i < module_object[noIndex][index].length; i++) {

			
 
				+                inner += '<option value=' + i + '>' + module_object[noIndex][index][i] + '</option>';

			
 
				+            }

			
 
				+            console.log("module: " + inner)

			
 
				+            var sectorSelect = document.getElementById("module");

			
 
				+            sectorSelect.innerHTML = inner;

			
 
				+            console.log("renew_module END")

			
 
				+        }

			
 
				+

			
 
				+        // 零件

			
 
				+        // // [零件]更新：Array / renew_system function

			
 
				+        component_object = new Array();

			
 
				+        component_object[0] = ["*"];

			
 
				+        component_object[1] = ["*", "清洗槽組立", "ccc"];

			
 
				+        component_object[2] = ["*", "發酵桶組立", "fff"];

			
 
				+        component_object[3] = ["*", "乾燥桶組立", "ddd"];

			
 
				+        component_object[0][0] = ["*"];

			
 
				+        component_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];

			
 
				+        component_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];

			
 
				+        component_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];

			
 
				+        component_object[0][0][0] = ["*"];  

			
 
				+        component_object[1][1][0] = ["*"];

			
 
				+        component_object[1][1][1] = ["*", "c1_M10平墊圈", "c1_M10螺帽"];

			
 
				+        component_object[1][1][2] = ["*", "c2_內桶槽", "c2_內桶槽固定環"];

			
 
				+        component_object[2][1][0] = ["*"];

			
 
				+        component_object[2][1][1] = ["*", "f1_吸料機入料管", "f1_入料斗擋板"];

			
 
				+        component_object[2][1][2] = ["*", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];

			
 
				+        component_object[3][1][0] = ["*"];

			
 
				+        component_object[3][1][1] = ["*", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];

			
 
				+        component_object[3][1][2] = ["*", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];

			
 
				+        function renew_component(index) {

			
 
				+            var Value="";

			
 
				+            for(var i=0; i<component_object[noIndex][moIndex][index].length; i++){

			
 
				+                Value = Value + '<option value=' + i + '>' + component_object[noIndex][moIndex][index][i] + '</option>';

			
 
				+            }

			
 
				+            var sectorSelect = document.getElementById("component");

			
 
				+            sectorSelect.innerHTML = Value;

			
 
				+        }

			
 
				+    </script>

			
 
				+    

			
 
				+    

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/dry.html
+++ b/app/templates/dry.html
--- a/app/templates/dry_0721ajax
+++ b/app/templates/dry_0721ajax
--- a/app/templates/dry_1008??.html
+++ b/app/templates/dry_1008??.html
@@ -0,0 +1,988 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+        .DryContainer_position {

			
 
				+            position: absolute;

			
 
				+            top: 95px;

			
 
				+            left: 55px;

			
 
				+        }

			
 
				+

			
 
				+        .D1_position {

			
 
				+            position: absolute;

			
 
				+            top: 150px;

			
 
				+            left: 245px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .D2_position {

			
 
				+            position: absolute;

			
 
				+            top: 150px;

			
 
				+            left: 425px;

			
 
				+            width: 155px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .D3_position {

			
 
				+            position: absolute;

			
 
				+            top: 150px;

			
 
				+            left: 605px;

			
 
				+            width: 160px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .D4_position {

			
 
				+            position: absolute;

			
 
				+            top: 150px;

			
 
				+            left: 780px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .D5_position {

			
 
				+            position: absolute;

			
 
				+            top: 150px;

			
 
				+            left: 960px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .D6_position {

			
 
				+            position: absolute;

			
 
				+            top: 150px;

			
 
				+            left: 1140px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        .D7_position {

			
 
				+            position: absolute;

			
 
				+            top: 395px;

			
 
				+            left: 220px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .D8_position {

			
 
				+            position: absolute;

			
 
				+            top: 395px;

			
 
				+            left: 400px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .D9_position {

			
 
				+            position: absolute;

			
 
				+            top: 395px;

			
 
				+            left: 580px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .D10_position {

			
 
				+            position: absolute;

			
 
				+            top: 395px;

			
 
				+            left: 755px;

			
 
				+            width: 160px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .D11_position {

			
 
				+            position: absolute;

			
 
				+            top: 395px;

			
 
				+            left: 930px;

			
 
				+            width: 170px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .D12_position {

			
 
				+            position: absolute;

			
 
				+            top: 395px;

			
 
				+            left: 1115px;

			
 
				+            width: 165px;

			
 
				+            height: 240px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .DI1_position {

			
 
				+            position: absolute;

			
 
				+            top: 215px;

			
 
				+            left: 120px;

			
 
				+            width: 50px;

			
 
				+            height: 140px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .DI2_position {

			
 
				+            position: absolute;

			
 
				+            top: 425px;

			
 
				+            left: 120px;

			
 
				+            width: 50px;

			
 
				+            height: 140px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .DO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 195px;

			
 
				+            left: 1315px;

			
 
				+            width: 50px;

			
 
				+            height: 140px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+

			
 
				+        .DO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 470px;

			
 
				+            left: 1315px;

			
 
				+            width: 50px;

			
 
				+            height: 140px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+        }

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            bottom: 0px;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+        .actuator_status {

			
 
				+            width: 18px; 

			
 
				+            height: 18px; 

			
 
				+            background-color:black; 

			
 
				+            border-radius: 50%;

			
 
				+        }

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+        var status = '{{status}}';

			
 
				+

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title").text("乾燥貨櫃");

			
 
				+        });

			
 
				+

			
 
				+

			
 
				+    </script>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+            background-color:rgb(0, 238, 255);

			
 
				+        

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>

			
 
				+        </div>

			
 
				+        

			
 
				+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            Smart Coffee

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <div>

			
 
				+            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->

			
 
				+            <div id="DryContainer_pic" class="DryContainer_position">

			
 
				+                <img src="../static/img/web_dry_container.png" style="margin: auto;">

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 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>

			
 
				+

			
 
				+            <!-- 乾燥槽 D7 -->

			
 
				+            <div id="D7" tabindex="0" class="D7_position" role="button">

			
 
				+                D7 status

			
 
				+                <div id="D7_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D8 -->

			
 
				+            <div id="D8" tabindex="0" class="D8_position" role="button">

			
 
				+                D8 status

			
 
				+                <div id="D8_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D9 -->

			
 
				+            <div id="D9" tabindex="0" class="D9_position" role="button">

			
 
				+                D9 status

			
 
				+                <div id="D9_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D10 -->

			
 
				+            <div id="D10" tabindex="0" class="D10_position" role="button">

			
 
				+                D10 status

			
 
				+                <div id="D10_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D11 -->

			
 
				+            <div id="D11" tabindex="0" class="D11_position" role="button">

			
 
				+                D11 status

			
 
				+                <div id="D11_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D12 -->

			
 
				+            <div id="D12" tabindex="0" class="D12_position" role="button">

			
 
				+                D12 status

			
 
				+                <div id="D12_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DI1 -->

			
 
				+            <div id="DI1" tabindex="0" class="DI1_position" role="button">

			
 
				+                DI1 status

			
 
				+                <div id="DI1_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DI2 -->

			
 
				+            <div id="DI2" tabindex="0" class="DI2_position" role="button">

			
 
				+                DI2 status

			
 
				+                <div id="DI2_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DO1 -->

			
 
				+            <div id="DO1" tabindex="0" class="DO1_position" role="button">

			
 
				+                DO1 status

			
 
				+                <div id="DO1_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DO2 -->

			
 
				+            <div id="DO2" tabindex="0" class="DO2_position" role="button">

			
 
				+                DO2 status

			
 
				+                <div id="DO2_status"

			
 
				+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 乾燥槽互動視窗(模态框) -->

			
 
				+        <div class="modal fade" id="D_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 id="actuator_link" href="">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a id="sensor_link" href="">感測器狀態</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" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Vacuum" href="">真空吸料機</a>

			
 
				+                                                <!--<span id="tank_vacuum_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_threewayvalve_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="ThreeWayValve" href="">三通閥</a>

			
 
				+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>

			
 
				+                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_motor_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Motor" href="">馬達</a>

			
 
				+                                                <!--<span id="tank_motor_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_blower_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Blower" href="">鼓風機</a>

			
 
				+                                                <!--<span id="tank_blower_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_heater1_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Heater1" href="">加熱器 1</a>

			
 
				+                                                <!--<span id="tank_heater1_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_heater2_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Heater2" href="">加熱器 2</a>

			
 
				+                                                <!--<span id="tank_heater2_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_temp1_enable_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="TempEnable" href="">溫控開關</a>

			
 
				+                                                <!--<span id="tank_temp1_enable_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_temp1_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Temp" href="">設定溫度</a>

			
 
				+                                                <!--<span id="tank_temp1_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_solenoid_water_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="SolenoidWater" href="">排水電磁閥</a>

			
 
				+                                                <!--<span id="tank_solenoid_water_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_diskvalve_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="DiskValve" href="">蝴蝶閥</a>

			
 
				+                                                <!--<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>

			
 
				+                                                <a id="UltraSonic" href="">咖啡生豆高度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="UltraSonic_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="SHT11_Temp_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="SHT11_Humidity_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_Temp_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_Humidity_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_EC" href="">咖啡生豆 EC</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_EC_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="PA" href="">桶內壓力</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="PA_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->

			
 
				+        <div class="modal fade" id="DI_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <!-- 互動視窗 標題 -->

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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 id="actuator_link_input" href="">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a id="sensor_link_input" href="">感測器狀態</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="input_vacuum_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Vacuum_input" href="">真空吸料機</a>

			
 
				+                                                <!--<span id="tank_vacuum_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>

			
 
				+                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="DI_UltraSonic_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->

			
 
				+            <div class="modal fade" id="DO_Modal">

			
 
				+                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                    <div class="modal-content">

			
 
				+        

			
 
				+                        <!-- 互動視窗 標題 -->

			
 
				+                        <div class="modal-header">

			
 
				+                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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 id="actuator_link_output" href="">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</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="output_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <a id="Vacuum_output" href="">真空吸料機</a>

			
 
				+                                                    <!--<span id="tank_vacuum_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>

			
 
				+                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="DO_UltraSonic_t_status"></span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                            </table>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <script>

			
 
				+            function update_data_D(dtid) {

			
 
				+                console.log('dry_tank_id:' + dtid)

			
 
				+                // dtid = dry_tank_id

			
 
				+                $.get('/loading/D' + dtid, '', 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_threewayvalve == 0) {

			
 
				+                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_threewayvalve == 1) {

			
 
				+                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_diskvalve == 0) {

			
 
				+                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_diskvalve == 1) {

			
 
				+                        $("#tank_diskvalve_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_disinfect == 0) {

			
 
				+                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_disinfect == 1) {

			
 
				+                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_water == 0) {

			
 
				+                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_water == 1) {

			
 
				+                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_motor == 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_blower == 0) {

			
 
				+                        $("#tank_blower_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_blower == 1) {

			
 
				+                        $("#tank_blower_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_blower_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#tank_heater1_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#tank_heater1_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_heater1_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_heater2 == 0) {

			
 
				+                        $("#tank_heater2_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_heater2 == 1) {

			
 
				+                        $("#tank_heater2_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_heater2_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_temp1_enable == 0) {

			
 
				+                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_temp1_enable == 1) {

			
 
				+                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_temp1 == 0) {

			
 
				+                        $("#tank_temp1_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_temp1 > 0) {

			
 
				+                        $("#tank_temp1_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_temp1_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#tank_vacuum_t_status").text(res.tank_vacuum);

			
 
				+                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);

			
 
				+                    $("#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("乾燥槽 D" + dtid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum').attr("title", "使用者無修改權限")

			
 
				+                    $('#ThreeWayValve').attr("title", "使用者無修改權限")

			
 
				+                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")

			
 
				+                    $('#Motor').attr("title", "使用者無修改權限")

			
 
				+                    $('#Blower').attr("title", "使用者無修改權限")

			
 
				+                    $('#Heater1').attr("title", "使用者無修改權限")

			
 
				+                    $('#Heater2').attr("title", "使用者無修改權限")

			
 
				+                    $('#TempEnable').attr("title", "使用者無修改權限")

			
 
				+                    $('#Temp').attr("title", "使用者無修改權限")

			
 
				+                    $('#SolenoidWater').attr("title", "使用者無修改權限")

			
 
				+                    $('#DiskValve').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)

			
 
				+                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)

			
 
				+                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)

			
 
				+                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)

			
 
				+                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)

			
 
				+                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)

			
 
				+                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)

			
 
				+                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)

			
 
				+                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)

			
 
				+                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)

			
 
				+                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)

			
 
				+                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)

			
 
				+                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)

			
 
				+                }

			
 
				+                

			
 
				+

			
 
				+                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)

			
 
				+                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)

			
 
				+                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)

			
 
				+                $('#PA').attr("href", "/chart_D/PA/" + dtid)

			
 
				+                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)

			
 
				+                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)

			
 
				+                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)

			
 
				+                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)

			
 
				+

			
 
				+                

			
 
				+                

			
 
				+                $('#D_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+

			
 
				+

			
 
				+            function update_data_DI(ditid){

			
 
				+                console.log('dry_input_tank_id:' + ditid)

			
 
				+                // ditid = dry_input_tank_id

			
 
				+                $.get('/loading/DI' + ditid, '', function (res) {

			
 
				+                    if (res.input_vacuum == 0) {

			
 
				+                        $("#input_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.input_vacuum == 1) {

			
 
				+                        $("#input_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#input_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+                

			
 
				+                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum_input').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)

			
 
				+                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)

			
 
				+                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)

			
 
				+                }

			
 
				+                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)

			
 
				+                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)

			
 
				+                $('#DI_Modal').modal('show');

			
 
				+            };

			
 
				+

			
 
				+            function update_data_DO(dotid){

			
 
				+                console.log('dry_output_tank_id:' + dotid)

			
 
				+                // dotid = dry_output_tank_id

			
 
				+                $.get('/loading/DO' + dotid, '', function (res) {

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#output_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#output_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#output_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+                

			
 
				+                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum_output').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)

			
 
				+                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)

			
 
				+                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)

			
 
				+                }

			
 
				+                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)

			
 
				+                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)

			
 
				+                $('#DO_Modal').modal('show');

			
 
				+            };

			
 
				+

			
 
				+

			
 
				+            var button_D1 = document.getElementById('D1');

			
 
				+            button_D1.addEventListener('click', function () { update_data_D("1") });

			
 
				+

			
 
				+            var button_D2 = document.getElementById('D2');

			
 
				+            button_D2.addEventListener('click', function () { update_data_D("2") });

			
 
				+

			
 
				+            var button_D3 = document.getElementById('D3');

			
 
				+            button_D3.addEventListener('click', function () { update_data_D("3") });

			
 
				+

			
 
				+            var button_D4 = document.getElementById('D4');

			
 
				+            button_D4.addEventListener('click', function () { update_data_D("4") });

			
 
				+

			
 
				+            var button_D5 = document.getElementById('D5');

			
 
				+            button_D5.addEventListener('click', function () { update_data_D("5") });

			
 
				+

			
 
				+            var button_D6 = document.getElementById('D6');

			
 
				+            button_D6.addEventListener('click', function () { update_data_D("6") });

			
 
				+

			
 
				+            var button_D7 = document.getElementById('D7');

			
 
				+            button_D7.addEventListener('click', function () { update_data_D("7") });

			
 
				+

			
 
				+            var button_D8 = document.getElementById('D8');

			
 
				+            button_D8.addEventListener('click', function () { update_data_D("8") });

			
 
				+

			
 
				+            var button_D9 = document.getElementById('D9');

			
 
				+            button_D9.addEventListener('click', function () { update_data_D("9") });

			
 
				+

			
 
				+            var button_D10 = document.getElementById('D10');

			
 
				+            button_D10.addEventListener('click', function () { update_data_D("10") });

			
 
				+

			
 
				+            var button_D11 = document.getElementById('D11');

			
 
				+            button_D11.addEventListener('click', function () { update_data_D("11") });

			
 
				+

			
 
				+            var button_D12 = document.getElementById('D12');

			
 
				+            button_D12.addEventListener('click', function () { update_data_D("12") });

			
 
				+

			
 
				+            var button_DI1 = document.getElementById('DI1');

			
 
				+            button_DI1.addEventListener('click', function () { update_data_DI("1") });

			
 
				+

			
 
				+            var button_DI2 = document.getElementById('DI2');

			
 
				+            button_DI2.addEventListener('click', function () { update_data_DI("2") });

			
 
				+

			
 
				+            var button_DO1 = document.getElementById('DO1');

			
 
				+            button_DO1.addEventListener('click', function () { update_data_DO("1") });

			
 
				+

			
 
				+            var button_DO2 = document.getElementById('DO2');

			
 
				+            button_DO2.addEventListener('click', function () { update_data_DO("2") });

			
 
				+

			
 
				+        </script>

			
 
				+<!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+-->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/dry_1008???.html
+++ b/app/templates/dry_1008???.html
@@ -0,0 +1,982 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+        .DryContainer_position {

			
 
				+            position: absolute;

			
 
				+            top: 95px;

			
 
				+            left: 55px;

			
 
				+        }

			
 
				+

			
 
				+        .D1_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 245px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D2_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 425px;

			
 
				+            width: 155px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D3_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 605px;

			
 
				+            width: 160px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D4_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 780px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D5_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 960px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D6_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 1140px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D7_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 220px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D8_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 400px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D9_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 580px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D10_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 755px;

			
 
				+            width: 160px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D11_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 930px;

			
 
				+            width: 170px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D12_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 1115px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DI1_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 120px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DI2_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 110px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 1315px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 1315px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            bottom: 0px;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+        .actuator_status {

			
 
				+            width: 18px; 

			
 
				+            height: 18px; 

			
 
				+            background-color:black; 

			
 
				+            border-radius: 50%;

			
 
				+        }

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+        var status = '{{status}}';

			
 
				+

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title").text("乾燥貨櫃");

			
 
				+        });

			
 
				+

			
 
				+

			
 
				+    </script>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+            background-color:rgb(0, 238, 255);

			
 
				+        

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>

			
 
				+        </div>

			
 
				+        

			
 
				+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            Smart Coffee

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <div>

			
 
				+            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->

			
 
				+            <div id="DryContainer_pic" class="DryContainer_position">

			
 
				+                <img src="../static/img/web_dry_container.png" style="margin: auto;">

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D1 START-->

			
 
				+            <div id="D1" tabindex="0" class="D1_position" role="button">

			
 
				+                D1 status

			
 
				+                <!-- D1 狀態點點-->

			
 
				+                <div id="D1_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+            <!-- 乾燥槽 D1 END-->

			
 
				+

			
 
				+            <!-- 乾燥槽 D2 -->

			
 
				+            <div id="D2" tabindex="0" class="D2_position" role="button">

			
 
				+                D2 status

			
 
				+                <div id="D2_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D3 -->

			
 
				+            <div id="D3" tabindex="0" class="D3_position" role="button">

			
 
				+                D3 status

			
 
				+                <div id="D3_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D4 -->

			
 
				+            <div id="D4" tabindex="0" class="D4_position" role="button">

			
 
				+                D4 status

			
 
				+                <div id="D4_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D5 -->

			
 
				+            <div id="D5" tabindex="0" class="D5_position" role="button">

			
 
				+                D5 status

			
 
				+                <div id="D5_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D6 -->

			
 
				+            <div id="D6" tabindex="0" class="D6_position" role="button">

			
 
				+                D6 status

			
 
				+                <div id="D6_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D7 -->

			
 
				+            <div id="D7" tabindex="0" class="D7_position" role="button">

			
 
				+                D7 status

			
 
				+                <div id="D7_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D8 -->

			
 
				+            <div id="D8" tabindex="0" class="D8_position" role="button">

			
 
				+                D8 status

			
 
				+                <div id="D8_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D9 -->

			
 
				+            <div id="D9" tabindex="0" class="D9_position" role="button">

			
 
				+                D9 status

			
 
				+                <div id="D9_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D10 -->

			
 
				+            <div id="D10" tabindex="0" class="D10_position" role="button">

			
 
				+                D10 status

			
 
				+                <div id="D10_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D11 -->

			
 
				+            <div id="D11" tabindex="0" class="D11_position" role="button">

			
 
				+                D11 status

			
 
				+                <div id="D11_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D12 -->

			
 
				+            <div id="D12" tabindex="0" class="D12_position" role="button">

			
 
				+                D12 status

			
 
				+                <div id="D12_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DI1 -->

			
 
				+            <div id="DI1" tabindex="0" class="DI1_position" role="button">

			
 
				+                DI1 status

			
 
				+                <div id="DI1_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DI2 -->

			
 
				+            <div id="DI2" tabindex="0" class="DI2_position" role="button">

			
 
				+                DI2 status

			
 
				+                <div id="DI2_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DO1 -->

			
 
				+            <div id="DO1" tabindex="0" class="DO1_position" role="button">

			
 
				+                DO1 status

			
 
				+                <div id="DO1_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DO2 -->

			
 
				+            <div id="DO2" tabindex="0" class="DO2_position" role="button">

			
 
				+                DO2 status

			
 
				+                <div id="DO2_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 乾燥槽互動視窗(模态框) -->

			
 
				+        <div class="modal fade" id="D_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 id="actuator_link" href="">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a id="sensor_link" href="">感測器狀態</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" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Vacuum" href="">真空吸料機</a>

			
 
				+                                                <!--<span id="tank_vacuum_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_threewayvalve_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="ThreeWayValve" href="">三通閥</a>

			
 
				+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>

			
 
				+                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_motor_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Motor" href="">馬達</a>

			
 
				+                                                <!--<span id="tank_motor_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_blower_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Blower" href="">鼓風機</a>

			
 
				+                                                <!--<span id="tank_blower_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_heater1_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Heater1" href="">加熱器 1</a>

			
 
				+                                                <!--<span id="tank_heater1_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_heater2_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Heater2" href="">加熱器 2</a>

			
 
				+                                                <!--<span id="tank_heater2_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_temp1_enable_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="TempEnable" href="">溫控開關</a>

			
 
				+                                                <!--<span id="tank_temp1_enable_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_temp1_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Temp" href="">設定溫度</a>

			
 
				+                                                <!--<span id="tank_temp1_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_solenoid_water_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="SolenoidWater" href="">排水電磁閥</a>

			
 
				+                                                <!--<span id="tank_solenoid_water_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_diskvalve_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="DiskValve" href="">蝴蝶閥</a>

			
 
				+                                                <!--<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>

			
 
				+                                                <a id="UltraSonic" href="">咖啡生豆高度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="UltraSonic_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="SHT11_Temp_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="SHT11_Humidity_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_Temp_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_Humidity_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_EC" href="">咖啡生豆 EC</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_EC_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="PA" href="">桶內壓力</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="PA_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->

			
 
				+        <div class="modal fade" id="DI_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <!-- 互動視窗 標題 -->

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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 id="actuator_link_input" href="">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a id="sensor_link_input" href="">感測器狀態</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="input_vacuum_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Vacuum_input" href="">真空吸料機</a>

			
 
				+                                                <!--<span id="tank_vacuum_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>

			
 
				+                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="DI_UltraSonic_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->

			
 
				+            <div class="modal fade" id="DO_Modal">

			
 
				+                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                    <div class="modal-content">

			
 
				+        

			
 
				+                        <!-- 互動視窗 標題 -->

			
 
				+                        <div class="modal-header">

			
 
				+                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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 id="actuator_link_output" href="">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</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="output_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <a id="Vacuum_output" href="">真空吸料機</a>

			
 
				+                                                    <!--<span id="tank_vacuum_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>

			
 
				+                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="DO_UltraSonic_t_status"></span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                            </table>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <script>

			
 
				+            function update_data_D(dtid) {

			
 
				+                console.log('dry_tank_id:' + dtid)

			
 
				+                // dtid = dry_tank_id

			
 
				+                $.get('/loading/D' + dtid, '', 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_threewayvalve == 0) {

			
 
				+                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_threewayvalve == 1) {

			
 
				+                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_diskvalve == 0) {

			
 
				+                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_diskvalve == 1) {

			
 
				+                        $("#tank_diskvalve_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_disinfect == 0) {

			
 
				+                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_disinfect == 1) {

			
 
				+                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_water == 0) {

			
 
				+                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_water == 1) {

			
 
				+                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_motor == 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_blower == 0) {

			
 
				+                        $("#tank_blower_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_blower == 1) {

			
 
				+                        $("#tank_blower_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_blower_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#tank_heater1_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#tank_heater1_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_heater1_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_heater2 == 0) {

			
 
				+                        $("#tank_heater2_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_heater2 == 1) {

			
 
				+                        $("#tank_heater2_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_heater2_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_temp1_enable == 0) {

			
 
				+                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_temp1_enable == 1) {

			
 
				+                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_temp1 == 0) {

			
 
				+                        $("#tank_temp1_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_temp1 > 0) {

			
 
				+                        $("#tank_temp1_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_temp1_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#tank_vacuum_t_status").text(res.tank_vacuum);

			
 
				+                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);

			
 
				+                    $("#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("乾燥槽 D" + dtid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum').attr("title", "使用者無修改權限")

			
 
				+                    $('#ThreeWayValve').attr("title", "使用者無修改權限")

			
 
				+                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")

			
 
				+                    $('#Motor').attr("title", "使用者無修改權限")

			
 
				+                    $('#Blower').attr("title", "使用者無修改權限")

			
 
				+                    $('#Heater1').attr("title", "使用者無修改權限")

			
 
				+                    $('#Heater2').attr("title", "使用者無修改權限")

			
 
				+                    $('#TempEnable').attr("title", "使用者無修改權限")

			
 
				+                    $('#Temp').attr("title", "使用者無修改權限")

			
 
				+                    $('#SolenoidWater').attr("title", "使用者無修改權限")

			
 
				+                    $('#DiskValve').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)

			
 
				+                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)

			
 
				+                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)

			
 
				+                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)

			
 
				+                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)

			
 
				+                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)

			
 
				+                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)

			
 
				+                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)

			
 
				+                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)

			
 
				+                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)

			
 
				+                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)

			
 
				+                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)

			
 
				+                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)

			
 
				+                }

			
 
				+                

			
 
				+

			
 
				+                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)

			
 
				+                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)

			
 
				+                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)

			
 
				+                $('#PA').attr("href", "/chart_D/PA/" + dtid)

			
 
				+                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)

			
 
				+                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)

			
 
				+                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)

			
 
				+                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)

			
 
				+

			
 
				+                

			
 
				+                

			
 
				+                $('#D_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+

			
 
				+

			
 
				+            function update_data_DI(ditid){

			
 
				+                console.log('dry_input_tank_id:' + ditid)

			
 
				+                // ditid = dry_input_tank_id

			
 
				+                $.get('/loading/DI' + ditid, '', function (res) {

			
 
				+                    if (res.input_vacuum == 0) {

			
 
				+                        $("#input_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.input_vacuum == 1) {

			
 
				+                        $("#input_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#input_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+                

			
 
				+                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum_input').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)

			
 
				+                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)

			
 
				+                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)

			
 
				+                }

			
 
				+                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)

			
 
				+                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)

			
 
				+                $('#DI_Modal').modal('show');

			
 
				+            };

			
 
				+

			
 
				+            function update_data_DO(dotid){

			
 
				+                console.log('dry_output_tank_id:' + dotid)

			
 
				+                // dotid = dry_output_tank_id

			
 
				+                $.get('/loading/DO' + dotid, '', function (res) {

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#output_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#output_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#output_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+                

			
 
				+                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum_output').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)

			
 
				+                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)

			
 
				+                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)

			
 
				+                }

			
 
				+                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)

			
 
				+                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)

			
 
				+                $('#DO_Modal').modal('show');

			
 
				+            };

			
 
				+

			
 
				+

			
 
				+            var button_D1 = document.getElementById('D1');

			
 
				+            button_D1.addEventListener('click', function () { update_data_D("1") });

			
 
				+

			
 
				+            var button_D2 = document.getElementById('D2');

			
 
				+            button_D2.addEventListener('click', function () { update_data_D("2") });

			
 
				+

			
 
				+            var button_D3 = document.getElementById('D3');

			
 
				+            button_D3.addEventListener('click', function () { update_data_D("3") });

			
 
				+

			
 
				+            var button_D4 = document.getElementById('D4');

			
 
				+            button_D4.addEventListener('click', function () { update_data_D("4") });

			
 
				+

			
 
				+            var button_D5 = document.getElementById('D5');

			
 
				+            button_D5.addEventListener('click', function () { update_data_D("5") });

			
 
				+

			
 
				+            var button_D6 = document.getElementById('D6');

			
 
				+            button_D6.addEventListener('click', function () { update_data_D("6") });

			
 
				+

			
 
				+            var button_D7 = document.getElementById('D7');

			
 
				+            button_D7.addEventListener('click', function () { update_data_D("7") });

			
 
				+

			
 
				+            var button_D8 = document.getElementById('D8');

			
 
				+            button_D8.addEventListener('click', function () { update_data_D("8") });

			
 
				+

			
 
				+            var button_D9 = document.getElementById('D9');

			
 
				+            button_D9.addEventListener('click', function () { update_data_D("9") });

			
 
				+

			
 
				+            var button_D10 = document.getElementById('D10');

			
 
				+            button_D10.addEventListener('click', function () { update_data_D("10") });

			
 
				+

			
 
				+            var button_D11 = document.getElementById('D11');

			
 
				+            button_D11.addEventListener('click', function () { update_data_D("11") });

			
 
				+

			
 
				+            var button_D12 = document.getElementById('D12');

			
 
				+            button_D12.addEventListener('click', function () { update_data_D("12") });

			
 
				+

			
 
				+            var button_DI1 = document.getElementById('DI1');

			
 
				+            button_DI1.addEventListener('click', function () { update_data_DI("1") });

			
 
				+

			
 
				+            var button_DI2 = document.getElementById('DI2');

			
 
				+            button_DI2.addEventListener('click', function () { update_data_DI("2") });

			
 
				+

			
 
				+            var button_DO1 = document.getElementById('DO1');

			
 
				+            button_DO1.addEventListener('click', function () { update_data_DO("1") });

			
 
				+

			
 
				+            var button_DO2 = document.getElementById('DO2');

			
 
				+            button_DO2.addEventListener('click', function () { update_data_DO("2") });

			
 
				+

			
 
				+        </script>

			
 
				+<!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+-->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/dry_1008????.html
+++ b/app/templates/dry_1008????.html
@@ -0,0 +1,982 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+        .DryContainer_position {

			
 
				+            position: absolute;

			
 
				+            top: 180px;

			
 
				+            left: 270px;

			
 
				+        }

			
 
				+

			
 
				+        .D1_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 245px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D2_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 425px;

			
 
				+            width: 155px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D3_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 605px;

			
 
				+            width: 160px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D4_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 780px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D5_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 960px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D6_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 1140px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D7_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 220px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D8_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 400px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D9_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 580px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D10_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 755px;

			
 
				+            width: 160px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D11_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 930px;

			
 
				+            width: 170px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .D12_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 1115px;

			
 
				+            width: 165px;

			
 
				+            height: 50px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DI1_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 120px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DI2_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 110px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DO1_position {

			
 
				+            position: absolute;

			
 
				+            top: 130px;

			
 
				+            left: 1315px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+

			
 
				+        .DO2_position {

			
 
				+            position: absolute;

			
 
				+            top: 615px;

			
 
				+            left: 1315px;

			
 
				+            width: 100px;

			
 
				+            height: 140px;

			
 
				+            text-align: center;

			
 
				+            font-weight: bold;

			
 
				+        }

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            bottom: 0px;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+        .actuator_status {

			
 
				+            width: 18px; 

			
 
				+            height: 18px; 

			
 
				+            background-color:black; 

			
 
				+            border-radius: 50%;

			
 
				+        }

			
 
				+    </style>

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 10秒 刷新網頁一次

			
 
				+        var WebRestart

			
 
				+        // WebRestart = setTimeout(function () { location.reload() }, 10000);

			
 
				+        var status = '{{status}}';

			
 
				+

			
 
				+        $(document).ready(function(){

			
 
				+            $("#coffee_title").text("乾燥貨櫃");

			
 
				+        });

			
 
				+

			
 
				+

			
 
				+    </script>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!--

			
 
				+            background-color:rgb(0, 238, 255);

			
 
				+        

			
 
				+        <div style="text-align: left;">

			
 
				+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>

			
 
				+        </div>

			
 
				+        <div style="text-align: right;">

			
 
				+            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>

			
 
				+        </div>

			
 
				+        

			
 
				+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">

			
 
				+            Smart Coffee

			
 
				+        </div>

			
 
				+        -->

			
 
				+

			
 
				+        <div>

			
 
				+            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->

			
 
				+            <div id="DryContainer_pic" class="DryContainer_position">

			
 
				+                <img src="../static/img/web_dry_container.png" style="margin: auto; width: 1000px;" >

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D1 START-->

			
 
				+            <div id="D1" tabindex="0" class="D1_position" role="button">

			
 
				+                D1 status

			
 
				+                <!-- D1 狀態點點-->

			
 
				+                <div id="D1_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+            <!-- 乾燥槽 D1 END-->

			
 
				+

			
 
				+            <!-- 乾燥槽 D2 -->

			
 
				+            <div id="D2" tabindex="0" class="D2_position" role="button">

			
 
				+                D2 status

			
 
				+                <div id="D2_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D3 -->

			
 
				+            <div id="D3" tabindex="0" class="D3_position" role="button">

			
 
				+                D3 status

			
 
				+                <div id="D3_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D4 -->

			
 
				+            <div id="D4" tabindex="0" class="D4_position" role="button">

			
 
				+                D4 status

			
 
				+                <div id="D4_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D5 -->

			
 
				+            <div id="D5" tabindex="0" class="D5_position" role="button">

			
 
				+                D5 status

			
 
				+                <div id="D5_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D6 -->

			
 
				+            <div id="D6" tabindex="0" class="D6_position" role="button">

			
 
				+                D6 status

			
 
				+                <div id="D6_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D7 -->

			
 
				+            <div id="D7" tabindex="0" class="D7_position" role="button">

			
 
				+                D7 status

			
 
				+                <div id="D7_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D8 -->

			
 
				+            <div id="D8" tabindex="0" class="D8_position" role="button">

			
 
				+                D8 status

			
 
				+                <div id="D8_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D9 -->

			
 
				+            <div id="D9" tabindex="0" class="D9_position" role="button">

			
 
				+                D9 status

			
 
				+                <div id="D9_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D10 -->

			
 
				+            <div id="D10" tabindex="0" class="D10_position" role="button">

			
 
				+                D10 status

			
 
				+                <div id="D10_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D11 -->

			
 
				+            <div id="D11" tabindex="0" class="D11_position" role="button">

			
 
				+                D11 status

			
 
				+                <div id="D11_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽 D12 -->

			
 
				+            <div id="D12" tabindex="0" class="D12_position" role="button">

			
 
				+                D12 status

			
 
				+                <div id="D12_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DI1 -->

			
 
				+            <div id="DI1" tabindex="0" class="DI1_position" role="button">

			
 
				+                DI1 status

			
 
				+                <div id="DI1_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DI2 -->

			
 
				+            <div id="DI2" tabindex="0" class="DI2_position" role="button">

			
 
				+                DI2 status

			
 
				+                <div id="DI2_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DO1 -->

			
 
				+            <div id="DO1" tabindex="0" class="DO1_position" role="button">

			
 
				+                DO1 status

			
 
				+                <div id="DO1_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+

			
 
				+            <!-- 乾燥槽_入料儲豆槽 DO2 -->

			
 
				+            <div id="DO2" tabindex="0" class="DO2_position" role="button">

			
 
				+                DO2 status

			
 
				+                <div id="DO2_status"

			
 
				+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 乾燥槽互動視窗(模态框) -->

			
 
				+        <div class="modal fade" id="D_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 id="actuator_link" href="">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a id="sensor_link" href="">感測器狀態</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" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Vacuum" href="">真空吸料機</a>

			
 
				+                                                <!--<span id="tank_vacuum_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_threewayvalve_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="ThreeWayValve" href="">三通閥</a>

			
 
				+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>

			
 
				+                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_motor_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Motor" href="">馬達</a>

			
 
				+                                                <!--<span id="tank_motor_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_blower_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Blower" href="">鼓風機</a>

			
 
				+                                                <!--<span id="tank_blower_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_heater1_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Heater1" href="">加熱器 1</a>

			
 
				+                                                <!--<span id="tank_heater1_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_heater2_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Heater2" href="">加熱器 2</a>

			
 
				+                                                <!--<span id="tank_heater2_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_temp1_enable_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="TempEnable" href="">溫控開關</a>

			
 
				+                                                <!--<span id="tank_temp1_enable_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_temp1_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Temp" href="">設定溫度</a>

			
 
				+                                                <!--<span id="tank_temp1_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_solenoid_water_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="SolenoidWater" href="">排水電磁閥</a>

			
 
				+                                                <!--<span id="tank_solenoid_water_t_status"></span>-->

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <div id="tank_diskvalve_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="DiskValve" href="">蝴蝶閥</a>

			
 
				+                                                <!--<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>

			
 
				+                                                <a id="UltraSonic" href="">咖啡生豆高度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="UltraSonic_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="SHT11_Temp_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="SHT11_Humidity_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_Temp_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_Humidity_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="soil_EC" href="">咖啡生豆 EC</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="soil_EC_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="PA" href="">桶內壓力</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="PA_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->

			
 
				+        <div class="modal fade" id="DI_Modal">

			
 
				+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                <div class="modal-content">

			
 
				+

			
 
				+                    <!-- 互動視窗 標題 -->

			
 
				+                    <div class="modal-header">

			
 
				+                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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 id="actuator_link_input" href="">制動器狀態</a></strong></td>

			
 
				+                                <td><strong><a id="sensor_link_input" href="">感測器狀態</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="input_vacuum_status" class="actuator_status">

			
 
				+                                                </div>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <a id="Vacuum_input" href="">真空吸料機</a>

			
 
				+                                                <!--<span id="tank_vacuum_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>

			
 
				+                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>

			
 
				+                                            </td>

			
 
				+                                            <td>

			
 
				+                                                <span id="DI_UltraSonic_t_status"></span>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                        <tr>

			
 
				+                                            <td>

			
 
				+                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                            </td>

			
 
				+                                        </tr>

			
 
				+                                    </table>

			
 
				+                                </td>

			
 
				+                            </tr>

			
 
				+                        </table>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->

			
 
				+            <div class="modal fade" id="DO_Modal">

			
 
				+                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">

			
 
				+                    <div class="modal-content">

			
 
				+        

			
 
				+                        <!-- 互動視窗 標題 -->

			
 
				+                        <div class="modal-header">

			
 
				+                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</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 id="actuator_link_output" href="">制動器狀態</a></strong></td>

			
 
				+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</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="output_vacuum_status"

			
 
				+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">

			
 
				+                                                    </div>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <a id="Vacuum_output" href="">真空吸料機</a>

			
 
				+                                                    <!--<span id="tank_vacuum_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>

			
 
				+                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>

			
 
				+                                                </td>

			
 
				+                                                <td>

			
 
				+                                                    <span id="DO_UltraSonic_t_status"></span>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                            <tr>

			
 
				+                                                <td>

			
 
				+                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>

			
 
				+                                                </td>

			
 
				+                                            </tr>

			
 
				+                                        </table>

			
 
				+                                    </td>

			
 
				+                                </tr>

			
 
				+                            </table>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+            </div>

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        <script>

			
 
				+            function update_data_D(dtid) {

			
 
				+                console.log('dry_tank_id:' + dtid)

			
 
				+                // dtid = dry_tank_id

			
 
				+                $.get('/loading/D' + dtid, '', 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_threewayvalve == 0) {

			
 
				+                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_threewayvalve == 1) {

			
 
				+                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_diskvalve == 0) {

			
 
				+                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_diskvalve == 1) {

			
 
				+                        $("#tank_diskvalve_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_disinfect == 0) {

			
 
				+                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_disinfect == 1) {

			
 
				+                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_solenoid_water == 0) {

			
 
				+                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_solenoid_water == 1) {

			
 
				+                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_motor == 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {

			
 
				+                        $("#tank_motor_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_motor_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_blower == 0) {

			
 
				+                        $("#tank_blower_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_blower == 1) {

			
 
				+                        $("#tank_blower_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_blower_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_heater1 == 0) {

			
 
				+                        $("#tank_heater1_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_heater1 == 1) {

			
 
				+                        $("#tank_heater1_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_heater1_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_heater2 == 0) {

			
 
				+                        $("#tank_heater2_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_heater2 == 1) {

			
 
				+                        $("#tank_heater2_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_heater2_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_temp1_enable == 0) {

			
 
				+                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_temp1_enable == 1) {

			
 
				+                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    if (res.tank_temp1 == 0) {

			
 
				+                        $("#tank_temp1_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.tank_temp1 > 0) {

			
 
				+                        $("#tank_temp1_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#tank_temp1_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#tank_vacuum_t_status").text(res.tank_vacuum);

			
 
				+                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);

			
 
				+                    $("#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("乾燥槽 D" + dtid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum').attr("title", "使用者無修改權限")

			
 
				+                    $('#ThreeWayValve').attr("title", "使用者無修改權限")

			
 
				+                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")

			
 
				+                    $('#Motor').attr("title", "使用者無修改權限")

			
 
				+                    $('#Blower').attr("title", "使用者無修改權限")

			
 
				+                    $('#Heater1').attr("title", "使用者無修改權限")

			
 
				+                    $('#Heater2').attr("title", "使用者無修改權限")

			
 
				+                    $('#TempEnable').attr("title", "使用者無修改權限")

			
 
				+                    $('#Temp').attr("title", "使用者無修改權限")

			
 
				+                    $('#SolenoidWater').attr("title", "使用者無修改權限")

			
 
				+                    $('#DiskValve').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)

			
 
				+                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)

			
 
				+                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)

			
 
				+                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)

			
 
				+                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)

			
 
				+                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)

			
 
				+                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)

			
 
				+                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)

			
 
				+                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)

			
 
				+                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)

			
 
				+                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)

			
 
				+                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)

			
 
				+                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)

			
 
				+                }

			
 
				+                

			
 
				+

			
 
				+                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)

			
 
				+                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)

			
 
				+                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)

			
 
				+                $('#PA').attr("href", "/chart_D/PA/" + dtid)

			
 
				+                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)

			
 
				+                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)

			
 
				+                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)

			
 
				+                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)

			
 
				+

			
 
				+                

			
 
				+                

			
 
				+                $('#D_Modal').modal('show');

			
 
				+            }

			
 
				+

			
 
				+

			
 
				+

			
 
				+            function update_data_DI(ditid){

			
 
				+                console.log('dry_input_tank_id:' + ditid)

			
 
				+                // ditid = dry_input_tank_id

			
 
				+                $.get('/loading/DI' + ditid, '', function (res) {

			
 
				+                    if (res.input_vacuum == 0) {

			
 
				+                        $("#input_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.input_vacuum == 1) {

			
 
				+                        $("#input_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#input_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+                

			
 
				+                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum_input').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)

			
 
				+                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)

			
 
				+                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)

			
 
				+                }

			
 
				+                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)

			
 
				+                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)

			
 
				+                $('#DI_Modal').modal('show');

			
 
				+            };

			
 
				+

			
 
				+            function update_data_DO(dotid){

			
 
				+                console.log('dry_output_tank_id:' + dotid)

			
 
				+                // dotid = dry_output_tank_id

			
 
				+                $.get('/loading/DO' + dotid, '', function (res) {

			
 
				+                    if (res.output_vacuum == 0) {

			
 
				+                        $("#output_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                    } else if (res.output_vacuum == 1) {

			
 
				+                        $("#output_vacuum_status").css("background-color", "forestgreen")

			
 
				+                    } else { $("#output_vacuum_status").css("background-color", "crimson") }

			
 
				+

			
 
				+                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);

			
 
				+

			
 
				+                }, 'json');

			
 
				+                

			
 
				+                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")

			
 
				+

			
 
				+                if (status == 2) {

			
 
				+                    $('#actuator_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#sensor_link').attr("title", "使用者無修改權限")

			
 
				+                    $('#Vacuum_output').attr("title", "使用者無修改權限")

			
 
				+                } else if ( (status == 0) || (status == 1) ) {

			
 
				+                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)

			
 
				+                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)

			
 
				+                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)

			
 
				+                }

			
 
				+                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)

			
 
				+                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)

			
 
				+                $('#DO_Modal').modal('show');

			
 
				+            };

			
 
				+

			
 
				+

			
 
				+            var button_D1 = document.getElementById('D1');

			
 
				+            button_D1.addEventListener('click', function () { update_data_D("1") });

			
 
				+

			
 
				+            var button_D2 = document.getElementById('D2');

			
 
				+            button_D2.addEventListener('click', function () { update_data_D("2") });

			
 
				+

			
 
				+            var button_D3 = document.getElementById('D3');

			
 
				+            button_D3.addEventListener('click', function () { update_data_D("3") });

			
 
				+

			
 
				+            var button_D4 = document.getElementById('D4');

			
 
				+            button_D4.addEventListener('click', function () { update_data_D("4") });

			
 
				+

			
 
				+            var button_D5 = document.getElementById('D5');

			
 
				+            button_D5.addEventListener('click', function () { update_data_D("5") });

			
 
				+

			
 
				+            var button_D6 = document.getElementById('D6');

			
 
				+            button_D6.addEventListener('click', function () { update_data_D("6") });

			
 
				+

			
 
				+            var button_D7 = document.getElementById('D7');

			
 
				+            button_D7.addEventListener('click', function () { update_data_D("7") });

			
 
				+

			
 
				+            var button_D8 = document.getElementById('D8');

			
 
				+            button_D8.addEventListener('click', function () { update_data_D("8") });

			
 
				+

			
 
				+            var button_D9 = document.getElementById('D9');

			
 
				+            button_D9.addEventListener('click', function () { update_data_D("9") });

			
 
				+

			
 
				+            var button_D10 = document.getElementById('D10');

			
 
				+            button_D10.addEventListener('click', function () { update_data_D("10") });

			
 
				+

			
 
				+            var button_D11 = document.getElementById('D11');

			
 
				+            button_D11.addEventListener('click', function () { update_data_D("11") });

			
 
				+

			
 
				+            var button_D12 = document.getElementById('D12');

			
 
				+            button_D12.addEventListener('click', function () { update_data_D("12") });

			
 
				+

			
 
				+            var button_DI1 = document.getElementById('DI1');

			
 
				+            button_DI1.addEventListener('click', function () { update_data_DI("1") });

			
 
				+

			
 
				+            var button_DI2 = document.getElementById('DI2');

			
 
				+            button_DI2.addEventListener('click', function () { update_data_DI("2") });

			
 
				+

			
 
				+            var button_DO1 = document.getElementById('DO1');

			
 
				+            button_DO1.addEventListener('click', function () { update_data_DO("1") });

			
 
				+

			
 
				+            var button_DO2 = document.getElementById('DO2');

			
 
				+            button_DO2.addEventListener('click', function () { update_data_DO("2") });

			
 
				+

			
 
				+        </script>

			
 
				+<!--

			
 
				+        <footer class="footer">

			
 
				+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">

			
 
				+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有

			
 
				+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+-->

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/dry_1118????????.html
+++ b/app/templates/dry_1118????????.html
--- a/app/templates/dry_auto.html
+++ b/app/templates/dry_auto.html
--- a/app/templates/dry_block.html
+++ b/app/templates/dry_block.html
@@ -0,0 +1,835 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var dtn = '{{tid}}';

			
 
				+        var status = '{{status}}';

			
 
				+        console.log('dtn:' + dtn)

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#coffee_title_pc").text("乾燥槽積木程式介面");

			
 
				+            $("#coffee_title_phone").text("乾燥槽積木");

			
 
				+

			
 
				+            if (status == 2) {

			
 
				+                $('input').prop('disabled', true);

			
 
				+                $('button').prop('disabled', true);

			
 
				+            } else if ( (status == 0) || (status == 1) ) {

			
 
				+                $('input').prop('disabled', false);

			
 
				+                $('button').prop('disabled', false);   

			
 
				+            }

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .newcondition_css {

			
 
				+            padding: 10px;

			
 
				+            margin-top: 10px;

			
 
				+            background-color:honeydew;

			
 
				+        }

			
 
				+        hr {

			
 
				+            margin-top: 5px;

			
 
				+            margin-bottom: 5px;

			
 
				+        }

			
 
				+        .input-cond-delete {

			
 
				+            background: #E43030;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            width: 65px;

			
 
				+            height: 33px;

			
 
				+            font-size: 16px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+        .input-cond-add {

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            width: 65px;

			
 
				+            height: 33px;

			
 
				+            font-size: 16px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+        .input-act-add {

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            width: 100px;

			
 
				+            height: 33px;

			
 
				+            font-size: 16px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+        .input-act-delete {

			
 
				+            background: #E43030;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            width: 100px;

			
 
				+            height: 33px;

			
 
				+            font-size: 16px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+        .input-add {

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            margin-top: 5px;

			
 
				+            width: 150px;

			
 
				+            height: 40px;

			
 
				+            font-size: 18px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+        .input-delete {

			
 
				+            background: #E43030;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            border-radius: 5px;

			
 
				+            margin-left: 5px;

			
 
				+            margin-top: 5px;

			
 
				+            width: 150px;

			
 
				+            height: 40px;

			
 
				+            font-size: 18px;

			
 
				+            text-align: center;

			
 
				+            line-height: 16px;

			
 
				+            color: #FFFFFF;

			
 
				+        }

			
 
				+        select {

			
 
				+            font-size: 24px;

			
 
				+            height: 30px;

			
 
				+            padding: 2px 5px;

			
 
				+            margin-left: 5px;

			
 
				+        }

			
 
				+

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body style="font-size: 18px;">

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+        <!-- [物件]文字輸入框 選擇後連結 [動作]文字輸入框 -->

			
 
				+        <script>

			
 
				+            dry_object = new Array();

			
 
				+            dry_object[0] = ["-"];  // 制動器 / 感測器

			
 
				+            dry_object[1] = ["on", "off"];  // 入料真空吸料機

			
 
				+            dry_object[2] = ["on", "off"];  // 真空吸料機

			
 
				+            dry_object[3] = ["ON 吸料", "OFF 排氣"];  // 入料三通閥

			
 
				+            dry_object[4] = ["0", "10", "20", "30", "40", "50"];  // 馬達

			
 
				+            dry_object[5] = ["on", "off"];  // 鼓風機

			
 
				+            dry_object[6] = ["on", "off"];  // 加熱器 1

			
 
				+            dry_object[7] = ["on", "off"];  // 加熱器 2

			
 
				+            dry_object[8] = ["on", "off"];  // 蝴蝶閥

			
 
				+            dry_object[9] = ["on", "off"];  // 消毒電磁閥

			
 
				+            dry_object[10] = ["on", "off"];  // 排水電磁閥

			
 
				+            dry_object[11] = ["on", "off"];  // 夾層進水電磁閥

			
 
				+            dry_object[12] = ["on", "off"];  // 溫控開關

			
 
				+            dry_object[13] = ["0.0", "28.0", "30.0", "32.0", "34.0", "36.0", "38.0", "40.0", "42.0", "44.0", "46.0", "48.0", "50.0"];  // 設定溫度

			
 
				+            dry_object[14] = ["on", "off"];  // 出料真空吸料機

			
 
				+

			
 
				+            dry_object[15] = ["1", "5", "10", "30", "60"];  // 暫停秒數

			
 
				+

			
 
				+            dry_object[16] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 入料儲豆槽_液位計

			
 
				+            dry_object[17] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 液位計

			
 
				+            dry_object[18] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // SHT11_溫度

			
 
				+            dry_object[19] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // SHT11_濕度

			
 
				+            dry_object[20] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 土壤三合一_溫度

			
 
				+            dry_object[21] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 土壤三合一_濕度

			
 
				+            dry_object[22] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 土壤三合一_EC

			
 
				+            dry_object[23] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 氣壓

			
 
				+            dry_object[24] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 出料儲豆槽_液位計

			
 
				+

			
 
				+            function renew(obj_num, index) {

			
 
				+                var Value="";

			
 
				+                for(var i=0; i<dry_object[index].length; i++){

			
 
				+                    Value = Value + '<option value=' + dry_object[index][i] + '> ' + dry_object[index][i] + '</option>';

			
 
				+                }

			
 
				+                var sectorSelect = document.getElementById("do_act" + obj_num);

			
 
				+                // console.log("sectorSelect: " + sectorSelect)

			
 
				+                sectorSelect.innerHTML = Value;

			
 
				+            }

			
 
				+

			
 
				+        </script>

			
 
				+        

			
 
				+        <div id="box">

			
 
				+            <div id="newcondition_1" class="newcondition_css">

			
 
				+                <!-- 總 條件 -->

			
 
				+                <div id="condition1">

			
 
				+                    <!-- 子條件 1_1-->

			
 
				+                    <div id="condition1_1">

			
 
				+                        條件

			
 
				+                        <select id="cond_z1_1">

			
 
				+                            <option value="if">if</option>

			
 
				+                            <option value="while">while</option>

			
 
				+                        </select>

			
 
				+                        <select id="cond_tank1_1">

			
 
				+                            <option value="D1">乾燥桶 D1</option>

			
 
				+                            <option value="D2">乾燥桶 D2</option>

			
 
				+                            <option value="D3">乾燥桶 D3</option>

			
 
				+                            <option value="D4">乾燥桶 D4</option>

			
 
				+                            <option value="D5">乾燥桶 D5</option>

			
 
				+                            <option value="D6">乾燥桶 D6</option>

			
 
				+                            <option value="D7">乾燥桶 D7</option>

			
 
				+                            <option value="D8">乾燥桶 D8</option>

			
 
				+                            <option value="D9">乾燥桶 D9</option>

			
 
				+                            <option value="D10">乾燥桶 D10</option>

			
 
				+                            <option value="D11">乾燥桶 D11</option>

			
 
				+                            <option value="D12">乾燥桶 D12</option>

			
 
				+                        </select>

			
 
				+                        <select id="cond_a1_1">

			
 
				+                            <option value="">制動器 / 感測器</option>

			
 
				+                            <optgroup label="制動器">

			
 
				+                                <option value="input_vacuum_status">入料真空吸料機</option>

			
 
				+                                <option value="tank_vacuum_status">真空吸料機</option>

			
 
				+                                <option value="tank_threewayvalve_input_status">入料三通閥</option>

			
 
				+                                <option value="tank_motor_status">馬達</option>

			
 
				+                                <option value="tank_blower_status">鼓風機</option>

			
 
				+                                <option value="tank_heater1_status">加熱器 1</option>

			
 
				+                                <option value="tank_heater2_status">加熱器 2</option>

			
 
				+                                <option value="tank_diskvalve_status">蝴蝶閥</option>

			
 
				+                                <option value="tank_solenoid_disinfect_status">消毒電磁閥</option>

			
 
				+                                <option value="tank_solenoid_water_out_status">排水電磁閥</option>

			
 
				+                                <option value="outer_solenoid_water_status">夾層進水電磁閥</option>

			
 
				+                                <option value="tank_temp_enable">溫控開關</option>

			
 
				+                                <option value="tank_temp">設定溫度</option>

			
 
				+                                <option value="output_vacuum">出料真空吸料機</option>

			
 
				+                            </optgroup>

			
 
				+                            <optgroup label="感測器數值">

			
 
				+                                <option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>

			
 
				+                                <option value="tank_UltraSonic">液位計(cm)</option>

			
 
				+                                <option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>

			
 
				+                                <option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>

			
 
				+                                <option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>

			
 
				+                                <option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>

			
 
				+                                <option value="tank_soil_EC">土壤三合一_EC(%)</option>

			
 
				+                                <option value="tank_PA">氣壓(PA)</option>

			
 
				+                                <option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>

			
 
				+                            </optgroup>

			
 
				+                        </select>

			
 
				+                        <select id="cond_b1_1">

			
 
				+                            <option value="equal">==</option>

			
 
				+                            <option value="morethan">&gt;=</option>

			
 
				+                            <option value="lessthan">&lt;=</option>

			
 
				+                        </select>

			
 
				+                        <input list="cond_list_c1_1" id="cond_c1_1">

			
 
				+                        <datalist id="cond_list_c1_1">

			
 
				+                            <option value="on">

			
 
				+                            <option value="off">

			
 
				+                            <option value="(或請自行輸入數值)">

			
 
				+                        </datalist>

			
 
				+                        <input type="button" class="input-cond-add" id="cond_add1_1" value="條件++" onclick="cond_add(cond_add1_1);"><br>

			
 
				+                        <script>

			
 
				+                            var cond_add_child_i = 1                                                // 這是子條件

			
 
				+

			
 
				+                            function cond_add(evt) {                                                // cond_add1_1 下一個是 cond_add1(條件)_2(子條件)

			
 
				+                                evt.style.display = "none";                                         // 不顯示原按鈕

			
 
				+                                var condadd_parent_num = String(evt.id).split('_')[1].slice(3, )    // 把第一個條件的編號記下

			
 
				+                                // console.log("condadd_parent_num: " + condadd_parent_num)

			
 
				+

			
 
				+                                cond_add_child_i++

			
 
				+

			
 
				+                                var html = '';

			
 
				+                                html +=

			
 
				+                                '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +

			
 
				+                                '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' + 

			
 
				+                                '<option value="and">and</option>' + 

			
 
				+                                '<option value="or">or</option>' + 

			
 
				+                                '</select> ' + 

			
 
				+                                '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 

			
 
				+                                '<option value="">制動器 / 感測器</option>' +

			
 
				+                                '<optgroup label="制動器">' +

			
 
				+                                '<option value="input_vacuum_status">入料真空吸料機</option>' +

			
 
				+                                '<option value="tank_vacuum_status">真空吸料機</option>' +

			
 
				+                                '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +

			
 
				+                                '<option value="tank_motor_status">馬達</option>' +

			
 
				+                                '<option value="tank_blower_status">鼓風機</option>' +

			
 
				+                                '<option value="tank_heater1_status">加熱器 1</option>' +

			
 
				+                                '<option value="tank_heater2_status">加熱器 2</option>' +

			
 
				+                                '<option value="tank_diskvalve_status">蝴蝶閥</option>' +

			
 
				+                                '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +

			
 
				+                                '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +

			
 
				+                                '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +

			
 
				+                                '<option value="tank_temp_enable">溫控開關</option>' +

			
 
				+                                '<option value="tank_temp">設定溫度</option>' +

			
 
				+                                '<option value="output_vacuum_status">出料真空吸料機</option>' +

			
 
				+                                '</optgroup>' +

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

			
 
				+                                '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +

			
 
				+                                '<option value="tank_UltraSonic">液位計(cm)</option>' +

			
 
				+                                '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +

			
 
				+                                '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +

			
 
				+                                '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +

			
 
				+                                '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +

			
 
				+                                '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +

			
 
				+                                '<option value="tank_PA">氣壓(PA)</option>' +

			
 
				+                                '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +

			
 
				+                                '</optgroup>' +

			
 
				+                                '</select> ' + 

			
 
				+                                '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 

			
 
				+                                '<option value="equal">==</option>' +

			
 
				+                                '<option value="morethan">&gt;=</option>' +

			
 
				+                                '<option value="lessthan">&lt;=</option>' +

			
 
				+                                '</select> ' +

			
 
				+                                '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' + 

			
 
				+                                '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +

			
 
				+                                '<option value="on">' +

			
 
				+                                '<option value="off">' +

			
 
				+                                '<option value="(或請自行輸入數值)">' +

			
 
				+                                '</datalist> ' +

			
 
				+                                '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">' +

			
 
				+                                '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>' +

			
 
				+                                '</div>';

			
 
				+

			
 
				+                                var divbox = document.getElementById('condition' + condadd_parent_num);

			
 
				+                                divbox.insertAdjacentHTML('beforeend', html);

			
 
				+                            }

			
 
				+

			
 
				+                            function cond_del(evt) {

			
 
				+                                // console.log('evt: ' + evt)

			
 
				+                                var del_cond_child = document.getElementById('condition' + evt);

			
 
				+                                // console.log("del_cond_child: " + del_cond_child)

			
 
				+                                del_cond_child.innerHTML = ""

			
 
				+

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

			
 
				+                                parentObj.removeChild(del_cond_child)            // 刪除 div

			
 
				+

			
 
				+                                // 上一個按鈕要顯示出來

			
 
				+                                var del_cond_parent_num = String(evt).split('_')[0]

			
 
				+                                var del_cond_child_num = String(evt).split('_')[1]

			
 
				+                                // console.log('del_cond_parent_num: ' + del_cond_parent_num)

			
 
				+                                // console.log('del_cond_child_num: ' + del_cond_child_num)

			
 
				+                                var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1));

			
 
				+                                // console.log("test: " + 'cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1))

			
 
				+                                // console.log("button_return_id: " + button_return_id)    // null

			
 
				+                                if (button_return_id == null) {

			
 
				+                                    var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_1');

			
 
				+                                }

			
 
				+                                button_return_id.style.display = "inline";

			
 
				+                            }

			
 
				+                        </script>

			
 
				+

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+

			
 
				+                <div id="action1">

			
 
				+                    <div id="action1_1">

			
 
				+                        物件

			
 
				+                        <select id="do_obj1_1" onChange="renew('1_1', this.selectedIndex);">

			
 
				+                            <option value="">制動器 / 感測器</option>

			
 
				+                            <optgroup label="制動器">

			
 
				+                                <option value="input_vacuum_status">入料真空吸料機</option>

			
 
				+                                <option value="tank_vacuum_status">真空吸料機</option>

			
 
				+                                <option value="tank_threewayvalve_input_status">入料三通閥</option>

			
 
				+                                <option value="tank_motor_status">馬達</option>

			
 
				+                                <option value="tank_blower_status">鼓風機</option>

			
 
				+                                <option value="tank_heater1_status">加熱器 1</option>

			
 
				+                                <option value="tank_heater2_status">加熱器 2</option>

			
 
				+                                <option value="tank_diskvalve_status">蝴蝶閥</option>

			
 
				+                                <option value="tank_solenoid_disinfect_status">消毒電磁閥</option>

			
 
				+                                <option value="tank_solenoid_water_out_status">排水電磁閥</option>

			
 
				+                                <option value="outer_solenoid_water_status">夾層進水電磁閥</option>

			
 
				+                                <option value="tank_temp_enable">溫控開關</option>

			
 
				+                                <option value="tank_temp">設定溫度</option>

			
 
				+                                <option value="output_vacuum">出料真空吸料機</option>

			
 
				+                                <option value="time.sleep">暫停秒數</option>

			
 
				+                            </optgroup>

			
 
				+                            <optgroup label="感測器回傳值頻率">

			
 
				+                                <option value="input_ultrasonic_status">入料儲豆槽_液位計(cm)</option>

			
 
				+                                <option value="tank_ultrasonic_status">液位計(cm)</option>

			
 
				+                                <option value="tank_sht11_temp_status">SHT11_溫度(℃)</option>

			
 
				+                                <option value="tank_sht11_humidity_status">SHT11_濕度(%)</option>

			
 
				+                                <option value="tank_soil_temp_status">土壤三合一_溫度(℃)</option>

			
 
				+                                <option value="tank_soil_humidity_status">土壤三合一_濕度(%)</option>

			
 
				+                                <option value="tank_soil_ec_status">土壤三合一_EC(%)</option>

			
 
				+                                <option value="tank_pa_status">氣壓(PA)</option>

			
 
				+                                <option value="output_ultrasonic_status">出料儲豆槽_液位計(cm)</option>

			
 
				+                            </optgroup>

			
 
				+                        </select>

			
 
				+                        動作

			
 
				+                        <select id="do_act1_1">

			
 
				+                            <option value="">請由左方選取物件

			
 
				+                        </select>

			
 
				+                        <input type="button" class="input-act-add" id="act_add1_1" value="物件動作++" onclick="act_add(act_add1_1);"><br>

			
 
				+                    

			
 
				+                    </div>

			
 
				+

			
 
				+                    <script>

			
 
				+                        var act_add_child_i = 1

			
 
				+                        function act_add(evt) {

			
 
				+                            evt.style.display = "none";

			
 
				+                            var actadd_parent_num = String(evt.id).split('_')[1].slice(3, )

			
 
				+                            // console.log("actadd_parent_num: " + actadd_parent_num)

			
 
				+

			
 
				+                            act_add_child_i++;

			
 
				+

			
 
				+                            var html = '';

			
 
				+                            html +=

			
 
				+                            '<div id="action' + actadd_parent_num + '_' + act_add_child_i + '">' +

			
 
				+                            '物件 ' +

			
 
				+                            '<select id="do_obj' + actadd_parent_num + '_' + act_add_child_i + '" onChange="renew(\'' + actadd_parent_num + '_' + act_add_child_i + '\', this.selectedIndex);">' +

			
 
				+                            '<option value="">制動器 / 感測器</option>' +

			
 
				+                            '<optgroup label="制動器">' +

			
 
				+                            '<option value="input_vacuum_status">入料真空吸料機</option>' +

			
 
				+                            '<option value="tank_vacuum_status">真空吸料機</option>' +

			
 
				+                            '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +

			
 
				+                            '<option value="tank_motor_status">馬達</option>' +

			
 
				+                            '<option value="tank_blower_status">鼓風機</option>' +

			
 
				+                            '<option value="tank_heater1_status">加熱器 1</option>' +

			
 
				+                            '<option value="tank_heater2_status">加熱器 2</option>' +

			
 
				+                            '<option value="tank_diskvalve_status">蝴蝶閥</option>' +

			
 
				+                            '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +

			
 
				+                            '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +

			
 
				+                            '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +

			
 
				+                            '<option value="tank_temp_enable">溫控開關</option>' +

			
 
				+                            '<option value="tank_temp">設定溫度</option>' +

			
 
				+                            '<option value="output_vacuum">出料真空吸料機</option>' +

			
 
				+                            '<option value="time.sleep">暫停秒數</option>' +

			
 
				+                            '</optgroup>' +

			
 
				+                            '<optgroup label="感測器回傳值頻率">' +

			
 
				+                            '<option value="input_ultrasonic_status">入料儲豆槽_液位計(cm)</option>' +

			
 
				+                            '<option value="tank_ultrasonic_status">液位計(cm)</option>' +

			
 
				+                            '<option value="tank_sht11_temp_status">SHT11_溫度(℃)</option>' +

			
 
				+                            '<option value="tank_sht11_humidity_status">SHT11_濕度(%)</option>' +

			
 
				+                            '<option value="tank_soil_temp_status">土壤三合一_溫度(℃)</option>' +

			
 
				+                            '<option value="tank_soil_humidity_status">土壤三合一_濕度(%)</option>' +

			
 
				+                            '<option value="tank_soil_ec_status">土壤三合一_EC(%)</option>' +

			
 
				+                            '<option value="tank_pa_status">氣壓(PA)</option>' +

			
 
				+                            '<option value="output_ultrasonic_status">出料儲豆槽_液位計(cm)</option>' +

			
 
				+                            '</optgroup>' +

			
 
				+                            '</select> ' +

			
 
				+                            '動作 ' +

			
 
				+                            '<select id="do_act' + actadd_parent_num + '_' + act_add_child_i + '">' +

			
 
				+                            '<option value="">請由左方選取物件</option>' +

			
 
				+                            '</select> ' +

			
 
				+                            '<input type="button" class="input-act-delete" id="act_del' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作--" onclick="act_del(\'' + actadd_parent_num + '_' + act_add_child_i + '\');">' +

			
 
				+                            '<input type="button" class="input-act-add" id="act_add' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + actadd_parent_num + '_' + act_add_child_i + ');"><br>' +

			
 
				+                            '</div>';

			
 
				+

			
 
				+                            var divbox = document.getElementById('action' + actadd_parent_num);

			
 
				+                            divbox.insertAdjacentHTML('beforeend', html);

			
 
				+                        }

			
 
				+

			
 
				+                        function act_del(evt) {

			
 
				+                            var del_action = document.getElementById('action' + evt);

			
 
				+                            del_action.innerHTML = ""

			
 
				+

			
 
				+                            var parentObj = del_action.parentNode;       // 取得欲刪除 div 的父類別

			
 
				+                            parentObj.removeChild(del_action)            // 刪除 div

			
 
				+                            

			
 
				+                            var del_act_parent_num = String(evt).split('_')[0]

			
 
				+                            var del_act_child_num = String(evt).split('_')[1]

			
 
				+                            // console.log('del_act_parent_num: ' + del_act_parent_num)

			
 
				+                            // console.log('del_act_child_num: ' + del_act_child_num)

			
 
				+                            var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1));

			
 
				+                            // console.log("test: " + 'cond_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1))

			
 
				+                            // console.log("button_return_id: " + button_return_id)    // null

			
 
				+                            if (button_return_id == null) {

			
 
				+                                var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_1');

			
 
				+                            }

			
 
				+                            button_return_id.style.display = "inline";

			
 
				+

			
 
				+                        }

			
 
				+                    </script>

			
 
				+

			
 
				+                    

			
 
				+                </div>

			
 
				+

			
 
				+                <input type="button" class="input-add" id="add1" value="條件物件動作++" onclick="Add(add1);">

			
 
				+            </div>

			
 
				+

			
 
				+            <script>

			
 
				+                var new_condition_i = 1

			
 
				+

			
 
				+                function Add(evt) {                                 // 網頁初始按鈕 onclick="Add(add1);

			
 
				+                    evt.style.display = "none";                     // 元素不顯示。將 add1 的 input-button 不顯示

			
 
				+                    new_condition_i++;                                            // 設定編號用

			
 
				+                    // var div = document.createElement('div');        // 輸出 <div></div>。此時並不會顯示, 

			
 
				+                                                                    // 需透過 appendChild()、insertBefore() 或 replaceChild() 等方法將新元素加入至指定的位置之後才會顯示。

			
 
				+                    // var cond_number = String(evt).slice(3, )        // 目前的 condition 條件物件動作 數 (最外層)

			
 
				+                    // var cond_a = 'cond_a' + cond_number + '_' + new_condition_i;  // [條件] 左方 : 制動器感測器

			
 
				+                    // var cond_b = 'cond_b' + cond_number + '_' + new_condition_i;  // [條件] 中間 : > / = / < 

			
 
				+                    // var cond_c = 'cond_c' + cond_number + '_' + new_condition_i;  // [條件] 右方 : ON / OFF / 數值

			
 
				+                    // var cond_d = 'cond_d' + cond_number + '_' + new_condition_i;  // 條件] 最左方條件連接 : and / or

			
 
				+                    // div.id = 'newcondition_' + new_condition_i;                   // 設定 div 的 id

			
 
				+                    // div.style.marginTop = "10px";                   // 新增的 div 設定 marginTop 屬性值

			
 
				+                    var html = ''

			
 
				+

			
 
				+                    

			
 
				+

			
 
				+                    // 新增的條件

			
 
				+                    html += 

			
 
				+                    '<div id="newcondition_' + new_condition_i + '" class="newcondition_css">' +

			
 
				+                    

			
 
				+                    // 新增的分隔線

			
 
				+                    // '<hr size="50" width="100%">' +

			
 
				+

			
 
				+

			
 
				+                    '<div id="condition' + new_condition_i + '">' +

			
 
				+                    '<div id="condition' + new_condition_i + '_1">' +

			
 
				+                    '條件 ' +

			
 
				+                    '<select id="cond_z' + new_condition_i + '_1">' +

			
 
				+                    '<option value="if">if</option>' +

			
 
				+                    '<option value="while">while</option>' +

			
 
				+                    '</select> ' +

			
 
				+                    '<select id="cond_tank' + new_condition_i + '_1">' +

			
 
				+                    '<option value="D1">乾燥桶 D1</option>' +

			
 
				+                    '<option value="D2">乾燥桶 D2</option>' +

			
 
				+                    '<option value="D3">乾燥桶 D3</option>' +

			
 
				+                    '<option value="D4">乾燥桶 D4</option>' +

			
 
				+                    '<option value="D5">乾燥桶 D5</option>' +

			
 
				+                    '<option value="D6">乾燥桶 D6</option>' +

			
 
				+                    '<option value="D7">乾燥桶 D7</option>' +

			
 
				+                    '<option value="D8">乾燥桶 D8</option>' +

			
 
				+                    '<option value="D9">乾燥桶 D9</option>' +

			
 
				+                    '<option value="D10">乾燥桶 D10</option>' +

			
 
				+                    '<option value="D11">乾燥桶 D11</option>' +

			
 
				+                    '<option value="D12">乾燥桶 D12</option>' +

			
 
				+                    '</select> ' +

			
 
				+                    '<select id="cond_a' + new_condition_i + '_1">' +

			
 
				+                    '<option value="">制動器 / 感測器</option>' +

			
 
				+                    '<optgroup label="制動器">' +

			
 
				+                    '<option value="input_vacuum_status">入料真空吸料機</option>' +

			
 
				+                    '<option value="tank_vacuum_status">真空吸料機</option>' +

			
 
				+                    '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +

			
 
				+                    '<option value="tank_motor_status">馬達</option>' +

			
 
				+                    '<option value="tank_blower_status">鼓風機</option>' +

			
 
				+                    '<option value="tank_heater1_status">加熱器 1</option>' +

			
 
				+                    '<option value="tank_heater2_status">加熱器 2</option>' +

			
 
				+                    '<option value="tank_diskvalve_status">蝴蝶閥</option>' +

			
 
				+                    '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +

			
 
				+                    '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +

			
 
				+                    '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +

			
 
				+                    '<option value="tank_temp_enable">溫控開關</option>' +

			
 
				+                    '<option value="tank_temp">設定溫度</option>' +

			
 
				+                    '<option value="output_vacuum_status">出料真空吸料機</option>' +

			
 
				+                    '</optgroup>' +

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

			
 
				+                    '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +

			
 
				+                    '<option value="tank_UltraSonic">液位計(cm)</option>' +

			
 
				+                    '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +

			
 
				+                    '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +

			
 
				+                    '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +

			
 
				+                    '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +

			
 
				+                    '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +

			
 
				+                    '<option value="tank_PA">氣壓(PA)</option>' +

			
 
				+                    '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '</select> ' +

			
 
				+                    '<select id="cond_b' + new_condition_i + '_1">' +

			
 
				+                    '<option value="equal">==</option>' +

			
 
				+                    '<option value="morethan">&gt;=</option>' +

			
 
				+                    '<option value="lessthan">&lt;=</option>' +

			
 
				+                    '</select> ' +

			
 
				+                    '<input list="cond_list_c' + new_condition_i + '_1" id="cond_c' + new_condition_i + '_1">' +

			
 
				+                    '<datalist id="cond_list_c' + new_condition_i + '_1">' +

			
 
				+                    '<option value="on">' +

			
 
				+                    '<option value="off">' +

			
 
				+                    '<option value="(或請自行輸入數值)">' +

			
 
				+                    '</datalist> ' +

			
 
				+                    '<input type="button" class="input-cond-add" id="cond_add' + new_condition_i + '_1" value="條件++" onclick="cond_add(cond_add' + new_condition_i + '_1)"><br>' +

			
 
				+                    '</div></div>';

			
 
				+

			
 
				+                    // 新增的物件動作

			
 
				+                    html +=

			
 
				+                    '<div id="action' + new_condition_i + '">' +

			
 
				+                    '<div id="action' + new_condition_i + '_1">' +

			
 
				+                    '物件 ' +

			
 
				+                    '<select id="do_obj' + new_condition_i + '_1" onChange="renew(\''+ new_condition_i + '_1\', this.selectedIndex);">' +

			
 
				+                    '<option value="">制動器 / 感測器</option>' +

			
 
				+                    '<optgroup label="制動器">' +

			
 
				+                    '<option value="input_vacuum_status">入料真空吸料機</option>' +

			
 
				+                    '<option value="tank_vacuum_status">真空吸料機</option>' +

			
 
				+                    '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +

			
 
				+                    '<option value="tank_motor_status">馬達</option>' +

			
 
				+                    '<option value="tank_blower_status">鼓風機</option>' +

			
 
				+                    '<option value="tank_heater1_status">加熱器 1</option>' +

			
 
				+                    '<option value="tank_heater2_status">加熱器 2</option>' +

			
 
				+                    '<option value="tank_diskvalve_status">蝴蝶閥</option>' +

			
 
				+                    '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +

			
 
				+                    '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +

			
 
				+                    '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +

			
 
				+                    '<option value="tank_temp_enable">溫控開關</option>' +

			
 
				+                    '<option value="tank_temp">設定溫度</option>' +

			
 
				+                    '<option value="output_vacuum">出料真空吸料機</option>' +

			
 
				+                    '<option value="time.sleep">暫停秒數</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '<optgroup label="感測器回傳值頻率">' +

			
 
				+                    '<option value="input_ultrasonic_status">入料儲豆槽_液位計(cm)</option>' +

			
 
				+                    '<option value="tank_ultrasonic_status">液位計(cm)</option>' +

			
 
				+                    '<option value="tank_sht11_temp_status">SHT11_溫度(℃)</option>' +

			
 
				+                    '<option value="tank_sht11_humidity_status">SHT11_濕度(%)</option>' +

			
 
				+                    '<option value="tank_soil_temp_status">土壤三合一_溫度(℃)</option>' +

			
 
				+                    '<option value="tank_soil_humidity_status">土壤三合一_濕度(%)</option>' +

			
 
				+                    '<option value="tank_soil_ec_status">土壤三合一_EC(%)</option>' +

			
 
				+                    '<option value="tank_pa_status">氣壓(PA)</option>' +

			
 
				+                    '<option value="output_ultrasonic_status">出料儲豆槽_液位計(cm)</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '</select>' +

			
 
				+                    ' 動作 ' +

			
 
				+                    '<select id="do_act' + new_condition_i + '_1">' +

			
 
				+                    '<option value="">請由左方選取物件' +

			
 
				+                    '</select> ' +

			
 
				+                    '<input type="button" class="input-act-add" id="act_add' + new_condition_i + '_1" value="物件動作++" onclick="act_add(act_add' + new_condition_i + '_1);"><br>' +

			
 
				+                    '</div>' +

			
 
				+                    '</div>' +

			
 
				+

			
 
				+                    // 新增的 條件物件動作++ 條件物件動作-- 按鈕

			
 
				+                    '<input type="button" class="input-delete" id="del' + new_condition_i + '" value="條件物件動作--" onclick="Delete(' + new_condition_i + ');"><br>' +

			
 
				+                    '<input type="button" class="input-add" id="add' + new_condition_i + '" value="條件物件動作++" onclick="Add(add' + new_condition_i + ');">' +

			
 
				+                    '</div>' ;

			
 
				+

			
 
				+                    var divbox = document.getElementById('box');

			
 
				+                    divbox.insertAdjacentHTML('beforeend', html);

			
 
				+

			
 
				+                };

			
 
				+                function Delete(evt) {

			
 
				+                    var del_condition = document.getElementById('newcondition_' + evt);

			
 
				+                    del_condition.innerHTML = ""

			
 
				+

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

			
 
				+                    parentObj.removeChild(del_condition)            // 刪除 div

			
 
				+

			
 
				+                    // 上一個按鈕要顯示出來

			
 
				+                    var button_return_id = document.getElementById('add' + String(parseInt(evt)-1));

			
 
				+                    if (button_return_id == null) {

			
 
				+                        var button_return_id = document.getElementById('add1');

			
 
				+                    }

			
 
				+                    // console.log('button_return_id: ' + button_return_id)

			
 
				+                    button_return_id.style.display = "block";        // 元素顯示。顯示前一個 input-button

			
 
				+                };

			
 
				+

			
 
				+            </script>        

			
 
				+

			
 
				+            <!-- 新增加的 newcondition_(編號) 會加在這裡 -->

			
 
				+

			
 
				+        </div>

			
 
				+        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

			
 
				+        <br>

			
 
				+

			
 
				+        <input type="button" id="test" value="取值測試" onclick="test();"><br>

			
 
				+        <span id="value_test"> ( 取值測試 ) </span><br>

			
 
				+        <span id="command_test"> ( command 測試 ) </span><br>

			
 
				+        <input type="button" id="test" value="ajax 測試" onclick="AJAXtest();">

			
 
				+

			
 
				+        <script>

			
 
				+            var set_Schedule = '';

			
 
				+

			
 
				+            function test(){

			
 
				+                // console.log("new_condition_i: " + new_condition_i)      // 總數 : 條件物件動作

			
 
				+                // console.log("cond_add_child_i: " + cond_add_child_i)    // 總數 : 子 條件

			
 
				+                // console.log("act_add_child_i: " + act_add_child_i)      // 總數 : 子 物件動作

			
 
				+

			
 
				+                // set_Schedule += 'set_Schedule = { ';

			
 
				+                set_Schedule = '{ ';

			
 
				+

			
 
				+                var command_test = '';

			
 
				+                // 條件物件動作 取值

			
 
				+                for (let z = 1; z <= new_condition_i; z++) {

			
 
				+                    // if-while 取值

			
 
				+                    try {

			
 
				+                        var cond_z_value = document.getElementById("cond_z" + z + "_1").value;

			
 
				+                        // console.log("cond_z" + z + "_1: " + cond_z_value)

			
 
				+                        set_Schedule += '"cond_z' + z + '_1": "' + cond_z_value + '", ' ;

			
 
				+                    } catch (error) {

			
 
				+                        if (error.name == 'TypeError') {

			
 
				+                            console.log("cond_z" + z + "_1: null")

			
 
				+                        } else {

			
 
				+                            alert("cond_z" + z + "_1: " + error.name)

			
 
				+                            break

			
 
				+                        }

			
 
				+                    }

			
 
				+

			
 
				+                    // 桶槽號碼 取值

			
 
				+                    try {

			
 
				+                        var cond_tank_value = document.getElementById("cond_tank" + z + "_1").value;

			
 
				+                        // console.log("cond_tank" + z + "_1: " + cond_tank_value)

			
 
				+                        set_Schedule += '"cond_tank' + z + '_1": "' + cond_tank_value + '", ' ;

			
 
				+                    } catch (error) {

			
 
				+                        if (error.name == 'TypeError') {

			
 
				+                            console.log("cond_tank" + z + "_1: null")

			
 
				+                        } else {

			
 
				+                            alert("cond_tank" + z + "_1: " + error.name)

			
 
				+                            break

			
 
				+                        }

			
 
				+                    }

			
 
				+

			
 
				+                    // 子 條件 取值

			
 
				+                    for (let x = 1; x <= cond_add_child_i; x++) {

			
 
				+                        // 子條件取值 : 條件連接 and or

			
 
				+                        if (x > 1) {

			
 
				+                            try {

			
 
				+                                var cond_d_value = document.getElementById("cond_d" + z + "_" + x).value;

			
 
				+                                // console.log("cond_d" + z + "_" + x + ": " + cond_d_value)

			
 
				+                                set_Schedule += '"cond_d' + z + '_' + x + '": "' + cond_d_value + '", ' ;

			
 
				+                            } catch (error) {

			
 
				+                                if (error.name == 'TypeError') {

			
 
				+                                    // console.log("cond_d" + z + "_" + x + ": null")

			
 
				+                                } else {

			
 
				+                                    alert("cond_d" + z + "_" + x + ": " + error.name)

			
 
				+                                    break

			
 
				+                                }

			
 
				+                            }

			
 
				+                        }

			
 
				+                        try {

			
 
				+                            var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;

			
 
				+                            // console.log("cond_a" + z + "_" + x + ": " + cond_a_value)

			
 
				+                            set_Schedule += '"cond_a' + z + '_' + x + '": "' + cond_a_value + '", ' ;

			
 
				+                            if (cond_a_value == '') {

			
 
				+                                alert('條件欄位輸入有誤, 請再次確認')

			
 
				+                                break

			
 
				+                            }

			
 
				+                        } catch (error) {

			
 
				+                            if (error.name == 'TypeError') {

			
 
				+                                // console.log("cond_a" + z + "_" + x + ": null")

			
 
				+                            } else {

			
 
				+                                alert("cond_a" + z + "_" + x + ": " + error.name)

			
 
				+                                break

			
 
				+                            }

			
 
				+                        }

			
 
				+                        // 子條件取值 : 條件中 > = <

			
 
				+                        try {

			
 
				+                            var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;

			
 
				+                            // console.log("cond_b" + z + "_" + x + ": " + cond_b_value)

			
 
				+                            set_Schedule += '"cond_b' + z + '_' + x + '": "' + cond_b_value + '", ' ;

			
 
				+                            if (cond_b_value == '') {

			
 
				+                                alert('條件欄位輸入有誤, 請再次確認')

			
 
				+                                break

			
 
				+                            }

			
 
				+                        } catch (error) {

			
 
				+                            if (error.name == 'TypeError') {

			
 
				+                                // console.log("cond_b" + z + "_" + x + ": null")

			
 
				+                            } else {

			
 
				+                                alert("cond_b" + z + "_" + x + ": " + error.name)

			
 
				+                                break

			
 
				+                            }

			
 
				+                        }

			
 
				+                        // 子條件取值 : 條件右 ON / OFF / 輸入數值

			
 
				+                        try {

			
 
				+                            var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;

			
 
				+                            // console.log("cond_c" + z + "_" + x + ": " + cond_c_value)

			
 
				+                            set_Schedule += '"cond_c' + z + '_' + x + '": "' + cond_c_value + '", ' ;

			
 
				+                            if (cond_c_value == '') {

			
 
				+                                alert('條件欄位輸入有誤, 請再次確認')

			
 
				+                                break

			
 
				+                            }

			
 
				+                        } catch (error) {

			
 
				+                            if (error.name == 'TypeError') {

			
 
				+                                // console.log("cond_c" + z + "_" + x + ": null")

			
 
				+                            } else {

			
 
				+                                alert("cond_c" + z + "_" + x + ": " + error.name)

			
 
				+                                break

			
 
				+                            }

			
 
				+                        }   

			
 
				+                    }

			
 
				+

			
 
				+                    // 子 物件動作 取值

			
 
				+                    for (let y = 1; y <= act_add_child_i; y++) {

			
 
				+                        // 子物件動作取值 : 物件 do_obj1_1

			
 
				+                        try {

			
 
				+                            var do_obj_value = document.getElementById("do_obj" + z + "_" + y).value;

			
 
				+                            if (do_obj_value == '') {

			
 
				+                                alert('物件欄位輸入有誤, 請再次確認')

			
 
				+                                break

			
 
				+                            }

			
 
				+                            // console.log("do_obj" + z + "_" + y + ": " + do_obj_value)

			
 
				+                            set_Schedule += '"do_obj' + z + '_' + y + '": "' + do_obj_value + '", ' ;

			
 
				+                            command_test += '{"tank_num": "' + cond_tank_value + '", "command": "' + do_obj_value + '", "value":"';

			
 
				+                        } catch (error) {

			
 
				+                            if (error.name == 'TypeError') {

			
 
				+                                // console.log("do_obj" + z + "_" + y + ": null")

			
 
				+                            } else {

			
 
				+                                alert("do_obj" + z + "_" + y + ": " + error.name)

			
 
				+                                break

			
 
				+                            }

			
 
				+                        }

			
 
				+                        // 子物件動作取值 : 動作 do_act1_1

			
 
				+                        try {

			
 
				+                            var do_act_value = document.getElementById("do_act" + z + "_" + y).value;

			
 
				+                            if (do_act_value == '') {

			
 
				+                                alert('動作欄位輸入有誤, 請再次確認')

			
 
				+                                break

			
 
				+                            }

			
 
				+                            // console.log("do_act" + z + "_" + y + ": " + do_act_value)

			
 
				+                            set_Schedule += '"do_act' + z + '_' + y + '": "' + do_act_value + '", ' ;

			
 
				+                            command_test += do_act_value + '" }';

			
 
				+                        } catch (error) {

			
 
				+                            if (error.name == 'TypeError') {

			
 
				+                                // console.log("do_obj" + z + "_" + y + ": null")

			
 
				+                            } else {

			
 
				+                                alert("do_act" + z + "_" + y + ": " + error.name)

			
 
				+                                break

			
 
				+                            }

			
 
				+                        }

			
 
				+                    }

			
 
				+                }

			
 
				+

			
 
				+                // 整理資料用

			
 
				+                set_Schedule += '"": ""}' ;

			
 
				+                // console.log('set_Schedule: ' + set_Schedule)

			
 
				+                $('#value_test').text('set_Schedule: ' + set_Schedule)

			
 
				+                $('#command_test').text('command_test: ' + command_test)

			
 
				+            }

			
 
				+        

			
 
				+            function AJAXtest(params) {

			
 
				+                test();

			
 
				+

			
 
				+                var schedule_data = {

			
 
				+                    "condition":new_condition_i,

			
 
				+                    "cond_add_child":cond_add_child_i,

			
 
				+                    "act_add_child":act_add_child_i,

			
 
				+                    "set_Schedule":set_Schedule

			
 
				+                };

			
 
				+

			
 
				+                $.get('/dry_block_set', schedule_data, function (res) {

			
 
				+                    // console.log("res.condition: " + res.condition)

			
 
				+                    // console.log("res.cond_add_child: " + res.cond_add_child)

			
 
				+                    // console.log("res.act_add_child: " + res.act_add_child)

			
 
				+                    console.log("res.response: " + res.response)

			
 
				+                }, 'json');                

			
 
				+            }

			
 
				+        </script>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/dry_container.html
+++ b/app/templates/dry_container.html
--- a/app/templates/dry_container_0817.html
+++ b/app/templates/dry_container_0817.html
--- a/app/templates/dry_container_input.html
+++ b/app/templates/dry_container_input.html
@@ -1,612 +1,338 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <meta http-equiv="refresh" content="300" /><!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var dtn = '{{tid}}';
			
 
				-        var status = '{{status}}';
			
 
				-        console.log('dtn:' + dtn)
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#dry_input_page").text('乾燥貨櫃入料儲豆槽 DI' + dtn + ' 攝影機畫面   ')
			
 
				-            $('#dry_input_page').attr("href", "/camera_DI" + dtn)
			
 
				-            $("#dry_input_title").text('乾燥貨櫃入料儲豆槽 DI' + dtn + ' 操作介面')
			
 
				-            $("#coffee_title").text('DI' + dtn + ' 乾燥入料儲豆槽操作介面');
			
 
				-            if (status == 2) {
			
 
				-                $('input').prop('disabled', true);
			
 
				-                $('button').prop('disabled', true);
			
 
				-            } else if ( (status == 0) || (status == 1) ) {
			
 
				-                $('input').prop('disabled', false);
			
 
				-                $('button').prop('disabled', false);   
			
 
				-            }
			
 
				-        });
			
 
				-
			
 
				-        WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    <script>
			
 
				-        // Rita 制動器運作
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        // Benson 真空吸料機 (START)入料儲豆槽
			
 
				-        function inputVacuum() {
			
 
				-            var status = "off";
			
 
				-            var check = $("input[name=input_vacuum_status]:checked");  // 這裡面是 jQuery 撈取資料的方法, jQuery 常使用到 $ 錢字號
			
 
				-            console.log('check：', check);
			
 
				-            //大於0代表有被選中, 如果有多個可以呈現勾取的項目數量
			
 
				-            if (check.length > 0) {
			
 
				-                status = "on";
			
 
				-                $("#cmn-toggle-02").prop('checked', false); // 設定為不要勾選
			
 
				-                if (!confirm("你確定要開啟入料儲豆槽真空吸料機嗎?")) {
			
 
				-                    return false;
			
 
				-                };
			
 
				-
			
 
				-            } else {
			
 
				-                $("#cmn-toggle-02").prop('checked', true); // 設定為勾選
			
 
				-                if (!confirm("你確定要關閉入料儲豆槽真空吸料機嗎?")) {
			
 
				-                    return false;
			
 
				-                };
			
 
				-            };
			
 
				-
			
 
				-            var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": status };
			
 
				-            // jquery 請求 '/mqtt/{{tid}}' 頁面
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
			
 
				-                console.log('data:', data)
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', true);
			
 
				-                    setTimeout("alert('入料儲豆槽真空吸料機_開啟成功!')", 500);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', false);
			
 
				-                    setTimeout("alert('入料儲豆槽真空吸料機_關閉成功!')", 500);
			
 
				-                } else {
			
 
				-                    alert(res);
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        };
			
 
				-
			
 
				-        function inputVacuum_ON() {
			
 
				-            var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "on" };
			
 
				-
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {
			
 
				-                console.log('data:', data)
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', true);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', false);
			
 
				-                } else {
			
 
				-                    console.log('res error')
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        }
			
 
				-
			
 
				-        function inputVacuum_OFF() {
			
 
				-            var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "off" };
			
 
				-
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {
			
 
				-                console.log('data:', data)
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', true);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', false);
			
 
				-                } else {
			
 
				-                    console.log('res error')
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        }
			
 
				-        // Benson 真空吸料機 (END)入料儲豆槽
			
 
				-    </script>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_input_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="dry_input_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥貨櫃入料儲豆槽 DI 操作介面
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        狀態更新時間(秒)：
			
 
				-        <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            
			
 
				-            function changeUpdate() {
			
 
				-                clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                $.get('/loading/DI' + dtn, '', function (res) {
			
 
				-                    if (res.input_vacuum == 0) {
			
 
				-                        $("#input_vacuum_status").css("background-color", "#C0C0C0")
			
 
				-                    } else if (res.input_vacuum == 1) {
			
 
				-                        $("#input_vacuum_status").css("background-color", "forestgreen")
			
 
				-                    } else { $("#input_vacuum_status").css("background-color", "crimson") }
			
 
				-
			
 
				-                    $("#UltraSonic_t_status").text(res.input_UltraSonic);
			
 
				-
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <h4>制動器</h4>    
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
			
 
				-            <tr>
			
 
				-                <td style="color:red;">Valve</td>
			
 
				-                <td>真空吸料機</td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    <span style="color:#C0C0C0;">off</span>
			
 
				-                    <span style="color:#008CBA;">on</span>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <div class="switch_div">
			
 
				-                        <div class="switch">
			
 
				-                            <input id="cmn-toggle-01" class="cmn-toggle cmn-toggle-round" type="checkbox">
			
 
				-                            <label for="cmn-toggle-01"></label>
			
 
				-                        </div>
			
 
				-                        <div class="switch text-center">
			
 
				-                            {% if input_vacuum == 1 %}
			
 
				-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
			
 
				-                                name="input_vacuum_status" value="ON" onclick="inputVacuum()">
			
 
				-                            {% else %}
			
 
				-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
			
 
				-                                name="input_vacuum_status" value="OFF" onclick="inputVacuum()">
			
 
				-                            {% endif %}
			
 
				-                            <label for="cmn-toggle-02"></label>
			
 
				-                        </div>
			
 
				-                        <div class="switch">
			
 
				-                            <input id="cmn-toggle-03" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
			
 
				-                            <label for="cmn-toggle-03" data-on="Yes" data-off="No"></label>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td><span style="color:#008CBA;"><b>ON</b></span></td>
			
 
				-                <td><input type="button" value="ON" onclick="inputVacuum_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
			
 
				-                <td><input type="button" value="OFF" onclick="inputVacuum_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>感測器</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
			
 
				-            <tr>
			
 
				-                <td colspan="6">[入料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>排程設計</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
			
 
				-            <tr>
			
 
				-                <td>入料</td>
			
 
				-                <td>循環測試</td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    指定桶內生豆高度
			
 
				-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
			
 
				-                    吸料時間
			
 
				-                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">秒<br>
			
 
				-                    放料時間
			
 
				-                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">秒<br>
			
 
				-                    循環次數
			
 
				-                    <input name="testing_in_vacuum_loop" type="text" value="3" style="width: 40px;">次<br>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    ON (開) &nbsp;
			
 
				-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
			
 
				-                    OFF (關) &nbsp;
			
 
				-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
			
 
				-                    循環
			
 
				-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="BeanInput()">入料測試</button>
			
 
				-                    <script>
			
 
				-                        var BeanIn_Process = 0;
			
 
				-                        var BeanIn_interval;
			
 
				-                        function BeanInput() {
			
 
				-                            clearInterval(WebUpdate_set);
			
 
				-                            var testing_BeanIn_Height = $("input[name=testing_BeanIn_Height]").val();
			
 
				-                            var testing_in_vacuum_in = $("input[name=testing_in_vacuum_in]").val();
			
 
				-                            var testing_in_vacuum_out = $("input[name=testing_in_vacuum_out]").val();
			
 
				-                            var testing_in_vacuum_loop = $("input[name=testing_in_vacuum_loop]").val();
			
 
				-
			
 
				-                            if (testing_BeanIn_Height != 0) {
			
 
				-                                console.log('以指定高度入豆')
			
 
				-                                var BeanIn_interval = setInterval(BeanInHeight, 5000);
			
 
				-
			
 
				-                                function BeanInHeight(){
			
 
				-                                    if (BeanIn_Process == 1) {
			
 
				-                                        return;
			
 
				-                                    }
			
 
				-
			
 
				-                                    BeanIn_Process == 1;
			
 
				-                                    $.ajax({
			
 
				-                                        async:false,
			
 
				-                                        type:"GET",
			
 
				-                                        url:"/dry_input_UltraSonic_" + tank_num,
			
 
				-                                        dataType:"json",
			
 
				-                                        success:function(response){
			
 
				-                                            var present_Bean_height = response.UltraSonic
			
 
				-                                            console.log('目前生豆高度: ' + present_Bean_height)
			
 
				-
			
 
				-                                            if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
			
 
				-                                                inputVacuum_ON()
			
 
				-                                                console.log('inputVacuum_ON')
			
 
				-                                                
			
 
				-                                                var time = new Date();
			
 
				-                                                while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
			
 
				-
			
 
				-                                                inputVacuum_OFF()
			
 
				-                                                console.log('inputVacuum_OFF')
			
 
				-
			
 
				-                                                var time = new Date();
			
 
				-                                                while ((new Date() - time) < testing_in_vacuum_out * 1000) { };
			
 
				-                                            } else {
			
 
				-                                                clearInterval(BeanIn_interval)
			
 
				-                                                console.log('生豆已達指定高度！')
			
 
				-                                            }
			
 
				-                                            BeanIn_Process == 0;
			
 
				-                                        },
			
 
				-                                        error:function(thrownError){
			
 
				-                                            console.log('Error: ' + thrownError)
			
 
				-                                            BeanIn_Process = 0;
			
 
				-                                        }
			
 
				-                                    })
			
 
				-                                };
			
 
				-
			
 
				-                            } else if (testing_BeanIn_Height == 0) {
			
 
				-                                console.log('以循環次數入豆')
			
 
				-
			
 
				-                                for (step = 1; step <= testing_in_vacuum_loop; step++) {
			
 
				-                                    console.log('-- 循環第 ' + step + ' 次 --');
			
 
				-
			
 
				-                                    inputVacuum_ON()
			
 
				-                                    console.log('inputVacuum_ON')
			
 
				-
			
 
				-                                    var time = new Date();
			
 
				-                                    while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
			
 
				-
			
 
				-                                    inputVacuum_OFF()
			
 
				-                                    console.log('inputVacuum_OFF')
			
 
				-
			
 
				-                                    var time = new Date();
			
 
				-                                    while ((new Date() - time) < testing_in_vacuum_out * 1000) { };
			
 
				-                                }
			
 
				-
			
 
				-                                console.log('循環入豆結束')
			
 
				-                            }
			
 
				-                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="tankVacuumTest()">真空吸料機測試(秒)</button><br>
			
 
				-                    <script>
			
 
				-                        function tankVacuumTest() {
			
 
				-                            clearInterval(WebUpdate_set);
			
 
				-                            var Testing_starttime = $("input[name=Testing_starttime]").val();
			
 
				-                            var Testing_endtime = $("input[name=Testing_endtime]").val();
			
 
				-                            var Testing_loop = $("input[name=Testing_loop]").val();
			
 
				-                            alert('測試間隔' + Testing_starttime + ':' + Testing_endtime + ' 次數' + Testing_loop)
			
 
				-                            var step;
			
 
				-
			
 
				-                            for (step = 1; step <= Testing_loop; step++) {
			
 
				-                                console.log('循環第 ' + step + ' 次');
			
 
				-
			
 
				-                                inputVacuum_ON()
			
 
				-                                console.log('inputVacuum_ON')
			
 
				-
			
 
				-                                var time = new Date();
			
 
				-                                while ((new Date() - time) < Testing_starttime * 1000) { }
			
 
				-
			
 
				-                                inputVacuum_OFF()
			
 
				-                                console.log('inputVacuum_OFF')
			
 
				-
			
 
				-                                var time = new Date();
			
 
				-                                while ((new Date() - time) < Testing_endtime * 1000) { }
			
 
				-                            }
			
 
				-                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>M5 攝影機畫面</h4>
			
 
				-        <div class="container-fluid">
			
 
				-            <div class="row" style="margin-top:10px;">
			
 
				-                <div class="col flex">
			
 
				-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
			
 
				-                        <div class="col-md-12 row flex">
			
 
				-                            <img src="" id="four" width="70%" height="70%">
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                    <script>
			
 
				-                        // M5 攝影機
			
 
				-
			
 
				-                        //const img = document.querySelector('#one');
			
 
				-                        const img3 = document.querySelector('#four');
			
 
				-                        const WS_URL3 = 'ws:///60.250.156.230:8093';
			
 
				-                        //const WS_URL3 = 'ws:///60.250.156.230:8091';
			
 
				-                        const ws3 = new WebSocket(WS_URL3);
			
 
				-                        let urlObject3;
			
 
				-                        ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
			
 
				-                        ws3.onmessage = message3 => {
			
 
				-                            const arrayBuffer3 = message3.data;
			
 
				-                            if (urlObject3) {
			
 
				-                                URL.revokeObjectURL(urlObject3);
			
 
				-                            }
			
 
				-                            urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
			
 
				-                            img3.src = urlObject3;
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-
			
 
				-        <br>
			
 
				-        <br>
			
 
				-        
			
 
				-<!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				--->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <meta http-equiv="refresh" content="300" /><!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var dtn = '{{tid}}';

			
 
				+        var status = '{{status}}';

			
 
				+        console.log('dtn:' + dtn)

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#dry_input_page").text('乾燥貨櫃入料儲豆槽 DI' + dtn + ' 攝影機畫面   ')

			
 
				+            $('#dry_input_page').attr("href", "/camera_DI" + dtn)

			
 
				+            $("#dry_input_title").text('乾燥貨櫃入料儲豆槽 DI' + dtn + ' 操作介面')

			
 
				+            $("#coffee_title_pc").text('DI' + dtn + ' 乾燥入料儲豆槽操作介面');

			
 
				+            $("#coffee_title_phone").text('DI' + dtn + ' 操作介面');

			
 
				+            if (status == 2) {

			
 
				+                $('input').prop('disabled', true);

			
 
				+                $('button').prop('disabled', true);

			
 
				+            } else if ( (status == 0) || (status == 1) ) {

			
 
				+                $('input').prop('disabled', false);

			
 
				+                $('button').prop('disabled', false);   

			
 
				+            }

			
 
				+        });

			
 
				+

			
 
				+        WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <script>

			
 
				+        // Rita 制動器運作

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        // Benson 真空吸料機 (START)入料儲豆槽

			
 
				+        function inputVacuum() {

			
 
				+            var status = "off";

			
 
				+            var check = $("input[name=input_vacuum_status]:checked");  // 這裡面是 jQuery 撈取資料的方法, jQuery 常使用到 $ 錢字號

			
 
				+            console.log('check：', check);

			
 
				+            //大於0代表有被選中, 如果有多個可以呈現勾取的項目數量

			
 
				+            if (check.length > 0) {

			
 
				+                status = "on";

			
 
				+                $("#cmn-toggle-02").prop('checked', false); // 設定為不要勾選

			
 
				+                if (!confirm("你確定要開啟入料儲豆槽真空吸料機嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+

			
 
				+            } else {

			
 
				+                $("#cmn-toggle-02").prop('checked', true); // 設定為勾選

			
 
				+                if (!confirm("你確定要關閉入料儲豆槽真空吸料機嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            };

			
 
				+

			
 
				+            var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": status };

			
 
				+            // jquery 請求 '/mqtt/{{tid}}' 頁面

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                    setTimeout("alert('入料儲豆槽真空吸料機_開啟成功!')", 500);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                    setTimeout("alert('入料儲豆槽真空吸料機_關閉成功!')", 500);

			
 
				+                } else {

			
 
				+                    alert(res);

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+

			
 
				+        function inputVacuum(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": params };

			
 
				+            }

			
 
				+            

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                } else {

			
 
				+                    console.log('res error')

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+        // Benson 真空吸料機 (END)入料儲豆槽

			
 
				+    </script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        function changeUpdate() {

			
 
				+            clearInterval(WebUpdate_set);

			
 
				+            var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+            console.log('webupdate_time' + webupdate_time)

			
 
				+            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+        }

			
 
				+        // jQuery 更新感測器制動器狀態

			
 
				+        function WebUpdate(dtn) {

			
 
				+            $.get('/loading/DI' + dtn, '', function (res) {

			
 
				+                if (res.input_vacuum == 0) {

			
 
				+                    $("#input_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                } else if (res.input_vacuum == 1) {

			
 
				+                    $("#input_vacuum_status").css("background-color", "forestgreen")

			
 
				+                } else { $("#input_vacuum_status").css("background-color", "crimson") 

			
 
				+                }

			
 
				+                $("#UltraSonic_t_status").text(res.input_UltraSonic);

			
 
				+            }, 'json');

			
 
				+        }

			
 
				+    </script>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+        <h4>制動器</h4>    

			
 
				+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">

			
 
				+            <tr>

			
 
				+                <td style="color:red;">Valve</td>

			
 
				+                <td>真空吸料機</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <span style="color:#C0C0C0;">off</span>

			
 
				+                    <span style="color:#008CBA;">on</span>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">

			
 
				+                        </div>

			
 
				+                        <div class="switch text-center">

			
 
				+                            {% if input_vacuum == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked

			
 
				+                                name="input_vacuum_status" value="ON" onclick="inputVacuum()">

			
 
				+                            {% else %}

			
 
				+                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"

			
 
				+                                name="input_vacuum_status" value="OFF" onclick="inputVacuum()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>

			
 
				+                        </div>

			
 
				+                        <div class="switch">

			
 
				+                            <input id="cmn-toggle-03" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#008CBA;"><b>ON</b></span></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="inputVacuum('1')"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="inputVacuum('0')"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>感測器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3">

			
 
				+            <tr>

			
 
				+                <td colspan="6">[入料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>排程設計</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3">

			
 
				+            <tr>

			
 
				+                <td>入料</td>

			
 
				+                <td>循環測試</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    指定桶內生豆高度

			
 
				+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>

			
 
				+                    吸料時間

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_in" value="1">秒<br>

			
 
				+                    放料時間

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_out" value="10">秒<br>

			
 
				+                    循環次數

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_loop" value="3">次<br>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    ON (開) &nbsp;

			
 
				+                    <input type="text" class="input-text" name="Testing_starttime" value="3">秒<br>

			
 
				+                    OFF (關) &nbsp;

			
 
				+                    <input type="text" class="input-text" name="Testing_endtime" value="5">秒<br>

			
 
				+                    循環

			
 
				+                    <input type="text" class="input-text" name="Testing_loop" value="3">次

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="BeanInput()">入料測試</button>

			
 
				+                    <script>

			
 
				+                        var BeanIn_Process = 0;

			
 
				+                        var BeanIn_interval;

			
 
				+                        function BeanInput() {

			
 
				+                            clearInterval(WebUpdate_set);

			
 
				+                            var testing_BeanIn_Height = $("input[name=testing_BeanIn_Height]").val();

			
 
				+                            var testing_in_vacuum_in = $("input[name=testing_in_vacuum_in]").val();

			
 
				+                            var testing_in_vacuum_out = $("input[name=testing_in_vacuum_out]").val();

			
 
				+                            var testing_in_vacuum_loop = $("input[name=testing_in_vacuum_loop]").val();

			
 
				+

			
 
				+                            if (testing_BeanIn_Height != 0) {

			
 
				+                                console.log('以指定高度入豆')

			
 
				+                                var BeanIn_interval = setInterval(BeanInHeight, 5000);

			
 
				+

			
 
				+                                function BeanInHeight(){

			
 
				+                                    if (BeanIn_Process == 1) {

			
 
				+                                        return;

			
 
				+                                    }

			
 
				+

			
 
				+                                    BeanIn_Process == 1;

			
 
				+                                    $.ajax({

			
 
				+                                        async:false,

			
 
				+                                        type:"GET",

			
 
				+                                        url:"/dry_input_UltraSonic_" + tank_num,

			
 
				+                                        dataType:"json",

			
 
				+                                        success:function(response){

			
 
				+                                            var present_Bean_height = response.UltraSonic

			
 
				+                                            console.log('目前生豆高度: ' + present_Bean_height)

			
 
				+

			
 
				+                                            if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {

			
 
				+                                                inputVacuum('1')

			
 
				+                                                console.log('inputVacuum_ON')

			
 
				+                                                

			
 
				+                                                var time = new Date();

			
 
				+                                                while ((new Date() - time) < testing_in_vacuum_in * 1000) { };

			
 
				+

			
 
				+                                                inputVacuum('0')

			
 
				+                                                console.log('inputVacuum_OFF')

			
 
				+

			
 
				+                                                var time = new Date();

			
 
				+                                                while ((new Date() - time) < testing_in_vacuum_out * 1000) { };

			
 
				+                                            } else {

			
 
				+                                                clearInterval(BeanIn_interval)

			
 
				+                                                console.log('生豆已達指定高度！')

			
 
				+                                            }

			
 
				+                                            BeanIn_Process == 0;

			
 
				+                                        },

			
 
				+                                        error:function(thrownError){

			
 
				+                                            console.log('Error: ' + thrownError)

			
 
				+                                            BeanIn_Process = 0;

			
 
				+                                        }

			
 
				+                                    })

			
 
				+                                };

			
 
				+

			
 
				+                            } else if (testing_BeanIn_Height == 0) {

			
 
				+                                console.log('以循環次數入豆')

			
 
				+

			
 
				+                                for (step = 1; step <= testing_in_vacuum_loop; step++) {

			
 
				+                                    console.log('-- 循環第 ' + step + ' 次 --');

			
 
				+

			
 
				+                                    inputVacuum('1')

			
 
				+                                    console.log('inputVacuum_ON')

			
 
				+

			
 
				+                                    var time = new Date();

			
 
				+                                    while ((new Date() - time) < testing_in_vacuum_in * 1000) { };

			
 
				+

			
 
				+                                    inputVacuum('0')

			
 
				+                                    console.log('inputVacuum_OFF')

			
 
				+

			
 
				+                                    var time = new Date();

			
 
				+                                    while ((new Date() - time) < testing_in_vacuum_out * 1000) { };

			
 
				+                                }

			
 
				+

			
 
				+                                console.log('循環入豆結束')

			
 
				+                            }

			
 
				+                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="tankVacuumTest()">真空吸料機測試(秒)</button><br>

			
 
				+                    <script>

			
 
				+                        function tankVacuumTest() {

			
 
				+                            clearInterval(WebUpdate_set);

			
 
				+                            var Testing_starttime = $("input[name=Testing_starttime]").val();

			
 
				+                            var Testing_endtime = $("input[name=Testing_endtime]").val();

			
 
				+                            var Testing_loop = $("input[name=Testing_loop]").val();

			
 
				+                            alert('測試間隔' + Testing_starttime + ':' + Testing_endtime + ' 次數' + Testing_loop)

			
 
				+                            var step;

			
 
				+

			
 
				+                            for (step = 1; step <= Testing_loop; step++) {

			
 
				+                                console.log('循環第 ' + step + ' 次');

			
 
				+

			
 
				+                                inputVacuum('1')

			
 
				+                                console.log('inputVacuum_ON')

			
 
				+

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < Testing_starttime * 1000) { }

			
 
				+

			
 
				+                                inputVacuum('0')

			
 
				+                                console.log('inputVacuum_OFF')

			
 
				+

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < Testing_endtime * 1000) { }

			
 
				+                            }

			
 
				+                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/dry_container_output.html
+++ b/app/templates/dry_container_output.html
@@ -1,606 +1,339 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <meta http-equiv="refresh" content="300" /><!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var dtn = '{{tid}}';
			
 
				-        var status = '{{status}}';
			
 
				-        console.log('dtn:' + dtn)
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#dry_output_page").text('乾燥貨櫃出料儲豆槽 DO' + dtn + ' 攝影機畫面   ')
			
 
				-            $('#dry_output_page').attr("href", "/camera_DO" + dtn)
			
 
				-            $("#dry_container_output_title").text('乾燥貨櫃出料儲豆槽 DO' + dtn + ' 操作介面')
			
 
				-            $("#coffee_title").text('DO' + dtn + ' 乾燥出料儲豆槽操作介面');
			
 
				-            if (status == 2) {
			
 
				-                $('input').prop('disabled', true);
			
 
				-                $('button').prop('disabled', true);
			
 
				-            } else if ( (status == 0) || (status == 1) ) {
			
 
				-                $('input').prop('disabled', false);
			
 
				-                $('button').prop('disabled', false);   
			
 
				-            }
			
 
				-        });
			
 
				-
			
 
				-        WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    <script>
			
 
				-        // Rita 制動器運作
			
 
				-
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        function outputVacuum() {
			
 
				-            var status = "off";
			
 
				-            var check = $("input[name=output_vacuum_status]:checked");
			
 
				-            //大於0代表有被選中
			
 
				-            if (check.length > 0) {
			
 
				-                status = "on";
			
 
				-                $("#cmn-toggle-32").prop('checked', false);
			
 
				-                if (!confirm("你確定要開啟出料儲豆槽真空吸料機嗎?")) {
			
 
				-                    return false;
			
 
				-                };
			
 
				-
			
 
				-            } else {
			
 
				-                $("#cmn-toggle-32").prop('checked', true);
			
 
				-                if (!confirm("你確定要關閉出料儲豆槽真空吸料機嗎?")) {
			
 
				-                    return false;
			
 
				-                };
			
 
				-            };
			
 
				-
			
 
				-            var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": status };
			
 
				-            console.log('data:', data)
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-32").prop('checked', true);
			
 
				-                    setTimeout("alert('出料儲豆槽真空吸料機_開啟成功!')", 500);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-32").prop('checked', false);
			
 
				-                    setTimeout("alert('出料儲豆槽真空吸料機_關閉成功!')", 500);
			
 
				-                } else {
			
 
				-                    alert(res);
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        };
			
 
				-        function outputVacuum_ON() {
			
 
				-            var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": "on" };
			
 
				-            console.log('data:', data)
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-32").prop('checked', true);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-32").prop('checked', false);
			
 
				-                } else {
			
 
				-                    console.log('res error')
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        }
			
 
				-        function outputVacuum_OFF() {
			
 
				-            var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": "off" };
			
 
				-            console.log('data:', data)
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-32").prop('checked', true);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-32").prop('checked', false);
			
 
				-                } else {
			
 
				-                    console.log('res error')
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        }
			
 
				-    </script>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="dry_output_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="dry_container_output_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            乾燥貨櫃出料儲豆槽 DO 操作介面
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        狀態更新時間(秒)：
			
 
				-        <input name="webupdate_time" type="text" value="5" style="width: 40px;">
			
 
				-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            
			
 
				-            function changeUpdate() {
			
 
				-                clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(dtn) {
			
 
				-                
			
 
				-                $.get('/loading/DO' + dtn, '', function (res) {
			
 
				-                    if (res.output_vacuum == 0) {
			
 
				-                        $("#output_vacuum_status").css("background-color", "#C0C0C0")
			
 
				-                    } else if (res.output_vacuum == 1) {
			
 
				-                        $("#output_vacuum_status").css("background-color", "forestgreen")
			
 
				-                    } else { $("#output_vacuum_status").css("background-color", "crimson") }
			
 
				-
			
 
				-                    $("#UltraSonic_t_status").text(res.output_UltraSonic);
			
 
				-
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <h4>制動器</h4>    
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
			
 
				-            <tr>
			
 
				-                <td style="color:red;">Valve</td>
			
 
				-                <td>真空吸料機</td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    <span style="color:#C0C0C0;">off</span>
			
 
				-                    <span style="color:#008CBA;">on</span>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <div class="switch_div">
			
 
				-                        <div class="switch">
			
 
				-                            <input id="cmn-toggle-31" class="cmn-toggle cmn-toggle-round" type="checkbox">
			
 
				-                            <label for="cmn-toggle-31"></label>
			
 
				-                        </div>
			
 
				-                        <div class="switch text-center">
			
 
				-                            {% if output_vacuum == 1 %}
			
 
				-                            <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
			
 
				-                                name="output_vacuum_status" value="ON" onclick="outputVacuum()">
			
 
				-                            {% else %}
			
 
				-                            <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
			
 
				-                                name="output_vacuum_status" value="OFF" onclick="outputVacuum()">
			
 
				-                            {% endif %}
			
 
				-                            <label for="cmn-toggle-32"></label>
			
 
				-                        </div>
			
 
				-                        <div class="switch">
			
 
				-                            <input id="cmn-toggle-33" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
			
 
				-                            <label for="cmn-toggle-33" data-on="Yes" data-off="No"></label>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td><span style="color:#008CBA;"><b>ON</b></span></td>
			
 
				-                <td><input type="button" value="ON" onclick="outputVacuum_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
			
 
				-                <td><input type="button" value="OFF" onclick="outputVacuum_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>感測器</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
			
 
				-            <tr>
			
 
				-                <td>[出料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{output_UltraSonic.UltraSonic}}</span> 公分</td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>排程設計</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
			
 
				-            <tr>
			
 
				-                <td>入料</td>
			
 
				-                <td>循環測試</td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    指定桶內生豆高度
			
 
				-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
			
 
				-                    吸料時間
			
 
				-                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">秒<br>
			
 
				-                    放料時間
			
 
				-                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">秒<br>
			
 
				-                    循環次數
			
 
				-                    <input name="testing_in_vacuum_loop" type="text" value="3" style="width: 40px;">次<br>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    ON (開) &nbsp;
			
 
				-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
			
 
				-                    OFF (關) &nbsp;
			
 
				-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
			
 
				-                    循環
			
 
				-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="BeanInput()">入料測試</button>
			
 
				-                    <script>
			
 
				-                        var BeanIn_Process = 0;
			
 
				-                        var BeanIn_interval;
			
 
				-                        function BeanInput() {
			
 
				-                            clearInterval(WebUpdate_set);
			
 
				-                            var testing_BeanIn_Height = $("input[name=testing_BeanIn_Height]").val();
			
 
				-                            var testing_in_vacuum_in = $("input[name=testing_in_vacuum_in]").val();
			
 
				-                            var testing_in_vacuum_out = $("input[name=testing_in_vacuum_out]").val();
			
 
				-                            var testing_in_vacuum_loop = $("input[name=testing_in_vacuum_loop]").val();
			
 
				-
			
 
				-                            if (testing_BeanIn_Height != 0) {
			
 
				-                                console.log('以指定高度入豆')
			
 
				-                                var BeanIn_interval = setInterval(BeanInHeight, 5000);
			
 
				-
			
 
				-                                function BeanInHeight(){
			
 
				-                                    if (BeanIn_Process == 1) {
			
 
				-                                        return;
			
 
				-                                    }
			
 
				-
			
 
				-                                    BeanIn_Process == 1;
			
 
				-                                    $.ajax({
			
 
				-                                        async:false,
			
 
				-                                        type:"GET",
			
 
				-                                        url:"/dry_UltraSonic_" + tank_num,
			
 
				-                                        dataType:"json",
			
 
				-                                        success:function(response){
			
 
				-                                            var present_Bean_height = response.UltraSonic
			
 
				-                                            console.log('目前生豆高度: ' + present_Bean_height)
			
 
				-
			
 
				-                                            if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
			
 
				-                                                outputVacuum_ON()
			
 
				-                                                console.log('outputVacuum_ON')
			
 
				-                                                
			
 
				-                                                var time = new Date();
			
 
				-                                                while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
			
 
				-
			
 
				-                                                outputVacuum_OFF()
			
 
				-                                                console.log('outputVacuum_OFF')
			
 
				-
			
 
				-                                                var time = new Date();
			
 
				-                                                while ((new Date() - time) < testing_in_vacuum_out * 1000) { };
			
 
				-                                            } else {
			
 
				-                                                clearInterval(BeanIn_interval)
			
 
				-                                                console.log('生豆已達指定高度！')
			
 
				-                                            }
			
 
				-                                            BeanIn_Process == 0;
			
 
				-                                        },
			
 
				-                                        error:function(thrownError){
			
 
				-                                            console.log('Error: ' + thrownError)
			
 
				-                                            BeanIn_Process = 0;
			
 
				-                                        }
			
 
				-                                    })
			
 
				-                                };
			
 
				-
			
 
				-                            } else if (testing_BeanIn_Height == 0) {
			
 
				-                                console.log('以循環次數入豆')
			
 
				-
			
 
				-                                for (step = 1; step <= testing_in_vacuum_loop; step++) {
			
 
				-                                    console.log('-- 循環第 ' + step + ' 次 --');
			
 
				-
			
 
				-                                    outputVacuum_ON()
			
 
				-                                    console.log('outputVacuum_ON')
			
 
				-
			
 
				-                                    var time = new Date();
			
 
				-                                    while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
			
 
				-
			
 
				-                                    outputVacuum_OFF()
			
 
				-                                    console.log('outputVacuum_OFF')
			
 
				-
			
 
				-                                    var time = new Date();
			
 
				-                                    while ((new Date() - time) < testing_in_vacuum_out * 1000) { };
			
 
				-                                }
			
 
				-
			
 
				-                                console.log('循環入豆結束')
			
 
				-                            }
			
 
				-                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="tankVacuumTest()">真空吸料機測試(秒)</button><br>
			
 
				-                    <script>
			
 
				-                        function tankVacuumTest() {
			
 
				-                            clearInterval(WebUpdate_set);
			
 
				-                            var Testing_starttime = $("input[name=Testing_starttime]").val();
			
 
				-                            var Testing_endtime = $("input[name=Testing_endtime]").val();
			
 
				-                            var Testing_loop = $("input[name=Testing_loop]").val();
			
 
				-                            alert('測試間隔' + Testing_starttime + ':' + Testing_endtime + ' 次數' + Testing_loop)
			
 
				-                            var step;
			
 
				-
			
 
				-                            for (step = 1; step <= Testing_loop; step++) {
			
 
				-                                console.log('循環第 ' + step + ' 次');
			
 
				-
			
 
				-                                outputVacuum_ON()
			
 
				-                                console.log('outputVacuum_ON')
			
 
				-
			
 
				-                                var time = new Date();
			
 
				-                                while ((new Date() - time) < Testing_starttime * 1000) { }
			
 
				-
			
 
				-                                outputVacuum_OFF()
			
 
				-                                console.log('outputVacuum_OFF')
			
 
				-
			
 
				-                                var time = new Date();
			
 
				-                                while ((new Date() - time) < Testing_endtime * 1000) { }
			
 
				-                            }
			
 
				-                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>M5 攝影機畫面</h4>
			
 
				-        <div class="container-fluid">
			
 
				-            <div class="row" style="margin-top:10px;">
			
 
				-                <div class="col flex">
			
 
				-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
			
 
				-                        <div class="col-md-12 row flex">
			
 
				-                            <img src="" id="four" width="70%" height="70%">
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                    <script>
			
 
				-                        // M5 攝影機
			
 
				-
			
 
				-                        //const img = document.querySelector('#one');
			
 
				-                        const img3 = document.querySelector('#four');
			
 
				-                        const WS_URL3 = 'ws:///60.250.156.230:8093';
			
 
				-                        //const WS_URL3 = 'ws:///60.250.156.230:8091';
			
 
				-                        const ws3 = new WebSocket(WS_URL3);
			
 
				-                        let urlObject3;
			
 
				-                        ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
			
 
				-                        ws3.onmessage = message3 => {
			
 
				-                            const arrayBuffer3 = message3.data;
			
 
				-                            if (urlObject3) {
			
 
				-                                URL.revokeObjectURL(urlObject3);
			
 
				-                            }
			
 
				-                            urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
			
 
				-                            img3.src = urlObject3;
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        
			
 
				-
			
 
				-        <br>
			
 
				-        <br>
			
 
				-<!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				--->
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <meta http-equiv="refresh" content="300" /><!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var dtn = '{{tid}}';

			
 
				+        var status = '{{status}}';

			
 
				+        console.log('dtn:' + dtn)

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#dry_output_page").text('乾燥貨櫃出料儲豆槽 DO' + dtn + ' 攝影機畫面   ')

			
 
				+            $('#dry_output_page').attr("href", "/camera_DO" + dtn)

			
 
				+            $("#dry_container_output_title").text('乾燥貨櫃出料儲豆槽 DO' + dtn + ' 操作介面')

			
 
				+            $("#coffee_title_pc").text('DO' + dtn + ' 乾燥出料儲豆槽操作介面');

			
 
				+            $("#coffee_title_phone").text('DO' + dtn + ' 操作介面');

			
 
				+            if (status == 2) {

			
 
				+                $('input').prop('disabled', true);

			
 
				+                $('button').prop('disabled', true);

			
 
				+            } else if ( (status == 0) || (status == 1) ) {

			
 
				+                $('input').prop('disabled', false);

			
 
				+                $('button').prop('disabled', false);   

			
 
				+            }

			
 
				+        });

			
 
				+

			
 
				+        WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <script>

			
 
				+        // Rita 制動器運作

			
 
				+

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        function outputVacuum() {

			
 
				+            var status = "off";

			
 
				+            var check = $("input[name=output_vacuum_status]:checked");

			
 
				+            //大於0代表有被選中

			
 
				+            if (check.length > 0) {

			
 
				+                status = "on";

			
 
				+                $("#cmn-toggle-32").prop('checked', false);

			
 
				+                if (!confirm("你確定要開啟出料儲豆槽真空吸料機嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+

			
 
				+            } else {

			
 
				+                $("#cmn-toggle-32").prop('checked', true);

			
 
				+                if (!confirm("你確定要關閉出料儲豆槽真空吸料機嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            };

			
 
				+

			
 
				+            var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": status };

			
 
				+            console.log('data:', data)

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', true);

			
 
				+                    setTimeout("alert('出料儲豆槽真空吸料機_開啟成功!')", 500);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', false);

			
 
				+                    setTimeout("alert('出料儲豆槽真空吸料機_關閉成功!')", 500);

			
 
				+                } else {

			
 
				+                    alert(res);

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+        function outputVacuum_ON() {

			
 
				+            var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": "on" };

			
 
				+            console.log('data:', data)

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', false);

			
 
				+                } else {

			
 
				+                    console.log('res error')

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+        function outputVacuum_OFF() {

			
 
				+            var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": "off" };

			
 
				+            console.log('data:', data)

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-32").prop('checked', false);

			
 
				+                } else {

			
 
				+                    console.log('res error')

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        }

			
 
				+    </script>

			
 
				+

			
 
				+    <script language="JavaScript">

			
 
				+        function changeUpdate() {

			
 
				+            clearInterval(WebUpdate_set);

			
 
				+            var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+            console.log('webupdate_time' + webupdate_time)

			
 
				+            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);

			
 
				+        }

			
 
				+        // jQuery 更新感測器制動器狀態

			
 
				+        function WebUpdate(dtn) {

			
 
				+            $.get('/loading/DO' + dtn, '', function (res) {

			
 
				+                if (res.output_vacuum == 0) {

			
 
				+                    $("#output_vacuum_status").css("background-color", "#C0C0C0")

			
 
				+                } else if (res.output_vacuum == 1) {

			
 
				+                    $("#output_vacuum_status").css("background-color", "forestgreen")

			
 
				+                } else { $("#output_vacuum_status").css("background-color", "crimson") }

			
 
				+                $("#UltraSonic_t_status").text(res.output_UltraSonic);

			
 
				+            }, 'json');

			
 
				+        }

			
 
				+    </script>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+        <h4>制動器</h4>    

			
 
				+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">

			
 
				+            <tr>

			
 
				+                <td style="color:red;">Valve</td>

			
 
				+                <td>真空吸料機</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <span style="color:#C0C0C0;">off</span>

			
 
				+                    <span style="color:#008CBA;">on</span>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-31">

			
 
				+                        </div>

			
 
				+                        <div class="switch text-center">

			
 
				+                            {% if output_vacuum == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32" checked

			
 
				+                                name="output_vacuum_status" value="ON" onclick="outputVacuum()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32"

			
 
				+                                name="output_vacuum_status" value="OFF" onclick="outputVacuum()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-32"></label>

			
 
				+                        </div>

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-32">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#008CBA;"><b>ON</b></span></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="outputVacuum_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="outputVacuum_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>感測器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3">

			
 
				+            <tr>

			
 
				+                <td>[出料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{output_UltraSonic.UltraSonic}}</span> 公分</td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>排程設計</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="3">

			
 
				+            <tr>

			
 
				+                <td>入料</td>

			
 
				+                <td>循環測試</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    指定桶內生豆高度

			
 
				+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>

			
 
				+                    吸料時間

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_in" value="5">秒<br>

			
 
				+                    放料時間

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_out" value="10">秒<br>

			
 
				+                    循環次數

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_loop" value="4">次<br>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    ON (開) 

			
 
				+                    <input type="text" class="input-text" name="Testing_starttime" value="5">秒<br>

			
 
				+                    OFF (關) 

			
 
				+                    <input type="text" class="input-text" name="Testing_endtime" value="10">秒<br>

			
 
				+                    循環

			
 
				+                    <input type="text" class="input-text" name="Testing_loop" value="4">次

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="BeanInput()">入料測試</button>

			
 
				+                    <script>

			
 
				+                        var BeanIn_Process = 0;

			
 
				+                        var BeanIn_interval;

			
 
				+                        function BeanInput() {

			
 
				+                            clearInterval(WebUpdate_set);

			
 
				+                            var testing_BeanIn_Height = $("input[name=testing_BeanIn_Height]").val();

			
 
				+                            var testing_in_vacuum_in = $("input[name=testing_in_vacuum_in]").val();

			
 
				+                            var testing_in_vacuum_out = $("input[name=testing_in_vacuum_out]").val();

			
 
				+                            var testing_in_vacuum_loop = $("input[name=testing_in_vacuum_loop]").val();

			
 
				+

			
 
				+                            if (testing_BeanIn_Height != 0) {

			
 
				+                                console.log('以指定高度入豆')

			
 
				+                                var BeanIn_interval = setInterval(BeanInHeight, 5000);

			
 
				+

			
 
				+                                function BeanInHeight(){

			
 
				+                                    if (BeanIn_Process == 1) {

			
 
				+                                        return;

			
 
				+                                    }

			
 
				+

			
 
				+                                    BeanIn_Process == 1;

			
 
				+                                    $.ajax({

			
 
				+                                        async:false,

			
 
				+                                        type:"GET",

			
 
				+                                        url:"/dry_UltraSonic_" + tank_num,

			
 
				+                                        dataType:"json",

			
 
				+                                        success:function(response){

			
 
				+                                            var present_Bean_height = response.UltraSonic

			
 
				+                                            console.log('目前生豆高度: ' + present_Bean_height)

			
 
				+

			
 
				+                                            if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {

			
 
				+                                                outputVacuum_ON()

			
 
				+                                                console.log('outputVacuum_ON')

			
 
				+                                                

			
 
				+                                                var time = new Date();

			
 
				+                                                while ((new Date() - time) < testing_in_vacuum_in * 1000) { };

			
 
				+

			
 
				+                                                outputVacuum_OFF()

			
 
				+                                                console.log('outputVacuum_OFF')

			
 
				+

			
 
				+                                                var time = new Date();

			
 
				+                                                while ((new Date() - time) < testing_in_vacuum_out * 1000) { };

			
 
				+                                            } else {

			
 
				+                                                clearInterval(BeanIn_interval)

			
 
				+                                                console.log('生豆已達指定高度！')

			
 
				+                                            }

			
 
				+                                            BeanIn_Process == 0;

			
 
				+                                        },

			
 
				+                                        error:function(thrownError){

			
 
				+                                            console.log('Error: ' + thrownError)

			
 
				+                                            BeanIn_Process = 0;

			
 
				+                                        }

			
 
				+                                    })

			
 
				+                                };

			
 
				+

			
 
				+                            } else if (testing_BeanIn_Height == 0) {

			
 
				+                                console.log('以循環次數入豆')

			
 
				+

			
 
				+                                for (step = 1; step <= testing_in_vacuum_loop; step++) {

			
 
				+                                    console.log('-- 循環第 ' + step + ' 次 --');

			
 
				+

			
 
				+                                    outputVacuum_ON()

			
 
				+                                    console.log('outputVacuum_ON')

			
 
				+

			
 
				+                                    var time = new Date();

			
 
				+                                    while ((new Date() - time) < testing_in_vacuum_in * 1000) { };

			
 
				+

			
 
				+                                    outputVacuum_OFF()

			
 
				+                                    console.log('outputVacuum_OFF')

			
 
				+

			
 
				+                                    var time = new Date();

			
 
				+                                    while ((new Date() - time) < testing_in_vacuum_out * 1000) { };

			
 
				+                                }

			
 
				+

			
 
				+                                console.log('循環入豆結束')

			
 
				+                            }

			
 
				+                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="tankVacuumTest()">真空吸料機測試(秒)</button><br>

			
 
				+                    <script>

			
 
				+                        function tankVacuumTest() {

			
 
				+                            clearInterval(WebUpdate_set);

			
 
				+                            var Testing_starttime = $("input[name=Testing_starttime]").val();

			
 
				+                            var Testing_endtime = $("input[name=Testing_endtime]").val();

			
 
				+                            var Testing_loop = $("input[name=Testing_loop]").val();

			
 
				+                            alert('測試間隔' + Testing_starttime + ':' + Testing_endtime + ' 次數' + Testing_loop)

			
 
				+                            var step;

			
 
				+

			
 
				+                            for (step = 1; step <= Testing_loop; step++) {

			
 
				+                                console.log('循環第 ' + step + ' 次');

			
 
				+

			
 
				+                                outputVacuum_ON()

			
 
				+                                console.log('outputVacuum_ON')

			
 
				+

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < Testing_starttime * 1000) { }

			
 
				+

			
 
				+                                outputVacuum_OFF()

			
 
				+                                console.log('outputVacuum_OFF')

			
 
				+

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < Testing_endtime * 1000) { }

			
 
				+                            }

			
 
				+                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/dry_container_schedule.html
+++ b/app/templates/dry_container_schedule.html
--- a/app/templates/dry_container_schedule_0911.html
+++ b/app/templates/dry_container_schedule_0911.html
@@ -0,0 +1,634 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+

			
 
				+    <!-- 新 Bootstrap4 核心 CSS 文件 -->

			
 
				+    <link rel="stylesheet" href="https://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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <h6>感測器數值</h6>

			
 
				+    入料儲豆槽液位計高度(cm)：!測試時請用生豆高度!{{input_UltraSonic.UltraSonic}}

			
 
				+    <div id="input_UltraSonic" d={{input_UltraSonic.UltraSonic}} style="display:none"></div>

			
 
				+    <br>

			
 
				+    設定空桶高度應低於 10

			
 
				+    <br>

			
 
				+    乾燥槽液位計高度(cm)：!測試時請用生豆高度!{{tank_UltraSonic.UltraSonic}}

			
 
				+    <div id="tank_UltraSonic" d={{tank_UltraSonic.UltraSonic}} style="display:none"></div>

			
 
				+    <br>

			
 
				+

			
 
				+    <hr size="50" width="100%">

			
 
				+

			
 
				+    <h6>入料排程</h6>

			
 
				+    設定入料儲豆槽生豆高度(cm)：

			
 
				+    <input name="schedule_input_height" id="schedule_input_height" type="text" style="width:100px;" value="70">

			
 
				+    <br>

			
 
				+    設定吸料時間(s)：

			
 
				+    <input name="schedule_tank_vacuumin" id="schedule_tank_vacuumin" type="text" style="width:100px;" value="5">

			
 
				+    <br>

			
 
				+    設定放料時間(s)：

			
 
				+    <input name="schedule_tank_vacuumout" id="schedule_tank_vacuumout" type="text" style="width:100px;" value="10">

			
 
				+    <br>

			
 
				+    設定乾燥槽生豆高度(cm)：

			
 
				+    <input name="schedule_tank_height" id="schedule_tank_height" type="text" style="width:100px;" value="70">

			
 
				+    <br>

			
 
				+    入料時馬達轉速(rpm)：

			
 
				+    <input name="schedule_tank_motorrpm" id="schedule_tank_motorrpm" type="text" style="width:100px;" value="10">

			
 
				+    <br>

			
 
				+    <button type="submit" class="btn btn-primary" onclick="schedule_Start()">開始入料</button>

			
 
				+    <script>

			
 
				+        function schedule_Start() {

			
 
				+            //word = document.getElementById("schedule_SOP").innerHTML;

			
 
				+            //document.getElementById("schedule_SOP").innerHTML = word+'<br>*';

			
 
				+

			
 
				+            var schedule_input_height = $("input[name=schedule_input_height]").val();

			
 
				+            var schedule_tank_vacuumin = $("input[name=schedule_tank_vacuumin]").val();

			
 
				+            var schedule_tank_vacuumout = $("input[name=schedule_tank_vacuumout]").val();

			
 
				+            var schedule_tank_height = $("input[name=schedule_tank_height]").val();

			
 
				+            var schedule_tank_motorrpm = $("input[name=schedule_tank_motorrpm]").val();

			
 
				+

			
 
				+            var tank_UltraSonic = parseInt(document.getElementById('tank_UltraSonic').getAttribute('d'));

			
 
				+

			
 
				+            // 入料判斷

			
 
				+            if (schedule_input_height <= input_UltraSonic) {

			
 
				+                console.log('儲豆槽達指定高度')

			
 
				+                console.log('tank_UltraSonic:' + tank_UltraSonic)

			
 
				+

			
 
				+                if (tank_UltraSonic <= 10) {

			
 
				+                    var DRY_STATE = 'Ready'

			
 
				+                    console.log('乾燥桶為空, 狀態為 Ready, 準備入料')

			
 
				+

			
 
				+                    // 開始入料

			
 
				+                    while (schedule_tank_height >= tank_UltraSonic) {

			
 
				+

			
 
				+                        // 真空吸料機 ON

			
 
				+                        var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "on" };

			
 
				+                        console.log('data:', data)

			
 
				+                        /*

			
 
				+                        $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                            console.log('真空吸料機 '+res)

			
 
				+                        }, 'text')

			
 
				+                        */

			
 
				+

			
 
				+                        // 吸料時間

			
 
				+                        var time = new Date();

			
 
				+                        while ((new Date() - time) < schedule_tank_vacuumin * 1000) { }

			
 
				+

			
 
				+                        // 真空吸料機 OFF

			
 
				+                        var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "off" };

			
 
				+                        console.log('data:', data)

			
 
				+                        /*

			
 
				+                        $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                            console.log('真空吸料機 '+ res)

			
 
				+                        }, 'text')

			
 
				+                        */

			
 
				+

			
 
				+                        // 放料時間

			
 
				+                        var time = new Date();

			
 
				+                        while ((new Date() - time) < schedule_tank_vacuumout * 1000) { }

			
 
				+                        location.reload();

			
 
				+                    }

			
 
				+                    console.log('乾燥桶生豆以達指定高度, 入料結束')

			
 
				+

			
 
				+

			
 
				+                } else { console.log('乾燥桶不為空, 無法入料') }

			
 
				+            } else { console.log('儲豆槽未達指定高度, 無法入料') }

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+    </script>

			
 
				+    <br>

			
 
				+    <hr size="50" width="100%">

			
 
				+    <!--

			
 
				+    <h6>入料排程_程式</h6>

			
 
				+    <p id="schedule_SOP">按下"開始入料"</p>

			
 
				+-->

			
 
				+    <script>

			
 
				+        dry_object = new Array();

			
 
				+        dry_object[0] = ["ON", "OFF"];  // 入料真空吸料機

			
 
				+        dry_object[1] = ["ON", "OFF"];  // 真空吸料機

			
 
				+        dry_object[2] = ["ON 吸料", "OFF 排氣"];  // 三通閥

			
 
				+        dry_object[3] = ["0", "10", "20", "30", "40", "50"];  // 馬達

			
 
				+        dry_object[4] = ["ON", "OFF"];  // 鼓風機

			
 
				+        dry_object[5] = ["ON", "OFF"];  // 加熱器 1

			
 
				+        dry_object[6] = ["ON", "OFF"];  // 加熱器 2

			
 
				+        dry_object[7] = ["ON", "OFF"];  // 蝴蝶閥

			
 
				+        dry_object[8] = ["ON", "OFF"];  // 消毒電磁閥

			
 
				+        dry_object[9] = ["ON", "OFF"];  // 排水電磁閥

			
 
				+        dry_object[10] = ["ON", "OFF"];  // 溫控開關

			
 
				+        dry_object[11] = ["OFF", "28", "30", "32", "34", "36", "38", "40"];  // 設定溫度

			
 
				+        dry_object[12] = ["ON", "OFF"];  // 出料真空吸料機

			
 
				+

			
 
				+        dry_object[13] = ["ON", "OFF"];  // 入料儲豆槽_液位計

			
 
				+        dry_object[14] = ["ON", "OFF"];  // 液位計

			
 
				+        dry_object[15] = ["ON", "OFF"];  // SHT11_溫度

			
 
				+        dry_object[16] = ["ON", "OFF"];  // SHT11_濕度

			
 
				+        dry_object[17] = ["ON", "OFF"];  // 土壤三合一_溫度

			
 
				+        dry_object[18] = ["ON", "OFF"];  // 土壤三合一_濕度

			
 
				+        dry_object[19] = ["ON", "OFF"];  // 土壤三合一_EC

			
 
				+        dry_object[20] = ["ON", "OFF"];  // 氣壓

			
 
				+        dry_object[21] = ["ON", "OFF"];  // 出料儲豆槽_液位計

			
 
				+

			
 
				+        function renew1(index) {

			
 
				+            console.log('index' + index)

			
 
				+            for (var i = 0; i < dry_object[index].length; i++)

			
 
				+                document.action.do_act1.options[i] = new Option(dry_object[index][i], dry_object[index][i]);

			
 
				+            document.action.do_act1.length = dry_object[index].length;	// 刪除多餘的選項

			
 
				+        }

			
 
				+        function renew2(index) {

			
 
				+            console.log('index' + index)

			
 
				+            for (var i = 0; i < dry_object[index].length; i++)

			
 
				+                document.action.dryinput_do_act2.options[i] = new Option(dry_object[index][i], dry_object[index][i]);

			
 
				+            document.action.dryinput_do_act2.length = dry_object[index].length;	// 刪除多餘的選項

			
 
				+        }

			
 
				+    </script>

			
 
				+

			
 
				+    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

			
 
				+    <div id="box">

			
 
				+        <form name="condition">

			
 
				+            條件

			
 
				+            <select name="cond_a1">

			
 
				+                <optgroup label="Actuator">

			
 
				+                    <option value="input_vacuum">入料真空吸料機</option>

			
 
				+                    <option value="tank_vacuum">真空吸料機</option>

			
 
				+                    <option value="tank_threewayvalve">三通閥</option>

			
 
				+                    <option value="tank_motor">馬達</option>

			
 
				+                    <option value="tank_blower">鼓風機</option>

			
 
				+                    <option value="tank_heater1">加熱器 1</option>

			
 
				+                    <option value="tank_heater2">加熱器 2</option>

			
 
				+                    <option value="tank_diskvalve">蝴蝶閥</option>

			
 
				+                    <option value="tank_solenoid_disinfect">消毒電磁閥</option>

			
 
				+                    <option value="tank_solenoid_water">排水電磁閥</option>

			
 
				+                    <option value="tank_temp1_enable">溫控開關</option>

			
 
				+                    <option value="tank_temp1">設定溫度</option>

			
 
				+                    <option value="output_vacuum">出料真空吸料機</option>

			
 
				+                </optgroup>

			
 
				+                <optgroup label="Sensor">

			
 
				+                    <option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>

			
 
				+                    <option value="tank_UltraSonic">液位計(cm)</option>

			
 
				+                    <option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>

			
 
				+                    <option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>

			
 
				+                    <option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>

			
 
				+                    <option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>

			
 
				+                    <option value="tank_soil_EC">土壤三合一_EC(%)</option>

			
 
				+                    <option value="tank_PA">氣壓(PA)</option>

			
 
				+                    <option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>

			
 
				+                </optgroup>

			
 
				+            </select>

			
 
				+            <select name="cond_cal1">

			
 
				+                <option value="cal1_equal">==</option>

			
 
				+                <option value="cal1_more">&gt;=</option>

			
 
				+                <option value="cal1_less">&lt;=</option>

			
 
				+                <option value="cal1_and">and</option>

			
 
				+                <option value="cal1_or">or</option>

			
 
				+            </select>

			
 
				+

			
 
				+            <input list="cal1" name="cond_b1">

			
 
				+            <datalist id="cal1">

			
 
				+                <option value="ON">

			
 
				+                <option value="OFF">

			
 
				+                <option value="(或請自行輸入數值)">

			
 
				+            </datalist>

			
 
				+

			
 
				+        </form>

			
 
				+

			
 
				+        <form name="action">

			
 
				+            物件：

			
 
				+            <select name="do_obj1" onChange="renew1(this.selectedIndex);">

			
 
				+                <optgroup label="Actuator">

			
 
				+                    <option value="input_vacuum1">入料真空吸料機

			
 
				+                    <option value="tank_vacuum1">真空吸料機</option>

			
 
				+                    <option value="tank_threewayvalve1">三通閥</option>

			
 
				+                    <option value="tank_motor1">馬達</option>

			
 
				+                    <option value="tank_blower1">鼓風機</option>

			
 
				+                    <option value="tank_heater11">加熱器 1</option>

			
 
				+                    <option value="tank_heater21">加熱器 2</option>

			
 
				+                    <option value="tank_diskvalve1">蝴蝶閥</option>

			
 
				+                    <option value="tank_solenoid_disinfect1">消毒電磁閥</option>

			
 
				+                    <option value="tank_solenoid_water1">排水電磁閥</option>

			
 
				+                    <option value="tank_temp1_enable1">溫控開關</option>

			
 
				+                    <option value="tank_temp11">設定溫度</option>

			
 
				+                    <option value="output_vacuum1">出料真空吸料機</option>

			
 
				+                </optgroup>

			
 
				+                <optgroup label="Sensor">

			
 
				+                    <option value="input_UltraSonic1">入料儲豆槽_液位計</option>

			
 
				+                    <option value="tank_UltraSonic1">液位計</option>

			
 
				+                    <option value="tank_SHT11_Temp1">SHT11_溫度</option>

			
 
				+                    <option value="tank_SHT11_Humidity1">SHT11_濕度</option>

			
 
				+                    <option value="tank_soil_Temp1">土壤三合一_溫度</option>

			
 
				+                    <option value="tank_soil_Humidity1">土壤三合一_濕度</option>

			
 
				+                    <option value="tank_soil_EC1">土壤三合一_EC</option>

			
 
				+                    <option value="tank_PA1">氣壓</option>

			
 
				+                    <option value="output_UltraSonic1">出料儲豆槽_液位計</option>

			
 
				+                </optgroup>

			
 
				+            </select>

			
 
				+

			
 
				+            動作：

			
 
				+            <select name="do_act1">

			
 
				+                <option value="">請由左方選取物件

			
 
				+            </select>

			
 
				+        </form>

			
 
				+

			
 
				+        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

			
 
				+        <div id="new">

			
 
				+                新增的條件物件放這裡

			
 
				+        </div>

			
 
				+        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

			
 
				+

			
 
				+        <script>

			
 
				+            var i = 1

			
 
				+

			
 
				+            function Add(evt) {

			
 
				+                // onclick = "Add(hoist_add1);""

			
 
				+                // evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)

			
 
				+                evt.style.display = "none";                 // 元素不顯示

			
 
				+                i++;

			
 
				+                var div = document.createElement('div');    // 輸出 <div></div>

			
 
				+                var cond_a = 'cond_a' + i;

			
 
				+                var cond_b = 'cond_b' + i;

			
 
				+                var cond_cal = 'cond_cal' + i;

			
 
				+                var id = evt.getAttribute('id');            // 輸出 dryinput_add1

			
 
				+                console.log('id:' + id)

			
 
				+                var add = id.split('_')[0] + '_add' + i;    // dryinput + _add + 2 => 輸出 hoist_add2

			
 
				+                var del = id.split('_')[0] + '_del' + i;    // dryinput + _del + 2 => 輸出 hoist_del2

			
 
				+                var html = '';

			
 
				+                var begin = id.split('_')[0];               // 輸出 dryinput

			
 
				+                div.className = "col-12 row";

			
 
				+                div.style.marginTop = "10px";

			
 
				+

			
 
				+                html += '<form name="dryinput_condition">';

			
 
				+                html += '條件';

			
 
				+                if (begin == 'dryinput') {

			
 
				+                    html += ' <select name="dryinput_cond_a' + i + '">';

			
 
				+                } else {

			
 
				+                };

			
 
				+

			
 
				+                html += '<optgroup label="Actuator">' +

			
 
				+                    '<option value="input_vacuum">入料真空吸料機</option>' +

			
 
				+                    '<option value="tank_vacuum">真空吸料機</option>' +

			
 
				+                    '<option value="tank_threewayvalve">三通閥</option>' +

			
 
				+                    '<option value="tank_motor">馬達</option>' +

			
 
				+                    '<option value="tank_blower">鼓風機</option>' +

			
 
				+                    '<option value="tank_heater1">加熱器 1</option>' +

			
 
				+                    '<option value="tank_heater2">加熱器 2</option>' +

			
 
				+                    '<option value="tank_diskvalve">蝴蝶閥</option>' +

			
 
				+                    '<option value="tank_solenoid_disinfect">消毒電磁閥</option>' +

			
 
				+                    '<option value="tank_solenoid_water">排水電磁閥</option>' +

			
 
				+                    '<option value="tank_temp1_enable">溫控開關</option>' +

			
 
				+                    '<option value="tank_temp1">設定溫度</option>' +

			
 
				+                    '<option value="output_vacuum">出料真空吸料機</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '<optgroup label="Sensor">' +

			
 
				+                    '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +

			
 
				+                    '<option value="tank_UltraSonic">液位計(cm)</option>' +

			
 
				+                    '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +

			
 
				+                    '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +

			
 
				+                    '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +

			
 
				+                    '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +

			
 
				+                    '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +

			
 
				+                    '<option value="tank_PA">氣壓(PA)</option>' +

			
 
				+                    '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '</select>';

			
 
				+

			
 
				+                if (begin == 'dryinput') {

			
 
				+                    html += '<select name="dryinput_cond_cal' + i + '">';

			
 
				+                } else {

			
 
				+                };

			
 
				+

			
 
				+                html += '<option value="cal1_equal">==</option>' +

			
 
				+                    '<option value="cal1_more">&gt;=</option>' +

			
 
				+                    '<option value="cal1_less">&lt;=</option>' +

			
 
				+                    '<option value="cal1_and">and</option>' +

			
 
				+                    '<option value="cal1_or">or</option>' +

			
 
				+                    '</select>';

			
 
				+

			
 
				+                if (begin == 'dryinput') {

			
 
				+                    html += '<input list="cal' + i + '" name="dryinput_cond_b' + i + '">';

			
 
				+                } else {

			
 
				+                };

			
 
				+

			
 
				+                html += '<datalist id="cal' + i + '">' +

			
 
				+                    '<option value="ON">' +

			
 
				+                    '<option value="OFF">' +

			
 
				+                    '<option value="(或請自行輸入數值)">' +

			
 
				+                    '</datalist>' +

			
 
				+                    '</form>';

			
 
				+

			
 
				+                html += '<form name="dryinput_action">';

			
 
				+                html += '物件：';

			
 
				+                html += '<script>' +

			
 
				+                    'dry_object = new Array();' +

			
 
				+                    'dry_object[0] = ["ON", "OFF"];' +

			
 
				+                    'dry_object[1] = ["ON", "OFF"];' +

			
 
				+                    'dry_object[2] = ["ON 吸料", "OFF 排氣"];' +

			
 
				+                    'dry_object[3] = ["0", "10", "20", "30", "40", "50"];' +

			
 
				+                    'dry_object[4] = ["ON", "OFF"];' +

			
 
				+                    'dry_object[5] = ["ON", "OFF"];' +

			
 
				+                    'dry_object[6] = ["ON", "OFF"];' +

			
 
				+                    'dry_object[7] = ["ON", "OFF"]; ' +

			
 
				+                    'function renew' + i + '(index) {' +

			
 
				+                    'for (var i = 0; i < dry_object[index].length; i++)' +

			
 
				+                    'document.action.dryinput_do_act' + i + '.options[i] = new Option(dry_object[index][i], dry_object[index][i]);' +

			
 
				+                    'document.action.dryinput_do_act' + i + '.length = dry_object[index].length;' +

			
 
				+                    '}' +

			
 
				+                    '<\/script>';

			
 
				+

			
 
				+                if (begin == 'dryinput') {

			
 
				+                    html += '<select name="dryinput_do_obj' + i + '" onChange="renew' + i + '(this.selectedIndex);">';

			
 
				+                } else {

			
 
				+                };

			
 
				+

			
 
				+

			
 
				+                html += '<optgroup label="Actuator">' +

			
 
				+                    '<option value="input_vacuum1">入料真空吸料機' +

			
 
				+                    '<option value="tank_vacuum1">真空吸料機</option>' +

			
 
				+                    '<option value="tank_threewayvalve1">三通閥</option>' +

			
 
				+                    '<option value="tank_motor1">馬達</option>' +

			
 
				+                    '<option value="tank_blower1">鼓風機</option>' +

			
 
				+                    '<option value="tank_heater11">加熱器 1</option>' +

			
 
				+                    '<option value="tank_heater21">加熱器 2</option>' +

			
 
				+                    '<option value="tank_diskvalve1">蝴蝶閥</option>' +

			
 
				+                    '<option value="tank_solenoid_disinfect1">消毒電磁閥</option>' +

			
 
				+                    '<option value="tank_solenoid_water1">排水電磁閥</option>' +

			
 
				+                    '<option value="tank_temp1_enable1">溫控開關</option>' +

			
 
				+                    '<option value="tank_temp11">設定溫度</option>' +

			
 
				+                    '<option value="output_vacuum1">出料真空吸料機</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '<optgroup label="Sensor">' +

			
 
				+                    '<option value="input_UltraSonic1">入料儲豆槽_液位計</option>' +

			
 
				+                    '<option value="tank_UltraSonic1">液位計</option>' +

			
 
				+                    '<option value="tank_SHT11_Temp1">SHT11_溫度</option>' +

			
 
				+                    '<option value="tank_SHT11_Humidity1">SHT11_濕度</option>' +

			
 
				+                    '<option value="tank_soil_Temp1">土壤三合一_溫度</option>' +

			
 
				+                    '<option value="tank_soil_Humidity1">土壤三合一_濕度</option>' +

			
 
				+                    '<option value="tank_soil_EC1">土壤三合一_EC</option>' +

			
 
				+                    '<option value="tank_PA1">氣壓</option>' +

			
 
				+                    '<option value="output_UltraSonic1">出料儲豆槽_液位計</option>' +

			
 
				+                    '</optgroup>' +

			
 
				+                    '</select>';

			
 
				+                html += '動作：';

			
 
				+

			
 
				+                if (begin == 'dryinput') {

			
 
				+                    html += '<select name="dryinput_do_act' + i + '">';

			
 
				+                } else {

			
 
				+                };

			
 
				+

			
 
				+                html += '<option value="">請由左方選取物件' +

			
 
				+                    '</select>' +

			
 
				+                    '<input  id=dryinput_del' + i + ' class="delete" type="button" value="條件物件--" onclick="Delete(dryinput_del' + i + ');">'

			
 
				+                '</form>' +

			
 
				+                    '</div>';

			
 
				+                //html += ;

			
 
				+                html += '<br><input id="dryinput_add' + i + '" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add' + i + ');"><br>';

			
 
				+                html += '</div><div id="dry_con_act' + (i + 1) + '"></div>';

			
 
				+

			
 
				+                var divbox = document.getElementById('box');

			
 
				+                divbox.insertAdjacentHTML('beforeend', html);

			
 
				+

			
 
				+

			
 
				+            };

			
 
				+            function Delete(evt) {

			
 
				+                // evt = dryinput_del2

			
 
				+                var id = evt.getAttribute('id');            // 輸出 dryinput_del2

			
 
				+                //console.log('id:'+id)

			
 
				+                var begin = id.split('_')[0];               // 輸出 dryinput

			
 
				+                //console.log('begin:'+begin)

			
 
				+                var del_num = id.split('_')[1].replace("del", "");

			
 
				+                //console.log('del_num:'+del_num)

			
 
				+                var obox = document.getElementById("box");

			
 
				+                var target = "dry_con_act" + del_num

			
 
				+                console.log('target:' + target)

			
 
				+

			
 
				+                var divs = obox.getElementById(target);

			
 
				+                if (divs.length > 0) {

			
 
				+                    obox.removeChild(divs[0]);

			
 
				+                }

			
 
				+            };

			
 
				+

			
 
				+        </script>

			
 
				+        <!--

			
 
				+    <input type="button" onclick="document.body.insertAdjacentHTML('beforeEnd', box)" value="新增">

			
 
				+    box = '<input type=text name=' + i + ' value=' + i + '><br>'

			
 
				+-->

			
 
				+        <input id="dryinput_add1" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add1);">

			
 
				+        <br>

			
 
				+

			
 
				+        <div id="dry_con_act2"></div>

			
 
				+

			
 
				+    </div>

			
 
				+    <hr size="50" width="100%">

			
 
				+

			
 
				+    

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				+</html>
			
--- a/app/templates/dry_container_tank.html
+++ b/app/templates/dry_container_tank.html
--- a/app/templates/dry_tank.html
+++ b/app/templates/dry_tank.html
@@ -1,78 +1,78 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>GoldIn</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_status {
			
 
				-            width: 20px;
			
 
				-            height: 20px;
			
 
				-            background-color: cornflowerblue;
			
 
				-            border-radius: 50%;
			
 
				-        }
			
 
				-
			
 
				-        .D1_position {
			
 
				-            position: absolute;
			
 
				-            top: 175px;
			
 
				-            left: 195px;
			
 
				-            width: 170px;
			
 
				-            height: 230px;
			
 
				-            border-style: solid;
			
 
				-            border-color: aqua;
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-    
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <!--
			
 
				-        background-color:rgb(0, 238, 255);
			
 
				-    -->
			
 
				-    <div style="text-align: center; margin-top: 70px;font-size: 24px;">
			
 
				-        GoldIn's Coffee
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <img src="../static/img/web_dry_tank.png" width="300x" style="margin: auto">
			
 
				-        <div id="D1" tabindex="0" class="D1_position" role="button">
			
 
				-            D1
			
 
				-            status
			
 
				-            <div id="D1_status"></div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-
			
 
				-    <script>
			
 
				-        var button_D1 = document.getElementById('D1');
			
 
				-        button_D1.addEventListener('click', showTankDetail);
			
 
				-
			
 
				-        function showTankDetail(){
			
 
				-            //document.location.href="/dry_container/1";  // Flask 測試 OK
			
 
				-            //document.location.href="C:/Users/USER/Rita/Coffee/CoffeeProject/app/templates/dry_tank.html";  // 本機測試 OK
			
 
				-        };
			
 
				-
			
 
				-    </script>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>GoldIn</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_status {

			
 
				+            width: 20px;

			
 
				+            height: 20px;

			
 
				+            background-color: cornflowerblue;

			
 
				+            border-radius: 50%;

			
 
				+        }

			
 
				+

			
 
				+        .D1_position {

			
 
				+            position: absolute;

			
 
				+            top: 175px;

			
 
				+            left: 195px;

			
 
				+            width: 170px;

			
 
				+            height: 230px;

			
 
				+            border-style: solid;

			
 
				+            border-color: aqua;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+    

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <!--

			
 
				+        background-color:rgb(0, 238, 255);

			
 
				+    -->

			
 
				+    <div style="text-align: center; margin-top: 70px;font-size: 24px;">

			
 
				+        GoldIn's Coffee

			
 
				+    </div>

			
 
				+    <div>

			
 
				+        <img src="../static/img/web_dry_tank.png" width="300x" style="margin: auto">

			
 
				+        <div id="D1" tabindex="0" class="D1_position" role="button">

			
 
				+            D1

			
 
				+            status

			
 
				+            <div id="D1_status"></div>

			
 
				+        </div>

			
 
				+    </div>

			
 
				+

			
 
				+    <script>

			
 
				+        var button_D1 = document.getElementById('D1');

			
 
				+        button_D1.addEventListener('click', showTankDetail);

			
 
				+

			
 
				+        function showTankDetail(){

			
 
				+            //document.location.href="/dry_container/1";  // Flask 測試 OK

			
 
				+            //document.location.href="C:/Users/USER/Rita/Coffee/CoffeeProject/app/templates/dry_tank.html";  // 本機測試 OK

			
 
				+        };

			
 
				+

			
 
				+    </script>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ferment.html
+++ b/app/templates/ferment.html
--- a/app/templates/ferment_auto.html
+++ b/app/templates/ferment_auto.html
--- a/app/templates/ferment_auto_1004.html
+++ b/app/templates/ferment_auto_1004.html
--- a/app/templates/ferment_container.html
+++ b/app/templates/ferment_container.html
--- a/app/templates/ferment_container_0813.html
+++ b/app/templates/ferment_container_0813.html
--- a/app/templates/ferment_container_input.html
+++ b/app/templates/ferment_container_input.html
@@ -1,625 +1,343 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var ftn = '{{tid}}';
			
 
				-        var status = '{{status}}';
			
 
				-        console.log('ftn:' + ftn)
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#ferment_input_page").text('發酵貨櫃入料儲豆槽 FI' + ftn + ' 攝影機畫面   ')
			
 
				-            $('#ferment_input_page').attr("href", "/camera_FI" + ftn)
			
 
				-            $("#ferment_input_title").text('發酵貨櫃入料儲豆槽 FI' + ftn + ' 操作介面')
			
 
				-            $("#coffee_title").text('FI' + ftn + ' 發酵入料儲豆槽操作介面');
			
 
				-
			
 
				-            if (status == 2) {
			
 
				-                $('input').prop('disabled', true);
			
 
				-                $('button').prop('disabled', true);
			
 
				-            } else if ( (status == 0) || (status == 1) ) {
			
 
				-                $('input').prop('disabled', false);
			
 
				-                $('button').prop('disabled', false);   
			
 
				-            }
			
 
				-        });
			
 
				-
			
 
				-        WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            position: absolute;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        body {
			
 
				-            margin: 0;
			
 
				-        }
			
 
				-
			
 
				-        input[type="button"] {
			
 
				-            padding: 4px 15px;
			
 
				-            background: #f3f3f3;
			
 
				-            border: 0 none;
			
 
				-            cursor: pointer;
			
 
				-            -webkit-border-radius: 5px;
			
 
				-            border-radius: 5px;
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-    <script>
			
 
				-        // 發酵槽_制動器控制
			
 
				-        var tank_num = '{{tid}}';
			
 
				-
			
 
				-        function inputVacuum() {
			
 
				-            var status = "off";
			
 
				-            var check = $("input[name=input_vacuum_status]:checked");  // 這裡面是 jQuery 撈取資料的方法, jQuery 常使用到 $ 錢字號
			
 
				-            console.log('check：', check);
			
 
				-            //大於0代表有被選中, 如果有多個可以呈現勾取的項目數量
			
 
				-            if (check.length > 0) {
			
 
				-                status = "on";
			
 
				-                $("#cmn-toggle-02").prop('checked', false); // 確認是否勾選
			
 
				-                if (!confirm("你確定要開啟入料儲豆槽真空吸料機嗎?")) {
			
 
				-                    return false;
			
 
				-                };
			
 
				-            } else {
			
 
				-                $("#cmn-toggle-02").prop('checked', true);
			
 
				-                if (!confirm("你確定要關閉入料儲豆槽真空吸料機嗎?")) {
			
 
				-                    return false;
			
 
				-                };
			
 
				-            };
			
 
				-
			
 
				-            var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": status };
			
 
				-            // jquery 請求 '/mqtt/{{tid}}' 頁面
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
			
 
				-                console.log('data:', data)
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', true);
			
 
				-                    setTimeout("alert('入料儲豆槽真空吸料機_開啟成功!')", 500);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', false);
			
 
				-                    setTimeout("alert('入料儲豆槽真空吸料機_關閉成功!')", 500);
			
 
				-                } else {
			
 
				-                    alert(res);
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        };
			
 
				-
			
 
				-        function inputVacuum_ON() {
			
 
				-            var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "on" };
			
 
				-            // jquery 請求 '/mqtt/{{tid}}' 頁面
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
			
 
				-                console.log('data:', data)
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', true);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', false);
			
 
				-                } else {
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        };
			
 
				-
			
 
				-        function inputVacuum_OFF() {
			
 
				-            var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "off" };
			
 
				-            // jquery 請求 '/mqtt/{{tid}}' 頁面
			
 
				-            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
			
 
				-                console.log('data:', data)
			
 
				-                if (res == 'on') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', true);
			
 
				-                } else if (res == 'off') {
			
 
				-                    $("#cmn-toggle-02").prop('checked', false);
			
 
				-                } else {
			
 
				-                };
			
 
				-            }, 'text')
			
 
				-        };
			
 
				-
			
 
				-        
			
 
				-
			
 
				-    </script>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="wrapper">
			
 
				-        <div id="coffee_header">
			
 
				-            <!-- 匯入共同使用的 header.html 內容 -->
			
 
				-            {% include 'header.html' %}
			
 
				-        </div>
			
 
				-    
			
 
				-        <!--
			
 
				-        <div style="text-align: left;">
			
 
				-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
			
 
				-        </div>
			
 
				-        <div style="text-align: right;">
			
 
				-            <a id="ferment_input_page" href="/index_new" style="float: right;">___________________</a>
			
 
				-        </div>
			
 
				-        <div id="ferment_input_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
			
 
				-            發酵貨櫃入料儲豆槽 FI 操作介面
			
 
				-        </div>
			
 
				-        -->
			
 
				-
			
 
				-        狀態更新時間(秒)
			
 
				-        <input name="webupdate_time" type="text" value="60" style="width:100px;">
			
 
				-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
			
 
				-
			
 
				-        <script language="JavaScript">
			
 
				-            
			
 
				-            function changeUpdate() {
			
 
				-                clearInterval(WebUpdate_set);
			
 
				-
			
 
				-                var webupdate_time = $("input[name=webupdate_time]").val()
			
 
				-                console.log('webupdate_time' + webupdate_time)
			
 
				-                WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , webupdate_time * 1000);
			
 
				-            }
			
 
				-
			
 
				-            // jQuery 更新感測器制動器狀態
			
 
				-            function WebUpdate(ftn) {
			
 
				-                $.get('/loading/FI' + ftn, '', function (res) {
			
 
				-                    if (res.input_vacuum == 0) {
			
 
				-                        $("#cmn-toggle-02").prop('checked', false);
			
 
				-                    } else if (res.input_vacuum == 1) {
			
 
				-                        $("#cmn-toggle-02").prop('checked', true);}
			
 
				-
			
 
				-
			
 
				-                        $("#UltraSonic_t_status").text(res.input_UltraSonic);
			
 
				-        
			
 
				-                }, 'json');
			
 
				-            }
			
 
				-        </script>
			
 
				-
			
 
				-        <h4>制動器</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
			
 
				-            <tr>
			
 
				-                <td style="color:red;">Valve</td>
			
 
				-                <td>真空吸料機</td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    <span style="color:#C0C0C0;">off</span>
			
 
				-                    <span style="color:#008CBA;">on</span>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <div class="switch_div">
			
 
				-                        <div class="switch">
			
 
				-                            <input id="cmn-toggle-01" class="cmn-toggle cmn-toggle-round" type="checkbox">
			
 
				-                            <label for="cmn-toggle-01"></label>
			
 
				-                        </div>
			
 
				-                        <div class="switch text-center">
			
 
				-                            {% if input_vacuum == 1 %}
			
 
				-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
			
 
				-                                name="tank_vacuum_status" value="ON" onclick="inputVacuum()">
			
 
				-                            {% else %}
			
 
				-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
			
 
				-                                name="tank_vacuum_status" value="OFF" onclick="inputVacuum()">
			
 
				-                            {% endif %}
			
 
				-                            <label for="cmn-toggle-02"></label>
			
 
				-                        </div>
			
 
				-                        <div class="switch">
			
 
				-                            <input id="cmn-toggle-03" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
			
 
				-                            <label for="cmn-toggle-03" data-on="Yes" data-off="No"></label>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td><span style="color:#008CBA;"><b>ON</b></span></td>
			
 
				-                <td><input type="button" value="ON" name="input_vacuum_ON" onclick="inputVacuum_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
			
 
				-                <td><input type="button" value="OFF" name="input_vacuum_OFF" onclick="inputVacuum_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>感測器</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
			
 
				-            <tr>
			
 
				-                <td>[入料] 生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>排程設計</h4>
			
 
				-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
			
 
				-            <tr>
			
 
				-                <td>入料</td>
			
 
				-                <td>循環測試</td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    指定桶內生豆高度
			
 
				-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
			
 
				-                    吸料時間
			
 
				-                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">秒<br>
			
 
				-                    放料時間
			
 
				-                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">秒<br>
			
 
				-                    循環次數
			
 
				-                    <input name="testing_in_vacuum_loop" type="text" value="3" style="width: 40px;">次<br>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    ON (開) &nbsp;
			
 
				-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
			
 
				-                    OFF (關) &nbsp;
			
 
				-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
			
 
				-                    循環
			
 
				-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="CoffeeIn_testing()">入豆測試</button>
			
 
				-                    <script>
			
 
				-                        CoffeeIn_Process = 0;   // 生豆入豆狀態
			
 
				-                        function CoffeeIn_testing() {
			
 
				-                            var testing_tank_coffee_height = $("input[name=testing_tank_coffee_height]").val();
			
 
				-                            console.log('目標入料高度' + testing_tank_coffee_height)
			
 
				-
			
 
				-                            var testing_tank_vacuum_in = $("input[name=testing_tank_vacuum_in]").val();
			
 
				-                            var testing_tank_vacuum_out = $("input[name=testing_tank_vacuum_out]").val();
			
 
				-                            var testing_tank_vacuum_loop = $("input[name=testing_tank_vacuum_loop]").val();
			
 
				-
			
 
				-                            if (testing_tank_coffee_height != 0) {
			
 
				-                                console.log('以目標高度入豆')
			
 
				-
			
 
				-                                var Coffee_interval = setInterval(tankCoffeeHeight, 5000);
			
 
				-
			
 
				-                                function tankCoffeeHeight(){
			
 
				-                                    if (CoffeeIn_Process == 1){
			
 
				-                                        return;
			
 
				-                                    }
			
 
				-                                    
			
 
				-                                    CoffeeIn_Process = 1;
			
 
				-                                    $.ajax({
			
 
				-                                        async:false,
			
 
				-                                        type:'GET',
			
 
				-                                        url:'/ferment_LiDAR_' + tank_num,
			
 
				-                                        dataType:'JSON',
			
 
				-                                        success:function(response){
			
 
				-                                            var present_Coffee_height = response.LiDAR
			
 
				-                                            console.log("目前生豆高度: ", present_Coffee_height)
			
 
				-
			
 
				-                                            if( present_Coffee_height >= testing_tank_coffee_height){
			
 
				-                                                clearInterval(Coffee_interval);
			
 
				-                                                console.log("生豆已達目標高度！")
			
 
				-                                                CoffeeIn_Process = 0;
			
 
				-                                            } else {
			
 
				-                                                inputVacuum_ON()
			
 
				-                                                console.log('inputVacuum_ON')
			
 
				-
			
 
				-                                                var time = new Date();
			
 
				-                                                while ((new Date() - time) < testing_tank_vacuum_in * 1000) { };
			
 
				-
			
 
				-                                                inputVacuum_OFF()
			
 
				-                                                console.log('inputVacuum_OFF')
			
 
				-
			
 
				-                                                var time = new Date();
			
 
				-                                                while ((new Date() - time) < testing_tank_vacuum_out * 1000) { };
			
 
				-                                                CoffeeIn_Process = 0;
			
 
				-                                            }
			
 
				-                                        },
			
 
				-                                        error:function(thrownError){
			
 
				-                                            console.log("Error: " + thrownError)
			
 
				-                                            CoffeeIn_Process = 0;
			
 
				-                                        }
			
 
				-                                    });
			
 
				-                                    CoffeeIn_Process = 0;
			
 
				-                                };
			
 
				-
			
 
				-                                
			
 
				-                            } else if (testing_tank_coffee_height == 0){
			
 
				-                                console.log('開始循環入豆')
			
 
				-
			
 
				-                                for (step = 1; step <= testing_tank_vacuum_loop; step++) {
			
 
				-                                    console.log('-- 循環第 ' + step + ' 次 --');
			
 
				-
			
 
				-                                    inputVacuum_ON()
			
 
				-                                    console.log('inputVacuum_ON')
			
 
				-
			
 
				-                                    var time = new Date();
			
 
				-                                    while ((new Date() - time) < testing_tank_vacuum_in * 1000) { };
			
 
				-
			
 
				-                                    inputVacuum_OFF()
			
 
				-                                    console.log('inputVacuum_OFF')
			
 
				-
			
 
				-                                    var time = new Date();
			
 
				-                                    while ((new Date() - time) < testing_tank_vacuum_out * 1000) { };
			
 
				-                                }
			
 
				-
			
 
				-                                console.log('-- 循環入豆結束 --')
			
 
				-
			
 
				-                            }
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <button type="submit" class="btn btn-primary" onclick="tankVacuumTest()">真空吸料機測試(秒)</button><br>
			
 
				-                    <script>
			
 
				-                        function tankVacuumTest() {
			
 
				-                            clearInterval(WebUpdate_set);
			
 
				-                            var Testing_starttime = $("input[name=Testing_starttime]").val();
			
 
				-                            var Testing_endtime = $("input[name=Testing_endtime]").val();
			
 
				-                            var Testing_loop = $("input[name=Testing_loop]").val();
			
 
				-                            alert('測試間隔' + Testing_starttime + ':' + Testing_endtime + ' 次數' + Testing_loop)
			
 
				-                            var step;
			
 
				-
			
 
				-                            for (step = 1; step <= Testing_loop; step++) {
			
 
				-                                console.log('循環第 ' + step + ' 次');
			
 
				-
			
 
				-                                inputVacuum_ON()
			
 
				-                                console.log('inputVacuum_ON')
			
 
				-
			
 
				-                                var time = new Date();
			
 
				-                                while ((new Date() - time) < Testing_starttime * 1000) { }
			
 
				-
			
 
				-                                inputVacuum_OFF()
			
 
				-                                console.log('inputVacuum_OFF')
			
 
				-
			
 
				-                                var time = new Date();
			
 
				-                                while ((new Date() - time) < Testing_endtime * 1000) { }
			
 
				-                            }
			
 
				-                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <h4>攝影機畫面</h4>
			
 
				-        <div class="container-fluid">
			
 
				-            <div class="row" style="margin-top:5px;">
			
 
				-                <div class="col flex">
			
 
				-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
			
 
				-                        <div class="col-md-12 row flex">
			
 
				-                            <img src="" id="two" width="80%" height="80%">
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                    <script>
			
 
				-                        // M5 攝影機
			
 
				-                        //const img = document.querySelector('#one');
			
 
				-                        const img1 = document.querySelector('#two');
			
 
				-                        const WS_URL1 = 'ws:///60.250.156.230:8089';
			
 
				-                        const ws1 = new WebSocket(WS_URL1);
			
 
				-                        let urlObject1;
			
 
				-                        ws1.onopen = () => console.log(`Connected to ${WS_URL1}`);
			
 
				-                        ws1.onmessage = message1 => {
			
 
				-                            const arrayBuffer1 = message1.data;
			
 
				-                            if (urlObject1) {
			
 
				-                                URL.revokeObjectURL(urlObject1);
			
 
				-                            }
			
 
				-                            urlObject1 = URL.createObjectURL(new Blob([arrayBuffer1]));
			
 
				-                            img1.src = urlObject1;
			
 
				-                        }
			
 
				-                    </script>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-
			
 
				-        <br>
			
 
				-        <br>
			
 
				-
			
 
				-        <!--
			
 
				-        <footer class="footer">
			
 
				-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
			
 
				-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
			
 
				-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-        -->
			
 
				-
			
 
				-        <div id="coffee_footer">
			
 
				-            <!-- 匯入共同使用的 footer.html 內容 -->
			
 
				-            {% include 'footer.html' %}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="5" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var ftn = '{{tid}}';

			
 
				+        var status = '{{status}}';

			
 
				+        console.log('ftn:' + ftn)

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#ferment_input_page").text('發酵貨櫃入料儲豆槽 FI' + ftn + ' 攝影機畫面   ')

			
 
				+            $('#ferment_input_page').attr("href", "/camera_FI" + ftn)

			
 
				+            $("#ferment_input_title").text('發酵貨櫃入料儲豆槽 FI' + ftn + ' 操作介面')

			
 
				+            $("#coffee_title_pc").text('FI' + ftn + ' 發酵入料儲豆槽操作介面');

			
 
				+            $("#coffee_title_phone").text('FI' + ftn + ' 操作介面');

			
 
				+

			
 
				+            if (status == 2) {

			
 
				+                $('input').prop('disabled', true);

			
 
				+                $('button').prop('disabled', true);

			
 
				+            } else if ( (status == 0) || (status == 1) ) {

			
 
				+                $('input').prop('disabled', false);

			
 
				+                $('button').prop('disabled', false);   

			
 
				+            }

			
 
				+        });

			
 
				+

			
 
				+        WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <script>

			
 
				+        // 發酵槽_制動器控制

			
 
				+        var tank_num = '{{tid}}';

			
 
				+

			
 
				+        function inputVacuum() {

			
 
				+            var status = "off";

			
 
				+            var check = $("input[name=input_vacuum_status]:checked");  // 這裡面是 jQuery 撈取資料的方法, jQuery 常使用到 $ 錢字號

			
 
				+            console.log('check：', check);

			
 
				+            //大於0代表有被選中, 如果有多個可以呈現勾取的項目數量

			
 
				+            if (check.length > 0) {

			
 
				+                status = "on";

			
 
				+                $("#cmn-toggle-02").prop('checked', false); // 確認是否勾選

			
 
				+                if (!confirm("你確定要開啟入料儲豆槽真空吸料機嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            } else {

			
 
				+                $("#cmn-toggle-02").prop('checked', true);

			
 
				+                if (!confirm("你確定要關閉入料儲豆槽真空吸料機嗎?")) {

			
 
				+                    return false;

			
 
				+                };

			
 
				+            };

			
 
				+

			
 
				+            var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": status };

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                    setTimeout("alert('入料儲豆槽真空吸料機_開啟成功!')", 500);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                    setTimeout("alert('入料儲豆槽真空吸料機_關閉成功!')", 500);

			
 
				+                } else {

			
 
				+                    alert(res);

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+

			
 
				+        function inputVacuum(params) {

			
 
				+            if (params == '1') {

			
 
				+                var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "on" };

			
 
				+            } else if (params == '0') {

			
 
				+                var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "off" };

			
 
				+            } else {

			
 
				+                var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": params };

			
 
				+            }

			
 
				+            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function

			
 
				+                console.log('data:', data)

			
 
				+                if (res == 'on') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);

			
 
				+                } else if (res == 'off') {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                } else {

			
 
				+                };

			
 
				+            }, 'text')

			
 
				+        };

			
 
				+

			
 
				+    </script>

			
 
				+    

			
 
				+    <script language="JavaScript">

			
 
				+            

			
 
				+        function changeUpdate() {

			
 
				+            clearInterval(WebUpdate_set);

			
 
				+

			
 
				+            var webupdate_time = $("input[name=webupdate_time]").val()

			
 
				+            console.log('webupdate_time' + webupdate_time)

			
 
				+            WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , webupdate_time * 1000);

			
 
				+        }

			
 
				+

			
 
				+        // jQuery 更新感測器制動器狀態

			
 
				+        function WebUpdate(ftn) {

			
 
				+            $.get('/loading/FI' + ftn, '', function (res) {

			
 
				+                if (res.input_vacuum == 0) {

			
 
				+                    $("#cmn-toggle-02").prop('checked', false);

			
 
				+                } else if (res.input_vacuum == 1) {

			
 
				+                    $("#cmn-toggle-02").prop('checked', true);}

			
 
				+

			
 
				+

			
 
				+                    $("#UltraSonic_t_status").text(res.input_UltraSonic);

			
 
				+    

			
 
				+            }, 'json');

			
 
				+        }

			
 
				+    </script>

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <div id="wrapper">

			
 
				+        <div id="coffee_header">

			
 
				+            <!-- 匯入共同使用的 header.html 內容 -->

			
 
				+            {% include 'header.html' %}

			
 
				+        </div>

			
 
				+

			
 
				+

			
 
				+        <h4>制動器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="5" style="text-align: center;">

			
 
				+            <tr>

			
 
				+                <td style="color:red;">Valve</td>

			
 
				+                <td>真空吸料機</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <span style="color:#C0C0C0;">off</span>

			
 
				+                    <span style="color:#008CBA;">on</span>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <div class="switch_div">

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">

			
 
				+                        </div>

			
 
				+                        <div class="switch text-center">

			
 
				+                            {% if input_vacuum == 1 %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked

			
 
				+                                name="tank_vacuum_status" value="ON" onclick="inputVacuum()">

			
 
				+                            {% else %}

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02"

			
 
				+                                name="tank_vacuum_status" value="OFF" onclick="inputVacuum()">

			
 
				+                            {% endif %}

			
 
				+                            <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>

			
 
				+                        </div>

			
 
				+                        <div class="switch">

			
 
				+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-03">

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#008CBA;"><b>ON</b></span></td>

			
 
				+                <td><input type="button" class="input-button-on" value="ON" onclick="inputVacuum('1')"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>

			
 
				+                <td><input type="button" class="input-button-off" value="OFF" onclick="inputVacuum('0')"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>感測器</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="5">

			
 
				+            <tr>

			
 
				+                <td>生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <h4>排程設計</h4>

			
 
				+        <table border="1" class="table-all" cellpadding="5">

			
 
				+            <tr>

			
 
				+                <td>入料</td>

			
 
				+                <td>循環測試</td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    指定桶內生豆高度

			
 
				+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>

			
 
				+                    吸料時間

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_in" value="5">秒<br>

			
 
				+                    放料時間

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_out" value="10">秒<br>

			
 
				+                    循環次數

			
 
				+                    <input type="text" class="input-text" name="testing_in_vacuum_loop" value="3">次<br>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    ON (開)

			
 
				+                    <input type="text" class="input-text" name="Testing_starttime" value="3">秒<br>

			
 
				+                    OFF (關)

			
 
				+                    <input type="text" class="input-text" name="Testing_endtime" value="5">秒<br>

			
 
				+                    循環

			
 
				+                    <input type="text" class="input-text" name="Testing_loop" value="3">次

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="CoffeeIn_testing()">入豆測試</button>

			
 
				+                    <script>

			
 
				+                        CoffeeIn_Process = 0;   // 生豆入豆狀態

			
 
				+                        function CoffeeIn_testing() {

			
 
				+                            var testing_tank_coffee_height = $("input[name=testing_tank_coffee_height]").val();

			
 
				+                            console.log('目標入料高度' + testing_tank_coffee_height)

			
 
				+

			
 
				+                            var testing_tank_vacuum_in = $("input[name=testing_tank_vacuum_in]").val();

			
 
				+                            var testing_tank_vacuum_out = $("input[name=testing_tank_vacuum_out]").val();

			
 
				+                            var testing_tank_vacuum_loop = $("input[name=testing_tank_vacuum_loop]").val();

			
 
				+

			
 
				+                            if (testing_tank_coffee_height != 0) {

			
 
				+                                console.log('以目標高度入豆')

			
 
				+

			
 
				+                                var Coffee_interval = setInterval(tankCoffeeHeight, 5000);

			
 
				+

			
 
				+                                function tankCoffeeHeight(){

			
 
				+                                    if (CoffeeIn_Process == 1){

			
 
				+                                        return;

			
 
				+                                    }

			
 
				+                                    

			
 
				+                                    CoffeeIn_Process = 1;

			
 
				+                                    $.ajax({

			
 
				+                                        async:false,

			
 
				+                                        type:'GET',

			
 
				+                                        url:'/ferment_LiDAR_' + tank_num,

			
 
				+                                        dataType:'JSON',

			
 
				+                                        success:function(response){

			
 
				+                                            var present_Coffee_height = response.LiDAR

			
 
				+                                            console.log("目前生豆高度: ", present_Coffee_height)

			
 
				+

			
 
				+                                            if( present_Coffee_height >= testing_tank_coffee_height){

			
 
				+                                                clearInterval(Coffee_interval);

			
 
				+                                                console.log("生豆已達目標高度！")

			
 
				+                                                CoffeeIn_Process = 0;

			
 
				+                                            } else {

			
 
				+                                                inputVacuum('1')

			
 
				+                                                console.log('inputVacuum_ON')

			
 
				+

			
 
				+                                                var time = new Date();

			
 
				+                                                while ((new Date() - time) < testing_tank_vacuum_in * 1000) { };

			
 
				+

			
 
				+                                                inputVacuum('0')

			
 
				+                                                console.log('inputVacuum_OFF')

			
 
				+

			
 
				+                                                var time = new Date();

			
 
				+                                                while ((new Date() - time) < testing_tank_vacuum_out * 1000) { };

			
 
				+                                                CoffeeIn_Process = 0;

			
 
				+                                            }

			
 
				+                                        },

			
 
				+                                        error:function(thrownError){

			
 
				+                                            console.log("Error: " + thrownError)

			
 
				+                                            CoffeeIn_Process = 0;

			
 
				+                                        }

			
 
				+                                    });

			
 
				+                                    CoffeeIn_Process = 0;

			
 
				+                                };

			
 
				+

			
 
				+                                

			
 
				+                            } else if (testing_tank_coffee_height == 0){

			
 
				+                                console.log('開始循環入豆')

			
 
				+

			
 
				+                                for (step = 1; step <= testing_tank_vacuum_loop; step++) {

			
 
				+                                    console.log('-- 循環第 ' + step + ' 次 --');

			
 
				+

			
 
				+                                    inputVacuum('1')

			
 
				+                                    console.log('inputVacuum_ON')

			
 
				+

			
 
				+                                    var time = new Date();

			
 
				+                                    while ((new Date() - time) < testing_tank_vacuum_in * 1000) { };

			
 
				+

			
 
				+                                    inputVacuum('0')

			
 
				+                                    console.log('inputVacuum_OFF')

			
 
				+

			
 
				+                                    var time = new Date();

			
 
				+                                    while ((new Date() - time) < testing_tank_vacuum_out * 1000) { };

			
 
				+                                }

			
 
				+

			
 
				+                                console.log('-- 循環入豆結束 --')

			
 
				+

			
 
				+                            }

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <button type="submit" class="btn btn-primary" onclick="tankVacuumTest()">真空吸料機測試(秒)</button><br>

			
 
				+                    <script>

			
 
				+                        function tankVacuumTest() {

			
 
				+                            clearInterval(WebUpdate_set);

			
 
				+                            var Testing_starttime = $("input[name=Testing_starttime]").val();

			
 
				+                            var Testing_endtime = $("input[name=Testing_endtime]").val();

			
 
				+                            var Testing_loop = $("input[name=Testing_loop]").val();

			
 
				+                            alert('測試間隔' + Testing_starttime + ':' + Testing_endtime + ' 次數' + Testing_loop)

			
 
				+                            var step;

			
 
				+

			
 
				+                            for (step = 1; step <= Testing_loop; step++) {

			
 
				+                                console.log('循環第 ' + step + ' 次');

			
 
				+

			
 
				+                                inputVacuum('1')

			
 
				+                                console.log('inputVacuum_ON')

			
 
				+

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < Testing_starttime * 1000) { }

			
 
				+

			
 
				+                                inputVacuum('0')

			
 
				+                                console.log('inputVacuum_OFF')

			
 
				+

			
 
				+                                var time = new Date();

			
 
				+                                while ((new Date() - time) < Testing_endtime * 1000) { }

			
 
				+                            }

			
 
				+                            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);

			
 
				+                        }

			
 
				+                    </script>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <div id="coffee_footer">

			
 
				+            <!-- 匯入共同使用的 footer.html 內容 -->

			
 
				+            {% include 'footer.html' %}

			
 
				+        </div>

			
 
				+    </div>

			
 
				+    

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/ferment_container_output.html
+++ b/app/templates/ferment_container_output.html
--- a/app/templates/ferment_container_tank.html
+++ b/app/templates/ferment_container_tank.html
--- a/app/templates/ferment_container_tank_0924.html
+++ b/app/templates/ferment_container_tank_0924.html
--- a/app/templates/footer.html
+++ b/app/templates/footer.html
@@ -1,288 +1,72 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-    <!-- 參考資料 -->
			
 
				-    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            height: 40px;
			
 
				-            box-sizing: border-box;
			
 
				-            /* 設定footer絕對位置在底部 */
			
 
				-            position: absolute;
			
 
				-            bottom: 0px;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        html, body {
			
 
				-            height: 100%;
			
 
				-        }
			
 
				-
			
 
				-        #wrapper {
			
 
				-            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
			
 
				-            min-height: 100%;
			
 
				-            /* 位置設為relative, 作為footer區塊位置的參考 */
			
 
				-            position: relative;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .main-menu li {
			
 
				-            position: relative; 
			
 
				-            transition: .5s; 
			
 
				-            list-style-type: none;
			
 
				-        }
			
 
				-        .main-menu li a {
			
 
				-            padding: 0 15px;
			
 
				-            line-height: 60px;
			
 
				-            font-size: 18px;
			
 
				-        }
			
 
				-
			
 
				-        
			
 
				-        .main-menu li::after {
			
 
				-            content: '';
			
 
				-            position: absolute;
			
 
				-            height: 4px;
			
 
				-            left: 50%;
			
 
				-            right: 50%;
			
 
				-            bottom: 0;
			
 
				-            background-color: #bbb;
			
 
				-            transition: .5s;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li:hover {
			
 
				-            background-color: #ddd;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li:hover::after {
			
 
				-            left: 0;
			
 
				-            right: 0;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-
			
 
				-
			
 
				-        <footer class="footer" id="footer" style="margin: auto;">
			
 
				-            <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">
			
 
				-                <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;
			
 
				-                <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;
			
 
				-                <a style="padding: 0px 6px;" href="#">網站地圖</a>&nbsp;｜&nbsp;
			
 
				-                Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <!-- 參考資料 -->

			
 
				+    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            height: 40px;

			
 
				+            box-sizing: border-box;

			
 
				+            /* 設定footer絕對位置在底部 */

			
 
				+            position: absolute;

			
 
				+            bottom: 0px;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        html, body {

			
 
				+            height: 100%;

			
 
				+            /* margin: 0; */

			
 
				+            position: relative;

			
 
				+        }

			
 
				+

			
 
				+        #wrapper {

			
 
				+            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */

			
 
				+            min-height: 100%;

			
 
				+            /* 位置設為relative, 作為footer區塊位置的參考 */

			
 
				+            position: relative;

			
 
				+        }

			
 
				+

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <!-- <div style="text-align: center;">

			
 
				+        狀態更新時間(秒)：

			
 
				+        <input type="text" class="input-text" name="webupdate_time" value="5" style="width:100px;">

			
 
				+        <input type="button" class="input-button" value="設定更新時間" onclick="changeUpdate()">

			
 
				+    </div> -->

			
 
				+    <br>

			
 
				+    <br>

			
 
				+    <footer class="footer" id="footer" style="margin: auto;">

			
 
				+        <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">

			
 
				+            <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;

			
 
				+            <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;

			
 
				+            <a style="padding: 0px 6px;" href="/sitemap">網站地圖</a>&nbsp;｜&nbsp;

			
 
				+            Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                

			
 
				+        </div>

			
 
				+    </footer>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/header.html
+++ b/app/templates/header.html
@@ -1,390 +1,478 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-    <!-- Rita 網頁 title 旁邊的 icon --> <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->
			
 
				-    <link rel="icon" href="..\static\img\skyeye-2.ico" type="image/x-icon">
			
 
				-
			
 
				-    <!-- 參考資料 -->
			
 
				-    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->
			
 
				-
			
 
				-    <script>
			
 
				-        var status = '{{status}}';
			
 
				-        var username = '{{username}}';
			
 
				-        $(document).ready(function(){
			
 
				-            $('#navbarDropdown_user').text(username)
			
 
				-            /*
			
 
				-            if (status == 2) {
			
 
				-                $('input').prop('disabled', true);
			
 
				-                $('button').prop('disabled', true);
			
 
				-            } else if ( (status == 0) || (status == 1) ) {
			
 
				-                $('input').prop('disabled', false);
			
 
				-                $('button').prop('disabled', false);   
			
 
				-            }
			
 
				-            */
			
 
				-        });
			
 
				-    </script>
			
 
				-
			
 
				-
			
 
				-    <style>
			
 
				-        .footer {
			
 
				-            height: 40px;
			
 
				-            box-sizing: border-box;
			
 
				-            /* 設定footer絕對位置在底部 */
			
 
				-            position: absolute;
			
 
				-            bottom: 0px;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        html,
			
 
				-        body {
			
 
				-            height: 100%;
			
 
				-        }
			
 
				-
			
 
				-        #wrapper {
			
 
				-            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
			
 
				-            min-height: 100%;
			
 
				-            /* 位置設為relative, 作為footer區塊位置的參考 */
			
 
				-            position: relative;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .main-menu li {
			
 
				-            position: relative;
			
 
				-            transition: .5s;
			
 
				-            list-style-type: none;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li a {
			
 
				-            padding: 0 15px;
			
 
				-            line-height: 60px;
			
 
				-            font-size: 18px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .main-menu li::after {
			
 
				-            content: '';
			
 
				-            position: absolute;
			
 
				-            height: 4px;
			
 
				-            left: 50%;
			
 
				-            right: 50%;
			
 
				-            bottom: 0;
			
 
				-            background-color: #bbb;
			
 
				-            transition: .5s;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li:hover {
			
 
				-            background-color: #ddd;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li:hover::after {
			
 
				-            left: 0;
			
 
				-            right: 0;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <header class="main-header navbar-expand-lg display: flex;" style="background-color: #eee;">
			
 
				-        <div class="navbar" style="display: flex; padding: 0px 95px 0px 15px; margin-bottom: 15px;">
			
 
				-            <!--style="display: flex; margin: 0px;">-->
			
 
				-            <!--justify-content: space-between; padding: 0px;-->
			
 
				-            <a class="navbar-brand mr-auto" style="line-height: 50px; font-size: 24px;" href="/index_new">Smart Coffee</a>
			
 
				-            <!--<span style="font-size: 24px; line-height: 60px; margin: 0px">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>-->
			
 
				-            <nav>
			
 
				-                <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">
			
 
				-
			
 
				-                    <span id="coffee_title" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">( 網頁標題 )</span>
			
 
				-
			
 
				-                    <li class="nav-item dropdown">
			
 
				-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_container"
			
 
				-                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			
 
				-                            貨櫃狀態
			
 
				-                        </a>
			
 
				-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_container">
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>
			
 
				-                        </div>
			
 
				-                    </li>
			
 
				-
			
 
				-                    <li class="nav-item dropdown">
			
 
				-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_chart" data-toggle="dropdown"
			
 
				-                            aria-haspopup="true" aria-expanded="false">
			
 
				-                            感測器圖表
			
 
				-                        </a>
			
 
				-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_chart">
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__桶槽</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__出料</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__桶槽</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__出料</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__桶槽</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__出料</a>
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item"
			
 
				-                                href="/chart_FI/UltraSonic/1">發酵槽__入料</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/chart_F/UltraSonic/1">發酵槽__桶槽</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item"
			
 
				-                                href="/chart_FO/UltraSonic/1">發酵槽__出料</a>
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item"
			
 
				-                                href="/chart_DI/UltraSonic/1">乾燥槽__入料</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/chart_D/UltraSonic/1">乾燥槽__桶槽</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item"
			
 
				-                                href="/chart_DO/UltraSonic/1">乾燥槽__出料</a>
			
 
				-                        </div>
			
 
				-                    </li>
			
 
				-
			
 
				-                    <li class="nav-item dropdown">
			
 
				-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_camera" data-toggle="dropdown"
			
 
				-                            aria-haspopup="true" aria-expanded="false">
			
 
				-                            攝影機畫面
			
 
				-                        </a>
			
 
				-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_camera">
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/camera_clean">清洗貨櫃</a>
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/camera_ferment">發酵貨櫃</a>
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/camera_dry">乾燥貨櫃</a>
			
 
				-                        </div>
			
 
				-                    </li>
			
 
				-
			
 
				-
			
 
				-                    <li class="nav-item dropdown">
			
 
				-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_user" data-toggle="dropdown"
			
 
				-                            aria-haspopup="true" aria-expanded="false">
			
 
				-                            User
			
 
				-                        </a>
			
 
				-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_user">
			
 
				-                            {% if status == 0 %}
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限：開發人員</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>
			
 
				-                            {% elif status == 1 %}
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限：經銷商</a>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>
			
 
				-                            {% elif status == 2 %}
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限：使用者</a>
			
 
				-                            {% endif %}
			
 
				-                            <div class="dropdown-divider"></div>
			
 
				-                            <a style="line-height: 40px;" class="dropdown-item" href="/logout">帳號登出</a>
			
 
				-                        </div>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </nav>
			
 
				-        </div>
			
 
				-    </header>
			
 
				-
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+    <!-- Rita 網頁 title 旁邊的 icon --> <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->

			
 
				+    <link rel="icon" href="..\static\img\skyeye-2.ico" type="image/x-icon">

			
 
				+

			
 
				+    <!-- 參考資料 -->

			
 
				+    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->

			
 
				+

			
 
				+    <script>

			
 
				+        var status = '{{status}}';

			
 
				+        var username = '{{username}}';

			
 
				+        $(document).ready(function(){

			
 
				+            $('#navbarDropdown_user_pc').text(username)

			
 
				+            $('#navbarDropdown_user_phone').text(username)

			
 
				+            console.log('status: ' + status)

			
 
				+            console.log('username:　' + username)

			
 
				+            // if ( (status == 2) || (status == 8)  || (status == 9) ) {

			
 
				+            //     $('input').prop('disabled', true);

			
 
				+            //     $('button').prop('disabled', true);

			
 
				+            // } else if ( (status == 0) || (status == 1) ) {

			
 
				+            //     $('input').prop('disabled', false);

			
 
				+            //     $('button').prop('disabled', false);   

			
 
				+            // }

			
 
				+        });

			
 
				+    </script>

			
 
				+

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            position: absolute;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+        body {

			
 
				+            margin: 0;

			
 
				+        }

			
 
				+        /* 文字輸入框 */

			
 
				+        .input-text {

			
 
				+            height: 25px;

			
 
				+            width: 40px;

			
 
				+            text-align: center;

			
 
				+            margin-left: 2px;

			
 
				+            margin-right: 5px;

			
 
				+        }

			
 
				+        /* 致動器狀態表格置中 */

			
 
				+        .label_ActuatorStatus {

			
 
				+            margin: auto;

			
 
				+        }

			
 
				+        /* 致動器 ON 樣式 */

			
 
				+        .input-button-on {

			
 
				+            color: #008CBA;

			
 
				+            border: 2px rgb(182, 181, 181) solid;

			
 
				+            background-color: whitesmoke;

			
 
				+            padding: 1px 3px;

			
 
				+            width: 45px;

			
 
				+        }

			
 
				+        /* 致動器 OFF 樣式 */

			
 
				+        .input-button-off {

			
 
				+            color: #707070;

			
 
				+            border: 2px rgb(192, 192, 192) solid;

			
 
				+            background-color: whitesmoke;

			
 
				+            padding: 1px 3px;

			
 
				+            width: 45px;

			
 
				+        }

			
 
				+        /* 輸入按鈕 */

			
 
				+        .input-button {

			
 
				+            font-size: 14px;

			
 
				+            color: #008CBA;

			
 
				+            border: 2px rgb(182, 181, 181) solid;

			
 
				+            background-color: whitesmoke;

			
 
				+            padding: 1px 3px;

			
 
				+        }

			
 
				+        /* 大表格樣式 */

			
 
				+        .table-all {

			
 
				+            font-size:18px; 

			
 
				+            border:2px #cccccc solid; 

			
 
				+            margin-left: 10px; 

			
 
				+            margin-right: 10px; 

			
 
				+            width: 98%;

			
 
				+        }

			
 
				+

			
 
				+        /* ---------------------------------------------------------- */

			
 
				+

			
 
				+        html,

			
 
				+        body {

			
 
				+            height: 100%;

			
 
				+        }

			
 
				+

			
 
				+        #wrapper {

			
 
				+            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */

			
 
				+            min-height: 100%;

			
 
				+            /* 位置設為relative, 作為footer區塊位置的參考 */

			
 
				+            position: relative;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .main-menu li {

			
 
				+            position: relative;

			
 
				+            transition: .5s;

			
 
				+            list-style-type: none;

			
 
				+        }

			
 
				+

			
 
				+        .main-menu li a {

			
 
				+            padding: 0 15px;

			
 
				+            line-height: 60px;

			
 
				+            font-size: 18px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .main-menu li::after {

			
 
				+            content: '';

			
 
				+            position: absolute;

			
 
				+            height: 4px;

			
 
				+            left: 50%;

			
 
				+            right: 50%;

			
 
				+            bottom: 0;

			
 
				+            background-color: #bbb;

			
 
				+            transition: .5s;

			
 
				+        }

			
 
				+

			
 
				+        .main-menu li:hover {

			
 
				+            background-color: #ddd;

			
 
				+        }

			
 
				+

			
 
				+        .main-menu li:hover::after {

			
 
				+            left: 0;

			
 
				+            right: 0;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:1050px) {

			
 
				+            .nav-list-pc {

			
 
				+                display: none;

			
 
				+            }

			
 
				+            .nav-list-phone {

			
 
				+                display: block;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1050px) {

			
 
				+            .nav-list-pc {

			
 
				+                display: block;

			
 
				+            }

			
 
				+            .nav-list-phone {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+    <header class="main-header navbar-expand-lg display: flex;" style="background-color: #eee;">

			
 
				+        <div class="navbar" style="display: flex; padding: 0px 85px 0px 15px; margin-bottom: 15px;">

			
 
				+            <!--style="display: flex; margin: 0px;">-->

			
 
				+            <!--justify-content: space-between; padding: 0px;-->

			
 
				+            <a class="navbar-brand mr-auto" style="line-height: 50px; font-size: 24px;" href="/index_new">Smart Coffee</a>

			
 
				+            <!--<span style="font-size: 24px; line-height: 60px; margin: 0px">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>-->

			
 
				+            <nav class="nav-list-pc">

			
 
				+                <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">

			
 
				+                    <span id="coffee_title_pc" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">( 網頁標題 )</span>

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_container"

			
 
				+                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

			
 
				+                            貨櫃狀態

			
 
				+                        </a>

			
 
				+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_container">

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/demo">DEMO 貨櫃</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>

			
 
				+                        </div>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_chart" data-toggle="dropdown"

			
 
				+                            aria-haspopup="true" aria-expanded="false">

			
 
				+                            感測器圖表

			
 
				+                        </a>

			
 
				+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_chart">

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__桶槽</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__出料</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__桶槽</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__出料</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__桶槽</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__出料</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item"

			
 
				+                                href="/chart_FI/UltraSonic/1">發酵槽__入料</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/chart_F/UltraSonic/1">發酵槽__桶槽</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item"

			
 
				+                                href="/chart_FO/UltraSonic/1">發酵槽__出料</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item"

			
 
				+                                href="/chart_DI/UltraSonic/1">乾燥槽__入料</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/chart_D/UltraSonic/1">乾燥槽__桶槽</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item"

			
 
				+                                href="/chart_DO/UltraSonic/1">乾燥槽__出料</a>

			
 
				+                        </div>

			
 
				+                    </li>

			
 
				+

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_camera" data-toggle="dropdown"

			
 
				+                            aria-haspopup="true" aria-expanded="false">

			
 
				+                            攝影機畫面

			
 
				+                        </a>

			
 
				+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_camera">

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/camera_clean">清洗貨櫃</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/camera_ferment">發酵貨櫃</a>

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/camera_dry">乾燥貨櫃</a>

			
 
				+                        </div>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_user_pc" data-toggle="dropdown"

			
 
				+                            aria-haspopup="true" aria-expanded="false">

			
 
				+                            User

			
 
				+                        </a>

			
 
				+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_user_pc">

			
 
				+                            {% if status == 0 %}

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限:開發人員</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>

			
 
				+                            {% elif status == 1 %}

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限:經銷商</a>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>

			
 
				+                            {% elif status == 2 %}

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限:使用者</a>

			
 
				+                            {% endif %}

			
 
				+                            <div class="dropdown-divider"></div>

			
 
				+                            <a style="line-height: 40px;" class="dropdown-item" href="/logout">帳號登出</a>

			
 
				+                        </div>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </nav>

			
 
				+

			
 
				+            <nav class="nav-list-phone">

			
 
				+                <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">

			
 
				+                    <span id="coffee_title_phone" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">( 網頁標題 )</span>

			
 
				+                    <!-- <li class="nav-item dropdown">

			
 
				+                        <a style="line-height: 40px;" class="dropdown-item" href="/demo">DEMO 貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>

			
 
				+                    </li> -->

			
 
				+                    <li class="nav-item dropdown">

			
 
				+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_user_phone" data-toggle="dropdown"

			
 
				+                            aria-haspopup="true" aria-expanded="false">

			
 
				+                            User

			
 
				+                        </a>

			
 
				+                    </li>

			
 
				+                </ul> 

			
 
				+            </nav>

			
 
				+

			
 
				+

			
 
				+

			
 
				+        </div>

			
 
				+    </header>

			
 
				+

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/hello.html
+++ b/app/templates/hello.html
@@ -1,10 +1,10 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{name}}</title>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <h1>{{name}}</h1>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{name}}</title>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <h1>{{name}}</h1>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,265 +1,268 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>Aisky-coffee</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>
			
 
				-
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-    <link rel="icon" href="..\static\img\skyeye-2.ico" type="image/x-icon">
			
 
				-
			
 
				-    <style>
			
 
				-        body {
			
 
				-	        margin:0;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-	        text-decoration:none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-	        line-height:40px;
			
 
				-	        background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title{
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li{
			
 
				-	        float: none;
			
 
				-	        display: inline-block;
			
 
				-	        width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav > li a{
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-          .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px){
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px){
			
 
				-
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:576px){
			
 
				-
			
 
				-
			
 
				-        }
			
 
				-         @media(min-width:768px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 0px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:991px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 20px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display:none;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1200px){
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-         @media(min-width:1400px){
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-         @media(min-width:1689px) {
			
 
				-            .navbar-nav > li {
			
 
				-                 margin-left: 50px;
			
 
				-            }
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-         }
			
 
				-
			
 
				-
			
 
				-    </style>
			
 
				-</head>
			
 
				-<body>
			
 
				-    <nav class="fixed-top">
			
 
				-        <nav class="navbar navbar-expand-md nav-top justify-content-center">
			
 
				-            <div>
			
 
				-                <span class="website_title">首頁</span>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
			
 
				-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			
 
				-                <span class="navbar-toggler-icon"></span>
			
 
				-            </button>
			
 
				-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
			
 
				-                <ul class="navbar-nav">
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/">首頁</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">關於我們</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">資訊</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#">聯絡方法</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/video">影像串流</a>
			
 
				-                    </li>
			
 
				-                    <li class="li-block"></li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
			
 
				-                    </li>
			
 
				-                    <li class="nav-item">
			
 
				-                        <a class="nav-link" href="/logout">Logout</a>
			
 
				-                    </li>
			
 
				-                </ul>
			
 
				-            </div>
			
 
				-        </nav>
			
 
				-    </nav>
			
 
				-    <div class="main-page">
			
 
				-        <form method="" action="">
			
 
				-            <div class="container-fluid">
			
 
				-                <div class="row">
			
 
				-                    <div class="col flex" style="margin: auto; ">
			
 
				-                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/">首頁</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">關於我們</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">資訊</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3 col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="#">聯絡方法</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/cargo_list">咖啡貨櫃</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">
			
 
				-                            <div class="page-title text-center">
			
 
				-                                <a class="set-link" type="button" href="/video">影像串流</a>
			
 
				-                            </div>
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-                
			
 
				-                <div style="text-align: center;">
			
 
				-                    <a href="/index_new">新首頁測試</a>
			
 
				-                </div>
			
 
				-
			
 
				-                <div style="text-align: center;">
			
 
				-                    {% if params.status == 1 %}
			
 
				-                        使用者權限：new
			
 
				-                    {% elif params.status == 0 %}
			
 
				-                        使用者權限：admin
			
 
				-                    {% elif params.status == 2 %}
			
 
				-                        使用者權限：enduser
			
 
				-                    {% elif params.status == 9 %}
			
 
				-                        使用者權限：disable
			
 
				-                    {% endif %}
			
 
				-                </div>
			
 
				-                
			
 
				-            </div>
			
 
				-        </form>
			
 
				-    </div>
			
 
				-</body>
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <link rel="icon" href="..\static\img\skyeye-2.ico" type="image/x-icon">

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+          .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">首頁</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/video">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex" style="margin: auto; ">

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/">首頁</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">關於我們</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">資訊</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">聯絡方法</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/video">影像串流</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+                

			
 
				+                <div style="text-align: center;">

			
 
				+                    <a href="/index_new">新首頁測試</a>

			
 
				+                </div>

			
 
				+

			
 
				+                <div style="text-align: center;">

			
 
				+                    {% if params.status == 1 %}

			
 
				+                        使用者權限: new

			
 
				+                    {% elif params.status == 0 %}

			
 
				+                        使用者權限: admin

			
 
				+                    {% elif params.status == 2 %}

			
 
				+                        使用者權限: enduser

			
 
				+                    {% elif params.status == 9 %}

			
 
				+                        使用者權限: disable

			
 
				+                    {% endif %}

			
 
				+                </div>

			
 
				+

			
 
				+                <div>{{ _('Hello World!') }}</div>

			
 
				+                <div>{{ _('My name is Max') }}</div>

			
 
				+                

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				 </html>
			
--- a/app/templates/index_0916??.html
+++ b/app/templates/index_0916??.html
@@ -0,0 +1,263 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>Aisky-coffee</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>

			
 
				+

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <style>

			
 
				+        body {

			
 
				+	        margin:0;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+	        text-decoration:none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+	        line-height:40px;

			
 
				+	        background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title{

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li{

			
 
				+	        float: none;

			
 
				+	        display: inline-block;

			
 
				+	        width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav > li a{

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+          .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px){

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px){

			
 
				+

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:576px){

			
 
				+

			
 
				+

			
 
				+        }

			
 
				+         @media(min-width:768px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 0px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:991px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 20px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display:none;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1200px){

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+         @media(min-width:1400px){

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+         @media(min-width:1689px) {

			
 
				+            .navbar-nav > li {

			
 
				+                 margin-left: 50px;

			
 
				+            }

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+         }

			
 
				+

			
 
				+

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <nav class="fixed-top">

			
 
				+        <nav class="navbar navbar-expand-md nav-top justify-content-center">

			
 
				+            <div>

			
 
				+                <span class="website_title">首頁</span>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">

			
 
				+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">

			
 
				+                <span class="navbar-toggler-icon"></span>

			
 
				+            </button>

			
 
				+            <div class="collapse navbar-collapse" id="collapsibleNavbar">

			
 
				+                <ul class="navbar-nav">

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/">首頁</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">關於我們</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">資訊</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#">聯絡方法</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/vedio">影像串流</a>

			
 
				+                    </li>

			
 
				+                    <li class="li-block"></li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>

			
 
				+                    </li>

			
 
				+                    <li class="nav-item">

			
 
				+                        <a class="nav-link" href="/logout">Logout</a>

			
 
				+                    </li>

			
 
				+                </ul>

			
 
				+            </div>

			
 
				+        </nav>

			
 
				+    </nav>

			
 
				+    <div class="main-page">

			
 
				+        <form method="" action="">

			
 
				+            <div class="container-fluid">

			
 
				+                <div class="row">

			
 
				+                    <div class="col flex" style="margin: auto; ">

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/">首頁</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">關於我們</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">資訊</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3 col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="#">聯絡方法</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/cargo_list">咖啡貨櫃</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                        <div class="col-xl-3  col-lg-4 col-md-5 col-sm-8 col-xs-8" style="margin-right: 20px ;margin-left: 20px; margin-top:50px; margin-bottom:50px;">

			
 
				+                            <div class="page-title text-center">

			
 
				+                                <a class="set-link" type="button" href="/video">影像串流</a>

			
 
				+                            </div>

			
 
				+                        </div>

			
 
				+                    </div>

			
 
				+                </div>

			
 
				+                

			
 
				+                <div style="text-align: center;">

			
 
				+                    <a href="/index_new">新首頁測試</a>

			
 
				+                </div>

			
 
				+

			
 
				+                <div style="text-align: center;">

			
 
				+                    {% if params.status == 1 %}

			
 
				+                        使用者權限：new

			
 
				+                    {% elif params.status == 0 %}

			
 
				+                        使用者權限：admin

			
 
				+                    {% elif params.status == 2 %}

			
 
				+                        使用者權限：enduser

			
 
				+                    {% elif params.status == 9 %}

			
 
				+                        使用者權限：disable

			
 
				+                    {% endif %}

			
 
				+                </div>

			
 
				+                

			
 
				+            </div>

			
 
				+        </form>

			
 
				+    </div>

			
 
				+</body>

			
 
				+</html>
			
--- a/app/templates/index_navbar.html
+++ b/app/templates/index_navbar.html
@@ -1,442 +1,442 @@
 
				-<!DOCTYPE html>
			
 
				-<html lang="en">
			
 
				-
			
 
				-<head>
			
 
				-    <meta charset="UTF-8">
			
 
				-    <title>{{ title }}</title>
			
 
				-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
			
 
				-    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->
			
 
				-
			
 
				-    <!-- 新 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>
			
 
				-    <!--可用來建立使用者小圖示-->
			
 
				-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
			
 
				-
			
 
				-    <!-- 參考資料 -->
			
 
				-    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->
			
 
				-    
			
 
				-    <script language="JavaScript">
			
 
				-        // 指定 秒 刷新網頁一次
			
 
				-        var dtn = '{{tid}}';
			
 
				-        console.log('dtn:' + dtn)
			
 
				-
			
 
				-        $(function(){
			
 
				-            $("#dry_tank_page").text('乾燥槽 D' + dtn + ' 攝影機畫面   ')
			
 
				-            $('#dry_tank_page').attr("href", "/camera_D" + dtn)
			
 
				-            $("#dry_container_title").text('乾燥槽 D' + dtn + ' 操作介面')
			
 
				-        });
			
 
				-
			
 
				-        // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
			
 
				-    </script>
			
 
				-
			
 
				-    <style>
			
 
				-        .footer{
			
 
				-            height: 40px;
			
 
				-            box-sizing: border-box;
			
 
				-            /* 設定footer絕對位置在底部 */
			
 
				-            position: absolute;
			
 
				-            bottom: 0px;
			
 
				-            width: 100%;
			
 
				-            background-color: #eee;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        html, body {
			
 
				-            height: 100%;
			
 
				-        }
			
 
				-
			
 
				-        #wrapper {
			
 
				-            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
			
 
				-            min-height: 100%;
			
 
				-            /* 位置設為relative, 作為footer區塊位置的參考 */
			
 
				-            position: relative;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-dark .navbar-nav .nav-link {
			
 
				-            color: white;
			
 
				-            cursor: pointer;
			
 
				-            text-decoration: none;
			
 
				-            width: 110px;
			
 
				-            height: 46px;
			
 
				-        }
			
 
				-
			
 
				-        .nav-top {
			
 
				-            line-height: 40px;
			
 
				-            background-color: #C4C4C4;
			
 
				-        }
			
 
				-
			
 
				-        .website_title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: normal;
			
 
				-            font-size: 30px;
			
 
				-            color: #000000;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li {
			
 
				-            float: none;
			
 
				-            display: inline-block;
			
 
				-            width: 100px;
			
 
				-            margin: 0 auto;
			
 
				-            text-align: center;
			
 
				-        }
			
 
				-
			
 
				-        .navbar-nav>li a {
			
 
				-            font-size: 20px;
			
 
				-        }
			
 
				-
			
 
				-        .main-page {
			
 
				-            margin-top: 200px;
			
 
				-        }
			
 
				-
			
 
				-        .page-title {
			
 
				-            font-family: Roboto;
			
 
				-            font-style: normal;
			
 
				-            font-weight: bold;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .flex {
			
 
				-            display: flex;
			
 
				-            flex-direction: row;
			
 
				-            flex-wrap: wrap;
			
 
				-            justify-content: center;
			
 
				-        }
			
 
				-
			
 
				-        .set-link {
			
 
				-            display: inline-block;
			
 
				-            width: 350px;
			
 
				-            height: 100px;
			
 
				-            line-height: 100px;
			
 
				-            background: #008CBA;
			
 
				-            border: 1px solid #CFCFCF;
			
 
				-            box-sizing: border-box;
			
 
				-            color: #FFFFFF;
			
 
				-            border-radius: 10px;
			
 
				-            font-size: 36px;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle {
			
 
				-            position: absolute;
			
 
				-            margin-left: 0px;
			
 
				-            visibility: hidden;
			
 
				-        }
			
 
				-
			
 
				-        .cmn-toggle+label {
			
 
				-            display: block;
			
 
				-            position: relative;
			
 
				-            cursor: pointer;
			
 
				-            outline: none;
			
 
				-            user-select: none;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label {
			
 
				-            padding: 2px;
			
 
				-            width: 60px;
			
 
				-            height: 30px;
			
 
				-            background-color: #C0C0C0;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before,
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            display: block;
			
 
				-            position: absolute;
			
 
				-            content: "";
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:before {
			
 
				-            top: 2px;
			
 
				-            left: 2px;
			
 
				-            bottom: 2px;
			
 
				-            right: 2px;
			
 
				-            background-color: #fff;
			
 
				-            border-radius: 60px;
			
 
				-            transition: background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat+label:after {
			
 
				-            top: 4px;
			
 
				-            left: 4px;
			
 
				-            bottom: 4px;
			
 
				-            width: 24px;
			
 
				-            background-color: #dddddd;
			
 
				-            border-radius: 52px;
			
 
				-            transition: margin 0.4s, background 0.4s;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label {
			
 
				-            background-color: #C0C0C0;
			
 
				-        }
			
 
				-
			
 
				-        input.cmn-toggle-round-flat:checked+label:after {
			
 
				-            margin-left: 27px;
			
 
				-            background-color: #008CBA;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        .main-menu li {
			
 
				-            position: relative; 
			
 
				-            transition: .5s; 
			
 
				-            list-style-type: none;
			
 
				-        }
			
 
				-        .main-menu li a {
			
 
				-            padding: 0 15px;
			
 
				-            line-height: 60px;
			
 
				-            font-size: 18px;
			
 
				-        }
			
 
				-
			
 
				-        
			
 
				-        .main-menu li::after {
			
 
				-            content: '';
			
 
				-            position: absolute;
			
 
				-            height: 4px;
			
 
				-            left: 50%;
			
 
				-            right: 50%;
			
 
				-            bottom: 0;
			
 
				-            background-color: #bbb;
			
 
				-            transition: .5s;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li:hover {
			
 
				-            background-color: #ddd;
			
 
				-        }
			
 
				-
			
 
				-        .main-menu li:hover::after {
			
 
				-            left: 0;
			
 
				-            right: 0;
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-
			
 
				-
			
 
				-        @media(max-width:373px) {
			
 
				-            .card {
			
 
				-                margin-right: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .set-link {
			
 
				-                width: 250px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(max-width:577px) {}
			
 
				-
			
 
				-        @media(min-width:576px) {}
			
 
				-
			
 
				-        @media(min-width:768px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 0px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:991px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 20px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: none;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1200px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 100px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-        @media(min-width:1400px) {
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 200px;
			
 
				-            }
			
 
				-        }
			
 
				-
			
 
				-
			
 
				-        @media(min-width:1689px) {
			
 
				-            .navbar-nav>li {
			
 
				-                margin-left: 50px;
			
 
				-            }
			
 
				-
			
 
				-            .navbar-nav .li-block {
			
 
				-                display: inline-block;
			
 
				-                width: 500px;
			
 
				-            }
			
 
				-        }
			
 
				-    </style>
			
 
				-
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-<!--
			
 
				-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
			
 
				-        <a class="navbar-brand" href="#">Navbar</a>
			
 
				-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			
 
				-          <span class="navbar-toggler-icon"></span>
			
 
				-        </button>
			
 
				-      
			
 
				-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
			
 
				-          <ul class="navbar-nav mr-auto">
			
 
				-            <li class="nav-item active">
			
 
				-              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			
 
				-            </li>
			
 
				-            <li class="nav-item">
			
 
				-              <a class="nav-link" href="#">Link</a>
			
 
				-            </li>
			
 
				-            <li class="nav-item dropdown">
			
 
				-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			
 
				-                Dropdown
			
 
				-              </a>
			
 
				-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
			
 
				-                <a class="dropdown-item" href="#">Action</a>
			
 
				-                <a class="dropdown-item" href="#">Another action</a>
			
 
				-                <div class="dropdown-divider"></div>
			
 
				-                <a class="dropdown-item" href="#">Something else here</a>
			
 
				-              </div>
			
 
				-            </li>
			
 
				-            <li class="nav-item">
			
 
				-              <a class="nav-link disabled" href="#">Disabled</a>
			
 
				-            </li>
			
 
				-          </ul>
			
 
				-          <form class="form-inline my-2 my-lg-0">
			
 
				-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
			
 
				-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
			
 
				-          </form>
			
 
				-        </div>
			
 
				-      </nav>
			
 
				--->
			
 
				-
			
 
				-    <div id="wrapper">
			
 
				-
			
 
				-        <header class="main-header navbar-expand-lg display: flex;" style="background-color: #eee;">
			
 
				-            <div class="navbar" style="display: flex; padding: 0px 15px;"> <!--style="display: flex; margin: 0px;">--> <!--justify-content: space-between; padding: 0px;-->
			
 
				-                <a  class="navbar-brand mr-auto" style="line-height: 50px; font-size: 24px;" href="/">Smart Coffee</a>
			
 
				-                <!--<span style="font-size: 24px; line-height: 60px; margin: 0px">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>-->
			
 
				-                <nav>
			
 
				-                    <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">
			
 
				-                        
			
 
				-                        <span id="coffee_title" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>
			
 
				-
			
 
				-                        <li class="nav-item dropdown">  
			
 
				-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_container" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			
 
				-                                貨櫃狀態
			
 
				-                            </a>
			
 
				-                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_container">  
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>
			
 
				-                            </div>
			
 
				-                        </li>
			
 
				-
			
 
				-                        <li class="nav-item dropdown">  
			
 
				-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_chart" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			
 
				-                                感測器圖表
			
 
				-                            </a>
			
 
				-                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_chart">  
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__桶槽</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__出料</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__桶槽</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__出料</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__桶槽</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__出料</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_FI/UltraSonic/1">發酵槽__入料</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_F/UltraSonic/1">發酵槽__桶槽</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_FO/UltraSonic/1">發酵槽__出料</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_DI/UltraSonic/1">乾燥槽__入料</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_D/UltraSonic/1">乾燥槽__桶槽</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_DO/UltraSonic/1">乾燥槽__出料</a>
			
 
				-                            </div>
			
 
				-                        </li>
			
 
				-                        
			
 
				-                        <li class="nav-item dropdown">  
			
 
				-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_camera" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			
 
				-                                攝影機畫面
			
 
				-                            </a>
			
 
				-                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_camera">  
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/camera_clean">清洗貨櫃</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/camera_ferment">發酵貨櫃</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/camera_dry">乾燥貨櫃</a>
			
 
				-                            </div>
			
 
				-                        </li>
			
 
				-
			
 
				-
			
 
				-                        <li class="nav-item dropdown">  
			
 
				-                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_camera" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			
 
				-                                User
			
 
				-                            </a>
			
 
				-                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_camera">  
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">權限: 經銷商</a>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>
			
 
				-                                <div class="dropdown-divider"></div>
			
 
				-                                <a style="line-height: 40px;" class="dropdown-item" href="/logout">帳號登出</a>
			
 
				-                            </div>
			
 
				-                        </li>
			
 
				-                    </ul>
			
 
				-                </nav>
			
 
				-            </div>
			
 
				-        </header>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				-        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
			
 
				-            <tr>
			
 
				-                <td>
			
 
				-                    感測器抽水雙核隔膜泵 狀態
			
 
				-                </td>
			
 
				-                <td>
			
 
				-                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
			
 
				-                </td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>開啟 感測器抽水雙核隔膜泵</td>
			
 
				-                <td><input type="button" value="ON" onclick="tankPumpSensor_ON()"></td>
			
 
				-            </tr>
			
 
				-            <tr>
			
 
				-                <td>關閉 感測器抽水雙核隔膜泵</td>
			
 
				-                <td><input type="button" value="OFF" onclick="tankPumpSensor_OFF()"></td>
			
 
				-            </tr>
			
 
				-        </table>
			
 
				-
			
 
				-        <br>
			
 
				-
			
 
				- 
			
 
				-
			
 
				-        <footer class="footer" id="footer" style="margin: auto;">
			
 
				-            <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">
			
 
				-                <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;
			
 
				-                <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;
			
 
				-                <a style="padding: 0px 6px;" href="#">網站地圖</a>&nbsp;｜&nbsp;
			
 
				-                Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                
			
 
				-                
			
 
				-
			
 
				-                
			
 
				-            </div>
			
 
				-        </footer>
			
 
				-    </div>
			
 
				-</body>
			
 
				-
			
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <title>{{ title }}</title>

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			
 
				+    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->

			
 
				+

			
 
				+    <!-- 新 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>

			
 
				+    <!--可用來建立使用者小圖示-->

			
 
				+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

			
 
				+

			
 
				+    <!-- 參考資料 -->

			
 
				+    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->

			
 
				+    

			
 
				+    <script language="JavaScript">

			
 
				+        // 指定 秒 刷新網頁一次

			
 
				+        var dtn = '{{tid}}';

			
 
				+        console.log('dtn:' + dtn)

			
 
				+

			
 
				+        $(function(){

			
 
				+            $("#dry_tank_page").text('乾燥槽 D' + dtn + ' 攝影機畫面   ')

			
 
				+            $('#dry_tank_page').attr("href", "/camera_D" + dtn)

			
 
				+            $("#dry_container_title").text('乾燥槽 D' + dtn + ' 操作介面')

			
 
				+        });

			
 
				+

			
 
				+        // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)

			
 
				+    </script>

			
 
				+

			
 
				+    <style>

			
 
				+        .footer{

			
 
				+            height: 40px;

			
 
				+            box-sizing: border-box;

			
 
				+            /* 設定footer絕對位置在底部 */

			
 
				+            position: absolute;

			
 
				+            bottom: 0px;

			
 
				+            width: 100%;

			
 
				+            background-color: #eee;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        html, body {

			
 
				+            height: 100%;

			
 
				+        }

			
 
				+

			
 
				+        #wrapper {

			
 
				+            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */

			
 
				+            min-height: 100%;

			
 
				+            /* 位置設為relative, 作為footer區塊位置的參考 */

			
 
				+            position: relative;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-dark .navbar-nav .nav-link {

			
 
				+            color: white;

			
 
				+            cursor: pointer;

			
 
				+            text-decoration: none;

			
 
				+            width: 110px;

			
 
				+            height: 46px;

			
 
				+        }

			
 
				+

			
 
				+        .nav-top {

			
 
				+            line-height: 40px;

			
 
				+            background-color: #C4C4C4;

			
 
				+        }

			
 
				+

			
 
				+        .website_title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: normal;

			
 
				+            font-size: 30px;

			
 
				+            color: #000000;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li {

			
 
				+            float: none;

			
 
				+            display: inline-block;

			
 
				+            width: 100px;

			
 
				+            margin: 0 auto;

			
 
				+            text-align: center;

			
 
				+        }

			
 
				+

			
 
				+        .navbar-nav>li a {

			
 
				+            font-size: 20px;

			
 
				+        }

			
 
				+

			
 
				+        .main-page {

			
 
				+            margin-top: 200px;

			
 
				+        }

			
 
				+

			
 
				+        .page-title {

			
 
				+            font-family: Roboto;

			
 
				+            font-style: normal;

			
 
				+            font-weight: bold;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .flex {

			
 
				+            display: flex;

			
 
				+            flex-direction: row;

			
 
				+            flex-wrap: wrap;

			
 
				+            justify-content: center;

			
 
				+        }

			
 
				+

			
 
				+        .set-link {

			
 
				+            display: inline-block;

			
 
				+            width: 350px;

			
 
				+            height: 100px;

			
 
				+            line-height: 100px;

			
 
				+            background: #008CBA;

			
 
				+            border: 1px solid #CFCFCF;

			
 
				+            box-sizing: border-box;

			
 
				+            color: #FFFFFF;

			
 
				+            border-radius: 10px;

			
 
				+            font-size: 36px;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle {

			
 
				+            position: absolute;

			
 
				+            margin-left: 0px;

			
 
				+            visibility: hidden;

			
 
				+        }

			
 
				+

			
 
				+        .cmn-toggle+label {

			
 
				+            display: block;

			
 
				+            position: relative;

			
 
				+            cursor: pointer;

			
 
				+            outline: none;

			
 
				+            user-select: none;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label {

			
 
				+            padding: 2px;

			
 
				+            width: 60px;

			
 
				+            height: 30px;

			
 
				+            background-color: #C0C0C0;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before,

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            display: block;

			
 
				+            position: absolute;

			
 
				+            content: "";

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:before {

			
 
				+            top: 2px;

			
 
				+            left: 2px;

			
 
				+            bottom: 2px;

			
 
				+            right: 2px;

			
 
				+            background-color: #fff;

			
 
				+            border-radius: 60px;

			
 
				+            transition: background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat+label:after {

			
 
				+            top: 4px;

			
 
				+            left: 4px;

			
 
				+            bottom: 4px;

			
 
				+            width: 24px;

			
 
				+            background-color: #dddddd;

			
 
				+            border-radius: 52px;

			
 
				+            transition: margin 0.4s, background 0.4s;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label {

			
 
				+            background-color: #C0C0C0;

			
 
				+        }

			
 
				+

			
 
				+        input.cmn-toggle-round-flat:checked+label:after {

			
 
				+            margin-left: 27px;

			
 
				+            background-color: #008CBA;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        .main-menu li {

			
 
				+            position: relative; 

			
 
				+            transition: .5s; 

			
 
				+            list-style-type: none;

			
 
				+        }

			
 
				+        .main-menu li a {

			
 
				+            padding: 0 15px;

			
 
				+            line-height: 60px;

			
 
				+            font-size: 18px;

			
 
				+        }

			
 
				+

			
 
				+        

			
 
				+        .main-menu li::after {

			
 
				+            content: '';

			
 
				+            position: absolute;

			
 
				+            height: 4px;

			
 
				+            left: 50%;

			
 
				+            right: 50%;

			
 
				+            bottom: 0;

			
 
				+            background-color: #bbb;

			
 
				+            transition: .5s;

			
 
				+        }

			
 
				+

			
 
				+        .main-menu li:hover {

			
 
				+            background-color: #ddd;

			
 
				+        }

			
 
				+

			
 
				+        .main-menu li:hover::after {

			
 
				+            left: 0;

			
 
				+            right: 0;

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+

			
 
				+

			
 
				+        @media(max-width:373px) {

			
 
				+            .card {

			
 
				+                margin-right: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .set-link {

			
 
				+                width: 250px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(max-width:577px) {}

			
 
				+

			
 
				+        @media(min-width:576px) {}

			
 
				+

			
 
				+        @media(min-width:768px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 0px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:991px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 20px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: none;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1200px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 100px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+        @media(min-width:1400px) {

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 200px;

			
 
				+            }

			
 
				+        }

			
 
				+

			
 
				+

			
 
				+        @media(min-width:1689px) {

			
 
				+            .navbar-nav>li {

			
 
				+                margin-left: 50px;

			
 
				+            }

			
 
				+

			
 
				+            .navbar-nav .li-block {

			
 
				+                display: inline-block;

			
 
				+                width: 500px;

			
 
				+            }

			
 
				+        }

			
 
				+    </style>

			
 
				+

			
 
				+</head>

			
 
				+

			
 
				+<body>

			
 
				+<!--

			
 
				+    <nav class="navbar navbar-expand-lg navbar-light bg-light">

			
 
				+        <a class="navbar-brand" href="#">Navbar</a>

			
 
				+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

			
 
				+          <span class="navbar-toggler-icon"></span>

			
 
				+        </button>

			
 
				+      

			
 
				+        <div class="collapse navbar-collapse" id="navbarSupportedContent">

			
 
				+          <ul class="navbar-nav mr-auto">

			
 
				+            <li class="nav-item active">

			
 
				+              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

			
 
				+            </li>

			
 
				+            <li class="nav-item">

			
 
				+              <a class="nav-link" href="#">Link</a>

			
 
				+            </li>

			
 
				+            <li class="nav-item dropdown">

			
 
				+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

			
 
				+                Dropdown

			
 
				+              </a>

			
 
				+              <div class="dropdown-menu" aria-labelledby="navbarDropdown">

			
 
				+                <a class="dropdown-item" href="#">Action</a>

			
 
				+                <a class="dropdown-item" href="#">Another action</a>

			
 
				+                <div class="dropdown-divider"></div>

			
 
				+                <a class="dropdown-item" href="#">Something else here</a>

			
 
				+              </div>

			
 
				+            </li>

			
 
				+            <li class="nav-item">

			
 
				+              <a class="nav-link disabled" href="#">Disabled</a>

			
 
				+            </li>

			
 
				+          </ul>

			
 
				+          <form class="form-inline my-2 my-lg-0">

			
 
				+            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

			
 
				+            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

			
 
				+          </form>

			
 
				+        </div>

			
 
				+      </nav>

			
 
				+-->

			
 
				+

			
 
				+    <div id="wrapper">

			
 
				+

			
 
				+        <header class="main-header navbar-expand-lg display: flex;" style="background-color: #eee;">

			
 
				+            <div class="navbar" style="display: flex; padding: 0px 15px;"> <!--style="display: flex; margin: 0px;">--> <!--justify-content: space-between; padding: 0px;-->

			
 
				+                <a  class="navbar-brand mr-auto" style="line-height: 50px; font-size: 24px;" href="/">Smart Coffee</a>

			
 
				+                <!--<span style="font-size: 24px; line-height: 60px; margin: 0px">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>-->

			
 
				+                <nav>

			
 
				+                    <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">

			
 
				+                        

			
 
				+                        <span id="coffee_title" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>

			
 
				+

			
 
				+                        <li class="nav-item dropdown">  

			
 
				+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_container" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

			
 
				+                                貨櫃狀態

			
 
				+                            </a>

			
 
				+                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_container">  

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>

			
 
				+                            </div>

			
 
				+                        </li>

			
 
				+

			
 
				+                        <li class="nav-item dropdown">  

			
 
				+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_chart" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

			
 
				+                                感測器圖表

			
 
				+                            </a>

			
 
				+                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_chart">  

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__桶槽</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">清洗浮選__出料</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__桶槽</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">色選機__出料</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__桶槽</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">脫皮機__出料</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_FI/UltraSonic/1">發酵槽__入料</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_F/UltraSonic/1">發酵槽__桶槽</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_FO/UltraSonic/1">發酵槽__出料</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_DI/UltraSonic/1">乾燥槽__入料</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_D/UltraSonic/1">乾燥槽__桶槽</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/chart_DO/UltraSonic/1">乾燥槽__出料</a>

			
 
				+                            </div>

			
 
				+                        </li>

			
 
				+                        

			
 
				+                        <li class="nav-item dropdown">  

			
 
				+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_camera" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

			
 
				+                                攝影機畫面

			
 
				+                            </a>

			
 
				+                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_camera">  

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/camera_clean">清洗貨櫃</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/camera_ferment">發酵貨櫃</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/camera_dry">乾燥貨櫃</a>

			
 
				+                            </div>

			
 
				+                        </li>

			
 
				+

			
 
				+

			
 
				+                        <li class="nav-item dropdown">  

			
 
				+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_camera" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

			
 
				+                                User

			
 
				+                            </a>

			
 
				+                            <div class="dropdown-menu" aria-labelledby="navbarDropdown_camera">  

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">權限: 經銷商</a>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>

			
 
				+                                <div class="dropdown-divider"></div>

			
 
				+                                <a style="line-height: 40px;" class="dropdown-item" href="/logout">帳號登出</a>

			
 
				+                            </div>

			
 
				+                        </li>

			
 
				+                    </ul>

			
 
				+                </nav>

			
 
				+            </div>

			
 
				+        </header>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">

			
 
				+            <tr>

			
 
				+                <td>

			
 
				+                    感測器抽水雙核隔膜泵 狀態

			
 
				+                </td>

			
 
				+                <td>

			
 
				+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>

			
 
				+                </td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>開啟 感測器抽水雙核隔膜泵</td>

			
 
				+                <td><input type="button" value="ON" onclick="tankPumpSensor_ON()"></td>

			
 
				+            </tr>

			
 
				+            <tr>

			
 
				+                <td>關閉 感測器抽水雙核隔膜泵</td>

			
 
				+                <td><input type="button" value="OFF" onclick="tankPumpSensor_OFF()"></td>

			
 
				+            </tr>

			
 
				+        </table>

			
 
				+

			
 
				+        <br>

			
 
				+

			
 
				+ 

			
 
				+

			
 
				+        <footer class="footer" id="footer" style="margin: auto;">

			
 
				+            <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">

			
 
				+                <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;

			
 
				+                <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;

			
 
				+                <a style="padding: 0px 6px;" href="#">網站地圖</a>&nbsp;｜&nbsp;

			
 
				+                Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                

			
 
				+                

			
 
				+

			
 
				+                

			
 
				+            </div>

			
 
				+        </footer>

			
 
				+    </div>

			
 
				+</body>

			
 
				+

			
 
				 </html>
			
--- a/app/templates/index_new.html
+++ b/app/templates/index_new.html