Add distinction between REAL and SIM mqtt brokers (host + PORT)

dashboard/README.md

@@ -14,8 +14,10 @@ To configure the MQTT brokers to which the dashboard listens you can edit `confi
 
 ```python
 class Config:
-    MQTT_HOST_REAL = '192.168.0.10' # MQTT broker IP of real system (which you want to monitor)
-    MQTT_HOST_SIM = '127.0.0.1' # MQTT broker IP of simulated system
+    MQTT_REAL_HOST = '192.168.0.10' # MQTT broker IP of real system (which you want to monitor)
+    MQTT_REAL_PORT = 1883
+    MQTT_SIM_HOST = '127.0.0.1' # MQTT broker IP of simulated system
+    MQTT_SIM_PORT = 1883
     LOGGING = False # Enable logging mqtt messages to a file
 ```
 

dashboard/config.py

@@ -1,12 +1,17 @@
 from src.utils.app_modes import AppMode
 
+# Production Configuration
 # class Config:
-#     MQTT_HOST_REAL = '192.168.0.10' # MQTT broker IP of real system (which you want to monitor)
-#     MQTT_HOST_SIM = '127.0.0.1' # MQTT broker IP of simulated system
-#     LOGGING = False
+#     MQTT_REAL_HOST = '192.168.0.10' # MQTT broker IP of real system (which you want to monitor)
+#     MQTT_REAL_PORT = 1883
+#     MQTT_SIM_HOST = '127.0.0.1' # MQTT broker IP of simulated system
+#     MQTT_SIM_PORT = 1883
+#     LOGGING = False # Enable logging mqtt messages to a file
 
 # Test Configuration - treats simulation as real
 class Config:
-    MQTT_HOST_REAL = '127.0.0.1' # MQTT broker IP of real system (which you want to monitor)
-    MQTT_HOST_SIM = '127.0.0.1' # MQTT broker IP of simulated system
+    MQTT_REAL_HOST = '127.0.0.1' # MQTT broker IP of real system (which you want to monitor)
+    MQTT_REAL_PORT = 1884
+    MQTT_SIM_HOST = '127.0.0.1' # MQTT broker IP of simulated system
+    MQTT_SIM_PORT = 1883
     LOGGING = False

dashboard/src/__init__.py

@@ -14,8 +14,8 @@ def create_app():
     socketio.init_app(app)
     
     # Initialize the MQTT handler and store it in app config for easy access
-    mqtt_handler_real = MQTTHandler(socketio, origin='real', host=app.config['MQTT_HOST_REAL'], logging=app.config['LOGGING'])
-    mqtt_handler_sim = MQTTHandler(socketio, origin='sim', host=app.config['MQTT_HOST_SIM'], logging=app.config['LOGGING'])
+    mqtt_handler_real = MQTTHandler(socketio, origin='real', host=app.config['MQTT_REAL_HOST'], port=app.config['MQTT_REAL_PORT'], logging=app.config['LOGGING'])
+    mqtt_handler_sim = MQTTHandler(socketio, origin='sim', host=app.config['MQTT_SIM_HOST'], port=app.config['MQTT_SIM_PORT'], logging=app.config['LOGGING'])
     app.config['mqtt_handler_real'] = mqtt_handler_real
     app.config['mqtt_handler_sim'] = mqtt_handler_sim
     

dashboard/src/routes.py

@@ -4,38 +4,34 @@ from .utils.app_modes import AppMode
 
 bp = Blueprint('main', __name__)
 
-# @bp.route('/')
-# def index():
-#     mode = current_app.config['MODE']
-#     mqtt_handler = current_app.config['mqtt_handler']
-    
-#     # If the app is in TEST mode, start publishing mock data in a separate thread.
-#     if mode == AppMode.TEST:
-#         threading.Thread(target=mqtt_handler.publish_mock_data).start()
-    
-#     return render_template('dashboard.html', mode=mode, host=current_app.config['MQTT_HOST'])
-
 @bp.route('/')
 def root():
     return redirect(url_for('main.sim_dashboard'))
 
 @bp.route('/dashboard/sim')
 def sim_dashboard():
-    return render_template("dashboards/sim.html", mode=AppMode.SIM.value, host=current_app.config['MQTT_HOST_SIM'])
+    return render_template("dashboards/sim.html", mode=AppMode.SIM.value, config=current_app.config)
 
 @bp.route('/dashboard/monitor')
 def monitor_dashboard():
-    return render_template("dashboards/monitor.html", mode=AppMode.REAL.value, host=current_app.config['MQTT_HOST_REAL'])
+    return render_template("dashboards/monitor.html", mode=AppMode.REAL.value, config=current_app.config)
 
 @bp.route('/dashboard/hybrid')
 def hybrid_dashboard():
-    return render_template("dashboards/hybrid.html", mode=AppMode.HYBRID.value, host='?')
+    return render_template("dashboards/hybrid.html", mode=AppMode.HYBRID.value, config=current_app.config)
 
 
 @bp.route('/api/publish', methods=['POST'])
 def publish():
-    mqtt_handler = current_app.config['mqtt_handler_sim'] # TODO: Change to real handler when needed
     topic = request.form['topic']
     message = request.form['message']
+    target = request.form.get('target', 'sim')
+    
+    if target == 'real':
+        mqtt_handler = current_app.config['mqtt_handler_real']
+    elif target == 'sim':
+        mqtt_handler = current_app.config['mqtt_handler_sim']
+    else:
+        return 'Invalid target specified', 400
     mqtt_handler.publish(topic, message)
     return 'Message Sent!'

dashboard/src/static/js/dashboard.js

@@ -335,13 +335,13 @@ function spawnWorkpiece(color, topic = 'simulation/spawn') {
  * @param topic
  * @param message
  */
-function publishMqtt(topic, message) {
+function publishMqtt(topic, message, target=dashboardMode) {
     fetch('/api/publish', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded',
         },
-        body: new URLSearchParams({ topic: topic, message: message })
+        body: new URLSearchParams({ topic: topic, message: message, target: target })
     });
 }
 

dashboard/src/templates/index.html

@@ -30,9 +30,16 @@
                     <span class="theme-gradient">Fischertechnik Control Center</span>
                 </h3>
                 <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"></ul>
-                <div class="navbar-text me-2" title="MQTT host address">
-                    <h5 class="mb-0"><span class="badge rounded-pill text-bg-success">MQTT: {{ host }}</span></h5>
+                {% if mode == 'sim' or mode == 'hybrid' %}
+                <div class="navbar-text me-2" title="MQTT simulation address">
+                    <h5 class="mb-0"><span class="badge rounded-pill text-bg-success">SIM: {{ config['MQTT_SIM_HOST'] }}:{{ config['MQTT_SIM_PORT']}}</span></h5>
                 </div>
+                {% endif %}
+                {% if mode == 'real'  or mode == 'hybrid' %}
+                <div class="navbar-text me-2" title="MQTT real address">
+                    <h5 class="mb-0"><span class="badge rounded-pill text-bg-success">REAL: {{ config['MQTT_SIM_HOST'] }}:{{ config['MQTT_SIM_PORT']}}</span></h5>
+                </div>
+                {% endif %}
                 <div class="btn-group">
                     <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                         data-bs-auto-close="true" aria-expanded="false">