feature: add interactive applets

2026-01-31 22:12:22 +01:00
parent c1cd1a8ef7
commit e56d0dcea5
18 changed files with 2943 additions and 0 deletions
@@ -0,0 +1,157 @@
+<html>
+<script src="https://www.50ohm.de/assets/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://www.50ohm.de/assets/chartjs/4.4.1/chart.min.js"></script>
+<table>
+    <tr>
+        <td>
+            <p>Phase:</p>
+        </td>
+        <td>
+            <input type="range" class="slider" value="90" min="0" max="360" id="phase">
+        </td>
+        <td>
+            <div id="phaseV"> 90 &deg; </div>
+        </td>
+    </tr>
+</table>
+<canvas id="INTERFERENZ" style="width:100%; height:200px;"></canvas>
+
+<canvas id="SUM" style="width:100%; height:200px;"></canvas>
+<br>
+
+<script>
+    var amplitude = 100;
+    var phase = 90;
+
+    interferenz = new Chart("INTERFERENZ", {
+        type: "line",
+        data: {
+            labels: [],
+            datasets: [
+                {
+                    label: "Signal",
+                    fill: false,
+                    pointRadius: 0,
+                    borderColor: "#00AEDF",
+                    data: [],
+                },
+                {
+                    label: "Überlagerung",
+                    fill: false,
+                    pointRadius: 0,
+                    borderColor: "#40C08C",
+                    data: []
+                },
+            ]
+        },
+        options: {
+            responsive: true,
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Zeit'
+                    },
+                    ticks: {
+                        callback: function (val, index) {
+                            return "";
+                        },
+                    }
+                },
+                y: {
+                    min: -100,
+                    max: 100,
+                    ticks: {
+                        callback: function (value, index, ticks) {
+                            return value + "%";
+                        }
+                    }
+                },
+            },
+        }
+    });
+
+    sum = new Chart("SUM", {
+        type: "line",
+        data: {
+            labels: [],
+            datasets: [
+                {
+                    label: "Summiertes Signal",
+                    fill: false,
+                    pointRadius: 0,
+                    borderColor: "#ED7D71",
+                    data: []
+                },
+            ]
+        },
+        options: {
+            scales: {
+                y: {
+                    min: -200,
+                    max: 200,
+                    ticks: {
+                        callback: function (value, index, ticks) {
+                            return value + "%";
+                        }
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Zeit'
+                    },
+                    ticks: {
+                        callback: function (val, index) {
+                            return "";
+                        },
+                    }
+                },
+            },
+        }
+    });
+
+
+    generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
+
+    $("#amplitude").on("change", function () {
+        amplitude = $(this).val();
+        generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
+    });
+
+    $("#phase").on("change", function () {
+        phase = $(this).val();
+        generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
+    });
+
+    function generateValues(i1, i2, step = 1) {
+        // Reset all values:
+        interferenz.data.datasets[0].data = []; // Nutzsignal
+        interferenz.data.datasets[1].data = []; // Gefadetes Signal
+        sum.data.datasets[0].data = [];
+        sum.data.labels = [];
+        interferenz.data.labels = [];
+
+        // Generate new Data:
+        for (let x = i1; x <= i2; x += step) {
+            // Nutzsignal:
+            interferenz.data.datasets[0].data.push(100 * Math.sin(x));
+            interferenz.data.labels.push(x);
+            // Gefadetes Signal:
+            interferenz.data.datasets[1].data.push(amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI));
+            // Set Sum:
+            sum.data.datasets[0].data.push(100 * Math.sin(x) + amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI))
+            sum.data.labels.push(x);
+        }
+
+        // Update Graphs
+        interferenz.update();
+        sum.update();
+
+        // Set Text:
+        $('#phaseV').html(phase + "&deg;");
+
+    }
+</script>
+
+</html>