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,147 @@
+<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. Ein zeitkontinuierliches Sinus-Signal wird von einem AD-Umsetzer digitalisiert und anschließend wieder von einem DA-Umsetzer in ein analoges Signal gewandelt. An den Reglern kann man die Zeitquantisierung und die Wertquantisierung der AD/DA-Umsetzer einstellen.</p><br>
+    <table>
+        <tr>
+            <td>
+                Zeit-Quantisierung:
+            </td>
+            <td>
+                <input type="range" class="slider" value="10" min="1" max="10" id="timeq">
+            </td>
+            <td>
+                <div id="timeqSteps" style="display:inline-block;">1024</div> Samples/s.
+            </td>
+        </tr>
+        <tr>
+            <td>
+                Wert-Quantisierung:
+            </td>
+            <td>
+                <input type="range" class="slider" value="16" min="1" max="16" id="valueq">
+            </td>
+            <td>
+                <div id="valueqBits" style="display:inline-block;">16</div> bits
+          </td>
+        </tr>
+    </table><br>
+  <p><canvas id="Sine" style="max-height:200px;"></canvas></p>
+    
+    <script>
+        // Script by DL9MJ, 2024
+        var a = 100;
+        var max = 1;
+        var steps = 1024;
+        var stepSize = max/steps;
+        var b = 16;
+        var delta = a/(Math.pow(2,b)-1);
+
+        sine = new Chart("Sine", {
+            type: 'scatter',
+            data: {
+                labels: [],
+                datasets: [
+                    {
+                        fill: false,
+                        showLine: true,
+                        stepped: true,
+                        borderColor: "#00AEDF",
+                        label: "Wert- und Zeitquantisiertes Signal",
+                        pointRadius: 0,
+                        data: [],
+                    },
+                    {
+                        fill: false,
+                        showLine: true,
+                        tenstion: 0.1,
+                        label: "Zeitkontinuierliches Signal",
+                        borderColor: "#999999",
+                        pointRadius: 0,
+                        data: [],
+                    },
+                ]
+            },    
+            options: {
+                animation: {
+                    duration: 0
+                },
+                responsive:true,
+                scales: {
+                    y: {
+                        min: -120,
+                        max: +120,
+                        ticks: {
+                            callback: function(value, index, ticks) {
+                                return value + "%";
+                            }
+                        }
+                    },
+                    x: {
+                        min: 0,
+                        max: max,
+                        title: {
+                            display: true,
+                            text: 'Zeit'
+                        },
+                        ticks: {
+                            stepSize: 1,
+                            callback: function(val, index) {
+                                return val+"s";
+                            },
+                        }
+                    }
+                },
+            }
+        });
+
+        generateValues(0, max, stepSize);
+
+        $("#timeq").on("change", function() {
+            steps = Math.pow(2,($(this).val()));
+            stepSize = max/steps;
+            generateValues(0, max, stepSize, delta);
+        });
+
+        $("#valueq").on("change", function() {
+            b = $(this).val();
+            delta = (2*a)/(Math.pow(2,b));
+            console.log(delta);
+            generateValues(0, max, stepSize, delta);
+        });
+
+        function generateValues(i1, i2, step = 1, delta=0.001) {
+            // Reset all values:
+            sine.data.datasets[0].data = [];
+            sine.data.datasets[1].data = [];
+
+            // Reference Sine:
+            for (let x = i1; x <= i2; x += 1/32) {
+                // Set I:
+                sine.data.datasets[1].data.push({
+                    x: x,
+                    y: a*Math.sin(2*Math.PI*x)
+                });
+            }
+
+            // Generate new Data:
+            for (let x = i1; x <= i2; x += step) {
+                y1 = a*Math.sin(2*Math.PI*x);
+                y2 = Math.max(-100,Math.min(100,Math.sign(y1)*delta*Math.floor(((Math.abs(y1))/(delta))+1)));
+                // Set I:
+                sine.data.datasets[0].data.push({
+                    x: x,
+                    //y: a*Math.sin(2*Math.PI*x)
+                    y: y2
+                });
+            }
+
+            // Update Graphs
+            sine.update();
+
+            // Set Text:
+            $('#timeqSteps').html(steps); 
+            $('#valueqBits').html(b); 
+        }
+    </script>
+</html>