112 lines
3.5 KiB
HTML
112 lines
3.5 KiB
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>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>
|