50ohm-contents-dl/contents/html/fading_applet.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>
    <table>
        <tr>
            <td>
                <p>Amplitud: </p>
            </td>
            <td>
                <input type="range" class="slider" value="80" min="0" max="100" id="amplitude">
            </td>
            <td>
                <div id="amplitudeV">80%</div>
            </td>
        </tr>
        <tr>
            <td>
                <p>Fas:</p>
            </td>
            <td>
                <input type="range" class="slider" value="180" min="0" max="360" id="phase">
            </td>
            <td>
                <div id="phaseV"> 180 &deg; </div>
            </td>
        </tr>
    </table>
    <canvas id="FADING" style="width:100%; height:300px;"></canvas>
    
    <canvas id="SUM" style="width:100%; height:300px;"></canvas>
    <br>
    
    <script>
        var amplitude = 80;
        var phase = 180;

        fading = new Chart("FADING", {
            type: "line",
            data: {
                labels: [],
                datasets: [
                    {
                        label: "Rymdvåg",
                        fill: false,
                        pointRadius: 0,
                        borderColor: "#00AEDF",
                        data: [],
                    },
                    {
                        label: "Markvåg",
                        fill: false,
                        pointRadius: 0,
                        borderColor: "#40C08C",
                        data: []
                    },
                ]
            },    
            options: {
                animation:false,
                responsive:true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: 'Tid'
                        },
                        ticks: {
                            callback: function(val, index) {
                                return "";
                            },
                        }
                    },
                    y: {
                        min: -200,
                        max: 200,
                        ticks: {
                            callback: function(value, index, ticks) {
                                return value + "%";
                            }
                        }
                    },
                },
            }
        });

        sum = new Chart("SUM", {
            type: "line",
            data: {
                labels: [],
                datasets: [
                    {
                        label: "Summerad signal",
                        fill: false,
                        pointRadius: 0,
                        borderColor: "#ED7D71",
                        data: []
                    },
                ]
            },    
            options: {
                animation:false,
                scales: {
                    y: {
                        min: -200,
                        max: 200,
                        ticks: {
                            callback: function(value, index, ticks) {
                                return value + "%";
                            }
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Tid'
                        },
                        ticks: {
                            callback: function(val, index) {
                                return "";
                            },
                        }
                    },
                },
            }
        });


        generateValues(-1*Math.PI, 4*Math.PI, Math.PI/16);

        $("#amplitude").on("input", function() {
            amplitude = $(this).val();
            generateValues(-1*Math.PI, 4*Math.PI, Math.PI/16);
        });

        $("#phase").on("input", function() {
            phase = $(this).val();
            generateValues(-1*Math.PI, 4*Math.PI, Math.PI/16);
        });

        function generateValues(i1, i2, step = 1) {
            // Reset all values:
            fading.data.datasets[0].data = []; // Nutzsignal
            fading.data.datasets[1].data = []; // fadad signal
            sum.data.datasets[0].data = [];
            sum.data.labels = [];
            fading.data.labels = [];

            // Generate new Data:
            for (let x = i1; x <= i2; x += step) {
                // Nutzsignal:
                fading.data.datasets[0].data.push(100*Math.sin(x));
                fading.data.labels.push(x);
                // fadad signal:
                fading.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
            fading.update();
            sum.update();

            // Set Text:
            $('#amplitudeV').html(amplitude+"%"); 
            $('#phaseV').html(phase+"&deg;");
            //$('#ares').html(Math.round(Math.sqrt(i*i+q*q))+"%"); 
            //$('#phires').html(Math.round((Math.atan2(i,q)*180)/Math.PI)+"&deg;");

        }
    </script>
</html>