1229 version

app/__init__.py

@@ -3,13 +3,15 @@
 # 1.構建Flask的應用以及各種配置
 #2.構建SQLAlchemy的應用
 
-from flask import Flask
+from flask import Flask, g, request
 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
+from flask_babel import Babel
+# from werkzeug.wrappers import Request
 
 
 #綠化(綠色線程)所有系統模組，實現IO多路複用
@@ -17,7 +19,38 @@ from flask_migrate import Migrate
 
 pymysql.install_as_MySQLdb()
 
-# db = SQLAlchemy()
+# # db = SQLAlchemy()
+# def register_i18n(app):
+#     """Register i18n with the Flask application."""
+#     defalut_language_str = app.config['DEFAULT_LANGUAGE']
+#     support_language_list = app.config['SUPPORTED_LANGUAGES']
+
+#     # 1. 取得子資料夾路徑 land_code
+#     @app.url_value_preprocessor
+#     def get_lang_code(endpoint, values):
+#         if values is not None:
+#             g.lang_code = values.pop('lang_code', defalut_language_str)
+
+#     # 2. 確認 config 內包含 lang_code
+#     @app.before_request
+#     def ensure_lang_support():
+#         lang_code = g.get('lang_code', None)
+#         if lang_code and lang_code not in support_language_list:
+#             g.lang_code = request.accept_languages.best_match(support_language_list)
+
+#     # 3. 設定多語系
+#     @app.localeselector
+#     def get_locale():
+#         return g.get('lang_code')
+
+#     # 4. 確認在 1. pop lang_code 參數後的 lang_code 值
+#     @app.url_defaults
+#     def set_langrage_code(endpoint, values):
+#         if 'lang_code' in values or not g.lang_code:
+#             return
+#         if app.url_map.is_endpoint_expecting(endpoint, 'lang_code'):
+#             values['lang_code'] = g.lang_code
+
 
 def create_app():
     app = Flask(__name__)
@@ -67,7 +100,17 @@ def create_app():
     # 初始化Flask-Migrate擴展
     migrate = Migrate(app, db)
 
+    app.config['BABEL_DEFAULT_LOCALE'] = 'zh'
+    app.config['BABEL_DEFAULT_TIMEZONE'] = 'UTC'
+    app.config['LANGUAGES'] = ['en', 'zh']
+
+    babel = Babel(app)
 
+    @babel.localeselector
+    def get_locale():
+        return request.accept_languages.best_match(app.config['LANGUAGES'])
+
+   
 
     #用來使用flask-migrate數據遷移使用，如要用在把下面模型類註釋消掉，並且將main裡的from coffee_manage import mqtt,db註釋掉(因會報導入錯誤)
     # # 用戶表
@@ -298,4 +341,8 @@ def create_app():
     from .user import user as user_blueprint
     app.register_blueprint(user_blueprint)
 
+    # Rita 將lang藍圖程序與app關聯到一起
+    # from .main import main
+    # app.register_blueprint(main, url_prefix='/<lang_code>')
+
     return app, db, mqtt

app/__init__1221.py

@@ -0,0 +1,341 @@
+#對整個應用做初始化操作
+#主要工作：
+# 1.構建Flask的應用以及各種配置
+#2.構建SQLAlchemy的應用
+
+from flask import Flask, g
+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
+from flask_babel import Babel
+from werkzeug.wrappers import request
+
+
+#綠化(綠色線程)所有系統模組，實現IO多路複用
+# eventlet.monkey_patch()
+
+pymysql.install_as_MySQLdb()
+
+
+
+def register_i18n(app):
+    """Register i18n with the Flask application."""
+    defalut_language_str = app.config['DEFAULT_LANGUAGE']
+    support_language_list = app.config['SUPPORTED_LANGUAGES']
+
+    # 1. 取得子資料夾路徑 land_code
+    @app.url_value_preprocessor
+    def get_lang_code(endpoint, values):
+        if values is not None:
+            g.lang_code = values.pop('lang_code', defalut_language_str)
+
+    # 2. 確認 config 內包含 lang_code
+    @app.before_request
+    def ensure_lang_support():
+        lang_code = g.get('lang_code', None)
+        if lang_code and lang_code not in support_language_list:
+            g.lang_code = request.accept_languages.best_match(support_language_list)
+
+    # 3. 設定多語系
+    @app.localeselector
+    def get_locale():
+        return g.get('lang_code')
+
+    # 4. 確認在 1. pop lang_code 參數後的 lang_code 值
+    @app.url_defaults
+    def set_langrage_code(endpoint, values):
+        if 'lang_code' in values or not g.lang_code:
+            return
+        if app.url_map.is_endpoint_expecting(endpoint, 'lang_code'):
+            values['lang_code'] = g.lang_code
+
+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)
+
+    babel = Babel()
+    register_blueprints(app)
+    register_extensions(app)
+    register_i18n(app)
+
+    #用來使用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)
+
+    # Rita 將lang藍圖程序與app關聯到一起
+    from .main import main
+    app.register_blueprint(main, url_prefix='/<lang_code>')
+
+    return app, db, mqtt

app/babel.cfg

@@ -0,0 +1,3 @@
+[python: app/**.py]
+[jinja2: **/templates/**.html]
+extensions=jinja2.ext.autoescape,jinja2.ext.with_

app/config.py

@@ -0,0 +1 @@
+LANGUAGES = ['en', 'zh']

app/main/mqtt.py

@@ -42,15 +42,17 @@ class MQTT(object):
 
             payload = json.loads(msg.payload.decode('utf-8'))
             self.res = payload
-            print('self.res = payload :', payload)
+            print('self.res = payload :', payload)                                          # check! 11/16 從硬體發出這邊接收到的訊息
             # 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'}
+        # self.command = {'tank-number':'1', 'command':'tank_motor_status', 'value':'on'}
+        self.command = {'tank-number':'', 'command':'coffee_mqtt_restart', 'value':''}
 
         def thread_job(self):
+            # 設定連線設定動作
             self.client.on_connect = on_connect
             # 設定接收訊息的動作
             self.client.on_message = on_message

app/messages.pot

@@ -0,0 +1,27 @@
+# Translations template for PROJECT.
+# Copyright (C) 2021 ORGANIZATION
+# This file is distributed under the same license as the PROJECT project.
+# FIRST AUTHOR <EMAIL@ADDRESS>, 2021.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PROJECT VERSION\n"
+"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
+"POT-Creation-Date: 2021-12-21 17:22+0800\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Generated-By: Babel 2.9.1\n"
+
+#: templates/index.html:261
+msgid "Hello World!"
+msgstr ""
+
+#: templates/index.html:262
+msgid "My name is Max"
+msgstr ""
+

app/models.py

@@ -86,23 +86,25 @@ class set_dry_input(db.Model):
     # 乾燥桶_咖啡豆高度
     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
+#乾燥桶_致動器_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)
+    threewayvalve_input = db.Column(db.Integer, nullable=False)
+    threewayvalve_bean = 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)
+    solenoid_outer_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)
@@ -110,8 +112,7 @@ class dry_tank_brake(db.Model):
     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)
@@ -127,7 +128,7 @@ class ferment_input_UltraSonic(db.Model):
     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)
@@ -212,7 +213,14 @@ class ferment_tank_PressureWaterLevel(db.Model):
     tank_num = db.Column(db.Text, nullable=False)
     PressureWaterLevel = db.Column(db.Text, nullable=False)
 
-# 發酵槽_制動器
+# 發酵槽_感測器_馬達編碼器
+class ferment_tank_motorEncoder(db.Model):
+    __tablename__ = 'ferment_tank_motorEncoder'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    motorEncoder = 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)
@@ -220,12 +228,12 @@ class ferment_tank_actuator(db.Model):
     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_pump = 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)
+    solenoid_tank_water_out = 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)
@@ -240,7 +248,7 @@ class ferment_output_UltraSonic(db.Model):
     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)
@@ -291,16 +299,41 @@ class dry_container_status(db.Model):
     Dry_Output_1 = db.Column(db.Text, nullable=False)
     Dry_Output_2 = db.Column(db.Text, nullable=False)
 
+# 乾燥槽_乾燥貨櫃自動化狀態判斷
+class clean_container_status(db.Model):
+    __tablename__ = 'clean_container_status'
+    sn = db.Column(db.Integer, primary_key=True)
+    datetime = db.Column(db.DateTime, nullable=False)
+    Clean_Input_1 = db.Column(db.Text, nullable=False)
+    Clean_Input_2 = db.Column(db.Text, nullable=False)
+    Clean_Tank_1 = db.Column(db.Text, nullable=False)
+    Clean_Tank_2 = db.Column(db.Text, nullable=False)
+    Clean_Tank_3 = db.Column(db.Text, nullable=False)
+    Clean_Tank_4 = db.Column(db.Text, nullable=False)
+    ColorSelect_Input_1 = db.Column(db.Text, nullable=False)
+    ColorSelect_Input_2 = db.Column(db.Text, nullable=False)
+    ColorSelect_Tank_1 = db.Column(db.Text, nullable=False)
+    ColorSelect_Tank_2 = db.Column(db.Text, nullable=False)
+    ColorSelect_Output_g1 = db.Column(db.Text, nullable=False)
+    ColorSelect_Output_b1 = db.Column(db.Text, nullable=False)
+    ColorSelect_Output_g2 = db.Column(db.Text, nullable=False)
+    ColorSelect_Output_b2 = db.Column(db.Text, nullable=False)
+    Peel_Tank_1 = db.Column(db.Text, nullable=False)
+    Peel_Tank_2 = db.Column(db.Text, nullable=False)
+    Peel_Output_1 = db.Column(db.Text, nullable=False)
+    Peel_Output_2 = db.Column(db.Text, nullable=False)
+    Peel_Output_b1 = 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)
 
-# 清洗浮選槽_制動器
+# 清洗浮選槽_致動器 (old)
 class clean_tank_actuator(db.Model):
     __tablename__ = 'clean_tank_actuator'
     datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
@@ -313,7 +346,24 @@ class clean_tank_actuator(db.Model):
     solenoid_waterL4L5 = db.Column(db.Integer, nullable=False)
     stepping_motor = db.Column(db.Text, nullable=False)
 
-# 清洗浮選槽_清洗貨櫃出料儲豆槽_制動器
+# 清洗浮選槽_致動器 (new)
+class cleann_tank_actuator(db.Model):
+    __tablename__ = 'cleann_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)
+    motor = db.Column(db.Integer, nullable=False)
+    solenoid_reclaimed_in = db.Column(db.Integer, nullable=False)
+    solenoid_water_in = db.Column(db.Integer, nullable=False)
+    pump_water_in = db.Column(db.Integer, nullable=False)
+    solenoid_water_out = db.Column(db.Integer, nullable=False)
+    solenoid_reclaimed_out = db.Column(db.Integer, nullable=False)
+    solenoid_disinfect = db.Column(db.Integer, nullable=False)
+    pump_disinfect = db.Column(db.Integer, nullable=False)
+    diskvalve = db.Column(db.Integer, nullable=False)
+
+# 清洗浮選槽_清洗貨櫃出料儲豆槽_致動器
 class clean_output_actuator(db.Model):
     __tablename__ = 'clean_output_actuator'
     datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
@@ -327,14 +377,32 @@ class clean_tank_UltraSonic(db.Model):
     tank_num = db.Column(db.Text, nullable=False)
     UltraSonic = db.Column(db.Text, nullable=False)
 
-# 脫皮機_清洗貨櫃入料儲豆槽_制動器
+class clean_tank_Encoder(db.Model):
+    __tablename__ = 'clean_tank_Encoder'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    Encoder = db.Column(db.Text, nullable=False)
+
+class clean_tank_Turbidity(db.Model):
+    __tablename__ = 'clean_tank_Turbidity'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    tankTurbidity = db.Column(db.Text, nullable=False)
+
+class clean_filter_Turbidity(db.Model):
+    __tablename__ = 'clean_filter_Turbidity'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    filterTurbidity = 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)
@@ -342,21 +410,62 @@ class peel_tank_actuator(db.Model):
     vacuum = db.Column(db.Integer, nullable=False)
     motor = db.Column(db.Integer, nullable=False)
 
+# 脫皮機_感測器
+class peel_output_UltraSonic(db.Model):
+    __tablename__ = 'peel_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 peel_output_motorEncoder(db.Model):
+    __tablename__ = 'peel_output_motorEncoder'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    motorEncoder = db.Column(db.Text, 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 colorselect_tank_actuator(db.Model):
+    __tablename__ = 'colorselect_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)
+    nozzle = db.Column(db.Integer, nullable=False)
+    
+class colorselect_tank_color(db.Model):
+    __tablename__ = 'colorselect_tank_color'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    color = db.Column(db.Integer, nullable=False)
+
+class colorselect_tank_UltraSonic(db.Model):
+    __tablename__ = 'colorselect_tank_UltraSonic'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    UltraSonic = db.Column(db.Integer, nullable=False)
+
+# 中水桶_致動器
+class reclaimed_tank_actuator(db.Model):
+    __tablename__ = 'reclaimed_tank_actuator'
+    datetime = db.Column(db.DateTime, nullable=False, primary_key=True)
+    tank_num = db.Column(db.Text, nullable=False)
+    solenoid_water_in = db.Column(db.Integer, nullable=False)
+    solenoid_water_out = db.Column(db.Integer, nullable=False)
+    solenoid_reclaimed_out = db.Column(db.Integer, nullable=False)
+    pump_reclaimed_out = db.Column(db.Integer, nullable=False)
 
 # ////////////////////////////////////////////////////////////////////////////////
 

app/static/css/FermentContainerTank_1117.css

@@ -0,0 +1,207 @@
+.footer{
+    position: absolute;
+    width: 100%;
+    background-color: #eee;
+    text-align: center;
+}
+
+body {
+    margin: 0;
+}
+
+input[type="button"] {
+    padding: 4px 15px;
+    background: #f3f3f3;
+    border: 0 none;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+
+}
+.navbar-dark .navbar-nav .nav-link {
+    color: white;
+    cursor: pointer;
+    text-decoration: none;
+    width: 110px;
+    height: 46px;
+}
+
+.nav-top {
+    line-height: 40px;
+    background-color: #C4C4C4;
+}
+
+.website_title {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 30px;
+    color: #000000;
+}
+
+.navbar-nav>li {
+    float: none;
+    display: inline-block;
+    width: 100px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.navbar-nav>li a {
+    font-size: 20px;
+}
+
+.main-page {
+    margin-top: 200px;
+}
+
+.page-title {
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 36px;
+}
+
+
+.flex {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.set-link {
+    display: inline-block;
+    width: 350px;
+    height: 100px;
+    line-height: 100px;
+    background: #008CBA;
+    border: 1px solid #CFCFCF;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    border-radius: 10px;
+    font-size: 36px;
+}
+
+.cmn-toggle {
+    position: absolute;
+    margin-left: 0px;
+    visibility: hidden;
+}
+
+.cmn-toggle+label {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+}
+
+input.cmn-toggle-round-flat+label {
+    padding: 2px;
+    width: 60px;
+    height: 30px;
+    background-color: #C0C0C0;
+    border-radius: 60px;
+    transition: background 0.4s;
+}
+
+input.cmn-toggle-round-flat+label:before,
+input.cmn-toggle-round-flat+label:after {
+    display: block;
+    position: absolute;
+    content: "";
+}
+
+input.cmn-toggle-round-flat+label:before {
+    top: 2px;
+    left: 2px;
+    bottom: 2px;
+    right: 2px;
+    background-color: #fff;
+    border-radius: 60px;
+    transition: background 0.4s;
+}
+
+input.cmn-toggle-round-flat+label:after {
+    top: 4px;
+    left: 4px;
+    bottom: 4px;
+    width: 24px;
+    background-color: #dddddd;
+    border-radius: 52px;
+    transition: margin 0.4s, background 0.4s;
+}
+
+input.cmn-toggle-round-flat:checked+label {
+    background-color: #C0C0C0;
+}
+
+input.cmn-toggle-round-flat:checked+label:after {
+    margin-left: 27px;
+    background-color: #008CBA;
+}
+
+@media(max-width:373px) {
+    .card {
+        margin-right: 0px;
+    }
+
+    .set-link {
+        width: 250px;
+    }
+}
+
+@media(max-width:577px) {}
+
+@media(min-width:576px) {}
+
+@media(min-width:768px) {
+    .navbar-nav>li {
+        margin-left: 0px;
+    }
+
+    .navbar-nav .li-block {
+        display: none;
+    }
+}
+
+@media(min-width:991px) {
+    .navbar-nav>li {
+        margin-left: 20px;
+    }
+
+    .navbar-nav .li-block {
+        display: none;
+    }
+}
+
+@media(min-width:1200px) {
+    .navbar-nav>li {
+        margin-left: 50px;
+    }
+
+    .navbar-nav .li-block {
+        display: inline-block;
+        width: 100px;
+    }
+}
+
+@media(min-width:1400px) {
+    .navbar-nav .li-block {
+        display: inline-block;
+        width: 200px;
+    }
+}
+
+
+@media(min-width:1689px) {
+    .navbar-nav>li {
+        margin-left: 50px;
+    }
+
+    .navbar-nav .li-block {
+        display: inline-block;
+        width: 500px;
+    }
+}

app/static/js/dry_function.js

@@ -207,6 +207,74 @@ function tankThreeWayValve_OFF() {
     }, 'text')
     // window.location.reload();
 }
+function tankThreeWayValveInput(params) {
+    if (params == '1') {
+        var data = { "tank_num": "D" + tank_num, "command": "tank_threewayvalve_input_status", "value": "on" };
+    } else if (params == '0') {
+        var data = { "tank_num": "D" + tank_num, "command": "tank_threewayvalve_input_status", "value": "off" };
+    } else {
+        var status = "off";
+        var check = $("input[name=tank_threewayvalve_input_status]:checked");
+        if (check.length > 0) {
+            status = "on";
+            $("#cmn-toggle-08").prop('checked', false);
+            if (!confirm("你確定要開啟入料三通閥嗎?")) {
+                return false;
+            };
+        } else {
+            $("#cmn-toggle-08").prop('checked', true);
+            if (!confirm("你確定要關閉入料三通閥嗎?")) {
+                return false;
+            };
+        };
+        var data = { "tank_num": "D" + tank_num, "command": "tank_threewayvalve_input_status", "value": status };
+    }
+    $.post('/mqtt/{{tid}}', data, function (res) {
+        console.log('data:', data)
+        if (res == 'on') {
+            $("#cmn-toggle-08").prop('checked', true);
+        } else if (res == 'off') {
+            $("#cmn-toggle-08").prop('checked', false);
+        } else {
+            console.log('res error')
+        };
+    }, 'text')
+}
+
+function tankThreeWayValveBean(params) {
+    if (params == '1') {
+        var data = { "tank_num": "D" + tank_num, "command": "tank_threewayvalve_bean_status", "value": "on" };
+    } else if (params == '0') {
+        var data = { "tank_num": "D" + tank_num, "command": "tank_threewayvalve_bean_status", "value": "off" };
+    } else {
+        var status = "off";
+        var check = $("input[name=tank_threewayvalve_bean_status]:checked");
+        if (check.length > 0) {
+            status = "on";
+            $("#cmn-toggle-38").prop('checked', false);
+            if (!confirm("你確定要開啟測豆三通閥嗎?")) {
+                return false;
+            };
+        } else {
+            $("#cmn-toggle-38").prop('checked', true);
+            if (!confirm("你確定要關閉測豆三通閥嗎?")) {
+                return false;
+            };
+        };
+        var data = { "tank_num": "D" + tank_num, "command": "tank_threewayvalve_bean_status", "value": status };
+    }
+    $.post('/mqtt/{{tid}}', data, function (res) {
+        console.log('data:', data)
+        if (res == 'on') {
+            $("#cmn-toggle-38").prop('checked', true);
+        } else if (res == 'off') {
+            $("#cmn-toggle-38").prop('checked', false);
+        } else {
+            console.log('res error')
+        };
+    }, 'text')
+}
+
 // Benson cargo2_actuator.html 控制蝴蝶閥函數 (START)
 function tankDiskValve() {
     //<!--setInterval(Relay,10000);-->
@@ -819,7 +887,7 @@ function tankTemp1Enable() {
     // window.location.reload();
 };
 function tankTemp1Enable_ON() {
-    var data = { "tank_num": "D" + tank_num, "command": "temp1_enable", "value": "on" };
+    var data = { "tank_num": "D" + tank_num, "command": "tank_temp_enable", "value": "on" };
     $.post('/mqtt/' + tank_num, data, function (res) {
         console.log('data:', data)
         if (res == 'on') {
@@ -909,22 +977,25 @@ function ChangeTemp1() {
 };
 
 // Rita 設定溫度時直接開啟溫控開關
-function setTemp1() {
-    var temp_data = $("input[id=tank_temp1_data]").val();
+function setTemp1(temp_data, temp_duration) {
+    // var temp_data = $("input[id=tank_temp1_data]").val();
     if (temp_data == '') {
         alert("請先輸入設定溫度!");
         return false;
+    } else if (temp_duration == '') {
+        alert("請先輸入持溫時間!");
+        return false;
     }
-    var value = "0";
+    // var value = "0";
 
-    value = temp_data;
-    if (!confirm("你確定要設定內桶溫度為 " + temp_data + " ℃ 嗎？")) {
-        return false;
-    };
+    // var value = temp_data;
+    // if (!confirm("你確定要設定內桶溫度為 " + temp_data + " ℃ 嗎？")) {
+    //     return false;
+    // };
 
     tankTemp1Enable_ON()
 
-    var data = { "tank_num": "D" + tank_num, "command": "temp1", "value": temp_data };
+    var data = { "tank_num": "D" + tank_num, "command": "temp1", "value": temp_data, "duration": temp_duration };
     $.post('/mqtt/' + tank_num, data, function (res) {
         console.log('data:', data)
         if (res == 'on') {

app/static/js/ferment_function.js

@@ -479,13 +479,13 @@ function tankSolenoidWaterIn() {
     if (check.length > 0) {
         status = "on";
         $("#cmn-toggle-50").prop('checked', false);
-        if (!confirm("你確定要開啟\"桶內\"進水電磁閥嗎?")) {
+        if (!confirm("你確定要開啟\"桶內進水\"電磁閥嗎?")) {
             return false;
         };
 
     } else {
         $("#cmn-toggle-50").prop('checked', true);
-        if (!confirm("你確定要關閉\"桶內\"進水電磁閥嗎?")) {
+        if (!confirm("你確定要關閉\"桶內進水\"電磁閥嗎?")) {
             return false;
         };
     };
@@ -495,10 +495,10 @@ function tankSolenoidWaterIn() {
         console.log('data:', data)
         if (res == 'on') {
             $("#cmn-toggle-50").prop('checked', true);
-            setTimeout("alert('\"桶內\"進水電磁閥_開啟成功!')", 500);
+            setTimeout("alert('\"桶內進水\"電磁閥_開啟成功!')", 500);
         } else if (res == 'off') {
             $("#cmn-toggle-50").prop('checked', false);
-            setTimeout("alert('\"桶內\"進水電磁閥_關閉成功!')", 500);
+            setTimeout("alert('\"桶內進水\"電磁閥_關閉成功!')", 500);
         } else {
             alert(res);
         };
@@ -539,6 +539,71 @@ function tankSolenoidWaterIn_OFF() {
     // setTimeout(function () { location.reload(); }, 500);
 };
 
+// 電磁閥 桶內排水
+function tankSolenoidWaterOut() {
+    var status = "off";
+    var check = $("input[name=tank_solenoid_water_out_status]:checked");
+    //大於0代表有被選中
+    if (check.length > 0) {
+        status = "on";
+        $("#cmn-toggle-53").prop('checked', false);
+        if (!confirm("你確定要開啟\"桶內排水\"電磁閥嗎?")) {
+            return false;
+        };
+
+    } else {
+        $("#cmn-toggle-53").prop('checked', true);
+        if (!confirm("你確定要關閉\"桶內排水\"電磁閥嗎?")) {
+            return false;
+        };
+    };
+
+    var data = { "tank_num": "F" + tank_num, "command": "tank_solenoid_water_out_status", "value": status };
+    $.post('/mqtt/' + tank_num, data, function (res) {
+        console.log('data:', data)
+        if (res == 'on') {
+            $("#cmn-toggle-53").prop('checked', true);
+            setTimeout("alert('\"桶內排水\"電磁閥_開啟成功!')", 500);
+        } else if (res == 'off') {
+            $("#cmn-toggle-53").prop('checked', false);
+            setTimeout("alert('\"桶內排水\"電磁閥_關閉成功!')", 500);
+        } else {
+            alert(res);
+        };
+    }, 'text')
+    // setTimeout(function () { location.reload(); }, 500);
+};
+
+function tankSolenoidWaterOut_ON() {
+    var data = { "tank_num": "F" + tank_num, "command": "tank_solenoid_water_out_status", "value": "on" };
+    $.post('/mqtt/' + tank_num, data, function (res) {
+        console.log('data:', data)
+        if (res == 'on') {
+            $("#cmn-toggle-53").prop('checked', true);
+        } else if (res == 'off') {
+            $("#cmn-toggle-53").prop('checked', false);
+        } else {
+            alert(res);
+        };
+    }, 'text')
+    // setTimeout(function () { location.reload(); }, 500);
+};
+
+function tankSolenoidWaterOut_OFF() {
+    var data = { "tank_num": "F" + tank_num, "command": "tank_solenoid_water_out_status", "value": "off" };
+    $.post('/mqtt/' + tank_num, data, function (res) {
+        console.log('data:', data)
+        if (res == 'on') {
+            $("#cmn-toggle-53").prop('checked', true);
+        } else if (res == 'off') {
+            $("#cmn-toggle-53").prop('checked', false);
+        } else {
+            alert(res);
+        };
+    }, 'text')
+    // setTimeout(function () { location.reload(); }, 500);
+};
+
 
 // 感測器用 pump 雙核隔膜泵
 function tankPumpSensor() {
@@ -1100,16 +1165,19 @@ function tankTemp() {
     // setTimeout(function () { location.reload(); }, 500);
 };
 
-function setTemp() {
-    var temp_data = $("input[id=tank_temp_data]").val();
+function setTemp(temp_data, temp_duration) {
+    // var temp_data = $("input[id=tank_temp_data]").val();
     if (temp_data == '') {
         alert("請先輸入設定溫度!");
         return false;
+    } else if (temp_duration == '') {
+        alert("請先輸入持溫時間!");
+        return false;
     }
 
     tankTempEnable_ON()
 
-    var data = { "tank_num": "F" + tank_num, "command": "tank_temp_status", "value": temp_data };
+    var data = { "tank_num": "F" + tank_num, "command": "tank_temp_status", "value": temp_data, "duration": temp_duration};
     $.post('/mqtt/' + tank_num, data, function (res) {
         console.log('data:', data)
         if (res == 'on') {

app/templates/camera.html

@@ -221,8 +221,8 @@
         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 + "攝影機畫面");
+            $("#coffee_title_pc").text(tid + " " + camera_title + "攝影機畫面");
+            $("#coffee_title_phone").text("攝影機_" + camera_title + " " + tid);
 /*
             if (camera_title == '乾燥出料儲豆槽' | camera_title == '乾燥入料儲豆槽' | camera_title == '乾燥槽' | 
                 camera_title == '乾燥貨櫃內部' | camera_title == '乾燥貨櫃外部') {
@@ -252,59 +252,60 @@
 </head>
 
 <body>
-    <div id="coffee_header">
-        {% include 'header.html' %}
-    </div>
+    <div id="wrapper">
+        <div id="coffee_header">
+            {% include 'header.html' %}
+        </div>
 
-<!--
-    <div style="text-align: left;">
-        <a id="PreviousPage" href="" style="float: left;">________________</a>
-    </div>
-    <div style="text-align: right;">
-        <a id="NextPage" href="" style="float: right;">________________</a>
-    </div>
+    <!--
+        <div 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 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>
-                <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);
+                    <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;
                         }
-                        urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
-                        img3.src = urlObject3;
-                    }
-                </script>
+                    </script>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div id="coffee_footer">
-        {% include 'footer.html' %}
+        <div id="coffee_footer">
+            {% include 'footer.html' %}
+        </div>
     </div>
-
 </body>
 
 </html>

app/templates/camera_clean.html

@@ -27,7 +27,8 @@
         var WebRestart
         // WebRestart = setTimeout(function () { location.reload() }, 10000);
         $(document).ready(function (){
-            $("#coffee_title").text("清洗貨櫃攝影機");
+            $("#coffee_title_pc").text("清洗貨櫃攝影機");
+            $("#coffee_title_phone").text("清洗貨櫃攝影機");
         });
     </script>
     <style>
@@ -62,21 +63,6 @@
             <!-- 匯入共同使用的 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>
 
@@ -91,7 +77,9 @@
                 <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 class="video_32">
+                    <a href="/camera_R1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
                 <td></td>
             </tr>
             <tr>
@@ -103,7 +91,9 @@
                 <td class="title_32">
                     清洗貨櫃外部
                 </td>
-                <td></td>
+                <td class="title_32">
+                    中水桶
+                </td>
                 <td></td>
             </tr>
             <tr>
@@ -116,7 +106,7 @@
                     <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>
+                    <a href="/camera_C2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
                 </td>
                 <td class="video_32">
                     <a href="/camera_S1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
@@ -136,7 +126,7 @@
                     清洗浮選槽 C1
                 </td>
                 <td class="title_32">
-                    清洗浮選出料儲豆槽 CO1
+                    清洗浮選槽 C2
                 </td>
                 <td class="title_32">
                     色選機 S1
@@ -153,10 +143,10 @@
             </tr>
             <tr>
                 <td class="video_32">
-                    <a href="/camera_C2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                    <a href="/camera_C3" 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>
+                    <a href="/camera_C4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
                 </td>
                 <td class="video_32">
                     <a href="/camera_S2" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
@@ -174,10 +164,10 @@
             </tr>
             <tr>
                 <td class="title_32">
-                    清洗浮選槽 C2
+                    清洗浮選槽 C3
                 </td>
                 <td class="title_32">
-                    清洗浮選出料儲豆槽 CO2
+                    清洗浮選槽 C4
                 </td>
                 <td class="title_32">
                     色選機 S2
@@ -211,7 +201,9 @@
                 <td class="video_31">
                     <a href="/camera_CCargo_out" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
                 </td>
-                <td></td>
+                <td class="video_31">
+                    <a href="/camera_R1" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
+                </td>
             </tr>
             <tr>
                 <td></td>
@@ -221,7 +213,9 @@
                 <td class="title_31">
                     清洗貨櫃外部
                 </td>
-                <td></td>
+                <td class="title_31">
+                    中水桶
+                </td>
             </tr>
             <tr>
                 <td colspan="4" style="color: lightgray;">
@@ -233,13 +227,13 @@
                     <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>
+                    <a href="/camera_C2" 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>
+                    <a href="/camera_C3" 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>
+                    <a href="/camera_C4" target="_blank"><img src="../static/img/video_pic_2.png" alt="影片"></a>
                 </td>
             </tr>
             <tr>
@@ -247,13 +241,13 @@
                     清洗浮選槽 C1
                 </td>
                 <td class="title_31">
-                    清洗浮選出料儲豆槽 CO1
+                    清洗浮選槽 C2
                 </td>
                 <td class="title_31">
-                    清洗浮選槽 C2
+                    清洗浮選槽 C3   
                 </td>
                 <td class="title_31">
-                    清洗浮選出料儲豆槽 CO2
+                    清洗浮選槽 C4
                 </td>
             </tr>      
             <tr>

app/templates/camera_dry.html

@@ -29,7 +29,8 @@
         var camera_title = '{{camera_title}}';
 
         $(document).ready(function (){
-            $("#coffee_title").text("乾燥貨櫃攝影機");
+            $("#coffee_title_pc").text("乾燥貨櫃攝影機");
+            $("#coffee_title_phone").text("乾燥貨櫃攝影機");
         });
     </script>
     <style>

app/templates/camera_ferment.html

@@ -27,7 +27,8 @@
         var WebRestart
         // WebRestart = setTimeout(function () { location.reload() }, 10000);
         $(document).ready(function (){
-            $("#coffee_title").text("發酵貨櫃攝影機");
+            $("#coffee_title_pc").text("發酵貨櫃攝影機");
+            $("#coffee_title_phone").text("發酵貨櫃攝影機");
         });
     </script>
     <style>

app/templates/clean_1118備份測試footer.html

@@ -0,0 +1,831 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+-->
+    <script>
+        $(document).ready(function(){
+            $("#coffee_title_pc").text('清洗貨櫃');
+            $("#coffee_title_phone").text('清洗貨櫃');
+        });
+    </script>
+
+    <style>
+        .C1_position {
+            position: absolute;
+            top: 135px;
+            left: 205px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .C2_position {
+            position: absolute;
+            top: 400px;
+            left: 205px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO1_position {
+            position: absolute;
+            top: 135px;
+            left: 400px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO2_position {
+            position: absolute;
+            top: 400px;
+            left: 400px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .S1_position {
+            position: absolute;
+            top: 135px;
+            left: 945px;
+            width: 115px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .S2_position {
+            position: absolute;
+            top: 400px;
+            left: 945px;
+            width: 115px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1065px;
+            width: 60px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1065px;
+            width: 60px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .P1_position {
+            position: absolute;
+            top: 135px;
+            left: 1150px;
+            width: 95px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .P2_position {
+            position: absolute;
+            top: 400px;
+            left: 1150px;
+            width: 95px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1250px;
+            width: 50px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1250px;
+            width: 50px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        /* .footer{
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        } */
+    </style>
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var WebRestart
+        // WebRestart = setTimeout(function () { location.reload() }, 10000);
+    </script>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+    
+        <!--
+            background-color:rgb(0, 238, 255);
+        -->
+        <!--
+        <div style="text-align: left;">
+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
+        </div>
+        <div style="text-align: right;">
+            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
+            Smart Coffee
+        </div>
+        -->
+        <div>
+            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
+            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>
+
+            <!-- 清洗浮選槽 C1 -->
+            <div id="C1" tabindex="0" class="C1_position" role="button">
+                C1 status
+                <!-- C1 狀態點點-->
+                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+            
+            <!-- 清洗浮選槽 C2 -->
+            <div id="C2" tabindex="0" class="C2_position" role="button">
+                C2 status
+                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 清洗浮選 CO1 出料儲豆槽 -->
+            <div id="CO1" tabindex="0" class="CO1_position" role="button">
+                CO1 status
+                <!-- CO1 狀態點點-->
+                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 清洗浮選 CO2 出料儲豆槽 -->
+            <div id="CO2" tabindex="0" class="CO2_position" role="button">
+                CO2 status
+                <!-- CO2 狀態點點-->
+                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 S1 -->
+            <div id="S1" tabindex="0" class="S1_position" role="button">
+                S1 status
+                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 S2 -->
+            <div id="S2" tabindex="0" class="S2_position" role="button">
+                S2 status
+                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 SO1 出料儲豆槽 -->
+            <div id="SO1" tabindex="0" class="SO1_position" role="button">
+                SO1 status
+                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 SO2 出料儲豆槽 -->
+            <div id="SO2" tabindex="0" class="SO2_position" role="button">
+                SO2 status
+                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 P1 -->
+            <div id="P1" tabindex="0" class="P1_position" role="button">
+                P1 status
+                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 P2 -->
+            <div id="P2" tabindex="0" class="P2_position" role="button">
+                P2 status
+                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 PO1 出料儲豆槽 -->
+            <div id="PO1" tabindex="0" class="PO1_position" role="button">
+                PO1 status
+                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 PO2 出料儲豆槽 -->
+            <div id="PO2" tabindex="0" class="PO2_position" role="button">
+                PO2 status
+                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            
+        </div>
+
+        <!-- 清洗浮選 模态框 -->
+        <div class="modal fade" id="C_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="C_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterInput_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    入水口_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterL2L3_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 2、3_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterL4L5_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 4、5_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_solenoid_waterL2L3_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 2、3_電磁閥
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_solenoid_waterL4L5_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 4、5_電磁閥
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_stepping_motor_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    步進馬達
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    咖啡生豆高度
+                                                </td>
+                                                <td>
+                                                    <span id="UltraSonic_t_status"></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 清洗浮選 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="CO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="CO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 色選機 模态框 -->
+
+
+
+
+        <!-- 色選機 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="SO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="SO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 脫皮機 模态框 -->
+        <div class="modal fade" id="P_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="P_actuator_link" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="P_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_motor_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    馬達
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="SENSOR_t_status">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 脫皮機 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="PO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="PO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+        <script>
+            function update_data_C(ctid) {
+                console.log('clean_tank_id:' + ctid)
+                $.get('/loading/C' + ctid, '', function (res) {
+
+                    if (res.tank_vacuum == 0) {
+                        $("#C_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#C_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#C_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterInput == 0) {
+                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterInput == 1) {
+                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterL2L3 == 0) {
+                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterL2L3 == 1) {
+                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterL4L5 == 0) {
+                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterL4L5 == 1) {
+                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_waterL2L3 == 0) {
+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_waterL2L3 == 1) {
+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_waterL4L5 == 0) {
+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_waterL4L5 == 1) {
+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }
+
+                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {
+                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {
+                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")
+                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }
+
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+
+                }, 'json');
+
+                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
+                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);
+                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);
+                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
+                $('#C_Modal').modal('show');
+            }
+
+            function update_data_SO(sotid){
+                console.log('color-select_tank_id:' + sotid)
+                $.get('/loading/SO' + sotid, '', function (res) {
+                    if (res.output_vacuum == 0) {
+                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#SO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
+                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
+                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
+                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
+                $('#SO_Modal').modal('show');
+
+            }
+
+            function update_data_S(stid) {
+                console.log('color-select_tank_id:' + stid)
+                $.get('/loading/S' + stid, '', function (res) {
+
+                }, 'json');
+
+                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);
+                $('#S1_Modal').modal('show');
+            }
+
+            function update_data_P(ptid) {
+                console.log('peel_tank_id:' + ptid)
+                $.get('/loading/P' + ptid, '', function (res) {
+                    if (res.tank_vacuum == 0) {
+                        $("#P_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#P_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#P_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_motor > 0) {
+                        $("#tank_motor_status").css("background-color", "forestgreen")
+                    } else if (res.tank_motor == 0) {
+                        $("#tank_motor_status").css("background-color", "#C0C0C0")
+                    } else { $("#tank_motor_status").css("background-color", "crimson") }
+
+                }, 'json');
+
+                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
+                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
+                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
+                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
+                $('#P_Modal').modal('show');
+            }
+
+            function update_data_CO(cotid){
+                console.log('clean_output_tank_id:' + cotid)
+                $.get('loading/CO' + cotid, '', function (res){
+                    if (res.output_vacuum == 0) {
+                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#CO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
+                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
+                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
+                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
+                $('#CO_Modal').modal('show');
+
+            }
+
+            function update_data_PO(potid){
+                console.log('peel_output_tank_id' + potid)
+                $.get('loading/PO' + potid, '', function (res){
+                    if (res.output_vacuum == 0) {
+                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#PO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
+                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
+                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
+                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
+                $('#PO_Modal').modal('show');
+
+            }
+
+
+
+
+            var button_C1 = document.getElementById('C1');
+            button_C1.addEventListener('click', function () { update_data_C("1") });
+
+            var button_C2 = document.getElementById('C2');
+            button_C2.addEventListener('click', function () { update_data_C("2") });
+
+            var button_CO1 = document.getElementById('CO1');
+            button_CO1.addEventListener('click', function () { update_data_CO("1") });
+
+            var button_CO2 = document.getElementById('CO2');
+            button_CO2.addEventListener('click', function () { update_data_CO("2") });
+
+            var button_S1 = document.getElementById('S1');
+            button_S1.addEventListener('click', function () { update_data_S("1") });
+
+            var button_S2 = document.getElementById('S2');
+            button_S2.addEventListener('click', function () { update_data_S("2") });
+
+            var button_SO1 = document.getElementById('SO1');
+            button_SO1.addEventListener('click', function () { update_data_SO("1") });
+
+            var button_SO2 = document.getElementById('SO2');
+            button_SO2.addEventListener('click', function () { update_data_SO("2") });
+
+            var button_P1 = document.getElementById('P1');
+            button_P1.addEventListener('click', function () { update_data_P("1") });
+
+            var button_P2 = document.getElementById('P2');
+            button_P2.addEventListener('click', function () { update_data_P("2") });
+
+            var button_PO1 = document.getElementById('PO1');
+            button_PO1.addEventListener('click', function () { update_data_PO("1") });
+
+            var button_PO2 = document.getElementById('PO2');
+            button_PO2.addEventListener('click', function () { update_data_PO("2") });
+
+        </script>
+        <!--
+        <footer class="footer">
+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
+            </div>
+        </footer>
+        -->
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/clean_1124舊架構備份.html

@@ -0,0 +1,823 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+-->
+    <script>
+        $(document).ready(function(){
+            $("#coffee_title").text('清洗貨櫃');
+        });
+    </script>
+
+    <style>
+        .C1_position {
+            position: absolute;
+            top: 135px;
+            left: 205px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .C2_position {
+            position: absolute;
+            top: 400px;
+            left: 205px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO1_position {
+            position: absolute;
+            top: 135px;
+            left: 400px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO2_position {
+            position: absolute;
+            top: 400px;
+            left: 400px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .S1_position {
+            position: absolute;
+            top: 135px;
+            left: 945px;
+            width: 115px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .S2_position {
+            position: absolute;
+            top: 400px;
+            left: 945px;
+            width: 115px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1065px;
+            width: 60px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1065px;
+            width: 60px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .P1_position {
+            position: absolute;
+            top: 135px;
+            left: 1150px;
+            width: 95px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .P2_position {
+            position: absolute;
+            top: 400px;
+            left: 1150px;
+            width: 95px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1250px;
+            width: 50px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1250px;
+            width: 50px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+    </style>
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var WebRestart
+        // WebRestart = setTimeout(function () { location.reload() }, 10000);
+    </script>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+    
+        <!--
+            background-color:rgb(0, 238, 255);
+        -->
+        <!--
+        <div style="text-align: left;">
+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
+        </div>
+        <div style="text-align: right;">
+            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
+            Smart Coffee
+        </div>
+        -->
+        <div>
+            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
+            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>
+
+            <!-- 清洗浮選槽 C1 -->
+            <div id="C1" tabindex="0" class="C1_position" role="button">
+                C1 status
+                <!-- C1 狀態點點-->
+                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+            
+            <!-- 清洗浮選槽 C2 -->
+            <div id="C2" tabindex="0" class="C2_position" role="button">
+                C2 status
+                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 清洗浮選 CO1 出料儲豆槽 -->
+            <div id="CO1" tabindex="0" class="CO1_position" role="button">
+                CO1 status
+                <!-- CO1 狀態點點-->
+                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 清洗浮選 CO2 出料儲豆槽 -->
+            <div id="CO2" tabindex="0" class="CO2_position" role="button">
+                CO2 status
+                <!-- CO2 狀態點點-->
+                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 S1 -->
+            <div id="S1" tabindex="0" class="S1_position" role="button">
+                S1 status
+                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 S2 -->
+            <div id="S2" tabindex="0" class="S2_position" role="button">
+                S2 status
+                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 SO1 出料儲豆槽 -->
+            <div id="SO1" tabindex="0" class="SO1_position" role="button">
+                SO1 status
+                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 SO2 出料儲豆槽 -->
+            <div id="SO2" tabindex="0" class="SO2_position" role="button">
+                SO2 status
+                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 P1 -->
+            <div id="P1" tabindex="0" class="P1_position" role="button">
+                P1 status
+                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 P2 -->
+            <div id="P2" tabindex="0" class="P2_position" role="button">
+                P2 status
+                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 PO1 出料儲豆槽 -->
+            <div id="PO1" tabindex="0" class="PO1_position" role="button">
+                PO1 status
+                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 PO2 出料儲豆槽 -->
+            <div id="PO2" tabindex="0" class="PO2_position" role="button">
+                PO2 status
+                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            
+        </div>
+
+        <!-- 清洗浮選 模态框 -->
+        <div class="modal fade" id="C_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="C_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterInput_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    入水口_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterL2L3_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 2、3_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterL4L5_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 4、5_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_solenoid_waterL2L3_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 2、3_電磁閥
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_solenoid_waterL4L5_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 4、5_電磁閥
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_stepping_motor_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    步進馬達
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    咖啡生豆高度
+                                                </td>
+                                                <td>
+                                                    <span id="UltraSonic_t_status"></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 清洗浮選 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="CO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="CO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 色選機 模态框 -->
+
+
+
+
+        <!-- 色選機 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="SO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="SO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 脫皮機 模态框 -->
+        <div class="modal fade" id="P_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="P_actuator_link" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="P_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_motor_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    馬達
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="SENSOR_t_status">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 脫皮機 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="PO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="PO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+        <script>
+            function update_data_C(ctid) {
+                console.log('clean_tank_id:' + ctid)
+                $.get('/loading/C' + ctid, '', function (res) {
+
+                    if (res.tank_vacuum == 0) {
+                        $("#C_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#C_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#C_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterInput == 0) {
+                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterInput == 1) {
+                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterL2L3 == 0) {
+                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterL2L3 == 1) {
+                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterL4L5 == 0) {
+                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterL4L5 == 1) {
+                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_waterL2L3 == 0) {
+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_waterL2L3 == 1) {
+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_waterL4L5 == 0) {
+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_waterL4L5 == 1) {
+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }
+
+                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {
+                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {
+                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")
+                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }
+
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+
+                }, 'json');
+
+                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
+                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);
+                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);
+                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
+                $('#C_Modal').modal('show');
+            }
+
+            function update_data_SO(sotid){
+                console.log('color-select_tank_id:' + sotid)
+                $.get('/loading/SO' + sotid, '', function (res) {
+                    if (res.output_vacuum == 0) {
+                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#SO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
+                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
+                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
+                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
+                $('#SO_Modal').modal('show');
+
+            }
+
+            function update_data_S(stid) {
+                console.log('color-select_tank_id:' + stid)
+                $.get('/loading/S' + stid, '', function (res) {
+
+                }, 'json');
+
+                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);
+                $('#S1_Modal').modal('show');
+            }
+
+            function update_data_P(ptid) {
+                console.log('peel_tank_id:' + ptid)
+                $.get('/loading/P' + ptid, '', function (res) {
+                    if (res.tank_vacuum == 0) {
+                        $("#P_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#P_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#P_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_motor > 0) {
+                        $("#tank_motor_status").css("background-color", "forestgreen")
+                    } else if (res.tank_motor == 0) {
+                        $("#tank_motor_status").css("background-color", "#C0C0C0")
+                    } else { $("#tank_motor_status").css("background-color", "crimson") }
+
+                }, 'json');
+
+                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
+                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
+                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
+                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
+                $('#P_Modal').modal('show');
+            }
+
+            function update_data_CO(cotid){
+                console.log('clean_output_tank_id:' + cotid)
+                $.get('loading/CO' + cotid, '', function (res){
+                    if (res.output_vacuum == 0) {
+                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#CO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
+                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
+                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
+                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
+                $('#CO_Modal').modal('show');
+
+            }
+
+            function update_data_PO(potid){
+                console.log('peel_output_tank_id' + potid)
+                $.get('loading/PO' + potid, '', function (res){
+                    if (res.output_vacuum == 0) {
+                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#PO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
+                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
+                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
+                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
+                $('#PO_Modal').modal('show');
+
+            }
+
+
+
+
+            var button_C1 = document.getElementById('C1');
+            button_C1.addEventListener('click', function () { update_data_C("1") });
+
+            var button_C2 = document.getElementById('C2');
+            button_C2.addEventListener('click', function () { update_data_C("2") });
+
+            var button_CO1 = document.getElementById('CO1');
+            button_CO1.addEventListener('click', function () { update_data_CO("1") });
+
+            var button_CO2 = document.getElementById('CO2');
+            button_CO2.addEventListener('click', function () { update_data_CO("2") });
+
+            var button_S1 = document.getElementById('S1');
+            button_S1.addEventListener('click', function () { update_data_S("1") });
+
+            var button_S2 = document.getElementById('S2');
+            button_S2.addEventListener('click', function () { update_data_S("2") });
+
+            var button_SO1 = document.getElementById('SO1');
+            button_SO1.addEventListener('click', function () { update_data_SO("1") });
+
+            var button_SO2 = document.getElementById('SO2');
+            button_SO2.addEventListener('click', function () { update_data_SO("2") });
+
+            var button_P1 = document.getElementById('P1');
+            button_P1.addEventListener('click', function () { update_data_P("1") });
+
+            var button_P2 = document.getElementById('P2');
+            button_P2.addEventListener('click', function () { update_data_P("2") });
+
+            var button_PO1 = document.getElementById('PO1');
+            button_PO1.addEventListener('click', function () { update_data_PO("1") });
+
+            var button_PO2 = document.getElementById('PO2');
+            button_PO2.addEventListener('click', function () { update_data_PO("2") });
+
+        </script>
+        <!--
+        <footer class="footer">
+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
+            </div>
+        </footer>
+        -->
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/clean_1125更新備份.html

@@ -0,0 +1,823 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+-->
+    <script>
+        $(document).ready(function(){
+            $("#coffee_title").text('清洗貨櫃');
+        });
+    </script>
+
+    <style>
+        .C1_position {
+            position: absolute;
+            top: 135px;
+            left: 205px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .C2_position {
+            position: absolute;
+            top: 400px;
+            left: 205px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO1_position {
+            position: absolute;
+            top: 135px;
+            left: 400px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .CO2_position {
+            position: absolute;
+            top: 400px;
+            left: 400px;
+            width: 175px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .S1_position {
+            position: absolute;
+            top: 135px;
+            left: 945px;
+            width: 115px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .S2_position {
+            position: absolute;
+            top: 400px;
+            left: 945px;
+            width: 115px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1065px;
+            width: 60px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .SO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1065px;
+            width: 60px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .P1_position {
+            position: absolute;
+            top: 135px;
+            left: 1150px;
+            width: 95px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .P2_position {
+            position: absolute;
+            top: 400px;
+            left: 1150px;
+            width: 95px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO1_position {
+            position: absolute;
+            top: 135px;
+            left: 1250px;
+            width: 50px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PO2_position {
+            position: absolute;
+            top: 400px;
+            left: 1250px;
+            width: 50px;
+            height: 230px;
+            border-style: solid;
+            border-color: aqua;
+        }
+    </style>
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var WebRestart
+        // WebRestart = setTimeout(function () { location.reload() }, 10000);
+    </script>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+    
+        <!--
+            background-color:rgb(0, 238, 255);
+        -->
+        <!--
+        <div style="text-align: left;">
+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
+        </div>
+        <div style="text-align: right;">
+            <a href="/camera_clean" style="float: right;">清洗貨櫃攝影機&nbsp;&nbsp;&nbsp;</a>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
+            Smart Coffee
+        </div>
+        -->
+        <div>
+            <!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
+            <center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>
+
+            <!-- 清洗浮選槽 C1 -->
+            <div id="C1" tabindex="0" class="C1_position" role="button">
+                C1 status
+                <!-- C1 狀態點點-->
+                <div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+            
+            <!-- 清洗浮選槽 C2 -->
+            <div id="C2" tabindex="0" class="C2_position" role="button">
+                C2 status
+                <div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 清洗浮選 CO1 出料儲豆槽 -->
+            <div id="CO1" tabindex="0" class="CO1_position" role="button">
+                CO1 status
+                <!-- CO1 狀態點點-->
+                <div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 清洗浮選 CO2 出料儲豆槽 -->
+            <div id="CO2" tabindex="0" class="CO2_position" role="button">
+                CO2 status
+                <!-- CO2 狀態點點-->
+                <div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 S1 -->
+            <div id="S1" tabindex="0" class="S1_position" role="button">
+                S1 status
+                <div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 S2 -->
+            <div id="S2" tabindex="0" class="S2_position" role="button">
+                S2 status
+                <div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 SO1 出料儲豆槽 -->
+            <div id="SO1" tabindex="0" class="SO1_position" role="button">
+                SO1 status
+                <div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 SO2 出料儲豆槽 -->
+            <div id="SO2" tabindex="0" class="SO2_position" role="button">
+                SO2 status
+                <div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 P1 -->
+            <div id="P1" tabindex="0" class="P1_position" role="button">
+                P1 status
+                <div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 P2 -->
+            <div id="P2" tabindex="0" class="P2_position" role="button">
+                P2 status
+                <div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 PO1 出料儲豆槽 -->
+            <div id="PO1" tabindex="0" class="PO1_position" role="button">
+                PO1 status
+                <div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 PO2 出料儲豆槽 -->
+            <div id="PO2" tabindex="0" class="PO2_position" role="button">
+                PO2 status
+                <div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            
+        </div>
+
+        <!-- 清洗浮選 模态框 -->
+        <div class="modal fade" id="C_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="C_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterInput_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    入水口_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterL2L3_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 2、3_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_pump_waterL4L5_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 4、5_雙核泵
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_solenoid_waterL2L3_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 2、3_電磁閥
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_solenoid_waterL4L5_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    出水口 4、5_電磁閥
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_stepping_motor_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    步進馬達
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    咖啡生豆高度
+                                                </td>
+                                                <td>
+                                                    <span id="UltraSonic_t_status"></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 清洗浮選 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="CO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="CO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 色選機 模态框 -->
+
+
+
+
+        <!-- 色選機 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="SO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="SO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 脫皮機 模态框 -->
+        <div class="modal fade" id="P_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="P_actuator_link" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="P_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <div id="tank_motor_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    馬達
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="SENSOR_t_status">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 脫皮機 出料儲豆槽 模态框 -->
+        <div class="modal fade" id="PO_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <div class="modal-header">
+                        <h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 模态框主体 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    <div id="PO_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                    
+                                                </td>
+                                                <td>
+                                                    真空吸料機
+                                                </td>
+                                            </tr>
+                                        </table> 
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <tr>
+                                                <td>
+                                                    (感測器)
+                                                </td>
+                                                <td>
+                                                    <span id="">000</span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+        <script>
+            function update_data_C(ctid) {
+                console.log('clean_tank_id:' + ctid)
+                $.get('/loading/C' + ctid, '', function (res) {
+
+                    if (res.tank_vacuum == 0) {
+                        $("#C_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#C_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#C_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterInput == 0) {
+                        $("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterInput == 1) {
+                        $("#tank_pump_waterInput_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterL2L3 == 0) {
+                        $("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterL2L3 == 1) {
+                        $("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }
+
+                    if (res.tank_pump_waterL4L5 == 0) {
+                        $("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_pump_waterL4L5 == 1) {
+                        $("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")
+                    } else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_waterL2L3 == 0) {
+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_waterL2L3 == 1) {
+                        $("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_waterL4L5 == 0) {
+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_waterL4L5 == 1) {
+                        $("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }
+
+                    if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {
+                        $("#tank_stepping_motor_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {
+                        $("#tank_stepping_motor_status").css("background-color", "forestgreen")
+                    } else { $("#tank_stepping_motor_status").css("background-color", "crimson") }
+
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+
+                }, 'json');
+
+                $('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
+                $('#C_actuator_link').attr("href", "/clean_container/" + ctid);
+                $('#C_sensor_link').attr("href", "/clean_container/" + ctid);
+                $('#camera_clean_tid').attr("href", "/camera_C" + ctid);
+                $('#C_Modal').modal('show');
+            }
+
+            function update_data_SO(sotid){
+                console.log('color-select_tank_id:' + sotid)
+                $.get('/loading/SO' + sotid, '', function (res) {
+                    if (res.output_vacuum == 0) {
+                        $("#SO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#SO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#SO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
+                $('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
+                $('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
+                $('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
+                $('#SO_Modal').modal('show');
+
+            }
+
+            function update_data_S(stid) {
+                console.log('color-select_tank_id:' + stid)
+                $.get('/loading/S' + stid, '', function (res) {
+
+                }, 'json');
+
+                $('#camera_colorselect_tid').attr("href", "/camera_S" + stid);
+                $('#S1_Modal').modal('show');
+            }
+
+            function update_data_P(ptid) {
+                console.log('peel_tank_id:' + ptid)
+                $.get('/loading/P' + ptid, '', function (res) {
+                    if (res.tank_vacuum == 0) {
+                        $("#P_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#P_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#P_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_motor > 0) {
+                        $("#tank_motor_status").css("background-color", "forestgreen")
+                    } else if (res.tank_motor == 0) {
+                        $("#tank_motor_status").css("background-color", "#C0C0C0")
+                    } else { $("#tank_motor_status").css("background-color", "crimson") }
+
+                }, 'json');
+
+                $('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
+                $('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
+                $('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
+                $('#camera_peel_tid').attr("href", "/camera_P" + ptid);
+                $('#P_Modal').modal('show');
+            }
+
+            function update_data_CO(cotid){
+                console.log('clean_output_tank_id:' + cotid)
+                $.get('loading/CO' + cotid, '', function (res){
+                    if (res.output_vacuum == 0) {
+                        $("#CO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#CO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#CO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
+                $('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
+                $('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
+                $('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
+                $('#CO_Modal').modal('show');
+
+            }
+
+            function update_data_PO(potid){
+                console.log('peel_output_tank_id' + potid)
+                $.get('loading/PO' + potid, '', function (res){
+                    if (res.output_vacuum == 0) {
+                        $("#PO_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#PO_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#PO_vacuum_status").css("background-color", "crimson") }
+                }, 'json');
+
+                $('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
+                $('#PO_actuator_link').attr("href", "/peel_container/" + potid);
+                $('#PO_sensor_link').attr("href", "/peel_container/" + potid);
+                $('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
+                $('#PO_Modal').modal('show');
+
+            }
+
+
+
+
+            var button_C1 = document.getElementById('C1');
+            button_C1.addEventListener('click', function () { update_data_C("1") });
+
+            var button_C2 = document.getElementById('C2');
+            button_C2.addEventListener('click', function () { update_data_C("2") });
+
+            var button_CO1 = document.getElementById('CO1');
+            button_CO1.addEventListener('click', function () { update_data_CO("1") });
+
+            var button_CO2 = document.getElementById('CO2');
+            button_CO2.addEventListener('click', function () { update_data_CO("2") });
+
+            var button_S1 = document.getElementById('S1');
+            button_S1.addEventListener('click', function () { update_data_S("1") });
+
+            var button_S2 = document.getElementById('S2');
+            button_S2.addEventListener('click', function () { update_data_S("2") });
+
+            var button_SO1 = document.getElementById('SO1');
+            button_SO1.addEventListener('click', function () { update_data_SO("1") });
+
+            var button_SO2 = document.getElementById('SO2');
+            button_SO2.addEventListener('click', function () { update_data_SO("2") });
+
+            var button_P1 = document.getElementById('P1');
+            button_P1.addEventListener('click', function () { update_data_P("1") });
+
+            var button_P2 = document.getElementById('P2');
+            button_P2.addEventListener('click', function () { update_data_P("2") });
+
+            var button_PO1 = document.getElementById('PO1');
+            button_PO1.addEventListener('click', function () { update_data_PO("1") });
+
+            var button_PO2 = document.getElementById('PO2');
+            button_PO2.addEventListener('click', function () { update_data_PO("2") });
+
+        </script>
+        <!--
+        <footer class="footer">
+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
+            </div>
+        </footer>
+        -->
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/clean_container_tank.html

@@ -0,0 +1,903 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      <!--  <meta http-equiv="refresh" content="5" /> 每 content 秒網頁自動更新-->
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!-- Socket.IO -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
+    
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var ctn = '{{tid}}';
+        var status = '{{status}}';
+        console.log('ctn:' + ctn)
+
+        $(function(){
+            $("#coffee_title_pc").text('C' + ctn + ' 清洗浮選槽操作介面');
+            $("#coffee_title_phone").text('C' + ctn + ' 清洗浮選槽操作介面');
+
+            if (status == 2) {
+                $('input').prop('disabled', true);
+                $('button').prop('disabled', true);
+            } else if ( (status == 0) || (status == 1) ) {
+                $('input').prop('disabled', false);
+                $('button').prop('disabled', false);   
+            }
+        });
+        var WebUpdate_set;
+        WebUpdate_set = setInterval(function(){WebUpdate(ctn)} , 10 * 1000)
+        
+    </script>
+
+    <script>
+        // 清洗浮選 致動器開關
+        var tank_num = '{{tid}}';
+
+        // 桶內 真空吸料機
+        function tankVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_vacuum_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-02").prop('checked', false);
+                    if (!confirm("你確定要開啟真空吸料機嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-02").prop('checked', true);
+                    if (!confirm("你確定要關閉真空吸料機嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "C" + tank_num, "command": "tank_vacuum_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-02").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-02").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 吸料機三通閥
+        function tankThreeWayValveInput(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_threewayvalve_input_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-05").prop('checked', false);
+                    if (!confirm("你確定要開啟吸料機三通閥[入料]嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-05").prop('checked', true);
+                    if (!confirm("你確定要開啟吸料機三通閥[排氣]嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "C" + tank_num, "command": "tank_threewayvalve_input_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-05").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-05").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 馬達
+        function tankMotor_set() {
+            var motor_data = $("input[id=motor_rpm_data]").val();
+            if (motor_data == '') {
+                alert("請先輸入要運轉的值!");
+                return false;
+            } else if (motor_data == 0) {
+                alert("轉速 0 為關閉馬達");
+
+            } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {
+                alert("您輸入的值已超過範圍，請重新輸入!" + !Number(motor_data));
+                return false;
+            };
+            var value = "off";
+            if (motor_data != 0) {
+                value = motor_data;
+                if (!confirm("你確定要開啟攪拌馬達，運轉速度為 " + motor_data + " RPM 嗎?")) {
+                    return false;
+                };
+            } else {
+                if (!confirm("你確定要關閉攪拌馬達嗎?")) {
+                    return false;
+                };
+            };
+
+            var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": motor_data };
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    setTimeout("alert('攪拌馬達_開啟成功!')", 500);
+                    var timer = setInterval(Rotate, 60000);
+                } else if (res == 'off') {
+                    setTimeout("alert('攪拌馬達_關閉成功!')", 500);
+                    clearInterval(timer);
+                    $("#motor_rpm_status").text('')
+                } else {
+                    alert(res);
+                };
+            }, 'text')
+        };
+
+        function tankMotor(params) {
+            var params_int = parseInt(params)
+            if (-50 <= params_int <= 50) {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": params };
+            } else {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_motor_status", "value": '0' };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-08").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-08").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 中水入水電磁閥
+        function tankSolenoidReclaimedIn(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_reclaimed_in_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-11").prop('checked', false);
+                    if (!confirm("你確定要開啟中水入水電磁閥嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-11").prop('checked', true);
+                    if (!confirm("你確定要關閉中水入水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_in_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-11").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-11").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 清水入水電磁閥
+        function tankSolenoidWaterIn(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_water_in_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-14").prop('checked', false);
+                    if (!confirm("你確定要開啟清水入水電磁閥嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-14").prop('checked', true);
+                    if (!confirm("你確定要關閉清水入水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_in_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-14").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-14").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 幫浦 (清水入水)
+        function tankPumpWaterIn(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_pump_water_in_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-17").prop('checked', false);
+                    if (!confirm("你確定要開啟清水入水幫浦嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-17").prop('checked', true);
+                    if (!confirm("你確定要關閉清水入水幫浦嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_water_in_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-17").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-17").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 排水廢水電磁閥
+        function tankSolenoidWaterOut(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_water_out_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-20").prop('checked', false);
+                    if (!confirm("你確定要開啟排水廢水電磁閥嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-20").prop('checked', true);
+                    if (!confirm("你確定要關閉排水廢水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_water_out_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-20").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-20").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 排水中水電磁閥
+        function tankSolenoidReclaimedOut(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_reclaimed_out_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-23").prop('checked', false);
+                    if (!confirm("你確定要開啟排水中水電磁閥嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-23").prop('checked', true);
+                    if (!confirm("你確定要關閉排水中水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_reclaimed_out_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-23").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-23").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 消毒電磁閥
+        function tankSolenoidDisinfect(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_disinfect_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-26").prop('checked', false);
+                    if (!confirm("你確定要開啟消毒電磁閥嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-26").prop('checked', true);
+                    if (!confirm("你確定要關閉消毒電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "C" + tank_num, "command": "tank_solenoid_disinfect_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-26").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-26").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 混合槽幫浦
+        function tankPumpDisinfect(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_pump_disinfect_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-29").prop('checked', false);
+                    if (!confirm("你確定要開啟混合槽幫浦嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-29").prop('checked', true);
+                    if (!confirm("你確定要關閉混合槽幫浦嗎?")) {
+                        return false;
+                    };
+                };
+
+                var data = { "tank_num": "C" + tank_num, "command": "tank_pump_disinfect_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-29").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-29").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 蝴蝶閥
+        function tankDiskvalve(params) {
+            if (params == '1') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_diskvalve_status]:checked");
+                //大於0代表有被選中 
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-32").prop('checked', false);
+                    if (!confirm("你確定要開啟蝴蝶閥嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-32").prop('checked', true);
+                    if (!confirm("你確定要關閉蝴蝶閥嗎?")) {
+                        return false;
+                    };
+                };
+
+                var data = { "tank_num": "C" + tank_num, "command": "tank_diskvalve_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-32").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-32").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+
+
+    </script>
+
+    <script language="JavaScript">
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(ctn)} , webupdate_time * 1000);
+        }
+
+        // jQuery 更新感測器致動器狀態
+        function WebUpdate(ctn) {
+            $.get('/loading/C' + ctn, '', function (res) {
+                if (res.tank_vacuum == 0) {
+                    $("#cmn-toggle-02").prop('checked', false);
+                } else if (res.tank_vacuum == 1) {
+                    $("#cmn-toggle-02").prop('checked', true);
+                }
+
+                if (res.tank_threewayvalve_input == 0) {
+                    $("#cmn-toggle-05").prop('checked', false);
+                } else if (res.tank_threewayvalve_input == 1) {
+                    $("#cmn-toggle-05").prop('checked', true);
+                }
+
+                if (res.tank_solenoid_reclaimed_in == 0) {
+                    $("#cmn-toggle-11").prop('checked', false);
+                } else if (res.tank_solenoid_reclaimed_in == 1) {
+                    $("#cmn-toggle-11").prop('checked', true);
+                }
+
+                if (res.tank_solenoid_water_in == 0) {
+                    $("#cmn-toggle-14").prop('checked', false);
+                } else if (res.tank_solenoid_water_in == 1) {
+                    $("#cmn-toggle-14").prop('checked', true);
+                }
+
+                if (res.tank_pump_water_in == 0) {
+                    $("#cmn-toggle-17").prop('checked', false);
+                } else if (res.tank_pump_water_in == 1) {
+                    $("#cmn-toggle-17").prop('checked', true);
+                }
+
+                if (res.tank_solenoid_water_out == 0) {
+                    $("#cmn-toggle-20").prop('checked', false);
+                } else if (res.tank_solenoid_water_out == 1) {
+                    $("#cmn-toggle-20").prop('checked', true);
+                }
+
+                if (res.tank_solenoid_reclaimed_out == 0) {
+                    $("#cmn-toggle-23").prop('checked', false);
+                } else if (res.tank_solenoid_reclaimed_out == 1) {
+                    $("#cmn-toggle-23").prop('checked', true);
+                }
+
+                if (res.tank_solenoid_disinfect == 0) {
+                    $("#cmn-toggle-26").prop('checked', false);
+                } else if (res.tank_solenoid_disinfect == 1) {
+                    $("#cmn-toggle-26").prop('checked', true);
+                }
+
+                if (res.tank_pump_disinfect == 0) {
+                    $("#cmn-toggle-29").prop('checked', false);
+                } else if (res.tank_pump_disinfect == 1) {
+                    $("#cmn-toggle-29").prop('checked', true);
+                }
+
+                if (res.tank_diskvalve == 0) {
+                    $("#cmn-toggle-32").prop('checked', false);
+                } else if (res.tank_diskvalve == 1) {
+                    $("#cmn-toggle-32").prop('checked', true);
+                }
+
+                $("#motor_rpm_data").attr("placeholder", res.tank_motor);
+                $("#UltraSonic_t_status").text(res.UltraSonic);
+                $("#MotorEncoder_t_status").text(res.Encoder);
+                $("#tankTurbidity_t_status").text(res.tankTurbidity);
+                $("#filterTurbidity_t_status").text(res.filterTurbidity);
+
+                // setTimeout(function(){WebUpdate(ctn)}, 10 * 1000);
+
+            }, 'json');
+
+            
+        }
+    </script>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+    
+        <h4>致動器</h4>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
+            <tr>
+                <td style="color:red;">Valve</td>
+                <td>真空吸料機</td>
+                <td>吸料機<br>三通閥</td>
+                <td>馬達</td>
+                <td>中水入水<br>電磁閥</td>
+                <td>清水入水<br>電磁閥</td>
+                <td>幫浦<br>(清水入水)</td>
+                <td>排水廢水<br>電磁閥</td>
+                <td>排水中水<br>電磁閥</td>
+                <td>消毒<br>電磁閥</td>
+                <td>混合槽<br>幫浦</td>
+                <td>蝴蝶閥</td>
+            </tr>
+            <tr>
+                <td>
+                    <span style="color:#C0C0C0;">off</span>
+                    <span style="color:#008CBA;">on</span>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_vacuum == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked
+                                name="tank_vacuum_status" value="ON" onclick="tankVacuum()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02"
+                                name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-03">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-04">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_threewayvalve_input == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-05" checked
+                                name="tank_threewayvalve_input_status" value="ON" onclick="tankThreeWayValveInput()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-05"
+                                name="tank_threewayvalve_input_status" value="OFF" onclick="tankThreeWayValveInput()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-05"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-06">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM
+                    <br>
+                    <span id="motor_rpm_status" style="color:red;"></span>
+                    <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-10">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_solenoid_reclaimed_in == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-11" checked
+                                name="tank_solenoid_reclaimed_in_status" value="ON" onclick="tankSolenoidReclaimedIn()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-11"
+                                name="tank_solenoid_reclaimed_in_status" value="OFF" onclick="tankSolenoidReclaimedIn()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-11"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-12">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-13">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_solenoid_water_in == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-14" checked
+                                name="tank_solenoid_water_in_status" value="ON" onclick="tankSolenoidWaterIn()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-14"
+                                name="tank_solenoid_water_in_status" value="OFF" onclick="tankSolenoidWaterIn()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-14"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-15">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-16">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_pump_water_in == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-17" checked
+                                name="tank_pump_water_in_status" value="ON" onclick="tankPumpWaterIn()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-17"
+                                name="tank_pump_water_in_status" value="OFF" onclick="tankPumpWaterIn()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-17"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-18">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-19">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_solenoid_water_out == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-20" checked
+                                name="tank_solenoid_water_out_status" value="ON" onclick="tankSolenoidWaterOut()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-20"
+                                name="tank_solenoid_water_out_status" value="OFF" onclick="tankSolenoidWaterOut()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-20"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-21">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-22">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_solenoid_reclaimed_out == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-23" checked
+                                name="tank_solenoid_reclaimed_out_status" value="ON" onclick="tankSolenoidReclaimedOut()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-23"
+                                name="tank_solenoid_reclaimed_out_status" value="OFF" onclick="tankSolenoidReclaimedOut()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-23"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-24">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-25">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_solenoid_disinfect == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-26" checked
+                                name="tank_solenoid_disinfect_status" value="ON" onclick="tankSolenoidDisinfect()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-26"
+                                name="tank_solenoid_disinfect_status" value="OFF" onclick="tankSolenoidDisinfect()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-26"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-27">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-28">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_pump_disinfect == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-29" checked
+                                name="tank_pump_disinfect_status" value="ON" onclick="tankPumpDisinfect()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-29"
+                                name="tank_pump_disinfect_status" value="OFF" onclick="tankPumpDisinfect()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-29"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-30">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-31">
+                        </div>
+                        <div class="text-center">
+                            {% if tank_diskvalve == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32" checked
+                                name="tank_diskvalve_status" value="ON" onclick="tankDiskvalve()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32"
+                                name="tank_diskvalve_status" value="OFF" onclick="tankDiskvalve()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-32"></label>
+                        </div>
+                        <div>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-33">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td><span style="color:#008CBA;"><b>ON</b></span></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankThreeWayValveInput('1')"></td>
+                <td><input type="button" class="input-button-on" value="20" onclick="tankMotor('20')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedIn('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterIn('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpWaterIn('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterOut('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedOut('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidDisinfect('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpDisinfect('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankDiskvalve('1')"></td>
+            </tr>
+            <tr>
+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankThreeWayValveInput('0')"></td>
+                <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedIn('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterIn('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpWaterIn('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterOut('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedOut('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidDisinfect('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpDisinfect('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankDiskvalve('0')"></td>
+            </tr>
+        </table>
+
+        <br>
+
+        <h4>感測器</h4>
+        <table border="1" class="table-all" cellpadding="5">
+            <tr>
+                <td style="background-color:#f3f3f3">生豆高度</td>
+                <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>
+                <td style="background-color:#f3f3f3">桶內濁度計</td>
+                <td><span id="tankTurbidity_t_status">{{tank_Turbidity.tankTurbidity}}</span> NTU</td>
+            </tr>
+            <tr>
+                <td style="background-color:#f3f3f3">馬達編碼器</td>
+                <td><span id="MotorEncoder_t_status">{{tank_Encoder.Encoder}}</span> RPM</td>
+                <td style="background-color:#f3f3f3">過濾器濁度計</td>
+                <td><span id="filterTurbidity_t_status">{{filter_Turbidity.filterTurbidity}}</span> NYU</td>
+            </tr>
+        </table>
+
+        <br>
+
+        <h4>排程測試</h4>
+        <table border="1" class="table-all" cellpadding="5">
+            <tr>
+                <td>排氣下豆測試</td>
+            </tr>
+            <tr>
+                <td>
+                    吸料
+                    <input type="text" class="input-text" name="waiting_time_8" value="5">
+                    秒                
+                    <br>
+                    放料
+                    <input type="text" class="input-text" name="waiting_time_9" value="10">
+                    秒
+                    <br>
+                    循環
+                    <input type="text" class="input-text" name="waiting_loop_3" value="4">
+                    次
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <button type="submit" class="btn btn-primary" onclick="tank_BeanInputAir_testing()">排氣下豆測試</button>
+                    <script>
+                        function tank_BeanInputAir_testing() {
+                            // 循環次數
+                            var loop3 = $("input[name=waiting_loop_3]").val();
+                            console.log('--- 循環 ' + loop3 + ' 次 ---')
+
+                            for (step = 1; step <= loop3; step++) {
+                                // 真空吸料機 ON
+                                tankVacuum_ON()
+                                console.log('tankVacuum_ON')
+
+                                // 吸料時間 
+                                var time8 = $("input[name=waiting_time_8]").val();
+                                console.log('等待 ' + time8 + ' 秒')
+                                var time = new Date();
+                                while ((new Date() - time) < time8 * 1000) { };
+
+                                // 真空吸料機 OFF
+                                tankVacuum_OFF()
+                                console.log('tankVacuum_OFF')
+
+                                // 吸料時間
+                                var time9 = $("input[name=waiting_time_9]").val();
+                                console.log('等待 ' + time9 + ' 秒')
+                                var time = new Date();
+                                while ((new Date() - time) < time9 * 1000) { };
+                            }                        
+                        }
+                    </script>
+                </td>
+            </tr>
+        </table>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/colorselect_container_tank.html

@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script language="JavaScript">
+        var ptid = '{{tid}}';
+        $(document).ready(function(){
+            $("#coffee_title_pc").text('S' + ptid + ' 色選機操作介面');
+            $("#coffee_title_phone").text('S' + ptid + ' 操作介面');
+        });
+
+        var WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , 10 * 1000);
+    </script>
+
+    <script>
+        // 清洗浮選 致動器開關
+        var tank_num = '{{tid}}';
+
+        // 桶內 真空吸料機
+        function tankVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_vacuum_status]:checked");
+                console.log('check：', check);
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-65").prop('checked', false);
+                    if (!confirm("你確定要開啟真空吸料機嗎?")) {
+                        return false;
+                    };
+
+                } else {
+                    $("#cmn-toggle-65").prop('checked', true);
+                    if (!confirm("你確定要關閉真空吸料機嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "S" + tank_num, "command": "tank_vacuum_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-35").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-35").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 馬達
+        function tankMotor_set() {
+            var motor_data = $("#motor_rpm_data").val();
+            console.log("motor_data: " + motor_data)
+            if (motor_data == '') {
+                //$("#cmn-toggle-20").prop('checked', false);
+                alert("請先輸入要運轉的值!");
+                return false;
+            } else if (motor_data == 0) {
+                alert("轉速 0 為關閉馬達");
+            } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {
+                // 
+                //$("#cmn-toggle-20").prop('checked', false);
+                alert("您輸入的值已超過範圍，請重新輸入!" + !Number(motor_data));
+                return false;
+            };
+            var value = "off";
+            //var check = $("input[name=peeling-machine-on]:checked");
+            if (motor_data != 0) {
+                value = motor_data;
+                //$("#cmn-toggle-20").prop('checked', false);
+                if (!confirm("你確定要開啟攪拌馬達，運轉速度為 " + motor_data + " RPM 嗎?")) {
+                    return false;
+                };
+            } else {
+                //$("#cmn-toggle-20").prop('checked', true);
+                if (!confirm("你確定要關閉攪拌馬達嗎?")) {
+                    return false;
+                };
+            };
+
+            var data = { "tank_num": "S" + tank_num, "command": "tank_motor_status", "value": motor_data };
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    //$("#cmn-toggle-14").prop('checked', true); // prop 設置元素屬型與元素值, 設定 checked 屬性為 true
+                    setTimeout("alert('攪拌馬達_開啟成功!')", 500); // 設定時間執行函式 delay(500), 只執行一次
+                    var timer = setInterval(Rotate, 60000); // 啟動後會在 60000 毫秒(更新時間一分鐘)內不斷執行 (原因須配合更新時間？)
+                } else if (res == 'off') {
+                    //$("#cmn-toggle-14").prop('checked', false);
+                    setTimeout("alert('攪拌馬達_關閉成功!')", 500);
+                    clearInterval(timer);                   // 取消 timer 的不斷執行
+                    $("#motor_rpm_status").text('');        // 設置 #motor_rpm_status 的文字為空, #井字號
+                } else {
+                    alert(res);
+                };
+            }, 'text')
+        };
+
+        function tankMotor(params) {
+            var data = { "tank_num": "S" + tank_num, "command": "tank_motor_status", "value": params };
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    var timer = setInterval(Rotate, 60000);
+                } else if (res == 'off') {
+                    clearInterval(timer);
+                    $("#motor_rpm_status").text('');
+                } else {
+                };
+            }, 'text')
+        };
+
+        function Rotate() {
+            $.get('/peel', '', function (res) {
+                //console.log(res.peeling);
+                $("#motor_rpm_status").text(res.peeling + ' rpm(每1分鐘更新一次)');
+            }, 'json');
+
+            setTimeout(function () { location.reload(); }, 500);
+        };
+
+        // 馬達 反轉
+        function tankMotor_Reverse() {
+            $("#input").attr('placeholder');
+            var tankMotor_now = ($('#motor_rpm_data').attr('placeholder'))*-1
+            console.log('tankMotor_now: ' + tankMotor_now)
+            tankMotor(String(tankMotor_now))
+            setTimeout(function () { location.reload(); }, 3*1000);
+        }
+
+        // 噴嘴
+        function tankNozzle(params) {
+            if (params == '1') {
+                var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_nozzle_status]:checked");
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-38").prop('checked', false);
+                    if (!confirm("你確定要開啟噴嘴嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-38").prop('checked', true);
+                    if (!confirm("你確定要關閉噴嘴嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "S" + tank_num, "command": "tank_nozzle_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-38").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-38").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+    </script>
+
+    <script language="JavaScript">
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , webupdate_time * 1000);
+        }
+    </script>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        
+        <h4>致動器</h4>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
+            <tr>
+                <td style="color:red;">Valve</td>
+                <td>真空吸料機</td>
+                <td>馬達</td>
+                <td>噴嘴</td>
+            </tr>
+            <tr>
+                <td>
+                    <span style="color:#C0C0C0;">off</span>
+                    <span style="color:#008CBA;">on</span>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-34">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_vacuum== 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-35" checked
+                                name="tank_vacuum_status" value="ON" onclick="tankVacuum()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-35"
+                                name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-35"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-36">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM<br>
+                    <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-37">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_nozzle == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-38" checked
+                                name="tank_nozzle_status" value="ON" onclick="tankNozzle()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-38"
+                                name="tank_nozzle_status" value="OFF" onclick="tankNozzle()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-38"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-39">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td><span style="color:#008CBA;"><b>ON</b></span></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>
+                <td>
+                    <input type="button" class="input-button-on" value="20" onclick="tankMotor('20')">
+                    <input type="button" class="input-button-on" value="Rev." onclick="tankMotor_Reverse()">
+                </td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankNozzle('1')"></td>
+            </tr>
+            <tr>
+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>
+                <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankNozzle('0')"></td>
+            </tr>
+        </table>
+
+        <br>
+
+        <h4>感測器</h4>
+        <table border="1" class="table-all" cellpadding="3">
+            <tr>
+                <td style="background-color:#f3f3f3">生豆高度</td>
+                <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>
+                <td style="background-color:#f3f3f3">顏色感測器</td>
+                <td><span id="Color_t_status">{{tank_color.color}}</span> (單位)</td>
+            </tr>
+        </table>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+        
+    </div>
+</body>
+
+<script>
+    // jQuery 更新感測器致動器狀態
+    function WebUpdate(ptid) {
+        $.get('/loading/S' + ptid, '', function (res) {
+            if (res.tank_vacuum == 0) {
+                $("#cmn-toggle-35").prop('checked', false);
+            } else if (res.tank_vacuum == 1) {
+                $("#cmn-toggle-35").prop('checked', true);
+            }
+
+            if (res.tank_nozzle == 0) {
+                $("#cmn-toggle-38").prop('checked', false);
+            } else if (res.tank_nozzle == 1) {
+                $("#cmn-toggle-38").prop('checked', true);
+            }
+
+            $("#motor_rpm_data").attr("placeholder", res.tank_motor);
+            $("#UltraSonic_t_status").text(res.UltraSonic);
+            $("#Color_t_status").text(res.color);
+            
+        }, 'json');
+    }
+</script>
+
+</html>

app/templates/ctrl_DI_Vacuum.html

@@ -28,7 +28,8 @@
             $("#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 + ' 乾燥入料儲豆槽_真空吸料機');
+            $("#coffee_title_pc").text('DI' + tid + ' 乾燥入料儲豆槽_真空吸料機');
+            $("#coffee_title_phone").text('DI' + tid + ' _真空吸料機');
         });
 
         //WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , 10 * 1000)
@@ -248,26 +249,9 @@
             <!-- 匯入共同使用的 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>

app/templates/ctrl_D_Temp.html

@@ -322,8 +322,9 @@
                 </td>   
                 
                 <td>
-                    <input id="tank_temp1_data" type="text" placeholder="{{tank_temp1}}" style="width: 40px;">&nbsp;℃
-                    <!--<span id="tank_temp1_status" style="color:red;"></span>-->
+                    <span id="tank_temp1_status" style="color:red;"></span>
+                    <input id="tank_temp1_data" type="text" placeholder="{{tank_temp1}}" style="width: 40px;">&nbsp;℃, 持續&nbsp;
+                    <input id="tank_temp_duration" type="text" placeholder="" style="width: 40px;">&nbsp;分鐘&nbsp;
                     <input type="button" value="送出" name="tank_temp1_status" onclick="setTemp1_func()"><br>
                     <span id="testing_Temp_Weight" style="color: #f00;"></span>
 
@@ -333,10 +334,12 @@
                         function setTemp1_func(){
                             var temp_data = $("input[id=tank_temp1_data]").val();
                             console.log('設定溫度: ', temp_data)
+                            var temp_duration = $("input[id=tank_temp_duration]").val();
+                            console.log('持溫時間: ', temp_duration)
                             var Temp_Weights_SHT11 = parseFloat($('#Temp_Weights_SHT11').val());
                             var Temp_Weights_Soil = parseFloat($('#Temp_Weights_Soil').val());
-                            setTemp1()
-                            var temp_interval = setInterval(checkTemp, 5000);
+                            setTemp1(temp_data, temp_duration)
+                            // var temp_interval = setInterval(checkTemp, 5000);
 
                             function checkTemp(){
                                 if (setTemp_process == 1) {

app/templates/ctrl_D_ThreeWayValve.html

@@ -30,7 +30,8 @@
             $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 三通閥')
             $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
             $('#dry_tank_page').attr("href", "/dry_container/" + tid)
-            $("#coffee_title").text('D' + tid + ' 乾燥槽_三通閥');
+            $("#coffee_title_pc").text('D' + tid + ' 乾燥槽_三通閥');
+            $("#coffee_title_phone").text('D' + tid + ' _三通閥');
         });
     </script>
 
@@ -242,18 +243,6 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-    
-        <!--
-        <div style="text-align: left;">
-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
-        </div>
-        <div style="text-align: right;">
-            <a id="dry_tank_page" href="/index_new" style="float: right;">___________________</a>
-        </div>
-        <div id="ctrl_D_ThreeWayValve_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
-            乾燥槽 D_ 三通閥
-        </div>
-        -->
 
         <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
             <tr>

app/templates/ctrl_D_ThreeWayValveBean.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
+    <script type="text/javascript" src="../static/js/dry_function.js"></script>
+
+    <script language="JavaScript">
+        // 指定 秒 刷新網頁一次
+        var tid = '{{tid}}';
+        console.log('tid:' + tid)
+        var tank_num = '{{tid}}';
+
+        $(function(){
+            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 測豆三通閥')
+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
+            $("#coffee_title_pc").text('D' + tid + ' 乾燥槽_測豆三通閥');
+            $("#coffee_title_phone").text('D' + tid + ' _測豆三通閥');
+        });
+    </script>
+
+    <style>
+        .footer{
+            position: absolute;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        }
+
+        body {
+            margin: 0;
+        }
+
+        .navbar-dark .navbar-nav .nav-link {
+            color: white;
+            cursor: pointer;
+            text-decoration: none;
+            width: 110px;
+            height: 46px;
+        }
+
+        .nav-top {
+            line-height: 40px;
+            background-color: #C4C4C4;
+        }
+
+        .website_title {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 30px;
+            color: #000000;
+        }
+
+        .navbar-nav>li {
+            float: none;
+            display: inline-block;
+            width: 100px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .navbar-nav>li a {
+            font-size: 20px;
+        }
+
+        .main-page {
+            margin-top: 200px;
+        }
+
+        .page-title {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: bold;
+            font-size: 36px;
+        }
+
+
+        .flex {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .set-link {
+            display: inline-block;
+            width: 350px;
+            height: 100px;
+            line-height: 100px;
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            color: #FFFFFF;
+            border-radius: 10px;
+            font-size: 36px;
+        }
+
+        .cmn-toggle {
+            position: absolute;
+            margin-left: 0px;
+            visibility: hidden;
+        }
+
+        .cmn-toggle+label {
+            display: block;
+            position: relative;
+            cursor: pointer;
+            outline: none;
+            user-select: none;
+        }
+
+        input.cmn-toggle-round-flat+label {
+            padding: 2px;
+            width: 60px;
+            height: 30px;
+            background-color: #C0C0C0;
+            border-radius: 60px;
+            transition: background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat+label:before,
+        input.cmn-toggle-round-flat+label:after {
+            display: block;
+            position: absolute;
+            content: "";
+        }
+
+        input.cmn-toggle-round-flat+label:before {
+            top: 2px;
+            left: 2px;
+            bottom: 2px;
+            right: 2px;
+            background-color: #fff;
+            border-radius: 60px;
+            transition: background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat+label:after {
+            top: 4px;
+            left: 4px;
+            bottom: 4px;
+            width: 24px;
+            background-color: #dddddd;
+            border-radius: 52px;
+            transition: margin 0.4s, background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat:checked+label {
+            background-color: #C0C0C0;
+        }
+
+        input.cmn-toggle-round-flat:checked+label:after {
+            margin-left: 27px;
+            background-color: #008CBA;
+        }
+
+        @media(max-width:373px) {
+            .card {
+                margin-right: 0px;
+            }
+
+            .set-link {
+                width: 250px;
+            }
+        }
+
+        @media(max-width:577px) {}
+
+        @media(min-width:576px) {}
+
+        @media(min-width:768px) {
+            .navbar-nav>li {
+                margin-left: 0px;
+            }
+
+            .navbar-nav .li-block {
+                display: none;
+            }
+        }
+
+        @media(min-width:991px) {
+            .navbar-nav>li {
+                margin-left: 20px;
+            }
+
+            .navbar-nav .li-block {
+                display: none;
+            }
+        }
+
+        @media(min-width:1200px) {
+            .navbar-nav>li {
+                margin-left: 50px;
+            }
+
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 100px;
+            }
+        }
+
+        @media(min-width:1400px) {
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 200px;
+            }
+        }
+
+
+        @media(min-width:1689px) {
+            .navbar-nav>li {
+                margin-left: 50px;
+            }
+
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 500px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+
+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
+            <tr>
+                <!--
+                <td rowspan="3">
+                    手動控制
+                </td>
+                -->
+                <td>
+                    測豆三通閥 狀態
+                </td>
+                <td>
+                    {% if tank_threewayvalve_bean == 1 %}
+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
+                    {% elif tank_threewayvalve_bean == 0 %}
+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
+                    {% else %}
+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
+                    {% endif %}
+                </td>
+            </tr>
+            <tr>
+                <td>開啟 測豆三通閥 吸料</td>
+                <td><input type="button" value="ON" onclick="tankThreeWayValveBean('1')"></td>
+            </tr>
+            <tr>
+                <td>關閉 測豆三通閥 排氣</td>
+                <td><input type="button" value="OFF" onclick="tankThreeWayValveBean('0')"></td>
+            </tr>
+            
+        </table>
+
+        <script language="JavaScript">
+            function changeUpdate() {
+                // clearInterval(WebUpdate_set);
+
+                var webupdate_time = $("input[name=webupdate_time]").val()
+                console.log('webupdate_time' + webupdate_time)
+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
+            }
+
+            // jQuery 更新感測器制動器狀態
+            function WebUpdate(dtn) {
+                $.get('/loading/D' + dtn, '', function (res) {
+                    if (res.tank_vacuum == 0) {
+                        $("#cmn-toggle-08").prop('checked', false);
+                    } else if (res.tank_vacuum == 1) {
+                        $("#cmn-toggle-08").prop('checked', true);
+                    }
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+                }, 'json');
+            }
+        </script>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/ctrl_D_ThreeWayValveInput.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- <meta http-equiv="refresh" content="60" />  每 content 秒網頁自動更新-->
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <!-- Rita 乾燥貨櫃 - 入料、桶槽、出料制動器 function-->
+    <script type="text/javascript" src="../static/js/dry_function.js"></script>
+
+    <script language="JavaScript">
+        // 指定 秒 刷新網頁一次
+        var tid = '{{tid}}';
+        console.log('tid:' + tid)
+        var tank_num = '{{tid}}';
+
+        $(function(){
+            $("#ctrl_D_ThreeWayValve_title").text('乾燥槽 D' + tid + ' 入料三通閥')
+            $("#dry_tank_page").text('乾燥槽 D' + tid + ' 操作介面   ')
+            $('#dry_tank_page').attr("href", "/dry_container/" + tid)
+            $("#coffee_title_pc").text('D' + tid + ' 乾燥槽_入料三通閥');
+            $("#coffee_title_phone").text('D' + tid + ' _入料三通閥');
+        });
+    </script>
+
+    <style>
+        .footer{
+            position: absolute;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        }
+
+        body {
+            margin: 0;
+        }
+
+        .navbar-dark .navbar-nav .nav-link {
+            color: white;
+            cursor: pointer;
+            text-decoration: none;
+            width: 110px;
+            height: 46px;
+        }
+
+        .nav-top {
+            line-height: 40px;
+            background-color: #C4C4C4;
+        }
+
+        .website_title {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 30px;
+            color: #000000;
+        }
+
+        .navbar-nav>li {
+            float: none;
+            display: inline-block;
+            width: 100px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .navbar-nav>li a {
+            font-size: 20px;
+        }
+
+        .main-page {
+            margin-top: 200px;
+        }
+
+        .page-title {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: bold;
+            font-size: 36px;
+        }
+
+
+        .flex {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .set-link {
+            display: inline-block;
+            width: 350px;
+            height: 100px;
+            line-height: 100px;
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            color: #FFFFFF;
+            border-radius: 10px;
+            font-size: 36px;
+        }
+
+        .cmn-toggle {
+            position: absolute;
+            margin-left: 0px;
+            visibility: hidden;
+        }
+
+        .cmn-toggle+label {
+            display: block;
+            position: relative;
+            cursor: pointer;
+            outline: none;
+            user-select: none;
+        }
+
+        input.cmn-toggle-round-flat+label {
+            padding: 2px;
+            width: 60px;
+            height: 30px;
+            background-color: #C0C0C0;
+            border-radius: 60px;
+            transition: background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat+label:before,
+        input.cmn-toggle-round-flat+label:after {
+            display: block;
+            position: absolute;
+            content: "";
+        }
+
+        input.cmn-toggle-round-flat+label:before {
+            top: 2px;
+            left: 2px;
+            bottom: 2px;
+            right: 2px;
+            background-color: #fff;
+            border-radius: 60px;
+            transition: background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat+label:after {
+            top: 4px;
+            left: 4px;
+            bottom: 4px;
+            width: 24px;
+            background-color: #dddddd;
+            border-radius: 52px;
+            transition: margin 0.4s, background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat:checked+label {
+            background-color: #C0C0C0;
+        }
+
+        input.cmn-toggle-round-flat:checked+label:after {
+            margin-left: 27px;
+            background-color: #008CBA;
+        }
+
+        @media(max-width:373px) {
+            .card {
+                margin-right: 0px;
+            }
+
+            .set-link {
+                width: 250px;
+            }
+        }
+
+        @media(max-width:577px) {}
+
+        @media(min-width:576px) {}
+
+        @media(min-width:768px) {
+            .navbar-nav>li {
+                margin-left: 0px;
+            }
+
+            .navbar-nav .li-block {
+                display: none;
+            }
+        }
+
+        @media(min-width:991px) {
+            .navbar-nav>li {
+                margin-left: 20px;
+            }
+
+            .navbar-nav .li-block {
+                display: none;
+            }
+        }
+
+        @media(min-width:1200px) {
+            .navbar-nav>li {
+                margin-left: 50px;
+            }
+
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 100px;
+            }
+        }
+
+        @media(min-width:1400px) {
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 200px;
+            }
+        }
+
+
+        @media(min-width:1689px) {
+            .navbar-nav>li {
+                margin-left: 50px;
+            }
+
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 500px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+
+        <table border="1" style="margin: auto; font-size:18px; border:2px #cccccc solid;" width=700px cellpadding="8">
+            <tr>
+                <!--
+                <td rowspan="3">
+                    手動控制
+                </td>
+                -->
+                <td>
+                    入料三通閥 狀態
+                </td>
+                <td>
+                    {% if tank_threewayvalve_input == 1 %}
+                    <span style="color:#008CBA; font-size:18px;"><strong>ON</strong></span>
+                    {% elif tank_threewayvalve_input == 0 %}
+                    <span style="color:#acacac; font-size:18px;"><strong>OFF</strong></span>
+                    {% else %}
+                    <span style="color: #fc7373;; font-size:18px;">ERROR</span>
+                    {% endif %}
+                </td>
+            </tr>
+            <tr>
+                <td>開啟 入料三通閥 吸料</td>
+                <td><input type="button" value="ON" onclick="tankThreeWayValveInput('1')"></td>
+            </tr>
+            <tr>
+                <td>關閉 入料三通閥 排氣</td>
+                <td><input type="button" value="OFF" onclick="tankThreeWayValveInput('0')"></td>
+            </tr>
+            
+        </table>
+
+        <script language="JavaScript">
+            function changeUpdate() {
+                // clearInterval(WebUpdate_set);
+
+                var webupdate_time = $("input[name=webupdate_time]").val()
+                console.log('webupdate_time' + webupdate_time)
+                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
+            }
+
+            // jQuery 更新感測器制動器狀態
+            function WebUpdate(dtn) {
+                $.get('/loading/D' + dtn, '', function (res) {
+                    if (res.tank_vacuum == 0) {
+                        $("#cmn-toggle-08").prop('checked', false);
+                    } else if (res.tank_vacuum == 1) {
+                        $("#cmn-toggle-08").prop('checked', true);
+                    }
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+                }, 'json');
+            }
+        </script>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/ctrl_F_Temp.html

@@ -310,8 +310,9 @@
             <tr>
                 <td>設定溫度</td>   
                 <td>
-                    <input id="tank_temp_data" type="text" placeholder="{{tank_temp}}" style="width: 40px;">&nbsp;℃
                     <span id="tank_temp_status" style="color:red;"></span>
+                    <input id="tank_temp_data" type="text" placeholder="{{tank_temp}}" style="width: 40px;">&nbsp;℃, 持續&nbsp;
+                    <input id="tank_temp_duration" type="text" placeholder="" style="width: 40px;">&nbsp;分鐘&nbsp;
                     <input type="button" value="送出" name="tank_temp_status" onclick="setTemp_func()"><br>
                     <span id="testing_Tempsetting_time" style="color: #f00;"></span>
 
@@ -321,8 +322,11 @@
                         function setTemp_func(){
                             var temp_data = $("input[id=tank_temp_data]").val();
                             console.log('設定溫度: ', temp_data)
-                            setTemp()
-                            var temp_interval = setInterval(checkTemp, 5000);
+                            var temp_duration = $("input[id=tank_temp_duration]").val();
+                            console.log('持溫時間: ', temp_duration)
+
+                            setTemp(temp_data, temp_duration)  // js function
+                            // var temp_interval = setInterval(checkTemp, 5000);
 
                             function checkTemp(){
                                 if (setTemp_process == 1) {

app/templates/demo.html

@@ -0,0 +1,949 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{title}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <style>
+        .span-sensor-value {
+            font-weight:600;
+            padding-left: 3px;
+        }
+        .demo_status_css {
+            font-weight: bold;
+            text-align: center;
+        }
+        .input-text {
+            height: 25px;
+            width: 35px;
+            text-align: center;
+            margin-left: 2px;
+            margin-right: 5px;
+        }
+    </style>
+    <script>
+        $(document).ready(function(){
+            $("#coffee_title_pc").text('DEMO 貨櫃');
+            $("#coffee_title_phone").text('DEMO 貨櫃');
+            // $(document).attr("title", '{{title}}');
+            loading_status();
+            loading_sensors();
+        });
+
+        clean_input_status = ['{{CI1}}', '{{CI2}}']
+        // console.log('clean_input_status: ' + clean_input_status)
+        clean_tank_status = ['{{C1}}', '{{C2}}']
+        // console.log('clean_tank_status: ' + clean_tank_status)
+        colorselect_tank_status = ['{{S1}}', '{{S2}}']
+        // console.log('colorselect_tank_status: ' + colorselect_tank_status)
+        colorselect_outputg_status = ['{{SOg1}}', '{{SOg2}}']
+        // console.log('colorselect_outputg_status: ' + colorselect_outputg_status)
+        colorselect_outputb_status = ['{{SOb1}}', '{{SOb2}}']
+        // console.log('colorselect_outputb_status: ' + colorselect_outputb_status)
+        peel_tank_status = ['{{P1}}', '{{P2}}']
+        // console.log('peel_tank_status: ' + peel_tank_status)
+        peel_output_status = ['{{PO1}}', '{{PO2}}']
+        // console.log('peel_output_status: ' + peel_output_status)
+        ferment_tank_status = ['{{F1}}', '{{F2}}']
+        dry_tank_status = ['{{D1}}', '{{D2}}']
+        dry_output_status = ['{{DO1}}', '{{DO2}}']
+        peel_outputb_status = ['{{POb1}}']
+        // console.log('peel_outputb_status: ' + peel_outputb_status)
+
+
+        // 更新桶槽狀態
+        function loading_status(){
+            for (let i=0; i<clean_input_status.length; i++) {
+                if (clean_input_status[i] == 'CI_InputtingBean') {
+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 入豆中")
+                } else if (clean_input_status[i] == 'CI_Waiting') {
+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 空桶等待")
+                } else if (clean_input_status[i] == 'CI_OutputtingBean') {
+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + " 可出豆")
+                } else if (clean_input_status[i] == 'CI_Warning') {
+                    $("#CI"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#CI"+parseInt(i+1)+"_status").text("CI" + parseInt(i+1) + "  發生錯誤")
+                    $("#CI"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('CI pass')
+                }
+            }
+
+            for (let i=0; i<clean_tank_status.length; i++) {
+                if (clean_tank_status[i] == 'C_InputtingBean') {
+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 入豆中")
+                } else if (clean_tank_status[i] == 'C_Waiting') {
+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 空桶等待")
+                } else if (clean_tank_status[i] == 'C_OutputtingBean') {
+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + " 可出豆")
+                } else if (clean_tank_status[i] == 'C_Warning') {
+                    $("#C"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#C"+parseInt(i+1)+"_status").text("C" + parseInt(i+1) + "  發生錯誤")
+                    $("#C"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('C pass')
+                }
+            }
+
+            for (let i=0; i<colorselect_tank_status.length; i++) {
+                if (colorselect_tank_status[i] == 'S_InputtingBean') {
+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 入豆中")
+                } else if (colorselect_tank_status[i] == 'S_Waiting') {
+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 空桶等待")
+                } else if (colorselect_tank_status[i] == 'S_OutputtingBean') {
+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + " 可出豆")
+                } else if (colorselect_tank_status[i] == 'S_Warning') {
+                    $("#S"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#S"+parseInt(i+1)+"_status").text("S" + parseInt(i+1) + "  發生錯誤")
+                    $("#S"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('S pass')
+                }
+            }
+
+            for (let i=0; i<colorselect_outputg_status.length; i++) {
+                if (colorselect_outputg_status[i] == 'SO_InputtingBean') {
+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 入豆中")
+                } else if (colorselect_outputg_status[i] == 'SO_Waiting') {
+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 空桶等待")
+                } else if (colorselect_outputg_status[i] == 'SO_OutputtingBean') {
+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + " 可出豆")
+                } else if (colorselect_outputg_status[i] == 'SO_Warning') {
+                    $("#SOg"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#SOg"+parseInt(i+1)+"_status").text("SOg" + parseInt(i+1) + "  發生錯誤")
+                    $("#SOg"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('SOg pass')
+                }
+            }
+
+            for (let i=0; i<colorselect_outputb_status.length; i++) {
+                if (colorselect_outputb_status[i] == 'SO_InputtingBean') {
+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 入豆中")
+                } else if (colorselect_outputb_status[i] == 'SO_Waiting') {
+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 空桶等待")
+                } else if (colorselect_outputb_status[i] == 'SO_OutputtingBean') {
+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + " 可出豆")
+                } else if (colorselect_outputb_status[i] == 'SO_Warning') {
+                    $("#SOb"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#SOb"+parseInt(i+1)+"_status").text("SOb" + parseInt(i+1) + "  發生錯誤")
+                    $("#SOb"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('SOb pass')
+                }
+            }
+
+            for (let i=0; i<peel_tank_status.length; i++) {
+                if (peel_tank_status[i] == 'P_Waiting') {
+                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 等待中")
+                } else if (peel_tank_status[i] == 'P_Peeling') {
+                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 脫皮中")
+                // } else if (peel_tank_status[i] == 'P_InputtingBean') {
+                //     $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                //     $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 入豆中")
+                // } else if (peel_tank_status[i] == 'P_OutputtingBean') {
+                //     $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                //     $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + " 可出豆")
+                } else if (peel_tank_status[i] == 'P_Warning') {
+                    $("#P"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#P"+parseInt(i+1)+"_status").text("P" + parseInt(i+1) + "  發生錯誤")
+                    $("#P"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('P pass')
+                }
+            }
+
+            for (let i=0; i<peel_output_status.length; i++) {
+                if (peel_output_status[i] == 'PO_InputtingBean') {
+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 入豆中")
+                } else if (peel_output_status[i] == 'PO_Waiting') {
+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 空桶等待")
+                } else if (peel_output_status[i] == 'PO_OutputtingBean') {
+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + " 可出豆")
+                } else if (peel_output_status[i] == 'PO_Warning') {
+                    $("#PO"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#PO"+parseInt(i+1)+"_status").text("PO" + parseInt(i+1) + "  發生錯誤")
+                    $("#PO"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('PO pass')
+                }
+            }
+            
+            for (let i=0; i<ferment_tank_status.length; i++) {
+                if (ferment_tank_status[i] == 'F_InputtingBean') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆中")
+                } else if (ferment_tank_status[i] == 'F_InputtingBean_Pause') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆暫停")
+                } else if (ferment_tank_status[i] == 'F_InputtingBean_Finish') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入豆完成")
+                } else if (ferment_tank_status[i] == 'F_InputtingWater') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  入水中")
+                } else if (ferment_tank_status[i] == 'F_Waiting') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  空桶等待")
+                } else if (ferment_tank_status[i] == 'F_Cleaning') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  清洗中")
+                } else if (ferment_tank_status[i] == 'F_Fermenting') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發酵中")
+                } else if (ferment_tank_status[i] == 'F_OutputtingBean') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  可出豆")
+                } else if (ferment_tank_status[i] == 'F_Warning') {
+                    $("#F"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#F"+parseInt(i+1)+"_status").text("F" + parseInt(i+1) + "  發生錯誤")
+                    $("#F"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('F pass')
+                }
+            }
+            
+            for (let i=0; i<dry_tank_status.length; i++) {
+                if (dry_tank_status[i] == 'D_InputtingBean') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
+                } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
+                } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
+                } else if (dry_tank_status[i] == 'D_Waiting') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
+                } else if (dry_tank_status[i] == 'D_Cleaning') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
+                } else if (dry_tank_status[i] == 'D_Drying') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
+                } else if (dry_tank_status[i] == 'D_OutputtingBean') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
+                } else if (dry_tank_status[i] == 'D_Warning') {
+                    $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
+                    $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
+                    $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
+                } else {
+                    console.log('pass')
+                }
+            }
+
+            for (let i=0; i<dry_output_status.length; i++) {
+                if (dry_output_status[i] == 'DO_InputtingBean') {
+                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
+                } else if (dry_output_status[i] == 'DO_Waiting') {
+                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
+                } else if (dry_output_status[i] == 'DO_OutputtingBean') {
+                    $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
+                } else {
+                    console.log('DO pass')
+                }
+            }
+
+            for (let i=0; i<peel_outputb_status.length; i++) {
+                if (peel_outputb_status[i] == 'PO_InputtingBean') {
+                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 入豆中")
+                } else if (peel_outputb_status[i] == 'PO_Waiting') {
+                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
+                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 空桶等待")
+                } else if (peel_outputb_status[i] == 'PO_OutputtingBean') {
+                    $("#POb"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
+                    $("#POb"+parseInt(i+1)+"_status").text("POb" + parseInt(i+1) + " 可出豆")
+                } else {
+                    console.log('POb pass')
+                }
+            }
+
+            // 
+
+        };
+
+        // 更新 UltraSonic 數值
+        function loading_sensors(){
+            $.get('/loading_sensors', '', function (res){
+                $("#C1_UltraSonic").text(res.C1_UltraSonic);
+                $("#C2_UltraSonic").text(res.C2_UltraSonic);
+                $("#PO1_UltraSonic").text(res.PO1_UltraSonic);
+                $("#PO2_UltraSonic").text(res.PO2_UltraSonic);
+                $("#F1_UltraSonic").text(res.F1_UltraSonic);
+                $("#F1_SHT11Temp").text(res.F1_SHT11Temp);
+                $("#F1_SHT11Humidity").text(res.F1_SHT11Humidity);
+                $("#F2_UltraSonic").text(res.F2_UltraSonic);
+                $("#D1_UltraSonic").text(res.D1_UltraSonic);
+                $("#D1_SHT11Temp").text(res.D1_SHT11Temp);
+                $("#D1_SHT11Humidity").text(res.D1_SHT11Humidity);
+                $("#D2_UltraSonic").text(res.D2_UltraSonic);
+                $("#DO1_UltraSonic").text(res.DO1_UltraSonic);
+                $("#DO2_UltraSonic").text(res.DO2_UltraSonic);
+            }, 'json');
+        }
+
+        var data;                       // 狀態判斷傳參數用
+        var peel_status_process = 0;    
+        var peel_status_interval;       // 脫皮機自動化, 間隔 5 秒執行
+        var ferment_status_process = 0;
+        var ferment_status_interval;    // 發酵槽自動化, 間隔 5 秒執行
+        var dry_status_process = 0;
+        var dry_status_interval;        // 乾燥槽自動化, 間隔 5 秒執行
+                    
+    </script>
+</head>
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+            
+        </div>
+
+        <div>
+            <!-- DEMO 貨櫃 狀態表格 -->
+            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
+                <tr>
+                    <td>
+                        <!-- 清洗浮選槽入料 CI1 -->
+                        <div id="CI1" tabindex="0" class="CI1_position" role="button" style="text-align: center;">
+                            <span id="CI1_status" class="demo_status_css">CI1 status</span>
+                            <div id="CI1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 清洗浮選槽 C1 -->
+                        <div id="C1" tabindex="0" class="C1_position" role="button" style="text-align: center;">
+                            <span id="C1_status" class="demo_status_css">C1 status</span>
+                            <div id="C1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        中水桶
+                    </td>
+                    <td>
+                        <!-- 色選機 S1 -->
+                        <div id="S1" tabindex="0" class="S1_position" role="button" style="text-align: center;">
+                            <span id="S1_status" class="demo_status_css">S1 status</span>
+                            <div id="S1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 色選機好果 SOg1 -->
+                        <div id="SOg1" tabindex="0" class="SOg1_position" role="button" style="text-align: center;">
+                            <span id="SOg1_status" class="demo_status_css">SOg1 status</span>
+                            <div id="SOg1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 色選機好果 SOb1 -->
+                        <div id="SOb1" tabindex="0" class="SOb1_position" role="button" style="text-align: center;">
+                            <span id="SOb1_status" class="demo_status_css">SOb1 status</span>
+                            <div id="SOb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 脫皮機 P1 -->
+                        <div id="P1" tabindex="0" class="P1_position" role="button" style="text-align: center;">
+                            <span id="P1_status" class="demo_status_css">P1 status</span>
+                            <div id="P1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 脫皮機出料儲豆槽 PO1 -->
+                        <div id="PO1" tabindex="0" class="PO1_position" role="button" style="text-align: center;">
+                            <span id="PO1_status" class="demo_status_css">PO1 status</span>
+                            <div id="PO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 發酵槽 F1 -->
+                        <div id="F1" tabindex="0" class="F1_position" role="button" style="vertical-align: bottom;">
+                            <span id="F1_status" class="demo_status_css">F1 status</span>
+                            <div id="F1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 乾燥槽 D1 -->
+                        <div id="D1" tabindex="0" class="D1_position" role="button" style="vertical-align: bottom;">
+                            <span id="D1_status" class="demo_status_css">D1 status</span>
+                            <div id="D1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 乾燥槽 DO1 -->
+                        <div id="DO1" tabindex="0" class="DO1_position" role="button" style="vertical-align: bottom;">
+                            <span id="DO1_status" class="demo_status_css">DO1 status</span>
+                            <div id="DO1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        清洗<br>
+                        入料儲豆槽
+                    </td>
+                    <td>
+                        清洗浮選槽
+                    </td>
+                    <td>
+                        中水桶
+                    </td>
+                    <td>
+                        色選機
+                    </td>
+                    <td>
+                        色選機出料<br>好果
+                    </td>
+                    <td>
+                        色選機出料<br>壞果
+                    </td>
+                    <td>
+                        脫皮機
+                    </td>
+                    <td>
+                        脫皮機<br>出料儲豆槽
+                    </td>
+                    <td>
+                        發酵槽
+                    </td>
+                    <td>
+                        乾燥槽
+                    </td>
+                    <td>
+                        乾燥<br>
+                        出料除豆槽
+                    </td>
+                    <td>
+                        壞豆
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        <!-- 清洗浮選槽入料 CI2 -->
+                        <div id="CI2" tabindex="0" class="CI2_position" role="button" style="text-align: center;">
+                            <span id="CI2_status" class="demo_status_css">CI2 status</span>
+                            <div id="CI2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 清洗浮選槽 C2 -->
+                        <div id="C2" tabindex="0" class="C2_position" role="button" style="text-align: center;">
+                            <span id="C2_status" class="demo_status_css">C2 status</span>
+                            <div id="C2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        中水桶
+                    </td>
+                    <td>
+                        <!-- 色選機 S2 -->
+                        <div id="S2" tabindex="0" class="S2_position" role="button" style="text-align: center;">
+                            <span id="S2_status" class="demo_status_css">S2 status</span>
+                            <div id="S2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 色選機好果 SOg2 -->
+                        <div id="SOg2" tabindex="0" class="SOg2_position" role="button" style="text-align: center;">
+                            <span id="SOg2_status" class="demo_status_css">SOg2 status</span>
+                            <div id="SOg2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 色選機好果 SOb2 -->
+                        <div id="SOb2" tabindex="0" class="SOb2_position" role="button" style="text-align: center;">
+                            <span id="SOb2_status" class="demo_status_css">SOb2 status</span>
+                            <div id="SOb2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 脫皮機 P2 -->
+                        <div id="P2" tabindex="0" class="P2_position" role="button" style="text-align: center;">
+                            <span id="P2_status" class="demo_status_css">P2 status</span>
+                            <div id="P2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 脫皮機出料儲豆槽 PO2 -->
+                        <div id="PO2" tabindex="0" class="PO2_position" role="button" style="text-align: center;">
+                            <span id="PO2_status" class="demo_status_css">PO2 status</span>
+                            <div id="PO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 發酵槽 F2 -->
+                        <div id="F2" tabindex="0" class="F2_position" role="button" style="vertical-align: bottom;">
+                            <span id="F2_status" class="demo_status_css">F2 status</span>
+                            <div id="F2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 乾燥槽 D2 -->
+                        <div id="D2" tabindex="0" class="D2_position" role="button" style="vertical-align: bottom;">
+                            <span id="D2_status" class="demo_status_css">D2 status</span>
+                            <div id="D2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 乾燥槽 DO2 -->
+                        <div id="DO2" tabindex="0" class="DO2_position" role="button" style="vertical-align: bottom;">
+                            <span id="DO2_status" class="demo_status_css">DO2 status</span>
+                            <div id="DO2_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                    <td>
+                        <!-- 壞豆槽 POb1 -->
+                        <div id="POb1" tabindex="0" class="POb1_position" role="button" style="vertical-align: bottom;">
+                            <span id="POb1_status" class="demo_status_css">POb1 status</span>
+                            <div id="POb1_status_dot" style="width: 110px; height: 20px; background-color: black;"></div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+
+            <!-- DEMO 貨櫃 參數設定 -->
+            <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
+                <tr>
+                    <td>
+                        清洗入料
+                    </td>
+                    <td>
+                        清洗浮選
+                    </td>
+                    <td>
+                        中水桶
+                    </td>
+                    <td>
+                        色選機
+                    </td>
+                    <td>
+                        出料好果
+                    </td>
+                    <td>
+                        出料壞果
+                    </td>
+                    <td>
+                        脫皮機
+                    </td>
+                    <td>
+                        脫皮機出料
+                    </td>
+                    <td>
+                        發酵槽
+                    </td>
+                    <td>
+                        乾燥槽
+                    </td>
+                    <td>
+                        乾燥出料
+                    </td>
+
+                </tr>
+                <tr style="vertical-align: top;">
+                    <td colspan="3">
+                        CI1_UltraSonic: <span id="CI1_UltraSonic" class="span-sensor-value">null</span><br>
+                        C1_UltraSonic: <span id="C1_UltraSonic" class="span-sensor-value">null</span><br>
+                        ----- 清洗入料 -----<br>
+                        生豆高度
+                        <input id="DEMO_CI_Bean_height" type="text" class="input-text" value="10">cm<br>
+                        吸料時間
+                        <input id="DEMO_CI_vacuumON_time" type="text" class="input-text" value="5">秒<br>
+                        放料時間
+                        <input id="DEMO_CI_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
+                        ----- 清洗浮選 -----<br>
+                        生豆高度
+                        <input id="DEMO_C_Bean_height" type="text" class="input-text" value="10">cm<br>
+                        吸料時間
+                        <input id="DEMO_C_vacuumON_time" type="text" class="input-text" value="5">秒<br>
+                        放料時間
+                        <input id="DEMO_C_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
+                        水位高度
+                        <input id="DEMO_W_Bean_height" type="text" class="input-text" value="10">cm<br>
+                        ------ 中水桶 ------<br>
+                        水位高度
+                        <input id="DEMO_WaterTank_Water_height" type="text" class="input-text" value="50">cm<br>
+                    </td>
+                    <td colspan="3">
+                        S1_UltraSonic: <span id="S1_UltraSonic" class="span-sensor-value">null</span><br>
+                        ------ 色選機 ------<br>
+                        生豆高度
+                        <input id="DEMO_S_Bean_height" type="text" class="input-text" value="10">cm<br>
+                        吸料時間
+                        <input id="DEMO_S_vacuumON_time" type="text" class="input-text" value="5">秒<br>
+                        放料時間
+                        <input id="DEMO_S_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
+                        ----- 出料好果 -----<br>
+                        生豆高度
+                        <input id="DEMO_SOg_Bean_height" type="text" class="input-text" value="10">cm<br>
+                        ----- 出料壞果 -----<br>
+                        生豆高度
+                        <input id="DEMO_SOb_Bean_height" type="text" class="input-text" value="10">cm<br>
+                    </td>
+                    <td colspan="2">
+                        PO1_UltraSonic: <span id="PO1_UltraSonic" class="span-sensor-value">null</span><br>
+                        ------ 脫皮機 ------<br>
+                        馬達轉速
+                        <input name="Peel_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
+                        吸料時間
+                        <input name="Peel_Tank_vacuumON_time" type="text" class="input-text" value="3">秒<br>
+                        放料時間
+                        <input name="Peel_Tank_vacuumOFF_time" type="text" class="input-text" value="30">秒<br>
+                        --- 脫皮機出料 ---<br>
+                        生豆高度
+                        <input name="Peel_Tank_bean_height" type="text" class="input-text" value="10">cm<br>
+                    </td>
+                    <td>
+                        F1_UltraSonic: <span id="F1_UltraSonic" class="span-sensor-value">null</span><br>
+                        F1_SHT11Temp: <span id="F1_SHT11Temp" class="span-sensor-value">null</span><br>
+                        F1_SHT11Humidity: <span id="F1_SHT11Humidity" class="span-sensor-value">null</span><br>
+                        ------ 發酵槽 ------<br>
+                        生豆高度
+                        <input name="Ferment_Tank_bean_height" class="input-text" type="text" value="10">cm<br>
+                        吸料時間
+                        <input name="Ferment_Tank_vacuumON_time" class="input-text" type="text" value="5">秒<br>
+                        放料時間
+                        <input name="Ferment_Tank_vacuumOFF_time" class="input-text" type="text" value="10">秒<br>
+                        <br>
+                        水位高度
+                        <input name="Ferment_Tank_water_height" class="input-text" type="text" value="15">cm<br>
+                        馬達轉速
+                        <input name="Ferment_Tank_motor_rpm" class="input-text" type="text" value="15">rpm<br>
+                        <br>
+                        發酵溫度
+                        <input name="Ferment_Tank_fermenting_temp" class="input-text" type="text" value="10">℃<br>
+                        發酵等待
+                        <input name="Ferment_Tank_fermenting_time" class="input-text" type="text" value="5">秒<br>
+                        廢水排放
+                        <input name="Ferment_Tank_WaterOut_time" class="input-text" type="text" value="5">秒
+                    </td>
+                    <td>
+                        D1_UltraSonic: <span id="D1_UltraSonic" class="span-sensor-value">null</span><br>
+                        D1_SHT11Temp: <span id="D1_SHT11Temp" class="span-sensor-value">null</span><br>
+                        D1_SHT11Humidity: <span id="D1_SHT11Humidity" class="span-sensor-value">null</span><br>
+                        ------ 乾燥槽 ------<br>
+                        <!-- 乾燥槽 -->
+                        生豆高度
+                        <input name="Dry_Tank_bean_height" type="text" class="input-text" value="10">cm<br>
+                        吸料時間
+                        <input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="5">秒<br>
+                        放料時間
+                        <input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
+                        馬達轉速
+                        <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="0">rpm<br>
+                        <br>
+                        指定溫度
+                        <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="38">℃<br>
+                        指定濕度 
+                        <input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="11">%<br>
+                        返潮時間
+                        <input name="Dry_Tank_drying_time" type="text" class="input-text" value="5">秒<br>
+                    </td>
+                    <td>
+                        DO1_UltraSonic: <span id="DO1_UltraSonic" class="span-sensor-value">null</span><br>
+                        ----- 乾燥出料 -----<br>
+                        <!-- 乾燥出料 -->
+                        生豆高度
+                        <input name="Dry_Output_bean_height" type="text" class="input-text" value="10">cm<br>
+                        吸料時間
+                        <input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>
+                        放料時間 
+                        <input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="stop_Drying_OutputtingBean()">
+                            暫停乾燥<br><u>開啟 D1 蝴蝶閥</u></button>
+                        <br>
+                        <br>
+                        <div style="font-size: 12px; color: crimson; line-height: 15px;">測試水份後<br>將桶槽改為入料中<br>D1_UltraSonic 改為 0</div>
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('1')">
+                            D1 蝴蝶閥 ON</u></button><br>
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="DtankDiskValve('0')">
+                            D1 蝴蝶閥 OFF</u></button>
+                        <script>
+                            function DtankDiskValve(params) {
+                                if (params == '1') {
+                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "on" };
+                                } else if (params == '0') {
+                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": "off" };
+                                } else {
+                                    data = { "tank_num": "D1", "command": "tank_diskvalve_status", "value": params };
+                                }
+                                $.post('/mqtt/1', data, function (res) {
+                                    console.log('data: ', data)
+                                    console.log('res: ', res)
+                                }, 'text')
+                            }
+                            
+                            // var outputtingBean_interval
+
+                            // function stop_Drying_OutputtingBean_IN(){
+                            //     console.log("---- 測試後入料 ----")
+                            // }
+
+                            function stop_Drying_OutputtingBean(){
+                                clearInterval(dry_status_interval)
+                                console.log("------- 狀態自動化判斷 停止 -------")
+                                console.log("---- 出料至儲豆槽 ----")
+
+                                var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
+                                var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
+                                var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
+
+                                data = {"command": "stop_Drying_OutputtingBean",
+                                        "Dry_Output_bean_height": Dry_Output_bean_height,
+                                        "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
+                                        "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time
+                                        };
+
+                                // 更新桶槽狀態
+                                $.get('/dryDEMO_outputtingBean', data, function (res){
+                                    D1 = res.Dry_Tank_1
+                                    D2 = res.Dry_Tank_2
+                                    DO1 = res.Dry_Output_1
+                                    DO2 = res.Dry_Output_2
+                                    dry_tank_status = [D1, D2]
+                                    dry_output_status = [DO1, DO2]
+
+                                    loading_status();
+                                    loading_sensors();
+
+                                }, 'json');
+
+                            }
+                        </script>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="3">
+                        清洗自動化
+                    </td>
+                    <td colspan="3">
+                        色選自動化
+                    </td>
+                    <td colspan="2">
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_testing()">
+                            脫皮自動化</button>
+                        <br>
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_stop()">
+                            <u>脫皮停止</u></button>
+                        <script>
+                            function peel_auto_status_stop(){
+                                clearInterval(peel_status_interval)
+                                console.log("------- 脫皮自動化判斷 停止 -------")
+                            }
+
+                            function peel_auto_status_testing(){
+                                console.log("------- 脫皮自動化判斷 開始 -------")
+                                var Peel_Tank_bean_height = $('input[name=Peel_Tank_bean_height]').val();
+                                var Peel_Tank_motor_rpm = $('input[name=Peel_Tank_motor_rpm]').val();
+                                var Peel_Tank_vacuumON_time = $('input[name=Peel_Tank_vacuumON_time]').val();
+                                var Peel_Tank_vacuumOFF_time = $('input[name=Peel_Tank_vacuumOFF_time]').val();
+
+                                data = {"Peel_Tank_bean_height":Peel_Tank_bean_height,
+                                        "Peel_Tank_motor_rpm":Peel_Tank_motor_rpm,
+                                        "Peel_Tank_vacuumON_time":Peel_Tank_vacuumON_time,
+                                        "Peel_Tank_vacuumOFF_time":Peel_Tank_vacuumOFF_time
+                                        }
+
+                                // 更新桶槽狀態
+                                peel_status_interval = setInterval(peel_auto_status, 5*1000);
+                                // peel_auto_status()
+
+                                function peel_auto_status(){
+                                    if (peel_status_process == 1) { return }
+
+                                    peel_status_process = 1;
+                                    $.get('/peel_auto_status', data, function (res){
+                                        P1 = res.Peel_Tank_1
+                                        P2 = res.Peel_Tank_2
+                                        PO1 = res.Peel_Output_1
+                                        PO2 = res.Peel_Output_2
+
+                                        peel_tank_status = [P1, P2]
+                                        peel_output_status = [PO1, PO2]
+                                        loading_status();
+                                        loading_sensors();
+
+                                        peel_status_process = 0;
+                                    }, 'json');
+                                }
+                            }
+                        </script>
+                    </td>
+                    <td>
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_testing()">
+                            發酵自動化</button>
+                        <br>
+                        <button style="margin: 5px 5px 0px 5px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="ferment_auto_status_stop()">
+                            <u>發酵停止</u></button>
+                        <script>
+                            function ferment_auto_status_stop(){
+                                clearInterval(ferment_status_interval)
+                                console.log("------- 發酵自動化判斷 停止 -------")
+                            }
+
+                            function ferment_auto_status_testing(){
+                                console.log("------- 發酵自動化判斷 開始 -------")
+                                var Ferment_Tank_bean_height = $("input[name=Ferment_Tank_bean_height]").val();
+                                var Ferment_Tank_vacuumON_time = $("input[name=Ferment_Tank_vacuumON_time]").val();
+                                var Ferment_Tank_vacuumOFF_time = $("input[name=Ferment_Tank_vacuumOFF_time]").val();
+                                var Ferment_Tank_water_height = $("input[name=Ferment_Tank_water_height]").val();
+                                var Ferment_Tank_motor_rpm = $("input[name=Ferment_Tank_motor_rpm]").val();
+                                var Ferment_Tank_fermenting_temp = $("input[name=Ferment_Tank_fermenting_temp]").val();
+                                var Ferment_Tank_fermenting_time = $("input[name=Ferment_Tank_fermenting_time]").val();
+                                var Ferment_Tank_WaterOut_time = $("input[name=Ferment_Tank_WaterOut_time]").val();
+
+                                data = {"Ferment_Tank_bean_height":Ferment_Tank_bean_height,
+                                        "Ferment_Tank_vacuumON_time":Ferment_Tank_vacuumON_time,
+                                        "Ferment_Tank_vacuumOFF_time":Ferment_Tank_vacuumOFF_time,
+                                        "Ferment_Tank_water_height":Ferment_Tank_water_height,
+                                        "Ferment_Tank_motor_rpm":Ferment_Tank_motor_rpm,
+                                        "Ferment_Tank_fermenting_temp":Ferment_Tank_fermenting_temp,
+                                        "Ferment_Tank_fermenting_time":Ferment_Tank_fermenting_time,
+                                        "Ferment_Tank_WaterOut_time":Ferment_Tank_WaterOut_time
+                                        }
+
+                                // 更新桶槽狀態
+                                ferment_status_interval = setInterval(ferment_auto_status, 5*1000);
+                                // ferment_auto_status();
+
+                                function ferment_auto_status(){
+                                    if (ferment_status_process == 1) { return }
+
+                                    ferment_status_process = 1;
+                                    $.get('/fermentDEMO_auto_status', data, function (res){
+                                        F1 = res.Ferment_Tank_1
+                                        F2 = res.Ferment_Tank_2
+                                        ferment_tank_status = [F1, F2]
+
+                                        loading_status();
+                                        loading_sensors();
+                                        ferment_status_process = 0;
+                                    }, 'json');
+                                }
+
+                            }
+                        </script>
+                    </td>
+                    <td colspan="2">
+                        <button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">
+                            <u>乾燥自動化</u></button>
+                            <br>
+                        <button style="margin: 5px 10px 0px 10px; font-size: 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">
+                            <u>乾燥停止</u></button>
+                        <script>
+                            function dry_auto_status_stop(){
+                                clearInterval(dry_status_interval)
+                                console.log("------- 狀態自動化判斷 停止 -------")
+                            }
+                            function dry_auto_status_testing(){
+                                console.log("------- 發酵自動化判斷 開始 -------")
+                                
+                                var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
+                                var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
+                                var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
+                                var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
+                                var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
+                                var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
+                                var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
+                                var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
+                                var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
+                                var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
+                            
+
+                                data = {"command": "Dry_auto_parameter",
+                                        "Dry_Tank_bean_height": Dry_Tank_bean_height,
+                                        "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,
+                                        "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,
+                                        "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,
+                                        "Dry_Tank_drying_temp": Dry_Tank_drying_temp,
+                                        "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,
+                                        "Dry_Tank_drying_time": Dry_Tank_drying_time,
+                                        "Dry_Output_bean_height": Dry_Output_bean_height,
+                                        "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
+                                        "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time
+                                        };
+
+                                // 更新桶槽狀態
+                                dry_status_interval = setInterval(dry_auto_status, 5*1000);
+                                // dry_auto_status();
+
+                                function dry_auto_status(){
+                                    if (dry_status_process == 1) { return }
+
+                                    dry_status_process = 1;
+                                    $.get('/dryDEMO_auto_status', data, function (res){
+                                        D1 = res.Dry_Tank_1
+                                        D2 = res.Dry_Tank_2
+                                        DO1 = res.Dry_Output_1
+                                        DO2 = res.Dry_Output_2
+                                        dry_tank_status = [D1, D2]
+                                        dry_output_status = [DO1, DO2]
+
+                                        loading_status();
+                                        loading_sensors();
+                                        dry_status_process = 0;
+                                    }, 'json');
+                                }
+
+                            }
+                        </script>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+
+    </div>
+    
+</body>
+</html>

app/templates/drop_down_list.html

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <style>
+        .newcondition_css {
+            padding: 10px;
+            margin-top: 10px;
+            background-color: honeydew;
+        }
+
+        hr {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <!--     
+    <script>
+        // [系統]更新: Array / renew_system function
+        system_object = new Array();
+        system_object[0] = ["   "];
+        system_object[1] = ["   ", "清洗槽組立"];
+        system_object[2] = ["   ", "發酵桶組立"];
+        system_object[3] = ["   ", "乾燥桶組立"];
+        function renew_system(index) {
+            var Value="";
+            for(var i=0; i<system_object[index].length; i++){
+                Value = Value + '<option value=' + system_object[index][i] + '> ' + system_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("system");
+            sectorSelect.innerHTML = Value;
+            $('#product_index').text(index)
+        }
+        // [模組]更新: Array / renew_system function
+        module_object = new Array();
+        module_object[0] = ["   "];
+        module_object[1] = ["   ", "c1上蓋組立", "c2內桶槽組立"];
+        module_object[2] = ["   ", "f1上蓋組立", "f2控制盒組立"];
+        module_object[3] = ["   ", "d1上蓋組立", "d2控制盒組立"];
+        
+        function renew_module(index) {
+            var Value="";
+            for(var i=0; i<module_object[index].length; i++){
+                Value = Value + '<option value=' + module_object[index][i] + '>' + module_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("module");
+            sectorSelect.innerHTML = Value;
+            $('#system_index').text(index)
+        }
+        // // [零件]更新: Array / renew_system function
+        component_object = new Array();
+        component_object[0] = ["   "];
+        component_object[1][1] = ["   ", "c1_M10平墊圈", "c1_M10螺帽"];
+        component_object[1][2] = ["   ", "c2_內桶槽", "c2_內桶槽固定環"];
+        component_object[2][1] = ["   ", "f1_吸料機入料管", "f1_入料斗擋板"];
+        component_object[2][2] = ["   ", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];
+        component_object[3][1] = ["   ", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];
+        component_object[3][2] = ["   ", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];
+        function renew_component(product_index, index) {
+            var Value="";
+            for(var i=0; i<component_object[product_index][index].length; i++){
+                Value = Value + '<option value=' + component_object[product_index][index] + '>' + component_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("component");
+            sectorSelect.innerHTML = Value;
+            $('#module_index').text(index)
+        }
+        // // 輸出零件 index
+        function renew_item(index) {
+            $('#component_index').text(index)
+        }
+
+    </script>
+     -->
+    <br>
+
+    產品:
+    <select id="product" onChange="renew_system(this.selectedIndex);">
+    </select>
+    系統:
+    <select id="system" onChange="renew_module(this.selectedIndex);">
+    </select>
+    模組:
+    <select id="module" onChange="renew_component(this.selectedIndex);">
+    </select>
+    零件:
+    <select id="component" onChange="">
+        <input type="button" id="input_value" value="取值" onclick="printValue();"><br>
+        取值: <span id="span_value"></span>
+    </select><br>
+
+    <script>
+        // 輸出關鍵字
+        function printValue() {
+            // database 取值語法
+            var data = 'select * from teststock1213';
+            // 取得下拉式選單選擇的 value
+            var product_value = $("#product").val();
+            var system_value = $("#system").val();
+            var module_value = $("#module").val();
+            var component_value = $("#component").val();
+            if (product_value != '*' || system_value != '*' || module_value != '*' || component_value != '*') {
+                data += ' WHERE ';
+
+                if (product_value != '*') {
+                    data += '`產品` = ' + product_value;
+                    if (system_value != '*' || module_value != '*' || component_value != '*') {
+                        data += ' AND ';
+                    }
+                }
+                if (system_value != '*') {
+                    data += '`系統` = ' + system_value;
+                    if (module_value != '*' || component_value != '*') {
+                        data += ' AND ';
+                    }
+                }
+                if (module_value != '*') {
+                    data += '`模組` = ' + module_value;
+                    if (component_value != '*') {
+                        data += ' AND ';
+                    }
+                }
+                if (component_value != '*') {
+                    data += '`零件` = ' + component_value;
+                }
+            }
+
+            // if product_value
+            $("#span_value").text(data)
+        }
+
+        // 資料庫中的所有 [產品]
+        var product_item = ["*", "清洗貨櫃", "發酵貨櫃", "乾燥貨櫃"]
+        var inner = '';
+        for (let i = 0; i < product_item.length; i++) {
+            inner += '<option value="' + product_item[i] + '">' + product_item[i] + '</option>';
+        }
+        var sectorSelect = document.getElementById("product");
+        sectorSelect.innerHTML = inner;
+        // 資料庫中的所有 [系統]
+        var system_item = ["*", "清洗槽組立", "發酵桶組立", "乾燥桶組立"]
+        var inner = '';
+        for (let i = 0; i < system_item.length; i++) {
+            inner += '<option value="' + system_item[i] + '">' + system_item[i] + '</option>';
+        }
+        var sectorSelect = document.getElementById("system");
+        sectorSelect.innerHTML = inner;
+        // 資料庫中的所有 [模組]
+        var module_item = ["*", "上蓋組立", "內桶槽組立", "控制盒組立"]
+        var inner = '';
+        for (let i = 0; i < module_item.length; i++) {
+            inner += '<option value="' + module_item[i] + '">' + module_item[i] + '</option>';
+        }
+        var sectorSelect = document.getElementById("module");
+        sectorSelect.innerHTML = inner;
+        // 資料庫中的所有 [零件]
+        var component_item = ["*", "M10平墊圈", "M10螺帽", "內桶槽", "內桶槽固定環", "吸料機入料管",
+            "入料斗擋板", "LED指示燈_綠色 TB12LED-G0201", "K3 LED指示燈-主板",
+            "軸心(單邊出軸)", "墊片M18x25x1.5", "M3x5螺絲", "M3x5銅柱 1公1母"]
+        var inner = '';
+        for (let i = 0; i < component_item.length; i++) {
+            inner += '<option value="' + component_item[i] + '">' + component_item[i] + '</option>';
+        }
+        var sectorSelect = document.getElementById("component");
+        sectorSelect.innerHTML = inner;
+
+
+        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+        // 系統的 index
+        var sysIndex;
+        // [系統]更新: Array / renew_system function
+        system_object = new Array();
+        system_object[0] = ["*"];
+        system_object[1] = ["*", "清洗槽組立"];
+        system_object[2] = ["*", "發酵桶組立"];
+        system_object[3] = ["*", "乾燥桶組立"];
+        function renew_system(index) {
+            sysIndex = index
+            var inner = '';
+            for (let i = 0; i < system_object[index].length; i++) {
+                inner += '<option value="' + system_object[index][i] + '">' + system_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("system");
+            sectorSelect.innerHTML = inner;
+        }
+
+        // 模組的 index
+        var moIndex;
+        // [模組]更新: Array / renew_system function
+        module_object = new Array();
+        module_object[0] = ["*"];
+        module_object[1] = ["*", "清洗槽組立"];
+        module_object[2] = ["*", "發酵桶組立"];
+        module_object[3] = ["*", "乾燥桶組立"];
+        module_object[0][0] = ["*"];
+        module_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];
+        module_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];
+        module_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];
+        function renew_module(index) {
+            moIndex = index
+            var inner = '';
+            for (let i = 0; i < module_object[sysIndex][index].length; i++) {
+                inner += '<option value="' + module_object[sysIndex][index][i] + '">' + module_object[sysIndex][index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("module");
+            sectorSelect.innerHTML = inner;
+        }
+
+        // 零件
+        // // [零件]更新: Array / renew_system function
+        component_object = new Array();
+        component_object[0] = ["*"];
+        component_object[1] = ["*", "清洗槽組立"];
+        component_object[2] = ["*", "發酵桶組立"];
+        component_object[3] = ["*", "乾燥桶組立"];
+        component_object[0][0] = ["*"];
+        component_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];
+        component_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];
+        component_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];
+        component_object[0][0][0] = ["*"];
+        component_object[1][1][0] = ["*"];
+        component_object[1][1][1] = ["*", "c1_M10平墊圈", "c1_M10螺帽"];
+        component_object[1][1][2] = ["*", "c2_內桶槽", "c2_內桶槽固定環"];
+        component_object[2][1][0] = ["*"];
+        component_object[2][1][1] = ["*", "f1_吸料機入料管", "f1_入料斗擋板"];
+        component_object[2][1][2] = ["*", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];
+        component_object[3][1][0] = ["*"];
+        component_object[3][1][1] = ["*", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];
+        component_object[3][1][2] = ["*", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];
+        function renew_component(index) {
+            var Value = "";
+            for (var i = 0; i < component_object[sysIndex][moIndex][index].length; i++) {
+                Value = Value + '<option value="' + component_object[sysIndex][moIndex][index][i] + '">' + component_object[sysIndex][moIndex][index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("component");
+            sectorSelect.innerHTML = Value;
+        }
+    </script>
+    <!-- // 資料庫中的所有 [產品]
+        var product_item = ["*", "清洗貨櫃", "發酵貨櫃", "乾燥貨櫃"]
+        var inner = '';
+        for (let i = 0; i < product_item.length; i++) {
+            inner += '<option value="' + product_item[i] + '">' + product_item[i] + '</option>';
+        }
+        var sectorSelect = document.getElementById("product");
+        sectorSelect.innerHTML = inner; -->
+
+    <table class="table table-bordered">
+        <tr>
+            {% for i1 in labels %}
+            <th>{{i1}}</th>
+            {% endfor %}
+        </tr>
+        {% for i in content %}
+        
+        <tr id="tr_content">
+            
+            <td>{{ i[0] }}</td>
+            <td>{{ i[1] }}</td>
+            <td>{{ i[2] }}</td>
+            <td>{{ i[3] }}</td>
+            <td>{{ i[4] }}</td>
+            <td>{{ i[5] }}</td>
+            <td>{{ i[6] }}</td>
+            <td>{{ i[7] }}</td>
+            <td>{{ i[8] }}</td>
+            <td>{{ i[9] }}</td>
+            <td>{{ i[10] }}</td>
+            <td>{{ i[11] }}</td>
+            <td>{{ i[12] }}</td>
+            <td>{{ i[13] }}</td>
+            <td>{{ i[14] }}</td>
+            <td>{{ i[15] }}</td>
+        </tr>
+        {% endfor %}
+    </table>
+
+
+</body>
+
+</html>

app/templates/drop_down_list_12094layers.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <style>
+        .newcondition_css {
+            padding: 10px;
+            margin-top: 10px;
+            background-color:honeydew;
+        }
+        hr {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <!--     
+    <script>
+        // [系統]更新：Array / renew_system function
+        system_object = new Array();
+        system_object[0] = ["   "];
+        system_object[1] = ["   ", "清洗槽組立"];
+        system_object[2] = ["   ", "發酵桶組立"];
+        system_object[3] = ["   ", "乾燥桶組立"];
+        function renew_system(index) {
+            var Value="";
+            for(var i=0; i<system_object[index].length; i++){
+                Value = Value + '<option value=' + system_object[index][i] + '> ' + system_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("system");
+            sectorSelect.innerHTML = Value;
+            $('#product_index').text(index)
+        }
+        // [模組]更新：Array / renew_system function
+        module_object = new Array();
+        module_object[0] = ["   "];
+        module_object[1] = ["   ", "c1上蓋組立", "c2內桶槽組立"];
+        module_object[2] = ["   ", "f1上蓋組立", "f2控制盒組立"];
+        module_object[3] = ["   ", "d1上蓋組立", "d2控制盒組立"];
+        
+        function renew_module(index) {
+            var Value="";
+            for(var i=0; i<module_object[index].length; i++){
+                Value = Value + '<option value=' + module_object[index][i] + '>' + module_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("module");
+            sectorSelect.innerHTML = Value;
+            $('#system_index').text(index)
+        }
+        // // [零件]更新：Array / renew_system function
+        component_object = new Array();
+        component_object[0] = ["   "];
+        component_object[1][1] = ["   ", "c1_M10平墊圈", "c1_M10螺帽"];
+        component_object[1][2] = ["   ", "c2_內桶槽", "c2_內桶槽固定環"];
+        component_object[2][1] = ["   ", "f1_吸料機入料管", "f1_入料斗擋板"];
+        component_object[2][2] = ["   ", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];
+        component_object[3][1] = ["   ", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];
+        component_object[3][2] = ["   ", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];
+        function renew_component(product_index, index) {
+            var Value="";
+            for(var i=0; i<component_object[product_index][index].length; i++){
+                Value = Value + '<option value=' + component_object[product_index][index] + '>' + component_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("component");
+            sectorSelect.innerHTML = Value;
+            $('#module_index').text(index)
+        }
+        // // 輸出零件 index
+        function renew_item(index) {
+            $('#component_index').text(index)
+        }
+
+    </script>
+     -->
+    <br>
+
+    產品：
+    <!--   -->
+    <select id="product" onChange="renew_system(this.selectedIndex);">
+    </select>
+    系統：
+    <select id="system" onChange="renew_module(this.selectedIndex);">
+    </select>
+    模組：
+    <select id="module" onChange="renew_component(this.selectedIndex);">
+    </select>
+    零件：
+    <select id="component" onChange="renew_item(this.selectedIndex);">
+    </select>
+    <br>
+    產品：<span id="product_index"></span><br>
+    系統：<span id="system_index"></span><br>
+    模組：<span id="module_index"></span><br>
+    零件：<span id="component_index"></span><br>
+
+    <script>
+        // 資料庫中的所有 [產品]
+        var product_item = ['*', '清洗貨櫃', '發酵貨櫃', '乾燥貨櫃']
+        var inner = '';
+        for (let i = 0; i < product_item.length; i++) {
+            inner += '<option value=' + i + '>' + product_item[i] + '</option>';
+        }
+        var sectorSelect = document.getElementById("product");
+        sectorSelect.innerHTML = inner;
+
+        // 系統的 index
+        var noIndex;
+        // [系統]更新：Array / renew_system function
+        system_object = new Array();
+        system_object[0] = ["*"];
+        system_object[1] = ["*", "清洗槽組立", "CCC"];
+        system_object[2] = ["*", "發酵桶組立", "FFF"];
+        system_object[3] = ["*", "乾燥桶組立", "DDD"];
+        function renew_system(index) {
+            noIndex = index
+            var inner = '';
+            for (let i = 0; i < system_object[index].length; i++) {
+                inner += '<option value=' + i + '>' + system_object[index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("system");
+            sectorSelect.innerHTML = inner;
+        }
+
+        // 模組的 index
+        var moIndex;
+        // [模組]更新：Array / renew_system function
+        module_object = new Array();
+        module_object[0] = ["*"];
+        module_object[1] = ["*", "清洗槽組立", "ccc"];
+        module_object[2] = ["*", "發酵桶組立", "fff"];
+        module_object[3] = ["*", "乾燥桶組立", "ddd"];
+        module_object[0][0] = ["*"];
+        module_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];
+        module_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];
+        module_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];
+        function renew_module(index) {
+            moIndex = index
+            console.log("renew_module START")
+            var inner = '';
+            for (let i = 0; i < module_object[noIndex][index].length; i++) {
+                inner += '<option value=' + i + '>' + module_object[noIndex][index][i] + '</option>';
+            }
+            console.log("module: " + inner)
+            var sectorSelect = document.getElementById("module");
+            sectorSelect.innerHTML = inner;
+            console.log("renew_module END")
+        }
+
+        // 零件
+        // // [零件]更新：Array / renew_system function
+        component_object = new Array();
+        component_object[0] = ["*"];
+        component_object[1] = ["*", "清洗槽組立", "ccc"];
+        component_object[2] = ["*", "發酵桶組立", "fff"];
+        component_object[3] = ["*", "乾燥桶組立", "ddd"];
+        component_object[0][0] = ["*"];
+        component_object[1][1] = ["*", "c1上蓋組立", "c2內桶槽組立"];
+        component_object[2][1] = ["*", "f1上蓋組立", "f2控制盒組立"];
+        component_object[3][1] = ["*", "d1上蓋組立", "d2控制盒組立"];
+        component_object[0][0][0] = ["*"];  
+        component_object[1][1][0] = ["*"];
+        component_object[1][1][1] = ["*", "c1_M10平墊圈", "c1_M10螺帽"];
+        component_object[1][1][2] = ["*", "c2_內桶槽", "c2_內桶槽固定環"];
+        component_object[2][1][0] = ["*"];
+        component_object[2][1][1] = ["*", "f1_吸料機入料管", "f1_入料斗擋板"];
+        component_object[2][1][2] = ["*", "f2_LED指示燈 綠色 TB12LED-G0201", "f2_K3 LED指示燈-主板"];
+        component_object[3][1][0] = ["*"];
+        component_object[3][1][1] = ["*", "d1_軸心(單邊出軸)", "d1_墊片M18x25x1.5"];
+        component_object[3][1][2] = ["*", "d2_M3x5螺絲", "d2_M3x5銅柱 1公1母"];
+        function renew_component(index) {
+            var Value="";
+            for(var i=0; i<component_object[noIndex][moIndex][index].length; i++){
+                Value = Value + '<option value=' + i + '>' + component_object[noIndex][moIndex][index][i] + '</option>';
+            }
+            var sectorSelect = document.getElementById("component");
+            sectorSelect.innerHTML = Value;
+        }
+    </script>
+    
+    
+
+</body>
+
+</html>

app/templates/dry.html

@@ -23,176 +23,24 @@
     <link rel="stylesheet" href="../static/css/sign_in.css">
     -->
     <style>
-        .DryContainer_position {
-            position: absolute;
-            top: 95px;
-            left: 55px;
-        }
-
-        .D1_position {
-            position: absolute;
-            top: 150px;
-            left: 245px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-
-        }
-
-        .D2_position {
-            position: absolute;
-            top: 150px;
-            left: 425px;
-            width: 155px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-
-        }
-
-        .D3_position {
-            position: absolute;
-            top: 150px;
-            left: 605px;
-            width: 160px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-
-        }
-
-        .D4_position {
-            position: absolute;
-            top: 150px;
-            left: 780px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-
-        }
-
-        .D5_position {
-            position: absolute;
-            top: 150px;
-            left: 960px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-
-        }
-
-        .D6_position {
-            position: absolute;
-            top: 150px;
-            left: 1140px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-
-        }
-
-        .D7_position {
-            position: absolute;
-            top: 395px;
-            left: 220px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .D8_position {
-            position: absolute;
-            top: 395px;
-            left: 400px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .D9_position {
-            position: absolute;
-            top: 395px;
-            left: 580px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .D10_position {
-            position: absolute;
-            top: 395px;
-            left: 755px;
-            width: 160px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .D11_position {
-            position: absolute;
-            top: 395px;
-            left: 930px;
-            width: 170px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .D12_position {
-            position: absolute;
-            top: 395px;
-            left: 1115px;
-            width: 165px;
-            height: 240px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .DI1_position {
-            position: absolute;
-            top: 215px;
-            left: 120px;
-            width: 50px;
-            height: 140px;
-            border-style: solid;
-            border-color: aqua;
-        }
-
-        .DI2_position {
-            position: absolute;
-            top: 425px;
-            left: 120px;
-            width: 50px;
-            height: 140px;
-            border-style: solid;
-            border-color: aqua;
+        /* 各桶槽狀態大小的共同 CSS */
+        .div_DryTank_position {
+            text-align: center;
+            font-weight: bold;
+            border: 0px aquamarine solid;
         }
-
-        .DO1_position {
-            position: absolute;
-            top: 195px;
-            left: 1315px;
-            width: 50px;
-            height: 140px;
-            border-style: solid;
-            border-color: aqua;
+        .td-clickable:hover {
+            /* background-color: rgb(238, 236, 236); */
+            background-color: lavender;
+            transition-duration: 0.5s;
         }
-
-        .DO2_position {
-            position: absolute;
-            top: 470px;
-            left: 1315px;
-            width: 50px;
-            height: 140px;
-            border-style: solid;
-            border-color: aqua;
+        /* 桶槽狀態顯示的顏色條 */
+        .div_DryTank_Status {
+            width: 140px; 
+            height: 20px; 
+            border-style: solid; 
+            border-color: whitesmoke; 
+            background-color: black;
         }
         .footer{
             position: absolute;
@@ -201,12 +49,22 @@
             background-color: #eee;
             text-align: center;
         }
+        /* 致動器狀態的圈圈 */
         .actuator_status {
             width: 18px; 
             height: 18px; 
             background-color:black; 
             border-radius: 50%;
         }
+        /* 狀態外框的 CSS */
+        .table_css {
+            border: 0px lightsteelblue solid; 
+            margin-right: auto; 
+            margin-left: auto; 
+            text-align: center; 
+            margin-top: 5px; 
+            width: 80%;
+        }
     </style>
     <script language="JavaScript">
         // 指定 10秒 刷新網頁一次
@@ -215,9 +73,81 @@
         var status = '{{status}}';
 
         $(document).ready(function(){
-            $("#coffee_title").text("乾燥貨櫃");
+            $("#coffee_title_pc").text("乾燥貨櫃");
+            $("#coffee_title_phone").text("乾燥貨櫃");
+            loading_D_status();
         });
 
+        function loading_D_status(){
+            $.get('/dry_status_update', '', function (res) {
+                dry_tank_status = [res.D1, res.D2, res.D3, res.D4, res.D5, res.D6, 
+                                   res.D7, res.D8, res.D9, res.D10, res.D11, res.D12 ]
+                for (let i=0; i<dry_tank_status.length; i++) {
+                    if (dry_tank_status[i] == 'D_InputtingBean') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
+                    } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
+                    } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
+                    } else if (dry_tank_status[i] == 'D_Waiting') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
+                    } else if (dry_tank_status[i] == 'D_Cleaning') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "plum")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
+                    } else if (dry_tank_status[i] == 'D_Drying') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
+                    } else if (dry_tank_status[i] == 'D_OutputtingBean') {
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
+                    } else if (dry_tank_status[i] == 'D_Warning') {
+                        $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
+                        $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
+                        $("#D"+parseInt(i+1)+"_bar").css("background-color", "crimson")
+                    } else {
+                        console.log('pass')
+                    }
+                }
+                dry_input_status = [res.DI1, res.DI2]
+                for (let i=0; i<dry_input_status.length; i++) {
+                    if (dry_input_status[i] == 'DI_InputtingBean') {
+                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
+                    } else if (dry_input_status[i] == 'DI_Waiting') {
+                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
+                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
+                    } else if (dry_input_status[i] == 'DI_OutputtingBean') {
+                        $("#DI"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
+                    } else {
+                        console.log('DI pass')
+                    }
+                }
+                dry_output_status = [res.DO1, res.DO2]
+                for (let i=0; i<dry_output_status.length; i++) {
+                    if (dry_output_status[i] == 'DO_InputtingBean') {
+                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
+                    } else if (dry_output_status[i] == 'DO_Waiting') {
+                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "lightgray")
+                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
+                    } else if (dry_output_status[i] == 'DO_OutputtingBean') {
+                        $("#DO"+parseInt(i+1)+"_bar").css("background-color", "MediumSeaGreen")
+                        $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
+                    } else {
+                        console.log('DO pass')
+                    }
+                }
+                
+                $("#tank_temp1_t_status").text(res.tank_temp1);
+
+            }, 'json');
+        }
+
 
     </script>
 
@@ -229,146 +159,134 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-        <!--
-            background-color:rgb(0, 238, 255);
-        
-        <div style="text-align: left;">
-            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
-        </div>
-        <div style="text-align: right;">
-            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>
-        </div>
-        
-        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
-            Smart Coffee
-        </div>
-        -->
-
-        <div>
-            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
-            <div id="DryContainer_pic" class="DryContainer_position">
-                <img src="../static/img/web_dry_container.png" style="margin: auto;">
-            </div>
-
-            <!-- 乾燥槽 D1 START-->
-            <div id="D1" tabindex="0" class="D1_position" role="button">
-                D1 status
-                <!-- D1 狀態點點-->
-                <div id="D1_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-            <!-- 乾燥槽 D1 END-->
-
-            <!-- 乾燥槽 D2 -->
-            <div id="D2" tabindex="0" class="D2_position" role="button">
-                D2 status
-                <div id="D2_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D3 -->
-            <div id="D3" tabindex="0" class="D3_position" role="button">
-                D3 status
-                <div id="D3_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D4 -->
-            <div id="D4" tabindex="0" class="D4_position" role="button">
-                D4 status
-                <div id="D4_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D5 -->
-            <div id="D5" tabindex="0" class="D5_position" role="button">
-                D5 status
-                <div id="D5_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D6 -->
-            <div id="D6" tabindex="0" class="D6_position" role="button">
-                D6 status
-                <div id="D6_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D7 -->
-            <div id="D7" tabindex="0" class="D7_position" role="button">
-                D7 status
-                <div id="D7_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D8 -->
-            <div id="D8" tabindex="0" class="D8_position" role="button">
-                D8 status
-                <div id="D8_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D9 -->
-            <div id="D9" tabindex="0" class="D9_position" role="button">
-                D9 status
-                <div id="D9_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D10 -->
-            <div id="D10" tabindex="0" class="D10_position" role="button">
-                D10 status
-                <div id="D10_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D11 -->
-            <div id="D11" tabindex="0" class="D11_position" role="button">
-                D11 status
-                <div id="D11_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽 D12 -->
-            <div id="D12" tabindex="0" class="D12_position" role="button">
-                D12 status
-                <div id="D12_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽_入料儲豆槽 DI1 -->
-            <div id="DI1" tabindex="0" class="DI1_position" role="button">
-                DI1 status
-                <div id="DI1_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽_入料儲豆槽 DI2 -->
-            <div id="DI2" tabindex="0" class="DI2_position" role="button">
-                DI2 status
-                <div id="DI2_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
 
-            <!-- 乾燥槽_入料儲豆槽 DO1 -->
-            <div id="DO1" tabindex="0" class="DO1_position" role="button">
-                DO1 status
-                <div id="DO1_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
-
-            <!-- 乾燥槽_入料儲豆槽 DO2 -->
-            <div id="DO2" tabindex="0" class="DO2_position" role="button">
-                DO2 status
-                <div id="DO2_status"
-                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
-            </div>
+        <div style="height: 605px;">
+            <table class="table_css" cellpadding="6" border="1">
+                <!-- 第一列 DI1 / D1~D6 / DO1 -->
+                <tr>
+                    <td class="td-clickable">
+                        <div id="DI1" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="DI1_status" class="demo_status_css">DI1 status</span>
+                            <div id="DI1_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td style="width: 10px; font-weight: 900;">
+                        入料
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D1" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D1_status" class="demo_status_css">D1 status</span>
+                            <div id="D1_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D2" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D2_status" class="demo_status_css">D2 status</span>
+                            <div id="D2_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D3" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D3_status" class="demo_status_css">D3 status</span>
+                            <div id="D3_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D4" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D4_status" class="demo_status_css">D4 status</span>
+                            <div id="D4_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D5" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D5_status" class="demo_status_css">D5 status</span>
+                            <div id="D5_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D6" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D6_status" class="demo_status_css">D6 status</span>
+                            <div id="D6_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td style="width: 10px; font-weight: 900;">
+                        出料
+                    </td>
+                    <td class="td-clickable">
+                        <div id="DO1" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="DO1_status" class="demo_status_css">DO1 status</span>
+                            <div id="DO1_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                </tr>
+                <!-- 第二列 貨櫃圖片 -->
+                <tr>
+                    <td colspan="10" class="td-clickable">
+                        <a href="/dry_auto" target="_blank">
+                            <img src="../static/img/web_dry_container.png" style="margin: auto; width: 1100px;">
+                        </a>
+                    </td>
+                </tr>
+                <!-- 第三列 DI2 / D7~D12 / DO2 -->
+                <tr>
+                    <td class="td-clickable">
+                        <div id="DI2" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="DI2_status" class="demo_status_css">DI2 status</span>
+                            <div id="DI2_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td style="width: 10px; font-weight: 900;">
+                        入料
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D7" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D7_status" class="demo_status_css">D7 status</span>
+                            <div id="D7_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D8" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D8_status" class="demo_status_css">D8 status</span>
+                            <div id="D8_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D9" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D9_status" class="demo_status_css">D9 status</span>
+                            <div id="D9_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D10" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D10_status" class="demo_status_css">D10 status</span>
+                            <div id="D10_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D11" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D11_status" class="demo_status_css">D11 status</span>
+                            <div id="D11_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td class="td-clickable">
+                        <div id="D12" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="D12_status" class="demo_status_css">D12 status</span>
+                            <div id="D12_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                    <td style="width: 10px; font-weight: 900;">
+                        出料
+                    </td>
+                    <td class="td-clickable">
+                        <div id="DO2" tabindex="0" class="div_DryTank_position" role="button">
+                            <span id="DO2_status" class="demo_status_css">DO2 status</span>
+                            <div id="DO2_bar" class="div_DryTank_Status"></div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
         </div>
 
-
-
-
-
         <!-- 乾燥槽互動視窗(模态框) -->
         <div class="modal fade" id="D_Modal">
             <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
@@ -385,7 +303,7 @@
                         <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                             <!--<table style="border:0px gray solid;-->
                             <tr>
-                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="actuator_link" href="">致動器狀態</a></strong></td>
                                 <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
                             </tr>
                             <tr>
@@ -404,11 +322,21 @@
                                         </tr>
                                         <tr>
                                             <td>
-                                                <div id="tank_threewayvalve_status" class="actuator_status">
+                                                <div id="tank_threewayvalve_input_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="ThreeWayValveInput" href="">入料三通閥</a>
+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_threewayvalve_bean_status" class="actuator_status">
                                                 </div>
                                             </td>
                                             <td>
-                                                <a id="ThreeWayValve" href="">三通閥</a>
+                                                <a id="ThreeWayValveBean" href="">測豆三通閥</a>
                                                 <!--<span id="tank_threewayvalve_t_status"></span>-->
                                             </td>
                                         </tr>
@@ -602,7 +530,7 @@
                         <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                             <!--<table style="border:0px gray solid;-->
                             <tr>
-                                <td><strong><a id="actuator_link_input" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="actuator_link_input" href="">致動器狀態</a></strong></td>
                                 <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
                             </tr>
                             <tr>
@@ -666,7 +594,7 @@
                             <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                                 <!--<table style="border:0px gray solid;-->
                                 <tr>
-                                    <td><strong><a id="actuator_link_output" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="actuator_link_output" href="">致動器狀態</a></strong></td>
                                     <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
                                 </tr>
                                 <tr>
@@ -728,11 +656,17 @@
                         $("#tank_vacuum_status").css("background-color", "forestgreen")
                     } else { $("#tank_vacuum_status").css("background-color", "crimson") }
 
-                    if (res.tank_threewayvalve == 0) {
-                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")
-                    } else if (res.tank_threewayvalve == 1) {
-                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")
-                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }
+                    if (res.tank_threewayvalve_input == 0) {
+                        $("#tank_threewayvalve_input_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_threewayvalve_input == 1) {
+                        $("#tank_threewayvalve_input_status").css("background-color", "forestgreen")
+                    } else { $("#tank_threewayvalve_input_status").css("background-color", "crimson") }
+
+                    if (res.tank_threewayvalve_bean == 0) {
+                        $("#tank_threewayvalve_bean_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_threewayvalve_bean == 1) {
+                        $("#tank_threewayvalve_bean_status").css("background-color", "forestgreen")
+                    } else { $("#tank_threewayvalve_bean_status").css("background-color", "crimson") }
 
                     if (res.tank_diskvalve == 0) {
                         $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
@@ -812,24 +746,26 @@
                 $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
 
                 if (status == 2) {
-                    $('#actuator_link').attr("title", "使用者無修改權限")
-                    $('#sensor_link').attr("title", "使用者無修改權限")
-                    $('#Vacuum').attr("title", "使用者無修改權限")
-                    $('#ThreeWayValve').attr("title", "使用者無修改權限")
-                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")
-                    $('#Motor').attr("title", "使用者無修改權限")
-                    $('#Blower').attr("title", "使用者無修改權限")
-                    $('#Heater1').attr("title", "使用者無修改權限")
-                    $('#Heater2').attr("title", "使用者無修改權限")
-                    $('#TempEnable').attr("title", "使用者無修改權限")
-                    $('#Temp').attr("title", "使用者無修改權限")
-                    $('#SolenoidWater').attr("title", "使用者無修改權限")
-                    $('#DiskValve').attr("title", "使用者無修改權限")
+                    $('#actuator_link').attr("title", "該使用者無修改權限")
+                    $('#sensor_link').attr("title", "該使用者無修改權限")
+                    $('#Vacuum').attr("title", "該使用者無修改權限")
+                    $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
+                    $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
+                    $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
+                    $('#Motor').attr("title", "該使用者無修改權限")
+                    $('#Blower').attr("title", "該使用者無修改權限")
+                    $('#Heater1').attr("title", "該使用者無修改權限")
+                    $('#Heater2').attr("title", "該使用者無修改權限")
+                    $('#TempEnable').attr("title", "該使用者無修改權限")
+                    $('#Temp').attr("title", "該使用者無修改權限")
+                    $('#SolenoidWater').attr("title", "該使用者無修改權限")
+                    $('#DiskValve').attr("title", "該使用者無修改權限")
                 } else if ( (status == 0) || (status == 1) ) {
                     $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
                     $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
                     $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
-                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)
+                    $('#ThreeWayValveInput').attr("href", "/ctrl_D_ThreeWayValveInput/" + dtid)
+                    $('#ThreeWayValveBean').attr("href", "/ctrl_D_ThreeWayValveBean/" + dtid)
                     $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
                     $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
                     $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
@@ -852,8 +788,8 @@
                 $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
 
                 
+                setTimeout(function(){ $('#D_Modal').modal('show'); }, 300)
                 
-                $('#D_Modal').modal('show');
             }
 
 
@@ -875,9 +811,9 @@
                 $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")
 
                 if (status == 2) {
-                    $('#actuator_link').attr("title", "使用者無修改權限")
-                    $('#sensor_link').attr("title", "使用者無修改權限")
-                    $('#Vacuum_input').attr("title", "使用者無修改權限")
+                    $('#actuator_link').attr("title", "該使用者無修改權限")
+                    $('#sensor_link').attr("title", "該使用者無修改權限")
+                    $('#Vacuum_input').attr("title", "該使用者無修改權限")
                 } else if ( (status == 0) || (status == 1) ) {
                     $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)
                     $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)
@@ -905,9 +841,9 @@
                 $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")
 
                 if (status == 2) {
-                    $('#actuator_link').attr("title", "使用者無修改權限")
-                    $('#sensor_link').attr("title", "使用者無修改權限")
-                    $('#Vacuum_output').attr("title", "使用者無修改權限")
+                    $('#actuator_link').attr("title", "該使用者無修改權限")
+                    $('#sensor_link').attr("title", "該使用者無修改權限")
+                    $('#Vacuum_output').attr("title", "該使用者無修改權限")
                 } else if ( (status == 0) || (status == 1) ) {
                     $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)
                     $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)

app/templates/dry_1008不蓋圖片.html

@@ -0,0 +1,982 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+    -->
+    <style>
+        .DryContainer_position {
+            position: absolute;
+            top: 180px;
+            left: 270px;
+        }
+
+        .D1_position {
+            position: absolute;
+            top: 130px;
+            left: 245px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D2_position {
+            position: absolute;
+            top: 130px;
+            left: 425px;
+            width: 155px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D3_position {
+            position: absolute;
+            top: 130px;
+            left: 605px;
+            width: 160px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D4_position {
+            position: absolute;
+            top: 130px;
+            left: 780px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D5_position {
+            position: absolute;
+            top: 130px;
+            left: 960px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D6_position {
+            position: absolute;
+            top: 130px;
+            left: 1140px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D7_position {
+            position: absolute;
+            top: 615px;
+            left: 220px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D8_position {
+            position: absolute;
+            top: 615px;
+            left: 400px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D9_position {
+            position: absolute;
+            top: 615px;
+            left: 580px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D10_position {
+            position: absolute;
+            top: 615px;
+            left: 755px;
+            width: 160px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D11_position {
+            position: absolute;
+            top: 615px;
+            left: 930px;
+            width: 170px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D12_position {
+            position: absolute;
+            top: 615px;
+            left: 1115px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DI1_position {
+            position: absolute;
+            top: 130px;
+            left: 120px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DI2_position {
+            position: absolute;
+            top: 615px;
+            left: 110px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DO1_position {
+            position: absolute;
+            top: 130px;
+            left: 1315px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DO2_position {
+            position: absolute;
+            top: 615px;
+            left: 1315px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .footer{
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        }
+        .actuator_status {
+            width: 18px; 
+            height: 18px; 
+            background-color:black; 
+            border-radius: 50%;
+        }
+    </style>
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var WebRestart
+        // WebRestart = setTimeout(function () { location.reload() }, 10000);
+        var status = '{{status}}';
+
+        $(document).ready(function(){
+            $("#coffee_title").text("乾燥貨櫃");
+        });
+
+
+    </script>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        <!--
+            background-color:rgb(0, 238, 255);
+        
+        <div style="text-align: left;">
+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
+        </div>
+        <div style="text-align: right;">
+            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
+            Smart Coffee
+        </div>
+        -->
+
+        <div>
+            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
+            <div id="DryContainer_pic" class="DryContainer_position">
+                <img src="../static/img/web_dry_container.png" style="margin: auto; width: 1000px;" >
+            </div>
+
+            <!-- 乾燥槽 D1 START-->
+            <div id="D1" tabindex="0" class="D1_position" role="button">
+                D1 status
+                <!-- D1 狀態點點-->
+                <div id="D1_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+            <!-- 乾燥槽 D1 END-->
+
+            <!-- 乾燥槽 D2 -->
+            <div id="D2" tabindex="0" class="D2_position" role="button">
+                D2 status
+                <div id="D2_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D3 -->
+            <div id="D3" tabindex="0" class="D3_position" role="button">
+                D3 status
+                <div id="D3_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D4 -->
+            <div id="D4" tabindex="0" class="D4_position" role="button">
+                D4 status
+                <div id="D4_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D5 -->
+            <div id="D5" tabindex="0" class="D5_position" role="button">
+                D5 status
+                <div id="D5_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D6 -->
+            <div id="D6" tabindex="0" class="D6_position" role="button">
+                D6 status
+                <div id="D6_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D7 -->
+            <div id="D7" tabindex="0" class="D7_position" role="button">
+                D7 status
+                <div id="D7_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D8 -->
+            <div id="D8" tabindex="0" class="D8_position" role="button">
+                D8 status
+                <div id="D8_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D9 -->
+            <div id="D9" tabindex="0" class="D9_position" role="button">
+                D9 status
+                <div id="D9_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D10 -->
+            <div id="D10" tabindex="0" class="D10_position" role="button">
+                D10 status
+                <div id="D10_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D11 -->
+            <div id="D11" tabindex="0" class="D11_position" role="button">
+                D11 status
+                <div id="D11_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D12 -->
+            <div id="D12" tabindex="0" class="D12_position" role="button">
+                D12 status
+                <div id="D12_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DI1 -->
+            <div id="DI1" tabindex="0" class="DI1_position" role="button">
+                DI1 status
+                <div id="DI1_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DI2 -->
+            <div id="DI2" tabindex="0" class="DI2_position" role="button">
+                DI2 status
+                <div id="DI2_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DO1 -->
+            <div id="DO1" tabindex="0" class="DO1_position" role="button">
+                DO1 status
+                <div id="DO1_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DO2 -->
+            <div id="DO2" tabindex="0" class="DO2_position" role="button">
+                DO2 status
+                <div id="DO2_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+        </div>
+
+
+
+
+
+        <!-- 乾燥槽互動視窗(模态框) -->
+        <div class="modal fade" id="D_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <!-- 互動視窗 標題 -->
+                    <div class="modal-header">
+                        <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 互動視窗 內容 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                            <tr>
+                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <div id="tank_vacuum_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Vacuum" href="">真空吸料機</a>
+                                                <!--<span id="tank_vacuum_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_threewayvalve_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="ThreeWayValve" href="">三通閥</a>
+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>
+                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_motor_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Motor" href="">馬達</a>
+                                                <!--<span id="tank_motor_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_blower_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Blower" href="">鼓風機</a>
+                                                <!--<span id="tank_blower_t_status"></span>-->
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <div id="tank_heater1_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Heater1" href="">加熱器 1</a>
+                                                <!--<span id="tank_heater1_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_heater2_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Heater2" href="">加熱器 2</a>
+                                                <!--<span id="tank_heater2_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_temp1_enable_status" class="actuator_status">
+                                                </div>
+
+                                            </td>
+                                            <td>
+                                                <a id="TempEnable" href="">溫控開關</a>
+                                                <!--<span id="tank_temp1_enable_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_temp1_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Temp" href="">設定溫度</a>
+                                                <!--<span id="tank_temp1_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_solenoid_water_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="SolenoidWater" href="">排水電磁閥</a>
+                                                <!--<span id="tank_solenoid_water_t_status"></span>-->
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <div id="tank_diskvalve_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="DiskValve" href="">蝴蝶閥</a>
+                                                <!--<span id="tank_diskvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
+                                            </td>
+                                            <td>
+                                                <span id="UltraSonic_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>
+                                            </td>
+                                            <td>
+                                                <span id="SHT11_Temp_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>
+                                            </td>
+                                            <td>
+                                                <span id="SHT11_Humidity_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_Temp_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_Humidity_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_EC" href="">咖啡生豆 EC</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_EC_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="PA" href="">桶內壓力</a>
+                                            </td>
+                                            <td>
+                                                <span id="PA_t_status"></span>
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                            </td>
+                                        </tr>
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->
+        <div class="modal fade" id="DI_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <!-- 互動視窗 標題 -->
+                    <div class="modal-header">
+                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 互動視窗 內容 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                            <tr>
+                                <td><strong><a id="actuator_link_input" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <div id="input_vacuum_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Vacuum_input" href="">真空吸料機</a>
+                                                <!--<span id="tank_vacuum_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>
+                                            </td>
+                                            <td>
+                                                <span id="DI_UltraSonic_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->
+            <div class="modal fade" id="DO_Modal">
+                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                    <div class="modal-content">
+        
+                        <!-- 互動視窗 標題 -->
+                        <div class="modal-header">
+                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        </div>
+        
+                        <!-- 互動視窗 內容 -->
+                        <div class="modal-body">
+                            <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                                <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="actuator_link_output" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <!--font-size:12px; -->
+                                            <tr>
+                                                <td>
+                                                    <div id="output_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <a id="Vacuum_output" href="">真空吸料機</a>
+                                                    <!--<span id="tank_vacuum_t_status"></span>-->
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <!--font-size:12px; -->
+                                            <tr>
+                                                <td>
+                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>
+                                                </td>
+                                                <td>
+                                                    <span id="DO_UltraSonic_t_status"></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+
+
+
+
+        <script>
+            function update_data_D(dtid) {
+                console.log('dry_tank_id:' + dtid)
+                // dtid = dry_tank_id
+                $.get('/loading/D' + dtid, '', function (res) {
+
+                    if (res.tank_vacuum == 0) {
+                        $("#tank_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#tank_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#tank_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_threewayvalve == 0) {
+                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_threewayvalve == 1) {
+                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")
+                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }
+
+                    if (res.tank_diskvalve == 0) {
+                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_diskvalve == 1) {
+                        $("#tank_diskvalve_status").css("background-color", "forestgreen")
+                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_disinfect == 0) {
+                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_disinfect == 1) {
+                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_water == 0) {
+                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_water == 1) {
+                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }
+
+                    if (res.tank_motor == 0) {
+                        $("#tank_motor_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {
+                        $("#tank_motor_status").css("background-color", "forestgreen")
+                    } else { $("#tank_motor_status").css("background-color", "crimson") }
+
+                    if (res.tank_blower == 0) {
+                        $("#tank_blower_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_blower == 1) {
+                        $("#tank_blower_status").css("background-color", "forestgreen")
+                    } else { $("#tank_blower_status").css("background-color", "crimson") }
+
+                    if (res.tank_heater1 == 0) {
+                        $("#tank_heater1_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_heater1 == 1) {
+                        $("#tank_heater1_status").css("background-color", "forestgreen")
+                    } else { $("#tank_heater1_status").css("background-color", "crimson") }
+
+                    if (res.tank_heater2 == 0) {
+                        $("#tank_heater2_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_heater2 == 1) {
+                        $("#tank_heater2_status").css("background-color", "forestgreen")
+                    } else { $("#tank_heater2_status").css("background-color", "crimson") }
+
+                    if (res.tank_temp1_enable == 0) {
+                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_temp1_enable == 1) {
+                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")
+                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }
+
+                    if (res.tank_temp1 == 0) {
+                        $("#tank_temp1_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_temp1 > 0) {
+                        $("#tank_temp1_status").css("background-color", "forestgreen")
+                    } else { $("#tank_temp1_status").css("background-color", "crimson") }
+
+                    $("#tank_vacuum_t_status").text(res.tank_vacuum);
+                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
+                    $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
+                    $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
+                    $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
+                    $("#tank_motor_t_status").text(res.tank_motor);
+                    $("#tank_blower_t_status").text(res.tank_blower);
+                    $("#tank_heater1_t_status").text(res.tank_heater1);
+                    $("#tank_heater2_t_status").text(res.tank_heater2);
+                    $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
+                    $("#tank_temp1_t_status").text(res.tank_temp1);
+
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
+                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
+                    $("#soil_Temp_t_status").text(res.soil_Temp);
+                    $("#soil_Humidity_t_status").text(res.soil_Humidity);
+                    $("#soil_EC_t_status").text(res.soil_EC);
+                    $("#PA_t_status").text(res.PA);
+                }, 'json');
+
+                $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum').attr("title", "使用者無修改權限")
+                    $('#ThreeWayValve').attr("title", "使用者無修改權限")
+                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")
+                    $('#Motor').attr("title", "使用者無修改權限")
+                    $('#Blower').attr("title", "使用者無修改權限")
+                    $('#Heater1').attr("title", "使用者無修改權限")
+                    $('#Heater2').attr("title", "使用者無修改權限")
+                    $('#TempEnable').attr("title", "使用者無修改權限")
+                    $('#Temp').attr("title", "使用者無修改權限")
+                    $('#SolenoidWater').attr("title", "使用者無修改權限")
+                    $('#DiskValve').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
+                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
+                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
+                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)
+                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
+                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
+                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
+                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
+                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
+                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
+                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
+                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
+                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
+                }
+                
+
+                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
+                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
+                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
+                $('#PA').attr("href", "/chart_D/PA/" + dtid)
+                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
+                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
+                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
+                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
+
+                
+                
+                $('#D_Modal').modal('show');
+            }
+
+
+
+            function update_data_DI(ditid){
+                console.log('dry_input_tank_id:' + ditid)
+                // ditid = dry_input_tank_id
+                $.get('/loading/DI' + ditid, '', function (res) {
+                    if (res.input_vacuum == 0) {
+                        $("#input_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.input_vacuum == 1) {
+                        $("#input_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#input_vacuum_status").css("background-color", "crimson") }
+
+                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);
+
+                }, 'json');
+                
+                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum_input').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)
+                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)
+                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)
+                }
+                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)
+                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)
+                $('#DI_Modal').modal('show');
+            };
+
+            function update_data_DO(dotid){
+                console.log('dry_output_tank_id:' + dotid)
+                // dotid = dry_output_tank_id
+                $.get('/loading/DO' + dotid, '', function (res) {
+                    if (res.output_vacuum == 0) {
+                        $("#output_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#output_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#output_vacuum_status").css("background-color", "crimson") }
+
+                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);
+
+                }, 'json');
+                
+                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum_output').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)
+                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)
+                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)
+                }
+                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)
+                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)
+                $('#DO_Modal').modal('show');
+            };
+
+
+            var button_D1 = document.getElementById('D1');
+            button_D1.addEventListener('click', function () { update_data_D("1") });
+
+            var button_D2 = document.getElementById('D2');
+            button_D2.addEventListener('click', function () { update_data_D("2") });
+
+            var button_D3 = document.getElementById('D3');
+            button_D3.addEventListener('click', function () { update_data_D("3") });
+
+            var button_D4 = document.getElementById('D4');
+            button_D4.addEventListener('click', function () { update_data_D("4") });
+
+            var button_D5 = document.getElementById('D5');
+            button_D5.addEventListener('click', function () { update_data_D("5") });
+
+            var button_D6 = document.getElementById('D6');
+            button_D6.addEventListener('click', function () { update_data_D("6") });
+
+            var button_D7 = document.getElementById('D7');
+            button_D7.addEventListener('click', function () { update_data_D("7") });
+
+            var button_D8 = document.getElementById('D8');
+            button_D8.addEventListener('click', function () { update_data_D("8") });
+
+            var button_D9 = document.getElementById('D9');
+            button_D9.addEventListener('click', function () { update_data_D("9") });
+
+            var button_D10 = document.getElementById('D10');
+            button_D10.addEventListener('click', function () { update_data_D("10") });
+
+            var button_D11 = document.getElementById('D11');
+            button_D11.addEventListener('click', function () { update_data_D("11") });
+
+            var button_D12 = document.getElementById('D12');
+            button_D12.addEventListener('click', function () { update_data_D("12") });
+
+            var button_DI1 = document.getElementById('DI1');
+            button_DI1.addEventListener('click', function () { update_data_DI("1") });
+
+            var button_DI2 = document.getElementById('DI2');
+            button_DI2.addEventListener('click', function () { update_data_DI("2") });
+
+            var button_DO1 = document.getElementById('DO1');
+            button_DO1.addEventListener('click', function () { update_data_DO("1") });
+
+            var button_DO2 = document.getElementById('DO2');
+            button_DO2.addEventListener('click', function () { update_data_DO("2") });
+
+        </script>
+<!--
+        <footer class="footer">
+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
+            </div>
+        </footer>
+-->
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+
+    </div>
+
+</body>
+
+</html>

app/templates/dry_1008備份.html

@@ -0,0 +1,988 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+    -->
+    <style>
+        .DryContainer_position {
+            position: absolute;
+            top: 95px;
+            left: 55px;
+        }
+
+        .D1_position {
+            position: absolute;
+            top: 150px;
+            left: 245px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+
+        }
+
+        .D2_position {
+            position: absolute;
+            top: 150px;
+            left: 425px;
+            width: 155px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+
+        }
+
+        .D3_position {
+            position: absolute;
+            top: 150px;
+            left: 605px;
+            width: 160px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+
+        }
+
+        .D4_position {
+            position: absolute;
+            top: 150px;
+            left: 780px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+
+        }
+
+        .D5_position {
+            position: absolute;
+            top: 150px;
+            left: 960px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+
+        }
+
+        .D6_position {
+            position: absolute;
+            top: 150px;
+            left: 1140px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+
+        }
+
+        .D7_position {
+            position: absolute;
+            top: 395px;
+            left: 220px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .D8_position {
+            position: absolute;
+            top: 395px;
+            left: 400px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .D9_position {
+            position: absolute;
+            top: 395px;
+            left: 580px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .D10_position {
+            position: absolute;
+            top: 395px;
+            left: 755px;
+            width: 160px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .D11_position {
+            position: absolute;
+            top: 395px;
+            left: 930px;
+            width: 170px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .D12_position {
+            position: absolute;
+            top: 395px;
+            left: 1115px;
+            width: 165px;
+            height: 240px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .DI1_position {
+            position: absolute;
+            top: 215px;
+            left: 120px;
+            width: 50px;
+            height: 140px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .DI2_position {
+            position: absolute;
+            top: 425px;
+            left: 120px;
+            width: 50px;
+            height: 140px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .DO1_position {
+            position: absolute;
+            top: 195px;
+            left: 1315px;
+            width: 50px;
+            height: 140px;
+            border-style: solid;
+            border-color: aqua;
+        }
+
+        .DO2_position {
+            position: absolute;
+            top: 470px;
+            left: 1315px;
+            width: 50px;
+            height: 140px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .footer{
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        }
+        .actuator_status {
+            width: 18px; 
+            height: 18px; 
+            background-color:black; 
+            border-radius: 50%;
+        }
+    </style>
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var WebRestart
+        // WebRestart = setTimeout(function () { location.reload() }, 10000);
+        var status = '{{status}}';
+
+        $(document).ready(function(){
+            $("#coffee_title").text("乾燥貨櫃");
+        });
+
+
+    </script>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        <!--
+            background-color:rgb(0, 238, 255);
+        
+        <div style="text-align: left;">
+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
+        </div>
+        <div style="text-align: right;">
+            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
+            Smart Coffee
+        </div>
+        -->
+
+        <div>
+            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
+            <div id="DryContainer_pic" class="DryContainer_position">
+                <img src="../static/img/web_dry_container.png" style="margin: auto;">
+            </div>
+
+            <!-- 乾燥槽 D1 START-->
+            <div id="D1" tabindex="0" class="D1_position" role="button">
+                D1 status
+                <!-- D1 狀態點點-->
+                <div id="D1_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+            <!-- 乾燥槽 D1 END-->
+
+            <!-- 乾燥槽 D2 -->
+            <div id="D2" tabindex="0" class="D2_position" role="button">
+                D2 status
+                <div id="D2_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D3 -->
+            <div id="D3" tabindex="0" class="D3_position" role="button">
+                D3 status
+                <div id="D3_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D4 -->
+            <div id="D4" tabindex="0" class="D4_position" role="button">
+                D4 status
+                <div id="D4_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D5 -->
+            <div id="D5" tabindex="0" class="D5_position" role="button">
+                D5 status
+                <div id="D5_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D6 -->
+            <div id="D6" tabindex="0" class="D6_position" role="button">
+                D6 status
+                <div id="D6_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D7 -->
+            <div id="D7" tabindex="0" class="D7_position" role="button">
+                D7 status
+                <div id="D7_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D8 -->
+            <div id="D8" tabindex="0" class="D8_position" role="button">
+                D8 status
+                <div id="D8_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D9 -->
+            <div id="D9" tabindex="0" class="D9_position" role="button">
+                D9 status
+                <div id="D9_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D10 -->
+            <div id="D10" tabindex="0" class="D10_position" role="button">
+                D10 status
+                <div id="D10_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D11 -->
+            <div id="D11" tabindex="0" class="D11_position" role="button">
+                D11 status
+                <div id="D11_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽 D12 -->
+            <div id="D12" tabindex="0" class="D12_position" role="button">
+                D12 status
+                <div id="D12_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DI1 -->
+            <div id="DI1" tabindex="0" class="DI1_position" role="button">
+                DI1 status
+                <div id="DI1_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DI2 -->
+            <div id="DI2" tabindex="0" class="DI2_position" role="button">
+                DI2 status
+                <div id="DI2_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DO1 -->
+            <div id="DO1" tabindex="0" class="DO1_position" role="button">
+                DO1 status
+                <div id="DO1_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DO2 -->
+            <div id="DO2" tabindex="0" class="DO2_position" role="button">
+                DO2 status
+                <div id="DO2_status"
+                    style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+        </div>
+
+
+
+
+
+        <!-- 乾燥槽互動視窗(模态框) -->
+        <div class="modal fade" id="D_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <!-- 互動視窗 標題 -->
+                    <div class="modal-header">
+                        <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 互動視窗 內容 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                            <tr>
+                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <div id="tank_vacuum_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Vacuum" href="">真空吸料機</a>
+                                                <!--<span id="tank_vacuum_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_threewayvalve_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="ThreeWayValve" href="">三通閥</a>
+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>
+                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_motor_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Motor" href="">馬達</a>
+                                                <!--<span id="tank_motor_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_blower_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Blower" href="">鼓風機</a>
+                                                <!--<span id="tank_blower_t_status"></span>-->
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <div id="tank_heater1_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Heater1" href="">加熱器 1</a>
+                                                <!--<span id="tank_heater1_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_heater2_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Heater2" href="">加熱器 2</a>
+                                                <!--<span id="tank_heater2_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_temp1_enable_status" class="actuator_status">
+                                                </div>
+
+                                            </td>
+                                            <td>
+                                                <a id="TempEnable" href="">溫控開關</a>
+                                                <!--<span id="tank_temp1_enable_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_temp1_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Temp" href="">設定溫度</a>
+                                                <!--<span id="tank_temp1_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_solenoid_water_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="SolenoidWater" href="">排水電磁閥</a>
+                                                <!--<span id="tank_solenoid_water_t_status"></span>-->
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <div id="tank_diskvalve_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="DiskValve" href="">蝴蝶閥</a>
+                                                <!--<span id="tank_diskvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
+                                            </td>
+                                            <td>
+                                                <span id="UltraSonic_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>
+                                            </td>
+                                            <td>
+                                                <span id="SHT11_Temp_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>
+                                            </td>
+                                            <td>
+                                                <span id="SHT11_Humidity_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_Temp_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_Humidity_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_EC" href="">咖啡生豆 EC</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_EC_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="PA" href="">桶內壓力</a>
+                                            </td>
+                                            <td>
+                                                <span id="PA_t_status"></span>
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                            </td>
+                                        </tr>
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->
+        <div class="modal fade" id="DI_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <!-- 互動視窗 標題 -->
+                    <div class="modal-header">
+                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 互動視窗 內容 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                            <tr>
+                                <td><strong><a id="actuator_link_input" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <div id="input_vacuum_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Vacuum_input" href="">真空吸料機</a>
+                                                <!--<span id="tank_vacuum_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>
+                                            </td>
+                                            <td>
+                                                <span id="DI_UltraSonic_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->
+            <div class="modal fade" id="DO_Modal">
+                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                    <div class="modal-content">
+        
+                        <!-- 互動視窗 標題 -->
+                        <div class="modal-header">
+                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        </div>
+        
+                        <!-- 互動視窗 內容 -->
+                        <div class="modal-body">
+                            <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                                <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="actuator_link_output" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <!--font-size:12px; -->
+                                            <tr>
+                                                <td>
+                                                    <div id="output_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <a id="Vacuum_output" href="">真空吸料機</a>
+                                                    <!--<span id="tank_vacuum_t_status"></span>-->
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <!--font-size:12px; -->
+                                            <tr>
+                                                <td>
+                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>
+                                                </td>
+                                                <td>
+                                                    <span id="DO_UltraSonic_t_status"></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+
+
+
+
+        <script>
+            function update_data_D(dtid) {
+                console.log('dry_tank_id:' + dtid)
+                // dtid = dry_tank_id
+                $.get('/loading/D' + dtid, '', function (res) {
+
+                    if (res.tank_vacuum == 0) {
+                        $("#tank_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#tank_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#tank_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_threewayvalve == 0) {
+                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_threewayvalve == 1) {
+                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")
+                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }
+
+                    if (res.tank_diskvalve == 0) {
+                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_diskvalve == 1) {
+                        $("#tank_diskvalve_status").css("background-color", "forestgreen")
+                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_disinfect == 0) {
+                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_disinfect == 1) {
+                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_water == 0) {
+                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_water == 1) {
+                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }
+
+                    if (res.tank_motor == 0) {
+                        $("#tank_motor_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {
+                        $("#tank_motor_status").css("background-color", "forestgreen")
+                    } else { $("#tank_motor_status").css("background-color", "crimson") }
+
+                    if (res.tank_blower == 0) {
+                        $("#tank_blower_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_blower == 1) {
+                        $("#tank_blower_status").css("background-color", "forestgreen")
+                    } else { $("#tank_blower_status").css("background-color", "crimson") }
+
+                    if (res.tank_heater1 == 0) {
+                        $("#tank_heater1_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_heater1 == 1) {
+                        $("#tank_heater1_status").css("background-color", "forestgreen")
+                    } else { $("#tank_heater1_status").css("background-color", "crimson") }
+
+                    if (res.tank_heater2 == 0) {
+                        $("#tank_heater2_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_heater2 == 1) {
+                        $("#tank_heater2_status").css("background-color", "forestgreen")
+                    } else { $("#tank_heater2_status").css("background-color", "crimson") }
+
+                    if (res.tank_temp1_enable == 0) {
+                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_temp1_enable == 1) {
+                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")
+                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }
+
+                    if (res.tank_temp1 == 0) {
+                        $("#tank_temp1_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_temp1 > 0) {
+                        $("#tank_temp1_status").css("background-color", "forestgreen")
+                    } else { $("#tank_temp1_status").css("background-color", "crimson") }
+
+                    $("#tank_vacuum_t_status").text(res.tank_vacuum);
+                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
+                    $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
+                    $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
+                    $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
+                    $("#tank_motor_t_status").text(res.tank_motor);
+                    $("#tank_blower_t_status").text(res.tank_blower);
+                    $("#tank_heater1_t_status").text(res.tank_heater1);
+                    $("#tank_heater2_t_status").text(res.tank_heater2);
+                    $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
+                    $("#tank_temp1_t_status").text(res.tank_temp1);
+
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
+                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
+                    $("#soil_Temp_t_status").text(res.soil_Temp);
+                    $("#soil_Humidity_t_status").text(res.soil_Humidity);
+                    $("#soil_EC_t_status").text(res.soil_EC);
+                    $("#PA_t_status").text(res.PA);
+                }, 'json');
+
+                $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum').attr("title", "使用者無修改權限")
+                    $('#ThreeWayValve').attr("title", "使用者無修改權限")
+                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")
+                    $('#Motor').attr("title", "使用者無修改權限")
+                    $('#Blower').attr("title", "使用者無修改權限")
+                    $('#Heater1').attr("title", "使用者無修改權限")
+                    $('#Heater2').attr("title", "使用者無修改權限")
+                    $('#TempEnable').attr("title", "使用者無修改權限")
+                    $('#Temp').attr("title", "使用者無修改權限")
+                    $('#SolenoidWater').attr("title", "使用者無修改權限")
+                    $('#DiskValve').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
+                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
+                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
+                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)
+                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
+                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
+                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
+                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
+                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
+                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
+                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
+                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
+                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
+                }
+                
+
+                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
+                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
+                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
+                $('#PA').attr("href", "/chart_D/PA/" + dtid)
+                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
+                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
+                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
+                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
+
+                
+                
+                $('#D_Modal').modal('show');
+            }
+
+
+
+            function update_data_DI(ditid){
+                console.log('dry_input_tank_id:' + ditid)
+                // ditid = dry_input_tank_id
+                $.get('/loading/DI' + ditid, '', function (res) {
+                    if (res.input_vacuum == 0) {
+                        $("#input_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.input_vacuum == 1) {
+                        $("#input_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#input_vacuum_status").css("background-color", "crimson") }
+
+                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);
+
+                }, 'json');
+                
+                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum_input').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)
+                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)
+                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)
+                }
+                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)
+                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)
+                $('#DI_Modal').modal('show');
+            };
+
+            function update_data_DO(dotid){
+                console.log('dry_output_tank_id:' + dotid)
+                // dotid = dry_output_tank_id
+                $.get('/loading/DO' + dotid, '', function (res) {
+                    if (res.output_vacuum == 0) {
+                        $("#output_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#output_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#output_vacuum_status").css("background-color", "crimson") }
+
+                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);
+
+                }, 'json');
+                
+                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum_output').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)
+                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)
+                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)
+                }
+                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)
+                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)
+                $('#DO_Modal').modal('show');
+            };
+
+
+            var button_D1 = document.getElementById('D1');
+            button_D1.addEventListener('click', function () { update_data_D("1") });
+
+            var button_D2 = document.getElementById('D2');
+            button_D2.addEventListener('click', function () { update_data_D("2") });
+
+            var button_D3 = document.getElementById('D3');
+            button_D3.addEventListener('click', function () { update_data_D("3") });
+
+            var button_D4 = document.getElementById('D4');
+            button_D4.addEventListener('click', function () { update_data_D("4") });
+
+            var button_D5 = document.getElementById('D5');
+            button_D5.addEventListener('click', function () { update_data_D("5") });
+
+            var button_D6 = document.getElementById('D6');
+            button_D6.addEventListener('click', function () { update_data_D("6") });
+
+            var button_D7 = document.getElementById('D7');
+            button_D7.addEventListener('click', function () { update_data_D("7") });
+
+            var button_D8 = document.getElementById('D8');
+            button_D8.addEventListener('click', function () { update_data_D("8") });
+
+            var button_D9 = document.getElementById('D9');
+            button_D9.addEventListener('click', function () { update_data_D("9") });
+
+            var button_D10 = document.getElementById('D10');
+            button_D10.addEventListener('click', function () { update_data_D("10") });
+
+            var button_D11 = document.getElementById('D11');
+            button_D11.addEventListener('click', function () { update_data_D("11") });
+
+            var button_D12 = document.getElementById('D12');
+            button_D12.addEventListener('click', function () { update_data_D("12") });
+
+            var button_DI1 = document.getElementById('DI1');
+            button_DI1.addEventListener('click', function () { update_data_DI("1") });
+
+            var button_DI2 = document.getElementById('DI2');
+            button_DI2.addEventListener('click', function () { update_data_DI("2") });
+
+            var button_DO1 = document.getElementById('DO1');
+            button_DO1.addEventListener('click', function () { update_data_DO("1") });
+
+            var button_DO2 = document.getElementById('DO2');
+            button_DO2.addEventListener('click', function () { update_data_DO("2") });
+
+        </script>
+<!--
+        <footer class="footer">
+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
+            </div>
+        </footer>
+-->
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+
+    </div>
+
+</body>
+
+</html>

app/templates/dry_1008蓋圖片.html

@@ -0,0 +1,982 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+    -->
+    <style>
+        .DryContainer_position {
+            position: absolute;
+            top: 95px;
+            left: 55px;
+        }
+
+        .D1_position {
+            position: absolute;
+            top: 130px;
+            left: 245px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D2_position {
+            position: absolute;
+            top: 130px;
+            left: 425px;
+            width: 155px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D3_position {
+            position: absolute;
+            top: 130px;
+            left: 605px;
+            width: 160px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D4_position {
+            position: absolute;
+            top: 130px;
+            left: 780px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D5_position {
+            position: absolute;
+            top: 130px;
+            left: 960px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D6_position {
+            position: absolute;
+            top: 130px;
+            left: 1140px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D7_position {
+            position: absolute;
+            top: 615px;
+            left: 220px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D8_position {
+            position: absolute;
+            top: 615px;
+            left: 400px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D9_position {
+            position: absolute;
+            top: 615px;
+            left: 580px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D10_position {
+            position: absolute;
+            top: 615px;
+            left: 755px;
+            width: 160px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D11_position {
+            position: absolute;
+            top: 615px;
+            left: 930px;
+            width: 170px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .D12_position {
+            position: absolute;
+            top: 615px;
+            left: 1115px;
+            width: 165px;
+            height: 50px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DI1_position {
+            position: absolute;
+            top: 130px;
+            left: 120px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DI2_position {
+            position: absolute;
+            top: 615px;
+            left: 110px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DO1_position {
+            position: absolute;
+            top: 130px;
+            left: 1315px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DO2_position {
+            position: absolute;
+            top: 615px;
+            left: 1315px;
+            width: 100px;
+            height: 140px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .footer{
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        }
+        .actuator_status {
+            width: 18px; 
+            height: 18px; 
+            background-color:black; 
+            border-radius: 50%;
+        }
+    </style>
+    <script language="JavaScript">
+        // 指定 10秒 刷新網頁一次
+        var WebRestart
+        // WebRestart = setTimeout(function () { location.reload() }, 10000);
+        var status = '{{status}}';
+
+        $(document).ready(function(){
+            $("#coffee_title").text("乾燥貨櫃");
+        });
+
+
+    </script>
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        <!--
+            background-color:rgb(0, 238, 255);
+        
+        <div style="text-align: left;">
+            <a href="/index_new" style="float: left;">&nbsp;&nbsp;&nbsp;返回貨櫃首頁</a>
+        </div>
+        <div style="text-align: right;">
+            <a href="/camera_dry" style="float: right;">乾燥槽攝影機&nbsp;&nbsp;&nbsp;</a>
+        </div>
+        
+        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
+            Smart Coffee
+        </div>
+        -->
+
+        <div>
+            <!-- 底圖 乾燥貨櫃 12 個乾燥桶槽 -->
+            <div id="DryContainer_pic" class="DryContainer_position">
+                <img src="../static/img/web_dry_container.png" style="margin: auto;">
+            </div>
+
+            <!-- 乾燥槽 D1 START-->
+            <div id="D1" tabindex="0" class="D1_position" role="button">
+                D1 status
+                <!-- D1 狀態點點-->
+                <div id="D1_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+            <!-- 乾燥槽 D1 END-->
+
+            <!-- 乾燥槽 D2 -->
+            <div id="D2" tabindex="0" class="D2_position" role="button">
+                D2 status
+                <div id="D2_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D3 -->
+            <div id="D3" tabindex="0" class="D3_position" role="button">
+                D3 status
+                <div id="D3_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D4 -->
+            <div id="D4" tabindex="0" class="D4_position" role="button">
+                D4 status
+                <div id="D4_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D5 -->
+            <div id="D5" tabindex="0" class="D5_position" role="button">
+                D5 status
+                <div id="D5_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D6 -->
+            <div id="D6" tabindex="0" class="D6_position" role="button">
+                D6 status
+                <div id="D6_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: forestgreen;"></div>
+            </div>
+
+            <!-- 乾燥槽 D7 -->
+            <div id="D7" tabindex="0" class="D7_position" role="button">
+                D7 status
+                <div id="D7_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D8 -->
+            <div id="D8" tabindex="0" class="D8_position" role="button">
+                D8 status
+                <div id="D8_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D9 -->
+            <div id="D9" tabindex="0" class="D9_position" role="button">
+                D9 status
+                <div id="D9_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D10 -->
+            <div id="D10" tabindex="0" class="D10_position" role="button">
+                D10 status
+                <div id="D10_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D11 -->
+            <div id="D11" tabindex="0" class="D11_position" role="button">
+                D11 status
+                <div id="D11_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽 D12 -->
+            <div id="D12" tabindex="0" class="D12_position" role="button">
+                D12 status
+                <div id="D12_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DI1 -->
+            <div id="DI1" tabindex="0" class="DI1_position" role="button">
+                DI1 status
+                <div id="DI1_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DI2 -->
+            <div id="DI2" tabindex="0" class="DI2_position" role="button">
+                DI2 status
+                <div id="DI2_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DO1 -->
+            <div id="DO1" tabindex="0" class="DO1_position" role="button">
+                DO1 status
+                <div id="DO1_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+
+            <!-- 乾燥槽_入料儲豆槽 DO2 -->
+            <div id="DO2" tabindex="0" class="DO2_position" role="button">
+                DO2 status
+                <div id="DO2_status"
+                    style="width: 100%; height: 20px; border-style: solid; border-color: whitesmoke; background-color: #C0C0C0;"></div>
+            </div>
+        </div>
+
+
+
+
+
+        <!-- 乾燥槽互動視窗(模态框) -->
+        <div class="modal fade" id="D_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <!-- 互動視窗 標題 -->
+                    <div class="modal-header">
+                        <h4 id="Modal_title" class="modal-title">乾燥槽 D1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 互動視窗 內容 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                            <tr>
+                                <td><strong><a id="actuator_link" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="sensor_link" href="">感測器狀態</a></strong></td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <div id="tank_vacuum_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Vacuum" href="">真空吸料機</a>
+                                                <!--<span id="tank_vacuum_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_threewayvalve_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="ThreeWayValve" href="">三通閥</a>
+                                                <!--<span id="tank_threewayvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_solenoid_disinfect_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="SolenoidDisinfect" href="">消毒電磁閥</a>
+                                                <!--<span id="tank_solenoid_disinfect_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_motor_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Motor" href="">馬達</a>
+                                                <!--<span id="tank_motor_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_blower_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Blower" href="">鼓風機</a>
+                                                <!--<span id="tank_blower_t_status"></span>-->
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <div id="tank_heater1_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Heater1" href="">加熱器 1</a>
+                                                <!--<span id="tank_heater1_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_heater2_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Heater2" href="">加熱器 2</a>
+                                                <!--<span id="tank_heater2_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_temp1_enable_status" class="actuator_status">
+                                                </div>
+
+                                            </td>
+                                            <td>
+                                                <a id="TempEnable" href="">溫控開關</a>
+                                                <!--<span id="tank_temp1_enable_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_temp1_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Temp" href="">設定溫度</a>
+                                                <!--<span id="tank_temp1_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <div id="tank_solenoid_water_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="SolenoidWater" href="">排水電磁閥</a>
+                                                <!--<span id="tank_solenoid_water_t_status"></span>-->
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <div id="tank_diskvalve_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="DiskValve" href="">蝴蝶閥</a>
+                                                <!--<span id="tank_diskvalve_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <a id="UltraSonic" href="">咖啡生豆高度</a>
+                                            </td>
+                                            <td>
+                                                <span id="UltraSonic_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="SHT11_Temp" href="">乾燥槽溫度</a>
+                                            </td>
+                                            <td>
+                                                <span id="SHT11_Temp_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="SHT11_Humidity" href="">乾燥槽濕度</a>
+                                            </td>
+                                            <td>
+                                                <span id="SHT11_Humidity_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_Temp" href="">咖啡生豆溫度</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_Temp_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_Humidity" href="">咖啡生豆濕度</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_Humidity_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="soil_EC" href="">咖啡生豆 EC</a>
+                                            </td>
+                                            <td>
+                                                <span id="soil_EC_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="PA" href="">桶內壓力</a>
+                                            </td>
+                                            <td>
+                                                <span id="PA_t_status"></span>
+                                            </td>
+                                        </tr>
+
+                                        <tr>
+                                            <td>
+                                                <a id="camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                            </td>
+                                        </tr>
+
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+        <!-- 乾燥槽入料儲豆槽互動視窗(模态框) -->
+        <div class="modal fade" id="DI_Modal">
+            <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                <div class="modal-content">
+
+                    <!-- 互動視窗 標題 -->
+                    <div class="modal-header">
+                        <h4 id="Modal_title_input" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+
+                    <!-- 互動視窗 內容 -->
+                    <div class="modal-body">
+                        <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                            <!--<table style="border:0px gray solid;-->
+                            <tr>
+                                <td><strong><a id="actuator_link_input" href="">制動器狀態</a></strong></td>
+                                <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
+                            </tr>
+                            <tr>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <div id="input_vacuum_status" class="actuator_status">
+                                                </div>
+                                            </td>
+                                            <td>
+                                                <a id="Vacuum_input" href="">真空吸料機</a>
+                                                <!--<span id="tank_vacuum_t_status"></span>-->
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                                <td style="vertical-align:text-top;">
+                                    <table style="border:0px gray solid;" cellpadding="3">
+                                        <!--font-size:12px; -->
+                                        <tr>
+                                            <td>
+                                                <a id="DI_UltraSonic" href="">咖啡生豆高度</a>
+                                            </td>
+                                            <td>
+                                                <span id="DI_UltraSonic_t_status"></span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td>
+                                                <a id="DI_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+
+
+
+            <!-- 乾燥槽出料儲豆槽互動視窗(模态框) -->
+            <div class="modal fade" id="DO_Modal">
+                <div class="modal-dialog modal-dialog-centered" style="width: 400px;">
+                    <div class="modal-content">
+        
+                        <!-- 互動視窗 標題 -->
+                        <div class="modal-header">
+                            <h4 id="Modal_title_output" class="modal-title">乾燥入料儲豆槽 DI1 狀態</h4>
+                            <button type="button" class="close" data-dismiss="modal">&times;</button>
+                        </div>
+        
+                        <!-- 互動視窗 內容 -->
+                        <div class="modal-body">
+                            <table style="border:0px gray solid; width: 100%;" cellpadding="3">
+                                <!--<table style="border:0px gray solid;-->
+                                <tr>
+                                    <td><strong><a id="actuator_link_output" href="">制動器狀態</a></strong></td>
+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
+                                </tr>
+                                <tr>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <!--font-size:12px; -->
+                                            <tr>
+                                                <td>
+                                                    <div id="output_vacuum_status"
+                                                        style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
+                                                    </div>
+                                                </td>
+                                                <td>
+                                                    <a id="Vacuum_output" href="">真空吸料機</a>
+                                                    <!--<span id="tank_vacuum_t_status"></span>-->
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                    <td style="vertical-align:text-top;">
+                                        <table style="border:0px gray solid;" cellpadding="3">
+                                            <!--font-size:12px; -->
+                                            <tr>
+                                                <td>
+                                                    <a id="DO_UltraSonic" href="/chart_DO/UltraSonic/1">咖啡生豆高度</a>
+                                                </td>
+                                                <td>
+                                                    <span id="DO_UltraSonic_t_status"></span>
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="DO_camera_dry_tid" href=""><strong>攝影機畫面</strong></a>
+                                                </td>
+                                            </tr>
+                                        </table>
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+
+
+
+
+        <script>
+            function update_data_D(dtid) {
+                console.log('dry_tank_id:' + dtid)
+                // dtid = dry_tank_id
+                $.get('/loading/D' + dtid, '', function (res) {
+
+                    if (res.tank_vacuum == 0) {
+                        $("#tank_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_vacuum == 1) {
+                        $("#tank_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#tank_vacuum_status").css("background-color", "crimson") }
+
+                    if (res.tank_threewayvalve == 0) {
+                        $("#tank_threewayvalve_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_threewayvalve == 1) {
+                        $("#tank_threewayvalve_status").css("background-color", "forestgreen")
+                    } else { $("#tank_threewayvalve_status").css("background-color", "crimson") }
+
+                    if (res.tank_diskvalve == 0) {
+                        $("#tank_diskvalve_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_diskvalve == 1) {
+                        $("#tank_diskvalve_status").css("background-color", "forestgreen")
+                    } else { $("#tank_diskvalve_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_disinfect == 0) {
+                        $("#tank_solenoid_disinfect_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_disinfect == 1) {
+                        $("#tank_solenoid_disinfect_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_disinfect_status").css("background-color", "crimson") }
+
+                    if (res.tank_solenoid_water == 0) {
+                        $("#tank_solenoid_water_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_solenoid_water == 1) {
+                        $("#tank_solenoid_water_status").css("background-color", "forestgreen")
+                    } else { $("#tank_solenoid_water_status").css("background-color", "crimson") }
+
+                    if (res.tank_motor == 0) {
+                        $("#tank_motor_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_motor > 0 || res.tank_motor < 0) {
+                        $("#tank_motor_status").css("background-color", "forestgreen")
+                    } else { $("#tank_motor_status").css("background-color", "crimson") }
+
+                    if (res.tank_blower == 0) {
+                        $("#tank_blower_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_blower == 1) {
+                        $("#tank_blower_status").css("background-color", "forestgreen")
+                    } else { $("#tank_blower_status").css("background-color", "crimson") }
+
+                    if (res.tank_heater1 == 0) {
+                        $("#tank_heater1_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_heater1 == 1) {
+                        $("#tank_heater1_status").css("background-color", "forestgreen")
+                    } else { $("#tank_heater1_status").css("background-color", "crimson") }
+
+                    if (res.tank_heater2 == 0) {
+                        $("#tank_heater2_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_heater2 == 1) {
+                        $("#tank_heater2_status").css("background-color", "forestgreen")
+                    } else { $("#tank_heater2_status").css("background-color", "crimson") }
+
+                    if (res.tank_temp1_enable == 0) {
+                        $("#tank_temp1_enable_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_temp1_enable == 1) {
+                        $("#tank_temp1_enable_status").css("background-color", "forestgreen")
+                    } else { $("#tank_temp1_enable_status").css("background-color", "crimson") }
+
+                    if (res.tank_temp1 == 0) {
+                        $("#tank_temp1_status").css("background-color", "#C0C0C0")
+                    } else if (res.tank_temp1 > 0) {
+                        $("#tank_temp1_status").css("background-color", "forestgreen")
+                    } else { $("#tank_temp1_status").css("background-color", "crimson") }
+
+                    $("#tank_vacuum_t_status").text(res.tank_vacuum);
+                    $("#tank_threewayvalve_t_status").text(res.tank_threewayvalve);
+                    $("#tank_diskvalve_t_status").text(res.tank_diskvalve);
+                    $("#tank_solenoid_disinfect_t_status").text(res.tank_solenoid_disinfect);
+                    $("#tank_solenoid_water_t_status").text(res.tank_solenoid_water);
+                    $("#tank_motor_t_status").text(res.tank_motor);
+                    $("#tank_blower_t_status").text(res.tank_blower);
+                    $("#tank_heater1_t_status").text(res.tank_heater1);
+                    $("#tank_heater2_t_status").text(res.tank_heater2);
+                    $("#tank_temp1_enable_t_status").text(res.tank_temp1_enable);
+                    $("#tank_temp1_t_status").text(res.tank_temp1);
+
+                    $("#UltraSonic_t_status").text(res.UltraSonic);
+                    $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
+                    $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
+                    $("#soil_Temp_t_status").text(res.soil_Temp);
+                    $("#soil_Humidity_t_status").text(res.soil_Humidity);
+                    $("#soil_EC_t_status").text(res.soil_EC);
+                    $("#PA_t_status").text(res.PA);
+                }, 'json');
+
+                $('#Modal_title').text("乾燥槽 D" + dtid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum').attr("title", "使用者無修改權限")
+                    $('#ThreeWayValve').attr("title", "使用者無修改權限")
+                    $('#SolenoidDisinfect').attr("title", "使用者無修改權限")
+                    $('#Motor').attr("title", "使用者無修改權限")
+                    $('#Blower').attr("title", "使用者無修改權限")
+                    $('#Heater1').attr("title", "使用者無修改權限")
+                    $('#Heater2').attr("title", "使用者無修改權限")
+                    $('#TempEnable').attr("title", "使用者無修改權限")
+                    $('#Temp').attr("title", "使用者無修改權限")
+                    $('#SolenoidWater').attr("title", "使用者無修改權限")
+                    $('#DiskValve').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link').attr("href", "/dry_container_tank/" + dtid)
+                    $('#sensor_link').attr("href", "/dry_container_tank/" + dtid)
+                    $('#Vacuum').attr("href", "/ctrl_D_Vacuum/" + dtid)
+                    $('#ThreeWayValve').attr("href", "/ctrl_D_ThreeWayValve/" + dtid)
+                    $('#SolenoidDisinfect').attr("href", "/ctrl_D_SolenoidDisinfect/" + dtid)
+                    $('#Motor').attr("href", "/ctrl_D_Motor/" + dtid)
+                    $('#Blower').attr("href", "/ctrl_D_Blower/" + dtid)
+                    $('#Heater1').attr("href", "/ctrl_D_Heater1/" + dtid)
+                    $('#Heater2').attr("href", "/ctrl_D_Heater2/" + dtid)
+                    $('#TempEnable').attr("href", "/ctrl_D_TempEnable/" + dtid)
+                    $('#Temp').attr("href", "/ctrl_D_Temp/" + dtid)
+                    $('#SolenoidWater').attr("href", "/ctrl_D_SolenoidWater/" + dtid)
+                    $('#DiskValve').attr("href", "/ctrl_D_DiskValve/" + dtid)
+                }
+                
+
+                $('#SHT11_Temp').attr("href", "/chart_D/SHT11_Temp/" + dtid)
+                $('#SHT11_Humidity').attr("href", "/chart_D/SHT11_Humidity/" + dtid)
+                $('#UltraSonic').attr("href", "/chart_D/UltraSonic/" + dtid)
+                $('#PA').attr("href", "/chart_D/PA/" + dtid)
+                $('#soil_Temp').attr("href", "/chart_D/soil_Temp/" + dtid)
+                $('#soil_Humidity').attr("href", "/chart_D/soil_Humidity/" + dtid)
+                $('#soil_EC').attr("href", "/chart_D/soil_EC/" + dtid)
+                $('#camera_dry_tid').attr("href", "/camera_D" + dtid)
+
+                
+                
+                $('#D_Modal').modal('show');
+            }
+
+
+
+            function update_data_DI(ditid){
+                console.log('dry_input_tank_id:' + ditid)
+                // ditid = dry_input_tank_id
+                $.get('/loading/DI' + ditid, '', function (res) {
+                    if (res.input_vacuum == 0) {
+                        $("#input_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.input_vacuum == 1) {
+                        $("#input_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#input_vacuum_status").css("background-color", "crimson") }
+
+                    $("#DI_UltraSonic_t_status").text(res.input_UltraSonic);
+
+                }, 'json');
+                
+                $('#Modal_title_input').text("乾燥入料儲豆槽 DI" + ditid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum_input').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_input').attr("href", "/dry_container_input/" + ditid)
+                    $('#sensor_link_input').attr("href", "/dry_container_input/" + ditid)
+                    $('#Vacuum_input').attr("href", "/ctrl_DI_Vacuum/" + ditid)
+                }
+                $('#DI_UltraSonic').attr("href", "/chart_DI/UltraSonic/" + ditid)
+                $('#DI_camera_dry_tid').attr("href", "/camera_DI" + ditid)
+                $('#DI_Modal').modal('show');
+            };
+
+            function update_data_DO(dotid){
+                console.log('dry_output_tank_id:' + dotid)
+                // dotid = dry_output_tank_id
+                $.get('/loading/DO' + dotid, '', function (res) {
+                    if (res.output_vacuum == 0) {
+                        $("#output_vacuum_status").css("background-color", "#C0C0C0")
+                    } else if (res.output_vacuum == 1) {
+                        $("#output_vacuum_status").css("background-color", "forestgreen")
+                    } else { $("#output_vacuum_status").css("background-color", "crimson") }
+
+                    $("#DO_UltraSonic_t_status").text(res.output_UltraSonic);
+
+                }, 'json');
+                
+                $('#Modal_title_output').text("乾燥出料儲豆槽 DO" + dotid + " 狀態")
+
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "使用者無修改權限")
+                    $('#sensor_link').attr("title", "使用者無修改權限")
+                    $('#Vacuum_output').attr("title", "使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_output').attr("href", "/dry_container_output/" + dotid)
+                    $('#sensor_link_output').attr("href", "/dry_container_output/" + dotid)
+                    $('#Vacuum_output').attr("href", "/ctrl_DO_Vacuum/" + dotid)
+                }
+                $('#DO_UltraSonic').attr("href", "/chart_DO/UltraSonic/" + dotid)
+                $('#DO_camera_dry_tid').attr("href", "/camera_DO" + dotid)
+                $('#DO_Modal').modal('show');
+            };
+
+
+            var button_D1 = document.getElementById('D1');
+            button_D1.addEventListener('click', function () { update_data_D("1") });
+
+            var button_D2 = document.getElementById('D2');
+            button_D2.addEventListener('click', function () { update_data_D("2") });
+
+            var button_D3 = document.getElementById('D3');
+            button_D3.addEventListener('click', function () { update_data_D("3") });
+
+            var button_D4 = document.getElementById('D4');
+            button_D4.addEventListener('click', function () { update_data_D("4") });
+
+            var button_D5 = document.getElementById('D5');
+            button_D5.addEventListener('click', function () { update_data_D("5") });
+
+            var button_D6 = document.getElementById('D6');
+            button_D6.addEventListener('click', function () { update_data_D("6") });
+
+            var button_D7 = document.getElementById('D7');
+            button_D7.addEventListener('click', function () { update_data_D("7") });
+
+            var button_D8 = document.getElementById('D8');
+            button_D8.addEventListener('click', function () { update_data_D("8") });
+
+            var button_D9 = document.getElementById('D9');
+            button_D9.addEventListener('click', function () { update_data_D("9") });
+
+            var button_D10 = document.getElementById('D10');
+            button_D10.addEventListener('click', function () { update_data_D("10") });
+
+            var button_D11 = document.getElementById('D11');
+            button_D11.addEventListener('click', function () { update_data_D("11") });
+
+            var button_D12 = document.getElementById('D12');
+            button_D12.addEventListener('click', function () { update_data_D("12") });
+
+            var button_DI1 = document.getElementById('DI1');
+            button_DI1.addEventListener('click', function () { update_data_DI("1") });
+
+            var button_DI2 = document.getElementById('DI2');
+            button_DI2.addEventListener('click', function () { update_data_DI("2") });
+
+            var button_DO1 = document.getElementById('DO1');
+            button_DO1.addEventListener('click', function () { update_data_DO("1") });
+
+            var button_DO2 = document.getElementById('DO2');
+            button_DO2.addEventListener('click', function () { update_data_DO("2") });
+
+        </script>
+<!--
+        <footer class="footer">
+            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
+                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
+                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
+            </div>
+        </footer>
+-->
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+
+    </div>
+
+</body>
+
+</html>

app/templates/dry_auto.html

@@ -26,11 +26,28 @@
     -->
     <script>
         $(document).ready(function(){
-            $("#coffee_title").text('乾燥自動化');
-
+            $("#coffee_title_pc").text('乾燥自動化');
+            $("#coffee_title_phone").text('乾燥自動化');
             // 桶槽入料顯示
             dry_input_status_N = ['{{DI1}}', '{{DI2}}']
-            console.log('dry_input_status_N: ' + dry_input_status_N)
+            // 桶槽狀態顯示
+            dry_tank_status_N = ['{{D1}}', '{{D2}}', '{{D3}}', '{{D4}}', '{{D5}}', '{{D6}}', 
+                                 '{{D7}}', '{{D8}}', '{{D9}}', '{{D10}}', '{{D11}}', '{{D12}}']
+            // 桶槽出料顯示
+            dry_output_status_N = ['{{DO1}}', '{{DO2}}']
+            loading_D_status()
+            loading_D()
+
+            var data
+            var dry_status_interval
+
+            // css 
+            // height: 185px; 取代成 height: 210px;
+            // DI2 DO2  top: 620px; 取代成 top: 645px;
+        });
+
+        function loading_D_status(){
+            // console.log('dry_input_status_N: ' + dry_input_status_N)
             for (let i=0; i<dry_input_status_N.length; i++) {
                 // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                 // console.log(i+1 + ' : '+ dry_input_status_N[i])
@@ -49,11 +66,7 @@
                     console.log('pass')
                 }
             }
-
-            // 桶槽狀態顯示
-            dry_tank_status_N = ['{{D1}}', '{{D2}}', '{{D3}}', '{{D4}}', '{{D5}}', '{{D6}}', 
-                                    '{{D7}}', '{{D8}}', '{{D9}}', '{{D10}}', '{{D11}}', '{{D12}}']
-            console.log('dry_tank_status_N: ' + dry_tank_status_N)
+            // console.log('dry_tank_status_N: ' + dry_tank_status_N)
             for (let i=0; i<dry_tank_status_N.length; i++) {
                 // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                 // console.log(i+1 + ' : '+ dry_tank_status_N[i])
@@ -88,10 +101,7 @@
                     console.log('pass')
                 }
             }
-            
-            // 桶槽出料顯示
-            dry_output_status_N = ['{{DO1}}', '{{DO2}}']
-            console.log('dry_output_status_N: ' + dry_output_status_N)
+            // console.log('dry_output_status_N: ' + dry_output_status_N)
             for (let i=0; i<dry_output_status_N.length; i++) {
                 // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
                 // console.log(i+1 + ' : '+ dry_output_status[i])
@@ -114,11 +124,78 @@
                 }
 
             }
+        }
 
-            // css 
-            // height: 185px; 取代成 height: 210px;
-            // DI2 DO2  top: 620px; 取代成 top: 645px;
-        });
+        function loading_D(){
+            $.get('/loading/DI1', '', function (res) {
+                $("#actuator_00").text(res.input_vacuum);
+                $("#sensor_00").text(res.input_UltraSonic);
+            }, 'json');
+            $.get('/loading/D2', '', function (res) {
+                $("#actuator_1").text(res.tank_vacuum);
+                $("#actuator_2").text(res.tank_threewayvalve);
+                $("#actuator_3").text(res.tank_diskvalve);
+                $("#actuator_4").text(res.tank_solenoid_disinfect);
+                $("#actuator_5").text(res.tank_solenoid_water);
+                $("#actuator_6").text(res.tank_motor);
+                $("#actuator_7").text(res.tank_blower);
+                $("#actuator_8").text(res.tank_heater1);
+                $("#actuator_9").text(res.tank_heater2);
+                $("#actuator_10").text(res.tank_temp1_enable);
+                $("#actuator_11").text(res.tank_temp1);
+                $("#sensor_1").text(res.UltraSonic);
+                $("#sensor_2").text(res.SHT11_Temp);
+                $("#sensor_3").text(res.SHT11_Humidity);
+                $("#sensor_4").text(res.soil_Temp);
+                $("#sensor_5").text(res.soil_Humidity);
+                $("#sensor_6").text(res.soil_EC);
+                $("#sensor_7").text(res.PA);
+            }, 'json');
+            $.get('/loading/DO1', '', function (res) {
+                $("#actuator_99").text(res.output_vacuum);
+                $("#sensor_99").text(res.output_UltraSonic);
+            }, 'json');
+        };
+
+        function getting_parameters_D(){
+            var Dry_Input_bean_height = $("input[name=Dry_Input_bean_height]").val();
+            var Dry_Input_vacuumON_time = $("input[name=Dry_Input_vacuumON_time]").val();
+            var Dry_Input_vacuumOFF_time = $("input[name=Dry_Input_vacuumOFF_time]").val();
+            var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
+            var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
+            var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
+            var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
+            var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
+            var Dry_Tank_drying_EC = $("input[name=Dry_Tank_drying_EC]").val();
+            var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
+            var Dry_Tank_TempWeight_SHT11 = $("input[name=Dry_Tank_TempWeight_SHT11]").val();
+            var Dry_Tank_TempWeight_soil = $("input[name=Dry_Tank_TempWeight_soil]").val();
+            var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
+            var Dry_Output_bean_height = $("input[name=Dry_Output_bean_height]").val();
+            var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
+            var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
+            var Dry_Tank_Disinfect_time = $("input[name=Dry_Tank_Disinfect_time]").val();
+
+            data = {"command": "Dry_auto_parameter",
+                    "Dry_Input_bean_height": Dry_Input_bean_height,
+                    "Dry_Input_vacuumON_time": Dry_Input_vacuumON_time,
+                    "Dry_Input_vacuumOFF_time": Dry_Input_vacuumOFF_time,
+                    "Dry_Tank_bean_height": Dry_Tank_bean_height,
+                    "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time,
+                    "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time,
+                    "Dry_Tank_drying_temp": Dry_Tank_drying_temp,
+                    "Dry_Tank_drying_time": Dry_Tank_drying_time,
+                    "Dry_Tank_drying_EC": Dry_Tank_drying_EC,
+                    "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm,
+                    "Dry_Tank_TempWeight_SHT11": Dry_Tank_TempWeight_SHT11,
+                    "Dry_Tank_TempWeight_soil": Dry_Tank_TempWeight_soil,
+                    "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity,
+                    "Dry_Output_bean_height": Dry_Output_bean_height,
+                    "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time,
+                    "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time,
+                    "Dry_Tank_Disinfect_time": Dry_Tank_Disinfect_time
+                    };
+        }
     </script>
     
     <style>
@@ -190,22 +267,14 @@
             background-color: #eee;
             text-align: center;
         }
-        
+        .input-text {
+            height: 25px;
+            width: 40px;
+            text-align: center;
+            margin-left: 2px;
+            margin-right: 5px;
+        }
     </style>
-    <script language="JavaScript">
-        // 指定 10秒 刷新網頁一次
-        var WebUpdate_set
-        // WebUpdate_set = setInterval(function(){WebUpdate()} , 60 * 1000)
-
-        function WebUpdate(){
-            console.log("-- 狀態更新 start --")
-            /*
-            $.get('/loading_container_status/D', '', function (res) {
-            }, 'json');
-            */
-            console.log("-- 狀態更新 end --")
-        };
-    </script>
 
 </head>
 
@@ -217,8 +286,75 @@
         </div>
 
         <div>
-
-            <!-- 乾燥貨櫃 狀態表格-->
+            <div style="text-align: center;">
+                <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_stop()">
+                    <u>狀態判斷_停止</u></button>
+
+                <script>
+                    function dry_auto_status_stop(){
+                        // clearInterval(loading_D_interval)
+                        clearInterval(dry_status_interval)
+                        console.log("------- 狀態自動化判斷 停止 -------")
+                    }
+                </script>
+
+                <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="dry_auto_status_testing()">
+                    <u>[測試] 乾燥自動化_狀態判斷</u></button>
+
+                <script>
+                    var loading_D_interval
+                    // var loading_D_interval
+                    var dry_status_process = 0;
+                    
+                    function dry_auto_status_testing(){
+                        console.log("------- 狀態自動化判斷 開始 -------")
+                        // 取得桶槽狀態
+                        // loading_D_interval = setInterval(loading_D, 10*1000)
+                        // 取得目前乾燥參數
+                        getting_parameters_D()
+
+                        // 更新桶槽狀態
+                        dry_status_interval = setInterval(dry_auto_status, 10*1000);
+
+                        function dry_auto_status(){
+                            if (dry_status_process == 1) { return };
+
+                            dry_status_process = 1;
+                            $.get('dry_auto_status', data, function (res){
+                                DI1 = res.Dry_Input_1
+                                D1 = res.Dry_Tank_1
+                                D2 = res.Dry_Tank_2
+                                D3 = res.Dry_Tank_3
+                                D4 = res.Dry_Tank_4
+                                D5 = res.Dry_Tank_5
+                                D6 = res.Dry_Tank_6
+                                DO1 = res.Dry_Output_1
+                                console.log('DI1: ' + DI1)
+                                console.log('D1: ' + D1)
+                                console.log('D2: ' + D2)
+                                console.log('D3: ' + D3)
+                                console.log('D4: ' + D4)
+                                console.log('D5: ' + D5)
+                                console.log('D6: ' + D6)
+                                console.log('DO1: ' + DO1)
+
+                                // ----- 乾燥入料 DI1 狀態 --------------------------------------------------------------
+                                dry_input_status_N = [res.Dry_Input_1]
+                                // ----- 乾燥桶槽 D1~D6 狀態 --------------------------------------------------------------
+                                dry_tank_status_N = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
+                                // ----- 乾燥出料 DO1 狀態 --------------------------------------------------------------
+                                dry_output_status_N = [res.Dry_Output_1]
+                                loading_D_status()
+                                dry_status_process = 0;
+                            }, 'json');
+
+                        };
+
+                    };
+                </script>
+            </div>
+
+            <!-- 乾燥貨櫃 狀態表格 -->
             <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                 <tr>
                     <td style="border: lightsteelblue 1px solid;">
@@ -388,9 +524,161 @@
                 </tr>
             </table>
 
-
-
-            <!-- 乾燥貨櫃 參數設定-->
+            <!-- 乾燥貨櫃 致動器狀態 感測器數值 -->
+            <div style="text-align: center;">
+                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
+                    <tr>
+                        <td>
+                            入料<br>Vacuum
+                        </td>
+                        <td>
+                            桶槽<br>
+                            Vacuum
+                        </td>
+                        <td>
+                            入料<br>三通閥
+                        </td>
+                        <td>
+                            蝴蝶閥
+                        </td>
+                        <td>
+                            消毒<br>電磁閥
+                        </td>
+                        <td>
+                            排水<br>電磁閥
+                        </td>
+                        <td>
+                            馬達
+                        </td>
+                        <td>
+                            鼓風機
+                        </td>
+                        <td>
+                            加熱器<br>1
+                        </td>
+                        <td>
+                            加熱器<br>2
+                        </td>
+                        <td>
+                            溫控開關
+                        </td>
+                        <td>
+                            設定溫度
+                        </td>
+                        <td>
+                            出料<br>Vacuum
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span id="actuator_00">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_1">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_2">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_3">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_4">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_5">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_6">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_7">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_8">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_9">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_10">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_11">x</span>
+                        </td>
+                        <td>
+                            <span id="actuator_99">x</span>
+                        </td>
+                        
+                    </tr>
+                
+                </table>
+
+                <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 5px;" cellpadding="5" border="1">
+                    <tr>
+                        <td>
+                            入料<br>高度
+                        </td>
+                        <td>
+                            桶內<br>高度
+                        </td>
+                        <td>
+                            SHT11<br>溫度
+                        </td>
+                        <td>
+                            SHT11<br>濕度
+                        </td>
+                        <td>
+                            Soil<br>溫度
+                        </td>
+                        <td>
+                            Soil<br>濕度
+                        </td>
+                        <td>
+                            Soil<br>EC
+                        </td>
+                        <td>
+                            PA
+                        </td>
+                        <td>
+                            出料<br>高度
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <span id="sensor_00">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_1">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_2">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_3">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_4">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_5">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_6">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_7">00</span>
+                        </td>
+                        <td>
+                            <span id="sensor_99">00</span>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+
+
+            <!-- 乾燥貨櫃 參數設定 -->
             <table style="border: 3px lightsteelblue solid; margin-right: auto; margin-left: auto; text-align: center; margin-top: 10px;" cellpadding="5" border="1">
                 <tr>
                     <td>
@@ -408,42 +696,48 @@
                 </tr>
                 <tr>
                     <td style="padding: 10px; text-align: left; vertical-align: text-top;">
-                        吸料時間&nbsp; 
-                        <input name="Dry_Input_vacuumON_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
-                        放料時間&nbsp; 
-                        <input name="Dry_Input_vacuumOFF_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
+                        生豆高度
+                        <input name="Dry_Input_bean_height" type="text" class="input-text" value="5">公分<br>
+                        吸料時間
+                        <input name="Dry_Input_vacuumON_time" type="text" class="input-text" value="5">秒<br>
+                        放料時間
+                        <input name="Dry_Input_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
                     </td>
                     <td style="padding: 10px; text-align: left; vertical-align: text-top;">
-                        指定生豆高度&nbsp; 
-                        <input name="Dry_Tank_bean_height" type="text" value="100" style="width:50px;">&nbsp; 公分<br>
-                        吸料時間&nbsp; 
-                        <input name="Dry_Tank_vacuumON_time" type="text" value="10" style="width:50px;">&nbsp; 秒,&nbsp; 
-                        放料時間&nbsp; 
-                        <input name="Dry_Tank_vacuumOFF_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
-                        馬達轉速&nbsp; 
-                        <input name="Dry_Tank_motor_rpm" type="text" value="30" style="width:50px;">&nbsp; rpm<br>
+                        生豆高度
+                        <input name="Dry_Tank_bean_height" type="text" class="input-text" value="5">公分<br>
+                        吸料時間
+                        <input name="Dry_Tank_vacuumON_time" type="text" class="input-text" value="10">秒,
+                        放料時間
+                        <input name="Dry_Tank_vacuumOFF_time" type="text" class="input-text" value="10">秒<br>
+                        馬達轉速
+                        <input name="Dry_Tank_motor_rpm" type="text" class="input-text" value="30">rpm<br>
                         ----- 溫度權重設定 ----------------------------------------------<br>
-                        [上]桶內溫度×權重&nbsp;
-                        <input name="Dry_Tank_TempWeight_SHT11" type="text" value="0.5" style="width:50px;">
+                        [SHT11]桶內溫度×權重
+                        <input name="Dry_Tank_TempWeight_SHT11" type="text" class="input-text" value="0.5">
                         +
-                        [下]生豆溫度×權重&nbsp; 
-                        <input name="Dry_Tank_TempWeight_soil" type="text" value="0.5" style="width:50px;">
+                        [soil]生豆溫度×權重
+                        <input name="Dry_Tank_TempWeight_soil" type="text" class="input-text" value="0.5">
                         <br>
                         ----- 乾燥完成條件 (輸入 0 代表不設定) ------------------------<br>
-                        指定乾燥溫度&nbsp; 
-                        <input name="Dry_Tank_drying_temp" type="text" value="40" style="width:50px;">&nbsp; ℃
-                        , 且指定持溫時間&nbsp; 
-                        <input name="Dry_Tank_drying_time" type="text" value="30" style="width:50px;">&nbsp; 分鐘<br>
-                        指定 EC &nbsp; 
-                        <input name="Dry_Tank_drying_EC" type="text" value="300" style="width:50px;">&nbsp;&nbsp;/&nbsp;
-                        指定濕度 &nbsp; 
-                        <input name="Dry_Tank_drying_Humidity" type="text" value="30" style="width:50px;">&nbsp;%<br>
+                        指定溫度
+                        <input name="Dry_Tank_drying_temp" type="text" class="input-text" value="40">℃
+                        , 指定濕度 
+                        <input name="Dry_Tank_drying_Humidity" type="text" class="input-text" value="30">%
+                        , 持溫時間
+                        <input name="Dry_Tank_drying_time" type="text" class="input-text" value="60">秒<br>
+                        <del>指定 EC</del> 
+                        <input name="Dry_Tank_drying_EC" type="text" class="input-text" value="300">, 
+                        消毒開啟
+                        <input name="Dry_Tank_Disinfect_time" class="input-text" type="text" value="10">秒
                     </td>
                     <td style="padding: 10px; text-align: left; vertical-align: text-top;">
-                        吸料時間&nbsp; 
-                        <input name="Dry_Output_vacuumON_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
-                        放料時間&nbsp; 
-                        <input name="Dry_Output_vacuumOFF_time" type="text" value="10" style="width:50px;">&nbsp; 秒<br>
+                        生豆高度
+                        <input name="Dry_Output_bean_height" type="text" class="input-text" value="5">公分<br>
+                        吸料時間
+                        <input name="Dry_Output_vacuumON_time" type="text" class="input-text" value="5"> 秒<br>
+                        放料時間 
+                        <input name="Dry_Output_vacuumOFF_time" type="text" class="input-text" value="10"> 秒<br>
                     </td>
                 </tr>
             </table>
@@ -452,41 +746,11 @@
                 [測試] MQTT + 每 60 秒更新貨櫃狀態</button></center>
             <script>
                 function dry_auto(){
-                    var Dry_Input_vacuumON_time = $("input[name=Dry_Input_vacuumON_time]").val();
-                    var Dry_Input_vacuumOFF_time = $("input[name=Dry_Input_vacuumOFF_time]").val();
-                    var Dry_Tank_bean_height = $("input[name=Dry_Tank_bean_height]").val();
-                    var Dry_Tank_vacuumON_time = $("input[name=Dry_Tank_vacuumON_time]").val();
-                    var Dry_Tank_vacuumOFF_time = $("input[name=Dry_Tank_vacuumOFF_time]").val();
-                    var Dry_Tank_drying_temp = $("input[name=Dry_Tank_drying_temp]").val();
-                    var Dry_Tank_drying_time = $("input[name=Dry_Tank_drying_time]").val();
-                    var Dry_Tank_drying_EC = $("input[name=Dry_Tank_drying_EC]").val();
-                    var Dry_Tank_motor_rpm = $("input[name=Dry_Tank_motor_rpm]").val();
-                    var Dry_Tank_TempWeight_SHT11 = $("input[name=Dry_Tank_TempWeight_SHT11]").val();
-                    var Dry_Tank_TempWeight_soil = $("input[name=Dry_Tank_TempWeight_soil]").val();
-                    var Dry_Tank_drying_Humidity = $("input[name=Dry_Tank_drying_Humidity]").val();
-                    var Dry_Output_vacuumON_time = $("input[name=Dry_Output_vacuumON_time]").val();
-                    var Dry_Output_vacuumOFF_time = $("input[name=Dry_Output_vacuumOFF_time]").val();
-                    
-                    var data = { "command": "Dry_auto_parameter", 
-                                 "Dry_Input_vacuumON_time": Dry_Input_vacuumON_time, 
-                                 "Dry_Input_vacuumOFF_time": Dry_Input_vacuumOFF_time, 
-                                 "Dry_Tank_bean_height": Dry_Tank_bean_height, 
-                                 "Dry_Tank_vacuumON_time": Dry_Tank_vacuumON_time, 
-                                 "Dry_Tank_vacuumOFF_time": Dry_Tank_vacuumOFF_time, 
-                                 "Dry_Tank_drying_temp": Dry_Tank_drying_temp, 
-                                 "Dry_Tank_drying_time": Dry_Tank_drying_time, 
-                                 "Dry_Tank_drying_EC": Dry_Tank_drying_EC, 
-                                 "Dry_Tank_motor_rpm": Dry_Tank_motor_rpm, 
-                                 "Dry_Tank_TempWeight_SHT11": Dry_Tank_TempWeight_SHT11, 
-                                 "Dry_Tank_TempWeight_soil": Dry_Tank_TempWeight_soil, 
-                                 "Dry_Tank_drying_Humidity": Dry_Tank_drying_Humidity, 
-                                 "Dry_Output_vacuumON_time": Dry_Output_vacuumON_time, 
-                                 "Dry_Output_vacuumOFF_time": Dry_Output_vacuumOFF_time };
+                    getting_parameters_D()
 
                     $.post('/mqtt/101', data, function (res) {
                         console.log('data: ', data)
                         console.log('res: ', res)
-
                     }, 'text')
                     
                     var dry_interval = setInterval(testing_D_auto, 30*1000)
@@ -498,8 +762,7 @@
             
             <script>
                 function testing_D_auto(){
-                    $.get('/dry_auto_status', '', function (res) {
-                        Dry_Input_1_STATUS = res.Dry_Input_1
+                    $.get('/dry_auto', '', function (res) {
                         console.log('DI1: ' + res.Dry_Input_1)
                         console.log('D1: ' + res.Dry_Tank_1)
                         console.log('D2: ' + res.Dry_Tank_2)
@@ -509,114 +772,14 @@
                         console.log('D6: ' + res.Dry_Tank_6)
                         console.log('DO1: ' + res.Dry_Output_1)
 
-                        // ----- 乾燥入料 FI1 狀態 --------------------------------------------------------------
-                        dry_input_status = [res.Dry_Input_1]
-                        console.log('dry_input_status: ' + dry_input_status)
-                        for (let i=0; i<dry_input_status.length; i++) {
-                            // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
-                            // console.log(i+1 + ' : '+ dry_input_status[i])
-                            // 1 : F_InputtingBean
-                            // 2 : F_Waiting
-                            if (dry_input_status[i] == 'DI_InputtingBean') {
-                                console.log('[動作] 乾燥入料 DI' + parseInt(i+1) + ' 入豆中')
-                                $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 入豆中")
-                            } else if (dry_input_status[i] == 'DI_Waiting') {
-                                console.log('[動作] 乾燥入料 DI' + parseInt(i+1) + ' 空桶等待')
-                                $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
-                                $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 空桶等待")
-                            } else if (dry_input_status[i] == 'DI_OutputtingBean') {
-                                console.log('[動作] 乾燥入料 DI' + parseInt(i+1) + ' 可出豆')
-                                $("#DI"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#DI"+parseInt(i+1)+"_status").text("DI" + parseInt(i+1) + " 可出豆")
-                            } else {
-                                console.log('pass')
-                            }
-                        }
-
-                        // ----- 乾燥桶槽 F1~F6 狀態 --------------------------------------------------------------
-                        dry_tank_status = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
-                        console.log('dry_tank_status: ' + dry_tank_status)
-                        for (let i=0; i<dry_tank_status.length; i++) {
-                            // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
-                            // console.log(i+1 + ' : '+ dry_tank_status[i])
-                            // 1 : D_InputtingBean
-                            // 2 : D_Waiting
-                            if (dry_tank_status[i] == 'D_InputtingBean') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 入豆中')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆中")
-                            } else if (dry_tank_status[i] == 'D_InputtingBean_Pause') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 入豆暫停')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆暫停")
-                            } else if (dry_tank_status[i] == 'D_InputtingBean_Finish') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 入豆完成')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  入豆完成")
-                            } else if (dry_tank_status[i] == 'D_Waiting') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 空桶等待')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  空桶等待")
-                            } else if (dry_tank_status[i] == 'D_Cleaning') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 清洗中')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "plum")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  清洗中")
-                            } else if (dry_tank_status[i] == 'D_Drying') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 乾燥中')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  乾燥中")
-                            } else if (dry_tank_status[i] == 'D_OutputtingBean') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 可出豆')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  可出豆")
-                            } else if (dry_tank_status[i] == 'D_Warning') {
-                                console.log('[動作] 乾燥桶槽 D' + parseInt(i+1) + ' 發生錯誤')
-                                $("#D"+parseInt(i+1)+"_status_dot").css("background-color", "crimson")
-                                $("#D"+parseInt(i+1)+"_status").text("D" + parseInt(i+1) + "  發生錯誤")
-                                $("#D"+parseInt(i+1)+"_status").css("color", "crimson")
-                            } else {
-                                console.log('pass')
-                            }
-                        }
-
-                        // ----- 乾燥出料 FO1 狀態 --------------------------------------------------------------
-                        dry_output_status = [res.Dry_Output_1]
-                        console.log('dry_output_status: ' + dry_output_status)
-                        for (let i=0; i<dry_output_status.length; i++) {
-                            // 顯示對應乾燥桶槽號碼 D1~D6 和目前狀態
-                            // console.log(i+1 + ' : '+ dry_output_status[i])
-                            // 1 : D_InputtingBean
-                            // 2 : D_Waiting
-                            if (dry_output_status[i] == 'DO_InputtingBean') {
-                                console.log('[動作] 乾燥出料 DO' + parseInt(i+1) + ' 入豆中')
-                                $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 入豆中")
-                            } else if (dry_output_status[i] == 'DO_Waiting') {
-                                console.log('[動作] 乾燥出料 DO' + parseInt(i+1) + ' 空桶等待')
-                                $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "lightgray")
-                                $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 空桶等待")
-                            } else if (dry_output_statu[i] == 'DO_OutputtingBean') {
-                                console.log('[動作] 乾燥出料 DO' + parseInt(i+1) + ' 可出豆')
-                                $("#DO"+parseInt(i+1)+"_status_dot").css("background-color", "MediumSeaGreen")
-                                $("#DO"+parseInt(i+1)+"_status").text("DO" + parseInt(i+1) + " 可出豆")
-                            } else {
-                                console.log('pass')
-                            }
-                        }
-
+                        // ----- 乾燥入料 DI1 狀態 --------------------------------------------------------------
+                        dry_input_status_N = [res.Dry_Input_1]
+                        // ----- 乾燥桶槽 D1~D6 狀態 --------------------------------------------------------------
+                        dry_tank_status_N = [res.Dry_Tank_1, res.Dry_Tank_2, res.Dry_Tank_3, res.Dry_Tank_4, res.Dry_Tank_5, res.Dry_Tank_6]
+                        // ----- 乾燥出料 DO1 狀態 --------------------------------------------------------------
+                        dry_output_status_N = [res.Dry_Output_1]
+                        loading_D_status()
                         
-                        /*
-                        console.log(res.Dry_Input_2)
-                        console.log(res.Dry_Tank_7)
-                        console.log(res.Dry_Tank_8)
-                        console.log(res.Dry_Tank_9)
-                        console.log(res.Dry_Tank_10)
-                        console.log(res.Dry_Tank_11)
-                        console.log(res.Dry_Tank_12)
-                        console.log(res.Dry_Output_1)
-                        console.log(res.Dry_Output_2)
-                        */
                     }, 'json');
                     // console.log("-- 自動化程式 end --")
                 }
@@ -630,6 +793,11 @@
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}
         </div>
+
+        <br>
+        <br>
+        <br>
+
     </div>
 
 </body>

app/templates/dry_block.html

@@ -0,0 +1,835 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script language="JavaScript">
+        // 指定 秒 刷新網頁一次
+        var dtn = '{{tid}}';
+        var status = '{{status}}';
+        console.log('dtn:' + dtn)
+
+        $(function(){
+            $("#coffee_title_pc").text("乾燥槽積木程式介面");
+            $("#coffee_title_phone").text("乾燥槽積木");
+
+            if (status == 2) {
+                $('input').prop('disabled', true);
+                $('button').prop('disabled', true);
+            } else if ( (status == 0) || (status == 1) ) {
+                $('input').prop('disabled', false);
+                $('button').prop('disabled', false);   
+            }
+        });
+    </script>
+
+    <style>
+        .newcondition_css {
+            padding: 10px;
+            margin-top: 10px;
+            background-color:honeydew;
+        }
+        hr {
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+        .input-cond-delete {
+            background: #E43030;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            margin-left: 5px;
+            width: 65px;
+            height: 33px;
+            font-size: 16px;
+            text-align: center;
+            line-height: 16px;
+            color: #FFFFFF;
+        }
+        .input-cond-add {
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            margin-left: 5px;
+            width: 65px;
+            height: 33px;
+            font-size: 16px;
+            text-align: center;
+            line-height: 16px;
+            color: #FFFFFF;
+        }
+        .input-act-add {
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            margin-left: 5px;
+            width: 100px;
+            height: 33px;
+            font-size: 16px;
+            text-align: center;
+            line-height: 16px;
+            color: #FFFFFF;
+        }
+        .input-act-delete {
+            background: #E43030;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            margin-left: 5px;
+            width: 100px;
+            height: 33px;
+            font-size: 16px;
+            text-align: center;
+            line-height: 16px;
+            color: #FFFFFF;
+        }
+        .input-add {
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            margin-left: 5px;
+            margin-top: 5px;
+            width: 150px;
+            height: 40px;
+            font-size: 18px;
+            text-align: center;
+            line-height: 16px;
+            color: #FFFFFF;
+        }
+        .input-delete {
+            background: #E43030;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            border-radius: 5px;
+            margin-left: 5px;
+            margin-top: 5px;
+            width: 150px;
+            height: 40px;
+            font-size: 18px;
+            text-align: center;
+            line-height: 16px;
+            color: #FFFFFF;
+        }
+        select {
+            font-size: 24px;
+            height: 30px;
+            padding: 2px 5px;
+            margin-left: 5px;
+        }
+
+    </style>
+
+</head>
+
+<body style="font-size: 18px;">
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        <!-- [物件]文字輸入框 選擇後連結 [動作]文字輸入框 -->
+        <script>
+            dry_object = new Array();
+            dry_object[0] = ["-"];  // 制動器 / 感測器
+            dry_object[1] = ["on", "off"];  // 入料真空吸料機
+            dry_object[2] = ["on", "off"];  // 真空吸料機
+            dry_object[3] = ["ON 吸料", "OFF 排氣"];  // 入料三通閥
+            dry_object[4] = ["0", "10", "20", "30", "40", "50"];  // 馬達
+            dry_object[5] = ["on", "off"];  // 鼓風機
+            dry_object[6] = ["on", "off"];  // 加熱器 1
+            dry_object[7] = ["on", "off"];  // 加熱器 2
+            dry_object[8] = ["on", "off"];  // 蝴蝶閥
+            dry_object[9] = ["on", "off"];  // 消毒電磁閥
+            dry_object[10] = ["on", "off"];  // 排水電磁閥
+            dry_object[11] = ["on", "off"];  // 夾層進水電磁閥
+            dry_object[12] = ["on", "off"];  // 溫控開關
+            dry_object[13] = ["0.0", "28.0", "30.0", "32.0", "34.0", "36.0", "38.0", "40.0", "42.0", "44.0", "46.0", "48.0", "50.0"];  // 設定溫度
+            dry_object[14] = ["on", "off"];  // 出料真空吸料機
+
+            dry_object[15] = ["1", "5", "10", "30", "60"];  // 暫停秒數
+
+            dry_object[16] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 入料儲豆槽_液位計
+            dry_object[17] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 液位計
+            dry_object[18] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // SHT11_溫度
+            dry_object[19] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // SHT11_濕度
+            dry_object[20] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 土壤三合一_溫度
+            dry_object[21] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 土壤三合一_濕度
+            dry_object[22] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 土壤三合一_EC
+            dry_object[23] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 氣壓
+            dry_object[24] = ["off", "1s", "5s", "10s", "30s", "1min", "5min", "10min", "30min", "1hr", "2hr"];  // 出料儲豆槽_液位計
+
+            function renew(obj_num, index) {
+                var Value="";
+                for(var i=0; i<dry_object[index].length; i++){
+                    Value = Value + '<option value=' + dry_object[index][i] + '> ' + dry_object[index][i] + '</option>';
+                }
+                var sectorSelect = document.getElementById("do_act" + obj_num);
+                // console.log("sectorSelect: " + sectorSelect)
+                sectorSelect.innerHTML = Value;
+            }
+
+        </script>
+        
+        <div id="box">
+            <div id="newcondition_1" class="newcondition_css">
+                <!-- 總 條件 -->
+                <div id="condition1">
+                    <!-- 子條件 1_1-->
+                    <div id="condition1_1">
+                        條件
+                        <select id="cond_z1_1">
+                            <option value="if">if</option>
+                            <option value="while">while</option>
+                        </select>
+                        <select id="cond_tank1_1">
+                            <option value="D1">乾燥桶 D1</option>
+                            <option value="D2">乾燥桶 D2</option>
+                            <option value="D3">乾燥桶 D3</option>
+                            <option value="D4">乾燥桶 D4</option>
+                            <option value="D5">乾燥桶 D5</option>
+                            <option value="D6">乾燥桶 D6</option>
+                            <option value="D7">乾燥桶 D7</option>
+                            <option value="D8">乾燥桶 D8</option>
+                            <option value="D9">乾燥桶 D9</option>
+                            <option value="D10">乾燥桶 D10</option>
+                            <option value="D11">乾燥桶 D11</option>
+                            <option value="D12">乾燥桶 D12</option>
+                        </select>
+                        <select id="cond_a1_1">
+                            <option value="">制動器 / 感測器</option>
+                            <optgroup label="制動器">
+                                <option value="input_vacuum_status">入料真空吸料機</option>
+                                <option value="tank_vacuum_status">真空吸料機</option>
+                                <option value="tank_threewayvalve_input_status">入料三通閥</option>
+                                <option value="tank_motor_status">馬達</option>
+                                <option value="tank_blower_status">鼓風機</option>
+                                <option value="tank_heater1_status">加熱器 1</option>
+                                <option value="tank_heater2_status">加熱器 2</option>
+                                <option value="tank_diskvalve_status">蝴蝶閥</option>
+                                <option value="tank_solenoid_disinfect_status">消毒電磁閥</option>
+                                <option value="tank_solenoid_water_out_status">排水電磁閥</option>
+                                <option value="outer_solenoid_water_status">夾層進水電磁閥</option>
+                                <option value="tank_temp_enable">溫控開關</option>
+                                <option value="tank_temp">設定溫度</option>
+                                <option value="output_vacuum">出料真空吸料機</option>
+                            </optgroup>
+                            <optgroup label="感測器數值">
+                                <option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>
+                                <option value="tank_UltraSonic">液位計(cm)</option>
+                                <option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>
+                                <option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>
+                                <option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>
+                                <option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>
+                                <option value="tank_soil_EC">土壤三合一_EC(%)</option>
+                                <option value="tank_PA">氣壓(PA)</option>
+                                <option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>
+                            </optgroup>
+                        </select>
+                        <select id="cond_b1_1">
+                            <option value="equal">==</option>
+                            <option value="morethan">&gt;=</option>
+                            <option value="lessthan">&lt;=</option>
+                        </select>
+                        <input list="cond_list_c1_1" id="cond_c1_1">
+                        <datalist id="cond_list_c1_1">
+                            <option value="on">
+                            <option value="off">
+                            <option value="(或請自行輸入數值)">
+                        </datalist>
+                        <input type="button" class="input-cond-add" id="cond_add1_1" value="條件++" onclick="cond_add(cond_add1_1);"><br>
+                        <script>
+                            var cond_add_child_i = 1                                                // 這是子條件
+
+                            function cond_add(evt) {                                                // cond_add1_1 下一個是 cond_add1(條件)_2(子條件)
+                                evt.style.display = "none";                                         // 不顯示原按鈕
+                                var condadd_parent_num = String(evt.id).split('_')[1].slice(3, )    // 把第一個條件的編號記下
+                                // console.log("condadd_parent_num: " + condadd_parent_num)
+
+                                cond_add_child_i++
+
+                                var html = '';
+                                html +=
+                                '<div id="condition' + condadd_parent_num + '_' + cond_add_child_i + '">' +
+                                '<select id="cond_d' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
+                                '<option value="and">and</option>' + 
+                                '<option value="or">or</option>' + 
+                                '</select> ' + 
+                                '<select id="cond_a' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
+                                '<option value="">制動器 / 感測器</option>' +
+                                '<optgroup label="制動器">' +
+                                '<option value="input_vacuum_status">入料真空吸料機</option>' +
+                                '<option value="tank_vacuum_status">真空吸料機</option>' +
+                                '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +
+                                '<option value="tank_motor_status">馬達</option>' +
+                                '<option value="tank_blower_status">鼓風機</option>' +
+                                '<option value="tank_heater1_status">加熱器 1</option>' +
+                                '<option value="tank_heater2_status">加熱器 2</option>' +
+                                '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
+                                '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
+                                '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +
+                                '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +
+                                '<option value="tank_temp_enable">溫控開關</option>' +
+                                '<option value="tank_temp">設定溫度</option>' +
+                                '<option value="output_vacuum_status">出料真空吸料機</option>' +
+                                '</optgroup>' +
+                                '<optgroup label="感測器數值">' +
+                                '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +
+                                '<option value="tank_UltraSonic">液位計(cm)</option>' +
+                                '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +
+                                '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +
+                                '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +
+                                '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +
+                                '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +
+                                '<option value="tank_PA">氣壓(PA)</option>' +
+                                '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +
+                                '</optgroup>' +
+                                '</select> ' + 
+                                '<select id="cond_b' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
+                                '<option value="equal">==</option>' +
+                                '<option value="morethan">&gt;=</option>' +
+                                '<option value="lessthan">&lt;=</option>' +
+                                '</select> ' +
+                                '<input list="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '" id="cond_c' + condadd_parent_num + '_' + cond_add_child_i + '">' + 
+                                '<datalist id="cond_list_c' + condadd_parent_num + '_' + cond_add_child_i + '">' +
+                                '<option value="on">' +
+                                '<option value="off">' +
+                                '<option value="(或請自行輸入數值)">' +
+                                '</datalist> ' +
+                                '<input type="button" class="input-cond-delete" id="cond_del' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件--" onclick="cond_del(\'' + condadd_parent_num + '_' + cond_add_child_i + '\');">' +
+                                '<input type="button" class="input-cond-add" id="cond_add' + condadd_parent_num + '_' + cond_add_child_i + '" value="條件++" onclick="cond_add(cond_add' + condadd_parent_num + '_' + cond_add_child_i + ');"><br>' +
+                                '</div>';
+
+                                var divbox = document.getElementById('condition' + condadd_parent_num);
+                                divbox.insertAdjacentHTML('beforeend', html);
+                            }
+
+                            function cond_del(evt) {
+                                // console.log('evt: ' + evt)
+                                var del_cond_child = document.getElementById('condition' + evt);
+                                // console.log("del_cond_child: " + del_cond_child)
+                                del_cond_child.innerHTML = ""
+
+                                var parentObj = del_cond_child.parentNode;       // 取得欲刪除 div 的父類別
+                                parentObj.removeChild(del_cond_child)            // 刪除 div
+
+                                // 上一個按鈕要顯示出來
+                                var del_cond_parent_num = String(evt).split('_')[0]
+                                var del_cond_child_num = String(evt).split('_')[1]
+                                // console.log('del_cond_parent_num: ' + del_cond_parent_num)
+                                // console.log('del_cond_child_num: ' + del_cond_child_num)
+                                var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1));
+                                // console.log("test: " + 'cond_add' + del_cond_parent_num + '_' + String(parseInt(del_cond_child_num)-1))
+                                // console.log("button_return_id: " + button_return_id)    // null
+                                if (button_return_id == null) {
+                                    var button_return_id = document.getElementById('cond_add' + del_cond_parent_num + '_1');
+                                }
+                                button_return_id.style.display = "inline";
+                            }
+                        </script>
+
+                    </div>
+                </div>
+
+                <div id="action1">
+                    <div id="action1_1">
+                        物件
+                        <select id="do_obj1_1" onChange="renew('1_1', this.selectedIndex);">
+                            <option value="">制動器 / 感測器</option>
+                            <optgroup label="制動器">
+                                <option value="input_vacuum_status">入料真空吸料機</option>
+                                <option value="tank_vacuum_status">真空吸料機</option>
+                                <option value="tank_threewayvalve_input_status">入料三通閥</option>
+                                <option value="tank_motor_status">馬達</option>
+                                <option value="tank_blower_status">鼓風機</option>
+                                <option value="tank_heater1_status">加熱器 1</option>
+                                <option value="tank_heater2_status">加熱器 2</option>
+                                <option value="tank_diskvalve_status">蝴蝶閥</option>
+                                <option value="tank_solenoid_disinfect_status">消毒電磁閥</option>
+                                <option value="tank_solenoid_water_out_status">排水電磁閥</option>
+                                <option value="outer_solenoid_water_status">夾層進水電磁閥</option>
+                                <option value="tank_temp_enable">溫控開關</option>
+                                <option value="tank_temp">設定溫度</option>
+                                <option value="output_vacuum">出料真空吸料機</option>
+                                <option value="time.sleep">暫停秒數</option>
+                            </optgroup>
+                            <optgroup label="感測器回傳值頻率">
+                                <option value="input_ultrasonic_status">入料儲豆槽_液位計(cm)</option>
+                                <option value="tank_ultrasonic_status">液位計(cm)</option>
+                                <option value="tank_sht11_temp_status">SHT11_溫度(℃)</option>
+                                <option value="tank_sht11_humidity_status">SHT11_濕度(%)</option>
+                                <option value="tank_soil_temp_status">土壤三合一_溫度(℃)</option>
+                                <option value="tank_soil_humidity_status">土壤三合一_濕度(%)</option>
+                                <option value="tank_soil_ec_status">土壤三合一_EC(%)</option>
+                                <option value="tank_pa_status">氣壓(PA)</option>
+                                <option value="output_ultrasonic_status">出料儲豆槽_液位計(cm)</option>
+                            </optgroup>
+                        </select>
+                        動作
+                        <select id="do_act1_1">
+                            <option value="">請由左方選取物件
+                        </select>
+                        <input type="button" class="input-act-add" id="act_add1_1" value="物件動作++" onclick="act_add(act_add1_1);"><br>
+                    
+                    </div>
+
+                    <script>
+                        var act_add_child_i = 1
+                        function act_add(evt) {
+                            evt.style.display = "none";
+                            var actadd_parent_num = String(evt.id).split('_')[1].slice(3, )
+                            // console.log("actadd_parent_num: " + actadd_parent_num)
+
+                            act_add_child_i++;
+
+                            var html = '';
+                            html +=
+                            '<div id="action' + actadd_parent_num + '_' + act_add_child_i + '">' +
+                            '物件 ' +
+                            '<select id="do_obj' + actadd_parent_num + '_' + act_add_child_i + '" onChange="renew(\'' + actadd_parent_num + '_' + act_add_child_i + '\', this.selectedIndex);">' +
+                            '<option value="">制動器 / 感測器</option>' +
+                            '<optgroup label="制動器">' +
+                            '<option value="input_vacuum_status">入料真空吸料機</option>' +
+                            '<option value="tank_vacuum_status">真空吸料機</option>' +
+                            '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +
+                            '<option value="tank_motor_status">馬達</option>' +
+                            '<option value="tank_blower_status">鼓風機</option>' +
+                            '<option value="tank_heater1_status">加熱器 1</option>' +
+                            '<option value="tank_heater2_status">加熱器 2</option>' +
+                            '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
+                            '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
+                            '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +
+                            '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +
+                            '<option value="tank_temp_enable">溫控開關</option>' +
+                            '<option value="tank_temp">設定溫度</option>' +
+                            '<option value="output_vacuum">出料真空吸料機</option>' +
+                            '<option value="time.sleep">暫停秒數</option>' +
+                            '</optgroup>' +
+                            '<optgroup label="感測器回傳值頻率">' +
+                            '<option value="input_ultrasonic_status">入料儲豆槽_液位計(cm)</option>' +
+                            '<option value="tank_ultrasonic_status">液位計(cm)</option>' +
+                            '<option value="tank_sht11_temp_status">SHT11_溫度(℃)</option>' +
+                            '<option value="tank_sht11_humidity_status">SHT11_濕度(%)</option>' +
+                            '<option value="tank_soil_temp_status">土壤三合一_溫度(℃)</option>' +
+                            '<option value="tank_soil_humidity_status">土壤三合一_濕度(%)</option>' +
+                            '<option value="tank_soil_ec_status">土壤三合一_EC(%)</option>' +
+                            '<option value="tank_pa_status">氣壓(PA)</option>' +
+                            '<option value="output_ultrasonic_status">出料儲豆槽_液位計(cm)</option>' +
+                            '</optgroup>' +
+                            '</select> ' +
+                            '動作 ' +
+                            '<select id="do_act' + actadd_parent_num + '_' + act_add_child_i + '">' +
+                            '<option value="">請由左方選取物件</option>' +
+                            '</select> ' +
+                            '<input type="button" class="input-act-delete" id="act_del' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作--" onclick="act_del(\'' + actadd_parent_num + '_' + act_add_child_i + '\');">' +
+                            '<input type="button" class="input-act-add" id="act_add' + actadd_parent_num + '_' + act_add_child_i + '" value="物件動作++" onclick="act_add(act_add' + actadd_parent_num + '_' + act_add_child_i + ');"><br>' +
+                            '</div>';
+
+                            var divbox = document.getElementById('action' + actadd_parent_num);
+                            divbox.insertAdjacentHTML('beforeend', html);
+                        }
+
+                        function act_del(evt) {
+                            var del_action = document.getElementById('action' + evt);
+                            del_action.innerHTML = ""
+
+                            var parentObj = del_action.parentNode;       // 取得欲刪除 div 的父類別
+                            parentObj.removeChild(del_action)            // 刪除 div
+                            
+                            var del_act_parent_num = String(evt).split('_')[0]
+                            var del_act_child_num = String(evt).split('_')[1]
+                            // console.log('del_act_parent_num: ' + del_act_parent_num)
+                            // console.log('del_act_child_num: ' + del_act_child_num)
+                            var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1));
+                            // console.log("test: " + 'cond_add' + del_act_parent_num + '_' + String(parseInt(del_act_child_num)-1))
+                            // console.log("button_return_id: " + button_return_id)    // null
+                            if (button_return_id == null) {
+                                var button_return_id = document.getElementById('act_add' + del_act_parent_num + '_1');
+                            }
+                            button_return_id.style.display = "inline";
+
+                        }
+                    </script>
+
+                    
+                </div>
+
+                <input type="button" class="input-add" id="add1" value="條件物件動作++" onclick="Add(add1);">
+            </div>
+
+            <script>
+                var new_condition_i = 1
+
+                function Add(evt) {                                 // 網頁初始按鈕 onclick="Add(add1);
+                    evt.style.display = "none";                     // 元素不顯示。將 add1 的 input-button 不顯示
+                    new_condition_i++;                                            // 設定編號用
+                    // var div = document.createElement('div');        // 輸出 <div></div>。此時並不會顯示, 
+                                                                    // 需透過 appendChild()、insertBefore() 或 replaceChild() 等方法將新元素加入至指定的位置之後才會顯示。
+                    // var cond_number = String(evt).slice(3, )        // 目前的 condition 條件物件動作 數 (最外層)
+                    // var cond_a = 'cond_a' + cond_number + '_' + new_condition_i;  // [條件] 左方 : 制動器感測器
+                    // var cond_b = 'cond_b' + cond_number + '_' + new_condition_i;  // [條件] 中間 : > / = / < 
+                    // var cond_c = 'cond_c' + cond_number + '_' + new_condition_i;  // [條件] 右方 : ON / OFF / 數值
+                    // var cond_d = 'cond_d' + cond_number + '_' + new_condition_i;  // 條件] 最左方條件連接 : and / or
+                    // div.id = 'newcondition_' + new_condition_i;                   // 設定 div 的 id
+                    // div.style.marginTop = "10px";                   // 新增的 div 設定 marginTop 屬性值
+                    var html = ''
+
+                    
+
+                    // 新增的條件
+                    html += 
+                    '<div id="newcondition_' + new_condition_i + '" class="newcondition_css">' +
+                    
+                    // 新增的分隔線
+                    // '<hr size="50" width="100%">' +
+
+
+                    '<div id="condition' + new_condition_i + '">' +
+                    '<div id="condition' + new_condition_i + '_1">' +
+                    '條件 ' +
+                    '<select id="cond_z' + new_condition_i + '_1">' +
+                    '<option value="if">if</option>' +
+                    '<option value="while">while</option>' +
+                    '</select> ' +
+                    '<select id="cond_tank' + new_condition_i + '_1">' +
+                    '<option value="D1">乾燥桶 D1</option>' +
+                    '<option value="D2">乾燥桶 D2</option>' +
+                    '<option value="D3">乾燥桶 D3</option>' +
+                    '<option value="D4">乾燥桶 D4</option>' +
+                    '<option value="D5">乾燥桶 D5</option>' +
+                    '<option value="D6">乾燥桶 D6</option>' +
+                    '<option value="D7">乾燥桶 D7</option>' +
+                    '<option value="D8">乾燥桶 D8</option>' +
+                    '<option value="D9">乾燥桶 D9</option>' +
+                    '<option value="D10">乾燥桶 D10</option>' +
+                    '<option value="D11">乾燥桶 D11</option>' +
+                    '<option value="D12">乾燥桶 D12</option>' +
+                    '</select> ' +
+                    '<select id="cond_a' + new_condition_i + '_1">' +
+                    '<option value="">制動器 / 感測器</option>' +
+                    '<optgroup label="制動器">' +
+                    '<option value="input_vacuum_status">入料真空吸料機</option>' +
+                    '<option value="tank_vacuum_status">真空吸料機</option>' +
+                    '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +
+                    '<option value="tank_motor_status">馬達</option>' +
+                    '<option value="tank_blower_status">鼓風機</option>' +
+                    '<option value="tank_heater1_status">加熱器 1</option>' +
+                    '<option value="tank_heater2_status">加熱器 2</option>' +
+                    '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
+                    '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
+                    '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +
+                    '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +
+                    '<option value="tank_temp_enable">溫控開關</option>' +
+                    '<option value="tank_temp">設定溫度</option>' +
+                    '<option value="output_vacuum_status">出料真空吸料機</option>' +
+                    '</optgroup>' +
+                    '<optgroup label="感測器數值">' +
+                    '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +
+                    '<option value="tank_UltraSonic">液位計(cm)</option>' +
+                    '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +
+                    '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +
+                    '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +
+                    '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +
+                    '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +
+                    '<option value="tank_PA">氣壓(PA)</option>' +
+                    '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +
+                    '</optgroup>' +
+                    '</select> ' +
+                    '<select id="cond_b' + new_condition_i + '_1">' +
+                    '<option value="equal">==</option>' +
+                    '<option value="morethan">&gt;=</option>' +
+                    '<option value="lessthan">&lt;=</option>' +
+                    '</select> ' +
+                    '<input list="cond_list_c' + new_condition_i + '_1" id="cond_c' + new_condition_i + '_1">' +
+                    '<datalist id="cond_list_c' + new_condition_i + '_1">' +
+                    '<option value="on">' +
+                    '<option value="off">' +
+                    '<option value="(或請自行輸入數值)">' +
+                    '</datalist> ' +
+                    '<input type="button" class="input-cond-add" id="cond_add' + new_condition_i + '_1" value="條件++" onclick="cond_add(cond_add' + new_condition_i + '_1)"><br>' +
+                    '</div></div>';
+
+                    // 新增的物件動作
+                    html +=
+                    '<div id="action' + new_condition_i + '">' +
+                    '<div id="action' + new_condition_i + '_1">' +
+                    '物件 ' +
+                    '<select id="do_obj' + new_condition_i + '_1" onChange="renew(\''+ new_condition_i + '_1\', this.selectedIndex);">' +
+                    '<option value="">制動器 / 感測器</option>' +
+                    '<optgroup label="制動器">' +
+                    '<option value="input_vacuum_status">入料真空吸料機</option>' +
+                    '<option value="tank_vacuum_status">真空吸料機</option>' +
+                    '<option value="tank_threewayvalve_input_status">入料三通閥</option>' +
+                    '<option value="tank_motor_status">馬達</option>' +
+                    '<option value="tank_blower_status">鼓風機</option>' +
+                    '<option value="tank_heater1_status">加熱器 1</option>' +
+                    '<option value="tank_heater2_status">加熱器 2</option>' +
+                    '<option value="tank_diskvalve_status">蝴蝶閥</option>' +
+                    '<option value="tank_solenoid_disinfect_status">消毒電磁閥</option>' +
+                    '<option value="tank_solenoid_water_out_status">排水電磁閥</option>' +
+                    '<option value="outer_solenoid_water_status">夾層進水電磁閥</option>' +
+                    '<option value="tank_temp_enable">溫控開關</option>' +
+                    '<option value="tank_temp">設定溫度</option>' +
+                    '<option value="output_vacuum">出料真空吸料機</option>' +
+                    '<option value="time.sleep">暫停秒數</option>' +
+                    '</optgroup>' +
+                    '<optgroup label="感測器回傳值頻率">' +
+                    '<option value="input_ultrasonic_status">入料儲豆槽_液位計(cm)</option>' +
+                    '<option value="tank_ultrasonic_status">液位計(cm)</option>' +
+                    '<option value="tank_sht11_temp_status">SHT11_溫度(℃)</option>' +
+                    '<option value="tank_sht11_humidity_status">SHT11_濕度(%)</option>' +
+                    '<option value="tank_soil_temp_status">土壤三合一_溫度(℃)</option>' +
+                    '<option value="tank_soil_humidity_status">土壤三合一_濕度(%)</option>' +
+                    '<option value="tank_soil_ec_status">土壤三合一_EC(%)</option>' +
+                    '<option value="tank_pa_status">氣壓(PA)</option>' +
+                    '<option value="output_ultrasonic_status">出料儲豆槽_液位計(cm)</option>' +
+                    '</optgroup>' +
+                    '</select>' +
+                    ' 動作 ' +
+                    '<select id="do_act' + new_condition_i + '_1">' +
+                    '<option value="">請由左方選取物件' +
+                    '</select> ' +
+                    '<input type="button" class="input-act-add" id="act_add' + new_condition_i + '_1" value="物件動作++" onclick="act_add(act_add' + new_condition_i + '_1);"><br>' +
+                    '</div>' +
+                    '</div>' +
+
+                    // 新增的 條件物件動作++ 條件物件動作-- 按鈕
+                    '<input type="button" class="input-delete" id="del' + new_condition_i + '" value="條件物件動作--" onclick="Delete(' + new_condition_i + ');"><br>' +
+                    '<input type="button" class="input-add" id="add' + new_condition_i + '" value="條件物件動作++" onclick="Add(add' + new_condition_i + ');">' +
+                    '</div>' ;
+
+                    var divbox = document.getElementById('box');
+                    divbox.insertAdjacentHTML('beforeend', html);
+
+                };
+                function Delete(evt) {
+                    var del_condition = document.getElementById('newcondition_' + evt);
+                    del_condition.innerHTML = ""
+
+                    var parentObj = del_condition.parentNode;       // 取得欲刪除 div 的父類別
+                    parentObj.removeChild(del_condition)            // 刪除 div
+
+                    // 上一個按鈕要顯示出來
+                    var button_return_id = document.getElementById('add' + String(parseInt(evt)-1));
+                    if (button_return_id == null) {
+                        var button_return_id = document.getElementById('add1');
+                    }
+                    // console.log('button_return_id: ' + button_return_id)
+                    button_return_id.style.display = "block";        // 元素顯示。顯示前一個 input-button
+                };
+
+            </script>        
+
+            <!-- 新增加的 newcondition_(編號) 會加在這裡 -->
+
+        </div>
+        - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+        <br>
+
+        <input type="button" id="test" value="取值測試" onclick="test();"><br>
+        <span id="value_test"> ( 取值測試 ) </span><br>
+        <span id="command_test"> ( command 測試 ) </span><br>
+        <input type="button" id="test" value="ajax 測試" onclick="AJAXtest();">
+
+        <script>
+            var set_Schedule = '';
+
+            function test(){
+                // console.log("new_condition_i: " + new_condition_i)      // 總數 : 條件物件動作
+                // console.log("cond_add_child_i: " + cond_add_child_i)    // 總數 : 子 條件
+                // console.log("act_add_child_i: " + act_add_child_i)      // 總數 : 子 物件動作
+
+                // set_Schedule += 'set_Schedule = { ';
+                set_Schedule = '{ ';
+
+                var command_test = '';
+                // 條件物件動作 取值
+                for (let z = 1; z <= new_condition_i; z++) {
+                    // if-while 取值
+                    try {
+                        var cond_z_value = document.getElementById("cond_z" + z + "_1").value;
+                        // console.log("cond_z" + z + "_1: " + cond_z_value)
+                        set_Schedule += '"cond_z' + z + '_1": "' + cond_z_value + '", ' ;
+                    } catch (error) {
+                        if (error.name == 'TypeError') {
+                            console.log("cond_z" + z + "_1: null")
+                        } else {
+                            alert("cond_z" + z + "_1: " + error.name)
+                            break
+                        }
+                    }
+
+                    // 桶槽號碼 取值
+                    try {
+                        var cond_tank_value = document.getElementById("cond_tank" + z + "_1").value;
+                        // console.log("cond_tank" + z + "_1: " + cond_tank_value)
+                        set_Schedule += '"cond_tank' + z + '_1": "' + cond_tank_value + '", ' ;
+                    } catch (error) {
+                        if (error.name == 'TypeError') {
+                            console.log("cond_tank" + z + "_1: null")
+                        } else {
+                            alert("cond_tank" + z + "_1: " + error.name)
+                            break
+                        }
+                    }
+
+                    // 子 條件 取值
+                    for (let x = 1; x <= cond_add_child_i; x++) {
+                        // 子條件取值 : 條件連接 and or
+                        if (x > 1) {
+                            try {
+                                var cond_d_value = document.getElementById("cond_d" + z + "_" + x).value;
+                                // console.log("cond_d" + z + "_" + x + ": " + cond_d_value)
+                                set_Schedule += '"cond_d' + z + '_' + x + '": "' + cond_d_value + '", ' ;
+                            } catch (error) {
+                                if (error.name == 'TypeError') {
+                                    // console.log("cond_d" + z + "_" + x + ": null")
+                                } else {
+                                    alert("cond_d" + z + "_" + x + ": " + error.name)
+                                    break
+                                }
+                            }
+                        }
+                        try {
+                            var cond_a_value = document.getElementById("cond_a" + z + "_" + x).value;
+                            // console.log("cond_a" + z + "_" + x + ": " + cond_a_value)
+                            set_Schedule += '"cond_a' + z + '_' + x + '": "' + cond_a_value + '", ' ;
+                            if (cond_a_value == '') {
+                                alert('條件欄位輸入有誤, 請再次確認')
+                                break
+                            }
+                        } catch (error) {
+                            if (error.name == 'TypeError') {
+                                // console.log("cond_a" + z + "_" + x + ": null")
+                            } else {
+                                alert("cond_a" + z + "_" + x + ": " + error.name)
+                                break
+                            }
+                        }
+                        // 子條件取值 : 條件中 > = <
+                        try {
+                            var cond_b_value = document.getElementById("cond_b" + z + "_" + x).value;
+                            // console.log("cond_b" + z + "_" + x + ": " + cond_b_value)
+                            set_Schedule += '"cond_b' + z + '_' + x + '": "' + cond_b_value + '", ' ;
+                            if (cond_b_value == '') {
+                                alert('條件欄位輸入有誤, 請再次確認')
+                                break
+                            }
+                        } catch (error) {
+                            if (error.name == 'TypeError') {
+                                // console.log("cond_b" + z + "_" + x + ": null")
+                            } else {
+                                alert("cond_b" + z + "_" + x + ": " + error.name)
+                                break
+                            }
+                        }
+                        // 子條件取值 : 條件右 ON / OFF / 輸入數值
+                        try {
+                            var cond_c_value = document.getElementById("cond_c" + z + "_" + x).value;
+                            // console.log("cond_c" + z + "_" + x + ": " + cond_c_value)
+                            set_Schedule += '"cond_c' + z + '_' + x + '": "' + cond_c_value + '", ' ;
+                            if (cond_c_value == '') {
+                                alert('條件欄位輸入有誤, 請再次確認')
+                                break
+                            }
+                        } catch (error) {
+                            if (error.name == 'TypeError') {
+                                // console.log("cond_c" + z + "_" + x + ": null")
+                            } else {
+                                alert("cond_c" + z + "_" + x + ": " + error.name)
+                                break
+                            }
+                        }   
+                    }
+
+                    // 子 物件動作 取值
+                    for (let y = 1; y <= act_add_child_i; y++) {
+                        // 子物件動作取值 : 物件 do_obj1_1
+                        try {
+                            var do_obj_value = document.getElementById("do_obj" + z + "_" + y).value;
+                            if (do_obj_value == '') {
+                                alert('物件欄位輸入有誤, 請再次確認')
+                                break
+                            }
+                            // console.log("do_obj" + z + "_" + y + ": " + do_obj_value)
+                            set_Schedule += '"do_obj' + z + '_' + y + '": "' + do_obj_value + '", ' ;
+                            command_test += '{"tank_num": "' + cond_tank_value + '", "command": "' + do_obj_value + '", "value":"';
+                        } catch (error) {
+                            if (error.name == 'TypeError') {
+                                // console.log("do_obj" + z + "_" + y + ": null")
+                            } else {
+                                alert("do_obj" + z + "_" + y + ": " + error.name)
+                                break
+                            }
+                        }
+                        // 子物件動作取值 : 動作 do_act1_1
+                        try {
+                            var do_act_value = document.getElementById("do_act" + z + "_" + y).value;
+                            if (do_act_value == '') {
+                                alert('動作欄位輸入有誤, 請再次確認')
+                                break
+                            }
+                            // console.log("do_act" + z + "_" + y + ": " + do_act_value)
+                            set_Schedule += '"do_act' + z + '_' + y + '": "' + do_act_value + '", ' ;
+                            command_test += do_act_value + '" }';
+                        } catch (error) {
+                            if (error.name == 'TypeError') {
+                                // console.log("do_obj" + z + "_" + y + ": null")
+                            } else {
+                                alert("do_act" + z + "_" + y + ": " + error.name)
+                                break
+                            }
+                        }
+                    }
+                }
+
+                // 整理資料用
+                set_Schedule += '"": ""}' ;
+                // console.log('set_Schedule: ' + set_Schedule)
+                $('#value_test').text('set_Schedule: ' + set_Schedule)
+                $('#command_test').text('command_test: ' + command_test)
+            }
+        
+            function AJAXtest(params) {
+                test();
+
+                var schedule_data = {
+                    "condition":new_condition_i,
+                    "cond_add_child":cond_add_child_i,
+                    "act_add_child":act_add_child_i,
+                    "set_Schedule":set_Schedule
+                };
+
+                $.get('/dry_block_set', schedule_data, function (res) {
+                    // console.log("res.condition: " + res.condition)
+                    // console.log("res.cond_add_child: " + res.cond_add_child)
+                    // console.log("res.act_add_child: " + res.act_add_child)
+                    console.log("res.response: " + res.response)
+                }, 'json');                
+            }
+        </script>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/dry_container_input.html

@@ -27,7 +27,8 @@
             $("#dry_input_page").text('乾燥貨櫃入料儲豆槽 DI' + dtn + ' 攝影機畫面   ')
             $('#dry_input_page').attr("href", "/camera_DI" + dtn)
             $("#dry_input_title").text('乾燥貨櫃入料儲豆槽 DI' + dtn + ' 操作介面')
-            $("#coffee_title").text('DI' + dtn + ' 乾燥入料儲豆槽操作介面');
+            $("#coffee_title_pc").text('DI' + dtn + ' 乾燥入料儲豆槽操作介面');
+            $("#coffee_title_phone").text('DI' + dtn + ' 操作介面');
             if (status == 2) {
                 $('input').prop('disabled', true);
                 $('button').prop('disabled', true);
@@ -40,206 +41,6 @@
         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 制動器運作
 
@@ -281,9 +82,15 @@
             }, 'text')
         };
 
-        function inputVacuum_ON() {
-            var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "on" };
-
+        function inputVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "off" };
+            } else {
+                var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": params };
+            }
+            
             $.post('/mqtt/{{tid}}', data, function (res) {
                 console.log('data:', data)
                 if (res == 'on') {
@@ -294,23 +101,29 @@
                     console.log('res error')
                 };
             }, 'text')
-        }
-
-        function inputVacuum_OFF() {
-            var data = { "tank_num": "DI" + tank_num, "command": "input_vacuum_status", "value": "off" };
+        };
+        // Benson 真空吸料機 (END)入料儲豆槽
+    </script>
 
-            $.post('/mqtt/{{tid}}', data, function (res) {
-                console.log('data:', data)
-                if (res == 'on') {
-                    $("#cmn-toggle-02").prop('checked', true);
-                } else if (res == 'off') {
-                    $("#cmn-toggle-02").prop('checked', false);
-                } else {
-                    console.log('res error')
-                };
-            }, 'text')
+    <script language="JavaScript">
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
+        }
+        // jQuery 更新感測器制動器狀態
+        function WebUpdate(dtn) {
+            $.get('/loading/DI' + dtn, '', function (res) {
+                if (res.input_vacuum == 0) {
+                    $("#input_vacuum_status").css("background-color", "#C0C0C0")
+                } else if (res.input_vacuum == 1) {
+                    $("#input_vacuum_status").css("background-color", "forestgreen")
+                } else { $("#input_vacuum_status").css("background-color", "crimson") 
+                }
+                $("#UltraSonic_t_status").text(res.input_UltraSonic);
+            }, 'json');
         }
-        // Benson 真空吸料機 (END)入料儲豆槽
     </script>
 </head>
 
@@ -320,49 +133,9 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-        <!--
-        <div style="text-align: left;">
-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
-        </div>
-        <div style="text-align: right;">
-            <a id="dry_input_page" href="/index_new" style="float: right;">___________________</a>
-        </div>
-        <div id="dry_input_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
-            乾燥貨櫃入料儲豆槽 DI 操作介面
-        </div>
-        -->
-
-        狀態更新時間(秒)：
-        <input name="webupdate_time" type="text" value="5" style="width: 40px;">
-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
-
-        <script language="JavaScript">
-            
-            function changeUpdate() {
-                clearInterval(WebUpdate_set);
-
-                var webupdate_time = $("input[name=webupdate_time]").val()
-                console.log('webupdate_time' + webupdate_time)
-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
-            }
-
-            // jQuery 更新感測器制動器狀態
-            function WebUpdate(dtn) {
-                $.get('/loading/DI' + dtn, '', function (res) {
-                    if (res.input_vacuum == 0) {
-                        $("#input_vacuum_status").css("background-color", "#C0C0C0")
-                    } else if (res.input_vacuum == 1) {
-                        $("#input_vacuum_status").css("background-color", "forestgreen")
-                    } else { $("#input_vacuum_status").css("background-color", "crimson") }
-
-                    $("#UltraSonic_t_status").text(res.input_UltraSonic);
-
-                }, 'json');
-            }
-        </script>
 
         <h4>制動器</h4>    
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
             <tr>
                 <td style="color:red;">Valve</td>
                 <td>真空吸料機</td>
@@ -375,40 +148,38 @@
                 <td>
                     <div class="switch_div">
                         <div class="switch">
-                            <input id="cmn-toggle-01" class="cmn-toggle cmn-toggle-round" type="checkbox">
-                            <label for="cmn-toggle-01"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">
                         </div>
                         <div class="switch text-center">
                             {% if input_vacuum == 1 %}
-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked
                                 name="input_vacuum_status" value="ON" onclick="inputVacuum()">
                             {% else %}
                             <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
                                 name="input_vacuum_status" value="OFF" onclick="inputVacuum()">
                             {% endif %}
-                            <label for="cmn-toggle-02"></label>
+                            <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>
                         </div>
                         <div class="switch">
                             <input id="cmn-toggle-03" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
-                            <label for="cmn-toggle-03" data-on="Yes" data-off="No"></label>
                         </div>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td><span style="color:#008CBA;"><b>ON</b></span></td>
-                <td><input type="button" value="ON" onclick="inputVacuum_ON()"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="inputVacuum('1')"></td>
             </tr>
             <tr>
                 <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
-                <td><input type="button" value="OFF" onclick="inputVacuum_OFF()"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="inputVacuum('0')"></td>
             </tr>
         </table>
 
         <br>
 
         <h4>感測器</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
+        <table border="1" class="table-all" cellpadding="3">
             <tr>
                 <td colspan="6">[入料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>
             </tr>
@@ -416,7 +187,7 @@
         <br>
 
         <h4>排程設計</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="3">
             <tr>
                 <td>入料</td>
                 <td>循環測試</td>
@@ -424,21 +195,21 @@
             <tr>
                 <td>
                     指定桶內生豆高度
-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>
                     吸料時間
-                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_in" value="1">秒<br>
                     放料時間
-                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_out" value="10">秒<br>
                     循環次數
-                    <input name="testing_in_vacuum_loop" type="text" value="3" style="width: 40px;">次<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_loop" value="3">次<br>
                 </td>
                 <td>
                     ON (開) &nbsp;
-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="Testing_starttime" value="3">秒<br>
                     OFF (關) &nbsp;
-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="Testing_endtime" value="5">秒<br>
                     循環
-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
+                    <input type="text" class="input-text" name="Testing_loop" value="3">次
                 </td>
             </tr>
             <tr>
@@ -474,13 +245,13 @@
                                             console.log('目前生豆高度: ' + present_Bean_height)
 
                                             if ( parseInt(present_Bean_height) < parseInt(testing_BeanIn_Height) ) {
-                                                inputVacuum_ON()
+                                                inputVacuum('1')
                                                 console.log('inputVacuum_ON')
                                                 
                                                 var time = new Date();
                                                 while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
 
-                                                inputVacuum_OFF()
+                                                inputVacuum('0')
                                                 console.log('inputVacuum_OFF')
 
                                                 var time = new Date();
@@ -504,13 +275,13 @@
                                 for (step = 1; step <= testing_in_vacuum_loop; step++) {
                                     console.log('-- 循環第 ' + step + ' 次 --');
 
-                                    inputVacuum_ON()
+                                    inputVacuum('1')
                                     console.log('inputVacuum_ON')
 
                                     var time = new Date();
                                     while ((new Date() - time) < testing_in_vacuum_in * 1000) { };
 
-                                    inputVacuum_OFF()
+                                    inputVacuum('0')
                                     console.log('inputVacuum_OFF')
 
                                     var time = new Date();
@@ -537,13 +308,13 @@
                             for (step = 1; step <= Testing_loop; step++) {
                                 console.log('循環第 ' + step + ' 次');
 
-                                inputVacuum_ON()
+                                inputVacuum('1')
                                 console.log('inputVacuum_ON')
 
                                 var time = new Date();
                                 while ((new Date() - time) < Testing_starttime * 1000) { }
 
-                                inputVacuum_OFF()
+                                inputVacuum('0')
                                 console.log('inputVacuum_OFF')
 
                                 var time = new Date();
@@ -556,51 +327,6 @@
             </tr>
         </table>
 
-        <br>
-
-        <h4>M5 攝影機畫面</h4>
-        <div class="container-fluid">
-            <div class="row" style="margin-top:10px;">
-                <div class="col flex">
-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
-                        <div class="col-md-12 row flex">
-                            <img src="" id="four" width="70%" height="70%">
-                        </div>
-                    </div>
-                    <script>
-                        // M5 攝影機
-
-                        //const img = document.querySelector('#one');
-                        const img3 = document.querySelector('#four');
-                        const WS_URL3 = 'ws:///60.250.156.230:8093';
-                        //const WS_URL3 = 'ws:///60.250.156.230:8091';
-                        const ws3 = new WebSocket(WS_URL3);
-                        let urlObject3;
-                        ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
-                        ws3.onmessage = message3 => {
-                            const arrayBuffer3 = message3.data;
-                            if (urlObject3) {
-                                URL.revokeObjectURL(urlObject3);
-                            }
-                            urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
-                            img3.src = urlObject3;
-                        }
-                    </script>
-                </div>
-            </div>
-        </div>
-
-        <br>
-        <br>
-        
-<!--
-        <footer class="footer">
-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
-            </div>
-        </footer>
--->
         <div id="coffee_footer">
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}

app/templates/dry_container_output.html

@@ -27,7 +27,8 @@
             $("#dry_output_page").text('乾燥貨櫃出料儲豆槽 DO' + dtn + ' 攝影機畫面   ')
             $('#dry_output_page').attr("href", "/camera_DO" + dtn)
             $("#dry_container_output_title").text('乾燥貨櫃出料儲豆槽 DO' + dtn + ' 操作介面')
-            $("#coffee_title").text('DO' + dtn + ' 乾燥出料儲豆槽操作介面');
+            $("#coffee_title_pc").text('DO' + dtn + ' 乾燥出料儲豆槽操作介面');
+            $("#coffee_title_phone").text('DO' + dtn + ' 操作介面');
             if (status == 2) {
                 $('input').prop('disabled', true);
                 $('button').prop('disabled', true);
@@ -40,206 +41,6 @@
         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 制動器運作
 
@@ -304,6 +105,26 @@
             }, 'text')
         }
     </script>
+
+    <script language="JavaScript">
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
+        }
+        // jQuery 更新感測器制動器狀態
+        function WebUpdate(dtn) {
+            $.get('/loading/DO' + dtn, '', function (res) {
+                if (res.output_vacuum == 0) {
+                    $("#output_vacuum_status").css("background-color", "#C0C0C0")
+                } else if (res.output_vacuum == 1) {
+                    $("#output_vacuum_status").css("background-color", "forestgreen")
+                } else { $("#output_vacuum_status").css("background-color", "crimson") }
+                $("#UltraSonic_t_status").text(res.output_UltraSonic);
+            }, 'json');
+        }
+    </script>
 </head>
 
 <body>
@@ -312,50 +133,9 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-        <!--
-        <div style="text-align: left;">
-            <a href="/dry" style="float: left;">&nbsp;&nbsp;&nbsp;返回乾燥貨櫃首頁</a>
-        </div>
-        <div style="text-align: right;">
-            <a id="dry_output_page" href="/index_new" style="float: right;">___________________</a>
-        </div>
-        <div id="dry_container_output_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
-            乾燥貨櫃出料儲豆槽 DO 操作介面
-        </div>
-        -->
-
-        狀態更新時間(秒)：
-        <input name="webupdate_time" type="text" value="5" style="width: 40px;">
-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
-
-        <script language="JavaScript">
-            
-            function changeUpdate() {
-                clearInterval(WebUpdate_set);
-
-                var webupdate_time = $("input[name=webupdate_time]").val()
-                console.log('webupdate_time' + webupdate_time)
-                WebUpdate_set = setInterval(function(){WebUpdate(dtn)} , webupdate_time * 1000);
-            }
-
-            // jQuery 更新感測器制動器狀態
-            function WebUpdate(dtn) {
-                
-                $.get('/loading/DO' + dtn, '', function (res) {
-                    if (res.output_vacuum == 0) {
-                        $("#output_vacuum_status").css("background-color", "#C0C0C0")
-                    } else if (res.output_vacuum == 1) {
-                        $("#output_vacuum_status").css("background-color", "forestgreen")
-                    } else { $("#output_vacuum_status").css("background-color", "crimson") }
-
-                    $("#UltraSonic_t_status").text(res.output_UltraSonic);
-
-                }, 'json');
-            }
-        </script>
 
         <h4>制動器</h4>    
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
             <tr>
                 <td style="color:red;">Valve</td>
                 <td>真空吸料機</td>
@@ -368,40 +148,38 @@
                 <td>
                     <div class="switch_div">
                         <div class="switch">
-                            <input id="cmn-toggle-31" class="cmn-toggle cmn-toggle-round" type="checkbox">
-                            <label for="cmn-toggle-31"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-31">
                         </div>
                         <div class="switch text-center">
                             {% if output_vacuum == 1 %}
-                            <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32" checked
                                 name="output_vacuum_status" value="ON" onclick="outputVacuum()">
                             {% else %}
-                            <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32"
                                 name="output_vacuum_status" value="OFF" onclick="outputVacuum()">
                             {% endif %}
-                            <label for="cmn-toggle-32"></label>
+                            <label class="label_ActuatorStatus" for="cmn-toggle-32"></label>
                         </div>
                         <div class="switch">
-                            <input id="cmn-toggle-33" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
-                            <label for="cmn-toggle-33" data-on="Yes" data-off="No"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-32">
                         </div>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td><span style="color:#008CBA;"><b>ON</b></span></td>
-                <td><input type="button" value="ON" onclick="outputVacuum_ON()"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="outputVacuum_ON()"></td>
             </tr>
             <tr>
                 <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
-                <td><input type="button" value="OFF" onclick="outputVacuum_OFF()"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="outputVacuum_OFF()"></td>
             </tr>
         </table>
 
         <br>
 
         <h4>感測器</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
+        <table border="1" class="table-all" cellpadding="3">
             <tr>
                 <td>[出料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{output_UltraSonic.UltraSonic}}</span> 公分</td>
             </tr>
@@ -410,7 +188,7 @@
         <br>
 
         <h4>排程設計</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="3">
             <tr>
                 <td>入料</td>
                 <td>循環測試</td>
@@ -418,21 +196,21 @@
             <tr>
                 <td>
                     指定桶內生豆高度
-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>
                     吸料時間
-                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_in" value="5">秒<br>
                     放料時間
-                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_out" value="10">秒<br>
                     循環次數
-                    <input name="testing_in_vacuum_loop" type="text" value="3" style="width: 40px;">次<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_loop" value="4">次<br>
                 </td>
                 <td>
-                    ON (開) &nbsp;
-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
-                    OFF (關) &nbsp;
-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
+                    ON (開) 
+                    <input type="text" class="input-text" name="Testing_starttime" value="5">秒<br>
+                    OFF (關) 
+                    <input type="text" class="input-text" name="Testing_endtime" value="10">秒<br>
                     循環
-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
+                    <input type="text" class="input-text" name="Testing_loop" value="4">次
                 </td>
             </tr>
             <tr>
@@ -550,51 +328,6 @@
             </tr>
         </table>
 
-        <br>
-
-        <h4>M5 攝影機畫面</h4>
-        <div class="container-fluid">
-            <div class="row" style="margin-top:10px;">
-                <div class="col flex">
-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
-                        <div class="col-md-12 row flex">
-                            <img src="" id="four" width="70%" height="70%">
-                        </div>
-                    </div>
-                    <script>
-                        // M5 攝影機
-
-                        //const img = document.querySelector('#one');
-                        const img3 = document.querySelector('#four');
-                        const WS_URL3 = 'ws:///60.250.156.230:8093';
-                        //const WS_URL3 = 'ws:///60.250.156.230:8091';
-                        const ws3 = new WebSocket(WS_URL3);
-                        let urlObject3;
-                        ws3.onopen = () => console.log(`Connected to ${WS_URL3}`);
-                        ws3.onmessage = message3 => {
-                            const arrayBuffer3 = message3.data;
-                            if (urlObject3) {
-                                URL.revokeObjectURL(urlObject3);
-                            }
-                            urlObject3 = URL.createObjectURL(new Blob([arrayBuffer3]));
-                            img3.src = urlObject3;
-                        }
-                    </script>
-                </div>
-            </div>
-        </div>
-        
-
-        <br>
-        <br>
-<!--
-        <footer class="footer">
-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
-            </div>
-        </footer>
--->
         <div id="coffee_footer">
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}

app/templates/dry_container_schedule_0911.html

@@ -0,0 +1,634 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <style>
+        body {
+            margin: 0;
+        }
+
+        .navbar-dark .navbar-nav .nav-link {
+            color: white;
+            cursor: pointer;
+            text-decoration: none;
+            width: 110px;
+            height: 46px;
+        }
+
+        .nav-top {
+            line-height: 40px;
+            background-color: #C4C4C4;
+        }
+
+        .website_title {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 30px;
+            color: #000000;
+        }
+
+        .navbar-nav>li {
+            float: none;
+            display: inline-block;
+            width: 100px;
+            margin: 0 auto;
+            text-align: center;
+        }
+
+        .navbar-nav>li a {
+            font-size: 20px;
+        }
+
+        .main-page {
+            margin-top: 200px;
+        }
+
+        .page-title {
+            font-family: Roboto;
+            font-style: normal;
+            font-weight: bold;
+            font-size: 36px;
+        }
+
+
+        .flex {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .set-link {
+            display: inline-block;
+            width: 350px;
+            height: 100px;
+            line-height: 100px;
+            background: #008CBA;
+            border: 1px solid #CFCFCF;
+            box-sizing: border-box;
+            color: #FFFFFF;
+            border-radius: 10px;
+            font-size: 36px;
+        }
+
+        .cmn-toggle {
+            position: absolute;
+            margin-left: 0px;
+            visibility: hidden;
+        }
+
+        .cmn-toggle+label {
+            display: block;
+            position: relative;
+            cursor: pointer;
+            outline: none;
+            user-select: none;
+        }
+
+        input.cmn-toggle-round-flat+label {
+            padding: 2px;
+            width: 60px;
+            height: 30px;
+            background-color: #C0C0C0;
+            border-radius: 60px;
+            transition: background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat+label:before,
+        input.cmn-toggle-round-flat+label:after {
+            display: block;
+            position: absolute;
+            content: "";
+        }
+
+        input.cmn-toggle-round-flat+label:before {
+            top: 2px;
+            left: 2px;
+            bottom: 2px;
+            right: 2px;
+            background-color: #fff;
+            border-radius: 60px;
+            transition: background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat+label:after {
+            top: 4px;
+            left: 4px;
+            bottom: 4px;
+            width: 24px;
+            background-color: #dddddd;
+            border-radius: 52px;
+            transition: margin 0.4s, background 0.4s;
+        }
+
+        input.cmn-toggle-round-flat:checked+label {
+            background-color: #C0C0C0;
+        }
+
+        input.cmn-toggle-round-flat:checked+label:after {
+            margin-left: 27px;
+            background-color: #008CBA;
+        }
+
+        @media(max-width:373px) {
+            .card {
+                margin-right: 0px;
+            }
+
+            .set-link {
+                width: 250px;
+            }
+        }
+
+        @media(max-width:577px) {}
+
+        @media(min-width:576px) {}
+
+        @media(min-width:768px) {
+            .navbar-nav>li {
+                margin-left: 0px;
+            }
+
+            .navbar-nav .li-block {
+                display: none;
+            }
+        }
+
+        @media(min-width:991px) {
+            .navbar-nav>li {
+                margin-left: 20px;
+            }
+
+            .navbar-nav .li-block {
+                display: none;
+            }
+        }
+
+        @media(min-width:1200px) {
+            .navbar-nav>li {
+                margin-left: 50px;
+            }
+
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 100px;
+            }
+        }
+
+        @media(min-width:1400px) {
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 200px;
+            }
+        }
+
+
+        @media(min-width:1689px) {
+            .navbar-nav>li {
+                margin-left: 50px;
+            }
+
+            .navbar-nav .li-block {
+                display: inline-block;
+                width: 500px;
+            }
+        }
+    </style>
+
+</head>
+
+<body>
+    <h6>感測器數值</h6>
+    入料儲豆槽液位計高度(cm)：!測試時請用生豆高度!{{input_UltraSonic.UltraSonic}}
+    <div id="input_UltraSonic" d={{input_UltraSonic.UltraSonic}} style="display:none"></div>
+    <br>
+    設定空桶高度應低於 10
+    <br>
+    乾燥槽液位計高度(cm)：!測試時請用生豆高度!{{tank_UltraSonic.UltraSonic}}
+    <div id="tank_UltraSonic" d={{tank_UltraSonic.UltraSonic}} style="display:none"></div>
+    <br>
+
+    <hr size="50" width="100%">
+
+    <h6>入料排程</h6>
+    設定入料儲豆槽生豆高度(cm)：
+    <input name="schedule_input_height" id="schedule_input_height" type="text" style="width:100px;" value="70">
+    <br>
+    設定吸料時間(s)：
+    <input name="schedule_tank_vacuumin" id="schedule_tank_vacuumin" type="text" style="width:100px;" value="5">
+    <br>
+    設定放料時間(s)：
+    <input name="schedule_tank_vacuumout" id="schedule_tank_vacuumout" type="text" style="width:100px;" value="10">
+    <br>
+    設定乾燥槽生豆高度(cm)：
+    <input name="schedule_tank_height" id="schedule_tank_height" type="text" style="width:100px;" value="70">
+    <br>
+    入料時馬達轉速(rpm)：
+    <input name="schedule_tank_motorrpm" id="schedule_tank_motorrpm" type="text" style="width:100px;" value="10">
+    <br>
+    <button type="submit" class="btn btn-primary" onclick="schedule_Start()">開始入料</button>
+    <script>
+        function schedule_Start() {
+            //word = document.getElementById("schedule_SOP").innerHTML;
+            //document.getElementById("schedule_SOP").innerHTML = word+'<br>*';
+
+            var schedule_input_height = $("input[name=schedule_input_height]").val();
+            var schedule_tank_vacuumin = $("input[name=schedule_tank_vacuumin]").val();
+            var schedule_tank_vacuumout = $("input[name=schedule_tank_vacuumout]").val();
+            var schedule_tank_height = $("input[name=schedule_tank_height]").val();
+            var schedule_tank_motorrpm = $("input[name=schedule_tank_motorrpm]").val();
+
+            var tank_UltraSonic = parseInt(document.getElementById('tank_UltraSonic').getAttribute('d'));
+
+            // 入料判斷
+            if (schedule_input_height <= input_UltraSonic) {
+                console.log('儲豆槽達指定高度')
+                console.log('tank_UltraSonic:' + tank_UltraSonic)
+
+                if (tank_UltraSonic <= 10) {
+                    var DRY_STATE = 'Ready'
+                    console.log('乾燥桶為空, 狀態為 Ready, 準備入料')
+
+                    // 開始入料
+                    while (schedule_tank_height >= tank_UltraSonic) {
+
+                        // 真空吸料機 ON
+                        var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "on" };
+                        console.log('data:', data)
+                        /*
+                        $.post('/mqtt/{{tid}}', data, function (res) {
+                            console.log('真空吸料機 '+res)
+                        }, 'text')
+                        */
+
+                        // 吸料時間
+                        var time = new Date();
+                        while ((new Date() - time) < schedule_tank_vacuumin * 1000) { }
+
+                        // 真空吸料機 OFF
+                        var data = { "tank-number": "1", "command": "tank_vacuum_status", "value": "off" };
+                        console.log('data:', data)
+                        /*
+                        $.post('/mqtt/{{tid}}', data, function (res) {
+                            console.log('真空吸料機 '+ res)
+                        }, 'text')
+                        */
+
+                        // 放料時間
+                        var time = new Date();
+                        while ((new Date() - time) < schedule_tank_vacuumout * 1000) { }
+                        location.reload();
+                    }
+                    console.log('乾燥桶生豆以達指定高度, 入料結束')
+
+
+                } else { console.log('乾燥桶不為空, 無法入料') }
+            } else { console.log('儲豆槽未達指定高度, 無法入料') }
+
+
+        }
+
+    </script>
+    <br>
+    <hr size="50" width="100%">
+    <!--
+    <h6>入料排程_程式</h6>
+    <p id="schedule_SOP">按下"開始入料"</p>
+-->
+    <script>
+        dry_object = new Array();
+        dry_object[0] = ["ON", "OFF"];  // 入料真空吸料機
+        dry_object[1] = ["ON", "OFF"];  // 真空吸料機
+        dry_object[2] = ["ON 吸料", "OFF 排氣"];  // 三通閥
+        dry_object[3] = ["0", "10", "20", "30", "40", "50"];  // 馬達
+        dry_object[4] = ["ON", "OFF"];  // 鼓風機
+        dry_object[5] = ["ON", "OFF"];  // 加熱器 1
+        dry_object[6] = ["ON", "OFF"];  // 加熱器 2
+        dry_object[7] = ["ON", "OFF"];  // 蝴蝶閥
+        dry_object[8] = ["ON", "OFF"];  // 消毒電磁閥
+        dry_object[9] = ["ON", "OFF"];  // 排水電磁閥
+        dry_object[10] = ["ON", "OFF"];  // 溫控開關
+        dry_object[11] = ["OFF", "28", "30", "32", "34", "36", "38", "40"];  // 設定溫度
+        dry_object[12] = ["ON", "OFF"];  // 出料真空吸料機
+
+        dry_object[13] = ["ON", "OFF"];  // 入料儲豆槽_液位計
+        dry_object[14] = ["ON", "OFF"];  // 液位計
+        dry_object[15] = ["ON", "OFF"];  // SHT11_溫度
+        dry_object[16] = ["ON", "OFF"];  // SHT11_濕度
+        dry_object[17] = ["ON", "OFF"];  // 土壤三合一_溫度
+        dry_object[18] = ["ON", "OFF"];  // 土壤三合一_濕度
+        dry_object[19] = ["ON", "OFF"];  // 土壤三合一_EC
+        dry_object[20] = ["ON", "OFF"];  // 氣壓
+        dry_object[21] = ["ON", "OFF"];  // 出料儲豆槽_液位計
+
+        function renew1(index) {
+            console.log('index' + index)
+            for (var i = 0; i < dry_object[index].length; i++)
+                document.action.do_act1.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
+            document.action.do_act1.length = dry_object[index].length;	// 刪除多餘的選項
+        }
+        function renew2(index) {
+            console.log('index' + index)
+            for (var i = 0; i < dry_object[index].length; i++)
+                document.action.dryinput_do_act2.options[i] = new Option(dry_object[index][i], dry_object[index][i]);
+            document.action.dryinput_do_act2.length = dry_object[index].length;	// 刪除多餘的選項
+        }
+    </script>
+
+    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+    <div id="box">
+        <form name="condition">
+            條件
+            <select name="cond_a1">
+                <optgroup label="Actuator">
+                    <option value="input_vacuum">入料真空吸料機</option>
+                    <option value="tank_vacuum">真空吸料機</option>
+                    <option value="tank_threewayvalve">三通閥</option>
+                    <option value="tank_motor">馬達</option>
+                    <option value="tank_blower">鼓風機</option>
+                    <option value="tank_heater1">加熱器 1</option>
+                    <option value="tank_heater2">加熱器 2</option>
+                    <option value="tank_diskvalve">蝴蝶閥</option>
+                    <option value="tank_solenoid_disinfect">消毒電磁閥</option>
+                    <option value="tank_solenoid_water">排水電磁閥</option>
+                    <option value="tank_temp1_enable">溫控開關</option>
+                    <option value="tank_temp1">設定溫度</option>
+                    <option value="output_vacuum">出料真空吸料機</option>
+                </optgroup>
+                <optgroup label="Sensor">
+                    <option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>
+                    <option value="tank_UltraSonic">液位計(cm)</option>
+                    <option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>
+                    <option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>
+                    <option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>
+                    <option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>
+                    <option value="tank_soil_EC">土壤三合一_EC(%)</option>
+                    <option value="tank_PA">氣壓(PA)</option>
+                    <option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>
+                </optgroup>
+            </select>
+            <select name="cond_cal1">
+                <option value="cal1_equal">==</option>
+                <option value="cal1_more">&gt;=</option>
+                <option value="cal1_less">&lt;=</option>
+                <option value="cal1_and">and</option>
+                <option value="cal1_or">or</option>
+            </select>
+
+            <input list="cal1" name="cond_b1">
+            <datalist id="cal1">
+                <option value="ON">
+                <option value="OFF">
+                <option value="(或請自行輸入數值)">
+            </datalist>
+
+        </form>
+
+        <form name="action">
+            物件：
+            <select name="do_obj1" onChange="renew1(this.selectedIndex);">
+                <optgroup label="Actuator">
+                    <option value="input_vacuum1">入料真空吸料機
+                    <option value="tank_vacuum1">真空吸料機</option>
+                    <option value="tank_threewayvalve1">三通閥</option>
+                    <option value="tank_motor1">馬達</option>
+                    <option value="tank_blower1">鼓風機</option>
+                    <option value="tank_heater11">加熱器 1</option>
+                    <option value="tank_heater21">加熱器 2</option>
+                    <option value="tank_diskvalve1">蝴蝶閥</option>
+                    <option value="tank_solenoid_disinfect1">消毒電磁閥</option>
+                    <option value="tank_solenoid_water1">排水電磁閥</option>
+                    <option value="tank_temp1_enable1">溫控開關</option>
+                    <option value="tank_temp11">設定溫度</option>
+                    <option value="output_vacuum1">出料真空吸料機</option>
+                </optgroup>
+                <optgroup label="Sensor">
+                    <option value="input_UltraSonic1">入料儲豆槽_液位計</option>
+                    <option value="tank_UltraSonic1">液位計</option>
+                    <option value="tank_SHT11_Temp1">SHT11_溫度</option>
+                    <option value="tank_SHT11_Humidity1">SHT11_濕度</option>
+                    <option value="tank_soil_Temp1">土壤三合一_溫度</option>
+                    <option value="tank_soil_Humidity1">土壤三合一_濕度</option>
+                    <option value="tank_soil_EC1">土壤三合一_EC</option>
+                    <option value="tank_PA1">氣壓</option>
+                    <option value="output_UltraSonic1">出料儲豆槽_液位計</option>
+                </optgroup>
+            </select>
+
+            動作：
+            <select name="do_act1">
+                <option value="">請由左方選取物件
+            </select>
+        </form>
+
+        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+        <div id="new">
+                新增的條件物件放這裡
+        </div>
+        <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+
+        <script>
+            var i = 1
+
+            function Add(evt) {
+                // onclick = "Add(hoist_add1);""
+                // evt = hoist_num (= hoist_add1 / hoist_add2 / hoist_add3 ...)
+                evt.style.display = "none";                 // 元素不顯示
+                i++;
+                var div = document.createElement('div');    // 輸出 <div></div>
+                var cond_a = 'cond_a' + i;
+                var cond_b = 'cond_b' + i;
+                var cond_cal = 'cond_cal' + i;
+                var id = evt.getAttribute('id');            // 輸出 dryinput_add1
+                console.log('id:' + id)
+                var add = id.split('_')[0] + '_add' + i;    // dryinput + _add + 2 => 輸出 hoist_add2
+                var del = id.split('_')[0] + '_del' + i;    // dryinput + _del + 2 => 輸出 hoist_del2
+                var html = '';
+                var begin = id.split('_')[0];               // 輸出 dryinput
+                div.className = "col-12 row";
+                div.style.marginTop = "10px";
+
+                html += '<form name="dryinput_condition">';
+                html += '條件';
+                if (begin == 'dryinput') {
+                    html += ' <select name="dryinput_cond_a' + i + '">';
+                } else {
+                };
+
+                html += '<optgroup label="Actuator">' +
+                    '<option value="input_vacuum">入料真空吸料機</option>' +
+                    '<option value="tank_vacuum">真空吸料機</option>' +
+                    '<option value="tank_threewayvalve">三通閥</option>' +
+                    '<option value="tank_motor">馬達</option>' +
+                    '<option value="tank_blower">鼓風機</option>' +
+                    '<option value="tank_heater1">加熱器 1</option>' +
+                    '<option value="tank_heater2">加熱器 2</option>' +
+                    '<option value="tank_diskvalve">蝴蝶閥</option>' +
+                    '<option value="tank_solenoid_disinfect">消毒電磁閥</option>' +
+                    '<option value="tank_solenoid_water">排水電磁閥</option>' +
+                    '<option value="tank_temp1_enable">溫控開關</option>' +
+                    '<option value="tank_temp1">設定溫度</option>' +
+                    '<option value="output_vacuum">出料真空吸料機</option>' +
+                    '</optgroup>' +
+                    '<optgroup label="Sensor">' +
+                    '<option value="input_UltraSonic">入料儲豆槽_液位計(cm)</option>' +
+                    '<option value="tank_UltraSonic">液位計(cm)</option>' +
+                    '<option value="tank_SHT11_Temp">SHT11_溫度(℃)</option>' +
+                    '<option value="tank_SHT11_Humidity">SHT11_濕度(%)</option>' +
+                    '<option value="tank_soil_Temp">土壤三合一_溫度(℃)</option>' +
+                    '<option value="tank_soil_Humidity">土壤三合一_濕度(%)</option>' +
+                    '<option value="tank_soil_EC">土壤三合一_EC(%)</option>' +
+                    '<option value="tank_PA">氣壓(PA)</option>' +
+                    '<option value="output_UltraSonic">出料儲豆槽_液位計(cm)</option>' +
+                    '</optgroup>' +
+                    '</select>';
+
+                if (begin == 'dryinput') {
+                    html += '<select name="dryinput_cond_cal' + i + '">';
+                } else {
+                };
+
+                html += '<option value="cal1_equal">==</option>' +
+                    '<option value="cal1_more">&gt;=</option>' +
+                    '<option value="cal1_less">&lt;=</option>' +
+                    '<option value="cal1_and">and</option>' +
+                    '<option value="cal1_or">or</option>' +
+                    '</select>';
+
+                if (begin == 'dryinput') {
+                    html += '<input list="cal' + i + '" name="dryinput_cond_b' + i + '">';
+                } else {
+                };
+
+                html += '<datalist id="cal' + i + '">' +
+                    '<option value="ON">' +
+                    '<option value="OFF">' +
+                    '<option value="(或請自行輸入數值)">' +
+                    '</datalist>' +
+                    '</form>';
+
+                html += '<form name="dryinput_action">';
+                html += '物件：';
+                html += '<script>' +
+                    'dry_object = new Array();' +
+                    'dry_object[0] = ["ON", "OFF"];' +
+                    'dry_object[1] = ["ON", "OFF"];' +
+                    'dry_object[2] = ["ON 吸料", "OFF 排氣"];' +
+                    'dry_object[3] = ["0", "10", "20", "30", "40", "50"];' +
+                    'dry_object[4] = ["ON", "OFF"];' +
+                    'dry_object[5] = ["ON", "OFF"];' +
+                    'dry_object[6] = ["ON", "OFF"];' +
+                    'dry_object[7] = ["ON", "OFF"]; ' +
+                    'function renew' + i + '(index) {' +
+                    'for (var i = 0; i < dry_object[index].length; i++)' +
+                    'document.action.dryinput_do_act' + i + '.options[i] = new Option(dry_object[index][i], dry_object[index][i]);' +
+                    'document.action.dryinput_do_act' + i + '.length = dry_object[index].length;' +
+                    '}' +
+                    '<\/script>';
+
+                if (begin == 'dryinput') {
+                    html += '<select name="dryinput_do_obj' + i + '" onChange="renew' + i + '(this.selectedIndex);">';
+                } else {
+                };
+
+
+                html += '<optgroup label="Actuator">' +
+                    '<option value="input_vacuum1">入料真空吸料機' +
+                    '<option value="tank_vacuum1">真空吸料機</option>' +
+                    '<option value="tank_threewayvalve1">三通閥</option>' +
+                    '<option value="tank_motor1">馬達</option>' +
+                    '<option value="tank_blower1">鼓風機</option>' +
+                    '<option value="tank_heater11">加熱器 1</option>' +
+                    '<option value="tank_heater21">加熱器 2</option>' +
+                    '<option value="tank_diskvalve1">蝴蝶閥</option>' +
+                    '<option value="tank_solenoid_disinfect1">消毒電磁閥</option>' +
+                    '<option value="tank_solenoid_water1">排水電磁閥</option>' +
+                    '<option value="tank_temp1_enable1">溫控開關</option>' +
+                    '<option value="tank_temp11">設定溫度</option>' +
+                    '<option value="output_vacuum1">出料真空吸料機</option>' +
+                    '</optgroup>' +
+                    '<optgroup label="Sensor">' +
+                    '<option value="input_UltraSonic1">入料儲豆槽_液位計</option>' +
+                    '<option value="tank_UltraSonic1">液位計</option>' +
+                    '<option value="tank_SHT11_Temp1">SHT11_溫度</option>' +
+                    '<option value="tank_SHT11_Humidity1">SHT11_濕度</option>' +
+                    '<option value="tank_soil_Temp1">土壤三合一_溫度</option>' +
+                    '<option value="tank_soil_Humidity1">土壤三合一_濕度</option>' +
+                    '<option value="tank_soil_EC1">土壤三合一_EC</option>' +
+                    '<option value="tank_PA1">氣壓</option>' +
+                    '<option value="output_UltraSonic1">出料儲豆槽_液位計</option>' +
+                    '</optgroup>' +
+                    '</select>';
+                html += '動作：';
+
+                if (begin == 'dryinput') {
+                    html += '<select name="dryinput_do_act' + i + '">';
+                } else {
+                };
+
+                html += '<option value="">請由左方選取物件' +
+                    '</select>' +
+                    '<input  id=dryinput_del' + i + ' class="delete" type="button" value="條件物件--" onclick="Delete(dryinput_del' + i + ');">'
+                '</form>' +
+                    '</div>';
+                //html += ;
+                html += '<br><input id="dryinput_add' + i + '" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add' + i + ');"><br>';
+                html += '</div><div id="dry_con_act' + (i + 1) + '"></div>';
+
+                var divbox = document.getElementById('box');
+                divbox.insertAdjacentHTML('beforeend', html);
+
+
+            };
+            function Delete(evt) {
+                // evt = dryinput_del2
+                var id = evt.getAttribute('id');            // 輸出 dryinput_del2
+                //console.log('id:'+id)
+                var begin = id.split('_')[0];               // 輸出 dryinput
+                //console.log('begin:'+begin)
+                var del_num = id.split('_')[1].replace("del", "");
+                //console.log('del_num:'+del_num)
+                var obox = document.getElementById("box");
+                var target = "dry_con_act" + del_num
+                console.log('target:' + target)
+
+                var divs = obox.getElementById(target);
+                if (divs.length > 0) {
+                    obox.removeChild(divs[0]);
+                }
+            };
+
+        </script>
+        <!--
+    <input type="button" onclick="document.body.insertAdjacentHTML('beforeEnd', box)" value="新增">
+    box = '<input type=text name=' + i + ' value=' + i + '><br>'
+-->
+        <input id="dryinput_add1" class="add" type="button" value="條件物件++" onclick="Add(dryinput_add1);">
+        <br>
+
+        <div id="dry_con_act2"></div>
+
+    </div>
+    <hr size="50" width="100%">
+
+    
+
+</body>
+
+</html>

app/templates/ferment.html

@@ -23,8 +23,11 @@
     <link rel="stylesheet" href="../static/css/sign_in.css">
     -->
     <script>
+        var status = '{{status}}';
+
         $(document).ready(function(){
-            $("#coffee_title").text('發酵貨櫃');
+            $("#coffee_title_pc").text('發酵貨櫃');
+            $("#coffee_title_phone").text('發酵貨櫃');
         });
     </script>
     
@@ -204,28 +207,13 @@
             <!-- 匯入共同使用的 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_ferment" style="float: right;">發酵槽攝影機&nbsp;&nbsp;&nbsp;</a>
-        </div>
 
-        <div style="text-align: center; margin-top: 30px; font-size: 24px;">
-            Smart Coffee
-        </div>
-        -->
         <div>
             <!-- 底圖 發酵貨櫃 12 個發酵桶槽 -->
             <div id="FermentContainer_pic" class="FermentContainer_position" >
                 <img src="../static/img/web_ferment_container.png" width="1450x" style="margin: auto;">
             </div>
 
-
             <!-- 發酵槽 F1 -->
             <div id="F1" tabindex="0" class="F1_position" role="button">
                 F1 status
@@ -345,7 +333,7 @@
                         <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                             <!--<table style="border:0px gray solid;-->
                                 <tr>
-                                    <td><strong><a id="actuator_link" href="/ferment_container/1">制動器狀態</a></strong></td>
+                                    <td><strong><a id="actuator_link" href="/ferment_container/1">致動器狀態</a></strong></td>
                                     <td><strong><a id="sensor_link" href="/ferment_container/1">感測器狀態</a></strong></td>
                                 </tr>
                                 <tr>
@@ -374,7 +362,7 @@
                                                     <!--<span id="tank_threewayvalve_input_t_status"></span>-->
                                                 </td>
                                             </tr>
-                                            <tr>
+                                            <!-- <tr>
                                                 <td>
                                                     <div id="tank_solenoid_water_total_status"
                                                         style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
@@ -382,9 +370,9 @@
                                                 </td>
                                                 <td>
                                                     <a id="SolenoidWaterTotal" href="">總進水電磁閥</a>
-                                                    <!--<span id="tank_solenoid_water_total_t_status"></span>-->
+                                                    <span id="tank_solenoid_water_total_t_status"></span>
                                                 </td>
-                                            </tr>
+                                            </tr> -->
                                             <tr>
                                                 <td>
                                                     <div id="outer_solenoid_water_status"
@@ -418,7 +406,7 @@
                                                     <!--<span id="tank_pump_sensor_t_status"></span>-->
                                                 </td>
                                             </tr>
-                                            <tr>
+                                            <!-- <tr>
                                                 <td>
                                                     <div id="tank_threewayvalve_bean_status"
                                                         style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
@@ -426,9 +414,9 @@
                                                 </td>
                                                 <td>
                                                     <a id="ThreeWayValveBean" href="">感測模組下豆三通閥</a>
-                                                    <!--<span id="tank_threewayvalve_bean_t_status"></span>-->
+                                                    <span id="tank_threewayvalve_bean_t_status"></span>
                                                 </td>
-                                            </tr>
+                                            </tr> -->
                                             <tr>
                                                 <td>
                                                     <div id="outer_threewayvalve_float_status"
@@ -529,6 +517,14 @@
                                                     <span id="UltraSonic_t_status"></span>
                                                 </td>
                                             </tr>
+                                            <tr>
+                                                <td>
+                                                    <a id="motorEncoder" href="">馬達編碼器</a>
+                                                </td>
+                                                <td>
+                                                    <span id="motorEncoder_t_status"></span>
+                                                </td>
+                                            </tr>
                                             <tr>
                                                 <td>
                                                     <a id="SHT11_Temp" href="">溫度</a>
@@ -636,8 +632,8 @@
                         <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                             <!--<table style="border:0px gray solid;-->
                                 <tr>
-                                    <td><strong><a id="actuator_link_input" href="/ferment_container/1">制動器狀態</a></strong></td>
-                                    <td><strong><a id="sensor_link_input" href="/ferment_container/1">感測器狀態</a></strong></td>
+                                    <td><strong><a id="actuator_link_input" href="">致動器狀態</a></strong></td>
+                                    <td><strong><a id="sensor_link_input" href="">感測器狀態</a></strong></td>
                                 </tr>
                                 <tr>
                                     <td style="vertical-align:text-top;">
@@ -680,10 +676,6 @@
             </div>
         </div>
 
-
-
-
-
         <!-- 發酵槽出料儲豆槽互動視窗(模态框) -->
         <div class="modal fade" id="FO_Modal">
             <div class="modal-dialog modal-dialog-centered" style="width: 410px;">
@@ -700,8 +692,8 @@
                         <table style="border:0px gray solid; width: 100%;" cellpadding="3">
                             <!--<table style="border:0px gray solid;-->
                                 <tr>
-                                    <td><strong><a id="actuator_link_output" href="/ferment_container/1">制動器狀態</a></strong></td>
-                                    <td><strong><a id="sensor_link_output" href="/ferment_container/1">感測器狀態</a></strong></td>
+                                    <td><strong><a id="actuator_link_output" href="">致動器狀態</a></strong></td>
+                                    <td><strong><a id="sensor_link_output" href="">感測器狀態</a></strong></td>
                                 </tr>
                                 <tr>
                                     <td style="vertical-align:text-top;">
@@ -744,10 +736,6 @@
             </div>
         </div>
 
-
-
-
-
         <script>
             /*
             var button_F1 = document.getElementById('F1');
@@ -875,6 +863,7 @@
                     $("#tank_temp_t_status").text(res.tank_temp);
 
                     $("#UltraSonic_t_status").text(res.UltraSonic);
+                    $("#motorEncoder_t_status").text(res.motorEncoder)
                     $("#SHT11_Temp_t_status").text(res.SHT11_Temp);
                     $("#SHT11_Humidity_t_status").text(res.SHT11_Humidity);
                     $("#CO2_t_status").text(res.CO2);
@@ -893,28 +882,47 @@
                 }, 'json');
 
                 $('#Modal_title').text("發酵槽 F" + ftid + " 狀態")
-                $('#actuator_link').attr("href", "/ferment_container_tank/" + ftid)
-                $('#sensor_link').attr("href", "/ferment_container_tank/" + ftid)
-
-                $('#Vacuum').attr("href", "/ctrl_F_Vacuum/" + ftid)
-                $('#ThreeWayValveInput').attr("href", "/ctrl_F_ThreeWayValveInput/" + ftid)
-                $('#SolenoidWaterTotal').attr("href", "/ctrl_F_SolenoidWaterTotal/" + ftid)
-                $('#SolenoidOuterWater').attr("href", "/ctrl_F_SolenoidOuterWater/" + ftid)
-                $('#SolenoidWaterIn').attr("href", "/ctrl_F_SolenoidWaterIn/" + ftid)
-                $('#PumpSensor').attr("href", "/ctrl_F_PumpSensor/" + ftid)
-                $('#ThreeWayValveBean').attr("href", "/ctrl_F_ThreeWayValveBean/" + ftid)
-                $('#ThreeWayValveFloat').attr("href", "/ctrl_F_ThreeWayValveFloat/" + ftid)
-                $('#SolenoidDisinfect').attr("href", "/ctrl_F_SolenoidDisinfect/" + ftid)
-                $('#Motor').attr("href", "/ctrl_F_Motor/" + ftid)
-                $('#Heater1').attr("href", "/ctrl_F_Heater1/" + ftid)
-                $('#Heater2').attr("href", "/ctrl_F_Heater2/" + ftid)
-                $('#TempEnable').attr("href", "/ctrl_F_TempEnable/" + ftid)
-                $('#temp').attr("href", "/ctrl_F_Temp/" + ftid)
-                $('#DiskValve').attr("href", "/ctrl_F_DiskValve/" + ftid)
-                
+                if (status == 2) {
+                    $('#actuator_link').attr("title", "該使用者無修改權限")
+                    $('#sensor_link').attr("title", "該使用者無修改權限")
+                    $('#Vacuum').attr("title", "該使用者無修改權限")
+                    $('#ThreeWayValveInput').attr("title", "該使用者無修改權限")
+                    $('#SolenoidWaterTotal').attr("title", "該使用者無修改權限")
+                    $('#SolenoidOuterWater').attr("title", "該使用者無修改權限")
+                    $('#SolenoidWaterIn').attr("title", "該使用者無修改權限")
+                    $('#PumpSensor').attr("title", "該使用者無修改權限")
+                    $('#ThreeWayValveBean').attr("title", "該使用者無修改權限")
+                    $('#ThreeWayValveFloat').attr("title", "該使用者無修改權限")
+                    $('#SolenoidDisinfect').attr("title", "該使用者無修改權限")
+                    $('#Motor').attr("title", "該使用者無修改權限")
+                    $('#Heater1').attr("title", "該使用者無修改權限")
+                    $('#Heater2').attr("title", "該使用者無修改權限")
+                    $('#TempEnable').attr("title", "該使用者無修改權限")
+                    $('#temp').attr("title", "該使用者無修改權限")
+                    $('#DiskValve').attr("title", "該使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link').attr("href", "/ferment_container_tank/" + ftid)
+                    $('#sensor_link').attr("href", "/ferment_container_tank/" + ftid)
+                    $('#Vacuum').attr("href", "/ctrl_F_Vacuum/" + ftid)
+                    $('#ThreeWayValveInput').attr("href", "/ctrl_F_ThreeWayValveInput/" + ftid)
+                    $('#SolenoidWaterTotal').attr("href", "/ctrl_F_SolenoidWaterTotal/" + ftid)
+                    $('#SolenoidOuterWater').attr("href", "/ctrl_F_SolenoidOuterWater/" + ftid)
+                    $('#SolenoidWaterIn').attr("href", "/ctrl_F_SolenoidWaterIn/" + ftid)
+                    $('#PumpSensor').attr("href", "/ctrl_F_PumpSensor/" + ftid)
+                    $('#ThreeWayValveBean').attr("href", "/ctrl_F_ThreeWayValveBean/" + ftid)
+                    $('#ThreeWayValveFloat').attr("href", "/ctrl_F_ThreeWayValveFloat/" + ftid)
+                    $('#SolenoidDisinfect').attr("href", "/ctrl_F_SolenoidDisinfect/" + ftid)
+                    $('#Motor').attr("href", "/ctrl_F_Motor/" + ftid)
+                    $('#Heater1').attr("href", "/ctrl_F_Heater1/" + ftid)
+                    $('#Heater2').attr("href", "/ctrl_F_Heater2/" + ftid)
+                    $('#TempEnable').attr("href", "/ctrl_F_TempEnable/" + ftid)
+                    $('#temp').attr("href", "/ctrl_F_Temp/" + ftid)
+                    $('#DiskValve').attr("href", "/ctrl_F_DiskValve/" + ftid)
+                }
 
                 $("#LiDAR").attr("href", "/chart_F/LiDAR/" + ftid)
                 $("#UltraSonic").attr("href", "/chart_F/UltraSonic/" + ftid)
+                $("#motorEncoder").attr("href", "/chart_F/motorEncoder/" + ftid)
                 $("#SHT11_Temp").attr("href", "/chart_F/SHT11_Temp/" + ftid)
                 $("#SHT11_Humidity").attr("href", "/chart_F/SHT11_Humidity/" + ftid)
                 $("#CO2").attr("href", "/chart_F/CO2/" + ftid)
@@ -944,11 +952,16 @@
                 }, 'json');
 
                 $('#Modal_title_input').text("發酵入料儲豆槽 FI" + fitid + " 狀態")
-                
-                $('#actuator_link_input').attr("href", "/ferment_container_input/" + fitid)
-                $('#sensor_link_input').attr("href", "/ferment_container_input/" + fitid)
 
-                $('#input_Vacuum').attr("href", "/ctrl_FI_Vacuum/" + fitid)
+                if (status == 2) {
+                    $('#actuator_link_input').attr("title", "該使用者無修改權限")
+                    $('#sensor_link_input').attr("title", "該使用者無修改權限")
+                    $('#input_Vacuum').attr("title", "該使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_input').attr("href", "/ferment_container_input/" + fitid)
+                    $('#sensor_link_input').attr("href", "/ferment_container_input/" + fitid)
+                    $('#input_Vacuum').attr("href", "/ctrl_FI_Vacuum/" + fitid)
+                }
                 $('#FI_UltraSonic').attr("href", "/chart_FI/UltraSonic/" + fitid)
                 $('#FI_camera_ferment_tid').attr("href", "/camera_FI" + fitid)
                 $('#FI_Modal').modal('show');
@@ -972,10 +985,16 @@
 
                 $('#Modal_title_output').text("發酵出料儲豆槽 FO" + fotid + " 狀態")
 
-                $('#actuator_link_output').attr("href", "/ferment_container_output/" + fotid)
-                $('#sensor_link_output').attr("href", "/ferment_container_output/" + fotid)
+                if (status == 2) {
+                    $('#actuator_link_output').attr("title", "該使用者無修改權限")
+                    $('#sensor_link_output').attr("title", "該使用者無修改權限")
+                    $('#output_Vacuum').attr("title", "該使用者無修改權限")
+                } else if ( (status == 0) || (status == 1) ) {
+                    $('#actuator_link_output').attr("href", "/ferment_container_output/" + fotid)
+                    $('#sensor_link_output').attr("href", "/ferment_container_output/" + fotid)
+                    $('#output_Vacuum').attr("href", "/ctrl_FO_Vacuum/" + fotid)
+                }
 
-                $('#output_Vacuum').attr("href", "/ctrl_FO_Vacuum/" + fotid)
                 $('#FO_UltraSonic').attr("href", "/chart_FO/UltraSonic/" + fotid)
                 $('#FO_camera_ferment_tid').attr("href", "/camera_FO" + fotid)
                 $('#FO_Modal').modal('show');

app/templates/ferment_container_input.html

@@ -27,7 +27,8 @@
             $("#ferment_input_page").text('發酵貨櫃入料儲豆槽 FI' + ftn + ' 攝影機畫面   ')
             $('#ferment_input_page').attr("href", "/camera_FI" + ftn)
             $("#ferment_input_title").text('發酵貨櫃入料儲豆槽 FI' + ftn + ' 操作介面')
-            $("#coffee_title").text('FI' + ftn + ' 發酵入料儲豆槽操作介面');
+            $("#coffee_title_pc").text('FI' + ftn + ' 發酵入料儲豆槽操作介面');
+            $("#coffee_title_phone").text('FI' + ftn + ' 操作介面');
 
             if (status == 2) {
                 $('input').prop('disabled', true);
@@ -41,216 +42,6 @@
         WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , 10 * 1000)
     </script>
 
-    <style>
-        .footer{
-            position: absolute;
-            width: 100%;
-            background-color: #eee;
-            text-align: center;
-        }
-
-        body {
-            margin: 0;
-        }
-
-        input[type="button"] {
-            padding: 4px 15px;
-            background: #f3f3f3;
-            border: 0 none;
-            cursor: pointer;
-            -webkit-border-radius: 5px;
-            border-radius: 5px;
-
-        }
-
-        .navbar-dark .navbar-nav .nav-link {
-            color: white;
-            cursor: pointer;
-            text-decoration: none;
-            width: 110px;
-            height: 46px;
-        }
-
-        .nav-top {
-            line-height: 40px;
-            background-color: #C4C4C4;
-        }
-
-        .website_title {
-            font-family: Roboto;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 30px;
-            color: #000000;
-        }
-
-        .navbar-nav>li {
-            float: none;
-            display: inline-block;
-            width: 100px;
-            margin: 0 auto;
-            text-align: center;
-        }
-
-        .navbar-nav>li a {
-            font-size: 20px;
-        }
-
-        .main-page {
-            margin-top: 200px;
-        }
-
-        .page-title {
-            font-family: Roboto;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 36px;
-        }
-
-
-        .flex {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-
-        .set-link {
-            display: inline-block;
-            width: 350px;
-            height: 100px;
-            line-height: 100px;
-            background: #008CBA;
-            border: 1px solid #CFCFCF;
-            box-sizing: border-box;
-            color: #FFFFFF;
-            border-radius: 10px;
-            font-size: 36px;
-        }
-
-        .cmn-toggle {
-            position: absolute;
-            margin-left: 0px;
-            visibility: hidden;
-        }
-
-        .cmn-toggle+label {
-            display: block;
-            position: relative;
-            cursor: pointer;
-            outline: none;
-            user-select: none;
-        }
-
-        input.cmn-toggle-round-flat+label {
-            padding: 2px;
-            width: 60px;
-            height: 30px;
-            background-color: #C0C0C0;
-            border-radius: 60px;
-            transition: background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat+label:before,
-        input.cmn-toggle-round-flat+label:after {
-            display: block;
-            position: absolute;
-            content: "";
-        }
-
-        input.cmn-toggle-round-flat+label:before {
-            top: 2px;
-            left: 2px;
-            bottom: 2px;
-            right: 2px;
-            background-color: #fff;
-            border-radius: 60px;
-            transition: background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat+label:after {
-            top: 4px;
-            left: 4px;
-            bottom: 4px;
-            width: 24px;
-            background-color: #dddddd;
-            border-radius: 52px;
-            transition: margin 0.4s, background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat:checked+label {
-            background-color: #C0C0C0;
-        }
-
-        input.cmn-toggle-round-flat:checked+label:after {
-            margin-left: 27px;
-            background-color: #008CBA;
-        }
-
-        @media(max-width:373px) {
-            .card {
-                margin-right: 0px;
-            }
-
-            .set-link {
-                width: 250px;
-            }
-        }
-
-        @media(max-width:577px) {}
-
-        @media(min-width:576px) {}
-
-        @media(min-width:768px) {
-            .navbar-nav>li {
-                margin-left: 0px;
-            }
-
-            .navbar-nav .li-block {
-                display: none;
-            }
-        }
-
-        @media(min-width:991px) {
-            .navbar-nav>li {
-                margin-left: 20px;
-            }
-
-            .navbar-nav .li-block {
-                display: none;
-            }
-        }
-
-        @media(min-width:1200px) {
-            .navbar-nav>li {
-                margin-left: 50px;
-            }
-
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 100px;
-            }
-        }
-
-        @media(min-width:1400px) {
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 200px;
-            }
-        }
-
-
-        @media(min-width:1689px) {
-            .navbar-nav>li {
-                margin-left: 50px;
-            }
-
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 500px;
-            }
-        }
-    </style>
     <script>
         // 發酵槽_制動器控制
         var tank_num = '{{tid}}';
@@ -274,8 +65,7 @@
             };
 
             var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": status };
-            // jquery 請求 '/mqtt/{{tid}}' 頁面
-            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
+            $.post('/mqtt/{{tid}}', data, function (res) {
                 console.log('data:', data)
                 if (res == 'on') {
                     $("#cmn-toggle-02").prop('checked', true);
@@ -289,9 +79,14 @@
             }, 'text')
         };
 
-        function inputVacuum_ON() {
-            var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "on" };
-            // jquery 請求 '/mqtt/{{tid}}' 頁面
+        function inputVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "off" };
+            } else {
+                var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": params };
+            }
             $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
                 console.log('data:', data)
                 if (res == 'on') {
@@ -303,22 +98,31 @@
             }, 'text')
         };
 
-        function inputVacuum_OFF() {
-            var data = { "tank_num": "FI" + tank_num, "command": "input_vacuum_status", "value": "off" };
-            // jquery 請求 '/mqtt/{{tid}}' 頁面
-            $.post('/mqtt/{{tid}}', data, function (res) {      //res：HTTP response argument to the middleware function
-                console.log('data:', data)
-                if (res == 'on') {
-                    $("#cmn-toggle-02").prop('checked', true);
-                } else if (res == 'off') {
+    </script>
+    
+    <script language="JavaScript">
+            
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , webupdate_time * 1000);
+        }
+
+        // jQuery 更新感測器制動器狀態
+        function WebUpdate(ftn) {
+            $.get('/loading/FI' + ftn, '', function (res) {
+                if (res.input_vacuum == 0) {
                     $("#cmn-toggle-02").prop('checked', false);
-                } else {
-                };
-            }, 'text')
-        };
+                } else if (res.input_vacuum == 1) {
+                    $("#cmn-toggle-02").prop('checked', true);}
 
-        
 
+                    $("#UltraSonic_t_status").text(res.input_UltraSonic);
+    
+            }, 'json');
+        }
     </script>
 </head>
 
@@ -328,50 +132,10 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-    
-        <!--
-        <div style="text-align: left;">
-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
-        </div>
-        <div style="text-align: right;">
-            <a id="ferment_input_page" href="/index_new" style="float: right;">___________________</a>
-        </div>
-        <div id="ferment_input_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
-            發酵貨櫃入料儲豆槽 FI 操作介面
-        </div>
-        -->
-
-        狀態更新時間(秒)
-        <input name="webupdate_time" type="text" value="60" style="width:100px;">
-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
 
-        <script language="JavaScript">
-            
-            function changeUpdate() {
-                clearInterval(WebUpdate_set);
-
-                var webupdate_time = $("input[name=webupdate_time]").val()
-                console.log('webupdate_time' + webupdate_time)
-                WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , webupdate_time * 1000);
-            }
-
-            // jQuery 更新感測器制動器狀態
-            function WebUpdate(ftn) {
-                $.get('/loading/FI' + ftn, '', function (res) {
-                    if (res.input_vacuum == 0) {
-                        $("#cmn-toggle-02").prop('checked', false);
-                    } else if (res.input_vacuum == 1) {
-                        $("#cmn-toggle-02").prop('checked', true);}
-
-
-                        $("#UltraSonic_t_status").text(res.input_UltraSonic);
-        
-                }, 'json');
-            }
-        </script>
 
         <h4>制動器</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="5" style="text-align: center;">
             <tr>
                 <td style="color:red;">Valve</td>
                 <td>真空吸料機</td>
@@ -384,49 +148,47 @@
                 <td>
                     <div class="switch_div">
                         <div class="switch">
-                            <input id="cmn-toggle-01" class="cmn-toggle cmn-toggle-round" type="checkbox">
-                            <label for="cmn-toggle-01"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-01">
                         </div>
                         <div class="switch text-center">
                             {% if input_vacuum == 1 %}
-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02" checked
                                 name="tank_vacuum_status" value="ON" onclick="inputVacuum()">
                             {% else %}
-                            <input id="cmn-toggle-02" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-02"
                                 name="tank_vacuum_status" value="OFF" onclick="inputVacuum()">
                             {% endif %}
-                            <label for="cmn-toggle-02"></label>
+                            <label class="label_ActuatorStatus" for="cmn-toggle-02"></label>
                         </div>
                         <div class="switch">
-                            <input id="cmn-toggle-03" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
-                            <label for="cmn-toggle-03" data-on="Yes" data-off="No"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-03">
                         </div>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td><span style="color:#008CBA;"><b>ON</b></span></td>
-                <td><input type="button" value="ON" name="input_vacuum_ON" onclick="inputVacuum_ON()"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="inputVacuum('1')"></td>
             </tr>
             <tr>
                 <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
-                <td><input type="button" value="OFF" name="input_vacuum_OFF" onclick="inputVacuum_OFF()"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="inputVacuum('0')"></td>
             </tr>
         </table>
 
         <br>
 
         <h4>感測器</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
+        <table border="1" class="table-all" cellpadding="5">
             <tr>
-                <td>[入料] 生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>
+                <td>生豆高度：<span id="UltraSonic_t_status">{{input_UltraSonic.UltraSonic}}</span> 公分</td>
             </tr>
         </table>
 
         <br>
 
         <h4>排程設計</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="5">
             <tr>
                 <td>入料</td>
                 <td>循環測試</td>
@@ -434,21 +196,21 @@
             <tr>
                 <td>
                     指定桶內生豆高度
-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>
                     吸料時間
-                    <input name="testing_in_vacuum_in" type="text" value="1" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_in" value="5">秒<br>
                     放料時間
-                    <input name="testing_in_vacuum_out" type="text" value="10" style="width: 40px;">秒<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_out" value="10">秒<br>
                     循環次數
-                    <input name="testing_in_vacuum_loop" type="text" value="3" style="width: 40px;">次<br>
+                    <input type="text" class="input-text" name="testing_in_vacuum_loop" value="3">次<br>
                 </td>
                 <td>
-                    ON (開) &nbsp;
-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
-                    OFF (關) &nbsp;
-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
+                    ON (開)
+                    <input type="text" class="input-text" name="Testing_starttime" value="3">秒<br>
+                    OFF (關)
+                    <input type="text" class="input-text" name="Testing_endtime" value="5">秒<br>
                     循環
-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
+                    <input type="text" class="input-text" name="Testing_loop" value="3">次
                 </td>
             </tr>
             <tr>
@@ -489,13 +251,13 @@
                                                 console.log("生豆已達目標高度！")
                                                 CoffeeIn_Process = 0;
                                             } else {
-                                                inputVacuum_ON()
+                                                inputVacuum('1')
                                                 console.log('inputVacuum_ON')
 
                                                 var time = new Date();
                                                 while ((new Date() - time) < testing_tank_vacuum_in * 1000) { };
 
-                                                inputVacuum_OFF()
+                                                inputVacuum('0')
                                                 console.log('inputVacuum_OFF')
 
                                                 var time = new Date();
@@ -518,13 +280,13 @@
                                 for (step = 1; step <= testing_tank_vacuum_loop; step++) {
                                     console.log('-- 循環第 ' + step + ' 次 --');
 
-                                    inputVacuum_ON()
+                                    inputVacuum('1')
                                     console.log('inputVacuum_ON')
 
                                     var time = new Date();
                                     while ((new Date() - time) < testing_tank_vacuum_in * 1000) { };
 
-                                    inputVacuum_OFF()
+                                    inputVacuum('0')
                                     console.log('inputVacuum_OFF')
 
                                     var time = new Date();
@@ -551,13 +313,13 @@
                             for (step = 1; step <= Testing_loop; step++) {
                                 console.log('循環第 ' + step + ' 次');
 
-                                inputVacuum_ON()
+                                inputVacuum('1')
                                 console.log('inputVacuum_ON')
 
                                 var time = new Date();
                                 while ((new Date() - time) < Testing_starttime * 1000) { }
 
-                                inputVacuum_OFF()
+                                inputVacuum('0')
                                 console.log('inputVacuum_OFF')
 
                                 var time = new Date();
@@ -570,50 +332,6 @@
             </tr>
         </table>
 
-        <br>
-
-        <h4>攝影機畫面</h4>
-        <div class="container-fluid">
-            <div class="row" style="margin-top:5px;">
-                <div class="col flex">
-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
-                        <div class="col-md-12 row flex">
-                            <img src="" id="two" width="80%" height="80%">
-                        </div>
-                    </div>
-                    <script>
-                        // M5 攝影機
-                        //const img = document.querySelector('#one');
-                        const img1 = document.querySelector('#two');
-                        const WS_URL1 = 'ws:///60.250.156.230:8089';
-                        const ws1 = new WebSocket(WS_URL1);
-                        let urlObject1;
-                        ws1.onopen = () => console.log(`Connected to ${WS_URL1}`);
-                        ws1.onmessage = message1 => {
-                            const arrayBuffer1 = message1.data;
-                            if (urlObject1) {
-                                URL.revokeObjectURL(urlObject1);
-                            }
-                            urlObject1 = URL.createObjectURL(new Blob([arrayBuffer1]));
-                            img1.src = urlObject1;
-                        }
-                    </script>
-                </div>
-            </div>
-        </div>
-
-        <br>
-        <br>
-
-        <!--
-        <footer class="footer">
-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
-            </div>
-        </footer>
-        -->
-
         <div id="coffee_footer">
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}

app/templates/ferment_container_output.html

@@ -27,7 +27,8 @@
             $("#ferment_output_page").text('發酵貨櫃出料儲豆槽 FO' + ftn + ' 攝影機畫面   ')
             $('#ferment_output_page').attr("href", "/camera_FO" + ftn)
             $("#ferment_container_output_title").text('發酵貨櫃出料儲豆槽 FO' + ftn + ' 操作介面')
-            $("#coffee_title").text('FO' + ftn + ' 發酵出料儲豆槽操作介面');
+            $("#coffee_title_pc").text('FO' + ftn + ' 發酵出料儲豆槽操作介面');
+            $("#coffee_title_phone").text('FO' + ftn + ' 操作介面');
 
             if (status == 2) {
                 $('input').prop('disabled', true);
@@ -41,216 +42,6 @@
         WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , 10 * 1000)
     </script>
 
-    <style>
-        .footer{
-            position: absolute;
-            width: 100%;
-            background-color: #eee;
-            text-align: center;
-        }
-
-        body {
-            margin: 0;
-        }
-
-        input[type="button"] {
-            padding: 4px 15px;
-            background: #f3f3f3;
-            border: 0 none;
-            cursor: pointer;
-            -webkit-border-radius: 5px;
-            border-radius: 5px;
-
-        }
-
-        .navbar-dark .navbar-nav .nav-link {
-            color: white;
-            cursor: pointer;
-            text-decoration: none;
-            width: 110px;
-            height: 46px;
-        }
-
-        .nav-top {
-            line-height: 40px;
-            background-color: #C4C4C4;
-        }
-
-        .website_title {
-            font-family: Roboto;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 30px;
-            color: #000000;
-        }
-
-        .navbar-nav>li {
-            float: none;
-            display: inline-block;
-            width: 100px;
-            margin: 0 auto;
-            text-align: center;
-        }
-
-        .navbar-nav>li a {
-            font-size: 20px;
-        }
-
-        .main-page {
-            margin-top: 200px;
-        }
-
-        .page-title {
-            font-family: Roboto;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 36px;
-        }
-
-
-        .flex {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-
-        .set-link {
-            display: inline-block;
-            width: 350px;
-            height: 100px;
-            line-height: 100px;
-            background: #008CBA;
-            border: 1px solid #CFCFCF;
-            box-sizing: border-box;
-            color: #FFFFFF;
-            border-radius: 10px;
-            font-size: 36px;
-        }
-
-        .cmn-toggle {
-            position: absolute;
-            margin-left: 0px;
-            visibility: hidden;
-        }
-
-        .cmn-toggle+label {
-            display: block;
-            position: relative;
-            cursor: pointer;
-            outline: none;
-            user-select: none;
-        }
-
-        input.cmn-toggle-round-flat+label {
-            padding: 2px;
-            width: 60px;
-            height: 30px;
-            background-color: #C0C0C0;
-            border-radius: 60px;
-            transition: background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat+label:before,
-        input.cmn-toggle-round-flat+label:after {
-            display: block;
-            position: absolute;
-            content: "";
-        }
-
-        input.cmn-toggle-round-flat+label:before {
-            top: 2px;
-            left: 2px;
-            bottom: 2px;
-            right: 2px;
-            background-color: #fff;
-            border-radius: 60px;
-            transition: background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat+label:after {
-            top: 4px;
-            left: 4px;
-            bottom: 4px;
-            width: 24px;
-            background-color: #dddddd;
-            border-radius: 52px;
-            transition: margin 0.4s, background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat:checked+label {
-            background-color: #C0C0C0;
-        }
-
-        input.cmn-toggle-round-flat:checked+label:after {
-            margin-left: 27px;
-            background-color: #008CBA;
-        }
-
-        @media(max-width:373px) {
-            .card {
-                margin-right: 0px;
-            }
-
-            .set-link {
-                width: 250px;
-            }
-        }
-
-        @media(max-width:577px) {}
-
-        @media(min-width:576px) {}
-
-        @media(min-width:768px) {
-            .navbar-nav>li {
-                margin-left: 0px;
-            }
-
-            .navbar-nav .li-block {
-                display: none;
-            }
-        }
-
-        @media(min-width:991px) {
-            .navbar-nav>li {
-                margin-left: 20px;
-            }
-
-            .navbar-nav .li-block {
-                display: none;
-            }
-        }
-
-        @media(min-width:1200px) {
-            .navbar-nav>li {
-                margin-left: 50px;
-            }
-
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 100px;
-            }
-        }
-
-        @media(min-width:1400px) {
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 200px;
-            }
-        }
-
-
-        @media(min-width:1689px) {
-            .navbar-nav>li {
-                margin-left: 50px;
-            }
-
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 500px;
-            }
-        }
-    </style>
     <script>
         // 發酵槽_制動器控制
 
@@ -288,22 +79,15 @@
                 };
             }, 'text')
         };
-        function outputVacuum_ON() {
-            var data = { "tank_num": "FO" + tank_num, "command": "output_vacuum_status", "value": "on" };
-            console.log('data:', data)
-            $.post('/mqtt/{{tid}}', data, function (res) {
-                if (res == 'on') {
-                    $("#cmn-toggle-32").prop('checked', true);
-                } else if (res == 'off') {
-                    $("#cmn-toggle-32").prop('checked', false);
-                } else {
-                    console.log('res error')
-                };
-            }, 'text')
-        }
-        function outputVacuum_OFF() {
-            var data = { "tank_num": "FO" + tank_num, "command": "output_vacuum_status", "value": "off" };
-            console.log('data:', data)
+
+        function outputVacuum(params){
+            if (params == '1') {
+                var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": "off" };
+            } else {
+                var data = { "tank_num": "DO" + tank_num, "command": "output_vacuum_status", "value": params };
+            }
             $.post('/mqtt/{{tid}}', data, function (res) {
                 if (res == 'on') {
                     $("#cmn-toggle-32").prop('checked', true);
@@ -314,8 +98,15 @@
                 };
             }, 'text')
         }
-        function tankDiskValve_ON() {
-            var data = { "tank_num": "F" + tank_num, "command": "tank_diskvalve_status", "value": "on" };
+
+        function tankDiskValve(params) {
+            if (params == '1') {
+                var data = { "tank_num": "F" + tank_num, "command": "tank_diskvalve_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "F" + tank_num, "command": "tank_diskvalve_status", "value": "off" };
+            } else {
+                var data = { "tank_num": "F" + tank_num, "command": "tank_diskvalve_status", "value": params };
+            }
             $.post('/mqtt/{{tid}}', data, function (res) {
                 console.log('data:', data)
                 if (res == 'on') {
@@ -326,19 +117,29 @@
                 };
             }, 'text')
         }
-        function tankDiskValve_OFF() {
-            var data = { "tank_num": "F" + tank_num, "command": "tank_diskvalve_status", "value": "off" };
-            $.post('/mqtt/{{tid}}', data, function (res) {
-                console.log('data:', data)
-                if (res == 'on') {
-                    $("#cmn-toggle-11").prop('checked', true);
-                } else if (res == 'off') {
-                    $("#cmn-toggle-11").prop('checked', false);
-                } else {
-                };
-            }, 'text')
+
+    </script>
+
+    <script language="JavaScript">
+                
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , webupdate_time * 1000);
+        }
+
+        // jQuery 更新感測器制動器狀態
+        function WebUpdate(ftn) {
+
+            $.get('/loading/FO' + ftn, '', function (res) {
+                $("#LiDAR_t_status").text(res.LiDAR);
+                
+            }, 'json');
         }
     </script>
+
 </head>
 
 <body>
@@ -347,45 +148,9 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-    
-        <!--
-        <div style="text-align: left;">
-            <a href="/ferment" style="float: left;">&nbsp;&nbsp;&nbsp;返回發酵貨櫃首頁</a>
-        </div>
-        <div style="text-align: right;">
-            <a id="ferment_output_page" href="/index_new" style="float: right;">___________________</a>
-        </div>
-        <div id="ferment_container_output_title" style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 15px;">
-            發酵貨櫃出料儲豆槽 FO 操作介面
-        </div>
-        -->
-
-        狀態更新時間(秒)：
-        <input name="webupdate_time" type="text" value="5" style="width:40px;">
-        <input type="button" value="設定更新時間" onclick="changeUpdate()">
-
-        <script language="JavaScript">
-            
-            function changeUpdate() {
-                clearInterval(WebUpdate_set);
-
-                var webupdate_time = $("input[name=webupdate_time]").val()
-                console.log('webupdate_time' + webupdate_time)
-                WebUpdate_set = setInterval(function(){WebUpdate(ftn)} , webupdate_time * 1000);
-            }
-
-            // jQuery 更新感測器制動器狀態
-            function WebUpdate(ftn) {
-
-                $.get('/loading/FO' + ftn, '', function (res) {
-                    $("#LiDAR_t_status").text(res.LiDAR);
-                    
-                }, 'json');
-            }
-        </script>
-
+        
         <h4>制動器</h4>
-        <table border="1px solid black" style="font-size:18px;" width=100%>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
             <tr>
                 <td style="color:red;">Valve</td>
                 <td>真空吸料機</td>
@@ -398,40 +163,38 @@
                 <td>
                     <div class="switch_div">
                         <div class="switch">
-                            <input id="cmn-toggle-31" class="cmn-toggle cmn-toggle-round" type="checkbox">
-                            <label for="cmn-toggle-31"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-31">
                         </div>
                         <div class="switch text-center">
                             {% if output_vacuum == 1 %}
-                            <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32" checked
                                 name="output_vacuum_status" value="ON" onclick="outputVacuum()">
                             {% else %}
-                            <input id="cmn-toggle-32" class="cmn-toggle cmn-toggle-round-flat" type="checkbox"
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-32"
                                 name="output_vacuum_status" value="OFF" onclick="outputVacuum()">
                             {% endif %}
-                            <label for="cmn-toggle-32"></label>
+                            <label class="label_ActuatorStatus" for="cmn-toggle-32"></label>
                         </div>
                         <div class="switch">
-                            <input id="cmn-toggle-33" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
-                            <label for="cmn-toggle-33" data-on="Yes" data-off="No"></label>
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-33">
                         </div>
                     </div>
                 </td>
             </tr>
             <tr>
                 <td><span style="color:#008CBA;"><b>ON</b></span></td>
-                <td><input type="button" value="ON" onclick="outputVacuum_ON()"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="outputVacuum('1')"></td>
             </tr>
             <tr>
                 <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
-                <td><input type="button" value="OFF" onclick="outputVacuum_OFF()"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="outputVacuum('0')"></td>
             </tr>
         </table>
 
         <br>
 
         <h4>感測器</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" cellpadding="10" width=98%>
+        <table border="1" class="table-all" cellpadding="3">
             <tr>
                 <td>[出料儲豆槽] 生豆高度：<span id="UltraSonic_t_status">{{output_UltraSonic.UltraSonic}}</span> 公分</td>
             </tr>
@@ -440,7 +203,7 @@
         <br>
 
         <h4>排程設計</h4>
-        <table border="1" style="font-size:18px; border:2px #cccccc solid; margin-left: 2px; margin-right: 2px;" width=98%>
+        <table border="1" class="table-all" cellpadding="3">
             <tr>
                 <td>入料</td>
                 <td>循環測試</td>
@@ -454,22 +217,22 @@
                     蝴蝶閥 ON
                     <br>
                     -->
-                    指定桶內生豆高度
-                    <input name="testing_BeanIn_Height" type="text" value="0" style="width: 40px;">公分<br>
-                    出料吸料時間
-                    <input name="testing_out_vacuum_in" id="testing_out_vacuum_in" value="1" type="text" style="width: 40px;">秒<br>
-                    出料放料時間(>10)
-                    <input name="testing_out_vacuum_out" id="testing_out_vacuum_out" value="10" type="text" style="width: 40px;">秒<br>
-                    出料循環次數
-                    <input name="testing_out_vacuum_loop" id="testing_out_vacuum_loop" value="3" type="text" style="width: 40px;">次
+                    生豆高度
+                    <input type="text" class="input-text" name="testing_BeanIn_Height" value="0">公分<br>
+                    吸料                   
+                    <input type="text" class="input-text" name="testing_out_vacuum_in" value="1">秒<br>
+                    放料(>10)
+                    <input type="text" class="input-text" name="testing_out_vacuum_out" value="10">秒<br>
+                    循環次數
+                    <input type="text" class="input-text" name="testing_out_vacuum_loop" value="3">次
                 </td>
                 <td>
-                    ON (開) &nbsp;
-                    <input name="Testing_starttime" value="3" type="text" style="width: 40px;">秒<br>
-                    OFF (關) &nbsp;
-                    <input name="Testing_endtime" value="5" type="text" style="width: 40px;">秒<br>
+                    ON (開)
+                    <input type="text" class="input-text" name="Testing_starttime" value="3">秒<br>
+                    OFF (關)
+                    <input type="text" class="input-text" name="Testing_endtime" value="5">秒<br>
                     循環
-                    <input name="Testing_loop" value="3" type="text" style="width: 40px;">次
+                    <input type="text" class="input-text" name="Testing_loop" value="3">次
                 </td>
             </tr>
             <tr>
@@ -489,7 +252,7 @@
                                 
                                 $.get('/ferment_LiDAR_' + tank_num, '', function (res) {
                                     if ( parseInt(res.LiDAR) > parseInt(testing_BeanIn_Height) ){
-                                        tankDiskValve_ON()
+                                        tankDiskValve('1')
                                         console.log('tankDiskValve_ON')
                                     };
                                 }, 'json');
@@ -517,14 +280,13 @@
                                                 CoffeeOut_process = 0;
 
                                             } else {
-
-                                                outputVacuum_ON();
+                                                outputVacuum('1');
                                                 console.log('outputVacuum_ON')
 
                                                 var time = new Date();
                                                 while ((new Date() - time) < testing_out_vacuum_in * 1000) { };
 
-                                                outputVacuum_OFF()
+                                                outputVacuum('0')
                                                 console.log('outputVacuum_OFF')
 
                                                 var time = new Date();
@@ -541,7 +303,7 @@
 
                                 }
 
-                                tankDiskValve_OFF()
+                                tankDiskValve('0')
                                 console.log('tankDiskValve_OFF')
 
 
@@ -550,33 +312,33 @@
 
                                 console.log('循環方式入豆')
 
-                                tankDiskValve_ON()
+                                tankDiskValve('1')
                                 console.log('tankDiskValve_ON')
                                 
                                 for (step = 1; step <= testing_out_vacuum_loop; step++) {
                                     console.log('-- 循環第 ' + step + ' 次 --')
 
-                                    outputVacuum_ON();
+                                    outputVacuum('1');
                                     console.log('outputVacuum_ON')
 
                                     var time = new Date();
                                     while ((new Date() - time) < testing_out_vacuum_in * 1000) { };
 
                                     if (step == 1) {
-                                        tankDiskValve_ON();
+                                        tankDiskValve('1');
                                         console.log('tankDiskValve_ON')
 
                                         var time = new Date();
                                         while ((new Date() - time) < testing_out_vacuum_in * 1000) { };
                                     }
-                                    outputVacuum_OFF();
+                                    outputVacuum('0');
                                     console.log('outputVacuum_OFF')
 
                                     var time = new Date();
                                     while ((new Date() - time) < testing_out_vacuum_out * 1000) { };
                                 }
 
-                                tankDiskValve_OFF();
+                                tankDiskValve('0');
                                 console.log('tankDiskValve_OFF')
 
                             };
@@ -598,13 +360,13 @@
                             for (step = 1; step <= Testing_loop; step++) {
                                 console.log('循環第 ' + step + ' 次');
 
-                                outputVacuum_ON()
+                                outputVacuum('1')
                                 console.log('outputVacuum_ON')
 
                                 var time = new Date();
                                 while ((new Date() - time) < Testing_starttime * 1000) { }
 
-                                outputVacuum_OFF()
+                                outputVacuum('0')
                                 console.log('outputVacuum_OFF')
 
                                 var time = new Date();
@@ -617,50 +379,6 @@
             </tr>
         </table>
 
-        <br>
-
-        <h4>攝影機畫面</h4>
-        <div class="container-fluid">
-            <div class="row" style="margin-top:10px;">
-                <div class="col flex">
-                    <div class="col-md-12 row flex" style="text-align:center;margin-top:5px;">
-                        <div class="col-md-12 row flex">
-                            <img src="" id="two" width="80%" height="80%">
-                        </div>
-                    </div>
-                    <script>
-                        // M5 攝影機
-                        //const img = document.querySelector('#one');
-                        const img1 = document.querySelector('#two');
-                        const WS_URL1 = 'ws:///60.250.156.230:8089';
-                        const ws1 = new WebSocket(WS_URL1);
-                        let urlObject1;
-                        ws1.onopen = () => console.log(`Connected to ${WS_URL1}`);
-                        ws1.onmessage = message1 => {
-                            const arrayBuffer1 = message1.data;
-                            if (urlObject1) {
-                                URL.revokeObjectURL(urlObject1);
-                            }
-                            urlObject1 = URL.createObjectURL(new Blob([arrayBuffer1]));
-                            img1.src = urlObject1;
-                        }
-                    </script>
-                </div>
-            </div>
-        </div>
-        
-        <br>
-        <br>
-
-        <!--
-        <footer class="footer">
-            <div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
-                Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
-                <a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
-            </div>
-        </footer>
-        -->
-
         <div id="coffee_footer">
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}

app/templates/footer.html

@@ -35,6 +35,8 @@
 
         html, body {
             height: 100%;
+            /* margin: 0; */
+            position: relative;
         }
 
         #wrapper {
@@ -44,244 +46,26 @@
             position: relative;
         }
 
-        .navbar-dark .navbar-nav .nav-link {
-            color: white;
-            cursor: pointer;
-            text-decoration: none;
-            width: 110px;
-            height: 46px;
-        }
-
-        .nav-top {
-            line-height: 40px;
-            background-color: #C4C4C4;
-        }
-
-        .website_title {
-            font-family: Roboto;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 30px;
-            color: #000000;
-        }
-
-        .navbar-nav>li {
-            float: none;
-            display: inline-block;
-            width: 100px;
-            margin: 0 auto;
-            text-align: center;
-        }
-
-        .navbar-nav>li a {
-            font-size: 20px;
-        }
-
-        .main-page {
-            margin-top: 200px;
-        }
-
-        .page-title {
-            font-family: Roboto;
-            font-style: normal;
-            font-weight: bold;
-            font-size: 36px;
-        }
-
-
-        .flex {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: center;
-        }
-
-        .set-link {
-            display: inline-block;
-            width: 350px;
-            height: 100px;
-            line-height: 100px;
-            background: #008CBA;
-            border: 1px solid #CFCFCF;
-            box-sizing: border-box;
-            color: #FFFFFF;
-            border-radius: 10px;
-            font-size: 36px;
-        }
-
-        .cmn-toggle {
-            position: absolute;
-            margin-left: 0px;
-            visibility: hidden;
-        }
-
-        .cmn-toggle+label {
-            display: block;
-            position: relative;
-            cursor: pointer;
-            outline: none;
-            user-select: none;
-        }
-
-        input.cmn-toggle-round-flat+label {
-            padding: 2px;
-            width: 60px;
-            height: 30px;
-            background-color: #C0C0C0;
-            border-radius: 60px;
-            transition: background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat+label:before,
-        input.cmn-toggle-round-flat+label:after {
-            display: block;
-            position: absolute;
-            content: "";
-        }
-
-        input.cmn-toggle-round-flat+label:before {
-            top: 2px;
-            left: 2px;
-            bottom: 2px;
-            right: 2px;
-            background-color: #fff;
-            border-radius: 60px;
-            transition: background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat+label:after {
-            top: 4px;
-            left: 4px;
-            bottom: 4px;
-            width: 24px;
-            background-color: #dddddd;
-            border-radius: 52px;
-            transition: margin 0.4s, background 0.4s;
-        }
-
-        input.cmn-toggle-round-flat:checked+label {
-            background-color: #C0C0C0;
-        }
-
-        input.cmn-toggle-round-flat:checked+label:after {
-            margin-left: 27px;
-            background-color: #008CBA;
-        }
-
-
-        .main-menu li {
-            position: relative; 
-            transition: .5s; 
-            list-style-type: none;
-        }
-        .main-menu li a {
-            padding: 0 15px;
-            line-height: 60px;
-            font-size: 18px;
-        }
-
-        
-        .main-menu li::after {
-            content: '';
-            position: absolute;
-            height: 4px;
-            left: 50%;
-            right: 50%;
-            bottom: 0;
-            background-color: #bbb;
-            transition: .5s;
-        }
-
-        .main-menu li:hover {
-            background-color: #ddd;
-        }
-
-        .main-menu li:hover::after {
-            left: 0;
-            right: 0;
-        }
-
-
-
-
-        @media(max-width:373px) {
-            .card {
-                margin-right: 0px;
-            }
-
-            .set-link {
-                width: 250px;
-            }
-        }
-
-        @media(max-width:577px) {}
-
-        @media(min-width:576px) {}
-
-        @media(min-width:768px) {
-            .navbar-nav>li {
-                margin-left: 0px;
-            }
-
-            .navbar-nav .li-block {
-                display: none;
-            }
-        }
-
-        @media(min-width:991px) {
-            .navbar-nav>li {
-                margin-left: 20px;
-            }
-
-            .navbar-nav .li-block {
-                display: none;
-            }
-        }
-
-        @media(min-width:1200px) {
-            .navbar-nav>li {
-                margin-left: 50px;
-            }
-
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 100px;
-            }
-        }
-
-        @media(min-width:1400px) {
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 200px;
-            }
-        }
-
-
-        @media(min-width:1689px) {
-            .navbar-nav>li {
-                margin-left: 50px;
-            }
-
-            .navbar-nav .li-block {
-                display: inline-block;
-                width: 500px;
-            }
-        }
     </style>
 
 </head>
 
 <body>
-
-
-        <footer class="footer" id="footer" style="margin: auto;">
-            <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">
-                <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;
-                <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;
-                <a style="padding: 0px 6px;" href="#">網站地圖</a>&nbsp;｜&nbsp;
-                Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                
-            </div>
-        </footer>
+    <!-- <div style="text-align: center;">
+        狀態更新時間(秒)：
+        <input type="text" class="input-text" name="webupdate_time" value="5" style="width:100px;">
+        <input type="button" class="input-button" value="設定更新時間" onclick="changeUpdate()">
+    </div> -->
+    <br>
+    <br>
+    <footer class="footer" id="footer" style="margin: auto;">
+        <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">
+            <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;
+            <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;
+            <a style="padding: 0px 6px;" href="/sitemap">網站地圖</a>&nbsp;｜&nbsp;
+            Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                
+        </div>
+    </footer>
 
 </body>
 

app/templates/header.html

@@ -27,31 +27,77 @@
         var status = '{{status}}';
         var username = '{{username}}';
         $(document).ready(function(){
-            $('#navbarDropdown_user').text(username)
-            /*
-            if (status == 2) {
-                $('input').prop('disabled', true);
-                $('button').prop('disabled', true);
-            } else if ( (status == 0) || (status == 1) ) {
-                $('input').prop('disabled', false);
-                $('button').prop('disabled', false);   
-            }
-            */
+            $('#navbarDropdown_user_pc').text(username)
+            $('#navbarDropdown_user_phone').text(username)
+            console.log('status: ' + status)
+            console.log('username:　' + username)
+            // if ( (status == 2) || (status == 8)  || (status == 9) ) {
+            //     $('input').prop('disabled', true);
+            //     $('button').prop('disabled', true);
+            // } else if ( (status == 0) || (status == 1) ) {
+            //     $('input').prop('disabled', false);
+            //     $('button').prop('disabled', false);   
+            // }
         });
     </script>
 
 
     <style>
-        .footer {
-            height: 40px;
-            box-sizing: border-box;
-            /* 設定footer絕對位置在底部 */
+        .footer{
             position: absolute;
-            bottom: 0px;
             width: 100%;
             background-color: #eee;
             text-align: center;
         }
+        body {
+            margin: 0;
+        }
+        /* 文字輸入框 */
+        .input-text {
+            height: 25px;
+            width: 40px;
+            text-align: center;
+            margin-left: 2px;
+            margin-right: 5px;
+        }
+        /* 致動器狀態表格置中 */
+        .label_ActuatorStatus {
+            margin: auto;
+        }
+        /* 致動器 ON 樣式 */
+        .input-button-on {
+            color: #008CBA;
+            border: 2px rgb(182, 181, 181) solid;
+            background-color: whitesmoke;
+            padding: 1px 3px;
+            width: 45px;
+        }
+        /* 致動器 OFF 樣式 */
+        .input-button-off {
+            color: #707070;
+            border: 2px rgb(192, 192, 192) solid;
+            background-color: whitesmoke;
+            padding: 1px 3px;
+            width: 45px;
+        }
+        /* 輸入按鈕 */
+        .input-button {
+            font-size: 14px;
+            color: #008CBA;
+            border: 2px rgb(182, 181, 181) solid;
+            background-color: whitesmoke;
+            padding: 1px 3px;
+        }
+        /* 大表格樣式 */
+        .table-all {
+            font-size:18px; 
+            border:2px #cccccc solid; 
+            margin-left: 10px; 
+            margin-right: 10px; 
+            width: 98%;
+        }
+
+        /* ---------------------------------------------------------- */
 
         html,
         body {
@@ -250,6 +296,24 @@
             }
         }
 
+        @media(max-width:1050px) {
+            .nav-list-pc {
+                display: none;
+            }
+            .nav-list-phone {
+                display: block;
+            }
+        }
+
+        @media(min-width:1050px) {
+            .nav-list-pc {
+                display: block;
+            }
+            .nav-list-phone {
+                display: none;
+            }
+        }
+
         @media(min-width:991px) {
             .navbar-nav>li {
                 margin-left: 20px;
@@ -295,22 +359,22 @@
 
 <body>
     <header class="main-header navbar-expand-lg display: flex;" style="background-color: #eee;">
-        <div class="navbar" style="display: flex; padding: 0px 95px 0px 15px; margin-bottom: 15px;">
+        <div class="navbar" style="display: flex; padding: 0px 85px 0px 15px; margin-bottom: 15px;">
             <!--style="display: flex; margin: 0px;">-->
             <!--justify-content: space-between; padding: 0px;-->
             <a class="navbar-brand mr-auto" style="line-height: 50px; font-size: 24px;" href="/index_new">Smart Coffee</a>
             <!--<span style="font-size: 24px; line-height: 60px; margin: 0px">發酵槽 F2 控制_感測器抽水雙核隔膜泵</span>-->
-            <nav>
+            <nav class="nav-list-pc">
                 <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">
-
-                    <span id="coffee_title" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">( 網頁標題 )</span>
-
+                    <span id="coffee_title_pc" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">( 網頁標題 )</span>
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_container"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             貨櫃狀態
                         </a>
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown_container">
+                            <a style="line-height: 40px;" class="dropdown-item" href="/demo">DEMO 貨櫃</a>
+                            <div class="dropdown-divider"></div>
                             <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>
                             <div class="dropdown-divider"></div>
                             <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>
@@ -318,7 +382,6 @@
                             <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>
                         </div>
                     </li>
-
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_chart" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="false">
@@ -359,22 +422,20 @@
                             <a style="line-height: 40px;" class="dropdown-item" href="/camera_dry">乾燥貨櫃</a>
                         </div>
                     </li>
-
-
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_user" data-toggle="dropdown"
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_user_pc" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="false">
                             User
                         </a>
-                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_user">
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown_user_pc">
                             {% if status == 0 %}
-                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限：開發人員</a>
+                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限:開發人員</a>
                             <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>
                             {% elif status == 1 %}
-                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限：經銷商</a>
+                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限:經銷商</a>
                             <a style="line-height: 40px;" class="dropdown-item" href="#">修改使用者權限</a>
                             {% elif status == 2 %}
-                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限：使用者</a>
+                            <a style="line-height: 40px;" class="dropdown-item" href="#">權限:使用者</a>
                             {% endif %}
                             <div class="dropdown-divider"></div>
                             <a style="line-height: 40px;" class="dropdown-item" href="/logout">帳號登出</a>
@@ -382,6 +443,33 @@
                     </li>
                 </ul>
             </nav>
+
+            <nav class="nav-list-phone">
+                <ul class="main-menu navbar-right mr-auto" style="display: flex; margin-bottom: 0px;">
+                    <span id="coffee_title_phone" style="line-height: 60px; padding: 0px 15px; font-size: 18px;">( 網頁標題 )</span>
+                    <!-- <li class="nav-item dropdown">
+                        <a style="line-height: 40px;" class="dropdown-item" href="/demo">DEMO 貨櫃</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a style="line-height: 40px;" class="dropdown-item" href="/clean">清洗貨櫃</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a style="line-height: 40px;" class="dropdown-item" href="/ferment">發酵貨櫃</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a style="line-height: 40px;" class="dropdown-item" href="/dry">乾燥貨櫃</a>
+                    </li> -->
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown_user_phone" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="false">
+                            User
+                        </a>
+                    </li>
+                </ul> 
+            </nav>
+
+
+
         </div>
     </header>
 

app/templates/index.html

@@ -248,15 +248,18 @@
 
                 <div style="text-align: center;">
                     {% if params.status == 1 %}
-                        使用者權限：new
+                        使用者權限: new
                     {% elif params.status == 0 %}
-                        使用者權限：admin
+                        使用者權限: admin
                     {% elif params.status == 2 %}
-                        使用者權限：enduser
+                        使用者權限: enduser
                     {% elif params.status == 9 %}
-                        使用者權限：disable
+                        使用者權限: disable
                     {% endif %}
                 </div>
+
+                <div>{{ _('Hello World!') }}</div>
+                <div>{{ _('My name is Max') }}</div>
                 
             </div>
         </form>

app/templates/index_new.html

@@ -17,7 +17,8 @@
 
     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
-    <!-- Rita 網頁 title 旁邊的 icon --> <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->
+    <!-- Rita 網頁 title 旁邊的 icon -->
+    <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->
     <link rel="icon" href="..\static\img\icon-3.ico" type="image/x-icon">
     <!--
     <script src="../static/js/sign_in.js"></script>
@@ -25,72 +26,116 @@
     <link rel="stylesheet" href="../static/css/sign_in.css">
 -->
     <script>
-        $(document).ready(function(){
-            $("#coffee_title").text('Smart Coffee 總貨櫃系統');
+        $(document).ready(function () {
+            $("#coffee_title_pc").text('Smart Coffee 總貨櫃系統');
+            $("#coffee_title_phone").text('總貨櫃系統');
+            loading_status();
         });
+
+        function loading_status(){
+            $.get('/loading/container', '', function (res) {
+                if (res.Clean_container == 'Waiting') {
+                    $("#CleanContainer_status").css("background-color", "#C0C0C0") 
+                } else if (res.Clean_container == 'Working') {
+                    $("#CleanContainer_status").css("background-color", "forestgreen")
+                } else if (res.Clean_container == 'Warning') {
+                    $("#CleanContainer_status").css("background-color", "crimson")
+                }
+
+                if (res.ColorSelect_container == 'Waiting') {
+                    $("#ColorContainer_status").css("background-color", "#C0C0C0") 
+                } else if (res.ColorSelect_container == 'Working') {
+                    $("#ColorContainer_status").css("background-color", "forestgreen")
+                } else if (res.ColorSelect_container == 'Warning') {
+                    $("#ColorContainer_status").css("background-color", "crimson")
+                }
+
+                if (res.Peel_container == 'Waiting') {
+                    $("#PeelContainer_status").css("background-color", "#C0C0C0") 
+                } else if (res.Peel_container == 'Working') {
+                    $("#PeelContainer_status").css("background-color", "forestgreen")
+                } else if (res.Peel_container == 'Warning') {
+                    $("#PeelContainer_status").css("background-color", "crimson")
+                }
+
+                if (res.Ferment_container == 'Waiting') {
+                    $("#FermentContainer_status").css("background-color", "#C0C0C0") 
+                } else if (res.Ferment_container == 'Working') {
+                    $("#FermentContainer_status").css("background-color", "forestgreen")
+                } else if (res.Ferment_container == 'Warning') {
+                    $("#FermentContainer_status").css("background-color", "crimson")
+                }
+
+                if (res.Dry_container == 'Waiting') {
+                    $("#DryContainer_status").css("background-color", "#C0C0C0") 
+                } else if (res.Dry_container == 'Working') {
+                    $("#DryContainer_status").css("background-color", "forestgreen")
+                } else if (res.Dry_container == 'Warning') {
+                    $("#DryContainer_status").css("background-color", "crimson")
+                }
+            }, 'json');
+        }
+
     </script>
-    
+
     <style>
-        .Container_position{
+        /* .Container_position {
             position: absolute;
-            top: 130px;
+            top: 100px;
             left: 125px;
+            width: 1295px;
+            height: 100px;
+        } */
+        /* 桶槽狀態顯示的顏色條 */
+        .div-Container-Status {
+            width: 100%; 
+            height: 20px; 
+            background-color: #c0c0c0; 
+            text-align: center;
+            background-color: black;
+        }
+        /* 各桶槽圖片大小的共同 CSS, 詳細位置數值如下 */
+        .div_Container_position {
+            text-align: center;
+            font-weight: bold;
+            border: 1px aquamarine solid;
         }
-        .CleanContainer_position {
+        #CleanContainer {
             position: absolute;
-            top: 100px;
+            top: 85px;
             left: 115px;
             width: 245px;
-            height: 570px;
-            border-style: solid;
-            border-color: aqua;
+            height: 590px;
         }
-        .ColorContainer_position {
+        #ColorContainer {
             position: absolute;
-            top: 100px;
+            top: 85px;
             left: 370px;
             width: 255px;
-            height: 570px;
-            border-style: solid;
-            border-color: aqua;
+            height: 590px;
         }
-        .PeelContainer_position {
+        #PeelContainer {
             position: absolute;
-            top: 100px;
+            top: 85px;
             left: 635px;
             width: 250px;
-            height: 570px;
-            border-style: solid;
-            border-color: aqua;
+            height: 590px;
         }
-        .FermentContainer_position {
+        #FermentContainer {
             position: absolute;
-            top: 100px;
+            top: 85px;
             left: 900px;
             width: 220px;
-            height: 570px;
-            border-style: solid;
-            border-color: aqua;
+            height: 590px;
         }
-        .DryContainer_position {
+        #DryContainer {
             position: absolute;
-            top: 100px;
+            top: 85px;
             left: 1135px;
             width: 280px;
-            height: 570px;
-            border-style: solid;
-            border-color: aqua;
-        }
-        .footer{
-            position: absolute;
-            bottom: 0px;
-            width: 100%;
-            background-color: #eee;
-            text-align: center;
+            height: 590px;
         }
     </style>
-    
-
 </head>
 
 <body>
@@ -99,87 +144,74 @@
             <!-- 匯入共同使用的 header.html 內容 -->
             {% include 'header.html' %}
         </div>
-    
-        <!--
-            background-color:rgb(0, 238, 255);
-        -->
-        <!--
-        <div style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 30px;">
-            Smart Coffee HOME
-        </div>
-        -->
-        <div>
+
+        <div style="height: 605px;">
+            <br>
+            <br>
             <!-- 底圖 各貨櫃示意圖 -->
-            <div id="Container_pic" class="Container_position" >
-                <img src="../static/img/Coffee_home.png" width="1300px" style="margin: auto;">
-            </div>
+            <!-- <center><img src="../static/img/Coffee_home.png" style="margin: auto; width: 1300px;"></center> -->
 
             <!-- 清洗浮選槽 -->
-            <div id="CleanContainer" tabindex="0" class="CleanContainer_position" role="button">
+            <div id="CleanContainer" tabindex="0" class="div_Container_position" role="button">
                 清洗浮選狀態
-                <div id="CleanContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+                <div id="CleanContainer_status" class="div-Container-Status"></div>
+                <img src="../static/img/clean.png" width="100%">
             </div>
 
             <!-- 色選機 -->
-            <div id="ColorContainer" tabindex="0" class="ColorContainer_position" role="button">
+            <div id="ColorContainer" tabindex="0" class="div_Container_position" role="button">
                 色選機狀態
-                <div id="ColorContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+                <div id="ColorContainer_status" class="div-Container-Status"></div>
+                <img src="../static/img/color.png" width="100%">
             </div>
 
             <!-- 脫皮機 -->
-            <div id="PeelContainer" tabindex="0" class="PeelContainer_position" role="button">
+            <div id="PeelContainer" tabindex="0" class="div_Container_position" role="button">
                 脫皮機狀態
-                <div id="PeelContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+                <div id="PeelContainer_status" class="div-Container-Status"></div>
+                <img src="../static/img/peel.png" width="100%">
             </div>
 
             <!-- 發酵槽 -->
-            <div id="FermentContainer" tabindex="0" class="FermentContainer_position" role="button">
+            <div id="FermentContainer" tabindex="0" class="div_Container_position" role="button">
                 發酵槽狀態
-                <div id="FermentContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+                <div id="FermentContainer_status" class="div-Container-Status"></div>
+                <img src="../static/img/ferment.png" width="100%">
             </div>
             
             <!-- 乾燥槽 -->
-            <div id="DryContainer" tabindex="0" class="DryContainer_position" role="button">
+            <div id="DryContainer" tabindex="0" class="div_Container_position" role="button">
                 乾燥槽狀態
-                <div id="DryContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+                <div id="DryContainer_status" class="div-Container-Status"></div>
+                <img src="../static/img/dry.png" width="100%">
             </div>
-            
+
+            <br>
+            <br>
+
         </div>
         <script>
             var button_CleanContainer = document.getElementById('CleanContainer');
-            button_CleanContainer.addEventListener('click', function(){
-                window.location.href='/clean';
+            button_CleanContainer.addEventListener('click', function () {
+                window.location.href = '/clean';
             });
-
             var button_ColorContainer = document.getElementById('ColorContainer');
-            button_ColorContainer.addEventListener('click', function(){
-                window.location.href='/clean';
+            button_ColorContainer.addEventListener('click', function () {
+                window.location.href = '/clean';
             });
-
             var button_PeelContainer = document.getElementById('PeelContainer');
-            button_PeelContainer.addEventListener('click', function(){
-                window.location.href='/clean';
+            button_PeelContainer.addEventListener('click', function () {
+                window.location.href = '/clean';
             });
-
             var button_FermentContainer = document.getElementById('FermentContainer');
-            button_FermentContainer.addEventListener('click', function(){
-                window.location.href='/ferment';
+            button_FermentContainer.addEventListener('click', function () {
+                window.location.href = '/ferment';
             });
-
             var button_DryContainer = document.getElementById('DryContainer');
-            button_DryContainer.addEventListener('click', function(){
-                window.location.href='/dry';
+            button_DryContainer.addEventListener('click', function () {
+                window.location.href = '/dry';
             });
         </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 內容 -->

app/templates/index_new_1008原設計備份.html

@@ -0,0 +1,192 @@
+<!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>
+    <!-- Rita 網頁 title 旁邊的 icon --> <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->
+    <link rel="icon" href="..\static\img\icon-3.ico" type="image/x-icon">
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+-->
+    <script>
+        $(document).ready(function(){
+            $("#coffee_title").text('Smart Coffee 總貨櫃系統');
+        });
+    </script>
+    
+    <style>
+        .Container_position{
+            position: absolute;
+            top: 130px;
+            left: 125px;
+        }
+        .CleanContainer_position {
+            position: absolute;
+            top: 100px;
+            left: 115px;
+            width: 245px;
+            height: 570px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .ColorContainer_position {
+            position: absolute;
+            top: 100px;
+            left: 370px;
+            width: 255px;
+            height: 570px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .PeelContainer_position {
+            position: absolute;
+            top: 100px;
+            left: 635px;
+            width: 250px;
+            height: 570px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .FermentContainer_position {
+            position: absolute;
+            top: 100px;
+            left: 900px;
+            width: 220px;
+            height: 570px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .DryContainer_position {
+            position: absolute;
+            top: 100px;
+            left: 1135px;
+            width: 280px;
+            height: 570px;
+            border-style: solid;
+            border-color: aqua;
+        }
+        .footer{
+            position: absolute;
+            bottom: 0px;
+            width: 100%;
+            background-color: #eee;
+            text-align: center;
+        }
+    </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: center; margin-top: 30px; font-size: 24px; margin-bottom: 30px;">
+            Smart Coffee HOME
+        </div>
+        -->
+        <div>
+            <!-- 底圖 各貨櫃示意圖 -->
+            <div id="Container_pic" class="Container_position" >
+                <img src="../static/img/Coffee_home.png" width="1300px" style="margin: auto;">
+            </div>
+
+            <!-- 清洗浮選槽 -->
+            <div id="CleanContainer" tabindex="0" class="CleanContainer_position" role="button">
+                清洗浮選狀態
+                <div id="CleanContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 色選機 -->
+            <div id="ColorContainer" tabindex="0" class="ColorContainer_position" role="button">
+                色選機狀態
+                <div id="ColorContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 脫皮機 -->
+            <div id="PeelContainer" tabindex="0" class="PeelContainer_position" role="button">
+                脫皮機狀態
+                <div id="PeelContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+
+            <!-- 發酵槽 -->
+            <div id="FermentContainer" tabindex="0" class="FermentContainer_position" role="button">
+                發酵槽狀態
+                <div id="FermentContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+            
+            <!-- 乾燥槽 -->
+            <div id="DryContainer" tabindex="0" class="DryContainer_position" role="button">
+                乾燥槽狀態
+                <div id="DryContainer_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
+            </div>
+            
+        </div>
+        <script>
+            var button_CleanContainer = document.getElementById('CleanContainer');
+            button_CleanContainer.addEventListener('click', function(){
+                window.location.href='/clean';
+            });
+
+            var button_ColorContainer = document.getElementById('ColorContainer');
+            button_ColorContainer.addEventListener('click', function(){
+                window.location.href='/clean';
+            });
+
+            var button_PeelContainer = document.getElementById('PeelContainer');
+            button_PeelContainer.addEventListener('click', function(){
+                window.location.href='/clean';
+            });
+
+            var button_FermentContainer = document.getElementById('FermentContainer');
+            button_FermentContainer.addEventListener('click', function(){
+                window.location.href='/ferment';
+            });
+
+            var button_DryContainer = document.getElementById('DryContainer');
+            button_DryContainer.addEventListener('click', function(){
+                window.location.href='/dry';
+            });
+        </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/index_new_1008橫式狀態.html

@@ -0,0 +1,208 @@
+<!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>
+    <!-- Rita 網頁 title 旁邊的 icon --> <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->
+    <link rel="icon" href="..\static\img\icon-3.ico" type="image/x-icon">
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+-->
+    <script>
+        $(document).ready(function(){
+            $("#coffee_title").text('Smart Coffee 總貨櫃系統');
+        });
+
+        // .Container_position{
+        //     position: absolute;
+        //     top: 130px;
+        //     left: 125px;
+        // }
+
+        // border-style: solid;
+        // border-color: crimson;
+
+        
+        // border-style: solid;
+        // border-color: aqua;
+    </script>
+    
+    <style>
+        .Container_position{    
+            position: absolute;
+            top: 140px;
+            left: 125px;
+        }
+        
+        .CleanContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 115px;
+            width: 245px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .ColorContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 370px;
+            width: 255px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .PeelContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 635px;
+            width: 250px;
+            height: 590px;
+
+            text-align: center;
+            font-weight: bold;
+        }
+        .FermentContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 900px;
+            width: 220px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+        .DryContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 1135px;
+            width: 280px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+    </style>
+    
+
+</head>
+
+<body>
+    <!-- .footer{
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        background-color: #eee;
+        text-align: center;
+        text-align: center;
+        font-weight: bold;
+    } -->
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+    
+        <!--
+            background-color:rgb(0, 238, 255);
+        -->
+        <!--
+        <div style="text-align: center; margin-top: 30px; font-size: 24px; margin-bottom: 30px;">
+            Smart Coffee HOME
+        </div>
+        -->
+        <div>
+            <!-- 底圖 各貨櫃示意圖 -->
+            <div id="Container_pic" class="Container_position" >
+                <img src="../static/img/Coffee_home.png" id="CoffeeHome_pic" width="1295px" >
+            </div>
+
+            <!-- 清洗浮選槽 -->
+            <div id="CleanContainer" tabindex="0" class="CleanContainer_position" role="button">
+                清洗浮選狀態
+                <div id="CleanContainer_status" style="width: 100%; height: 20px; background-color: #c0c0c0; text-align: center;"></div>
+            </div>
+
+            <!-- 色選機 -->
+            <div id="ColorContainer" tabindex="0" class="ColorContainer_position" role="button">
+                色選機狀態
+                <div id="ColorContainer_status" style="width: 100%; height: 20px; background-color: #c0c0c0; text-align: center;"></div>
+            </div>
+
+            <!-- 脫皮機 -->
+            <div id="PeelContainer" tabindex="0" class="PeelContainer_position" role="button">
+                脫皮機狀態
+                <div id="PeelContainer_status" style="width: 100%; height: 20px; background-color: #c0c0c0; text-align: center;"></div>
+            </div>
+
+            <!-- 發酵槽 -->
+            <div id="FermentContainer" tabindex="0" class="FermentContainer_position" role="button">
+                發酵槽狀態
+                <div id="FermentContainer_status" style="width: 100%; height: 20px; background-color: forestgreen; text-align: center;"></div>
+            </div><!-- 乾燥槽 -->
+            <div id="DryContainer" tabindex="0" class="DryContainer_position" role="button">
+                乾燥槽狀態
+                <div id="DryContainer_status" style="width: 100%; height: 20px; background-color: forestgreen; text-align: center;"></div>
+            </div>
+            
+        </div>
+        <script>
+            var button_CleanContainer = document.getElementById('CleanContainer');
+            button_CleanContainer.addEventListener('click', function(){
+                window.location.href='/clean';
+            });
+
+            var button_ColorContainer = document.getElementById('ColorContainer');
+            button_ColorContainer.addEventListener('click', function(){
+                window.location.href='/clean';
+            });
+
+            var button_PeelContainer = document.getElementById('PeelContainer');
+            button_PeelContainer.addEventListener('click', function(){
+                window.location.href='/clean';
+            });
+
+            var button_FermentContainer = document.getElementById('FermentContainer');
+            button_FermentContainer.addEventListener('click', function(){
+                window.location.href='/ferment';
+            });
+
+            var button_DryContainer = document.getElementById('DryContainer');
+            button_DryContainer.addEventListener('click', function(){
+                window.location.href='/dry';
+            });
+        </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/index_new_1118測試備份footer未置底.html

@@ -0,0 +1,187 @@
+<!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>
+    <!-- Rita 網頁 title 旁邊的 icon -->
+    <!-- 參考資料 https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26839/ -->
+    <link rel="icon" href="..\static\img\icon-3.ico" type="image/x-icon">
+    <!--
+    <script src="../static/js/sign_in.js"></script>
+
+    <link rel="stylesheet" href="../static/css/sign_in.css">
+-->
+    <script>
+        $(document).ready(function () {
+            $("#coffee_title_pc").text('Smart Coffee 總貨櫃系統');
+            $("#coffee_title_phone").text('總貨櫃系統');
+        });
+
+        // .Container_position{
+        //     position: absolute;
+        //     top: 130px;
+        //     left: 125px;
+        // }
+
+        // border-style: solid;
+        // border-color: crimson;
+
+
+        // border-style: solid;
+        // border-color: aqua;
+    </script>
+
+    <style>
+        .Container_position {
+            position: absolute;
+            top: 140px;
+            left: 125px;
+        }
+
+        .CleanContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 115px;
+            width: 245px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .ColorContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 370px;
+            width: 255px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .PeelContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 635px;
+            width: 250px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .FermentContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 900px;
+            width: 220px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .DryContainer_position {
+            position: absolute;
+            top: 90px;
+            left: 1135px;
+            width: 280px;
+            height: 590px;
+            text-align: center;
+            font-weight: bold;
+        }
+    </style>
+
+
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+
+        <div>
+            <!-- 底圖 各貨櫃示意圖 -->
+            <div id="Container_pic" class="Container_position">
+                <img src="../static/img/Coffee_home.png" id="CoffeeHome_pic" width="1295px">
+            </div>
+
+            <!-- 清洗浮選槽 -->
+            <div id="CleanContainer" tabindex="0" class="CleanContainer_position" role="button">
+                清洗浮選狀態
+                <div id="CleanContainer_status"
+                    style="width: 100%; height: 20px; background-color: #c0c0c0; text-align: center;"></div>
+            </div>
+
+            <!-- 色選機 -->
+            <div id="ColorContainer" tabindex="0" class="ColorContainer_position" role="button">
+                色選機狀態
+                <div id="ColorContainer_status"
+                    style="width: 100%; height: 20px; background-color: #c0c0c0; text-align: center;"></div>
+            </div>
+
+            <!-- 脫皮機 -->
+            <div id="PeelContainer" tabindex="0" class="PeelContainer_position" role="button">
+                脫皮機狀態
+                <div id="PeelContainer_status"
+                    style="width: 100%; height: 20px; background-color: #c0c0c0; text-align: center;"></div>
+            </div>
+
+            <!-- 發酵槽 -->
+            <div id="FermentContainer" tabindex="0" class="FermentContainer_position" role="button">
+                發酵槽狀態
+                <div id="FermentContainer_status"
+                    style="width: 100%; height: 20px; background-color: forestgreen; text-align: center;"></div>
+            </div><!-- 乾燥槽 -->
+            <div id="DryContainer" tabindex="0" class="DryContainer_position" role="button">
+                乾燥槽狀態
+                <div id="DryContainer_status"
+                    style="width: 100%; height: 20px; background-color: forestgreen; text-align: center;"></div>
+            </div>
+
+        </div>
+        <script>
+            var button_CleanContainer = document.getElementById('CleanContainer');
+            button_CleanContainer.addEventListener('click', function () {
+                window.location.href = '/clean';
+            });
+            var button_ColorContainer = document.getElementById('ColorContainer');
+            button_ColorContainer.addEventListener('click', function () {
+                window.location.href = '/clean';
+            });
+            var button_PeelContainer = document.getElementById('PeelContainer');
+            button_PeelContainer.addEventListener('click', function () {
+                window.location.href = '/clean';
+            });
+            var button_FermentContainer = document.getElementById('FermentContainer');
+            button_FermentContainer.addEventListener('click', function () {
+                window.location.href = '/ferment';
+            });
+            var button_DryContainer = document.getElementById('DryContainer');
+            button_DryContainer.addEventListener('click', function () {
+                window.location.href = '/dry';
+            });
+        </script>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+    </div>
+
+</body>
+
+</html>

app/templates/peel_container_tank.html

@@ -0,0 +1,405 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script language="JavaScript">
+        var ptid = '{{tid}}';
+        $(document).ready(function(){
+            $("#coffee_title_pc").text('P' + ptid + ' 脫皮機操作介面');
+            $("#coffee_title_phone").text('P' + ptid + ' 操作介面');
+        });
+    </script>
+
+    <script>
+        // 清洗浮選 致動器開關
+        var tank_num = '{{tid}}';
+
+        // 入料 真空吸料機
+        function inputVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "P" + tank_num, "command": "input_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "P" + tank_num, "command": "input_vacuum_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=input_vacuum_status]:checked");  // 這裡面是 jQuery 撈取資料的方法, jQuery 常使用到 $ 錢字號
+                console.log('check：', check);
+                //大於0代表有被選中, 如果有多個可以呈現勾取的項目數量
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-62").prop('checked', false); // 確認是否勾選
+                    if (!confirm("你確定要開啟入料儲豆槽真空吸料機嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-62").prop('checked', true);
+                    if (!confirm("你確定要關閉入料儲豆槽真空吸料機嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "P" + tank_num, "command": "input_vacuum_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-62").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-62").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 桶內 真空吸料機
+        function tankVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "P" + tank_num, "command": "tank_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "P" + tank_num, "command": "tank_vacuum_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_vacuum_status]:checked");
+                console.log('check：', check);
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-65").prop('checked', false);
+                    if (!confirm("你確定要開啟真空吸料機嗎?")) {
+                        return false;
+                    };
+
+                } else {
+                    $("#cmn-toggle-65").prop('checked', true);
+                    if (!confirm("你確定要關閉真空吸料機嗎?")) {
+                        return false;
+                    };
+                };
+
+                var data = { "tank_num": "P" + tank_num, "command": "tank_vacuum_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-65").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-65").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+
+        // 馬達
+        function tankMotor_set() {
+            var motor_data = $("#motor_rpm_data").val();
+            console.log("motor_data: " + motor_data)
+            if (motor_data == '') {
+                //$("#cmn-toggle-20").prop('checked', false);
+                alert("請先輸入要運轉的值!");
+                return false;
+            } else if (motor_data == 0) {
+                alert("轉速 0 為關閉馬達");
+            } else if (Number(motor_data) < -50 || Number(motor_data) > 50 || !Number(motor_data)) {
+                // 
+                //$("#cmn-toggle-20").prop('checked', false);
+                alert("您輸入的值已超過範圍，請重新輸入!" + !Number(motor_data));
+                return false;
+            };
+            var value = "off";
+            //var check = $("input[name=peeling-machine-on]:checked");
+            if (motor_data != 0) {
+                value = motor_data;
+                //$("#cmn-toggle-20").prop('checked', false);
+                if (!confirm("你確定要開啟攪拌馬達，運轉速度為 " + motor_data + " RPM 嗎?")) {
+                    return false;
+                };
+            } else {
+                //$("#cmn-toggle-20").prop('checked', true);
+                if (!confirm("你確定要關閉攪拌馬達嗎?")) {
+                    return false;
+                };
+            };
+
+            var data = { "tank_num": "P" + tank_num, "command": "tank_motor_status", "value": motor_data };
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    //$("#cmn-toggle-14").prop('checked', true); // prop 設置元素屬型與元素值, 設定 checked 屬性為 true
+                    setTimeout("alert('攪拌馬達_開啟成功!')", 500); // 設定時間執行函式 delay(500), 只執行一次
+                    var timer = setInterval(Rotate, 60000); // 啟動後會在 60000 毫秒(更新時間一分鐘)內不斷執行 (原因須配合更新時間？)
+                } else if (res == 'off') {
+                    //$("#cmn-toggle-14").prop('checked', false);
+                    setTimeout("alert('攪拌馬達_關閉成功!')", 500);
+                    clearInterval(timer);                   // 取消 timer 的不斷執行
+                    $("#motor_rpm_status").text('');        // 設置 #motor_rpm_status 的文字為空, #井字號
+                } else {
+                    alert(res);
+                };
+            }, 'text')
+        };
+
+        function tankMotor(params) {
+            var data = { "tank_num": "P" + tank_num, "command": "tank_motor_status", "value": params };
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    var timer = setInterval(Rotate, 60000);
+                } else if (res == 'off') {
+                    clearInterval(timer);
+                    $("#motor_rpm_status").text('');
+                } else {
+                };
+            }, 'text')
+        };
+
+        function Rotate() {
+            $.get('/peel', '', function (res) {
+                //console.log(res.peeling);
+                $("#motor_rpm_status").text(res.peeling + ' rpm(每1分鐘更新一次)');
+            }, 'json');
+
+            setTimeout(function () { location.reload(); }, 500);
+        };
+
+        // 馬達 反轉
+        function tankMotor_Reverse() {
+            $("#input").attr('placeholder');
+            var tankMotor_now = ($('#motor_rpm_data').attr('placeholder'))*-1
+            console.log('tankMotor_now: ' + tankMotor_now)
+            tankMotor(String(tankMotor_now))
+            setTimeout(function () { location.reload(); }, 3*1000);
+        }
+
+
+        // 出料 真空吸料機
+        function outputVacuum(params) {
+            if (params == '1') {
+                var data = { "tank_num": "P" + tank_num, "command": "output_vacuum_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "P" + tank_num, "command": "output_vacuum_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=output_vacuum_status]:checked");
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-71").prop('checked', false);
+                    if (!confirm("你確定要開啟出料儲豆槽真空吸料機嗎?")) {
+                        return false;
+                    };
+                } else {
+                    $("#cmn-toggle-71").prop('checked', true);
+                    if (!confirm("你確定要關閉出料儲豆槽真空吸料機嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "P" + tank_num, "command": "output_vacuum_status", "value": status };
+            }
+            $.post('/mqtt/{{tid}}', data, function (res) {
+                if (res == 'on') {
+                    $("#cmn-toggle-71").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-71").prop('checked', false);
+                } else {
+                };
+            }, 'text')
+        }
+    </script>
+
+    <script language="JavaScript">
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(ptid)} , webupdate_time * 1000);
+        }
+    </script>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        
+        <h4>致動器</h4>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
+            <tr>
+                <td style="color:red;">Valve</td>
+                <td>真空吸料機</td>
+                <td>馬達</td>
+            </tr>
+            <tr>
+                <td>
+                    <span style="color:#C0C0C0;">off</span>
+                    <span style="color:#008CBA;">on</span>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-64">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_vacuum== 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-65" checked
+                                name="tank_vacuum_status" value="ON" onclick="tankVacuum()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-65"
+                                name="tank_vacuum_status" value="OFF" onclick="tankVacuum()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-65"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-66">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <input type="text" class="input-text" id="motor_rpm_data" placeholder="{{tank_motor}}" value="">RPM<br>
+                    <input type="button" class="input-button" value="Confirm" name="tank_motor_status" onclick="tankMotor_set()">
+                </td>
+            </tr>
+            <tr>
+                <td><span style="color:#008CBA;"><b>ON</b></span></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankVacuum('1')"></td>
+                <td>
+                    <input type="button" class="input-button-on" value="40" onclick="tankMotor('40')">
+                    <input type="button" class="input-button-on" value="-40" onclick="tankMotor('-40')">
+                    <input type="button" class="input-button-on" value="20" onclick="tankMotor('20')">
+                    <input type="button" class="input-button-on" value="Rev." onclick="tankMotor_Reverse()">
+                </td>
+            </tr>
+            <tr>
+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankVacuum('0')"></td>
+                <td><input type="button" class="input-button-off" value="0" onclick="tankMotor('0')"></td>
+            </tr>
+        </table>
+
+        <br>
+
+        <h4>感測器</h4>
+        <table border="1" class="table-all" cellpadding="3">
+            <tr>
+                <td style="background-color:#f3f3f3">
+                    生豆高度
+                </td>
+                <td><span id="UltraSonic_t_status">{{tank_UltraSonic.UltraSonic}}</span> 公分</td>
+                <td style="background-color:#f3f3f3">
+                    馬達編碼器
+                </td>
+                <td><span id="motorEncoder_t_status">{{tank_motorEncoder.motorEncoder}}</span> RPM</td>
+            </tr>
+        </table>
+
+        <br>
+
+        <h4>排程測試</h4>
+        <table border="1" class="table-all" cellpadding="3">
+            <tr>
+                <td>生豆高度
+                    <input type="text" class="input-text" name="Peel_Tank_bean_height" value="20">公分<br>
+                    馬達轉速
+                    <input type="text" class="input-text" name="Peel_Tank_motor_rpm" value="30">rpm<br>
+                    吸料
+                    <input type="text" class="input-text" name="Peel_Tank_vacuumON_time" value="10">秒,
+                    放料
+                    <input type="text" class="input-text" name="Peel_Tank_vacuumOFF_time" value="10">秒<br>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_testing()">
+                        <u>[測試] 脫皮自動化_狀態判斷</u></button>
+                    <button style="margin: 5px 10px 0px 10px;" type="submit" class="btn btn-primary" onclick="peel_auto_status_stop()">
+                        <u>狀態判斷_停止</u></button>
+                    <script>
+                        var peel_status_process = 0;
+                        var data;
+
+                        function getting_parameters_P(){
+                            var Peel_Tank_bean_height = $('input[name=Peel_Tank_bean_height]').val();
+                            var Peel_Tank_motor_rpm = $('input[name=Peel_Tank_motor_rpm]').val();
+                            var Peel_Tank_vacuumON_time = $('input[name=Peel_Tank_vacuumON_time]').val();
+                            var Peel_Tank_vacuumOFF_time = $('input[name=Peel_Tank_vacuumOFF_time]').val();
+
+                            data = {"Peel_Tank_bean_height":Peel_Tank_bean_height,
+                                        "Peel_Tank_motor_rpm":Peel_Tank_motor_rpm,
+                                        "Peel_Tank_vacuumON_time":Peel_Tank_vacuumON_time,
+                                        "Peel_Tank_vacuumOFF_time":Peel_Tank_vacuumOFF_time
+                                        }
+                        }
+
+                        function peel_auto_status_stop(){
+                            clearInterval(peel_status_interval)
+                            console.log("------- 狀態自動化判斷 停止 -------")
+                        }
+
+                        function peel_auto_status_testing(){
+                            console.log("------- 狀態自動化判斷 開始 -------")
+                            getting_parameters_P()
+
+                            // 更新桶槽狀態
+                            peel_status_interval = setInterval(peel_auto_status, 5*1000);
+
+                            function peel_auto_status(){
+                                if (peel_status_process == 1) { return }
+
+                                peel_status_process = 1;
+                                $.get('/peel_auto_status', data, function (res){
+                                    P1 = res.Peel_Tank_1
+                                    PO1 = res.Peel_Output_1
+                                    console.log('P1: ' + P1)
+                                    console.log('PO1: ' + PO1)
+
+                                    peel_status_process = 0;
+                                }, 'json');
+                            }
+
+                        }
+                    </script>
+                </td>
+            </tr>
+        </table>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+        
+    </div>
+</body>
+
+<script>
+    // jQuery 更新感測器致動器狀態
+    function WebUpdate(ptid) {
+        $.get('/loading/P' + ptid, '', function (res) {
+            if (res.tank_vacuum == 0) {
+                $("#cmn-toggle-65").prop('checked', false);
+            } else if (res.tank_vacuum == 1) {
+                $("#cmn-toggle-65").prop('checked', true);
+            }
+
+            $("#motor_rpm_data").attr("placeholder", res.tank_motor);
+            // console.log("res.tank_motor"+res.tank_motor)
+            
+        }, 'json');
+    }
+</script>
+
+</html>

app/templates/reclaimedwater_tank.html

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- 新 Bootstrap4 核心 CSS 文件 -->
+    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
+    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
+    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
+    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
+    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
+    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
+    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
+    <!--可用來建立使用者小圖示-->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script language="JavaScript">
+        var rtid = '{{tid}}';
+        $(document).ready(function(){
+            $("#coffee_title_pc").text('R' + rtid + ' 中水桶操作介面');
+            $("#coffee_title_phone").text('R' + rtid + ' 中水桶操作介面');
+        });
+
+        var WebUpdate_set = setInterval(function(){WebUpdate(rtid)} , 10 * 1000);
+    </script>
+
+    <script>
+        // 清水入水電磁閥
+        function tankSolenoidWaterIn(params) {
+            if (params == '1') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_water_in_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_water_in_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_water_in_status]:checked");
+                console.log('check：', check);
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-41").prop('checked', false);
+                    if (!confirm("你確定要開啟清水入水電磁閥嗎?")) {
+                        return false;
+                    };
+
+                } else {
+                    $("#cmn-toggle-41").prop('checked', true);
+                    if (!confirm("你確定要關閉清水入水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_water_in_status", "value": status };
+            }
+            $.post('/mqtt/1', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-41").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-41").prop('checked', false);
+                } else {
+                    console.log(res)
+                };
+            }, 'text')
+        }
+
+        // 廢水出水電磁閥
+        function tankSolenoidWaterOut(params) {
+            if (params == '1') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_water_out_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_water_out_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_water_out_status]:checked");
+                console.log('check：', check);
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-44").prop('checked', false);
+                    if (!confirm("你確定要開啟廢水出水電磁閥嗎?")) {
+                        return false;
+                    };
+
+                } else {
+                    $("#cmn-toggle-44").prop('checked', true);
+                    if (!confirm("你確定要關閉廢水出水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_water_out_status", "value": status };
+            }
+            $.post('/mqtt/1', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-44").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-44").prop('checked', false);
+                } else {
+                    console.log(res)
+                };
+            }, 'text')
+        }
+
+        // 中水出水電磁閥
+        function tankSolenoidReclaimedOut(params) {
+            if (params == '1') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_reclaimed_out_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_reclaimed_out_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_solenoid_reclaimed_out_status]:checked");
+                console.log('check：', check);
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-47").prop('checked', false);
+                    if (!confirm("你確定要開啟中水出水電磁閥嗎?")) {
+                        return false;
+                    };
+
+                } else {
+                    $("#cmn-toggle-47").prop('checked', true);
+                    if (!confirm("你確定要關閉中水出水電磁閥嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_solenoid_reclaimed_out_status", "value": status };
+            }
+            $.post('/mqtt/1', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-47").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-47").prop('checked', false);
+                } else {
+                    console.log(res)
+                };
+            }, 'text')
+        }
+
+        // 幫浦(清洗槽入水)
+        function tankPumpCleanwaterIn(params) {
+            if (params == '1') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_pump_cleanwater_in_status", "value": "on" };
+            } else if (params == '0') {
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_pump_cleanwater_in_status", "value": "off" };
+            } else {
+                var status = "off";
+                var check = $("input[name=tank_pump_cleanwater_in_status]:checked");
+                console.log('check：', check);
+                //大於0代表有被選中
+                if (check.length > 0) {
+                    status = "on";
+                    $("#cmn-toggle-50").prop('checked', false);
+                    if (!confirm("你確定要開啟幫浦(清洗槽入水)嗎?")) {
+                        return false;
+                    };
+
+                } else {
+                    $("#cmn-toggle-50").prop('checked', true);
+                    if (!confirm("你確定要關閉幫浦(清洗槽入水)嗎?")) {
+                        return false;
+                    };
+                };
+                var data = { "tank_num": "ReclaimedWaterTank", "command": "tank_pump_cleanwater_in_status", "value": status };
+            }
+            $.post('/mqtt/1', data, function (res) {
+                console.log('data:', data)
+                if (res == 'on') {
+                    $("#cmn-toggle-50").prop('checked', true);
+                } else if (res == 'off') {
+                    $("#cmn-toggle-50").prop('checked', false);
+                } else {
+                    console.log(res)
+                };
+            }, 'text')
+        }
+
+        
+
+    </script>
+
+    <script language="JavaScript">
+        function changeUpdate() {
+            clearInterval(WebUpdate_set);
+
+            var webupdate_time = $("input[name=webupdate_time]").val()
+            console.log('webupdate_time' + webupdate_time)
+            WebUpdate_set = setInterval(function(){WebUpdate(rtid)} , webupdate_time * 1000);
+        }
+    </script>
+</head>
+
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+        
+        <h4>致動器</h4>
+        <table border="1" class="table-all" cellpadding="3" style="text-align: center;">
+            <tr>
+                <td style="color:red;">Valve</td>
+                <td>清水入水<br>電磁閥</td>
+                <td>中水出水<br>電磁閥</td>
+                <td>廢水出水<br>電磁閥</td>
+                <td>入水清洗槽<br>幫浦</td>
+            </tr>
+            <tr>
+                <td>
+                    <span style="color:#C0C0C0;">off</span>
+                    <span style="color:#008CBA;">on</span>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-40">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_solenoid_water_in == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-41" checked
+                                name="tank_solenoid_water_in_status" value="ON" onclick="tankSolenoidWaterIn()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-41"
+                                name="tank_solenoid_water_in_status" value="OFF" onclick="tankSolenoidWaterIn()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-41"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-42">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-46">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_solenoid_reclaimed_out == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-47" checked
+                                name="tank_solenoid_reclaimed_out_status" value="ON" onclick="tankSolenoidReclaimedOut()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-47"
+                                name="tank_solenoid_reclaimed_out_status" value="OFF" onclick="tankSolenoidReclaimedOut()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-47"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-48">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-43">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_solenoid_water_out == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-44" checked
+                                name="tank_solenoid_water_out_status" value="ON" onclick="tankSolenoidWaterOut()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-44"
+                                name="tank_solenoid_water_out_status" value="OFF" onclick="tankSolenoidWaterOut()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-44"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-45">
+                        </div>
+                    </div>
+                </td>
+                <td>
+                    <div class="switch_div">
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round" id="cmn-toggle-49">
+                        </div>
+                        <div class="switch text-center">
+                            {% if tank_pump_reclaimed_out == 1 %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-50" checked
+                                name="tank_pump_reclaimed_out_status" value="ON" onclick="tankPumpCleanwaterIn()">
+                            {% else %}
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-round-flat" id="cmn-toggle-50"
+                                name="tank_pump_reclaimed_out_status" value="OFF" onclick="tankPumpCleanwaterIn()">
+                            {% endif %}
+                            <label class="label_ActuatorStatus" for="cmn-toggle-50"></label>
+                        </div>
+                        <div class="switch">
+                            <input type="checkbox" class="cmn-toggle cmn-toggle-yes-no" id="cmn-toggle-51">
+                        </div>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td><span style="color:#008CBA;"><b>ON</b></span></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterIn('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidReclaimedOut('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankSolenoidWaterOut('1')"></td>
+                <td><input type="button" class="input-button-on" value="ON" onclick="tankPumpCleanwaterIn('1')"></td>
+            </tr>
+            <tr>
+                <td><span style="color:#C0C0C0;"><b>OFF</b></span></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterIn('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidReclaimedOut('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankSolenoidWaterOut('0')"></td>
+                <td><input type="button" class="input-button-off" value="OFF" onclick="tankPumpCleanwaterIn('0')"></td>
+            </tr>
+        </table>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+        
+    </div>
+</body>
+
+<script>
+    // jQuery 更新感測器致動器狀態
+    function WebUpdate(rtid) {
+        $.get('/loading/R' + rtid, '', function (res) {
+            if (res.tank_solenoid_water_in == 0) {
+                $("#cmn-toggle-41").prop('checked', false);
+            } else if (res.tank_solenoid_water_in == 1) {
+                $("#cmn-toggle-41").prop('checked', true);
+            }
+
+            if (res.tank_solenoid_water_out == 0) {
+                $("#cmn-toggle-44").prop('checked', false);
+            } else if (res.tank_solenoid_water_out == 1) {
+                $("#cmn-toggle-44").prop('checked', true);
+            }
+
+            if (res.tank_solenoid_reclaimed_out == 0) {
+                $("#cmn-toggle-47").prop('checked', false);
+            } else if (res.tank_solenoid_reclaimed_out == 1) {
+                $("#cmn-toggle-47").prop('checked', true);
+            }
+
+            if (res.tank_pump_reclaimed_out == 0) {
+                $("#cmn-toggle-50").prop('checked', false);
+            } else if (res.tank_pump_reclaimed_out == 1) {
+                $("#cmn-toggle-50").prop('checked', true);
+            }
+            
+        }, 'json');
+    }
+</script>
+
+</html>

app/templates/sensor_chart_D.html

@@ -34,7 +34,8 @@
         var sensor_name = '{{sensor_name}}';
         var tid = '{{tid}}';
         $(document).ready(function(){
-            $("#coffee_title").text(tank + tid + ' 乾燥槽感測器圖表');
+            $("#coffee_title_pc").text(tank + tid + ' 乾燥槽感測器圖表');
+            $("#coffee_title_phone").text(tank + tid + ' 感測器');
         });
 
     </script>
@@ -47,15 +48,6 @@
             {% include 'header.html' %}
         </div>
 
-        <!--
-        <a href="/dry">返回乾燥槽介面</a>
-        <div style="text-align: center; margin-top:0px; font-size: 24px;">
-            Smart Coffee
-        </div>
-
-        <form action="/chart/SHT11_Temp/{{tid}}" method="post">
-            <div class="form-group" style="margin-top: 30px; text-align: center;">
-        -->
         <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
             <tr>
                 <td>
@@ -458,14 +450,6 @@
             </tr>
         </table>
 
-        <br>
-        <br>
-
-        <!--
-            </div>
-        </form>
-        -->
-
         <div id="coffee_footer">
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}

app/templates/sensor_chart_DI.html

@@ -34,7 +34,8 @@
         var sensor_name = '{{sensor_name}}';
         var tid = '{{tid}}';
         $(document).ready(function(){
-            $("#coffee_title").text(tank + tid + ' 乾燥入料儲豆槽感測器圖表');
+            $("#coffee_title_pc").text(tank + tid + ' 乾燥入料儲豆槽感測器圖表');
+            $("#coffee_title_phone").text(tank + tid + ' 感測器');
         });
     </script>
 </head>
@@ -219,10 +220,6 @@
             </tr>
         </table>
 
-        <!--
-            </div>
-        </form>
-        -->
         <div id="coffee_footer">
             <!-- 匯入共同使用的 footer.html 內容 -->
             {% include 'footer.html' %}

app/templates/sensor_chart_DO.html

@@ -34,7 +34,8 @@
         var sensor_name = '{{sensor_name}}';
         var tid = '{{tid}}';
         $(document).ready(function(){
-            $("#coffee_title").text(tank + tid + ' 乾燥出料儲豆槽感測器圖表');
+            $("#coffee_title_pc").text(tank + tid + ' 乾燥出料儲豆槽感測器圖表');
+            $("#coffee_title_phone").text(tank + tid + ' 感測器');
         });
     </script>
 </head>

app/templates/sensor_chart_F.html

@@ -34,7 +34,8 @@
         var sensor_name = '{{sensor_name}}';
         var tid = '{{tid}}';
         $(document).ready(function(){
-            $("#coffee_title").text(tank + tid + ' 發酵槽感測器圖表');
+            $("#coffee_title_pc").text(tank + tid + ' 發酵槽感測器圖表');
+            $("#coffee_title_phone").text(tank + tid + ' 感測器');
         });
     </script>
 </head>
@@ -240,9 +241,24 @@
                     </select>
                     {% endif %}
 
-                    {% if sensor_name=='PressureWaterLevel' %}
+                    {% if sensor_name=='motorEncoder' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder" selected>發酵槽馬達編碼器</option>
+                        <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
+                        <option value="SHT11_Temp">發酵槽桶內溫度</option>
+                        <option value="SHT11_Humidity">發酵槽桶內濕度</option>
+                        <option value="CO2">發酵槽二氧化碳濃度</option>
+                        <option value="PH">發酵槽水質酸鹼度</option>
+                        <option value="ORP">發酵槽水質氧化還原電位</option>
+                        <option value="DO">發酵槽水質溶氧量</option>
+                        <option value="EC">發酵槽水質導電度</option>
+                        <option value="PA">發酵槽桶內壓力</option>
+                    </select>
+                    {% elif sensor_name=='PressureWaterLevel' %}
+                    <select id="sensors">
+                        <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel" selected>發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -256,6 +272,7 @@
                     {% elif sensor_name=='SHT11_Temp' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp" selected>發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -269,6 +286,7 @@
                     {% elif sensor_name=='SHT11_Humidity' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity" selected>發酵槽桶內濕度</option>
@@ -282,6 +300,7 @@
                     {% elif sensor_name=='CO2' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -295,6 +314,7 @@
                     {% elif sensor_name=='PH' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -308,6 +328,7 @@
                     {% elif sensor_name=='ORP' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -321,6 +342,7 @@
                     {% elif sensor_name=='DO' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -334,6 +356,7 @@
                     {% elif sensor_name=='EC' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -347,6 +370,7 @@
                     {% elif sensor_name=='PA' %}
                     <select id="sensors">
                         <option value="LiDAR">發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>
@@ -360,6 +384,7 @@
                     {% else %}
                     <select id="sensors">
                         <option value="LiDAR" selected>發酵槽咖啡生豆高度</option>
+                        <option value="motorEncoder">發酵槽馬達編碼器</option>
                         <option value="PressureWaterLevel">發酵槽桶內水位高度</option>
                         <option value="SHT11_Temp">發酵槽桶內溫度</option>
                         <option value="SHT11_Humidity">發酵槽桶內濕度</option>

app/templates/sensor_chart_FI.html

@@ -34,7 +34,8 @@
         var sensor_name = '{{sensor_name}}';
         var tid = '{{tid}}';
         $(document).ready(function(){
-            $("#coffee_title").text(tank + tid + ' 發酵入料儲豆槽感測器圖表');
+            $("#coffee_title_pc").text(tank + tid + ' 發酵入料儲豆槽感測器圖表');
+            $("#coffee_title_phone").text(tank + tid + ' 感測器');
         });
     </script>
 </head>

app/templates/sensor_chart_FO.html

@@ -34,7 +34,8 @@
         var sensor_name = '{{sensor_name}}';
         var tid = '{{tid}}';
         $(document).ready(function(){
-            $("#coffee_title").text(tank + tid + ' 發酵出料儲豆槽感測器圖表');
+            $("#coffee_title_pc").text(tank + tid + ' 發酵出料儲豆槽感測器圖表');
+            $("#coffee_title_phone").text(tank + tid + ' 感測器');
         });
     </script>
 </head>

app/templates/sitemap.html

@@ -0,0 +1,176 @@
+<!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;
+        }
+
+        .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;
+            }
+        }
+
+        @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>
+        $(document).ready(function(){
+            $("#coffee_title").text('Smart Coffee 網站地圖');
+        });
+    </script>
+</head>
+<body>
+    <div id="wrapper">
+        <div id="coffee_header">
+            <!-- 匯入共同使用的 header.html 內容 -->
+            {% include 'header.html' %}
+        </div>
+
+        <div class="main-page" style="text-align: center;">
+            <p style="font-size: 24px;">網站地圖</p>
+        </div>
+
+        <div id="coffee_footer">
+            <!-- 匯入共同使用的 footer.html 內容 -->
+            {% include 'footer.html' %}
+        </div>
+
+    </div>
+    
+</body>
+</html>

app/translations/zh/LC_MESSAGES/messages.po

@@ -0,0 +1,28 @@
+# Chinese translations for PROJECT.
+# Copyright (C) 2021 ORGANIZATION
+# This file is distributed under the same license as the PROJECT project.
+# FIRST AUTHOR <EMAIL@ADDRESS>, 2021.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: PROJECT VERSION\n"
+"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
+"POT-Creation-Date: 2021-12-21 17:22+0800\n"
+"PO-Revision-Date: 2021-12-21 17:22+0800\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language: zh\n"
+"Language-Team: zh <LL@li.org>\n"
+"Plural-Forms: nplurals=1; plural=0\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Generated-By: Babel 2.9.1\n"
+
+#: templates/index.html:261
+msgid "Hello World!"
+msgstr "你好"
+
+#: templates/index.html:262
+msgid "My name is Max"
+msgstr "馬克思"
+