147 lines
4.9 KiB
HTML
147 lines
4.9 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. Ein zeitkontinuierliches Sinus-Signal wird von einem AD-Umsetzer digitalisiert und anschließend wieder von einem DA-Umsetzer in ein analoges Signal gewandelt. An den Reglern kann man die Zeitquantisierung und die Wertquantisierung der AD/DA-Umsetzer einstellen.</p><br>
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
Zeit-Quantisierung:
|
|
</td>
|
|
<td>
|
|
<input type="range" class="slider" value="10" min="1" max="10" id="timeq">
|
|
</td>
|
|
<td>
|
|
<div id="timeqSteps" style="display:inline-block;">1024</div> Samples/s.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Wert-Quantisierung:
|
|
</td>
|
|
<td>
|
|
<input type="range" class="slider" value="16" min="1" max="16" id="valueq">
|
|
</td>
|
|
<td>
|
|
<div id="valueqBits" style="display:inline-block;">16</div> bits
|
|
</td>
|
|
</tr>
|
|
</table><br>
|
|
<p><canvas id="Sine" style="max-height:200px;"></canvas></p>
|
|
|
|
<script>
|
|
// Script by DL9MJ, 2024
|
|
var a = 100;
|
|
var max = 1;
|
|
var steps = 1024;
|
|
var stepSize = max/steps;
|
|
var b = 16;
|
|
var delta = a/(Math.pow(2,b)-1);
|
|
|
|
sine = new Chart("Sine", {
|
|
type: 'scatter',
|
|
data: {
|
|
labels: [],
|
|
datasets: [
|
|
{
|
|
fill: false,
|
|
showLine: true,
|
|
stepped: true,
|
|
borderColor: "#00AEDF",
|
|
label: "Wert- und Zeitquantisiertes Signal",
|
|
pointRadius: 0,
|
|
data: [],
|
|
},
|
|
{
|
|
fill: false,
|
|
showLine: true,
|
|
tenstion: 0.1,
|
|
label: "Zeitkontinuierliches Signal",
|
|
borderColor: "#999999",
|
|
pointRadius: 0,
|
|
data: [],
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
animation: {
|
|
duration: 0
|
|
},
|
|
responsive:true,
|
|
scales: {
|
|
y: {
|
|
min: -120,
|
|
max: +120,
|
|
ticks: {
|
|
callback: function(value, index, ticks) {
|
|
return value + "%";
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
min: 0,
|
|
max: max,
|
|
title: {
|
|
display: true,
|
|
text: 'Zeit'
|
|
},
|
|
ticks: {
|
|
stepSize: 1,
|
|
callback: function(val, index) {
|
|
return val+"s";
|
|
},
|
|
}
|
|
}
|
|
},
|
|
}
|
|
});
|
|
|
|
generateValues(0, max, stepSize);
|
|
|
|
$("#timeq").on("change", function() {
|
|
steps = Math.pow(2,($(this).val()));
|
|
stepSize = max/steps;
|
|
generateValues(0, max, stepSize, delta);
|
|
});
|
|
|
|
$("#valueq").on("change", function() {
|
|
b = $(this).val();
|
|
delta = (2*a)/(Math.pow(2,b));
|
|
console.log(delta);
|
|
generateValues(0, max, stepSize, delta);
|
|
});
|
|
|
|
function generateValues(i1, i2, step = 1, delta=0.001) {
|
|
// Reset all values:
|
|
sine.data.datasets[0].data = [];
|
|
sine.data.datasets[1].data = [];
|
|
|
|
// Reference Sine:
|
|
for (let x = i1; x <= i2; x += 1/32) {
|
|
// Set I:
|
|
sine.data.datasets[1].data.push({
|
|
x: x,
|
|
y: a*Math.sin(2*Math.PI*x)
|
|
});
|
|
}
|
|
|
|
// Generate new Data:
|
|
for (let x = i1; x <= i2; x += step) {
|
|
y1 = a*Math.sin(2*Math.PI*x);
|
|
y2 = Math.max(-100,Math.min(100,Math.sign(y1)*delta*Math.floor(((Math.abs(y1))/(delta))+1)));
|
|
// Set I:
|
|
sine.data.datasets[0].data.push({
|
|
x: x,
|
|
//y: a*Math.sin(2*Math.PI*x)
|
|
y: y2
|
|
});
|
|
}
|
|
|
|
// Update Graphs
|
|
sine.update();
|
|
|
|
// Set Text:
|
|
$('#timeqSteps').html(steps);
|
|
$('#valueqBits').html(b);
|
|
}
|
|
</script>
|
|
</html> |