50ohm-contents-dl/contents/html/applet_lambda_und_f.html

<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>Här kan du prova det hela en gång till. Med reglaget ställer du in våglängden $\lambda$. Frekvensen beräknas automatiskt.</p>
    <table>
        <tr>
            <td>
                Period:
            </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> och $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: 'Avstånd'
                        },
                        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).replace(".", ",")+" MHz"); 
        }
    </script>
</html>