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

Fixed alignment of sliders with inline-block

pull/2/head
miguel 2020-10-23 16:55:31 +11:00
rodzic f20380ef1e
commit b80e9f5671
2 zmienionych plików z 27 dodań i 15 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

16
magloop.css
Wyświetl plik

@ -2,6 +2,7 @@ body {
background: rgb(201, 201, 201);
margin: 0px;
}
header {
background: black;
color: white;
@ -23,8 +24,12 @@ section div.slider_container {
height: 100%;
background: rgb(255, 255, 255);
border: 1px solid rgb(0, 0, 0);
margin: 0%;
display: inline-block;
margin: 0px;
padding: 0px;
/*display: inline-block;*/
box-sizing: border-box;
display: flex;
flex-direction: column;
}
section div.antennaFront-container {
@ -32,8 +37,8 @@ section div.antennaFront-container {
height: 100%;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid rgb(0, 0, 0);
position: absolute;
@ -41,6 +46,7 @@ section div.antennaFront-container {
section div.sliders {
background:rgb(255, 255, 255);
display: inline-block;
font-size: small;
margin: 0px;
padding: 0px;
@ -116,7 +122,7 @@ section div.antennaSide-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr) 150px;
justify-items: auto;
justify-items: stretch;
}
section div.chart-container {

26
magloop.html
Wyświetl plik

@ -42,11 +42,11 @@
</div>
</div>
<div id="antenna-front-container" class="antennaFront-container" style="position: relative;">
<canvas id="antennaFront2D" class="antennaFrontClass" width="50" height="50">
<canvas id="antennaFront2D" class="antennaFrontClass" width="150" height="150">
</canvas>
</div>
<div id="antenna-side-container" class="antennaSide-container" style="position: relative;">
<canvas id="antennaSide2D" class="antennaSideClass" width="50" height="50">
<canvas id="antennaSide2D" class="antennaSideClass" width="150" height="150">
</canvas>
</div>
</section>
@ -87,7 +87,8 @@
function updateFrequencies() {
const hamFrequencies = [
//1.6, 2.0, 4.0, 6.0, 8.0
0.1357, 0.1378, 0.472, 0.479, 1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
//0.1357, 0.1378, 0.472, 0.479, 1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
//1.8, 2.2, 2.8, 3.5, 5.0, 6.0, 7.0, 8.0, 9.0, 10.1, 12.0, 14.0, 16.0, 18.068, 21.0, 24.89, 28.0
//1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20
];
@ -153,8 +154,13 @@
const wavelength = 3e8 / (frequency * 1e6);
const l = (Math.PI * loop_diameter_slider.value) / wavelength;
const reactance = 2.0 * Math.PI * frequency * 1e6 * inductance;
const capacitance = 1e12 / (2.0 * Math.PI * frequency * 1e6 * reactance);
return capacitance;
const e0 = 8.854187e-12;
const h = loop_spacing_slider.value * conductor_diameter_slider.value;
const a = conductor_diameter_slider.value * 0.5;
const multiloop_capacitance = (loop_turns_slider.value > 1) ?
(2.0*Math.PI*e0) / Math.log((h + Math.sqrt(h**2 - a**2))/a) * Math.PI * loop_diameter_slider.value * loop_turns_slider.value : 0.0;
const capacitance = 1e12 * ((1.0 / (2.0 * Math.PI * frequency * 1e6 * reactance)) - multiloop_capacitance);
return capacitance; // in picofarads
}
function calculateTuningCapacitor() {
@ -183,7 +189,7 @@
function getProximityResFromSpacing(spacing_ratio) {
// Use the proximityResistance look-up table and interpolate values depending on the spacing ratio and the number of turns.
var retval = 0.0;
const n_turns = loop_turns_slider.value;
var n_turns = loop_turns_slider.value;
var i = 0;
for (i = 0; i < (proximityResistance[0].length-1); i++) {
if(spacing_ratio <= proximityResistance[0][i+1]) {
@ -372,8 +378,8 @@
const win_height = document.getElementById("antenna-front-container").offsetHeight;
//const win_width = afront_canvas.getBoundingClientRect().width;
//const win_height = afront_canvas.getBoundingClientRect().height;
afront_canvas.width = win_width-2;
afront_canvas.height = win_height-2;
afront_canvas.width = win_width;
afront_canvas.height = win_height;
fctx.clearRect(0, 0, win_width, win_height);
const loop_radius = win_width < win_height ? 0.35 * win_width : 0.35 * win_height; // 100; // loop_diameter_slider.value * 80;
@ -472,8 +478,8 @@
//const win_width = aside_canvas.getBoundingClientRect().width;
//const win_height = aside_canvas.getBoundingClientRect().height;
//console.log(win_width, win_height);
aside_canvas.width = win_width-2;
aside_canvas.height = win_height-2;
aside_canvas.width = win_width;
aside_canvas.height = win_height;
//const win_width = aside_canvas.width;
//const win_height = aside_canvas.height;
sctx.clearRect(0, 0, win_width, win_height);