From 7e00b19a9efcb5c4546d7cf0d6e787fc6e1250ae Mon Sep 17 00:00:00 2001 From: miguel <31931809+miguelvaca@users.noreply.github.com> Date: Tue, 12 Oct 2021 08:19:39 +1100 Subject: [PATCH] First check-in. Developmental code only. --- toroid2.css | 224 ++++++++++++++++ toroid2.html | 706 +++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 930 insertions(+) create mode 100644 toroid2.css create mode 100644 toroid2.html diff --git a/toroid2.css b/toroid2.css new file mode 100644 index 0000000..290045b --- /dev/null +++ b/toroid2.css @@ -0,0 +1,224 @@ +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.smith-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%; + 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: + "smith-chart-container" + "inductor-container" + "slider-container"; + justify-items: stretch; + } + + section div.smith-chart-container { + height: 100vw; + width: 100vw; + box-sizing: border-box; + } + + section div.inductor-container { + height: 35vh; + 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: + "smith-chart-container" + "inductor-container" + "slider-container"; + justify-items: stretch; + } + + section div.smith-chart-container { + height: 100vh; + width: 100vh; + box-sizing: border-box; + } + + 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/toroid2.html b/toroid2.html new file mode 100644 index 0000000..3e7e142 --- /dev/null +++ b/toroid2.html @@ -0,0 +1,706 @@ + + + + + + VK3CPU RF Toroid Calculator + + + +
Miguel VK3CPU - RF Toroid Calculator v0.2
+
+
+ + 2D Chart Canvas + +
+
+ + +
+
+
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ 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