Superminaren/50ohm-contents-dl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: add interactive applets

Browse Source
This commit is contained in:
Matthias Jung
2026-01-31 22:12:22 +01:00
parent c1cd1a8ef7
commit e56d0dcea5
18 changed files with 2943 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contents/html/fading_applet.html
+170
View File
@@ -0,0 +1,170 @@
<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>Amplitude: </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>Phase:</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: "Raumwelle",
fill: false,
pointRadius: 0,
borderColor: "#00AEDF",
data: [],
},
{
label: "Bodenwelle",
fill: false,
pointRadius: 0,
borderColor: "#40C08C",
data: []
},
]
},
options: {
responsive:true,
scales: {
x: {
title: {
display: true,
text: 'Zeit'
},
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: "Summiertes 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: 'Zeit'
},
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) {
// Reset all values:
fading.data.datasets[0].data = []; // Nutzsignal
fading.data.datasets[1].data = []; // Gefadetes 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);
// Gefadetes 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>