Merge pull request #372 from pollen-robotics/367-display-daemonbackend-error-in-dashboard

367 display daemon/backend error in dashboard

Author: pierre-rouanet

pyproject.toml

@@ -12,7 +12,7 @@ requires-python = ">=3.10"
 dependencies = [
     "numpy>=2.2.5",
     "scipy>=1.15.3, <2.0.0",
-    "reachy_mini_motor_controller>=1.2.0",    
+    "reachy_mini_motor_controller>=1.3.0",    
     "eclipse-zenoh>=1.4.0",
     "opencv-python<=5.0",
     "cv2_enumerate_cameras>=1.2.1",

src/reachy_mini/daemon/app/dashboard/static/js/daemon.js

@@ -5,7 +5,7 @@ const daemon = {
     currentStatus: {},
 
     start: async (wakeUp) => {
-        fetch(`/api/daemon/start?wake_up=${wakeUp}`, {
+        await fetch(`/api/daemon/start?wake_up=${wakeUp}`, {
             method: 'POST',
         })
             .then((response) => {
@@ -23,7 +23,7 @@ const daemon = {
     },
 
     stop: async (gotoSleep) => {
-        fetch(`/api/daemon/stop?goto_sleep=${gotoSleep}`, {
+        await fetch(`/api/daemon/stop?goto_sleep=${gotoSleep}`, {
             method: 'POST',
         })
             .then((response) => {
@@ -41,15 +41,11 @@ const daemon = {
     },
 
     getStatus: async () => {
-        fetch('/api/daemon/status')
+        await fetch('/api/daemon/status')
             .then((response) => response.json())
             .then(async (data) => {
-                let previousState = daemon.currentStatus.state;
                 daemon.currentStatus = data;
-
-                if (previousState !== daemon.currentStatus.state) {
-                    await daemon.updateUI();
-                }
+                await daemon.updateUI();
             })
             .catch((error) => {
                 console.error('Error fetching daemon status:', error);
@@ -65,7 +61,7 @@ const daemon = {
 
         let currentState = daemon.currentStatus.state;
 
-        if (currentState === initialState || currentState === "starting" || currentState === "stopping") {
+        if (currentState !== "error" && (currentState === initialState || currentState === "starting" || currentState === "stopping")) {
             setTimeout(() => {
                 daemon.checkStatusUpdate(initialState);
             }, 500);
@@ -128,11 +124,12 @@ const daemon = {
             backendStatusText.textContent = 'Stopped';
         }
         else if (daemonState === 'error') {
-            // daemonStatusAnim.setAttribute('data', '/static/assets/reachy-mini-ko-animation.svg');
             daemonStatusAnim.setAttribute('data', '/static/assets/no-wifi-cartoon.svg');
             toggleDaemonSwitch.checked = false;
             backendStatusIcon.classList.add('bg-red-500');
             backendStatusText.textContent = 'Error occurred';
+
+            notificationCenter.showError(daemon.currentStatus.error);
         }
 
         await daemon.updateToggle();

src/reachy_mini/daemon/app/dashboard/static/js/notification.js

@@ -0,0 +1,41 @@
+const notificationCenter = {
+
+    showInfo: (message, duration = 5000, autoclose = true) => {
+        notificationCenter.showNotification(message, false, duration, autoclose);
+    },
+    showError: (message, duration = 5000, autoclose = false) => {
+        message = notificationCenter.errorTranslation(message);
+        notificationCenter.showNotification(message, true, duration, autoclose);
+    },
+
+    showNotification: (message, error, duration = 5000, autoclose = true) => {
+        document.getElementById('notification-message').textContent = message;
+        document.getElementById('notification-modal').style.display = 'block';
+
+        if (error) {
+            document.getElementById('notification-content').classList.add('error');
+            document.getElementById('notification-content').classList.remove('info');
+        } else {
+            document.getElementById('notification-content').classList.remove('error');
+            document.getElementById('notification-content').classList.add('info');
+        }
+
+        if (autoclose) {
+            setTimeout(notificationCenter.closeNotification, duration);
+        }
+    },
+
+    closeNotification: () => {
+        document.getElementById('notification-modal').style.display = 'none';
+    },
+
+    errorTranslation: (errorMessage) => {
+        if (errorMessage.includes('No Reachy Mini serial port found.')) {
+            return 'Reachy Mini not detected on USB. Please check that the USB cable is properly connected.';
+        }
+
+        console.log('No translation found for error message:', errorMessage);
+        return errorMessage;
+    },
+
+};

src/reachy_mini/daemon/app/dashboard/tailwindcss/styles/app.css

@@ -125,4 +125,61 @@ body {
     font-family: 'Asap', sans-serif;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.7);
+}
+
+
+.notification-modal {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 9999;
+    min-width: 300px;
+    max-width: 400px;
+    background: #fff;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    display: none;
+    animation: fadeInUp 0.3s;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.notification-content {
+    padding: 20px 28px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* Notification variants */
+.notification-content.info {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+}
+
+.notification-content.error {
+    background: #ffeaea;
+    border: 1px solid #ff4d4f;
+    color: #b71c1c;
+}
+
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: #888;
 }

src/reachy_mini/daemon/app/dashboard/templates/index.html

@@ -6,6 +6,7 @@
     {% include "sections/daemon.html" %}
     {% include "sections/apps.html" %}
     {% include "sections/appstore.html" %}
+    {% include "sections/notification.html" %}
 </div>
 {% endblock %}
 
@@ -14,4 +15,5 @@
 <script src="/static/js/apps.js"></script>
 <script src="/static/js/appstore.js"></script>
 <script src="/static/js/move_player.js"></script>
+<script src="/static/js/notification.js"></script>
 {% endblock %}

src/reachy_mini/daemon/app/dashboard/templates/sections/notification.html

@@ -0,0 +1,19 @@
+<!-- Notification Modal (Bottom Right) -->
+<div id="notification-modal" class="notification-modal">
+    <div class="notification-content" id="notification-content">
+        <!-- Notification message will appear here -->
+        <span id="notification-message"></span>
+        <button class="close-btn" onclick="closeNotification()">×</button>
+    </div>
+</div>
+
+<script>
+    function showNotification(message) {
+        document.getElementById('notification-message').textContent = message;
+        document.getElementById('notification-modal').style.display = 'block';
+        setTimeout(closeNotification, 5000); // Auto-close after 5s
+    }
+    function closeNotification() {
+        document.getElementById('notification-modal').style.display = 'none';
+    }
+</script>

src/reachy_mini/daemon/backend/robot/backend.py

@@ -216,7 +216,6 @@ def _update(self) -> None:
                 self.ready.set()  # Mark the backend as ready
             except RuntimeError as e:
                 self._stats["nb_error"] += 1
-                # self.logger.warning(f"Error reading positions: {e}")
 
                 assert self.last_alive is not None