Release V0.2.0

.env.example

@@ -1,5 +1,5 @@
-# Dev server port (default 5000). Use http://localhost:5000 if VITE_HTTPS is false.
-VITE_PORT=5000
+# Dev server port (default 4004). Use http://localhost:4004 if VITE_HTTPS is false.
+VITE_PORT=4004
 VITE_OVERRIDE_ROS_BRIDGE_SERVER_URL=
 
 # Set false for local dev without SSL (avoids ERR_SSL_PROTOCOL_ERROR). Set true and add certs for HTTPS.

.gitignore

@@ -8,6 +8,9 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.yarn/
+.pnp.cjs
+.pnp.loader.mjs
 dist
 dist-ssr
 *.local
@@ -32,7 +35,6 @@ dist-ssr
 .env.test.local
 .env.production.local
 
-yarn.lock
 package-lock.json
 
 todo.md

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -42,7 +42,7 @@ The application features a distinctive green-on-black cyberpunk aesthetic remini
 
 > **Quick Node upgrade with nvm**
 >
-> If you have Node < 22 (e.g. the Ubuntu 22.04 default 18.x), install nvm and switch:
+> If you have Node < 22 (e.g. the Ubuntu 24.04 Noble default 18.x), install nvm and switch:
 > ```sh
 > # Install nvm (skip if already installed)
 > curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
@@ -140,7 +140,7 @@ VITE_OVERRIDE_ROS_BRIDGE_SERVER_URL=https://100.100.100.100:5000/rosbridge
 
 VITE_ENABLE_LOGS=true
 
-# Hardware YAML editor (`/configuration`): header shows `robot_name` from loaded YAML (via ROS config/get).
+# Hardware YAML editor (`/robot-configuration`): header shows `robot_name` from loaded YAML (via ROS config/get).
 ```
 
 ### Authentication Setup

docs/getting_started.md

@@ -0,0 +1,92 @@
+<-- Welcome -->
+
+## Welcome to the Lucy control panel.
+
+This short getting-started guide will walk you through the basics of the control panel and help you get familiar with the main features.
+
+> You can skip this guide with the button below.
+> If you want to replay the guide, you can find it in the setting popup at the top right corner.
+
+---
+
+If you need more in-depth information, you can click the 'Documentation' button at any time or go to [this address](https://docs.sentience-robotics.fr/share/p1x9ikjkhf/p/public-documentation-EExgMX2REV).
+
+Additionally, if you need specific information or want to exchange on the project, you can join our [community discord server](https://discord.gg/g4KNZ3eeBd), we'll be more than happy to exchange with you!
+
+---
+
+Thanks for using Lucy, it means a lot to us ❤️.
+
+With that being said, let's get started!
+
+<-- ROS 2 -->
+
+Let's have a quick word about ROS 2.
+
+> [ROS](https://www.ros.org/) (Robot Operating System) is a standard in the field of robotic.
+
+Lucy use ROS 2 internaly to manage everything, from connecting to the physical actuators to displaying the number of connected controller.
+
+---
+
+The control panel has to connect to this bridge everytime, which is made automatically for you by default.
+> If at any point you need to update the connection URL, or toggle the auto-connect feature, you can visit the setting popup.
+
+<-- Control -->
+
+> This is where you'll control your robot, and it's full of stuff, so let's go over the basics!
+
+First thing first, you will need to take control over the robot. This can be achieved by using the 'Control robot' toggle.
+> This security system ensure that no more than one controller is sending instruction to your robot. When activated, this will take control from other control applications.
+
+---
+
+## Sliders
+
+The main part of the screen is occupied by the 'actuators categories', each of them contains multiple actuators.
+
+> You will be able to assign each & every actuator to a category in the configuration page.
+
+Each of these actuators has its own control box, letting you update its position in real time.
+Every slider comes with two indicators:
+- The top green one indicates the default position for this actuator.
+- The bottom blue one indicates the actual position. It will move more or less slowly depending on the physical configuration of the actuator.
+
+<-- Poses & Animations -->
+
+## Poses
+
+In the top bar controls, you can find the 'Save pose' & 'Load pose' popups.
+
+They will let you save every actuators position and load them at a later time when needed.
+
+> Every pose is saved locally in your browser's localStorage.
+
+---
+
+## Animations
+
+The animation system uses the saved poses.
+
+> Once at least two poses are created, you will be able to select them in the 'Manage animation' popup and create an animation with them.
+
+<-- Sensors -->
+
+For this part, we will need to travel a bit.
+
+- On the bottom right corner, you will find the navigation bar, select the second option 'Sensors'.
+
+> It sure look empty, let's fix it!
+
+Using the drop-down menu, you can select every sensors you want to watch.
+
+---
+
+> We currently support direct data display & temperatures, with a graph.
+> If you have sensors whose data cannot be displayed, feel free to create an [issue](https://github.com/Sentience-Robotics/lucy_control_panel/issues) or to [contact us](https://discord.gg/g4KNZ3eeBd) directly.
+
+<-- Configuration -->
+
+The configuration page is undergoing a complete refactor, usage guide will be updated soon.
+
+In the meantime, if you need more information, please refer to our [online documentation](https://docs.sentience-robotics.fr/share/p1x9ikjkhf/p/public-documentation-EExgMX2REV).

src/App.tsx

@@ -7,10 +7,14 @@ import { RobotControlPanel } from './Pages/RobotControlPanel';
 import { Navigation } from './Components/Navigation';
 import { NotFound } from './Pages/NotFound';
 import { ActiveHardwareRosProvider } from './contexts/ActiveHardwareRosContext';
+import { GettingStartedModal } from './Components/GettingStartedModal';
 /* Components */
 import { AuthForm } from './Components/AuthForm';
 import { LucyLoader } from './Components/LucyLoader';
+import { Page } from './Components/Page';
+import { ROUTES } from './Constants/routes.ts';
 import {
+    PAGE_CONTENT_STYLE,
     UI_ACCENT_GREEN,
     UI_BG_BLACK,
     UI_BORDER_STRONG,
@@ -20,21 +24,21 @@ import {
     UI_TEXT_SUBTLE,
 } from './Constants/uiTheme.ts';
 
-const { Content } = Layout;
 const { useBreakpoint } = Grid;
 
 const Configuration = lazy(() => import('./Pages/Configuration').then(module => ({ default: module.default })));
 const SensorDisplay = lazy(() => import('./Pages/SensorDisplay').then(module => ({ default: module.default })));
 
-const CONTROL_PATH = '/';
-const CONFIG_PATH = '/configuration';
-const SENSORS_PATH = '/sensors';
-const KNOWN_PATHS = new Set<string>([CONTROL_PATH, CONFIG_PATH, SENSORS_PATH]);
+const KNOWN_PATHS = new Set<string>([
+    ROUTES.control,
+    ROUTES.robotConfiguration,
+    ROUTES.sensors,
+]);
 
 /**
  * Render all main pages once and toggle visibility with `display: none`.
  * Keeps page-local state (sliders, edits, expanded panels) alive when the
- * user switches between CONTROL / CONFIGURATION. Lazy pages are only mounted
+ * user switches between CONTROL / ROBOT CONFIGURATION. Lazy pages are only mounted
  * after their first visit so the initial chunk stays small.
  */
 const PersistentPages: FC = () => {
@@ -43,8 +47,8 @@ const PersistentPages: FC = () => {
     const [sensorsVisited, setSensorsVisited] = useState(false);
 
     useEffect(() => {
-        if (pathname === CONFIG_PATH) setConfigVisited(true);
-        if (pathname === SENSORS_PATH) setSensorsVisited(true);
+        if (pathname === ROUTES.robotConfiguration) setConfigVisited(true);
+        if (pathname === ROUTES.sensors) setSensorsVisited(true);
     }, [pathname]);
 
     const isKnown = KNOWN_PATHS.has(pathname);
@@ -55,16 +59,16 @@ const PersistentPages: FC = () => {
 
     return (
         <>
-            <div style={pageStyle(pathname === CONTROL_PATH)}>
+            <div style={pageStyle(pathname === ROUTES.control)}>
                 <RobotControlPanel />
             </div>
             {configVisited ? (
-                <div style={pageStyle(pathname === CONFIG_PATH)}>
+                <div style={pageStyle(pathname === ROUTES.robotConfiguration)}>
                     <Suspense
                         fallback={
                             <LucyLoader
-                                label="LOADING CONFIGURATION"
-                                detail="Preparing the hardware configuration page."
+                                label="LOADING ROBOT CONFIGURATION"
+                                detail="Preparing the robot configuration page."
                             />
                         }
                     >
@@ -73,7 +77,7 @@ const PersistentPages: FC = () => {
                 </div>
             ) : null}
             {sensorsVisited ? (
-                <div style={pageStyle(pathname === SENSORS_PATH)}>
+                <div style={pageStyle(pathname === ROUTES.sensors)}>
                     <Suspense
                         fallback={
                             <LucyLoader
@@ -179,10 +183,19 @@ function App() {
             <Router>
                 <ActiveHardwareRosProvider>
                     <Layout style={{ minHeight: '100vh', backgroundColor: UI_BG_BLACK }}>
-                        <Content style={{ paddingBottom: isMobile ? '60px' : '0' }}>
+                        <Page
+                            showHeader
+                            title
+                            removeScrollbars={false}
+                            contentStyle={{
+                                ...PAGE_CONTENT_STYLE,
+                                paddingBottom: isMobile ? 72 : PAGE_CONTENT_STYLE.padding,
+                            }}
+                        >
                             <PersistentPages />
-                        </Content>
+                        </Page>
                         <Navigation />
+                        <GettingStartedModal />
                     </Layout>
                 </ActiveHardwareRosProvider>
             </Router>

src/Components/AnimationManager.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import {
-  Modal,
   Button,
   Input,
   Space,
@@ -16,16 +15,16 @@ import {
   DeleteOutlined
 } from '@ant-design/icons';
 import { storageService, type SavedPose, type SavedAnimation } from '../Services/storage.service.ts';
+import { MovableModal } from './MovableModal';
 import {
     UI_ACCENT_GREEN,
     UI_BORDER_SOFT,
     UI_COLOR_TRANSPARENT,
     UI_INPUT_SURFACE,
-    UI_MODAL_MASK_BG,
     UI_TEXT_PRIMARY_ON_DARK,
 } from '../Constants/uiTheme.ts';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 const { Option } = Select;
 
 interface AnimationManagerProps {
@@ -168,16 +167,16 @@ export const AnimationManager: React.FC<AnimationManagerProps> = ({ onPlayAnimat
       </Space>
 
       {/* Manage Animation Modal */}
-      <Modal
-        title={
-          <Title level={4} style={{ color: UI_ACCENT_GREEN, margin: 0 }}>
-            <SettingOutlined /> Manage Animations
-          </Title>
-        }
-        open={manageModalVisible}
-        onCancel={() => setManageModalVisible(false)}
-        footer={[
-           editingAnimId ? (
+      <MovableModal
+        modalName="MANAGE ANIMATIONS"
+        isVisible={manageModalVisible}
+        onClose={() => setManageModalVisible(false)}
+        initialPosition={{ x: 760, y: 120 }}
+        initialSize={{ w: 350, h: 650 }}
+        header={<SettingOutlined style={{ color: UI_ACCENT_GREEN }} />}
+        footer={
+          <>
+           {editingAnimId ? (
                <Popconfirm
                     key="delete"
                     title="Delete this animation?"
@@ -187,17 +186,24 @@ export const AnimationManager: React.FC<AnimationManagerProps> = ({ onPlayAnimat
                >
                    <Button danger icon={<DeleteOutlined />}>Delete</Button>
                </Popconfirm>
-           ) : null,
+           ) : null}
            <Button key="cancel" onClick={() => setManageModalVisible(false)}>
                Cancel
-           </Button>,
-           <Button key="save" type="primary" loading={loading} onClick={() => void handleSaveAnimation()} style={{ backgroundColor: UI_ACCENT_GREEN, borderColor: UI_ACCENT_GREEN }}>
+           </Button>
+           <Button
+            key="save"
+            type="primary"
+            loading={loading}
+            onClick={() => void handleSaveAnimation()}
+            style={{
+              backgroundColor: UI_COLOR_TRANSPARENT,
+              borderColor: UI_BORDER_SOFT,
+              color: UI_TEXT_PRIMARY_ON_DARK
+            }}>
                {editingAnimId ? 'Update Animation' : 'Create Animation'}
            </Button>
-        ]}
-        style={{ top: 100 }}
-        styles={{ mask: { backgroundColor: UI_MODAL_MASK_BG } }}
-        className="dark-modal"
+          </>
+        }
       >
         <Space direction="vertical" style={{ width: '100%', marginTop: 16 }} size="large">
           <div>
@@ -255,7 +261,7 @@ export const AnimationManager: React.FC<AnimationManagerProps> = ({ onPlayAnimat
             <Switch checked={loop} onChange={setLoop} />
           </div>
         </Space>
-      </Modal>
+      </MovableModal>
     </>
   );
 };

src/Components/AppHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { Button, Tooltip, Typography, Grid } from 'antd';
-import { SettingOutlined, ReadOutlined } from '@ant-design/icons';
+import { SettingOutlined, ReadOutlined, BugOutlined, NodeIndexOutlined } from '@ant-design/icons';
 import { useRosConnection } from '../hooks/useRosConnection.hook';
 import { ConnectedClientsHandler } from '../Services/ros/handlers/ConnectedClients.handler';
 import { ControlModeHandler } from '../Services/ros/handlers/ControlMode.handler';
@@ -13,6 +13,7 @@ import {
     UI_TEXT_SECONDARY_MUTED,
 } from '../Constants/uiTheme';
 import { SettingsModal, isAutoConnectEnabled } from './SettingsModal';
+import { ConnectionDebugModal, CommandDebugModal } from './PipelineDebugModal';
 
 const { Text } = Typography;
 const { useBreakpoint } = Grid;
@@ -21,6 +22,8 @@ export const AppHeader: React.FC = () => {
     const { connectionStatus, isConnected, connect, currentUrl } = useRosConnection();
     const [countState, setCountState] = useState<number>(0);
     const [isSettingsModalVisible, setIsSettingsModalVisible] = useState(false);
+    const [isConnectionDebugVisible, setIsConnectionDebugVisible] = useState(false);
+    const [isCommandDebugVisible, setIsCommandDebugVisible] = useState(false);
     const [activeControllerId, setActiveControllerId] = useState<string>(
         () => ControlModeHandler.getInstance().currentControllerId
     );
@@ -180,13 +183,27 @@ export const AppHeader: React.FC = () => {
                     {!isMobile && 'Documentation'}
                 </Button>
             </Tooltip>
+            <Tooltip title="Debug: connection pipeline">
+                <Button icon={<NodeIndexOutlined />} onClick={() => setIsConnectionDebugVisible(true)} />
+            </Tooltip>
+            <Tooltip title="Debug: command pipeline (slider to joint)">
+                <Button icon={<BugOutlined />} onClick={() => setIsCommandDebugVisible(true)} />
+            </Tooltip>
             <Tooltip title="Settings">
                 <Button icon={<SettingOutlined />} onClick={() => setIsSettingsModalVisible(true)} />
             </Tooltip>
             <SettingsModal
                 visible={isSettingsModalVisible}
                 onClose={() => setIsSettingsModalVisible(false)}
             />
+            <ConnectionDebugModal
+                isVisible={isConnectionDebugVisible}
+                onClose={() => setIsConnectionDebugVisible(false)}
+            />
+            <CommandDebugModal
+                isVisible={isCommandDebugVisible}
+                onClose={() => setIsCommandDebugVisible(false)}
+            />
         </div>
     );
 };