kopia lustrzana https://github.com/miguelvaca/vk3cpu
Drawing schematic
rodzic
0565496ac1
commit
8ff2862780
|
@ -23,7 +23,7 @@ canvas {
|
||||||
background: white;
|
background: white;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
border: 2px solid white;
|
border: 1px solid rgb(0, 0, 0);
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
@ -48,7 +48,7 @@ section.spreadsheet div.first-col {
|
||||||
|
|
||||||
section.controls div {
|
section.controls div {
|
||||||
background:white;
|
background:white;
|
||||||
font-size: smaller;
|
font-size: medium;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.controls div label {
|
section.controls div label {
|
||||||
|
|
84
magloop.html
84
magloop.html
|
@ -8,10 +8,10 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>VK3CPU - Small Loop Antenna Calculator</header>
|
<header>VK3CPU - Small Loop Antenna Calculator</header>
|
||||||
<!--
|
<canvas id="3Dantenna" width="800" height="200">
|
||||||
<canvas id="3Dantenna" height="200px">
|
|
||||||
3D Antenna Radiation Pattern Canvas
|
3D Antenna Radiation Pattern Canvas
|
||||||
</canvas>
|
</canvas>
|
||||||
|
<!--
|
||||||
<svg >
|
<svg >
|
||||||
<circle cx="25%" cy="50%" r="40" stroke="black" stroke-width="2" fill="white"/>
|
<circle cx="25%" cy="50%" r="40" stroke="black" stroke-width="2" fill="white"/>
|
||||||
<circle cx="25%" cy="50%" r="35" stroke="black" stroke-width="2" fill="white"/>
|
<circle cx="25%" cy="50%" r="35" stroke="black" stroke-width="2" fill="white"/>
|
||||||
|
@ -24,12 +24,12 @@
|
||||||
</canvas>
|
</canvas>
|
||||||
<section class="controls">
|
<section class="controls">
|
||||||
<div>
|
<div>
|
||||||
<label for="loop_diameter_slider">Loop diameter (2a):</label>
|
<label for="loop_diameter_slider">⌀a:</label>
|
||||||
<input type="range" id="loop_diameter_slider" min="0.5" max="3.0" value="1.0" step="0.05">
|
<input type="range" id="loop_diameter_slider" min="0.5" max="3.0" value="1.0" step="0.05">
|
||||||
<span id="loop_diameter_value"></span> (m)
|
<span id="loop_diameter_value"></span> (m)
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="conductor_diameter_slider">Conductor diameter (2b):</label>
|
<label for="conductor_diameter_slider">⌀b:</label>
|
||||||
<input type="range" id="conductor_diameter_slider" min="5" max="30" value="19" step="1">
|
<input type="range" id="conductor_diameter_slider" min="5" max="30" value="19" step="1">
|
||||||
<span id="conductor_diameter_value"></span> (mm)
|
<span id="conductor_diameter_value"></span> (mm)
|
||||||
</div>
|
</div>
|
||||||
|
@ -282,6 +282,7 @@
|
||||||
|
|
||||||
loop_diameter_slider.oninput = function() {
|
loop_diameter_slider.oninput = function() {
|
||||||
loop_diameter_value.innerHTML = this.value;
|
loop_diameter_value.innerHTML = this.value;
|
||||||
|
drawDesign();
|
||||||
updateFrequencies();
|
updateFrequencies();
|
||||||
myChart.data.datasets[0].data = calculateTuningCapacitor();
|
myChart.data.datasets[0].data = calculateTuningCapacitor();
|
||||||
myChart.data.datasets[1].data = calculateBandwidth();
|
myChart.data.datasets[1].data = calculateBandwidth();
|
||||||
|
@ -296,6 +297,7 @@
|
||||||
|
|
||||||
conductor_diameter_slider.oninput = function() {
|
conductor_diameter_slider.oninput = function() {
|
||||||
conductor_diameter_value.innerHTML = this.value;
|
conductor_diameter_value.innerHTML = this.value;
|
||||||
|
drawDesign();
|
||||||
myChart.data.datasets[0].data = calculateTuningCapacitor();
|
myChart.data.datasets[0].data = calculateTuningCapacitor();
|
||||||
myChart.data.datasets[1].data = calculateBandwidth();
|
myChart.data.datasets[1].data = calculateBandwidth();
|
||||||
myChart.data.datasets[2].data = calculateEfficiencyFactor();
|
myChart.data.datasets[2].data = calculateEfficiencyFactor();
|
||||||
|
@ -345,8 +347,80 @@
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
const plan_canvas = document.getElementById("3Dantenna");
|
||||||
|
const ctx = plan_canvas.getContext('2d');
|
||||||
|
|
||||||
|
function drawDesign() {
|
||||||
|
const win_width = plan_canvas.width;
|
||||||
|
const win_height = plan_canvas.height;
|
||||||
|
ctx.clearRect(0, 0, win_width, win_height);
|
||||||
|
const loop_radius = 75; // loop_diameter_slider.value * 80;
|
||||||
|
const cond_radius = conductor_diameter_slider.value / 4;
|
||||||
|
// Draw loop:
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(win_width/4, win_height/2, loop_radius + cond_radius, 0.5 * Math.PI + 0.02, 0.5 * Math.PI - 0.02);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(win_width/4, win_height/2, loop_radius - cond_radius, 0.5 * Math.PI + 0.025, 0.5 * Math.PI - 0.025);
|
||||||
|
ctx.stroke();
|
||||||
|
// Draw cap:
|
||||||
|
ctx.moveTo(win_width/4 - 3, win_height/2 + loop_radius - 3*cond_radius);
|
||||||
|
ctx.lineTo(win_width/4 - 3, win_height/2 + loop_radius + 3*cond_radius);
|
||||||
|
ctx.moveTo(win_width/4 + 3, win_height/2 + loop_radius - 3*cond_radius);
|
||||||
|
ctx.lineTo(win_width/4 + 3, win_height/2 + loop_radius + 3*cond_radius);
|
||||||
|
ctx.stroke();
|
||||||
|
// Draw loop diameter arrow:
|
||||||
|
ctx.moveTo(win_width/4 - loop_radius, win_height/2);
|
||||||
|
ctx.lineTo(win_width/4 - loop_radius + 2*cond_radius, win_height/2 - 2*cond_radius);
|
||||||
|
ctx.lineTo(win_width/4 - loop_radius + 2*cond_radius, win_height/2 + 2*cond_radius);
|
||||||
|
ctx.lineTo(win_width/4 - loop_radius, win_height/2);
|
||||||
|
ctx.lineTo(win_width/4 + loop_radius, win_height/2);
|
||||||
|
ctx.lineTo(win_width/4 + loop_radius - 2*cond_radius, win_height/2 + 2*cond_radius);
|
||||||
|
ctx.lineTo(win_width/4 + loop_radius - 2*cond_radius, win_height/2 - 2*cond_radius);
|
||||||
|
ctx.lineTo(win_width/4 + loop_radius, win_height/2);
|
||||||
|
ctx.stroke();
|
||||||
|
// Write loop diameter symbol:
|
||||||
|
ctx.font = "14px arial";
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.fillText("\u2300a = " + loop_diameter_slider.value.toString() + "m", win_width/4, win_height/2 - 5);
|
||||||
|
// Draw conductor diameter arrow:
|
||||||
|
var p1x = win_width/4 + 0.4 * (loop_radius - cond_radius);
|
||||||
|
var p1y = win_height/2 + 0.4 * (loop_radius - cond_radius);
|
||||||
|
var p2x = win_width/4 + 0.707 * (loop_radius - cond_radius);
|
||||||
|
var p2y = win_height/2 + 0.707 * (loop_radius - cond_radius);
|
||||||
|
var p3x = win_width/4 + 0.707 * (loop_radius - cond_radius) - 3*cond_radius;
|
||||||
|
var p3y = win_height/2 + 0.707 * (loop_radius - cond_radius);
|
||||||
|
var p4x = win_width/4 + 0.707 * (loop_radius - cond_radius);
|
||||||
|
var p4y = win_height/2 + 0.707 * (loop_radius - cond_radius) - 3*cond_radius;
|
||||||
|
ctx.moveTo(p1x, p1y);
|
||||||
|
ctx.lineTo(p2x, p2y);
|
||||||
|
ctx.lineTo(p3x, p3y);
|
||||||
|
ctx.lineTo(p4x, p4y);
|
||||||
|
ctx.lineTo(p2x, p2y);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
var p1x = win_width/4 + 1.0 * (loop_radius + cond_radius);
|
||||||
|
var p1y = win_height/2 + 1.0 * (loop_radius + cond_radius);
|
||||||
|
var p2x = win_width/4 + 0.707 * (loop_radius + cond_radius);
|
||||||
|
var p2y = win_height/2 + 0.707 * (loop_radius + cond_radius);
|
||||||
|
var p3x = win_width/4 + 0.707 * (loop_radius + cond_radius) + 3*cond_radius;
|
||||||
|
var p3y = win_height/2 + 0.707 * (loop_radius + cond_radius);
|
||||||
|
var p4x = win_width/4 + 0.707 * (loop_radius + cond_radius);
|
||||||
|
var p4y = win_height/2 + 0.707 * (loop_radius + cond_radius) + 3*cond_radius;
|
||||||
|
ctx.moveTo(p1x, p1y);
|
||||||
|
ctx.lineTo(p2x, p2y);
|
||||||
|
ctx.lineTo(p3x, p3y);
|
||||||
|
ctx.lineTo(p4x, p4y);
|
||||||
|
ctx.lineTo(p2x, p2y);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
var p1x = win_width/4 + 0.4 * (loop_radius - cond_radius);
|
||||||
|
var p1y = win_height/2 + 0.4 * (loop_radius - cond_radius) - 5;
|
||||||
|
ctx.fillText("\u2300b = " + conductor_diameter_slider.value.toString() + "mm", p1x, p1y);
|
||||||
|
}
|
||||||
|
drawDesign();
|
||||||
|
|
||||||
const chartCanvasContext = document.getElementById("chartCanvas").getContext('2d');
|
const chartCanvasContext = document.getElementById("chartCanvas").getContext('2d');
|
||||||
// console.log(chartCanvasContext);
|
|
||||||
|
|
||||||
var myChart = new Chart(chartCanvasContext, {
|
var myChart = new Chart(chartCanvasContext, {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
|
|
Ładowanie…
Reference in New Issue