adding vehicle list

jonas-eschmann · jonas-eschmann · commit 71679ba9d633 · 2025-03-25T13:33:12.000-04:00
diff --git a/index.css b/index.css
@@ -3,15 +3,58 @@ body {
     flex-direction: column;
     height: 100vh;
     margin: 0;
-    background-color: black;
     overflow: hidden;
 }
-#sim-container {
+#top-container {
+    display: flex;
+    flex-direction: row;
     flex-grow: 1;
-    background-color: white;
-    width: 100%;
     min-height: 0;
 }
+#vehicle-container{
+    width: 200px;
+    overflow: auto;
+    white-space: nowrap;
+}
+.vehicle{
+    margin: 10px;
+    padding: 5px;
+}
+.vehicle-hover{
+    background-color: grey;
+}
+.vehicle-body{
+    margin-left: 10px;
+}
+.vehicle-position{
+    font-family: monospace;
+}
+.vehicle-action{
+    font-family: monospace;
+}
+#sidebar-resizer {
+    width: 15px;
+    background-color: #ccc;
+    cursor: col-resize;
+    user-select: none;
+    background: repeating-linear-gradient(45deg, #e3e3e3, #e3e3e3 10px, #f1f1f1 10px, #f1f1f1 20px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#sidebar-resizer-handle{
+    width: 6px;
+    height: 50px;
+    background: #ffffff;
+    border-radius: 3px;
+    cursor: ew-resize;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+#sim-container {
+    background-color: white;
+    flex: 1;
+    min-width: 0;
+}
 #controls-box{
     background-color: #c5c5c5;
 }
diff --git a/index.html b/index.html
@@ -28,7 +28,25 @@
           <span class="perturbation-group-item-range"></span>
           <span class="perturbation-group-item-value"></span>
         </li>
-      </template>
+    </template>
+    <template id="vehicle-template">
+        <div class="vehicle">
+            <div class="vehicle-header">
+                <span class="vehicle-title"></span>
+                <span class="vehicle-id"></span>
+            </div>
+            <div class="vehicle-body">
+                <div>
+                    <span>Position: </span>
+                    <span class="vehicle-position"></span>
+                </div>
+                <div>
+                    <span>Action: </span>
+                    <span class="vehicle-action"></span>
+                </div>
+            </div>
+        </div>
+    </template>
     <link rel="stylesheet" href="./index.css">
     <script type="importmap">
         {
@@ -45,10 +63,17 @@
         }
     </script>
     <script type="module" src="./index.js"></script>
+    <script type="module" src="./sidebar.js"></script>
 </head>
 <body>
     <div id="status"></div>
-    <div id="sim-container"></div>
+    <div id="top-container">
+        <div id="vehicle-container"></div>
+        <div id="sidebar-resizer">
+            <div id="sidebar-resizer-handle"></div>
+        </div>
+        <div id="sim-container"></div>
+    </div>
     <div id="controls-box">
         <div id="controller-options-container">
             <div id="controller-selector-container">
diff --git a/index.js b/index.js
@@ -231,10 +231,47 @@ async function main(){
     proxy_controller = new ProxyController(new Policy(model))
     const l2f = new L2F(sim_container, 10, proxy_controller, seed)
 
+    l2f.state_update_callbacks.push((states) => {
+        const vehicle_container = document.getElementById("vehicle-container")
+        if(vehicle_container.children.length != states.length){
+            const vehicle_template = document.getElementById("vehicle-template")
+            vehicle_container.innerHTML = ""
+            states.forEach((state, i) => {
+                const vehicle_pre = vehicle_template.content.cloneNode(true)
+                const vehicle = vehicle_pre.querySelector(".vehicle")
+                vehicle.querySelector(".vehicle-title").textContent = `Vehicle ${i}`
+                // vehicle.querySelector(".vehicle-id").textContent = JSON.stringify(state.parameters.dynamics, null, 2)
+                vehicle_container.appendChild(vehicle)
+                vehicle.title = JSON.stringify(state.parameters.dynamics, null, 2)
+                // on hover
+                vehicle.addEventListener("mouseenter", (event) => {
+                    console.log(`hovering over vehicle ${i}`)
+                    vehicle.classList.add("vehicle-hover")
+                    event.stopPropagation()
+                })
+                vehicle.addEventListener("mouseleave", (event) => {
+                    vehicle.classList.remove("vehicle-hover")
+                    event.stopPropagation()
+                })
+            })
+        }
+        states.forEach((state, i) => {
+            const vehicle = vehicle_container.children[i]
+            const fixed = (x, n) => {
+                const y = x.toFixed(n);
+                return y >= 0 ? `+${y}` : y;
+            }
+            vehicle.querySelector(".vehicle-position").textContent = state.state.position.map(x => fixed(x, 3)).join(",")
+            vehicle.querySelector(".vehicle-action").textContent = state.action.map(x => fixed(x, 2)).join(",")
+        })
+
+    })
+
     const parameter_manager = new ParameterManager(l2f)
     const sim_controls = new SimControls(l2f, proxy_controller, parameter_manager)
 }
-window.onload = main
+
+document.addEventListener("DOMContentLoaded", main)
 
 const drag_and_drop_overlay = document.getElementById('drag-and-drop-overlay');
 let drag_and_drop_counter = 0;
diff --git a/l2f.js b/l2f.js
@@ -19,6 +19,9 @@ export class L2F{
 
         this.seed = seed
 
+
+        this.state_update_callbacks = []
+
         const urlParams = new URLSearchParams(window.location.search);
         this.DEBUG = urlParams.has('DEBUG') ? urlParams.get('DEBUG') === 'true' : false
 
@@ -89,14 +92,24 @@ export class L2F{
         else{
             this.states = this.states.slice(0, num)
         }
-        this.update_render_state()
         this.parameters = this.states.map(state => JSON.parse(state.get_parameters()))
+        this.update_render_state()
         await this.ui.episode_init_multi(this.ui_state, this.parameters)
         return diff
     }
     update_render_state(){
         this.render_states =  this.states.map(state => JSON.parse(state.get_state()))
         this.render_actions = this.states.map(state => JSON.parse(state.get_action()))
+
+        
+        const combined_state = this.render_states.map((state, i) => {
+            return {
+                "state": state,
+                "action": this.render_actions[i],
+                "parameters": this.parameters[i]
+            }
+        })
+        this.state_update_callbacks.forEach(callback => callback(combined_state))
     }
     simulate_step(){
         let dts = []
diff --git a/sidebar.js b/sidebar.js
@@ -0,0 +1,58 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const sidebarResizer = document.getElementById('sidebar-resizer');
+    const vehicleContainer = document.getElementById('vehicle-container');
+    const simContainer = document.getElementById('sim-container');
+    let isResizing = false;
+    let dragStartX = 0; 
+    let didMove = false; 
+    if(localStorage.getItem('vehicle-container-width') !== null) {
+        vehicleContainer.style.width = localStorage.getItem('vehicle-container-width')
+        window.dispatchEvent(new Event('resize'));
+    }
+
+    sidebarResizer.addEventListener('mousedown', initResize);
+    document.addEventListener('mousemove', resize);
+    document.addEventListener('mouseup', stopResize);
+
+    sidebarResizer.addEventListener('click', e => {
+        if (didMove) {
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
+        vehicleContainer.style.width = '0px';
+        localStorage.setItem('vehicle-container-width', '0px');
+        window.dispatchEvent(new Event('resize'));
+    });
+
+    function initResize(e) {
+        isResizing = true;
+        didMove = false;
+        dragStartX = e.clientX;
+        document.body.style.cursor = 'col-resize';
+        e.preventDefault();
+    }
+
+    function resize(e) {
+        if (!isResizing) return;
+
+        if (Math.abs(e.clientX - dragStartX) > 3) {
+            didMove = true;
+        }
+        
+        const containerRect = sidebarResizer.parentElement.getBoundingClientRect();
+        const newWidth = e.clientX - containerRect.left - sidebarResizer.getBoundingClientRect().width / 2;
+        
+        vehicleContainer.style.width = `${newWidth}px`;
+        simContainer.style.flexGrow = 1;
+        window.dispatchEvent(new Event('resize'));
+        localStorage.setItem('vehicle-container-width', newWidth);
+    }
+
+    function stopResize() {
+        isResizing = false;
+        document.body.style.cursor = 'default';
+        window.dispatchEvent(new Event('resize'));
+    }
+
+});
