feature: add interactive applets
This commit is contained in:
Matthias Jung
@@ -0,0 +1,246 @@
|
||||
<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>
|
||||
|
||||
Das Ganze lässt sich leicht mathematisch beschreiben. Für die Summe eines Sinus-Trägers mit einem anderen um 90° phasenverschoben Sinus-Träger gilt folgender Zusammenhang:<br><br>
|
||||
<center>$ I(t)\cdot \sin(\omega t) + Q(t)\cdot \sin(\omega t + 90°)=A \cdot \sin(\omega t+\phi) $</center><br><br>
|
||||
Es entsteht ein, also ein neues Sinussignal mit einer Amplitude von $A=\sqrt{I(t)^2 + Q(t)^2}$ und einer Phasenverschiebung von $ \phi = \arctan\left(\frac{Q(t)}{I(t)}\right)$<br><br>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p style="color:#00AEDF">$I(t)=$</p>
|
||||
</td>
|
||||
<td>
|
||||
<input type="range" class="slider" value="0" min="-100" max="100" id="ipoints">
|
||||
</td>
|
||||
<td>
|
||||
<div id="ipercent">50%</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p style="color:#40C08C">$Q(t)=$</p>
|
||||
</td>
|
||||
<td>
|
||||
<input type="range" class="slider" value="0" min="-100" max="100" id="qpoints">
|
||||
</td>
|
||||
<td>
|
||||
<div id="qpercent">50%</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br><br>
|
||||
<canvas id="IQ" style="width:100%; min-height:100px; max-width:600px"></canvas>
|
||||
|
||||
$A=$<div id="ares" style="display:inline;">0</div> und $\phi=$<div id="phires" style="display:inline;">0</div>
|
||||
|
||||
<canvas id="SUM" style="width:100%; min-height:100px; max-width:600px"></canvas>
|
||||
<br>
|
||||
Man kann das auch als Konstellationsdiagramm betrachten:
|
||||
<br>
|
||||
<canvas id="KONST" style="max-height:200px; max-width:200px"></canvas>
|
||||
|
||||
<script>
|
||||
var i = 0;
|
||||
var q = 0;
|
||||
|
||||
iq = new Chart("IQ", {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "I-Anteil",
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
borderColor: "#00AEDF",
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
label: "Q-Anteil",
|
||||
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: -100,
|
||||
max: 100,
|
||||
ticks: {
|
||||
callback: function(value, index, ticks) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
sum = new Chart("SUM", {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "Summiertes IQ-Signal",
|
||||
fill: false,
|
||||
pointRadius: 0,
|
||||
borderColor: "#ED7D71",
|
||||
data: []
|
||||
},
|
||||
]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
y: {
|
||||
min: -150,
|
||||
max: 150,
|
||||
ticks: {
|
||||
callback: function(value, index, ticks) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
},
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Zeit'
|
||||
},
|
||||
ticks: {
|
||||
callback: function(val, index) {
|
||||
return "";
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
konst = new Chart("KONST", {
|
||||
type: 'bubble',
|
||||
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: "IQ-Signal",
|
||||
fill: false,
|
||||
pointRadius: 5,
|
||||
borderColor: "#ED7D71",
|
||||
color: "#ED7D71",
|
||||
data: []
|
||||
},
|
||||
]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
x: {
|
||||
min: -110,
|
||||
max: 110,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'I'
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value, index, ticks) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
min: -110,
|
||||
max: 110,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Q'
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value, index, ticks) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
annotation: {
|
||||
annotations: {
|
||||
line1: {
|
||||
type: 'line',
|
||||
yMin: 0,
|
||||
yMax: 100,
|
||||
borderColor: 'rgb(255, 0, 0)',
|
||||
borderWidth: 2,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
generateValues(-1*Math.PI, 4*Math.PI, Math.PI/16);
|
||||
|
||||
$("#ipoints").on("change", function() {
|
||||
i = $(this).val();
|
||||
generateValues(-1*Math.PI, 4*Math.PI, Math.PI/16);
|
||||
});
|
||||
|
||||
$("#qpoints").on("change", function() {
|
||||
q = $(this).val();
|
||||
generateValues(-1*Math.PI, 4*Math.PI, Math.PI/16);
|
||||
});
|
||||
|
||||
function generateValues(i1, i2, step = 1) {
|
||||
// Reset all values:
|
||||
iq.data.datasets[0].data = [];
|
||||
iq.data.datasets[1].data = [];
|
||||
sum.data.datasets[0].data = [];
|
||||
sum.data.labels = [];
|
||||
iq.data.labels = [];
|
||||
konst.data.labels = [];
|
||||
konst.data.datasets[0].data = [];
|
||||
|
||||
konst.data.datasets[0].data = [{x:i,y:q,r:5}];
|
||||
|
||||
// Generate new Data:
|
||||
for (let x = i1; x <= i2; x += step) {
|
||||
// Set I:
|
||||
iq.data.datasets[0].data.push(i*Math.sin(x));
|
||||
iq.data.labels.push(x);
|
||||
// Set Q:
|
||||
iq.data.datasets[1].data.push(q*Math.sin(x+Math.PI/2));
|
||||
// Set Sum:
|
||||
sum.data.datasets[0].data.push(i*Math.sin(x) + q*Math.sin(x+Math.PI/2));
|
||||
sum.data.labels.push(x);
|
||||
}
|
||||
|
||||
// Update Graphs
|
||||
iq.update();
|
||||
sum.update();
|
||||
konst.update();
|
||||
|
||||
// Set Text:
|
||||
$('#ipercent').html(i+"%");
|
||||
$('#qpercent').html(q+"%");
|
||||
$('#ares').html(Math.round(Math.sqrt(i*i+q*q))+"%");
|
||||
$('#phires').html(Math.round((Math.atan2(i,q)*180)/Math.PI)+"°");
|
||||
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user