Update index.html

index.html

@@ -29,6 +29,7 @@
             display: flex;
             width: 100%;
             max-width: 1500px;
+            margin-top: 100px;
         }
 
         .episode-list {
@@ -47,14 +48,23 @@
             justify-content: space-between;
             flex-grow: 1;
         }
-
+        
         .video-container {
-            width: 48%;
+            width: 58%;
         }
 
         #plotDiv {
-            width: 440px;
-            height: 600px;
+            width: 460px;
+            height: 485px;
+        }
+
+        #episodes-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 2px;
+            padding: 0px;
+            background-color: #222;
+            border-radius: 3px;
         }
 
         video {
@@ -67,7 +77,7 @@
             justify-content: center;
             margin-top: 2px;
         }
-
+·
         button {
             margin: 0 5px;
             font-size: 20px;
@@ -82,7 +92,7 @@
             display: block;
             margin-bottom: 20px;
         }
-
+    
         #loadingIndicator {
             display: none;
             position: fixed;
@@ -95,6 +105,41 @@
             border-radius: 5px;
             z-index: 1000;
         }
+
+        .checkbox-list {
+            max-height: 400px;  /* 设置最大高度，超过此高度会出现滚动条 */
+            overflow-y: auto;   /* 添加垂直滚动条 */
+            padding-right: 10px; /* 为滚动条留出空间 */
+        }
+
+        .checkbox-list label {
+            display: block;
+            margin-bottom: 0px;
+            color: #ddd;
+        }
+
+        .checkbox-list input[type="checkbox"] {
+            margin-right: 10px;
+        }
+
+        /* 自定义滚动条样式（针对WebKit浏览器） */
+        .checkbox-list::-webkit-scrollbar {
+            width: 0px;
+        }
+
+        .checkbox-list::-webkit-scrollbar-track {
+            background: #333;
+            border-radius: 4px;
+        }
+
+        .checkbox-list::-webkit-scrollbar-thumb {
+            background: #666;
+            border-radius: 4px;
+        }
+
+        .checkbox-list::-webkit-scrollbar-thumb:hover {
+            background: #888;
+        }
     </style>
 </head>
 
@@ -102,16 +147,21 @@
     <h1>Motion Capture Visualization</h1>
 
     <div class="main-container">
+        <!--
         <div class="episode-list">
             <h3>Episodes</h3>
-            <!-- Episode checkboxes -->
             <label><input type="checkbox"> Episode 1</label>
             <label><input type="checkbox"> Episode 2</label>
-            <!-- ... Add all episodes up to 30 ... -->
             <label><input type="checkbox"> Episode 29</label>
             <label><input type="checkbox"> Episode 30</label>
         </div>
-
+        -->
+        <div id="episodes-container">
+            <h3>Episodes</h3>
+            <div class="checkbox-list">
+                <!-- 复选框将在这里动态生成 -->
+            </div>
+        </div>
         <div class="content-container">
             <div class="checkbox-container">
                 <h3>Tasks</h3>
@@ -162,6 +212,19 @@
         const forwardBtn = document.getElementById('forwardBtn');
         const restartBtn = document.getElementById('restartBtn');
         const radioButtons = document.querySelectorAll('input[name="videoOption"]');
+        let totalEpisodes = 30; //获取episode的数量
+        // const container = document.getElementById('episodes-container')
+        // 循环创建复选框
+        const container = document.querySelector('#episodes-container .checkbox-list');
+        for (let i = 1; i <= totalEpisodes; i++) {
+            const label = document.createElement('label');
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.id = `episode-${i}`;
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(` Episode ${i}`));
+            container.appendChild(label);
+        }
         let animationFrameId;
         let isPlaying = false;
         function togglePlayPause() {
@@ -208,7 +271,7 @@
                     z: getCoordinates(row, 'z'),
                     mode: 'markers',
                     type: 'scatter3d',
-                    marker: { size: 4, color: 'blue' }
+                    marker: { size: 4.8, color: "blue" }
                 }]
             }));
             if (frames.length === 0) {
@@ -217,11 +280,42 @@
             }
             const initialFrame = frames[0].data[0];
             const layout = {
-                title: '3D Motion Capture',
+                title: {
+                    text: '3D Motion Capture',
+                    font: { 
+                        color: 'white',
+                        size: 20  // 设置字体大小
+                    },
+                    x: 0.5,  // 设置标题在x轴的位置（0.5表示居中）
+                    y: 1
+                },
+                paper_bgcolor: 'black',
+                plot_bgcolor: 'black',
                 scene: {
-                    xaxis: { title: 'X' },
-                    yaxis: { title: 'Y' },
-                    zaxis: { title: 'Z' }
+                    xaxis: { 
+                        title: 'X',
+                        color: 'white',
+                        gridcolor: 'gray'
+                    },
+                    yaxis: { 
+                        title: 'Y',
+                        color: 'white',
+                        gridcolor: 'gray'
+                    },
+                    zaxis: { 
+                        title: 'Z',
+                        color: 'white',
+                        gridcolor: 'gray'
+                    },
+                    bgcolor: 'black'
+                },
+                font: { color: 'white' },
+                margin: {
+                    l: 2,    // 左边距
+                    r: 2,    // 右边距
+                    b: 2,    // 底部边距
+                    t: 50,   // 顶部边距
+                    pad: 4   // 图表内边距
                 }
             };
             Plotly.newPlot('plotDiv', [initialFrame], layout);