mirror
/
vk3cpu
kopia lustrzana https://github.com/miguelvaca/vk3cpu
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Drawing schematic

pull/2/head
miguel 2020-10-19 21:01:28 +11:00
rodzic 0565496ac1
commit 8ff2862780
2 zmienionych plików z 81 dodań i 7 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
magloop.css
Wyświetl plik

@ -23,7 +23,7 @@ canvas {
background: white;
width: 100%;
margin: auto;
border: 2px solid white;
border: 1px solid rgb(0, 0, 0);
display: block;
box-sizing: border-box;
}
@ -48,7 +48,7 @@ section.spreadsheet div.first-col {
section.controls div {
background:white;
font-size: smaller;
font-size: medium;
}
section.controls div label {

84
magloop.html
Wyświetl plik

@ -8,10 +8,10 @@
</head>
<body>
<header>VK3CPU - Small Loop Antenna Calculator</header>
<!--
<canvas id="3Dantenna" height="200px">
<canvas id="3Dantenna" width="800" height="200">
3D Antenna Radiation Pattern Canvas
</canvas>
<!--
<svg >
<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"/>
@ -24,12 +24,12 @@
</canvas>
<section class="controls">
<div>
<label for="loop_diameter_slider">Loop diameter (2a):</label>
<label for="loop_diameter_slider">&#8960a:</label>
<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)
</div>
<div>
<label for="conductor_diameter_slider">Conductor diameter (2b):</label>
<label for="conductor_diameter_slider">&#8960b:</label>
<input type="range" id="conductor_diameter_slider" min="5" max="30" value="19" step="1">
<span id="conductor_diameter_value"></span> (mm)
</div>
@ -282,6 +282,7 @@
loop_diameter_slider.oninput = function() {
loop_diameter_value.innerHTML = this.value;
drawDesign();
updateFrequencies();
myChart.data.datasets[0].data = calculateTuningCapacitor();
myChart.data.datasets[1].data = calculateBandwidth();
@ -296,6 +297,7 @@
conductor_diameter_slider.oninput = function() {
conductor_diameter_value.innerHTML = this.value;
drawDesign();
myChart.data.datasets[0].data = calculateTuningCapacitor();
myChart.data.datasets[1].data = calculateBandwidth();
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');
// console.log(chartCanvasContext);
var myChart = new Chart(chartCanvasContext, {
type: 'line',