Update chart UI

Author: Matteo-it

examples/vibration-anomaly-detection/assets/app.js

@@ -4,12 +4,11 @@
 
 const canvas = document.getElementById('plot');
 const ctx = canvas.getContext('2d');
-const width = canvas.width, height = canvas.height;
 const maxSamples = 200;
 const samples = [];
 let errorContainer;
 
-const recentAnomaliesElement = document.getElementById('recentClassifications'); // Renamed to recentAnomaliesElement but ID is recentClassifications
+const recentAnomaliesElement = document.getElementById('recentClassifications');
 let anomalies = [];
 const MAX_RECENT_ANOMALIES = 5;
 
@@ -21,29 +20,33 @@ const noAccelerometerDataPlaceholder = document.getElementById('no-accelerometer
 function drawPlot() {
   if (!hasDataFromBackend) return; // Only draw if we have data
 
-  // clear
-  // ctx.fillStyle = '#fff';
-  // ctx.fillRect(0,0,width,height);
+  const currentWidth = canvas.clientWidth;
+  const currentHeight = canvas.clientHeight;
+
+  if (canvas.width !== currentWidth || canvas.height !== currentHeight) {
+    canvas.width = currentWidth;
+    canvas.height = currentHeight;
+  }
 
   // All grid lines (every 0.5) - same size
-  ctx.strokeStyle = 'rgba(49, 51, 63, 0.6)';
+  ctx.strokeStyle = '#31333F99';
   ctx.lineWidth = 0.5;
   ctx.beginPath();
   for (let i=0; i<=8; i++){
-    const y = 10 + i*((height-20)/8);
+    const y = 10 + i*((currentHeight-20)/8);
     ctx.moveTo(40,y);
-    ctx.lineTo(width,y);
+    ctx.lineTo(currentWidth,y);
   }
   ctx.stroke();
 
   // Y-axis labels (-2.0 to 2.0 every 0.5)
-  ctx.fillStyle = 'rgba(49, 51, 63, 0.6)';
-  ctx.font = '12px Arial';
+  ctx.fillStyle = '#666';
+  ctx.font = '400 14px Arial';
   ctx.textAlign = 'right';
   ctx.textBaseline = 'middle';
 
   for (let i=0; i<=8; i++) {
-    const y = 10 + i*((height-20)/8);
+    const y = 10 + i*((currentHeight-20)/8);
     const value = (2.0 - i * 0.5).toFixed(1);
     ctx.fillText(value, 35, y);
   }
@@ -55,9 +58,9 @@ function drawPlot() {
     ctx.beginPath();
     for (let i=0;i<samples.length;i++){
       const s = samples[i];
-      const x = 40 + (i/(maxSamples-1))*(width-40);
+      const x = 40 + (i/(maxSamples-1))*(currentWidth-40);
       const v = s[key];
-      const y = (height/2) - (v * ((height-20)/4));
+      const y = (currentHeight/2) - (v * ((currentHeight-20)/4));
       if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
     }
     ctx.stroke();

examples/vibration-anomaly-detection/assets/index.html

@@ -29,7 +29,7 @@ <h1 class="arduino-text">Vibration Anomaly Detection</h1>
                     <div class="popover">Live visualization of raw accelerometer data (X, Y, Z axes) from the board's Movement module. Horizontal axis represents time; vertical axis shows acceleration in m/s<sup>2</sup></div>
                 </div>
                 <div id="accelerometer-data-display">
-                    <canvas id="plot" width="640" height="200"></canvas>
+                    <canvas id="plot"></canvas>
                     <div class="legend">
                         <div class="legend-item">
                             <div class="legend-color" style="background-color: #0068C9;"></div>

examples/vibration-anomaly-detection/assets/style.css

@@ -163,6 +163,10 @@ body {
         flex-direction: column;
     }
 
+    .right-column {
+        max-width: 100%;
+    }
+
     .arduino-text {
         font-size: 14px;
     }
@@ -450,13 +454,23 @@ body {
     border-bottom: 1px solid #DAE3E3;
 }
 .anomaly-score {
-    font-weight: bold;
-    color: #b00020; /* Red color for score */
+    font-weight: normal;
+    color: #2C353A;
+    font-size: 12px;
 }
 .anomaly-text {
-    /* Style for 'Anomaly' text if needed */
+    color: #2C353A;
+    font-size: 12px;
 }
 .anomaly-time {
-    color: #5D6A6B; /* Grey for time */
-    font-size: 11px;
-}
+    color: #2C353A;
+    font-size: 12px;
+}
+#accelerometer-data-display {
+    margin-top: 20px;
+}
+
+#plot {
+    width: 100%;
+    height: 250px;
+}

examples/vibration-anomaly-detection/python/main.py

@@ -3,6 +3,9 @@
 # SPDX-License-Identifier: MPL-2.0
 
 import json
+import time
+import math
+import threading
 from datetime import datetime
 from arduino.app_utils import *
 from arduino.app_bricks.web_ui import WebUI
@@ -12,6 +15,10 @@
 
 ui = WebUI()
 
+# --- Configuration Constant ---
+USE_FAKE_DATA = False # Set to True to use simulated data, False to use real sensor data via Bridge RPC
+# ------------------------------
+
 vibration_detection = VibrationAnomalyDetection(anomaly_detection_threshold=1.0)
 
 def on_override_th(value: float):
@@ -55,13 +62,37 @@ def record_sensor_movement(x: float, y: float, z: float):
         logger.exception(f"record_sensor_movement: Error: {e}")
         print(f"record_sensor_movement: Error: {e}")
 
-# Register the Bridge RPC provider so the sketch can call into Python
-try:
-    logger.debug("Registering 'record_sensor_movement' Bridge provider")
-    Bridge.provide("record_sensor_movement", record_sensor_movement)
-    logger.debug("'record_sensor_movement' registered successfully")
-except RuntimeError:
-    logger.debug("'record_sensor_movement' already registered")
+if USE_FAKE_DATA:
+    # Faking sensor data for UI testing
+    def generate_fake_data():
+        logger.info("Starting fake data generation")
+        start_time = time.time()
+        while True:
+            current_time = time.time() - start_time
+            # Generate wave patterns for x, y, and z
+            x = 0.5 * math.sin(2 * math.pi * 0.5 * current_time)  # 0.5 Hz frequency
+            y = 0.3 * math.sin(2 * math.pi * 1.0 * current_time + (math.pi / 2))  # 1.0 Hz frequency, 90-degree phase shift
+            z = 0.8 * math.cos(2 * math.pi * 0.2 * current_time)  # 0.2 Hz frequency, using cosine
+
+            # Introduce a sudden anomaly occasionally
+            if int(current_time) % 20 == 0 and int(current_time) != 0:
+                x += 0.5 * math.sin(2 * math.pi * 10 * current_time) # high frequency noise
+                y += 0.5 * math.cos(2 * math.pi * 10 * current_time)
+
+            record_sensor_movement(x, y, z)
+            time.sleep(0.1)  # 10 Hz data rate
+
+    fake_data_thread = threading.Thread(target=generate_fake_data, daemon=True)
+    fake_data_thread.start()
+else:
+    # Register the Bridge RPC provider so the sketch can call into Python
+    try:
+        logger.debug("Registering 'record_sensor_movement' Bridge provider")
+        Bridge.provide("record_sensor_movement", record_sensor_movement)
+        logger.debug("'record_sensor_movement' registered successfully")
+    except RuntimeError:
+        logger.debug("'record_sensor_movement' already registered")
+
 
 # Let the App runtime manage bricks and run the web server
 App.run()