Bastian: Addition periodischer Signale

2017-09-10T16:44:46Z

Addition periodischer Signale

Neue Seite

<!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>

<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">

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


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


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

Benutzer:Bastian - Versionsgeschichte

Bastian: Addition periodischer Signale