trajectory reset

Author: jonas-eschmann

index.css

@@ -246,4 +246,9 @@ canvas{
 }
 #controller-code{
     min-width: 700px;
+}
+
+#reference-trajectory-options{
+    display:flex;
+    flex-wrap: wrap;
 }

index.html

@@ -199,6 +199,7 @@
             </template>
             <div id="reference-trajectory-options">
             </div>
+            <input type="button" id="reference-trajectory-reset" value="Reset"></input>
         </div>
         <div class="controls-container">
             <span class="slider-container">

index.js

@@ -173,6 +173,7 @@ async function main(){
         const trajectory_class = trajectories[event.target.value]
         trajectory = new trajectory_class()
 
+
         const trajectory_options_container = document.getElementById("reference-trajectory-options")
         trajectory_options_container.innerHTML = ""
         const trajectory_option_template = document.getElementById("reference-trajectory-option-template")
@@ -199,6 +200,10 @@ async function main(){
         }
     })
     trajectory_select.dispatchEvent(new Event("change"))
+    document.getElementById("reference-trajectory-reset").addEventListener("click", () => {
+        trajectory_select.dispatchEvent(new Event("change"))
+
+    })
 
     document.getElementById("default-checkpoint-btn").addEventListener("click", async () => {
         load_model(file_url)

trajectories/base.js

@@ -0,0 +1,18 @@
+export class Trajectory{
+    constructor(parameters){
+        this.parameters = parameters
+        this.parameter_values = {}
+        for(const [name, param] of Object.entries(this.parameters)){
+            this.parameter_values[name] = param.default
+        }
+    }
+    set_parameter(name, value){
+        this.parameter_values[name] = value
+    }
+    reset(){
+        this.parameter_values = {}
+        for(const [name, param] of Object.entries(this.parameters)){
+            this.parameter_values[name] = param.default
+        }
+    }
+}

trajectories/lissajous.js

@@ -1,17 +1,10 @@
-
-export class Lissajous{
+import { Trajectory } from "./base.js"
+export class Lissajous extends Trajectory{
     constructor(){
-        this.parameters = {
+        super({
             "period": {"range": [1, 15], "default": 10},
             "scale": {"range": [0, 5], "default": 0.1},
-        }
-        this.parameter_values = {}
-        for(const [name, param] of Object.entries(this.parameters)){
-            this.parameter_values[name] = param.default
-        }
-    }
-    set_parameter(name, value){
-        this.parameter_values[name] = value
+        })
     }
     evaluate(t){
         const scale = this.parameter_values.scale

trajectories/position.js

@@ -1,33 +1,13 @@
-export class Position{
+import { Trajectory } from "./base.js"
+export class Position extends Trajectory{
     constructor(){
-        this.parameters = {
+        super({
             "x": {"range": [-10, 10], "default": 0},
             "y": {"range": [-10, 10], "default": 0},
             "z": {"range": [-10, 10], "default": 0},
-        }
-        this.parameter_values = {}
-        for(const [name, param] of Object.entries(this.parameters)){
-            this.parameter_values[name] = param.default
-        }
-    }
-    set_parameter(name, value){
-        this.parameter_values[name] = value
+        })
     }
     evaluate(t){
         return [this.parameter_values.x, this.parameter_values.y, this.parameter_values.z, 0, 0, 0]
     }
 }
-
-// function lissajous(t){
-//     const scale = 0.5
-//     const duration = 10
-//     const A = 1
-//     const B = 0.5
-//     const progress = t * 2 * Math.PI / duration
-//     const d_progress = 2 * Math.PI / duration
-//     const x = scale * Math.sin(A * progress)
-//     const y = scale * Math.sin(B * progress)
-//     const vx = scale * Math.cos(A * progress) * A * d_progress
-//     const vy = scale * Math.cos(B * progress) * B * d_progress
-//     return [x, y, 0, vx, vy, 0]
-// }