gamepad integration into l2f decent

Author: jonas-eschmann

gamepad.css

@@ -1,3 +1,7 @@
+#gamepad-controls {
+    display: flex;
+}
+
 #gamepad-status {
     padding: 8px;
     margin-bottom: 15px;
@@ -42,8 +46,14 @@
     border-radius: 50%;
     background-color: #ccc;
 }
+#gamepad-button-container-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
 #gamepad-button-container {
-    margin-top: 20px;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -56,6 +66,10 @@
     background-color: #007bff;
     color: white;
     cursor: pointer;
+    align-self: flex-start;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-basis: auto;
 }
 .gamepad-button:hover {
     background-color: #0069d9;

gamepad.html

@@ -10,7 +10,7 @@
     <template id="gamepad-axis-template">
         <div class="gamepad-controls-row">
             <div class="gamepad-controls-name gamepad-controls-cell"></div>
-            <div class="gamepad-slider-container gamepad-controls-cell"><input type="range" class="gamepad-slider" min="-1" max="1" value="0" step="0.01" disabled></div>
+            <div class="gamepad-slider-container gamepad-controls-cell"><input type="range" class="gamepad-slider" min="-1" max="1" value="0" step="0.01"></div>
             <div class="gamepad-value-display gamepad-controls-cell">0.00</div>
         </div>
     </template>
@@ -22,14 +22,16 @@
             <div></div>
         </div>
     </template>
-    <template id="gamepad-template">
+    <div id="gamepad-container">
         <div id="gamepad-status" class="gamepad-disconnected">No gamepad connected</div>
-        <div id="gamepad-state">
-
-        </div>
-        <div id="gamepad-button-container">
+        <div id="gamepad-controls">
+            <div id="gamepad-state"></div>
+            <div id="gamepad-button-container-container">
+                <div id="gamepad-button-container"></div>
+            </div>
         </div>
-    </template>
+    </div>
+    </div>
     <h1>Quadrotor Gamepad Controller</h1>
     <script type="module">
         import { Gamepad } from "./gamepad.js";

gamepad.js

@@ -83,11 +83,11 @@ class Mapper{
     }
 }
 export class Gamepad{
-    constructor(parent, gamepad_interface){
-        const template = document.getElementById('gamepad-template');
-        const clone = template.content.cloneNode(true);
-        parent.appendChild(clone);
-        this.element = parent.lastElementChild;
+    constructor(element, gamepad_interface){
+        // const template = document.getElementById('gamepad-template');
+        // const clone = template.content.cloneNode(true);
+        // parent.appendChild(clone);
+        this.element = element; //parent.lastElementChild;
         this.gamepad_interface = gamepad_interface;
         this.mapper = null;
         this.control_map = {}
@@ -117,7 +117,9 @@ export class Gamepad{
             document.querySelectorAll('.gamepad-mapping-button').forEach((btn) => { btn.disabled = true; });
             this.render_live_view()
         };
-        document.getElementById("gamepad-button-container").appendChild(reset_button);
+        const button_container = document.getElementById("gamepad-button-container")
+        button_container.innerHTML = '';
+        button_container.appendChild(reset_button);
 
 
         for (const channel in gamepad_interface){
@@ -148,7 +150,7 @@ export class Gamepad{
                     });
                 }
             };
-            document.getElementById("gamepad-button-container").appendChild(button);
+            button_container.appendChild(button);
         }
         this.poll()
     }

index.css

@@ -180,7 +180,7 @@ canvas{
     font-family: monospace;
     font-size: 80%;
     /*color: #e63946;*/
-    max-width: 700px;
+    /* max-width: 700px; */
     word-break: break-all;
     margin-right: 12px;
 }
@@ -194,7 +194,7 @@ canvas{
 #observations{
     font-family: monospace;
     font-size: 80%;
-    width: 60em;
+    width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -216,11 +216,9 @@ canvas{
     display: flex;
     flex-direction: column;
     margin-block-end: 0em;
+    white-space: nowrap;
 }
 
-#controller-container{
-    display: none;
-}
 
 #policy-container{
     display: grid;
@@ -232,6 +230,12 @@ canvas{
     padding-top: 2px;
     padding-bottom: 3px;
 }
+#controller-container{
+    display: none;
+}
+#gamepad-container{
+    display: none;
+}
 .policy-container-item{
     display: flex;
     align-items: center;

index.html

@@ -94,6 +94,10 @@
                         <input type="radio" name="choice" value="controller">
                         Controller
                     </label>
+                    <label>
+                        <input type="radio" name="choice" value="gamepad">
+                        Gamepad
+                    </label>
                 </form>
             </div>
             <div id="policy-container" class="controller-container">
@@ -113,11 +117,12 @@
             <div id="controller-container" class="controller-container">
                 <textarea id="controller-code" rows=10 value="(x, u) => x.map((v, i) => v + u[i] * 0.1)"></textarea>
             </div>
-            <div id="gamepad-container">
+            <div id="gamepad-container" class="controller-container">
+                <link rel="stylesheet" href="./gamepad.css">
                 <template id="gamepad-axis-template">
                     <div class="gamepad-controls-row">
                         <div class="gamepad-controls-name gamepad-controls-cell"></div>
-                        <div class="gamepad-slider-container gamepad-controls-cell"><input type="range" class="gamepad-slider" min="-1" max="1" value="0" step="0.01" disabled></div>
+                        <div class="gamepad-slider-container gamepad-controls-cell"><input type="range" class="gamepad-slider" min="-1" max="1" value="0" step="0.01"></div>
                         <div class="gamepad-value-display gamepad-controls-cell">0.00</div>
                     </div>
                 </template>
@@ -129,13 +134,13 @@
                         <div></div>
                     </div>
                 </template>
-                <template id="gamepad-template">
-                    <div id="gamepad-status" class="gamepad-disconnected">No gamepad connected</div>
-                    <div id="gamepad-state">
-                    </div>
-                    <div id="gamepad-button-container">
+                <div id="gamepad-status" class="gamepad-disconnected">No gamepad connected</div>
+                <div id="gamepad-controls">
+                    <div id="gamepad-state"></div>
+                    <div id="gamepad-button-container-container">
+                        <div id="gamepad-button-container"></div>
                     </div>
-                </template>
+                </div>
             </div>
 
         </div>

index.js

@@ -3,6 +3,7 @@ import { SimControls } from "./sim_controls.js";
 import { ParameterManager } from "./parameter_manager.js";
 import * as rlt from "rltools"
 import * as math from "mathjs"
+import { Gamepad } from "./gamepad.js"
 
 // import Controller from  "./controller.js"
 
@@ -210,14 +211,43 @@ async function main(){
                 if(event.target.value === "policy"){
                     document.getElementById("policy-container").style.display = "block"
                     document.getElementById("controller-container").style.display = "none"
+                    document.getElementById("gamepad-container").style.display = "none"
                     proxy_controller.policy = new Policy(model)
                 }
-                else{
+                else if(event.target.value === "controller"){
                     document.getElementById("policy-container").style.display = "none"
                     document.getElementById("controller-container").style.display = "block"
+                    document.getElementById("gamepad-container").style.display = "none"
                     const event = new KeyboardEvent("keydown", {key: "Enter"});
                     document.getElementById("controller-code").dispatchEvent(event);
                 }
+                else if(event.target.value === "gamepad"){
+                    document.getElementById("policy-container").style.display = "none"
+                    document.getElementById("controller-container").style.display = "none"
+                    document.getElementById("gamepad-container").style.display = "block"
+                    const parent = document.getElementById("gamepad-container")
+                    const gamepad = new Gamepad(parent, {
+                        "thrust": {
+                            type: "axis",
+                            positive_direction: "Up"
+                        },
+                        "roll": {
+                            type: "axis",
+                            positive_direction: "Right"
+                        },
+                        "pitch": {
+                            type: "axis",
+                            positive_direction: "Forward"
+                        },
+                        "yaw": {
+                            type: "axis",
+                            positive_direction: "Clockwise"
+                        },
+                        "reset": {
+                            type: "button"
+                        },
+                    })
+                }
             });
         });
     })