added videos

Author: wassfila

content/robotics/rovi.md

@@ -12,14 +12,22 @@ features:
 
 # Github
 
+The source code of all ROS2 packages developed in this project are available in this repo. The readme contains detailed documentation and diagrams.
+
 :button[]{label="Rovi ROS2 Jazzy Workspace" link="https://github.com/Roblibs/rovi_ros_ws" icon="github"}
 
 # Description
 A car robot platform based on the Yahboom Rosmaster X3-Plus mecanum chassis, customized sensors and fresh new ROS2 Jazzy software for native ubuntu 24 development (no docker) on Raspberry pi 5
 
-![rovi-controlled-with-joystick](./room_view_bot/20251018_141343.jpg)
+Video from the latest development stage. The robot can navigate to a goal while building a map with SLAM, control can also be overriden from a Joystick.
+
+:iframe[]{src="https://youtu.be/TfBXTf1QenI" title="Centered Video" center}
+
+
+This video below demonstrates the Mecanum wheels omnidirectional capabilities
+
+:iframe[]{src="https://youtu.be/-Qnhs4Jbu7k" title="Centered Video" center}
 
-Photo from the latest development stage. The robot can be controlled with PS4 joystick over bluetooth and using python and Rosmaster_Lib.
 
 # Steps
 
@@ -29,7 +37,7 @@ This robot will be built in stage with progressive functionalities
 | ---     | ---    | ---         | ---         | ---       | --- |
 | Manual  | Done | Test car movement with a Joystick | WiFi, M-Control, BT Joystick | 12_V | Raspi_Ports |
 | Slam    | Done | ROS2 Slam with Lidar | WiFi, M-Control, Lidar | 12_V + USB_Bank | x1 Hub |
-| Navi    |  -     | ROS2 Slam+Nav with Lidar | WiFi, M-Control, Lidar | 12_V + USB_Bank | x1 Hub |
+| Navi    | Done   | ROS2 Slam+Nav with Lidar | WiFi, M-Control, Lidar | 12_V + USB_Bank | x1 Hub |
 | Navi+   |  -     | Slam+Nav with Depth obstacles avoidance | WiFi, M-Control, Lidar, Depth | 12_V + USB_Bank | x1 Hub |
 | VR      |  -     | Stereo Camera for Virtual Reality telepresence and inspection | WiFi, M-Control, Lidar, Depth, Stereo_Cam | 12_V + USB_Bank | x1 Hub |
 | Interaction | -  | Interactive voice communication | WiFi, M-Control, Lidar, Depth, Stereo_Cam, Mic_Array, Speaker | 12_V + USB_Bank | x2 Hubs |

src/components/markdown/directive/Directive.astro

@@ -7,6 +7,7 @@
 import ImageDirective from './ImageDirective.astro';
 //import ImageDirective from './OptimizedImageDirective.astro';
 import ButtonDirective from './ButtonDirective.astro'
+import IframeDirective from './IframeDirective.astro'
 
 export interface Props {
     node: object;
@@ -17,7 +18,8 @@ const { node, dirpath} = Astro.props as Props;
 
 const is_image = (node.name == "image")
 const is_button = (node.name == "button")
-const is_other = !(is_image || is_button)
+const is_iframe = (node.name == "iframe")
+const is_other = !(is_image || is_button || is_iframe)
 
 ---
 {is_image &&
@@ -26,6 +28,9 @@ const is_other = !(is_image || is_button)
 {is_button &&
   <ButtonDirective label={node.attributes.label} link={node.attributes.link} icon={node.attributes.icon} />
 }
+{is_iframe &&
+  <IframeDirective node={node} dirpath={dirpath} />
+}
 {is_other &&
   <div>{node.name}
     {Object.keys(node.attributes).map((key)=>(<span>{key} = {node.attributes[key]}</span>))}

src/components/markdown/directive/IframeDirective.astro

@@ -0,0 +1,60 @@
+---
+export interface Props {
+  node: object;
+  dirpath: string;
+}
+
+const { node, dirpath } = Astro.props as Props;
+
+// Get the src attribute
+let src = node.attributes.src || "";
+
+// Convert YouTube URLs to embed format
+if (src.includes("youtu.be/")) {
+  // Format: https://youtu.be/VIDEO_ID?si=XXXX
+  const match = src.match(/youtu\.be\/([^?]+)/);
+  if (match) {
+    src = `https://www.youtube.com/embed/${match[1]}`;
+  }
+} else if (src.includes("youtube.com/watch")) {
+  // Format: https://www.youtube.com/watch?v=VIDEO_ID
+  const match = src.match(/[?&]v=([^&]+)/);
+  if (match) {
+    src = `https://www.youtube.com/embed/${match[1]}`;
+  }
+}
+
+const title = node.attributes.title || "";
+const width = node.attributes.width || "560";
+const height = node.attributes.height || "315";
+
+let containerClass = "iframe-container";
+if (Object.hasOwn(node.attributes, "center")) {
+  containerClass += " center";
+}
+---
+
+<div class={containerClass}>
+  <iframe
+    src={src}
+    title={title}
+    width={width}
+    height={height}
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+  ></iframe>
+</div>
+
+<style>
+  .iframe-container {
+    margin-bottom: 1em;
+  }
+  .center {
+    display: flex;
+    justify-content: center;
+  }
+  iframe {
+    border: none;
+    max-width: 100%;
+  }
+</style>