UI update

Author: Matteo-it

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

@@ -93,7 +93,7 @@ document.addEventListener('DOMContentLoaded', () => {
     initSocketIO();
     renderAccelerometerData(); // Initial render for accelerometer
     renderAnomalies(); // Initial render for anomalies
-    updateFeedback(false); // Initial feedback state
+    updateFeedback(null); // Initial feedback state
     initializeConfidenceSlider(); // Initialize the confidence slider
 
     // Popover logic
@@ -139,25 +139,25 @@ function handleConfidenceInputChange() {
     const confidenceInput = document.getElementById('confidenceInput');
     const confidenceSlider = document.getElementById('confidenceSlider');
 
-    let value = parseFloat(confidenceInput.value);
+    let value = parseInt(confidenceInput.value, 10);
 
-    if (isNaN(value)) value = 0.5;
-    if (value < 0) value = 0;
-    if (value > 1) value = 1;
+    if (isNaN(value)) value = 5;
+    if (value < 1) value = 1;
+    if (value > 10) value = 10;
 
     confidenceSlider.value = value;
     updateConfidenceDisplay();
 }
 
 function validateConfidenceInput() {
     const confidenceInput = document.getElementById('confidenceInput');
-    let value = parseFloat(confidenceInput.value);
+    let value = parseInt(confidenceInput.value, 10);
 
-    if (isNaN(value)) value = 0.5;
-    if (value < 0) value = 0;
-    if (value > 1) value = 1;
+    if (isNaN(value)) value = 5;
+    if (value < 1) value = 1;
+    if (value > 10) value = 10;
 
-    confidenceInput.value = value.toFixed(2);
+    confidenceInput.value = value.toFixed(0);
 
     handleConfidenceInputChange();
 }
@@ -169,10 +169,10 @@ function updateConfidenceDisplay() {
     const sliderProgress = document.getElementById('sliderProgress');
 
     const value = parseFloat(confidenceSlider.value);
-    socket.emit('override_th', value); // Send confidence to backend
+    socket.emit('override_th', value / 10); // Send scaled confidence to backend (0.1 to 1.0)
     const percentage = (value - confidenceSlider.min) / (confidenceSlider.max - confidenceSlider.min) * 100;
 
-    const displayValue = value.toFixed(2);
+    const displayValue = value.toFixed(0);
     confidenceValueDisplay.textContent = displayValue;
 
     if (document.activeElement !== confidenceInput) {
@@ -187,8 +187,8 @@ function resetConfidence() {
     const confidenceSlider = document.getElementById('confidenceSlider');
     const confidenceInput = document.getElementById('confidenceInput');
 
-    confidenceSlider.value = '0.5';
-    confidenceInput.value = '0.50';
+    confidenceSlider.value = '5';
+    confidenceInput.value = '5';
     updateConfidenceDisplay();
 }
 
@@ -200,7 +200,13 @@ function initSocketIO() {
         }
         printAnomalies(message);
         renderAnomalies();
-        updateFeedback(true);
+        try {
+            const parsedAnomaly = JSON.parse(message);
+            updateFeedback(parsedAnomaly.score); // Pass the anomaly score
+        } catch (e) {
+            console.error("Failed to parse anomaly message for feedback:", message, e);
+            updateFeedback(null); // Fallback to no anomaly feedback
+        }
     });
 
     socket.on('sample', (s) => {
@@ -225,7 +231,7 @@ function initSocketIO() {
 
 // ... (existing printAnomalies and renderAnomalies functions)
 
-function updateFeedback(hasAnomaly) {
+function updateFeedback(anomalyScore = null) {
     clearTimeout(feedbackTimeout); // Clear any existing timeout
 
     if (!hasDataFromBackend) {
@@ -238,21 +244,20 @@ function updateFeedback(hasAnomaly) {
         return;
     }
 
-    if (hasAnomaly) {
+    if (anomalyScore !== null) { // Anomaly detected
         feedbackContentWrapper.innerHTML = `
             <div class="feedback-content">
-                <img src="./img/good.svg" alt="Anomaly Detected">
-                <p class="feedback-text">Anomaly Detected!</p>
+                <img src="./img/bad.svg" alt="Anomaly Detected">
+                <p class="feedback-text">Anomaly detected: ${anomalyScore.toFixed(2)}</p>
             </div>
         `;
-        // Reset to "No anomalies" state after 3 seconds
         feedbackTimeout = setTimeout(() => {
-            updateFeedback(false);
+            updateFeedback(null); // Reset after 3 seconds
         }, 3000);
-    } else {
+    } else { // No anomaly or reset
         feedbackContentWrapper.innerHTML = `
             <div class="feedback-content">
-                <img src="./img/bad.svg" alt="No Anomalies">
+                <img src="./img/good.svg" alt="No Anomalies">
                 <p class="feedback-text">No anomalies</p>
             </div>
         `;
@@ -285,25 +290,22 @@ function renderAnomalies() {
                 return; // Skip empty anomaly objects
             }
 
-            const row = document.createElement('div');
-            row.className = 'anomaly-container'; // Using a new class for styling
+            const listItem = document.createElement('li');
+            listItem.className = 'anomaly-list-item';
 
-            const cellContainer = document.createElement('span');
-            cellContainer.className = 'anomaly-cell-container';
+            const score = parsedAnomaly.score.toFixed(1);
+            const date = new Date(parsedAnomaly.timestamp);
 
-            const scoreText = document.createElement('span');
-            scoreText.className = 'anomaly-content';
-            const value = parsedAnomaly.score; // Assuming 'score' is a property
-            scoreText.innerHTML = `Anomaly Score: ${value.toFixed(2)}`;
+            const timeString = date.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            const dateString = date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }).replace(/ /g, ' ');
 
-            const timeText = document.createElement('span');
-            timeText.className = 'anomaly-content-time';
-            timeText.textContent = new Date(parsedAnomaly.timestamp).toLocaleString('it-IT').replace(',', ' -'); // Assuming 'timestamp' property
+            listItem.innerHTML = `
+                <span class="anomaly-score">${score}</span>
+                <span class="anomaly-text">Anomaly</span>
+                <span class="anomaly-time">${timeString} - ${dateString}</span>
+            `;
 
-            cellContainer.appendChild(scoreText);
-            cellContainer.appendChild(timeText);
-            row.appendChild(cellContainer);
-            recentAnomaliesElement.appendChild(row);
+            recentAnomaliesElement.appendChild(listItem);
 
         } catch (e) {
             console.error("Failed to parse anomaly data:", anomaly, e);

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

@@ -58,18 +58,18 @@ <h1 class="arduino-text">Vibration Anomaly Detection</h1>
                                         Scores above your threshold are flagged as an anomaly.</div>
                                 </div>
                                 <button id="confidenceResetButton" class="btn-tertiary">
-                                    <input type="number" id="confidenceInput" class="confidence-input" min="0" max="1" step="0.05" value="0.50">
+                                    <input type="number" id="confidenceInput" class="confidence-input" min="1" max="10" step="1" value="5">
                                     <img src="img/reset.svg" alt="Reset" class="reset-icon">
                                 </button>
                             </div>
                             <div class="slider-box">
-                                <span class="confidence-limits">0</span>
+                                <span class="confidence-limits">1</span>
                                 <div class="slider-container">
                                     <div class="slider-progress" id="sliderProgress"></div>
-                                    <div class="confidence-value-display" id="confidenceValueDisplay">0.5</div>
-                                    <input type="range" id="confidenceSlider" min="0" max="1" step="0.01" value="0.5">
+                                    <div class="confidence-value-display" id="confidenceValueDisplay">5</div>
+                                    <input type="range" id="confidenceSlider" min="1" max="10" step="1" value="5">
                                 </div>
-                                <span class="confidence-limits">1</span>
+                                <span class="confidence-limits">10</span>
                             </div>
                         </div>
                     </div>

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

@@ -440,4 +440,23 @@ body {
 
 .btn-tertiary:hover .reset-icon {
     opacity: 1;
+}
+
+.anomaly-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    border-bottom: 1px solid #DAE3E3;
+}
+.anomaly-score {
+    font-weight: bold;
+    color: #b00020; /* Red color for score */
+}
+.anomaly-text {
+    /* Style for 'Anomaly' text if needed */
+}
+.anomaly-time {
+    color: #5D6A6B; /* Grey for time */
+    font-size: 11px;
 }

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

@@ -2,6 +2,8 @@
 #
 # SPDX-License-Identifier: MPL-2.0
 
+import json
+from datetime import datetime
 from arduino.app_utils import *
 from arduino.app_bricks.web_ui import WebUI
 from arduino.app_bricks.vibration_anomaly_detection import VibrationAnomalyDetection
@@ -12,6 +14,11 @@
 
 vibration_detection = VibrationAnomalyDetection(anomaly_detection_threshold=1.0)
 
+@ui.on('override_th')
+def on_override_th(value: float):
+    logger.info(f"Setting new anomaly threshold: {value}")
+    vibration_detection.anomaly_detection_threshold = value
+
 def get_fan_status(anomaly_detected: bool):
     return {
         "anomaly": anomaly_detected,
@@ -22,6 +29,11 @@ def get_fan_status(anomaly_detected: bool):
 # Register action to take after successful detection
 def on_detected_anomaly(anomaly_score: float, classification: dict):
     print(f"Detected anomaly. Score: {anomaly_score}")
+    anomaly_payload = {
+        "score": anomaly_score,
+        "timestamp": datetime.now().isoformat()
+    }
+    ui.send_message('anomaly_detected', json.dumps(anomaly_payload))
     ui.send_message('fan_status_update', get_fan_status(True))
 
 vibration_detection.on_anomaly(on_detected_anomaly)
@@ -34,6 +46,9 @@ def record_sensor_movement(x: float, y: float, z: float):
         y_ms2 = y * 9.81
         z_ms2 = z * 9.81
 
+        # Forward raw data to UI for plotting
+        ui.send_message('sample', {'x': x_ms2, 'y': y_ms2, 'z': z_ms2})
+
         # Forward samples to the vibration_detection brick
         vibration_detection.accumulate_samples((x_ms2, y_ms2, z_ms2))