Bastian

Aus LNTwww
Wechseln zu:Navigation, Suche

<!DOCTYPE html>

<html> <head>

   <title>Periodendauer T0 periodischer Signale</title>
   <style>
       body {
           display: flex;
           justify-content: center;
       }
       input {
           height: 30px;
           width: 60px;
       }
       input[type="checkbox"] {
           height: 20px;
           width: 20px;
       }
       .flex-center {
           display: flex;
           justify-content: center;
       }
       .text-center {
           text-align: center;
       }
       .label-y-axis {
           display: flex;
           justify-content: flex-start;
       }
       .grid {
           display: flex;
       }
       .align-vertical {
           display: flex;
           align-items: center;
       }
       .margin-left-1 {
           margin-left: 5px;
       }
       .margin-right-2 {
           margin-right: 10px;
       }
       .margin-bottom-1 {
           margin-bottom: 10px;
       }
       .margin-top-1 {
           margin-top: 5px;
       }
       .boarderedall {
           border: 1px solid black;
           padding: 5px;
       }
       .bordered {
           border: 1px solid red;
           padding: 5px;
       }
       .color-blue {
           color: blue;
           font-weight: 600;
       }
       .color-red {
           color: red;
           font-weight: 600;
       }
   </style>

</head> <body onload="canvasWidthWithDelay()" onresize="calculateWidth()"> <div class="text-center boarderedall">

   <h1>Periodendauer T<sub>0</sub> periodischer Signale</h1>
   <!-- Input fields -->
   <div class="margin-bottom-1 flex-center">
       <div class="margin-right-2">
           <i>A</i><sub> 1</sub> = <input onclick="drawGraph()"
                                          type="number"
                                          id="a1"
                                          placeholder="a1"
                                          value="0.5"
                                          min="0"
                                          max="1" step="0.05"> V
       </div>
       <div class="margin-right-2">
           <i>f</i><sub> 1</sub> = <input onclick="drawGraph()" type="number" id="f1" placeholder="f1" value="1"
                                          min="0"
                                          max="10" step="0.1"> kHz
       </div>
       <div class="margin-right-2">
           <i>&#966;</i><sub> 1</sub> = <input onclick="drawGraph()" type="number" id="phi1" placeholder="phi1"
                                               value="0"
                                               min="-180" max="180"
                                               step="5"> Grad
       </div>
   </div>
   <div class="margin-bottom-1 flex-center">
       <div class="margin-right-2">
           <i>A</i><sub> 2</sub> = <input onclick="drawGraph()" type="number" id="a2" placeholder="a2" value="0.5"
                                          min="0"
                                          max="1" step="0.05"> V
       </div>
       <div class="margin-right-2">
           <i>f</i><sub> 2</sub> = <input onclick="drawGraph()" type="number" id="f2" placeholder="f2" value="2"
                                          min="0"
                                          max="10" step="0.1"> kHz
       </div>
       <div class="margin-right-2">
           <i>&#966;</i><sub> 2</sub> = <input onclick="drawGraph()" type="number" id="phi2" placeholder="phi2"
                                               value="90"
                                               min="-180" max="180"
                                               step="5"> Grad
       </div>
   </div>
   <div class="margin-bottom-1">
       <!-- Formel für x(t) -->
       <span class="bordered">
           <i>x(t)</i> = <i>A</i><sub><sub>1</sub></sub> &#8901; <i>cos</i> (2&#960;<i>f</i><sub><sub>1</sub></sub> &#8901; <i>t</i> - <i>&#966;</i><sub>1</sub>) + <i>A</i><sub>2</sub>
           &#8901;
           cos (2&#960; <i>f</i><sub>2</sub> &#8901;  <i>t</i> - <i>&#966;</i><sub>2</sub>)
       </span>
   </div>
   <!-- Ausgabe Periodendauer, Funktionswerte x(t) und Eingabefeld t -->
   <div class="margin-bottom-1 flex-center">
       <div class="margin-right-2 align-vertical">
           t = <input onclick="displayY(); drawGraph();" type="number" id="t" placeholder="t" value="0.5" min="0"
                      max="10"
                      step="0.02"> ms
       </div>
       <div class="margin-right-2 align-vertical color-red">
           <span>x(t) = <span id="y-value"></span> V</span>
       </div>
       <div class="margin-right-2 align-vertical color-blue">
           <span>T<sub>0</sub> = <span id="t0"></span> ms</span>
       </div>
   </div>


   <!-- Beschriftung x-Achse-->
   <div class="label-y-axis"> x(t) / V</div>
   <div class="grid">
       <div>
           <canvas width="1000" height="400" id="graph-view"></canvas>
       </div>
       <div class="align-vertical">
           <span class="margin-left-1">t / ms</span>
       </div>
   </div>
   <div class="flex-center">
       <label class="align-vertical" onclick="drawGraph()">
           <input type="checkbox" id="show-grid-layout" checked> Gitter anzeigen
       </label>
       <label class="align-vertical margin-left-1" onclick="drawGraph()">
           <input type="checkbox" id="show-coordinates" checked>
           Koordinatensystem anzeigen
       </label>
   </div>
   <div>
       Abszisse<input type="number"
                      step="1"
                      min="5"
                      max="12"
                      value="12"
                      id="abscissa"
                      onclick="drawGraph()">
       Ordinaten<input type="number"
                       class="margin-left-1"
                       step="0.5"
                       min="0.5"
                       max="2"
                       value="2"
                       id="ordinates"
                       onclick="drawGraph()">
   </div>

</div>

<script>


   // Define fields
   var a1, a2, f1, f2, phi1, phi2, canvas, ctx, canvasWidth, canvasHeight, showGrid, currentT;
   // Constants
   var offset = 30; // in px
   var maxX = 12; // Abscissa
   var maxY = 2; // Ordinate
   drawGraph();
   function canvasWidthWithDelay() {
       setTimeout(calculateWidth(), 1000);
   }
   function calculateWidth() {
       var currentBodyWidth = document.getElementsByTagName('body')[0].offsetWidth;
       console.log('Calculating width', currentBodyWidth);
       document.getElementById('graph-view').width = Math.round(currentBodyWidth * 0.8);
       drawGraph();
   }
   function fillVariables() {
       a1 = parseFloat(document.getElementById('a1').value);
       a2 = parseFloat(document.getElementById('a2').value);
       f1 = parseFloat(document.getElementById('f1').value);
       f2 = parseFloat(document.getElementById('f2').value);
       phi1 = parseFloat(document.getElementById('phi1').value);
       phi2 = parseFloat(document.getElementById('phi2').value);
       currentT = parseFloat(document.getElementById('t').value);
       maxX = parseFloat(document.getElementById('abscissa').value);
       maxY = parseFloat(document.getElementById('ordinates').value);
       validateInputs();


       canvas = document.getElementById('graph-view');
       canvasWidth = canvas.width;
       canvasHeight = canvas.height;
       ctx = canvas.getContext("2d");
       showGrid = document.getElementById('show-grid-layout').checked;
       showCoordinates = document.getElementById('show-coordinates').checked;
       console.log('Updated variables', a1, a2, f1, f2, phi1, phi2);
       console.log('Canvas size', canvasHeight, ' x ', canvasWidth);
       console.log('Show grid', showGrid);
   }
   function drawGraph() {
       fillVariables();
       displayY();
       displayT0();
       ctx.clearRect(0, 0, canvasWidth, canvasHeight);
       ctx.strokeStyle = "#000000";
       ctx.fillStyle = "#000000";
       if (showCoordinates) {
           // Draw x-axis
           ctx.beginPath();
           ctx.moveTo(0, canvasHeight / 2);
           ctx.lineTo(canvasWidth, canvasHeight / 2);
           ctx.stroke();
           // Draw y-axis
           ctx.beginPath();
           ctx.moveTo(offset, offset);
           ctx.lineTo(offset, canvasHeight);
           ctx.stroke();
           // Draw triangle for x-axis
           ctx.beginPath();
           ctx.moveTo(canvasWidth, canvasHeight / 2);
           ctx.lineTo(canvasWidth - offset, canvasHeight / 2 + 5);
           ctx.lineTo(canvasWidth - offset, canvasHeight / 2 - 5);
           ctx.fill();
           // Draw triangle for y-axis
           ctx.beginPath();
           ctx.moveTo(offset, 0);
           ctx.lineTo(offset - 5, offset);
           ctx.lineTo(offset + 5, offset);
           ctx.fill();
       }
       // Draw labels and grid
       var font_size = 15;
       var width_x = (canvasWidth - 2 * offset) / maxX;
       ctx.font = font_size + "px Arial";
       // Draw vertical lines
       for (var i = 0; i < maxX; i++) {
           if (showCoordinates) {
               ctx.fillText(i, offset - font_size / 2 + width_x * i, canvasHeight / 2 + 15);
           }
           if (showGrid) {
               ctx.beginPath();
               ctx.lineWidth = 1;
               ctx.strokeStyle = "lightgrey";
               ctx.moveTo(offset + width_x * (i + 1), 0);
               ctx.lineTo(offset + width_x * (i + 1), canvasHeight);
               ctx.stroke();
           }
       }


       var width_y = (canvasHeight - 2 * offset) / (maxY * 2); // Called T in Mathematics
       // Draw horizontal lines
       for (var i = 2; i >= -2; i -= 0.5) {
           if (i != 0 || !showCoordinates) {
               if (showCoordinates) {
                   ctx.fillText(i, offset - font_size - 10, offset + width_y * (i * -1 + maxY));
               }
               if (showGrid) {
                   ctx.beginPath();
                   ctx.lineWidth = 1;
                   ctx.strokeStyle = "lightgrey";
                   ctx.moveTo(offset, offset + width_y * (i * -1 + maxY));
                   ctx.lineTo(canvasWidth - offset, offset + width_y * (i * -1 + maxY));
                   ctx.stroke();
               }
           }
       }
       // Draw t0
       ctx.beginPath();
       ctx.lineWidth = 2;
       ctx.strokeStyle = "#0000FF";
       ctx.moveTo(offset + width_x * getT0(), 0);
       ctx.lineTo(offset + width_x * getT0(), canvasHeight);
       ctx.stroke();
       // Write t0 label
       ctx.fillStyle = '#0000FF';
       ctx.fillText(getT0() + ' ms', (offset + width_x * getT0()) + 5, 20);
       ctx.fillStyle = 'black'; // Reset color


       var firstResult = periodicalSignal(0, a1, a2, f1, f2, phi1, phi2);
       ctx.beginPath();
       ctx.lineWidth = 1;
       ctx.strokeStyle = "#FF0000";
       ctx.moveTo(offset, canvasHeight / 2 - firstResult * width_y);
       for (var t = 0; t < maxX; t += 0.01) {
           var result = periodicalSignal(t, a1, a2, f1, f2, phi1, phi2);
           ctx.lineTo(offset + width_x * t, canvasHeight / 2 - result * width_y);
       }
       ctx.stroke();


       // Draw T0
       var result = periodicalSignal(currentT, a1, a2, f1, f2, phi1, phi2);
       console.log('Current T is ', currentT, result);
       // Draw dot
       ctx.beginPath();
       ctx.fillStyle = 'red';
       ctx.arc(offset + width_x * currentT, canvasHeight / 2 - result * width_y, 3, 0, 2 * Math.PI, true);
       ctx.fill();
   }
   function periodicalSignal(t, a1, a2, f1, f2, phi1, phi2) {
       return a1 * Math.cos(2 * Math.PI * f1 * t - toRadians(phi1)) + a2 * Math.cos(2 * Math.PI * f2 * t - toRadians(phi2));
   }
   function toRadians(angle) {
       return angle * (Math.PI / 180);
   }
   function displayY() {
       var currentT = parseFloat(document.getElementById('t').value);
       var result = periodicalSignal(currentT, a1, a2, f1, f2, phi1, phi2);
       var result_rounded = Math.round(result * 1000) / 1000;
       document.getElementById('y-value').textContent = result_rounded;
   }
   function displayT0() {
       var result_rounded2 = Math.round(getT0() * 100) / 100;
       document.getElementById('t0').textContent = result_rounded2;
   }
   function getT0() {
       // Get A and B
       var A, B, C, Q;  // A = smallest frequency, B = Highest frequency; C = GCD; Q = Helper for GCD
       if (f1 < f2) {
           A = f1;
           B = f2;
       } else {
           B = f1;
           A = f2;
       }


       if (f1 === 0) {
           console.log('T0 is  now ', 1 / f2);
           return 1 / f2;
       }
       if (f2 === 0) {
           return 1 / f1;
       }


       // Find Greatest common divisor
       for (var x = 1; x <= 10; x++) {
           C = A / x; // KHZ
           Q = B / C;

// if ((1 / C) == 15) { // return 5; // } // if ((1 / C) == 30) { // return 10; // }

           if (isInt(Q)) {
               return 1 / C;
           }
           if (x === 10) {
               return 10;
           }
       }
   }


   function isInt(n) { // Überprüft ob Zahl gerade ist
       return n % 1 === 0;
   }
   function validateInputs() {
       // Upper boundaries
       if (a1 > 1) {
           document.getElementById('a1').value = 1;
           a1 = 1;
       }
       if (a2 > 1) {
           document.getElementById('a2').value = 1;
           a2 = 1;
       }
       if (f1 > 10) {
           document.getElementById('f1').value = 10;
           f1 = 10;
       }
       if (f2 > 10) {
           document.getElementById('f2').value = 10;
           f2 = 10;
       }
       if (phi1 > 180) {
           document.getElementById('phi1').value = 180;
           phi1 = 180;
       }
       if (phi2 > 180) {
           document.getElementById('phi2').value = 180;
           phi2 = 180;
       }
       // Lower boundaries
       if (a1 < 0) {
           document.getElementById('a1').value = 0;
           a1 = 0;
       }
       if (a2 < 0) {
           document.getElementById('a2').value = 0;
           a2 = 0;
       }
       if (f1 < 0) {
           document.getElementById('f1').value = 0;
           f1 = 0;
       }
       if (f2 < 0) {
           document.getElementById('f2').value = 0;
           f2 = 0;
       }
       if (phi1 < -180) {
           document.getElementById('phi1').value = -180;
           phi1 = -180;
       }
       if (phi2 < -180) {
           document.getElementById('phi2').value = -180;
           phi2 = -180;
       }
       if (maxX < 1) {
           document.getElementById('abscissa').value = 1;
           maxX = 1;
       }
       if (maxY < 0.5) {
           document.getElementById('ordinates').value = 0.5;
           maxY = 0.5;
       }
   }
   document.addEventListener('keydown', function (key) {
       if (key.keyCode === 13) { // Enter pressed
           console.log('Enter pressed!');
           drawGraph();
       }
   });


</script> </body> </html>