updated results

ValerioSpagnoli · Aug 16, 2024 · c4e7660 · c4e7660
1 parent de0985e
commit c4e7660
Show file tree

Hide file tree

Showing 8 changed files with 518 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 This project implements a projective ICP based visual odometry to estimate both the trajectory of a robot and the 3D map of the visual features.
 
 ## Results
-The results are published on [GitHub Pages - ValerioSpagnoli/VisualOdometry](https://valeriospagnoli.github.io/VisualOdometry/) 
+
 
 
 ## Usage

diff --git a/docs/carousel.html b/docs/carousel.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carousel with 50 Slides</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        .carousel-container {
+            width: 900px;
+            height: 650px;
+            overflow: hidden;
+            position: relative;
+            margin: auto;
+            border: 2px solid #ccc;
+        }
+
+        .carousel {
+            display: flex;
+            width: calc(900px * 50);
+            height: 650px;
+            transition: transform 0.5s ease;
+        }
+
+        .slide {
+            width: 900px;
+            height: 650px;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #ffffff; 
+        }
+
+        .slide img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover; 
+        }
+
+        .controls {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-50%);
+            pointer-events: none;
+        }
+
+        .controls button {
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+            pointer-events: all;
+        }
+    </style>
+</head>
+<body>
+
+<div class="carousel-container">
+    <div class="carousel" id="carousel">
+    </div>
+    <div class="controls">
+        <button id="prevBtn">&lt;</button>
+        <button id="nextBtn">&gt;</button>
+    </div>
+</div>
+
+<script>
+    const carousel = document.getElementById('carousel');
+    for (let i = 1; i <= 119; i++) {
+        const slide = document.createElement('div');
+        slide.className = 'slide';
+
+        const table = document.createElement('table');
+        table.width = "880";
+
+        const tr1 = document.createElement('tr');
+        const td1 = document.createElement('td');
+        const title = document.createElement('h4');
+        title.textContent = `Results to estimate the relative transformation c${i}_T_c${i+1}`;
+        title.align = "center";
+        td1.appendChild(title);
+        tr1.appendChild(td1);
+
+        const tr2 = document.createElement('tr');
+        const td2 = document.createElement('td');
+        const img2 = document.createElement('img');
+        img2.src = `../outputs/frame_${String(i).padStart(2, '0')}/results.png`; 
+        img2.alt = `Slide ${i} - Image 2`;
+        td2.appendChild(img2);
+        tr2.appendChild(td2);
+
+        table.appendChild(tr1);
+        table.appendChild(tr2);
+
+        slide.appendChild(table);
+        carousel.appendChild(slide);
+    }
+
+    let currentIndex = 0;
+
+    const slides = document.querySelectorAll('.slide');
+    const totalSlides = slides.length;
+
+    document.getElementById('prevBtn').addEventListener('click', () => {
+        currentIndex = (currentIndex === 0) ? totalSlides - 1 : currentIndex - 1;
+        updateCarousel();
+    });
+
+    document.getElementById('nextBtn').addEventListener('click', () => {
+        currentIndex = (currentIndex === totalSlides - 1) ? 0 : currentIndex + 1;
+        updateCarousel();
+    });
+
+    function updateCarousel() {
+        const translateXValue = -currentIndex * 900; 
+        carousel.style.transform = `translateX(${translateXValue}px)`;
+    }
+</script>
+
+</body>
+</html>