testing UI controls

jpoisso · Aug 15, 2024 · 8fbba30 · 8fbba30
1 parent 44e465e
commit 8fbba30
Showing 1 changed file with 80 additions and 0 deletions.
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Boat Controller</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
+    <style>
+        body {
+            background-color: #f0f0f0;
+        }
+        .controller {
+            width: 80%;
+            margin: 40px auto;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="controller">
+        <h1 class="title is-3">Boat Controller</h1>
+        <div class="columns is-multiline">
+            <div class="column is-6">
+                <div class="field">
+                    <label class="label">Speed</label>
+                    <div class="control">
+                        <input id="speed" type="range" min="0" max="255" value="0">
+                        <span id="speed-value">0</span>
+                    </div>
+                </div>
+            </div>
+            <div class="column is-12">
+                <div class="field">
+                    <label class="label">Steering</label>
+                    <div class="control">
+                        <input id="steering" type="range" min="-90" max="90" value="0">
+                        <span id="steering-value">0°</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const motorSpeedInput = document.getElementById('speed');
+        const rudderAngleInput = document.getElementById('steering');
+
+        motorSpeedInput.addEventListener('input', () => {
+            document.getElementById('speed-value').textContent = motorSpeedInput.value;
+            sendRequest();
+        });
+
+        rudderAngleInput.addEventListener('input', () => {
+            document.getElementById('steering-value').textContent = `${rudderAngleInput.value}°`;
+            sendRequest();
+        });
+
+        function sendRequest() {
+            const motorSpeed = motorSpeedInput.value;
+            const rudderAngle = rudderAngleInput.value;
+            fetch('/boat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ 
+                    'motor_speed': motorSpeed, 
+                    'rudder_angle': rudderAngle 
+                })
+            })
+            .then(response => response.json())
+            .then(data => console.log(data))
+            .catch(error => console.error(error));
+        }
+    </script>
+</body>
+</html>