video debug toggle; fixing fixed point in sidebar

Author: jonas-eschmann

index.html

@@ -102,9 +102,8 @@ <h1 style="margin: 0; margin-bottom: 5px;"><img src="./blob/logo.svg" style="wid
                 <h3 style="margin: 0; margin-bottom: 10px;">Jonas Eschmann, Dario Albani, Giuseppe Loianno</h3>
                 <a class="fancy-button fancy-button-small" href="">Paper on ArXiV</a>
                 <a class="fancy-button fancy-button-small" href="https://github.com/rl-tools/foundation-policy">Code on Github</a>
-                <div style="margin: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">
-                    <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */">
-                        <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 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+                <div id="video-container" style="margin: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">
+                    <div id="video-container-inner" style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */">
                     </div>
                 </div>
                 <div style="margin: 10px;">

index.js

@@ -72,7 +72,7 @@ class Policy{
     }
     get_observation(state, obs) {
         let vehicle_state = null
-        const full_observation = state.get_observation()
+        const full_observation = Array.from(state.get_observation())
         console.assert(full_observation.length > 18, "Observation is smaller than base observation")
         const get_state = () => {
             if (vehicle_state === null) {
@@ -132,7 +132,7 @@ class Policy{
         return states.map((state, i) => {
             state.observe()
             const observation_description = document.getElementById("observations").observation
-            let input = math.matrix([observation_description.split(".").map(x => Array.from(this.get_observation(state, x))).flat()])
+            let input = math.matrix([observation_description.split(".").map(x => this.get_observation(state, x)).flat()])
             const reference = references[i]
             reference.forEach((x, i) => {
                 const value_raw = input._data[0][i] - x;

l2f.js

@@ -119,10 +119,10 @@ export class L2F{
     }
     update_render_state(){
         this.render_states =  this.states.map(state => {return {
-            "position": state.get_position(),
-            "orientation": state.get_orientation()
+            "position": Array.from(state.get_position()),
+            "orientation": Array.from(state.get_orientation())
         }})
-        this.render_actions = this.states.map(state => state.get_action())
+        this.render_actions = this.states.map(state => Array.from(state.get_action()))
 
 
         const combined_state = this.render_states.map((state, i) => {

raptor.js

@@ -2,5 +2,11 @@ document.addEventListener("DOMContentLoaded", () => {
     const urlParams = new URLSearchParams(window.location.search)
     if(window.location.hostname === "raptor.rl.tools" || urlParams.get("raptor") === "true"){
         document.getElementById("raptor-project-page").style.display = "block";
+        if(urlParams.get("yt") !== "false"){
+            document.getElementById("video-container-inner").innerHTML = '<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 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>';
+        }
+        else{
+            document.getElementById("video-container").style.display = "none";
+        }
     }
 })