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,111 @@
+
+
+<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>
+    <p>Hier gibt es die Möglichkeit das Ganze nochmal auszuprobieren. An dem Regler kann man die Wellenlänge $\lambda$ einstellen. Die Frequenz wird automatisch berechnet.</p>
+    <table>
+        <tr>
+            <td>
+                Periode:
+            </td>
+            <td>
+                <input type="range" class="slider" value="69" min="50" max="1000" id="period">
+            </td>
+            <td>
+                $\lambda$=<div id="twl" 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 = 75;
+        var lambda = 0.69;
+        var max = 2*Math.PI*1/lambda*2;
+        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: 10,
+                        title: {
+                            display: true,
+                            text: 'Abstand'
+                        },
+                        ticks: {
+                            stepSize: 1,
+                            callback: function(val, index) {
+                                return val+"m";
+                            },
+                        }
+                    }
+                },
+            }
+        });
+
+        generateValues(0, max, steps);
+
+        $("#amplitude").on("change", function() {
+            a = $(this).val();
+            generateValues(0, max, steps);
+        });
+
+        $("#period").on("change", function() {
+            lambda = $(this).val()/100;
+            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/lambda*x));
+                sine.data.labels.push(x);
+            }
+
+            // Update Graphs
+            sine.update();
+
+            // Set Text:
+            $('#twl').html(lambda+"m");
+            $('#tfrequency').html((299.792458/lambda).toFixed(2)+" MHz"); 
+        }
+    </script>
+</html>