158 lines
4.4 KiB
HTML
Executable File
158 lines
4.4 KiB
HTML
Executable File
<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>Fas:</p>
|
|
</td>
|
|
<td>
|
|
<input type="range" class="slider" value="90" min="0" max="360" id="phase">
|
|
</td>
|
|
<td>
|
|
<div id="phaseV"> 90 ° </div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<canvas id="INTERFERENZ" style="width:100%; height:200px;"></canvas>
|
|
|
|
<canvas id="SUM" style="width:100%; height:200px;"></canvas>
|
|
<br>
|
|
|
|
<script>
|
|
var amplitude = 100;
|
|
var phase = 90;
|
|
|
|
interferenz = new Chart("INTERFERENZ", {
|
|
type: "line",
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
label: "Signal",
|
|
fill: false,
|
|
pointRadius: 0,
|
|
borderColor: "#00AEDF",
|
|
data: [],
|
|
},
|
|
{
|
|
label: "Överlagrad signal",
|
|
fill: false,
|
|
pointRadius: 0,
|
|
borderColor: "#40C08C",
|
|
data: []
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Tid'
|
|
},
|
|
ticks: {
|
|
callback: function (val, index) {
|
|
return "";
|
|
},
|
|
}
|
|
},
|
|
y: {
|
|
min: -100,
|
|
max: 100,
|
|
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: {
|
|
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("change", function () {
|
|
amplitude = $(this).val();
|
|
generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
|
|
});
|
|
|
|
$("#phase").on("change", function () {
|
|
phase = $(this).val();
|
|
generateValues(-1 * Math.PI, 4 * Math.PI, Math.PI / 16);
|
|
});
|
|
|
|
function generateValues(i1, i2, step = 1) {
|
|
// Återställ alla värden:
|
|
interferenz.data.datasets[0].data = []; // nyttosignal
|
|
interferenz.data.datasets[1].data = []; // fadad signal
|
|
sum.data.datasets[0].data = [];
|
|
sum.data.labels = [];
|
|
interferenz.data.labels = [];
|
|
|
|
// Generera nya data:
|
|
for (let x = i1; x <= i2; x += step) {
|
|
// nyttosignal:
|
|
interferenz.data.datasets[0].data.push(100 * Math.sin(x));
|
|
interferenz.data.labels.push(x);
|
|
// fadad signal:
|
|
interferenz.data.datasets[1].data.push(amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI));
|
|
// Sätt summa:
|
|
sum.data.datasets[0].data.push(100 * Math.sin(x) + amplitude * Math.sin(x + (phase / 360) * 2 * Math.PI))
|
|
sum.data.labels.push(x);
|
|
}
|
|
|
|
// Uppdatera diagram
|
|
interferenz.update();
|
|
sum.update();
|
|
|
|
// Sätt text:
|
|
$('#phaseV').html(phase + "°");
|
|
|
|
}
|
|
</script>
|
|
|
|
</html>
|