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

GUI cleanup 

Added vk3cpu email address
Fixed width to avoid scrollbar (100% instead of 100vh)
Removed redundant info next to scrollbars.
pull/2/head
miguel 2020-10-27 18:12:32 +11:00
rodzic 618e687860
commit 91356300c5
2 zmienionych plików z 41 dodań i 34 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

23
magloop.css
Wyświetl plik

@ -4,9 +4,10 @@ body {
}
header {
background: black;
color: white;
background: rgb(98, 226, 248);
color: black;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: smaller;
text-align: center;
}
@ -46,7 +47,7 @@ section div.antennaFront-container {
}
section div.sliders {
background:rgb(255, 255, 255);
background:white;
display: inline-block;
font-size: small;
margin: 0px;
@ -66,17 +67,17 @@ div label {
div input {
background:lightsalmon;
display: inline-block;
width: 60%;
width: 85%;
}
section div.antennaSide-container {
background: white;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
background: white;
border: 1px solid rgb(0, 0, 0);
position: absolute;
}
@ -94,8 +95,8 @@ section div.antennaSide-container {
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 4;
height: 85vh;
width: 100vw;
height: 80vh;
width: 100%;
box-sizing: border-box;
}
@ -117,7 +118,7 @@ section div.antennaSide-container {
grid-row-start: 5;
grid-row-end: 6;
}
}
}
@media (orientation: landscape) {
section.gridLayoutClass {
@ -132,8 +133,8 @@ section div.antennaSide-container {
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
height: 85vh;
width: 100vw;
height: 80vh;
width: 100%;
box-sizing: border-box;
}
@ -176,7 +177,7 @@ section div.antennaSide-container {
@media print (orientation: portrait) {
section.gridLayoutClass {
display: grid;
grid-template-columns: repeat(2, 300px);
grid-template-columns: repeat(2, 200px);
grid-template-rows: repeat(2, 300px) 150px 120px;
justify-items: stretch;
}

52
magloop.html
Wyświetl plik

@ -7,7 +7,7 @@
<link rel="stylesheet" href="magloop.css">
</head>
<body>
<header>Miguel VK3CPU - Interactive Magloop Antenna Calculator (v1.0a)</header>
<header>Miguel <a href="mailto:vk3cpu@gmail.com">VK3CPU</a> - Interactive Magloop Antenna Calculator (v1.0a)</header>
<section class="gridLayoutClass">
<div class="chart-container" style="position: relative;">
<canvas id="chartCanvas" class="chartCanvasClass">
@ -18,27 +18,27 @@
<div class="sliders">
<label for="loop_diameter_slider">&#8960a:</label>
<input type="range" id="loop_diameter_slider" min="0.2" max="5.0" value="1.0" step="0.05">
<span id="loop_diameter_value"></span>m
<!-- <span id="loop_diameter_value"></span>m -->
</div>
<div class="sliders">
<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
<!-- <span id="conductor_diameter_value"></span>mm -->
</div>
<div class="sliders">
<label for="loop_turns_slider">N:</label>
<input type="range" id="loop_turns_slider" min="1" max="8" value="1.0" step="1.0">
<span id="loop_turns_value"></span>
<!-- <span id="loop_turns_value"></span> -->
</div>
<div class="sliders">
<label for="loop_spacing_slider">c/b:</label>
<input type="range" id="loop_spacing_slider" min="1.1" max="4.0" value="2.0" step="0.01">
<span id="loop_spacing_value"></span>
<!-- <span id="loop_spacing_value"></span> -->
</div>
<div class="sliders">
<label for="transmit_power_slider">Tx:</label>
<input type="range" id="transmit_power_slider" min="5" max="1500" value="400" step="5">
<span id="transmit_power_value"></span>W
<!-- <span id="transmit_power_value"></span>W -->
</div>
</div>
<div id="antenna-front-container" class="antennaFront-container" style="position: relative;">
@ -58,24 +58,24 @@
var loop_diameter_slider = document.getElementById("loop_diameter_slider");
var loop_diameter_value = document.getElementById("loop_diameter_value");
var val = loop_diameter_slider.value * 1.0;
loop_diameter_value.innerHTML = val.toPrecision(3).toString();
//loop_diameter_value.innerHTML = val.toPrecision(3).toString();
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;
//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;
//loop_turns_value.innerHTML = loop_turns_slider.value;
var loop_spacing_slider = document.getElementById("loop_spacing_slider");
var loop_spacing_value = document.getElementById("loop_spacing_value");
val = loop_spacing_slider.value * 1.0;
loop_spacing_value.innerHTML = val.toPrecision(3).toString();
//loop_spacing_value.innerHTML = val.toPrecision(3).toString();
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;
//transmit_power_value.innerHTML = transmit_power_slider.value;
function updateFrequencies() {
const hamFrequencies = [
@ -312,8 +312,8 @@
}
loop_diameter_slider.oninput = function() {
const val = this.value * 1.0;
loop_diameter_value.innerHTML = val.toPrecision(3).toString();
//const val = this.value * 1.0;
//loop_diameter_value.innerHTML = val.toPrecision(3).toString();
drawFrontDesign();
drawSideDesign();
updateFrequencies();
@ -329,7 +329,7 @@
}
conductor_diameter_slider.oninput = function() {
conductor_diameter_value.innerHTML = this.value;
//conductor_diameter_value.innerHTML = this.value;
drawFrontDesign();
drawSideDesign();
myChart.data.datasets[0].data = calculateTuningCapacitor();
@ -344,7 +344,7 @@
}
loop_turns_slider.oninput = function() {
loop_turns_value.innerHTML = this.value;
//loop_turns_value.innerHTML = this.value;
drawFrontDesign();
drawSideDesign();
myChart.data.datasets[0].data = calculateTuningCapacitor();
@ -359,8 +359,8 @@
}
loop_spacing_slider.oninput = function() {
const val = loop_spacing_slider.value * 1.0;
loop_spacing_value.innerHTML = val.toPrecision(3).toString();
//const val = loop_spacing_slider.value * 1.0;
//loop_spacing_value.innerHTML = val.toPrecision(3).toString();
drawFrontDesign();
drawSideDesign();
myChart.data.datasets[0].data = calculateTuningCapacitor();
@ -375,27 +375,30 @@
}
transmit_power_slider.oninput = function() {
transmit_power_value.innerHTML = this.value;
//transmit_power_value.innerHTML = this.value;
drawFrontDesign();
myChart.data.datasets[7].data = calculateCapacitorVoltage();
myChart.update();
}
window.onresize = function() {
myChart.update();
//myChart.resize();
//myChart.update();
drawFrontDesign();
drawSideDesign();
// console.log("resize!");
}
window.onorientationchange = function() {
myChart.update();
//myChart.resize();
//myChart.update();
drawFrontDesign();
drawSideDesign();
}
window.onbeforeprint = function() {
console.log("onbeforeprint");
myChart.resize();
//myChart.resize();
drawFrontDesign();
drawSideDesign();
}
@ -412,7 +415,7 @@
afront_canvas.height = win_height-2;
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;
const loop_radius = win_width < win_height ? 0.32 * win_width : 0.32 * win_height; // 100; // loop_diameter_slider.value * 80;
const cond_radius = conductor_diameter_slider.value / 5;
const loopx = win_width/2;
const loopy = win_height/2;
@ -456,6 +459,9 @@
const L = getInductance() * 1.0e+6;
fctx.fillText("L = " + L.toPrecision(3).toString() + " \u03bcH", 8, 18);
// Write Tx power text:
fctx.fillText("P = " + transmit_power_slider.value + "W", 8, win_height * 0.8 + 20);
// Write loop diameter symbol:
fctx.font = "12px arial";
fctx.textAlign = "center";
@ -710,7 +716,7 @@
position: 'right',
id: 'mohmsID',
},{
type: 'linear',
type: 'logarithmic',
display: 'auto',
scaleLabel: {
display: true,