50ohm-contents-dl/contents/html/applet_qpsk.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-överföring med brus">
  <div class="qpsk-controls">
    <button data-qpsk-start type="button" class="btn btn-primary btn-sm">Starta överföring</button>
    <button data-qpsk-new type="button" class="btn btn-outline-secondary btn-sm">Ny bitström</button>
  </div>

  <div class="qpsk-noise-control">
    <label for="qpsk-noise">Brus</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="Bitström som ska överföras"></div>

  <figure>
    <canvas data-qpsk-canvas aria-label="QPSK-konstellationsdiagram"></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 = 'Överföring pågår …';
        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 ? 'Överför igen' : 'Starta överföring';
      }

      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);

        // cirkel och axlar
        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);

        // ideala symboler och etiketter
        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>