vk3cpu/magloop.html

265 wiersze
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VK3CPU Magloop Solver</title>
<link rel="stylesheet" href="magloop.css">
</head>
<body>
<header>Miguel VK3CPU - Magloop Antenna Calculator</header>
<canvas id="3Dantenna" height="200px">
3D Antenna Radiation Pattern Canvas
</canvas>
<canvas id="chartCanvas" height="200px">
2D Chart Canvas
</canvas>
<section class="controls">
<div>
<label for="loop_diameter_slider">Loop diameter (2a):</label>
<input type="range" id="loop_diameter_slider" min="0.5" max="3.0" value="1.0" step="0.1">
<span id="loop_diameter_value"></span> (m)
</div>
<div>
<label for="conductor_diameter_slider">Conductor diameter (2b):</label>
<input type="range" id="conductor_diameter_slider" min="5" max="30" value="19" step="1">
<span id="conductor_diameter_value"></span> (mm)
</div>
<div>
<label for="loop_turns_slider">Loop turns:</label>
<input type="range" id="loop_turns_slider" min="1" max="8" value="1.0" step="1.0">
<span id="loop_turns_value"></span>
</div>
<div>
<label for="transmit_power_slider">Transmit Power:</label>
<input type="range" id="transmit_power_slider" min="25" max="1500" value="400" step="25">
<span id="transmit_power_value"></span> (W)
</div>
<div>
<label for="heightAboveGround_slider">Height above ground:</label>
<input type="range" id="heightAboveGround_slider" min="0.0" max="10.0" value="1.0" step="0.1">
<span id="heightAboveGround_value"></span> (m)
</div>
</section>
<footer>
<p>Footer</p>FFF
</footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
const frequencies = [
1.8, 3.5, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0
];
var loop_diameter_slider = document.getElementById("loop_diameter_slider");
var loop_diameter_value = document.getElementById("loop_diameter_value");
loop_diameter_value.innerHTML = loop_diameter_slider.value;
var conductor_diameter_slider = document.getElementById("conductor_diameter_slider");
var conductor_diameter_value = document.getElementById("conductor_diameter_value");
conductor_diameter_value.innerHTML = conductor_diameter_slider.value;
var loop_turns_slider = document.getElementById("loop_turns_slider");
var loop_turns_value = document.getElementById("loop_turns_value");
loop_turns_value.innerHTML = loop_turns_slider.value;
var transmit_power_slider = document.getElementById("transmit_power_slider");
var transmit_power_value = document.getElementById("transmit_power_value");
transmit_power_value.innerHTML = transmit_power_slider.value;
var heightAboveGround_slider = document.getElementById("heightAboveGround_slider");
var heightAboveGround_value = document.getElementById("heightAboveGround_value");
heightAboveGround_value.innerHTML = heightAboveGround_slider.value;
function getInductance() {
const a_coil_radius = loop_diameter_slider.value * 0.5;
const b_conductor_radius = conductor_diameter_slider.value * 0.0005;
const n_turns = loop_turns_slider.value;
const mu0 = 4.0 * Math.PI * 1e-7;
var retval = (n_turns ** 2.0) * mu0 * a_coil_radius * (Math.log(8.0 * a_coil_radius / b_conductor_radius) - 2.0);
return retval;
}
function calculateRadiationResistance() {
var retval = [];
const n_turns = loop_turns_slider.value;
const k = 20.0 * (Math.PI ** 2.0);
frequencies.forEach(freq => {
const wavelength = 3e8 / (freq * 1e6);
const l = (Math.PI * loop_diameter_slider.value) / wavelength;
if (l <= 0.25) {
const rr = (n_turns ** 2.0) * k * (l ** 4.0);
retval.push({x:freq, y:rr});
}
});
return retval;
}
function calculateInductiveReactance() {
var retval = [];
const inductance = getInductance();
frequencies.forEach(freq => {
const wavelength = 3e8 / (freq * 1e6);
const l = (Math.PI * loop_diameter_slider.value) / wavelength;
if (l <= 0.25) {
const reactance = 2.0 * Math.PI * (freq * 1e6) * inductance;
retval.push({x:freq, y:reactance});
}
});
return retval;
}
function calculateTuningCapacitor() {
var retval = [];
const inductance = getInductance();
frequencies.forEach(freq => {
const wavelength = 3e8 / (freq * 1e6);
const l = (Math.PI * loop_diameter_slider.value) / wavelength;
if (l <= 0.25) {
const reactance = 2.0 * Math.PI * freq * 1e6 * inductance;
const capacitor = 1e12 / (2.0 * Math.PI * freq * 1e6 * reactance);
retval.push({x:freq, y:capacitor});
}
});
return retval;
}
function calculateLossResistance() {
var retval = [];
const a_coil_radius = loop_diameter_slider.value * 0.5;
const b_conductor_radius = conductor_diameter_slider.value * 0.0005;
const n_turns = loop_turns_slider.value;
const mu0 = 4.0 * Math.PI * 1e-7;
const k = (n_turns * a_coil_radius / b_conductor_radius);
const cu_sigma = 58e6;
frequencies.forEach(freq => {
const Rs = Math.sqrt(Math.PI * freq * 1e6 * mu0 / cu_sigma);
// TODO *** finish this! Find eqn for Rp / R0;
retval.push({x:freq, y:capacitor});
});
return retval;
}
function calculateQualityFactor() {
var retval = [];
return retval;
}
loop_diameter_slider.oninput = function() {
loop_diameter_value.innerHTML = this.value;
myChart.data.datasets[0].data = calculateRadiationResistance();
myChart.data.datasets[1].data = calculateInductiveReactance();
myChart.data.datasets[2].data = calculateTuningCapacitor();
myChart.update();
}
conductor_diameter_slider.oninput = function() {
conductor_diameter_value.innerHTML = this.value;
myChart.data.datasets[0].data = calculateRadiationResistance();
myChart.data.datasets[1].data = calculateInductiveReactance();
// myChart.data.datasets[2].data = calculateTuningCapacitor();
myChart.update();
}
loop_turns_slider.oninput = function() {
loop_turns_value.innerHTML = this.value;
myChart.data.datasets[0].data = calculateRadiationResistance();
myChart.data.datasets[1].data = calculateInductiveReactance();
myChart.data.datasets[2].data = calculateTuningCapacitor();
myChart.update();
}
transmit_power_slider.oninput = function() {
transmit_power_value.innerHTML = this.value;
}
heightAboveGround_slider.oninput = function() {
heightAboveGround_value.innerHTML = this.value;
}
const chartCanvasContext = document.getElementById("chartCanvas").getContext('2d');
console.log(chartCanvasContext);
var myChart = new Chart(chartCanvasContext, {
type: 'line',
data: {
datasets: [{
label: 'Radiation Resistance \u03A9',
fill: false,
borderColor: 'red',
backgroundColor: 'red',
data: calculateRadiationResistance(),
borderWidth: 1,
yAxisID: 'mohmsID'
},
{
label: 'Inductive Reactance \u03A9',
fill: false,
borderColor: 'blue',
backgroundColor: 'blue',
data: calculateInductiveReactance(),
borderWidth: 1,
yAxisID: 'ohmsID'
},
{
label: 'Tuning Capacitance',
fill: false,
borderColor: 'green',
backgroundColor: 'green',
data: calculateTuningCapacitor(),
borderWidth: 1,
yAxisID: 'pfID'
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
display: true,
scaleLabel: {
display: true,
labelString: 'Frequency (MHz)'
}
}],
yAxes: [{
type: 'linear',
display: true,
scaleLabel: {
display: true,
labelString: 'Ohms \u03A9',
fontColor: 'blue',
fontStyle: 'bold'
},
position: 'left',
id: 'ohmsID'
},
{
type: 'linear',
display: true,
scaleLabel: {
display: true,
labelString: '\u03A9',
fontColor: 'red',
fontStyle: 'bold'
},
position: 'left',
id: 'mohmsID'
},{
type: 'linear',
display: true,
scaleLabel: {
display: true,
labelString: 'pF',
fontColor: 'green',
fontStyle: 'bold'
},
position: 'right',
id: 'pfID'
}]
},
showLines: true
}
});
</script>
</html>