update

certs/cert.pem

@@ -0,0 +1,19 @@
+-----BEGIN CERTIFICATE-----
+MIIDGjCCAgKgAwIBAgIUdNm0OQEuMPg1qCqxpUdmqWEwlpIwDQYJKoZIhvcNAQEL
+BQAwFDESMBAGA1UEAwwJMTI3LjAuMC4xMB4XDTI1MDUxMjE4NDY0MFoXDTI2MDUx
+MjE4NDY0MFowFDESMBAGA1UEAwwJMTI3LjAuMC4xMIIBIjANBgkqhkiG9w0BAQEF
+AAOCAQ8AMIIBCgKCAQEAtX4QVKYQOKceZLfstjNTV3FPBHkDqneaDwyVvsPbm8gm
+slhPTY5upHFjMJFH5MBkbR6jdG0aKTLIaBOct8RcJ6LkECNtb5Wn7A4QhPogHrev
+qOTT7/tVhCOgDTmvmJD33GA3tHfo2QLXbfYxXxiAO0WB2L2F2/oWPOOji6UCKL9B
++TgoivP99im2GIanJy8muVU4piKfOUskQs0WbjkCclNROohxiMUK8iBXXFvIxhpg
+2l1MKVSo9IPbwvrlha5Ixyb3yguzkfCILjTDtJoXsUkpfdc4XYaHbcuI8LEujcoN
+dmHwImkpWd7I/MTZDNbvcaCpd1+APqJyuIOhZCdXxwIDAQABo2QwYjAdBgNVHQ4E
+FgQUG/GjXqossD4HAaDWRT17HMQ9190wHwYDVR0jBBgwFoAUG/GjXqossD4HAaDW
+RT17HMQ9190wDwYDVR0TAQH/BAUwAwEB/zAPBgNVHREECDAGhwR/AAABMA0GCSqG
+SIb3DQEBCwUAA4IBAQBnhkeoWRk/2FLlSXx4kI8nAUVyOfzdRGtNw80IZk5eIJun
+eI030W0NvrQIxuzvfQIUB3D1sfwkfMAgR10viKSOUcAalrJYup6TKOizXIB+r3Yx
+rhRiolw4wP3HixmnlcqfZXekVcRVM3GW9+0o0NW223EEp3vNCskMvSiJ2Ia6J+TI
+LAoteVZ1FxZBt0b9uWuDD6btfhBXza/dzIxVTWswfaqlfBQYznqX2ZzUS9bIMC37
+UdihzUgEpPoiqKfN3PoeXsXq3NZvqTx4E25qJWhIVSuOBUmzdfizRAy4SiKJfEmT
+5MJvnthT47CH2Yym50YL9ZBVj6K9vBGiSYjTaLhV
+-----END CERTIFICATE-----

certs/key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC1fhBUphA4px5k
+t+y2M1NXcU8EeQOqd5oPDJW+w9ubyCayWE9Njm6kcWMwkUfkwGRtHqN0bRopMsho
+E5y3xFwnouQQI21vlafsDhCE+iAet6+o5NPv+1WEI6ANOa+YkPfcYDe0d+jZAtdt
+9jFfGIA7RYHYvYXb+hY846OLpQIov0H5OCiK8/32KbYYhqcnLya5VTimIp85SyRC
+zRZuOQJyU1E6iHGIxQryIFdcW8jGGmDaXUwpVKj0g9vC+uWFrkjHJvfKC7OR8Igu
+NMO0mhexSSl91zhdhodty4jwsS6Nyg12YfAiaSlZ3sj8xNkM1u9xoKl3X4A+onK4
+g6FkJ1fHAgMBAAECggEACIQ3LJAZ8CnTamMarfzf+v+O3cUp9iyKygyYO3pOvbm/
+xLWri8mhVbRMzo4hFmuUXges7Un88ZSRXktK56REtZPWUA8n7WKgULQWQI8vxURv
+iNh4CemJPHXWTSVfh1eIi5eBdav8yeLxJf1PMsjgPfSUhvQM9uLk4T8s9C2uWY52
+DeqW0SbVfs0LXEJ6GZT3oGm5seN5Gac1vkPEoRAHFo5kvi5zMmMJkP0UgVOdlgE6
+mxusdYlNdQCUTebQpaBUMBAFz7geyTnx3uMJJ5G1KxW7VA6uSVAN5RUuhD467/2n
+U40EnI9Skv7o/+pznmZu6yKtIs6OwEy+ASQGuodxDQKBgQDBiRmJHmybQXqvKXCH
+82Th4eiNoAMz5PmK8VrMhZraXJOIV7IywPiywDMWNFfWM3LEMsJKl3VXHtUrQL5N
+7WY7xCkRF9Qhay7Hlhi7aBBWk0DPqgN4qdJhWr9xvKuhOxZVC+pMtHZZFyBjtADW
+NI9rnC0uosAoSzjzPwdNikXZHQKBgQDwEeaJ3mK4lev5IbqZO6SKxJ2IFdViD+h2
+TtCjSx2XKJ0fPLDjHhYE7quPFrUQh9kzDoWKTjCdwLOu/sr+VL9nn5bhcsQT7t9l
+TmehjxYgHaqVdtwNjV3S/E6T3gKbWRAHMpLcvqiwt9PdWELsAbjf/ugwraPM9CUr
+xjNgCIzDMwKBgAh3afGQrimglLBi/LRF1oz3KAhCDsHPa4dDhbhaw+p3kFCvnXEQ
+9hBDzjhTc+BAAe5JViyTMaPtCmBJBco873L/4tgHldUcbkB29YAFTmmrKXOsOVim
+/TgbEzLzkQKNpi10RvyyDFdbZqRV9I9qXzfS7jsTDZr1p3kksboXqXSVAoGACUhH
+57DHlGeHljxtoJsjw5HSnX5qn74JuPlXK9ktrbiOSrToCgARzeMEkyXHnnoCNe0r
+0KsxSgg3al7Dro3MUM9k4Ba16idkT+B2NVL5AgjjnZ/Y5lU++Xdz+letNiB9dCnK
+b+qXTy3sbTSKceGnKlIK3Eb6fGQ8Q7MILYBnIO0CgYEAn9WJHcJodXFVd1vngU1A
+/+hGs9PMOUHqD7SuNy0HggifuCXJ9w+PWPT5gFtGlgY5EyH0DYKQ+ZrTgRdL2mTA
+6BYUjaIi1ggWsc71xwM8loqahz+Amwo1Mqfk3KAbR2LQ8qog87+Pn3AVn3T/EWGf
+Tbg2W8xEdzpksMzugg8Vx7E=
+-----END PRIVATE KEY-----

dummy_server.py

@@ -2,7 +2,7 @@ from flask import Flask, request
 from flask_cors import CORS
 
 app = Flask(__name__)
-CORS(app)  # Allow cross-origin from browser
+CORS(app)
 
 motor_states = {f"motor_{i}": 0.0 for i in range(6)}
 
@@ -18,4 +18,4 @@ def control_motor():
 
 
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=5001)
+    app.run(host="0.0.0.0", port=5001, ssl_context=("certs/cert.pem", "certs/key.pem"))

requirements.txt

@@ -1 +1,4 @@
+eventlet
 flask
+flask-cors
+flask-socketio

server.py

@@ -8,5 +8,10 @@ def root():
     return send_from_directory("static", "index.html")
 
 
+@app.route("/sinus")
+def sinus():
+    return send_from_directory("static", "sinus.html")
+
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860)

static/main.js

@@ -1,4 +1,4 @@
-const robotIp = "https://127.0.0.1:5001"
+const robotIp = "http://127.0.0.1:5001"
 window.onload = () => {
     const container = document.getElementById("sliders");
     for (let i = 0; i < 6; i++) {
@@ -13,7 +13,7 @@ window.onload = () => {
             fetch(`${robotIp}/motor_control`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ motor: `motor_${i}`, value: parseFloat(input.value) }),
+                body: JSON.stringify({ [`motor_${i}`]: parseFloat(input.value) }),
             }).catch(err => console.error("Send error:", err));
         };
         container.appendChild(label);

static/sinus-io.js

@@ -0,0 +1,97 @@
+window.onload = () => {
+    const socket = io("127.0.0.1:5001");
+    let connected = false;
+
+    socket.on("connect", () => {
+        console.log("Connected to the server");
+        connected = true;
+    });
+    socket.on("disconnect", () => {
+        console.log("Disconnected from the server");
+        connected = false;
+    });
+
+    const robotIp = "http://127.0.0.1:5001"
+
+    const amplitudeSlider = document.getElementById("amplitude");
+    const amplitudeValue = document.getElementById("amplitudeValue");
+    const frequencySlider = document.getElementById("frequency");
+    const frequencyValue = document.getElementById("frequencyValue");
+    const syncSlider = document.getElementById("sync");
+    const syncValue = document.getElementById("syncValue");
+
+    const motor_0Synced = document.getElementById("motor_0_synced");
+    const motor_1Synced = document.getElementById("motor_1_synced");
+    const motor_2Synced = document.getElementById("motor_2_synced");
+    const motor_3Synced = document.getElementById("motor_3_synced");
+    const motor_4Synced = document.getElementById("motor_4_synced");
+    const motor_5Synced = document.getElementById("motor_5_synced");
+
+    const verboseCheckbox = document.getElementById("verbose");
+
+    amplitudeSlider.addEventListener("input", function () {
+        amplitudeValue.textContent = amplitudeSlider.value;
+    });
+
+    frequencySlider.addEventListener("input", function () {
+        frequencyValue.textContent = frequencySlider.value;
+    });
+
+    syncSlider.addEventListener("input", function () {
+        syncValue.textContent = syncSlider.value;
+    });
+
+    let t0 = Date.now();
+
+    const syncStep = () => {
+        let t = Date.now() - t0;
+
+        const value = computeSinValue(
+            frequencySlider.value,
+            amplitudeSlider.value,
+            t / 1000
+        );
+
+        let goals = {};
+        if (motor_0Synced.checked) {
+            goals["motor_0"] = value;
+        }
+        if (motor_1Synced.checked) {
+            goals["motor_1"] = value;
+        }
+        if (motor_2Synced.checked) {
+            goals["motor_2"] = value;
+        }
+        if (motor_3Synced.checked) {
+            goals["motor_3"] = value;
+        }
+        if (motor_4Synced.checked) {
+            goals["motor_4"] = value;
+        }
+        if (motor_5Synced.checked) {
+            goals["motor_5"] = value;
+        }
+
+        if (verboseCheckbox.checked) {
+            console.log("Sending goals:", goals);
+        }
+
+        if (Object.keys(goals).length !== 0 && connected) {
+            // fetch(`${robotIp}/motor_control`, {
+            //         method: "POST",
+            //         headers: { "Content-Type": "application/json" },
+            //         body: JSON.stringify(goals),
+            //     }).catch(err => console.error("Send error:", err));    
+            socket.emit("motor_control", goals);
+        }
+        const syncPeriod = 1000.0 / syncSlider.value;
+        setTimeout(syncStep, syncPeriod);
+    };
+    syncStep();
+
+    // Compute the current sin value at a given frequency
+    function computeSinValue(frequency, amplitude, time) {
+        return amplitude * Math.sin(2 * Math.PI * frequency * time);
+    }
+
+};

static/sinus.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Sinus</title>
+</head>
+
+<body>
+    <h1>Sinus</h1>     
+    <div id="sliders">
+        <label for="amplitude">Amplitude:</label>
+        <input type="range" id="amplitude" min="0" max="100" value="25" />
+        <span id="amplitudeValue">25</span>
+        <br />
+        <label for="frequency">Sinus Frequency:</label>
+        <input type="range" id="frequency" min="0" max="2" step="0.1" value="0.5" />
+        <span id="frequencyValue">0.5</span>
+        <br />
+    </div>
+    <h1>Synchronisation</h1>
+    <div id="synchronisation">
+        <label for="sync">Sync freq:</label>
+        <input type="range" id="sync" min="1" max="200" step="10" value="100" />
+        <span id="syncValue">100</span>
+        <br />
+        <label for="motor_0">Motor 0 synced:</label>
+        <input type="checkbox" id="motor_0_synced" />
+        <br />
+        <label for="motor_1">Motor 1 synced:</label>
+        <input type="checkbox" id="motor_1_synced" />
+        <br />
+        <label for="motor_2">Motor 2 synced:</label>
+        <input type="checkbox" id="motor_2_synced" checked />
+        <br />
+        <label for="motor_3">Motor 3 synced:</label>
+        <input type="checkbox" id="motor_3_synced" checked />
+        <br />
+        <label for="motor_4">Motor 4 synced:</label>
+        <input type="checkbox" id="motor_4_synced" />
+        <br />
+        <label for="motor_5">Motor 5 synced:</label>
+        <input type="checkbox" id="motor_5_synced" />
+        <br />
+    </div>
+
+    <h1>Debug</h1>
+    <div id="debug">
+        <label for="verbose">Verbose:</label>
+        <input type="checkbox" id="verbose" />
+    </div>
+
+    <!-- <script src="sinus.js"></script> -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
+    <script src="sinus-io.js"></script>
+
+</body>
+
+</html>

static/sinus.js

@@ -0,0 +1,84 @@
+window.onload = () => {
+    const robotIp = "http://127.0.0.1:5001"
+
+    const amplitudeSlider = document.getElementById("amplitude");
+    const amplitudeValue = document.getElementById("amplitudeValue");
+    const frequencySlider = document.getElementById("frequency");
+    const frequencyValue = document.getElementById("frequencyValue");
+    const syncSlider = document.getElementById("sync");
+    const syncValue = document.getElementById("syncValue");
+
+    const motor_0Synced = document.getElementById("motor_0_synced");
+    const motor_1Synced = document.getElementById("motor_1_synced");
+    const motor_2Synced = document.getElementById("motor_2_synced");
+    const motor_3Synced = document.getElementById("motor_3_synced");
+    const motor_4Synced = document.getElementById("motor_4_synced");
+    const motor_5Synced = document.getElementById("motor_5_synced");
+
+    const verboseCheckbox = document.getElementById("verbose");
+
+    amplitudeSlider.addEventListener("input", function () {
+        amplitudeValue.textContent = amplitudeSlider.value;
+    });
+
+    frequencySlider.addEventListener("input", function () {
+        frequencyValue.textContent = frequencySlider.value;
+    });
+
+    syncSlider.addEventListener("input", function () {
+        syncValue.textContent = syncSlider.value;
+    });
+
+    let t0 = Date.now();
+
+    const syncStep = () => {
+        let t = Date.now() - t0;
+
+        const value = computeSinValue(
+            frequencySlider.value,
+            amplitudeSlider.value,
+            t / 1000
+        );
+
+        let goals = {};
+        if (motor_0Synced.checked) {
+            goals["motor_0"] = value;
+        }
+        if (motor_1Synced.checked) {
+            goals["motor_1"] = value;
+        }
+        if (motor_2Synced.checked) {
+            goals["motor_2"] = value;
+        }
+        if (motor_3Synced.checked) {
+            goals["motor_3"] = value;
+        }
+        if (motor_4Synced.checked) {
+            goals["motor_4"] = value;
+        }
+        if (motor_5Synced.checked) {
+            goals["motor_5"] = value;
+        }
+
+        if (verboseCheckbox.checked) {
+            console.log("Sending goals:", goals);
+        }
+
+        if (Object.keys(goals).length !== 0) {
+            fetch(`${robotIp}/motor_control`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(goals),
+                }).catch(err => console.error("Send error:", err));    
+        }
+        const syncPeriod = 1000.0 / syncSlider.value;
+        setTimeout(syncStep, syncPeriod);
+    };
+    syncStep();
+
+    // Compute the current sin value at a given frequency
+    function computeSinValue(frequency, amplitude, time) {
+        return amplitude * Math.sin(2 * Math.PI * frequency * time);
+    }
+
+};