pull/2/head
miguel 2020-10-17 15:04:13 +11:00
rodzic ca2d6a6043
commit e7f04c0807
4 zmienionych plików z 600 dodań i 64 usunięć

15
.vscode/launch.json vendored 100644
Wyświetl plik

@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

265
index.html 100644
Wyświetl plik

@ -0,0 +1,265 @@
<!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>

57
magloop.css 100644
Wyświetl plik

@ -0,0 +1,57 @@
body {
background: rgb(196, 122, 77);
margin: 0px;
}
header {
background: black;
color: white;
font-family: 'Courier New', Courier, monospace;
text-align: center;
}
canvas {
background: white;
width: 100%;
height: 200px;
margin: auto;
border: 3px solid #ff0000;
display: block;
box-sizing: border-box;
}
section.spreadsheet {
background: grey;
display: flex;
flex-direction: row;
}
section.spreadsheet div {
background: lightblue;
display: inline-block;
margin: auto;
margin-top: 0%;
width: auto;
text-align: center;
}
section.spreadsheet div.first-col {
text-align: right;
}
section.controls div {
background:yellow;
}
section.controls div label {
background:rgb(94, 245, 94);
display: inline-block;
width: 180px;
text-align: right;
}
section.controls div input {
background:lightsalmon;
display: inline-block;
width: 300px;
}
footer {
background: white;
}

Wyświetl plik

@ -1,66 +1,265 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Multiple sliders</title>
<link rel="stylesheet" href="../jquery-ui-1.12.1/jquery-ui.css">
<script src="../jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="../jquery-ui-1.12.1/jquery-ui.js"></script>
<style>
#eq > span {
height:120px; float:left; margin:15px
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
// setup master volume
$( "#master" ).slider({
value: 60,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
} );
</script>
</head>
<body>
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Master volume
</p>
<div id="master" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Graphic EQ
</p>
<div id="eq">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
</body>
<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>