diff --git a/toroid.css b/toroid.css index a51a3a9..8afd531 100644 --- a/toroid.css +++ b/toroid.css @@ -34,6 +34,18 @@ section div.slider_container { flex-direction: column; } +section div.chart-container { + width: 100%; + height: 100%; + display: block; + box-sizing: border-box; + margin: 0px; + padding: 0px; + background: white; + border: 1px solid rgb(0, 0, 0); + position: relative; +} + section div.inductor-container { width: 100%; height: 100%; @@ -76,13 +88,20 @@ div input { grid-template-columns: 1fr; grid-template-rows: 1fr 0.3fr; grid-template-areas: + "chart-container" "inductor-container" "slider-container"; justify-items: stretch; } + section div.chart-container { + height: 100vw; + width: 100vw; + box-sizing: border-box; + } + section div.inductor-container { - height: 55vh; + height: 35vh; width: 100vw; box-sizing: border-box; } @@ -98,17 +117,24 @@ div input { grid-template-columns: 1fr; grid-template-rows: 1fr 0.3fr; grid-template-areas: + "chart-container" "inductor-container" "slider-container"; justify-items: stretch; } - section div.inductor-container { + section div.chart-container { height: 100vh; width: 100vw; box-sizing: border-box; } + section div.inductor-container { + height: 70vh; + width: 100vw; + box-sizing: border-box; + } + section div.slider_container { width: 100%; } diff --git a/toroid.html b/toroid.html index 08f3eb3..d6fd008 100644 --- a/toroid.html +++ b/toroid.html @@ -7,8 +7,13 @@ -
Miguel VK3CPU - RF Toroid Calculator
+
Miguel VK3CPU - RF Toroid Calculator v0.2
+
+ + 2D Chart Canvas + +
@@ -17,7 +22,7 @@
@@ -41,11 +48,11 @@
- +
- +
@@ -88,43 +95,47 @@
+ + + + - + \ No newline at end of file diff --git a/toroid_old.css b/toroid_old.css new file mode 100644 index 0000000..a51a3a9 --- /dev/null +++ b/toroid_old.css @@ -0,0 +1,198 @@ +body { + background: rgb(226, 226, 226); + margin: 0px; +} + +header { + background: rgb(226, 226, 226); + color: black; + font-family: 'Courier New', Courier, monospace; + font-weight: bold; + font-size: smaller; + text-align: center; +} + +canvas.inductorClass { + background: rgb(255, 255, 255); + margin: 1px; + padding: 2px; + border: 0px solid rgb(0, 0, 0); + display: block; + box-sizing: border-box; +} + +section div.slider_container { + width: 100%; + height: 100%; + background: rgb(255, 255, 255); + border: 1px solid rgb(0, 0, 0); + margin: 0px; + padding: 0px; + /*display: inline-block;*/ + box-sizing: border-box; + display: flex; + flex-direction: column; +} + +section div.inductor-container { + width: 100%; + height: 100%; + display: block; + box-sizing: border-box; + margin: 0px; + padding: 0px; + background: white; + border: 1px solid rgb(0, 0, 0); + position: relative; +} + +section div.sliders { + background:white; + display: inline-block; + font-size: small; + margin: 0px; + padding: 0px; + width: auto; + height: auto; +} + +div label { + background:white; + display: inline-block; + width: 12%; + font-size: small; + text-align: right; +} + +div input { + background:lightsalmon; + display: inline-block; + width: 85%; +} + +@media (orientation: portrait) { + section.gridLayoutClass { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 0.3fr; + grid-template-areas: + "inductor-container" + "slider-container"; + justify-items: stretch; + } + + section div.inductor-container { + height: 55vh; + width: 100vw; + box-sizing: border-box; + } + + section div.slider_container { + width: 100%; + } +} + +@media (orientation: landscape) { + section.gridLayoutClass { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 0.3fr; + grid-template-areas: + "inductor-container" + "slider-container"; + justify-items: stretch; + } + + section div.inductor-container { + height: 100vh; + width: 100vw; + box-sizing: border-box; + } + + section div.slider_container { + width: 100%; + } +} + +@media screen and (min-width: 800px) { + section.gridLayoutClass { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + "inductor-container" "slider-container" + "inductor-container" "notes"; + justify-items: stretch; + } + + section div.inductor-container { + height: 100vh; + width: 50vw; + box-sizing: border-box; + } + + section div.slider_container { + width: 100%; + height: 20%; + } + + section div.notes { + width: 100%; + height: 50%; + } +} + + +/* +@media (orientation: landscape) { + section.gridLayoutClass { + display: grid; + grid-template-columns: 1fr 0.3fr; + grid-template-rows: 1fr; + grid-template-areas: + "inductor-container" "slider-container"; + } + + section div.inductor-container { + height: 90vh; + width: 60vw; + box-sizing: border-box; + } + + section div.slider_container { + width: 40vw; + } +} + +@media print (orientation: landscape) { + section.gridLayoutClass { + display: grid; + grid-template-columns: repeat(4, 300px); + grid-template-rows: repeat(1, 300px) 150px; + justify-items: stretch; + } + section div.chart-container { + min-height: 100%; + max-width: 100%; + max-height: 100%; + height: auto!important; + width: auto!important; + } +} + +@media print (orientation: portrait) { + section.gridLayoutClass { + display: grid; + grid-template-columns: repeat(2, 200px); + grid-template-rows: repeat(2, 300px) 150px 120px; + justify-items: stretch; + } + section div.chart-container { + min-height: 100%; + max-width: 100%; + max-height: 100%; + height: auto!important; + width: auto!important; + } +} +*/ diff --git a/toroid_old.html b/toroid_old.html new file mode 100644 index 0000000..1c3cf30 --- /dev/null +++ b/toroid_old.html @@ -0,0 +1,581 @@ + + + + + + VK3CPU RF Toroid Calculator + + + +
Miguel VK3CPU - RF Toroid Calculator v0.2
+
+
+ + +
+
+
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Notes:
+ RF Toroid Calculator was developed to help users predict the RF characteristics of a toroid-wound inductor.

+ Inputs via the slider widgets: + +

Characteristics on the left are independent of frequency, while the characteristics on the right are dependent on the selected frequency.

+ Each of the graphic representations attempt to keep the relative geometry correct, without exceeding the drawing boundary. The coil diameter + relative to the conductor diameter are representative.

+ Calculated dimensions: + + Calculated parameters: + +
+
+ + + + + + \ No newline at end of file