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,122 @@
+<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>
+    <link rel="stylesheet" href="https://www.50ohm.de/assets/katex/katex.min.css">
+    <p>Hier gibt es die Möglichkeit das Ganze nochmal auszuprobieren. An den Reglern kann man die Amplitude $a$ und die Periode $T$ einer Sinusschwingung einstellen.</p>
+    <table>
+        <tr>
+            <td>
+                Amplitude:
+            </td>
+            <td>
+                <input type="range" class="slider" value="50" min="0" max="100" id="amplitude">
+            </td>
+            <td>
+                $a$=<div id="tamplitude" style="display:inline-block;">50%</div>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Periode:
+            </td>
+            <td>
+                <input type="range" class="slider" value="1" min="1" max="10" id="period">
+            </td>
+            <td>
+                $T$=<div id="tperiod" style="display:inline-block;">1s</div> und $f$=<div id="tfrequency" style="display:inline-block;">1Hz</div>
+          </td>
+        </tr>
+    </table>
+  <p><canvas id="Sine" style="max-height:200px;"></canvas></p>
+    
+    <script>
+        // Script by DL9MJ, 2024
+        var a = 50;
+        var p = 1;
+        var max = 2*Math.PI*1/p*4;
+        var steps = Math.PI/128;
+
+        sine = new Chart("Sine", {
+            type: 'scatter',
+            data: {
+                labels: [],
+                datasets: [
+                    {
+                        fill: false,
+                        pointRadius: 0,
+                        lineTension: 0.8,
+                        showLine: true,
+                        borderColor: "#00AEDF",
+                        data: [],
+                    },
+                ]
+            },    
+            options: {
+                responsive:true,
+                plugins: {
+                    legend: {
+                        display: false,
+                    }
+                },
+                scales: {
+                    y: {
+                        min: -100,
+                        max: +100,
+                        ticks: {
+                            callback: function(value, index, ticks) {
+                                return value + "%";
+                            }
+                        }
+                    },
+                    x: {
+                        min: 0,
+                        max: 24,
+                        title: {
+                            display: true,
+                            text: 'Zeit'
+                        },
+                        ticks: {
+                            stepSize: 1,
+                            callback: function(val, index) {
+                                return val+"s";
+                            },
+                        }
+                    }
+                },
+            }
+        });
+
+        generateValues(0, max, steps);
+
+        $("#amplitude").on("change", function() {
+            a = $(this).val();
+            generateValues(0, max, steps);
+        });
+
+        $("#period").on("change", function() {
+            p = $(this).val();
+            generateValues(0, max, steps);
+        });
+
+        function generateValues(i1, i2, step = 1) {
+            // Reset all values:
+            sine.data.datasets[0].data = [];
+            sine.data.labels = [];
+
+            // Generate new Data:
+            for (let x = i1; x <= i2; x += step) {
+                // Set I:
+                sine.data.datasets[0].data.push(a*Math.sin(2*Math.PI*1/p*x));
+                sine.data.labels.push(x);
+            }
+
+            // Update Graphs
+            sine.update();
+
+            // Set Text:
+            $('#tamplitude').html(a+"%"); 
+            $('#tperiod').html(p+"s"); 
+            $('#tfrequency').html((1/p).toFixed(2)+" Hz"); 
+        }
+    </script>
+</html>