Bastian
From LNTwww
<!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>φ</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>φ</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> ⋅ <i>cos</i> (2π<i>f</i><sub><sub>1</sub></sub> ⋅ <i>t</i> - <i>φ</i><sub>1</sub>) + <i>A</i><sub>2</sub>
⋅
cos (2π <i>f</i><sub>2</sub> ⋅ <i>t</i> - <i>φ</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>
