raptor

Author: jonas-eschmann

blob

@@ -1,20 +1,25 @@
+html, body {
+    height: 100%; 
+    font-family: "Open Sans", sans-serif;
+}
 body {
     display: flex;
     flex-direction: column;
-    height: 100dvh;
+    height: 100svh;
     margin: 0;
-    overflow: hidden;
 }
 #top-container {
     display: flex;
     flex-direction: row;
-    flex-grow: 1;
+    flex: 1 1 auto;
     min-height: 0;
 }
 #vehicle-container{
     width: 0px;
     overflow: auto;
     white-space: nowrap;
+    min-height: 0;
+    min-width: 0;
 }
 #vehicle-container-header{
     margin: 10px;
@@ -60,10 +65,12 @@ body {
     background-color: white;
     flex: 1;
     min-width: 0;
+    min-height: 0;
 }
 #controls-box{
-    background-color: #c5c5c5;
-    overflow:auto;
+    overflow: auto;
+    flex: 0 0 auto;
+    max-height: 50svh;
 }
 .controls-container {
     display: flex;
@@ -255,4 +262,51 @@ canvas{
 #reference-trajectory-options{
     display:flex;
     flex-wrap: wrap;
+}
+
+
+.fancy-button {
+    display: inline-block;
+    margin: 5px;
+    font-family: "Open Sans", sans-serif;
+    font-weight: bold;
+    text-transform: uppercase;
+    text-decoration: none;
+    letter-spacing: 2px;
+    padding: 20px 40px;
+    border: none;
+    border-radius: 50px;
+    background: linear-gradient(to right, #6fd0cb, #7DB9B6);
+    color: #fff;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    white-space: nowrap;
+}
+
+.fancy-button:hover{
+    transform: translateY(-5px);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
+}
+
+.fancy-button:disabled {
+    background: linear-gradient(to right, #cccccc, #dddddd);
+    color: #666666;
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: 0.7;
+}
+
+
+.fancy-button-small{
+    letter-spacing: 1px;
+    padding: 10px 20px;
+    border-radius: 25px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    font-size: 70%;
+}
+
+.fancy-button-small:hover{
+    transform: translateY(-2.5px);
+    box-shadow: 0 4px 7.5px rgba(0, 0, 0, 0.3);
 }

index.css

@@ -93,6 +93,26 @@
         <div id="sim-container"></div>
     </div>
     <div id="controls-box">
+        <div id="raptor-project-page" class="controls-container" style="display: none;">
+            <center>
+                <h1 style="margin: 0; margin-bottom: 5px;"><img src="./blob/logo.svg" style="width: 13rem; vertical-align: middle;"></img>: A Foundation Policy for Quadrotor Control</h1>
+                <h3 style="margin: 0; margin-bottom: 10px;">Jonas Eschmann, Dario Albani, Giuseppe Loianno</h3>
+                <a class="fancy-button fancy-button-small" href="https://github.com/rl-tools/foundation-policy">Code on Github</a>
+                <a class="fancy-button fancy-button-small" href="">Paper on ArXiV</a>
+                <div style="margin: 10px;">
+                    <iframe src="https://www.youtube.com/embed/PdRgxDDvUws?si=jToj556_kJDtVbhx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                </div>
+                <div style="margin: 10px;">
+                    This web app allows you to torture the <img src="./blob/logo.svg" style="width: 7rem; vertical-align: middle;"></img> foundation policy using different quadrotor models, reference trajectories and disturbances. 
+                    You can reset the episodes by pressing "Sample Initial States". You can simulate step-by-step using "Pause on Reset" and then "Step" throught the episode.
+                    <br>
+                    The "X Offset" spreads out the quadrotors (click it to change to Y/Z offset).
+                    You can drag the sidebar next to the 3D view to reveal the menu for loading dynamics parameters. 
+                    You can select one of the presets in the dropdown as well as load parameters from disk, following the l2f json format. 
+                    The last row allows you to perturb dynamics parameters based on a simple formula (hover over the formula input for a description of the variables).
+                </div>
+            </center>
+        </div>
         <div id="controller-options-container" class="controls-container controls-container-every-other">
             <div id="controller-selector-container">
                 <form id="controller-selector-form">

index.html

@@ -201,6 +201,9 @@ async function load_model(checkpoint) {
 }
 
 async function main() {
+    if(window.location.hostname === "raptor.rl.tools" || urlParams.get("raptor") === "true"){
+        document.getElementById("raptor-project-page").style.display = "block";
+    }
     const trajectory_offset_container = document.getElementById("reference-trajectory-offset-container")
     const trajectory_offset_slider = trajectory_offset_container.querySelector("input[type=range]")
     const trajectory_offset_label = trajectory_offset_container.querySelectorAll(".control-container-label")[0]

index.js

@@ -51,13 +51,31 @@ export class L2F{
         const dpr = window.devicePixelRatio || 1;
         const resizeCanvas = () => {
             const parentRect = parent.getBoundingClientRect();
-            this.canvas.style.width = parentRect.width + 'px';
-            this.canvas.style.height = parentRect.height + 'px';
-            this.canvas.width = parentRect.width * dpr;
-            this.canvas.height = parentRect.height * dpr;
+            const newWidth = parentRect.width;
+            const newHeight = parentRect.height;
+            
+            // Only update if dimensions actually changed
+            if (this.canvas.style.width !== newWidth + 'px' || 
+                this.canvas.style.height !== newHeight + 'px') {
+                
+                this.canvas.style.width = newWidth + 'px';
+                this.canvas.style.height = newHeight + 'px';
+                this.canvas.width = newWidth * dpr;
+                this.canvas.height = newHeight * dpr;
+            }
         };
-        resizeCanvas()
-        window.addEventListener('resize', resizeCanvas.bind(this), false);
+        resizeCanvas();
+        
+        // Use ResizeObserver for better resize detection
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(entries => {
+                resizeCanvas();
+            });
+            this.resizeObserver.observe(parent);
+        } else {
+            // Fallback for older browsers
+            window.addEventListener('resize', resizeCanvas.bind(this), false);
+        }
         this.policy = policy
 
         this.initialized = createModule().then(async (l2f_interface) => {

l2f.js

@@ -337,7 +337,7 @@ export class DroneDefault{
 }
 
 async function drone_factory(parameters, origin, displayIMUCoordinateSystem, displayActions){
-  if(parameters.ui && parameters.ui.model){
+  if(parameters.ui && parameters.ui.enable && parameters.ui.model){
     try{
       const model = new DroneMesh(parameters, origin, displayIMUCoordinateSystem, displayActions)
       await model.loaded