diff --git a/magloop.css b/magloop.css
index 5637ae1..8080389 100644
--- a/magloop.css
+++ b/magloop.css
@@ -10,44 +10,42 @@ header {
text-align: center;
}
-svg {
- background: white;
- width: 100%;
- margin: auto;
- border: 2px solid #000000;
- display: block;
- box-sizing: border-box;
+section.flexLayoutClass {
+ display: flex;
+ flex-direction: column;
}
-canvas {
- background: white;
- width: 100%;
+canvas.chartCanvasClass {
+ background: rgb(255, 255, 255);
+ /*width: 100%;*/
margin: auto;
border: 1px solid rgb(0, 0, 0);
- display: block;
- box-sizing: border-box;
+ /* display: block; */
+ /*box-sizing: border-box; */
}
-section.spreadsheet {
- background: grey;
+section.controls {
display: flex;
- flex-direction: row;
}
-
-section.spreadsheet div {
- background: lightblue;
+section.controls div.slider_container {
+ width: 70%;
+ border: 1px solid rgb(0, 0, 0);
+ /*display: flex;*/
+ /*flex-direction: column;*/
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:white;
+section.controls canvas.antennaClass {
+ background: white;
+ width: 30%;
+ margin: auto;
+ border: 1px solid rgb(0, 0, 0);
+ /*display: block;*/
+ /*box-sizing: border-box;*/
+}
+
+section.controls div.sliders {
+ background:rgb(255, 255, 255);
font-size: small;
}
diff --git a/magloop.html b/magloop.html
index 1a85f94..8799b61 100644
--- a/magloop.html
+++ b/magloop.html
@@ -8,53 +8,51 @@
Miguel VK3CPU - Small Loop Antenna Calculator
-
-
-
-
-
-
-
- (m)
-
-
-
-
- (mm)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (W)
-
-
+
+
+
+
+
+
@@ -342,13 +340,13 @@
myChart.data.datasets[7].data = calculateCapacitorVoltage();
myChart.update();
}
-/*
+
window.onresize = function() {
chartCanvas.width = window.innerWidth;
chartCanvas.height = 200;
console.log(window.innerWidth, window.innerHeight);
}
-*/
+
/*
heightAboveGround_slider.oninput = function() {
heightAboveGround_value.innerHTML = this.value;
@@ -364,8 +362,8 @@
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;
- const loopx = win_width/4;
- const loopy = win_height/2;
+ const loopx = win_width/2;
+ const loopy = win_height/4;
// Draw loop:
ctx.beginPath();
@@ -400,7 +398,7 @@
ctx.font = "14px arial";
ctx.textAlign = "center";
const dia = 1.0 * loop_diameter_slider.value;
- ctx.fillText("\u2300a = " + dia.toPrecision(3).toString() + "m", loopx, loopy - 5);
+ ctx.fillText("\u2300a = " + dia.toPrecision(3).toString() + "m", loopx, loopy - 8);
// Draw conductor diameter arrow:
ctx.beginPath();
@@ -437,10 +435,10 @@
p1y = loopy + 0.4 * (loop_radius - cond_radius) - 5;
ctx.fillText("\u2300b = " + conductor_diameter_slider.value.toString() + "mm", p1x, p1y);
- const start_x = win_width/2;
- const top_y = win_height * 0.2;
- const bot_y = win_height * 0.8;
const cond_spacing = 2 * cond_radius * loop_spacing_slider.value;
+ const start_x = win_width/2 - loop_turns_slider.value * cond_spacing * 0.5;
+ const top_y = win_height * 0.6;
+ const bot_y = win_height * 0.9;
for (let i = 0; i < loop_turns_slider.value; i++) {
ctx.beginPath();
ctx.arc(start_x + i * cond_spacing, bot_y, cond_radius, 0, Math.PI);
@@ -456,7 +454,7 @@
ctx.stroke();
}
// Draw left spacing arrow:
- const dim_y = win_height * 0.9;
+ const dim_y = win_height * 0.95;
ctx.beginPath();
ctx.moveTo(start_x - 30, dim_y);
ctx.lineTo(start_x, dim_y);
@@ -478,7 +476,7 @@
ctx.stroke();
// Draw turns number text:
- ctx.fillText("N = " + loop_turns_slider.value.toString(), start_x + 0.5 * cond_spacing, win_height * 0.1 + 5);
+ ctx.fillText("N = " + loop_turns_slider.value.toString(), loopx, win_height * 0.6 - 10);
// Draw spacing text:
ctx.textAlign = "left";
@@ -568,6 +566,7 @@
}]
},
options: {
+ maintainAspectRatio: false,
scales: {
xAxes: [{
type: 'linear',
@@ -587,6 +586,10 @@
fontColor: 'black',
fontStyle: 'bold'
},
+ ticks: {
+ min: 0,
+ max: 100,
+ },
position: 'left',
id: 'effID'
},{