365 lines
12 KiB
HTML
365 lines
12 KiB
HTML
<style>
|
|
.qpsk-applet {
|
|
--qpsk-primary: #009fda;
|
|
--qpsk-current: #d85a30;
|
|
--qpsk-received: #7451b9;
|
|
margin: 1rem 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.qpsk-applet .qpsk-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .65rem;
|
|
align-items: center;
|
|
margin-bottom: .8rem;
|
|
}
|
|
|
|
.qpsk-applet .qpsk-noise-control {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: .25rem .65rem;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.qpsk-applet input[type="range"] {
|
|
grid-column: 1 / -1;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.qpsk-applet output {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.qpsk-applet .qpsk-stream {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
contain: inline-size;
|
|
gap: .3rem;
|
|
overflow-x: auto;
|
|
padding: .45rem .15rem .65rem;
|
|
margin-bottom: .7rem;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.qpsk-applet .qpsk-symbol {
|
|
flex: 0 0 auto;
|
|
min-width: 2.25rem;
|
|
padding: .28rem .38rem;
|
|
border: 1px solid var(--bs-border-color, #ccd2d8);
|
|
border-radius: .3rem;
|
|
text-align: center;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-weight: 650;
|
|
transition: background .15s, border-color .15s, color .15s;
|
|
}
|
|
|
|
.qpsk-applet .qpsk-symbol.sent {
|
|
background: var(--bs-secondary-bg, #edf0f2);
|
|
color: var(--bs-secondary-color, #687078);
|
|
}
|
|
|
|
.qpsk-applet .qpsk-symbol.current {
|
|
border-color: var(--qpsk-current);
|
|
background: var(--qpsk-current);
|
|
color: #fff;
|
|
}
|
|
|
|
.qpsk-applet figure { margin: 0; }
|
|
|
|
.qpsk-applet canvas {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
border: 1px solid var(--bs-border-color, #d8dde2);
|
|
border-radius: .35rem;
|
|
background: var(--bs-body-bg, #fff);
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.course .qpsk-applet { width: 59.3%; }
|
|
.course .margin .qpsk-applet { width: 100%; }
|
|
}
|
|
</style>
|
|
|
|
<section class="qpsk-applet" aria-label="QPSK-Übertragung mit Rauschen">
|
|
<div class="qpsk-controls">
|
|
<button data-qpsk-start type="button" class="btn btn-primary btn-sm">Übertragung starten</button>
|
|
<button data-qpsk-new type="button" class="btn btn-outline-secondary btn-sm">Neuer Bitstrom</button>
|
|
</div>
|
|
|
|
<div class="qpsk-noise-control">
|
|
<label for="qpsk-noise">Rauschen</label>
|
|
<input data-qpsk-noise id="qpsk-noise" type="range" min="0" max="60" step="1" value="18">
|
|
<output data-qpsk-noise-output>18 %</output>
|
|
</div>
|
|
|
|
<div data-qpsk-stream class="qpsk-stream" aria-label="Zu übertragender Bitstrom"></div>
|
|
|
|
<figure>
|
|
<canvas data-qpsk-canvas aria-label="QPSK-Konstellationsdiagramm"></canvas>
|
|
</figure>
|
|
|
|
<script>
|
|
(function () {
|
|
const applet = document.currentScript.closest('.qpsk-applet');
|
|
const canvas = applet.querySelector('[data-qpsk-canvas]');
|
|
const startButton = applet.querySelector('[data-qpsk-start]');
|
|
const newButton = applet.querySelector('[data-qpsk-new]');
|
|
const noiseInput = applet.querySelector('[data-qpsk-noise]');
|
|
const streamElement = applet.querySelector('[data-qpsk-stream]');
|
|
|
|
const mapping = {
|
|
'11': { angle: 45, i: 1, q: 1 },
|
|
'01': { angle: 135, i: -1, q: 1 },
|
|
'00': { angle: 225, i: -1, q: -1 },
|
|
'10': { angle: 315, i: 1, q: -1 }
|
|
};
|
|
const symbolOrder = ['11', '01', '00', '10'];
|
|
const pointColors = {
|
|
'11': '#d85a30',
|
|
'01': '#2a9d6f',
|
|
'00': '#7451b9',
|
|
'10': '#168aad'
|
|
};
|
|
|
|
let symbols = [];
|
|
let receivedPoints = [];
|
|
let currentIndex = -1;
|
|
let timer = 0;
|
|
let running = false;
|
|
|
|
function makeBitstream() {
|
|
symbols = [];
|
|
for (let repetition = 0; repetition < 8; repetition++) {
|
|
const group = symbolOrder.slice();
|
|
for (let i = group.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
const temporary = group[i];
|
|
group[i] = group[j];
|
|
group[j] = temporary;
|
|
}
|
|
symbols.push.apply(symbols, group);
|
|
}
|
|
receivedPoints = [];
|
|
currentIndex = -1;
|
|
renderStream(true);
|
|
draw();
|
|
}
|
|
|
|
function renderStream(rebuild) {
|
|
if (rebuild) {
|
|
streamElement.replaceChildren();
|
|
symbols.forEach(function (bits) {
|
|
const span = document.createElement('span');
|
|
span.className = 'qpsk-symbol';
|
|
span.textContent = bits;
|
|
streamElement.appendChild(span);
|
|
});
|
|
streamElement.scrollLeft = 0;
|
|
}
|
|
|
|
Array.from(streamElement.children).forEach(function (span, index) {
|
|
span.classList.toggle('sent', index < currentIndex);
|
|
span.classList.toggle('current', index === currentIndex);
|
|
});
|
|
|
|
const current = streamElement.children[currentIndex];
|
|
if (current) {
|
|
const streamRect = streamElement.getBoundingClientRect();
|
|
const currentRect = current.getBoundingClientRect();
|
|
const centeredPosition = streamElement.scrollLeft
|
|
+ currentRect.left - streamRect.left
|
|
- (streamElement.clientWidth - currentRect.width) / 2;
|
|
streamElement.scrollTo({
|
|
left: Math.max(0, centeredPosition),
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
|
|
function gaussianNoise() {
|
|
let u = 0;
|
|
let v = 0;
|
|
while (u === 0) u = Math.random();
|
|
while (v === 0) v = Math.random();
|
|
return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
|
|
}
|
|
|
|
function transmitNext() {
|
|
currentIndex += 1;
|
|
if (currentIndex >= symbols.length) {
|
|
stopTransmission(true);
|
|
return;
|
|
}
|
|
|
|
const bits = symbols[currentIndex];
|
|
const target = mapping[bits];
|
|
const sigma = Number(noiseInput.value) / 100;
|
|
const receivedI = target.i + gaussianNoise() * sigma;
|
|
const receivedQ = target.q + gaussianNoise() * sigma;
|
|
|
|
receivedPoints.push({
|
|
i: receivedI,
|
|
q: receivedQ,
|
|
bits: bits
|
|
});
|
|
renderStream(false);
|
|
draw();
|
|
}
|
|
|
|
function startTransmission() {
|
|
if (running) return;
|
|
if (currentIndex >= symbols.length - 1) makeBitstream();
|
|
running = true;
|
|
startButton.disabled = true;
|
|
startButton.textContent = 'Übertragung läuft …';
|
|
newButton.disabled = true;
|
|
transmitNext();
|
|
timer = window.setInterval(transmitNext, 420);
|
|
}
|
|
|
|
function stopTransmission(finished) {
|
|
running = false;
|
|
window.clearInterval(timer);
|
|
startButton.disabled = false;
|
|
newButton.disabled = false;
|
|
startButton.textContent = finished ? 'Erneut übertragen' : 'Übertragung starten';
|
|
}
|
|
|
|
function setupCanvas() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const pixelWidth = Math.round(rect.width * dpr);
|
|
const pixelHeight = Math.round(rect.height * dpr);
|
|
if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
|
|
canvas.width = pixelWidth;
|
|
canvas.height = pixelHeight;
|
|
}
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
return { ctx: ctx, width: rect.width, height: rect.height };
|
|
}
|
|
|
|
function line(ctx, x0, y0, x1, y1) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x0, y0);
|
|
ctx.lineTo(x1, y1);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawCross(ctx, x, y, size, strokeColor) {
|
|
ctx.strokeStyle = strokeColor;
|
|
ctx.lineWidth = 2;
|
|
line(ctx, x - size, y - size, x + size, y + size);
|
|
line(ctx, x - size, y + size, x + size, y - size);
|
|
}
|
|
|
|
function drawArrow(ctx, x0, y0, x1, y1, strokeColor) {
|
|
const angle = Math.atan2(y1 - y0, x1 - x0);
|
|
const head = 9;
|
|
ctx.strokeStyle = strokeColor;
|
|
ctx.fillStyle = strokeColor;
|
|
ctx.lineWidth = 2.5;
|
|
line(ctx, x0, y0, x1, y1);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1, y1);
|
|
ctx.lineTo(x1 - head * Math.cos(angle - Math.PI / 6), y1 - head * Math.sin(angle - Math.PI / 6));
|
|
ctx.lineTo(x1 - head * Math.cos(angle + Math.PI / 6), y1 - head * Math.sin(angle + Math.PI / 6));
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
function draw() {
|
|
const setup = setupCanvas();
|
|
const ctx = setup.ctx;
|
|
const width = setup.width;
|
|
const height = setup.height;
|
|
const cx = width / 2;
|
|
const cy = height / 2;
|
|
const unit = Math.min(width, height) * .265;
|
|
const limit = 1.65;
|
|
const textColor = getComputedStyle(applet).color || '#263238';
|
|
const axisColor = 'rgba(90,100,110,.72)';
|
|
|
|
function x(i) { return cx + i * unit; }
|
|
function y(q) { return cy - q * unit; }
|
|
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
// Entscheidungsbereiche
|
|
ctx.fillStyle = 'rgba(216,90,48,.035)';
|
|
ctx.fillRect(cx, 0, width - cx, cy);
|
|
ctx.fillStyle = 'rgba(42,157,111,.035)';
|
|
ctx.fillRect(0, 0, cx, cy);
|
|
ctx.fillStyle = 'rgba(116,81,185,.035)';
|
|
ctx.fillRect(0, cy, cx, height - cy);
|
|
ctx.fillStyle = 'rgba(22,138,173,.035)';
|
|
ctx.fillRect(cx, cy, width - cx, height - cy);
|
|
|
|
// Kreis und Achsen
|
|
ctx.strokeStyle = 'rgba(120,130,140,.32)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, Math.SQRT2 * unit, 0, 2 * Math.PI);
|
|
ctx.stroke();
|
|
ctx.strokeStyle = axisColor;
|
|
line(ctx, x(-limit), cy, x(limit), cy);
|
|
line(ctx, cx, y(-limit), cx, y(limit));
|
|
ctx.fillStyle = textColor;
|
|
ctx.font = '13px system-ui, sans-serif';
|
|
ctx.fillText('I', x(limit) - 7, cy - 9);
|
|
ctx.fillText('Q', cx + 9, y(limit) + 11);
|
|
|
|
// Ideale Symbole und Beschriftungen
|
|
symbolOrder.forEach(function (bits) {
|
|
const symbol = mapping[bits];
|
|
drawCross(ctx, x(symbol.i), y(symbol.q), 6, pointColors[bits]);
|
|
ctx.fillStyle = textColor;
|
|
ctx.font = '600 13px ui-monospace, monospace';
|
|
ctx.textAlign = symbol.i > 0 ? 'left' : 'right';
|
|
ctx.fillText(bits, x(symbol.i) + (symbol.i > 0 ? 11 : -11), y(symbol.q) - 9);
|
|
});
|
|
ctx.textAlign = 'left';
|
|
|
|
// Empfangspunkte
|
|
receivedPoints.forEach(function (point, index) {
|
|
ctx.globalAlpha = index === receivedPoints.length - 1 ? 1 : .58;
|
|
ctx.fillStyle = pointColors[point.bits];
|
|
ctx.beginPath();
|
|
ctx.arc(x(point.i), y(point.q), index === receivedPoints.length - 1 ? 5 : 3.2, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
});
|
|
ctx.globalAlpha = 1;
|
|
|
|
// Zeiger zum aktuell empfangenen, verrauschten Signalpunkt
|
|
if (currentIndex >= 0 && receivedPoints.length > 0) {
|
|
const current = receivedPoints[receivedPoints.length - 1];
|
|
drawArrow(ctx, cx, cy, x(current.i), y(current.q), pointColors[current.bits]);
|
|
}
|
|
}
|
|
|
|
startButton.addEventListener('click', startTransmission);
|
|
newButton.addEventListener('click', function () {
|
|
stopTransmission(false);
|
|
makeBitstream();
|
|
});
|
|
noiseInput.addEventListener('input', function () {
|
|
applet.querySelector('[data-qpsk-noise-output]').textContent = noiseInput.value + ' %';
|
|
});
|
|
new ResizeObserver(draw).observe(applet);
|
|
makeBitstream();
|
|
})();
|
|
</script>
|
|
</section>
|