first version

app/__init__.py

@@ -0,0 +1,301 @@
+#對整個應用做初始化操作
+#主要工作：
+# 1.構建Flask的應用以及各種配置
+#2.構建SQLAlchemy的應用
+
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+import pymysql
+import eventlet
+from flask_mqtt import Mqtt
+from flask_migrate import Migrate
+#from flask_migrate import Migrate, MigrateCommand
+
+
+#綠化(綠色線程)所有系統模組，實現IO多路複用
+# eventlet.monkey_patch()
+
+pymysql.install_as_MySQLdb()
+
+# db = SQLAlchemy()
+
+def create_app():
+    app = Flask(__name__)
+    #配置啟動模式為調適模式
+    # app.config['DEBUG'] = True
+    #配置數據庫的連接字符串
+    app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://coffee:skyeye@52.69.200.169:3306/Coffee'
+    #配置數據庫內容再更新時自動提交
+    app.config['SQLALCHEMY_COMMIT_ON_TEARDOWN'] = True
+    #配置session所需要的秘鑰
+    app.config['SECRET_KEY'] = 'you guess'
+
+    # template 有修改後，會自動去更新
+    app.config['TEMPLATES_AUTO_RELOAD'] = True
+
+    #如果设置成True(默认情况)，Flask - SQLAlchemy将会追踪对象的修改并且发送信号。这需要额外的内存， 如果不必要的可以禁用它
+    app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True
+
+    #資料库连接池的大小。默认是数据库引擎的默认值 （通常是5）
+    app.config['SQLALCHEMY_POOL_SIZE'] = 100
+
+    #指定資料库连接池的超时时间。默认是 10
+    # app.config['SQLALCHEMY_POOL_TIMEOUT'] = 60
+    app.config['SQLALCHEMY_POOL_TIMEOUT'] = 60 * 60
+
+    #自动回收连接的秒数。这对 MySQL 是必须的，默认 情况下 MySQL 会自动移除闲置 8 小时或者以上的连接。 需要注意地是如果使用 MySQL 的话， Flask-SQLAlchemy 会自动地设置这个值为 2 小时
+    app.config['SQLALCHEMY_POOL_RECYCLE'] = 60 * 60 * 8
+    
+    app.config['SQLALCHEMY_MAX_OVERFLOW'] = 15
+
+    # app.config['SECRET'] = 'my secret key'
+    #MQTT相關設置
+    app.config['MQTT_BROKER_URL'] = '60.250.156.234'
+    app.config['MQTT_BROKER_PORT'] = 1883
+    app.config['MQTT_USERNAME'] = 'aisky-client'
+    app.config['MQTT_PASSWORD'] = 'aiskyc'
+    #將發送ping到代理的時間間隔設置60秒
+    app.config['MQTT_KEEPALIVE'] = 60
+    #出於測試目的將TLS設置為禁用
+    app.config['MQTT_TLS_ENABLED'] = False
+
+    #資料庫的初始化
+    db = SQLAlchemy(app)
+    db.init_app(app)
+    mqtt = Mqtt(app)
+
+    # 初始化Flask-Migrate擴展
+    migrate = Migrate(app, db)
+
+
+
+    #用來使用flask-migrate數據遷移使用，如要用在把下面模型類註釋消掉，並且將main裡的from coffee_manage import mqtt,db註釋掉(因會報導入錯誤)
+    # # 用戶表
+    # class User(db.Model):
+    #     __tablename__ = 'user'
+    #
+    #     userID = db.Column(db.Integer, primary_key=True)
+    #     firstname = db.Column(db.String(30), nullable=False)
+    #     lastname = db.Column(db.String(30), nullable=False)
+    #     mail = db.Column(db.String(50), nullable=False)
+    #     phone = db.Column(db.String(20), nullable=False)
+    #     username = db.Column(db.String(30), nullable=False, unique=True)
+    #     password = db.Column(db.String(40), nullable=False)
+    #     status = db.Column(db.Integer, nullable=False, info='0:admin;1:new;9:disable')
+    #
+    # # 發酵槽溫度感測器表
+    # class TankTemSensor(db.Model):
+    #     __tablename__ = 'tank_tem_sensor'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     tem = db.Column(db.Text, nullable=False)
+    #
+    # # 發酵槽二氧化碳感測器表
+    # class TankCO2Sensor(db.Model):
+    #     __tablename__ = 'tank_co2_sensor'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     co2 = db.Column(db.Text, nullable=False)
+    #
+    # # 發酵槽酸鹼值感測器表
+    # class TankPHSensor(db.Model):
+    #     __tablename__ = 'tank_ph_sensor'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     ph = db.Column(db.Text, nullable=False)
+    #
+    # class BeanValve(db.Model):
+    #     __tablename__ = 'bean_valve'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class WashMachine(db.Model):
+    #     __tablename__ = 'wash_machine'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class ConveyorBelt1(db.Model):
+    #     __tablename__ = 'conveyor_belt1'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Cargo1Disinfect(db.Model):
+    #     __tablename__ = 'cargo1_disinfect'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class ColorMachine(db.Model):
+    #     __tablename__ = 'color_machine'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class ConveyorBelt2(db.Model):
+    #     __tablename__ = 'conveyor_belt2'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class PeelingMachine(db.Model):
+    #     __tablename__ = 'peeling_machine'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class ConveyorBelt3(db.Model):
+    #     __tablename__ = 'conveyor_belt3'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Bacteria(db.Model):
+    #     __tablename__ = 'bacteria'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Cargo2Disinfect(db.Model):
+    #     __tablename__ = 'cargo2_disinfect'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Heating(db.Model):
+    #     __tablename__ = 'heating'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Stir(db.Model):
+    #     __tablename__ = 'stir'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class WaterInjection(db.Model):
+    #     __tablename__ = 'water_injection'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class TopValve(db.Model):
+    #     __tablename__ = 'top_valve'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class BottomValve(db.Model):
+    #     __tablename__ = 'bottom_valve'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Temperature(db.Model):
+    #     __tablename__ = 'temperature'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Hoist(db.Model):
+    #     __tablename__ = 'hoist'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Dryer(db.Model):
+    #     __tablename__ = 'dryer'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     duration = db.Column(db.Text, nullable=False)
+    #     start = db.Column(db.Text, nullable=False)
+    #     end = db.Column(db.Text, nullable=False)
+    #
+    # class Relay(db.Model):
+    #     __tablename__ = 'relay'
+    #
+    #     sn = db.Column(db.Integer, primary_key=True)
+    #     datetime = db.Column(db.DateTime, nullable=False)
+    #     tank_num = db.Column(db.Integer, nullable=False)
+    #     status = db.Column(db.Text, nullable=False)
+
+
+
+
+    #將main藍圖程序與app關聯到一起
+    from .main import main as main_blueprint
+    app.register_blueprint(main_blueprint)
+    #將user藍圖程序與app關聯到一起
+    from .user import user as user_blueprint
+    app.register_blueprint(user_blueprint)
+
+    return app, db, mqtt

app/main/__init__.py

@@ -0,0 +1,5 @@
+#main 目錄： 包含主要的業務邏輯的路由和視圖
+# __init__.py : 對主業務邏輯程序的初始化操作
+from flask import Blueprint
+main = Blueprint('main',__name__)
+from . import views

app/main/mqtt.py

@@ -0,0 +1,134 @@
+import pymysql
+import paho.mqtt.client as mqtt
+import json
+import threading
+from time import sleep as sl
+from datetime import datetime as dt
+from concurrent.futures import ThreadPoolExecutor
+
+
+class MQTT(object):
+    # def __init__(self, username, password, ip, port, time, sub_topic):
+    #     self.client = mqtt.Client()
+    #     self.pool = ThreadPoolExecutor(10)
+    #     self.username = username
+    #     self.password = password
+    #     self.ip = ip
+    #     self.port = port
+    #     self.time = time
+    #     self.sub_topic = sub_topic
+    #     self.D = {}
+    #     for i in range(0, len(self.sub_topic)):
+    #         self.D[self.sub_topic] = 0
+    #     self.res = 0
+    def __init__(self):
+        self.res = 0
+        # 當地端程式連線伺服器得到回應時，要做的動作
+        def on_connect(client, userdata, flags, rc):
+            # print("Waiting for MQTT message...")
+            # 將訂閱主題寫在on_connet中
+            # 如果我們失去連線或重新連線時
+            # 地端程式將會重新訂閱
+            # 判斷是否為元組，有多個訂閱主題
+            # if isinstance(self.sub_topic, tuple):
+            #     for i in range(0, len(self.sub_topic)):
+            #         client.subscribe(self.sub_topic[i])
+            # client.subscribe(self.sub_topic)
+            client.subscribe('AISKY/Coffee/MK-G/b8:27:eb:b4:59:3e/Log')
+
+        # 當接收到從伺服器發送的訊息時要進行的動作
+        def on_message(client, userdata, msg):
+            msg = msg
+
+            payload = json.loads(msg.payload.decode('utf-8'))
+            self.res = payload
+            print('self.res = payload :', payload)
+            # if payload:
+            #     self.D[self.sub_topic] = 1
+            #     self.res = payload
+
+        self.client = mqtt.Client()
+        self.command = {'tank-number':'1', 'command':'tank_motor_status', 'value':'on'}
+
+        def thread_job(self):
+            self.client.on_connect = on_connect
+            # 設定接收訊息的動作
+            self.client.on_message = on_message
+            # 設定登入帳號密碼
+            self.client.username_pw_set("aisky-client", "aiskyc")
+            # self.client.username_pw_set(self.username, self.password)
+            # 設定連線資訊(IP, Port, 連線時間)
+            self.client.connect("60.250.156.234", 1883, 60)
+            # self.client.connect(self.ip, self.port, self.time)
+            # 開始連線，執行設定的動作和處理重新連線問題
+            # 也可以手動使用其他loop函式來進行連接
+            self.client.loop_forever()
+
+        mqtt_subscribe_thread = threading.Thread(target=thread_job, args=(self,))
+        mqtt_subscribe_thread.daemon = True
+        mqtt_subscribe_thread.start()
+        # 睡1秒等執行敘跑完才跑主程式
+        sl(1)
+        # while True:
+        #     pass
+
+    def mqttPublish(self, topic, command):
+        self.client.publish(topic, json.dumps(command))
+        print('json.dumps(command):', json.dumps(command))
+        # print('done')
+        return True
+        # while True:
+        #     if self.D[self.sub_topic] == 1:
+        #         return self.res
+
+
+    # def workOn(self):
+    #     self = self
+
+
+
+
+
+
+    # def thread_job(self):
+    #     # 設定連線的動作
+    #     self.client.on_connect = on_connect
+    #     # 設定接收訊息的動作
+    #     self.client.on_message = on_message
+    #     # 設定登入帳號密碼
+    #     self.client.username_pw_set("aisky-client", "aiskyc")
+    #     # self.client.username_pw_set(self.username, self.password)
+    #     # 設定連線資訊(IP, Port, 連線時間)
+    #     self.client.connect("60.250.156.234", 1883, 60)
+    #     # self.client.connect(self.ip, self.port, self.time)
+    #     # 開始連線，執行設定的動作和處理重新連線問題
+    #     # 也可以手動使用其他loop函式來進行連接
+    #     self.client.loop_forever()
+    #
+    #     mqtt_subscribe_thread = threading.Thread(target=thread_job, args=(self,))
+    #     mqtt_subscribe_thread.daemon = True
+    #     mqtt_subscribe_thread.start()
+    #     # 睡1秒等執行敘跑完才跑主程式
+    #     sl(1)
+        # return "success"
+        # self.queryMySQL()
+        # self.cursor.close()
+        # self.db.close()
+        # self.pool.shutdown(wait=True)
+        # self.mqttPublish('AISKY/Coffee/MK-G/b8:27:eb:b4:59:3e', self.command)
+        # while True:
+        #     pass
+
+
+if __name__ == '__main__':
+    mqtt = MQTT()
+    try:
+        # mqtt.workOn()
+        mqtt.mqttPublish('AISKY/Coffee/MK-G/b8:27:eb:b4:59:3e', mqtt.command)
+        print('mqttPublish_test')
+        while True:
+            pass
+    except KeyboardInterrupt:
+        mqtt.pool.shutdown(wait=True)
+        mqtt.cursor.close()
+        mqtt.db.close()

app/models.py

@@ -0,0 +1,614 @@
+# coding: utf-8
+from datetime import datetime
+from sqlalchemy import Column, Date, DateTime, Float, Index, Integer, String, Text
+from sqlalchemy.schema import FetchedValue
+from flask_sqlalchemy import SQLAlchemy
+
+
+# db = SQLAlchemy()
+
+#與當前項目相關的模型文件，即所有的實體類在此編寫
+from coffee_manage import db
+from werkzeug.utils import send_file
+
+#用戶表
+class User(db.Model):
+    __tablename__ = 'user'
+    userID = db.Column(db.Integer, primary_key=True)
+    firstname = db.Column(db.String(30), nullable=False)
+    lastname = db.Column(db.String(30), nullable=False)
+    mail = db.Column(db.String(50), nullable=False)
+    phone = db.Column(db.String(20), nullable=False)
+    username = db.Column(db.String(30), nullable=False, unique=True)
+    password = db.Column(db.String(40), nullable=False)
+    status = db.Column(db.Integer, nullable=False, info='0:admin;1:new;9:disable')
+
+# ////////////////////////////////////////////////////////////////////////////////
+# 乾燥槽
+# 乾燥桶入料_感測器_超音波感測器
+class dry_input_sensor(db.Model):
+    __tablename__ = 'dry_input_sensor'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 乾燥桶_感測器_SHT11
+class dry_tank_SHT11(db.Model):
+    __tablename__ = 'dry_tank_SHT11'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    SHT11_Temp = db.Column(db.Text, nullable=False)
+    SHT11_Humidity = db.Column(db.Text, nullable=False)
+
+# 乾燥桶_感測器_土壤三合一感測器
+class dry_tank_Soil(db.Model):
+    __tablename__ = 'dry_tank_Soil'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    soil_Temp = db.Column(db.Text, nullable=False)
+    soil_Humidity = db.Column(db.Text, nullable=False)
+    soil_EC = db.Column(db.Text, nullable=False)
+
+# 乾燥桶_感測器_超音波感測器
+class dry_tank_PA(db.Model):
+    __tablename__ = 'dry_tank_PA'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    PA = db.Column(db.Text, nullable=False)
+
+# 乾燥桶_感測器_超音波感測器
+class dry_tank_UltraSonic(db.Model):
+    __tablename__ = 'dry_tank_UltraSonic'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 乾燥桶出料_感測器_超音波感測器
+class dry_output_sensor(db.Model):
+    __tablename__ = 'dry_output_sensor'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 乾燥桶入料_排程設定
+class set_dry_input(db.Model):
+    __tablename__ = 'set_dry_input'
+    # sn
+    sn = db.Column(db.Integer, primary_key=True)
+    # 存入時間
+    datetime = db.Column(db.DateTime, nullable=False)
+    # 入料儲豆槽_咖啡豆高度
+    input_height = db.Column(db.Text, nullable=False)
+    # 乾燥桶_吸料時間
+    input_entertime = db.Column(db.Text, nullable=False)
+    # 乾燥桶_放料時間
+    input_exittime = db.Column(db.Text, nullable=False)
+    # 乾燥桶_咖啡豆高度
+    tank_height = db.Column(db.Text, nullable=False)
+
+# 乾燥桶入料_制動器_真空吸料機
+class dry_input_brake(db.Model):
+    __tablename__ = 'dry_input_brake'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+#乾燥桶_制動器_ALL
+class dry_tank_brake(db.Model):
+    __tablename__ = 'dry_tank_brake'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+    threewayvalve = db.Column(db.Integer, nullable=False)
+    diskvalve = db.Column(db.Integer, nullable=False)
+    solenoid_disinfect = db.Column(db.Integer, nullable=False)
+    solenoid_water = db.Column(db.Integer, nullable=False)
+    motor = db.Column(db.Integer, nullable=False)
+    blower = db.Column(db.Integer, nullable=False)
+    heater1 = db.Column(db.Integer, nullable=False)
+    heater2 = db.Column(db.Integer, nullable=False)
+    temp1_enable = db.Column(db.Integer, nullable=False)
+    temp1 = db.Column(db.Float, nullable=False)
+
+
+# 乾燥桶出料_制動器_真空吸料機
+class dry_output_brake(db.Model):
+    __tablename__ = 'dry_output_brake'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+    
+# ////////////////////////////////////////////////////////////////////////////////
+# 發酵槽
+# 發酵槽_發酵貨櫃入料儲豆槽_超音波感測器
+class ferment_input_UltraSonic(db.Model):
+    __tablename__ = 'ferment_input_UltraSonic'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 發酵槽_發酵貨櫃入料儲豆槽_制動器
+class ferment_input_actuator(db.Model):
+    __tablename__ = 'ferment_input_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+# 發酵槽_感測器_SHT11
+class ferment_tank_SHT11(db.Model):
+    __tablename__ = 'ferment_tank_SHT11'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    SHT11_Temp = db.Column(db.Text, nullable=False)
+    SHT11_Humidity = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_二氧化碳
+class ferment_tank_CO2(db.Model):
+    __tablename__ = 'ferment_tank_CO2'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    CO2 = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_PH
+class ferment_tank_PH(db.Model):
+    __tablename__ = 'ferment_tank_PH'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    PH = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_ORP
+class ferment_tank_ORP(db.Model):
+    __tablename__ = 'ferment_tank_ORP'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    ORP = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_DO
+class ferment_tank_DO(db.Model):
+    __tablename__ = 'ferment_tank_DO'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    DO = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_EC
+class ferment_tank_EC(db.Model):
+    __tablename__ = 'ferment_tank_EC'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    EC = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_PA
+class ferment_tank_PA(db.Model):
+    __tablename__ = 'ferment_tank_PA'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    PA = db.Column(db.Text, nullable=False)
+
+# 發酵槽保溫夾層_感測器_保溫夾層水位計
+class ferment_tank_WaterLevel(db.Model):
+    __tablename__ = 'ferment_tank_WaterLevel'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    WaterLevel = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_超音波感測器
+class ferment_tank_UltraSonic(db.Model):
+    __tablename__ = 'ferment_tank_UltraSonic'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_咖啡生豆高度
+class ferment_tank_LiDAR(db.Model):
+    __tablename__ = 'ferment_tank_LiDAR'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    LiDAR = db.Column(db.Text, nullable=False)
+
+# 發酵槽_感測器_水位高度
+class ferment_tank_PressureWaterLevel(db.Model):
+    __tablename__ = 'ferment_tank_PressureWaterLevel'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    PressureWaterLevel = db.Column(db.Text, nullable=False)
+
+# 發酵槽_制動器
+class ferment_tank_actuator(db.Model):
+    __tablename__ = 'ferment_tank_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+    threewayvalve_input = db.Column(db.Integer, nullable=False)
+    diskvalve = db.Column(db.Integer, nullable=False)
+    solenoid_tank_water_total = db.Column(db.Integer, nullable=False)
+    solenoid_tank_disinfect = db.Column(db.Integer, nullable=False)
+    solenoid_outer_water = db.Column(db.Integer, nullable=False)
+    solenoid_tank_water_in = db.Column(db.Integer, nullable=False)
+    pump_sensor = db.Column(db.Integer, nullable=False)
+    threewayvalve_bean = db.Column(db.Integer, nullable=False)
+    threewayvalve_outer_float = db.Column(db.Integer, nullable=False)
+    motor = db.Column(db.Integer, nullable=False)
+    heater1 = db.Column(db.Integer, nullable=False)
+    heater2 = db.Column(db.Integer, nullable=False)
+    temp_enable = db.Column(db.Integer, nullable=False)
+    temp = db.Column(db.Integer, nullable=False)
+
+# 發酵槽_發酵貨櫃出料儲豆槽_感測器
+class ferment_output_UltraSonic(db.Model):
+    __tablename__ = 'ferment_output_UltraSonic'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 發酵槽_發酵貨櫃出料儲豆槽_制動器
+class ferment_output_actuator(db.Model):
+    __tablename__ = 'ferment_output_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+# 發酵槽_發酵貨櫃自動化狀態判斷
+class ferment_container_status(db.Model):
+    __tablename__ = 'ferment_container_status'
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    Ferment_Input_1 = db.Column(db.Text, nullable=False)
+    Ferment_Input_2 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_1 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_2 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_3 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_4 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_5 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_6 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_7 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_8 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_9 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_10 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_11 = db.Column(db.Text, nullable=False)
+    Ferment_Tank_12 = db.Column(db.Text, nullable=False)
+    Ferment_Output_1 = db.Column(db.Text, nullable=False)
+    Ferment_Output_2 = db.Column(db.Text, nullable=False)
+
+# 乾燥槽_乾燥貨櫃自動化狀態判斷
+class dry_container_status(db.Model):
+    __tablename__ = 'dry_container_status'
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    Dry_Input_1 = db.Column(db.Text, nullable=False)
+    Dry_Input_2 = db.Column(db.Text, nullable=False)
+    Dry_Tank_1 = db.Column(db.Text, nullable=False)
+    Dry_Tank_2 = db.Column(db.Text, nullable=False)
+    Dry_Tank_3 = db.Column(db.Text, nullable=False)
+    Dry_Tank_4 = db.Column(db.Text, nullable=False)
+    Dry_Tank_5 = db.Column(db.Text, nullable=False)
+    Dry_Tank_6 = db.Column(db.Text, nullable=False)
+    Dry_Tank_7 = db.Column(db.Text, nullable=False)
+    Dry_Tank_8 = db.Column(db.Text, nullable=False)
+    Dry_Tank_9 = db.Column(db.Text, nullable=False)
+    Dry_Tank_10 = db.Column(db.Text, nullable=False)
+    Dry_Tank_11 = db.Column(db.Text, nullable=False)
+    Dry_Tank_12 = db.Column(db.Text, nullable=False)
+    Dry_Output_1 = db.Column(db.Text, nullable=False)
+    Dry_Output_2 = db.Column(db.Text, nullable=False)
+
+# ////////////////////////////////////////////////////////////////////////////////
+# 清洗貨櫃
+# 清洗浮選槽_清洗貨櫃入料儲豆槽_制動器
+class clean_input_actuator(db.Model):
+    __tablename__ = 'clean_input_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+# 清洗浮選槽_制動器
+class clean_tank_actuator(db.Model):
+    __tablename__ = 'clean_tank_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+    pump_waterInput = db.Column(db.Integer, nullable=False)
+    pump_waterL2L3 = db.Column(db.Integer, nullable=False)
+    pump_waterL4L5 = db.Column(db.Integer, nullable=False)
+    solenoid_waterL2L3 = db.Column(db.Integer, nullable=False)
+    solenoid_waterL4L5 = db.Column(db.Integer, nullable=False)
+    stepping_motor = db.Column(db.Text, nullable=False)
+
+# 清洗浮選槽_清洗貨櫃出料儲豆槽_制動器
+class clean_output_actuator(db.Model):
+    __tablename__ = 'clean_output_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+# 清洗浮選槽_感測器
+class clean_tank_UltraSonic(db.Model):
+    __tablename__ = 'clean_tank_UltraSonic'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Text, nullable=False)
+
+# 脫皮機_清洗貨櫃入料儲豆槽_制動器
+class peel_input_actuator(db.Model):
+    __tablename__ = 'peel_input_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+# 脫皮機_制動器
+class peel_tank_actuator(db.Model):
+    __tablename__ = 'peel_tank_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+    motor = db.Column(db.Integer, nullable=False)
+
+
+# 脫皮機_清洗貨櫃出料儲豆槽_制動器
+class peel_output_actuator(db.Model):
+    __tablename__ = 'peel_output_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+# 色選機_清洗貨櫃出料儲豆槽_制動器
+class colorselect_output_actuator(db.Model):
+    __tablename__ = 'colorselect_output_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    vacuum = db.Column(db.Integer, nullable=False)
+
+
+# ////////////////////////////////////////////////////////////////////////////////
+
+
+
+#發酵槽溫度感測器表
+class TankTemSensor(db.Model):
+    __tablename__ = 'tank_tem_sensor'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    tem = db.Column(db.Text, nullable=False)
+
+#發酵槽二氧化碳感測器表
+class TankCO2Sensor(db.Model):
+    __tablename__ = 'tank_co2_sensor'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    co2 = db.Column(db.Text, nullable=False)
+
+#發酵槽酸鹼值感測器表
+class TankPHSensor(db.Model):
+    __tablename__ = 'tank_ph_sensor'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    ph = db.Column(db.Text, nullable=False)
+
+#發酵槽酸鹼值感測器表
+class TankECSensor(db.Model):
+    __tablename__ = 'tank_ec_sensor'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    ec = db.Column(db.Text, nullable=False)
+
+#發酵槽超音波感測器表
+class TankSonicSensor(db.Model):
+    __tablename__ = 'tank_sonic_sensor'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    sonic = db.Column(db.Text, nullable=False)
+
+
+class BeanValve(db.Model):
+    __tablename__ = 'bean_valve'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class WashMachine(db.Model):
+    __tablename__ = 'wash_machine'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class ConveyorBelt1(db.Model):
+    __tablename__ = 'conveyor_belt1'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Cargo1Disinfect(db.Model):
+    __tablename__ = 'cargo1_disinfect'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class ColorMachine(db.Model):
+    __tablename__ = 'color_machine'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class ConveyorBelt2(db.Model):
+    __tablename__ = 'conveyor_belt2'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class PeelingMachine(db.Model):
+    __tablename__ = 'peeling_machine'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+
+
+class ConveyorBelt3(db.Model):
+    __tablename__ = 'conveyor_belt3'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+
+
+class Bacteria(db.Model):
+    __tablename__ = 'bacteria'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Cargo2Disinfect(db.Model):
+    __tablename__ = 'cargo2_disinfect'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Heating(db.Model):
+    __tablename__ = 'heating'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Stir(db.Model):
+    __tablename__ = 'stir'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class WaterInjection(db.Model):
+    __tablename__ = 'water_injection'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+
+
+class TopValve(db.Model):
+    __tablename__ = 'top_valve'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class BottomValve(db.Model):
+    __tablename__ = 'bottom_valve'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Temperature(db.Model):
+    __tablename__ = 'temperature'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Hoist(db.Model):
+    __tablename__ = 'hoist'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Dryer(db.Model):
+    __tablename__ = 'dryer'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    duration = db.Column(db.Text, nullable=False)
+    start = db.Column(db.Text, nullable=False)
+    end = db.Column(db.Text, nullable=False)
+
+class Relay(db.Model):
+    __tablename__ = 'relay'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    status= db.Column(db.Text, nullable=False)
+
+
+class PeelingMachineRPM(db.Model):
+    __tablename__ = 'peeling_machine_rpm'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    rpm = db.Column(db.Text, nullable=False)
+
+class StirRPM(db.Model):
+    __tablename__ = 'stir_rpm'
+
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    tank_num = db.Column(db.Integer, nullable=False)
+    rpm = db.Column(db.Text, nullable=False)
+
+
+
+db.create_all()

app/static/css/registration.css

@@ -0,0 +1,112 @@
+        .img-fluid {
+            margin-top: 50px;
+        }
+
+        .text-center {
+            margin-top: 50px;
+        }
+
+        form {
+            margin-top: 50px;
+        }
+
+        form > div:last-child {
+            margin-top: 40px;
+        }
+
+        form > div:last-child input:last-child {
+            margin-left: 120px;
+        }
+
+        .btn-info {
+            width: 105px;
+            height: 43px;
+            background: #85BF31;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            color: #000000;
+        }
+
+        .wrong-info {
+            height: 20px;
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #FF0505;
+        }
+
+        @media(max-width:373px){
+            .col-2 {
+                display: none;
+            }
+        }
+
+        @media(max-width:577px){
+            form > div:last-child input:last-child {
+                margin-left: 0px;
+            }
+        }
+
+        @media(min-width:576px){
+
+        }
+
+         @media(min-width:768px){
+            .form-inline {
+                margin-left: 60px;
+            }
+            form > div:last-child {
+                margin-left: 60px;
+            }
+            .wrong-info {
+                margin-left: 50px;
+            }
+            #first {
+                margin-left: 70px;
+            }
+            #last {
+                margin-left: 71px;
+            }
+            #email {
+                margin-left: 108px;
+            }
+            #phone {
+                margin-left: 103px;
+            }
+            #usr {
+                margin-left: 68px;
+            }
+            #pwd {
+                margin-left: 81px;
+            }
+            #cpwd {
+                margin-left: 22px;
+            }
+
+         }
+
+         @media(min-width:991px){
+            .form-inline {
+                margin-left: 140px;
+            }
+            form > div:last-child {
+                margin-left: 150px;
+            }
+            .wrong-info {
+                margin-left: 140px;
+            }
+         }
+
+         @media(min-width:1200px){
+            .form-inline {
+                margin-left: 180px;
+            }
+             form > div:last-child {
+                margin-left: 190px;
+            }
+            .wrong-info {
+                margin-left: 170px;
+            }
+         }

app/static/css/reset_pwd1.css

@@ -0,0 +1,103 @@
+        .img-fluid {
+            margin-top: 50px;
+        }
+
+        h1 {
+            margin-top: 30px;
+        }
+
+        .descripe {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 18px;
+            line-height: 21px;
+        }
+
+        form {
+            margin-top: 50px;
+        }
+
+        form > div:last-child {
+            margin-top: 40px;
+        }
+
+        form > div:last-child input:last-child {
+            margin-left: 100px;
+        }
+
+        .btn-info {
+            width: 105px;
+            height: 43px;
+            background: #85BF31;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            color: #000000;
+        }
+
+        .wrong-info {
+            height: 20px;
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #FF0505;
+        }
+
+        @media(max-width:373px){
+            .col-2 {
+                display: none;
+            }
+        }
+
+        @media(max-width:577px){
+            form > div:last-child input:last-child {
+                margin-left: 0px;
+            }
+        }
+
+        @media(min-width:576px){
+            #email {
+                margin-left: 70px;
+            }
+            .form div:not(:first-child) {
+                margin-top: 20px;
+            }
+
+        }
+         @media(min-width:768px){
+            .form-inline {
+                margin-left: 50px;
+            }
+            form > div:last-child {
+                margin-left: 60px;
+            }
+            .wrong-info {
+                margin-left: 50px;
+            }
+         }
+
+         @media(min-width:991px){
+            .form-inline {
+                margin-left: 140px;
+            }
+            form > div:last-child {
+                margin-left: 150px;
+            }
+            .wrong-info {
+                margin-left: 140px;
+            }
+         }
+
+         @media(min-width:1200px){
+            .form-inline {
+                margin-left: 180px;
+            }
+             form > div:last-child {
+                margin-left: 190px;
+            }
+            .wrong-info {
+                margin-left: 170px;
+            }
+         }

app/static/css/reset_pwd2.css

@@ -0,0 +1,106 @@
+        .img-fluid {
+            margin-top: 50px;
+        }
+
+        h1 {
+            margin-top: 30px;
+        }
+
+        .descripe {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 18px;
+            line-height: 21px;
+        }
+
+        form {
+            margin-top: 50px;
+        }
+
+        form > div:last-child {
+            margin-top: 40px;
+        }
+
+        form > div:last-child input:last-child {
+            margin-left: 100px;
+        }
+
+        .btn-info {
+            width: 105px;
+            height: 43px;
+            background: #85BF31;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            color: #000000;
+        }
+
+        .wrong-info {
+            height: 20px;
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #FF0505;
+        }
+
+        @media(max-width:373px){
+            .col-2 {
+                display: none;
+            }
+        }
+
+        @media(max-width:577px){
+            form > div:last-child input:last-child {
+                margin-left: 0px;
+            }
+        }
+
+        @media(min-width:576px){
+            #new-pwd {
+                margin-left: 70px;
+            }
+            #confirm-pwd {
+                margin-left: 46px;
+            }
+            .form div:not(:first-child) {
+                margin-top: 20px;
+            }
+
+        }
+         @media(min-width:768px){
+            .form-inline {
+                margin-left: 50px;
+            }
+            form > div:last-child {
+                margin-left: 60px;
+            }
+            .wrong-info {
+                margin-left: 50px;
+            }
+         }
+
+         @media(min-width:991px){
+            .form-inline {
+                margin-left: 140px;
+            }
+            form > div:last-child {
+                margin-left: 150px;
+            }
+            .wrong-info {
+                margin-left: 140px;
+            }
+         }
+
+         @media(min-width:1200px){
+            .form-inline {
+                margin-left: 180px;
+            }
+             form > div:last-child {
+                margin-left: 190px;
+            }
+            .wrong-info {
+                margin-left: 170px;
+            }
+         }

app/static/css/sign_in.css

@@ -0,0 +1,116 @@
+        .img-fluid {
+            margin-top: 50px;
+        }
+
+        .text-center {
+            margin-top: 30px;
+        }
+
+        form {
+            margin-top: 50px;
+        }
+
+         .radio a {
+            text-decoration: none;
+            margin-left: 75px;
+        }
+
+        form > div:last-child {
+            margin-top: 40px;
+        }
+
+        form > div:last-child input:last-child {
+            margin-left: 100px;
+        }
+
+        .btn-info {
+            width: 105px;
+            height: 43px;
+            background: #85BF31;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            color: #000000;
+        }
+
+        .wrong-info {
+            height: 20px;
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #FF0505;
+        }
+
+        @media(max-width:373px){
+            .col-2 {
+                display: none;
+            }
+        }
+
+        @media(max-width:577px){
+            .radio a {
+                margin-left: 0px;
+                display: block;
+            }
+            form > div:last-child input:last-child {
+                margin-left: 0px;
+            }
+        }
+
+        @media(min-width:576px){
+            #usr {
+                margin-left: 70px;
+            }
+            #pwd {
+                margin-left: 43px;
+            }
+            .form div:not(:first-child) {
+                margin-top: 20px;
+            }
+
+        }
+         @media(min-width:768px){
+            .form-inline {
+                margin-left: 50px;
+            }
+            .radio {
+                margin-left: 50px;
+            }
+            form > div:last-child {
+                margin-left: 60px;
+            }
+            .wrong-info {
+                margin-left: 50px;
+            }
+         }
+
+         @media(min-width:991px){
+            .form-inline {
+                margin-left: 140px;
+            }
+            .radio {
+                margin-left: 140px;
+            }
+            form > div:last-child {
+                margin-left: 150px;
+            }
+            .wrong-info {
+                margin-left: 140px;
+            }
+         }
+
+         @media(min-width:1200px){
+            .form-inline {
+                margin-left: 180px;
+            }
+            .radio {
+                margin-left: 180px;
+            }
+             form > div:last-child {
+                margin-left: 190px;
+            }
+            .wrong-info {
+                margin-left: 170px;
+            }
+         }

app/static/js/registration.js

@@ -0,0 +1,100 @@
+        function Login(){
+            window.location.href='/login';
+        };
+
+        $(function (){
+            var firstname = $("input[name='firstname']");
+            var lastname = $("input[name='lastname']");
+            var email = $("input[name='email']");
+            var phone = $("input[name='phone']");
+            var username = $("input[name='username']");
+            var password = $("input[name='password']");
+            var confirmpwd = $("input[name='confirmpwd']");
+            var status = false;
+            var form = $("form");
+
+            firstname.blur(function(){      // rita blur 取消焦點時
+                var span = $("#firstname-span");
+                if(firstname.val() == ''){
+                    span.text("Field is requied");
+                    status = false;
+                }else{
+                    span.text("");
+                    status = true;
+                };
+            });
+
+            lastname.blur(function(){
+                var span = $("#lastname-span");
+                if(lastname.val() == ''){
+                    span.text("Field is requied");
+                    status = false;
+                }else{
+                    span.text("");
+                    status = true;
+                };
+            });
+
+            email.blur(function(){
+                var span = $("#email-span");
+                if(email.val().indexOf('@') == -1){
+                    span.text("Incorrect email address");
+                    status = false;
+                }else{
+                    span.text("");
+                    status = true;
+                    $.get('/check_email','email='+email.val(),function(resText){
+                        if(resText.errMsg){
+                            $("#firstname_span").text("This email is already registered");
+                            status = false;
+                        }else{
+                            $("#firstname_span").text("");
+                            status = true;
+                        };
+                    },'json');
+                };
+            });
+
+            phone.blur(function(){
+                var span = $("#phone-span");
+                if(phone.val().length < 8 || isNaN(phone.val()) == true){
+                    span.text("Wrong phone number");
+                    status = false;
+                }else{
+                    span.text("");
+                    status = true;
+                };
+            });
+
+            username.blur(function(){
+                $.get("/check_username","username="+username.val(),function(resText){
+                    if(resText.errMsg){
+                        $("#firstname-span").text("This username is already registered");
+                        status = false;
+                    }else{
+                        $("#firstname-span").text("");
+                        status = true;
+                    };
+                },'json');
+            });
+
+            confirmpwd.blur(function(){
+                var span = $("#password-span");
+                if(password.val() != confirmpwd.val()){
+                    span.text("Passwords does not match");
+                    status = false;
+                }else{
+                    span.text("");
+                    status = true;
+                };
+            });
+
+            form.submit(function(){
+                if((status == true) && (password.val() != '') && (confirmpwd.val() != '')){
+                    return true;
+                }else{
+                    alert("Please type your infomation");
+                    return false;
+                };
+            });
+        });

app/static/js/reset_pwd1.js

@@ -0,0 +1,3 @@
+function Login(){
+    window.location.href='/login';
+};

app/static/js/reset_pwd2.js

@@ -0,0 +1,3 @@
+function ResetPassword(){
+    window.location.href='/reset_password';
+};

app/static/js/sign_in.js

@@ -0,0 +1,3 @@
+function Registration(){
+    window.location.href='/register';
+};

app/templates/GoldIn - 0709-RWD.html

@@ -0,0 +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>
+</html>

app/templates/GoldIn.html

@@ -0,0 +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>
+
+</html>

app/templates/camera.html

@@ -0,0 +1,310 @@
+<!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>
+
+</html>

app/templates/camera_clean.html

@@ -0,0 +1,328 @@
+<!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>
+
+</html>

app/templates/camera_dry.html

@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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);
+        var camera_title = '{{camera_title}}';
+
+        $(document).ready(function (){
+            $("#coffee_title").text("乾燥貨櫃攝影機");
+        });
+    </script>
+    <style>
+        .video_1 img{
+            padding: 10px 10px 0px 10px;   
+            width: 448px;        
+            height: 336px;
+        }
+        .video_2 img{
+            margin: 5px 3px 0px 3px;   
+            width: 288px;        
+            height: 216px;
+        }
+        .video_22 img{
+            margin: 0px 15px 0px 15px;   
+            width: 208px;        
+            height: 156px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </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">
+                    <a href="/camera_DI1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_DI2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </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;">
+            <tr>
+                <td class="video_1">
+                    <a href="/camera_D1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </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">
+                    <a href="/camera_D4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D5" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D6" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </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">
+                    <a href="/camera_D7" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D8" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D9" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </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">
+                    <a href="/camera_D10" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D11" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_D12" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </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">
+                    <a href="/camera_DO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_DO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </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></td>
+                <td class="video_2">
+                    <a href="/camera_DCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+                <td class="video_2">
+                    <a href="/camera_DCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td></td>
+                <td class="title_2">
+                    乾燥貨櫃內部
+                </td>
+                <td></td>
+                <td class="title_2">
+                    乾燥貨櫃外部
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td colspan="5" style="color: darkgray;">
+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    
+                </td>
+            </tr>
+            <tr>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_DI1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>乾燥入料儲豆槽 DI1
+                </td>
+
+                <td class="video_2">
+                    <a href="/camera_D1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_DO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <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">
+                    <a href="/camera_D4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D5" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D6" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    乾燥槽 D4
+                </td>
+                <td class="title_2">
+                    乾燥槽 D5
+                </td>
+                <td class="title_2">
+                    乾燥槽 D6
+                </td>
+            </tr>
+            <tr>
+                <td colspan="5" style="color: darkgray;">
+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+                </td>
+            </tr>
+            <tr>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_DI2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>乾燥入料儲豆槽 DI2
+                </td>
+
+                <td class="video_2">
+                    <a href="/camera_D7" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D8" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D9" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_DO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <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">
+                    <a href="/camera_D10" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D11" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_D12" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    乾燥槽 D10
+                </td>
+                <td class="title_2">
+                    乾燥槽 D11
+                </td>
+                <td class="title_2">
+                    乾燥槽 D12
+                </td>
+            </tr>
+        </table>
+
+        <br>
+        <br>
+        <hr>
+        <br>
+        <br>
+        
+        <center>0.65 × 0.65</center>
+
+        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
+            <tr>
+                <td></td>
+                <td class="video_22">
+                    <a href="/camera_DCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+                <td class="video_22">
+                    <a href="/camera_DCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td></td>
+                <td class="title_2">
+                    乾燥貨櫃內部
+                </td>
+                <td></td>
+                <td class="title_2">
+                    乾燥貨櫃外部
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td colspan="5" style="color: darkgray;">
+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+                </td>
+            </tr>
+            <tr>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_DI1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>乾燥入料儲豆槽 DI1
+                </td>
+
+                <td class="video_22">
+                    <a href="/camera_D1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_DO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <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_22">
+                    <a href="/camera_D4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D5" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D6" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    乾燥槽 D4
+                </td>
+                <td class="title_2">
+                    乾燥槽 D5
+                </td>
+                <td class="title_2">
+                    乾燥槽 D6
+                </td>
+            </tr>
+            <tr>
+                <td colspan="5" style="color: darkgray;">
+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+                </td>
+            </tr>
+            <tr>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_DI2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>乾燥入料儲豆槽 DI2
+                </td>
+
+                <td class="video_22">
+                    <a href="/camera_D7" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D8" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D9" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_DO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <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_22">
+                    <a href="/camera_D10" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D11" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_D12" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    乾燥槽 D10
+                </td>
+                <td class="title_2">
+                    乾燥槽 D11
+                </td>
+                <td class="title_2">
+                    乾燥槽 D12
+                </td>
+            </tr>
+        </table>
+
+        <br>
+        <br>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+</body>
+
+</html>

app/templates/camera_dry_0819.html

@@ -0,0 +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>
+
+</html>

app/templates/camera_dry_1.html

@@ -0,0 +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>
+
+</html>

app/templates/camera_ferment.html

@@ -0,0 +1,503 @@
+<!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>
+        .video_1 img{
+            padding: 10px 10px 0px 10px;   
+            width: 448px;        
+            height: 336px;
+        }
+        .video_2 img{
+            margin: 5px 3px 0px 3px;   
+            width: 288px;        
+            height: 216px;
+        }
+        .video_22 img{
+            margin: 0px 15px 0px 15px;   
+            width: 208px;        
+            height: 156px;
+        }
+    </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="/ferment" 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>
+        -->
+    <!--
+        <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">
+                    <a href="/camera_F" target="_blank"><a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_1">
+                    發酵入料儲豆槽 FI1
+                </td>
+                <td class="title_1">
+                    發酵入料儲豆槽 FI2
+                </td>
+            </tr>
+        </table>
+
+        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
+            <tr>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_1">
+                    發酵槽 F1
+                </td>
+                <td class="title_1">
+                    發酵槽 F2
+                </td>
+                <td class="title_1">
+                    發酵槽 F3
+                </td>
+            </tr>
+            <tr>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_1">
+                    發酵槽 F4
+                </td>
+                <td class="title_1">
+                    發酵槽 F5
+                </td>
+                <td class="title_1">
+                    發酵槽 F6
+                </td>
+            </tr>
+            <tr>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_1">
+                    發酵槽 F7
+                </td>
+                <td class="title_1">
+                    發酵槽 F8
+                </td>
+                <td class="title_1">
+                    發酵槽 F9
+                </td>
+            </tr>
+            <tr>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_1">
+                    發酵槽 F10
+                </td>
+                <td class="title_1">
+                    發酵槽 F11
+                </td>
+                <td class="title_1">
+                    發酵槽 F12
+                </td>
+            </tr>
+        </table>
+
+        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
+            <tr>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_1">
+                    <a href="/camera_F" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_1">
+                    發酵出料儲豆槽 FO1
+                </td>
+                <td class="title_1">
+                    發酵出料儲豆槽 FO2
+                </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></td>
+                <td class="video_2">
+                    <a href="/camera_FCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+                <td class="video_2">
+                    <a href="/camera_FCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td></td>
+                <td class="title_2">
+                    發酵貨櫃內部
+                </td>
+                <td></td>
+                <td class="title_2">
+                    發酵貨櫃外部
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td colspan="5" style="color: darkgray;">
+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+                </td>
+            </tr>
+            <tr>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_FI1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵入料儲豆槽 FI1
+                </td>
+
+                <td class="video_2">
+                    <a href="/camera_F1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_FO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵出料儲豆槽 FO1
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F1
+                </td>
+                <td class="title_2">
+                    發酵槽 F2
+                </td>
+                <td class="title_2">
+                    發酵槽 F3
+                </td>
+            </tr>
+            <tr>
+                <td class="video_2">
+                    <a href="/camera_F4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F5" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F6" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F4
+                </td>
+                <td class="title_2">
+                    發酵槽 F5
+                </td>
+                <td class="title_2">
+                    發酵槽 F6
+                </td>
+            </tr>
+            <tr>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_FI2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵入料儲豆槽 FI2
+                </td>
+
+                <td class="video_2">
+                    <a href="/camera_F7" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F8" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F9" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2" rowspan="4">
+                    <a href="/camera_FO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵出料儲豆槽 FO2
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F7
+                </td>
+                <td class="title_2">
+                    發酵槽 F8
+                </td>
+                <td class="title_2">
+                    發酵槽 F9
+                </td>
+            </tr>
+            <tr>
+                <td class="video_2">
+                    <a href="/camera_F10" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F11" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_2">
+                    <a href="/camera_F12" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F10
+                </td>
+                <td class="title_2">
+                    發酵槽 F11
+                </td>
+                <td class="title_2">
+                    發酵槽 F12
+                </td>
+            </tr>
+        </table>
+
+        <br>
+        <br>
+        <hr>
+        <br>
+        <br>
+        
+        <center>0.65 × 0.65</center>
+
+        <table style="border: 0px grey solid; margin-right: auto; margin-left: auto; text-align: center;">
+            <tr>
+                <td></td>
+                <td class="video_22">
+                    <a href="/camera_FCargo_in" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+                <td class="video_22">
+                    <a href="/camera_FCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td></td>
+                <td class="title_2">
+                    發酵貨櫃內部
+                </td>
+                <td></td>
+                <td class="title_2">
+                    發酵貨櫃外部
+                </td>
+                <td></td>
+            </tr>
+            <tr>
+                <td colspan="5" style="color: darkgray;">
+                    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+                </td>
+            </tr>
+            <tr>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_FI1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵入料儲豆槽 FI1
+                </td>
+
+                <td class="video_22">
+                    <a href="/camera_F1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F3" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_FO1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵出料儲豆槽 FO1
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F1
+                </td>
+                <td class="title_2">
+                    發酵槽 F2
+                </td>
+                <td class="title_2">
+                    發酵槽 F3
+                </td>
+            </tr>
+            <tr>
+                <td class="video_22">
+                    <a href="/camera_F4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F5" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F6" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F4
+                </td>
+                <td class="title_2">
+                    發酵槽 F5
+                </td>
+                <td class="title_2">
+                    發酵槽 F6
+                </td>
+            </tr>
+            <tr>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_FI2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵入料儲豆槽 FI2
+                </td>
+
+                <td class="video_22">
+                    <a href="/camera_F7" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F8" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F9" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22" rowspan="4">
+                    <a href="/camera_FO2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <br>發酵出料儲豆槽 FO2
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F7
+                </td>
+                <td class="title_2">
+                    發酵槽 F8
+                </td>
+                <td class="title_2">
+                    發酵槽 F9
+                </td>
+            </tr>
+            <tr>
+                <td class="video_22">
+                    <a href="/camera_F10" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F11" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+                <td class="video_22">
+                    <a href="/camera_F12" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
+            </tr>
+            <tr>
+                <td class="title_2">
+                    發酵槽 F10
+                </td>
+                <td class="title_2">
+                    發酵槽 F11
+                </td>
+                <td class="title_2">
+                    發酵槽 F12
+                </td>
+            </tr>
+        </table>
+        
+        <br>
+        <br>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/camera_test.html

@@ -0,0 +1,656 @@
+<!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>
+        #four {
+            margin-bottom: 0px;
+        }
+
+        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);
+            if (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 == '發酵槽') {
+                $("#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 == '脫皮機') {
+                $("#PreviousPage").attr('href','/clean');
+                $("#PreviousPage").text('返回清洗貨櫃');
+                $("#NextPage").attr('href','/camera_clean');
+                $("#NextPage").text('前往清洗貨櫃總攝影機畫面');
+            }
+            
+        });
+    </script>
+
+
+</head>
+
+<body style="background-color: rgb(207, 207, 207);">
+    <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>
+
+            </div>
+        </div>
+    </div>
+-->
+    <center>1.2 * 1.2</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="288px" width="384px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="288px" width="384px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="288px" width="384px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="288px" width="384px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="288px" width="384px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="288px" width="384px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+    <br>
+    <br>
+    <br>
+    <hr>
+
+    <center>1.3 * 1.3</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="312px" width="416px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="312px" width="416px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="312px" width="416px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="312px" width="416px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="312px" width="416px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="312px" width="416px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+    <br>
+    <br>
+    <br>
+    <hr>
+
+    <center>1.35 * 1.35 (等比例高滿版)</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="324px" width="432px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="324px" width="432px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="324px" width="432px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="324px" width="432px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="324px" width="432px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="324px" width="432px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+    <br>
+    <br>
+    <br>
+    <hr>
+    
+    <center>1.4 * 1.4</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="336px" width="448px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="336px" width="448px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="336px" width="448px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="336px" width="448px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="336px" width="448px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="336px" width="448px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+    <br>
+    <br>
+    <br>
+    <hr>
+
+    <center>1.5 * 1.5</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="360px" width="480px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="360px" width="480px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="360px" width="480px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="360px" width="480px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="360px" width="480px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" height="360px" width="480px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+    <br>
+    <br>
+    <br>
+    <hr>
+
+    <center>1.55 * 1.55 (等比例寬滿版)</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="496px" height="372px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="496px" height="372px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="496px" height="372px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="496px" height="372px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="496px" height="372px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="496px" height="372px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+    <br>
+    <br>
+    <br>
+    <hr>
+
+    <center> 1對4 (寬2.34 * 高1.35 全滿版)</center>
+    <table border="1" style="margin: auto; font-size:18px; border:2px #f0f0f0 solid; margin-top: 10px; text-align: center;" cellpadding="3">
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="750px" height="325px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="750px" height="325px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="750px" height="325px">
+            </td>
+            <td>
+                <img src="../static/img/video_pic_3.png" id="four" width="750px" height="325px">
+            </td>
+        </tr>
+        <tr>
+            <td>
+                攝影機畫面
+            </td>
+            <td>
+                攝影機畫面
+            </td>
+        </tr>
+    </table>
+
+
+    <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>
+
+</body>
+
+</html>

app/templates/cargo1.html

@@ -0,0 +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>
+</html>

app/templates/cargo2.html

@@ -0,0 +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>
+</html>

app/templates/cargo2_actuator_tanks.html

@@ -0,0 +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>
+</html>

app/templates/cargo2_schedule_tanks.html

@@ -0,0 +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>
+</html>

app/templates/cargo2_sensor.html

@@ -0,0 +1,740 @@
+<!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">
+
+    <!--引入 echarts.js -->
+    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
+
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></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;
+        }
+
+
+        .flex {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+
+        .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: 20px;
+
+        }
+
+        .set-link {
+            width: 300px;
+            height: 100px;
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            color: #FFFFFF;
+            border-radius: 5px;
+            font-size: 36px;
+            margin-left: 5px;
+            margin-right: 5px;
+        }
+
+        .sensor_status {
+            width: 300px;
+            height: 250px;
+            background: #FFFFFF;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            color: #000000;
+            border-radius: 5px;
+            font-size: 24px;
+            margin: auto;
+
+        }
+
+
+        .div_title {
+            width: 100%;
+            height: 80px;
+            font-size: 1em;
+            font-weight: bold;
+            color: black;
+            margin: 0 auto;
+            display: table;
+            text-align: center;
+            transform: translate(0, 10%);
+        }
+
+        .td_in {
+            font-size: 30px;
+            margin-top: 10%;
+            border-radius: 15px;
+            text-align: center;
+            background-color: #C4C4C4;
+            width: 250px;
+            height: 150px;
+            margin: auto;
+            line-height: 150px;
+            cursor: pointer;
+        }
+
+        .show-info {
+            position: absolute;
+            background-color: #FFFFFF;
+            border: 1px solid #949494;
+            box-sizing: border-box;
+            z-index: 3;
+            left: 8%;
+        }
+
+        .show-info>h1 {
+            text-align: center;
+        }
+
+        .show-chart {
+            height: 500px;
+            border: 2px solid #FFF;
+            background: #C4C4C4;
+        }
+
+        .btn-input input {
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            width: 120px;
+            height: 58px;
+            text-align: center;
+            line-height: 58px;
+            font-size: 20px;
+            margin-top: 50px;
+            color: #FFFFFF;
+        }
+
+
+        @media(max-width:373px) {
+            .card {
+                margin-right: 0px;
+            }
+
+            .col {
+                padding-left: 0px;
+                padding-right: 0px;
+            }
+        }
+
+        @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">發酵槽{{params.tid}}</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-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>溫溼度</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('溫濕度')">{{params.tank_tem.tem}}
+                                        &#8451; </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
+                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>二氧化碳</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('二氧化碳')"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
+                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>酸鹼值</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('酸鹼值')">{{params.tank_ph.ph}}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
+                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>攝影機</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('攝影機')"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
+                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>大氣壓力</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('大氣壓力')"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
+                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>超音波</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('超音波')">{{params.tank_sonic.sonic}}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
+                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
+                            <div class="page-title text-center">
+                                <div class="sensor_status">
+                                    <div class="div_title" style="">
+                                        <label>EC值</label>
+                                    </div>
+                                    <div class="td_in" style="" onclick="ShowInfo('EC值')">{{params.tank_ec.ec}}</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div id="" class="show-info col-xl-10 col-lg-10 col-md-10 col-sm-10 col-xs-10"
+                            style="display: none;">
+                            <br>
+                            <h1></h1>
+                            <center>
+                                資料類型:
+                                <label><input type="checkbox" name="data-type" value="max">最大值</label>
+                                <label><input type="checkbox" name="data-type" value="avg">平均值</label>
+                                <label><input type="checkbox" name="data-type" value="min">最小值</label>
+                                <br>
+                                時間間隔:
+                                <select name="time-interval" class="text-right">
+                                    <option value="month">逐月</option>
+                                    <option value="day">逐日</option>
+                                    <option value="hour">逐時</option>
+                                </select>
+                                <span>從</span>
+                                <label for="querydate-start"></label><input id="querydate-start" type="date">
+                                <span>到</span>
+                                <label for="querydate-end"></label><input id="querydate-end" type="date">
+                                <span>為止</span>
+                                <input type="button" value="查詢" onclick="Echart('');">
+                            </center>
+                            <div class="row">
+                                <div class="col-1"></div>
+                                <div class="col-10 show-chart" style="margin-top: 10px;text-align:center;"></div>
+                                <div class="col-1"></div>
+                            </div>
+                            <div class="btn-input" style="text-align:center;">
+                                <input type="button" value="關閉" style="margin-left:0px;" onclick="CloseInfo()">
+                                <input class="" type="button" value="匯出">
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+</body>
+<script>
+    var all_datetime = 0;
+    var all_data = 0;
+    var data_name = 0;
+    var xAxis_data = 0;
+    var max_data = 0;
+    var min_data = 0;
+    var avg_data = 0;
+
+    // Benson：此段無畫圖表處, 先註解後續再解決 (有 Error)
+    // Rita： 2021/07/26 研究中
+
+
+    function Echart(evt) {
+        if (Number({{ params.tid }}) < 10) {
+            data_name = evt.substring(2);
+        } else {
+            data_name = evt.substring(3);
+        };
+
+        //將echarts圖形銷毀
+        $(".show-chart").removeAttr("_echarts_instance_").empty();
+
+        var sensor = evt.substring(2);
+        if (!$("input[value=avg]").prop('checked') && !$("input[value=min]").prop('checked') && !$("input[value=max]").prop('checked')) {
+            alert("請至少選擇一種資料類型!");
+            return false;
+        };
+
+        if ($("#querydate-start").val() == '' || $("#querydate-end").val() == '') {
+            alert("請選擇日期範圍!");
+            return false;
+        };
+        //基於準備好的dom，初始化echarts例項
+        var myChart = echarts.init(document.getElementsByClassName('show-chart')[0]);  // class="col-10 show-chart"
+
+        var date_start = $("#querydate-start").val();
+        var date_end = $("#querydate-end").val();
+        var avg = 0;
+        var max = 0;
+        var min = 0;
+        var time_interval = $("select[name=time-interval]").val();
+        var legend = new Array();
+        var color = new Array();
+        var series = new Array();
+
+
+        if ($("input[value=max]").prop('checked')) {
+            max = 1;
+            legend.push("最大值");
+            color.push("#1e88e5");      // 水藍色
+        };
+
+        if ($("input[value=avg]").prop('checked')) {
+            avg = 1;
+            legend.push("平均值");
+            color.push("#43a047");      // 草綠色
+        };
+
+        if ($("input[value=min]").prop('checked')) {
+            min = 1;
+            legend.push("最小值");
+            color.push("#e64a19");      // 橘紅色
+        };
+
+
+
+        var json = { 'evt': evt, 'avg': avg, 'max': max, 'min': min, 'time-interval': time_interval, 'date-start': date_start, 'date-end': date_end };
+
+        $.get('/history_data', json, function (resText) {
+
+            if (resText.max) {
+                var max_series = { 'name': '最大值', 
+                                    'type': 'line', 
+                                    'data': resText.max.map(function (item) { return item[1]; }), 
+                                    'itemStyle': { 'normal': { 'lineStyle': { 'color': '#1e88e5' } } }, };
+                series.push(max_series);        // 把上面的 dict 加入 series array 內
+                xAxis_data = resText.max.map(function (item) { return item[0]; });
+                max_data = resText.max.map(function (item) { return item[1]; });
+            };
+            if (resText.avg) {
+                var avg_series = { 'name': '平均值', 'type': 'line', 'data': resText.avg.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#43a047' } } }, };
+                series.push(avg_series);
+                xAxis_data = resText.avg.map(function (item) { return item[0]; });      
+                // console.log('xAxis_data' + xAxis_data)                               // 2021-07-09 10:00:00,2021-07-20 09:00:00,2021-07-22 15:00:00,2021-07-26 15:00:00,2021-07-26 16:00:00
+                avg_data = resText.avg.map(function (item) { return item[1]; });        
+                // console.log('avg_data' + avg_data)                                   // 91.0,98.0,11.0,15.2,30.5
+            };
+            if (resText.min) {
+                var min_series = { 'name': '最小值', 'type': 'line', 'data': resText.min.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#e64a19' } } }, };
+                series.push(min_series);
+                xAxis_data = resText.min.map(function (item) { return item[0]; });      // all
+                min_data = resText.min.map(function (item) { return item[1]; });        // min
+            };
+
+            //獲取日期內所有數據
+            all_datetime = resText.all.map(function (item) { return item[0]; });        // all
+            all_data = resText.all.map(function (item) { return item[1]; });            
+
+            //指定圖表的配置項和資料
+
+            option = {
+                title: {
+                    text: 'Data History',
+                    left: '1%'
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                color: color,
+                legend: {
+                    data: legend,
+                },
+/*
+                xAxis: {
+                    data: resText.map(function (item) {
+                        return item[0];
+                    })
+                },
+*/                
+                xAxis: {
+                    data: xAxis_data,
+                },
+                yAxis: {
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: ''
+                        }
+                    }
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: 'none'
+                        },
+                        dataView: { readOnly: false },
+                        magicType: { type: ['line', 'bar'] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                dataZoom: [{
+                    startValue: '2021-01-01'
+                }, {
+                    type: 'inside'
+                }],
+                series: series,
+/*
+                series: [
+                    {
+                        name: '最大值',
+                        type: 'line',
+                        data: resText.map(function (item) {
+                            return item[1];
+                        }),
+                        itemStyle: {
+                            normal: {
+                                lineStyle: {
+                                    color: '#1e88e5'
+                                }
+                            }
+                        },
+                    },
+                    {
+                        name: '平均值',
+                        type: 'line',
+                        data: [20.0, 20.0, 20.0, 20.0, 20.0, 20.0],
+                        itemStyle: {
+                            normal: {
+                                lineStyle: {
+                                    color: '#43a047'
+                                }
+                            }
+                        },
+                    },
+                    {
+                        name: '最小值',
+                        type: 'line',
+                        data: [15.0, 15.0, 15.0, 15.0, 15.0, 15.0],
+                        itemStyle: {
+                            normal: {
+                                lineStyle: {
+                                    color: '#e64a19'
+                                }
+                            }
+                        }
+                    },
+                ]
+*/
+            };
+
+            //使用剛指定的配置項和資料顯示圖表
+            myChart.setOption(option);
+
+
+        }, 'json');
+    };
+
+
+    //下載檔案函數
+    function downloadFile() {
+        //藉型別陣列建構的 blob 來建立 URL
+        let fileName = "fileName.csv";
+        //"\ufeff"解決打開CSV中文亂碼問題
+        const data = "\ufeff" + getData();
+        let blob = new Blob([data], {
+            type: 'text/csv,charset=UTF-8'
+        });
+        var href = URL.createObjectURL(blob);
+        // 從 Blob 取出資料
+        var link = document.createElement("a");
+        document.body.appendChild(link);
+        link.href = href;
+        link.download = fileName;
+        link.click();
+    };
+
+    //所有資料函數
+    function getData() {
+        var header = "日期," + data_name + "\n";
+        var data = "";
+        var length = all_datetime.length;
+
+        for (var i = 0; i < length; i++) {
+            data = data + all_datetime[i] + ',' + all_data[i] + '\n';
+        };
+
+        return header + data;
+    };
+
+
+    //最大最小平均資料函數
+    function getData() {
+        var header = data_name + "\n日期,";
+        if (max_data) {
+            console.log(max_data);
+            header = header + "最大值,";
+        };
+        if (avg_data) {
+            header = header + "平均值,";
+        };
+        if (min_data) {
+            header = header + "最小值,";
+        };
+        header = header + "\n";
+        var data = "";
+        var length = xAxis_data.length;
+
+        for (var i = 0; i < length; i++) {
+            data = data + xAxis_data[i] + ',';
+            if (max_data) {
+                data = data + max_data[i] + ',';
+            };
+            if (avg_data) {
+                data = data + avg_data[i] + ',';
+            };
+            if (min_data) {
+                data = data + min_data[i] + ',';
+            };
+            data = data + '\n';
+        };
+
+        return header + data;
+    };
+
+
+
+    function ShowInfo(sensor) {
+        $(".show-info").css('display', 'block');
+        $(".show-info h1").text(sensor);
+        $("input[value=查詢]").attr('onclick', 'Echart(\'{{params.tid}}' + '-' + sensor + '\')');
+        $("input[value=匯出]").attr('class', 'DownloadBtn');
+
+        let DownloadBtn = document.querySelector(".DownloadBtn");
+        DownloadBtn.addEventListener("click", downloadFile);
+
+    };
+
+    function CloseInfo() {
+        //將echarts圖形銷毀
+        $(".show-chart").removeAttr("_echarts_instance_").empty();
+        //將複選框已選定的移除
+        $("input[value=avg]").prop('checked', false);
+        $("input[value=min]").prop('checked', false);
+        $("input[value=max]").prop('checked', false);
+        //將時間間隔回到月
+        $("select[name=time-interval]").val('month');
+        //將已選好的日期移除
+        $("#querydate-start").val('');
+        $("#querydate-end").val('');
+        $(".show-info").css('display', 'none');
+    };
+
+
+
+</script>
+
+</html>

app/templates/cargo2_sensor_tanks.html

@@ -0,0 +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>
+</html>

app/templates/cargo3.html

@@ -0,0 +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>
+</html>

app/templates/cargo3_schedule - 0705_Benson備份.html

@@ -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>

app/templates/cargo3_schedule.html

@@ -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>

app/templates/cargo_list.html

@@ -0,0 +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>
+</html>

app/templates/chart.html

@@ -0,0 +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>
+
+</html>

app/templates/clean - 複製.html

@@ -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>

app/templates/clean.html

@@ -0,0 +1,830 @@
+<!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: 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;
+        }
+        .CO1_position {
+            position: absolute;
+            top: 135px;
+            left: 390px;
+            width: 100px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO2_position {
+            position: absolute;
+            top: 400px;
+            left: 390px;
+            width: 100px;
+            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;
+        }
+        .SO1_position {
+            position: absolute;
+            top: 135px;
+            left: 730px;
+            width: 100px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO2_position {
+            position: absolute;
+            top: 400px;
+            left: 730px;
+            width: 100px;
+            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;
+        }
+        .PO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1070px;
+            width: 100px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1070px;
+            width: 100px;
+            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;"></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="/peel_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="P_sensor_link" href="/peel_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="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/" + ptid);
+                $('#P_sensor_link').attr("href", "/peel_container/" + 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>

app/templates/ctrl_DI_Vacuum.html

@@ -0,0 +1,508 @@
+<!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)
+
+        $(function(){
+            $("#ctrl_DI_Vacuum_title").text('乾燥入料儲豆槽 DI' + tid + ' 真空吸料機')
+            $("#dry_input_page").text('乾燥入料儲豆槽 DI' + tid + ' 操作介面   ')
+            $('#dry_input_page').attr("href", "/dry_container_input/" + tid)
+            $("#coffee_title").text('DI' + 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>
+    <script>
+        // Rita 制動器運作
+
+        var tank_num = '{{tid}}';
+
+    </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="ctrl_DI_Vacuum_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
+            乾燥入料儲豆槽 DI_ 真空吸料機
+        </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 input_vacuum == 1 %}
+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
+                    {% elif input_vacuum == 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="inputVacuum_ON()"></td>
+            </tr>
+            <tr>
+                <td>關閉 真空吸料機</td>
+                <td><input type="button" value="OFF" onclick="inputVacuum_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="4">
+                    [入料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{UltraSonic}}</span> 公分<br>
+                </td>
+            </tr>
+            <tr>
+                <!--
+                <td rowspan="2">
+                    排程控制
+                </td>
+                -->
+                <td>
+                    指定高度入料
+                </td>
+                <td>
+                    儲豆槽內生豆入料高度&nbsp;
+                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">&nbsp;公分<br>
+                    吸料時間&nbsp;
+                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">&nbsp;秒<br>
+                    放料時間&nbsp;
+                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">&nbsp;秒<br>
+                    <span id="testing_in_vacuum_loop" style="color: #f00;"></span>
+                </td>
+                <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();
+
+
+                            if (testing_BeanIn_Height != 0) {
+                                console.log('以指定高度 ' + testing_BeanIn_Height + ' 入豆')
+                                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
+                                            $('#UltraSonic_t_status').text(present_Bean_height)
+                                            console.log('目前生豆高度: ' + present_Bean_height)
+
+                                            if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
+                                                if (testing_in_vacuum_in == 1) {
+                                                    step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / 100
+                                                } else if (testing_in_vacuum_in > 1) {
+                                                    step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / (220 * testing_in_vacuum_in)
+                                                } else {
+                                                    step = '請輸入 1 以上的正整數'
+                                                }
+
+                                                if (( 2 < testing_in_vacuum_in && testing_in_vacuum_in <= 3 && step < 1 ) ||
+                                                    ( 3 < testing_in_vacuum_in && testing_in_vacuum_in <= 7 && step < 2 ) || 
+                                                    ( 7 < testing_in_vacuum_in && testing_in_vacuum_in <=10 && step < 3 )) {
+                                                    $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
+                                                    // break 適用在 for、while 的迴圈中, 若不是迴圈則使用 return
+                                                    // return
+
+                                                    // aaa tankVacuum_ON()
+                                                    console.log('tankVacuum_ON')
+                                                    var time = new Date();
+                                                    while ((new Date() - time) < 2 * 1000) { };
+
+                                                    // aaa tankVacuum_OFF()
+                                                    console.log('tankVacuum_OFF')
+                                                    var time = new Date();
+                                                    while ((new Date() - time) < 2 * 1000) { };
+
+                                                    $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
+                                                    
+                                                } else {
+                                                    $('#testing_in_vacuum_loop').text('預估循環 ' + Math.ceil(step) + ' 次完成入料')
+                                    
+                                                    // aaa inputVacuum_ON()
+                                                    console.log('inputVacuum_ON')
+                                                    
+                                                    var time = new Date();
+                                                    while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
+
+                                                    // aaa 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('生豆已達指定高度！')
+                                                $('#testing_in_vacuum_loop').text('入料完成')
+                                            }
+                                            BeanIn_Process == 0;
+                                        },
+                                        error:function(thrownError){
+                                            console.log('Error: ' + thrownError)
+                                            BeanIn_Process = 0;
+                                        }
+                                    })
+                                };
+
+                            } else if (testing_BeanIn_Height == 0) {
+                                console.log('請輸入大於 0 的數值')
+                            }
+                            // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
+                        }
+                    </script>
+                </td>
+            </tr>
+            <tr>
+                <td>循環入料</td>
+                <td>
+                    吸料時間 &nbsp;
+                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">&nbsp;秒<br>
+                    放料時間 &nbsp;
+                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">&nbsp;秒<br>
+                    循環
+                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">&nbsp;次
+                </td>
+                <td>
+                    <button type="submit" class="btn btn-primary" onclick="inputVacuumTest()">循環入料</button><br>
+                    <script>
+                        function inputVacuumTest() {
+                            // 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();
+                            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>
+
+        <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/DI' + dtn, '', 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);
+                    }
+                }, '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>

app/templates/ctrl_DO_Vacuum.html

@@ -0,0 +1,505 @@
+<!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)
+
+        $(function(){
+            $("#ctrl_DO_Vacuum_title").text('乾燥出料儲豆槽 DO' + tid + ' 真空吸料機')
+            $("#dry_output_page").text('乾燥出料儲豆槽 DO' + tid + ' 操作介面   ')
+            $('#dry_output_page').attr("href", "/dry_container_input/" + tid)
+            $("#coffee_title").text('DO' + 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>
+    <script>
+        // Rita 制動器運作
+
+        var tank_num = '{{tid}}';
+    </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="ctrl_DO_Vacuum_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
+            乾燥出料儲豆槽 DO_ 真空吸料機
+        </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_vacuum == 1 %}
+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
+                    {% elif tank_vacuum == 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="outputVacuum_ON()"></td>
+            </tr>
+            <tr>
+                <td>關閉 真空吸料機</td>
+                <td><input type="button" value="OFF" onclick="outputVacuum_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="UltraSonic_t_status">{{UltraSonic}}</span> 公分<br>
+                </td>
+            </tr>
+            <tr>
+                <!--
+                <td rowspan="2">
+                    排程控制
+                </td>
+                -->
+                <td>
+                    指定高度入料
+                </td>
+                <td>
+                    儲豆槽內生豆入料高度&nbsp;
+                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">&nbsp;公分<br>
+                    吸料時間&nbsp;
+                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">&nbsp;秒<br>
+                    放料時間&nbsp;
+                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">&nbsp;秒<br>
+                    <span id="testing_in_vacuum_loop" style="color: #f00;"></span>
+                </td>
+                <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();
+
+
+                            if (testing_BeanIn_Height != 0) {
+                                console.log('以指定高度 ' + testing_BeanIn_Height + ' 入豆')
+                                var BeanIn_interval = setInterval(BeanInHeight, 5000);
+
+                                function BeanInHeight(){
+
+                                    if (BeanIn_Process == 1) {
+                                        return;
+                                    }
+
+                                    BeanIn_Process == 1;
+                                    $.ajax({
+                                        async:false,
+                                        type:"GET",
+                                        url:"/dry_output_UltraSonic_" + tank_num,
+                                        dataType:"json",
+                                        success:function(response){
+                                            var present_Bean_height = response.UltraSonic
+                                            $('#UltraSonic_t_status').text(present_Bean_height)
+                                            console.log('目前生豆高度: ' + present_Bean_height)
+
+                                            if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
+                                                if (testing_in_vacuum_in == 1) {
+                                                    step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / 100
+                                                } else if (testing_in_vacuum_in > 1) {
+                                                    step = (parseInt(testing_BeanIn_Height) - parseInt(present_Bean_height)) * 871.2 / (220 * testing_in_vacuum_in)
+                                                } else {
+                                                    step = '請輸入 1 以上的正整數'
+                                                }
+
+                                                if (( 2 < testing_in_vacuum_in && testing_in_vacuum_in <= 3 && step < 1 ) ||
+                                                    ( 3 < testing_in_vacuum_in && testing_in_vacuum_in <= 7 && step < 2 ) || 
+                                                    ( 7 < testing_in_vacuum_in && testing_in_vacuum_in <=10 && step < 3 )) {
+                                                    $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
+                                                    // break 適用在 for、while 的迴圈中, 若不是迴圈則使用 return
+                                                    // return
+
+                                                    // aaa tankVacuum_ON()
+                                                    console.log('tankVacuum_ON')
+                                                    var time = new Date();
+                                                    while ((new Date() - time) < 2 * 1000) { };
+
+                                                    // aaa tankVacuum_OFF()
+                                                    console.log('tankVacuum_OFF')
+                                                    var time = new Date();
+                                                    while ((new Date() - time) < 2 * 1000) { };
+
+                                                    $('#testing_in_vacuum_loop').text('改以小量吸料時間入料')
+                                                    
+                                                } else {
+                                                    $('#testing_in_vacuum_loop').text('預估循環 ' + Math.ceil(step) + ' 次完成入料')
+                                    
+                                                    // aaa outputVacuum_ON()
+                                                    console.log('outputVacuum_ON')
+                                                    
+                                                    var time = new Date();
+                                                    while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
+
+                                                    // aaa 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('生豆已達指定高度！')
+                                                $('#testing_in_vacuum_loop').text('入料完成')
+                                            }
+                                            BeanIn_Process == 0;
+                                        },
+                                        error:function(thrownError){
+                                            console.log('Error: ' + thrownError)
+                                            BeanIn_Process = 0;
+                                        }
+                                    })
+                                };
+
+                            } else if (testing_BeanIn_Height == 0) {
+                                console.log('請輸入大於 0 的數值')
+                            }
+                            // WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000);
+                        }
+                    </script>
+                </td>
+            </tr>
+            <tr>
+                <td>循環入料</td>
+                <td>
+                    吸料時間 &nbsp;
+                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">&nbsp;秒<br>
+                    放料時間 &nbsp;
+                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">&nbsp;秒<br>
+                    循環
+                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">&nbsp;次
+                </td>
+                <td>
+                    <button type="submit" class="btn btn-primary" onclick="inputVacuumTest()">循環入料</button><br>
+                    <script>
+                        function inputVacuumTest() {
+                            // 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();
+                            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>
+
+        <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/DI' + dtn, '', 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);
+                    }
+                }, '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>

app/templates/ctrl_D_Blower.html

@@ -0,0 +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>
+
+</html>

app/templates/ctrl_D_DiskValve.html

@@ -0,0 +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>
+
+</html>

app/templates/ctrl_D_Heater1.html

@@ -0,0 +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>
+
+</html>

app/templates/ctrl_D_Heater2.html

@@ -0,0 +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>
+
+</html>