Skip to content

Commit e435cdc

Browse files
28raining28raining
committed
Adding custom Z vs F block. Adding enable zoom button. Cleaning 'show circles' button. Improve how it looks on smartphone
1 parent 83f91a7 commit e435cdc

6 files changed

Lines changed: 317 additions & 27 deletions

File tree

‎smith_chart/ToDo.txt‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1-
CONE - 1 - Add tolerances to components
2-
2 - Plot S-parameters (= 1+R / 1-R)
3-
3 - Add a s-parameter to impedance converter
4-
4 - Add a frequency vs impedance imput option
1+
NOT GOING TO DO - 3 - Add a s-parameter to impedance converter
2+
3+
DONE - 1 - Add tolerances to components
4+
DONE - 2 - Plot S-parameters (= 1+R / 1-R)
5+
DONE - 4 - Add a frequency vs impedance imput option
6+
DONE:- Save modal will save the data to the custom components
7+
DONE: - Next time modal is opened it is auto-populated
8+
DONE:- button for S&H or linear
9+
DONE:- plot graph of Z vs F
10+
DONE:- Add form validation to make sure input contains only numbers,spaces,commas and e or E
11+
DONE - Update function update_schem_component
12+
DONE: -deal with blank line at end of input
513

614
//TODO - A big improvement here would be to separate out the impedance calculation and arc drawing. It should calculate impedances, then calculate points along the arc
715
//also could use a complex number function for all the math

‎smith_chart/css/newStyle.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,12 @@
4141
margin:0 auto;
4242
}
4343

44+
.noPointerClass{
45+
pointer-events: none;
46+
}
47+
4448
.inputGroupmw {
45-
min-width:270px
49+
min-width:200px
4650
}
4751

4852
.inputMW {

‎smith_chart/index.html‎

Lines changed: 120 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -164,51 +164,55 @@ <h4 class="mb-0"><strong>ONLINE SMITH CHART TOOL</strong></h4>
164164
<div class="row g-0">
165165
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('sc')">
166166
<p class="m-0">Series Capacitor</p>
167-
<svg viewBox="1000 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Series Capacitor" /></svg>
167+
<svg viewBox="1000 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Series Capacitor" /></svg>
168168
</div>
169169
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('pc')">
170170
<p class="m-0">Parallel Capacitor</p>
171-
<svg viewBox="500 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Parallel Capacitor" /></svg>
171+
<svg viewBox="500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Parallel Capacitor" /></svg>
172172
</div>
173173
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('si')">
174174
<p class="m-0">Series Inductor</p>
175-
<svg viewBox="2000 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Series Inductor" /></svg>
175+
<svg viewBox="2000 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Series Inductor" /></svg>
176176
</div>
177177
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('pi')">
178178
<p class="m-0">Parallel Inductor</p>
179-
<svg viewBox="1500 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Parallel Inductor" /></svg>
179+
<svg viewBox="1500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Parallel Inductor" /></svg>
180180
</div>
181181
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('sr')">
182182
<p class="m-0">Series Resistor</p>
183-
<svg viewBox="3000 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Series Resistor" /></svg>
183+
<svg viewBox="3000 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Series Resistor" /></svg>
184184
</div>
185185
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-dark" onclick="clicked_cell('pr')">
186186
<p class="m-0">Parallel Resistor</p>
187-
<svg viewBox="2500 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Parallel Resistor" /></svg>
187+
<svg viewBox="2500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Parallel Resistor" /></svg>
188188
</div>
189189
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('tl')">
190190
<p class="m-0">Transmission Line</p>
191-
<svg viewBox="3500 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Transmission Line" /></svg>
191+
<svg viewBox="3500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Transmission Line" /></svg>
192192
</div>
193193
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('so')">
194194
<p class="m-0">Open Stub</p>
195-
<svg viewBox="4000 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Open Stub" /></svg>
195+
<svg viewBox="4000 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Open Stub" /></svg>
196196
</div>
197197
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('ss')">
198198
<p class="m-0">Shorted Stub</p>
199-
<svg viewBox="4500 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Open Stub" /></svg>
199+
<svg viewBox="4500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Open Stub" /></svg>
200200
</div>
201201
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('rc')">
202202
<p class="m-0">Capacitor w/ ESR</p>
203-
<svg viewBox="5000 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Capacitor w/ESR" /></svg>
203+
<svg viewBox="5000 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Capacitor w/ESR" /></svg>
204204
</div>
205205
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-end border-dark" onclick="clicked_cell('rl')">
206206
<p class="m-0">Inductor w/ ESR</p>
207-
<svg viewBox="5500 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="Inductor w/ESR" /></svg>
207+
<svg viewBox="5500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="Inductor w/ESR" /></svg>
208208
</div>
209209
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-dark" onclick="clicked_cell('rlc')">
210210
<p class="m-0">RLC</p>
211-
<svg viewBox="6000 0 500 500"><use xlink:href="svg/elements.svg#rainbow3" alt="RLC" /></svg>
211+
<svg viewBox="6000 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="RLC" /></svg>
212+
</div>
213+
<div class="col-6 col-lg-2 schemHover text-center border-top border-bottom border-dark" onclick="clicked_cell('customZ')">
214+
<p class="m-0">Custom (beta)</p>
215+
<svg viewBox="6500 0 500 500"><use xlink:href="svg/elements_w_custom.svg#rainbow3" alt="customZ" /></svg>
212216
</div>
213217

214218
</div>
@@ -225,7 +229,7 @@ <h4 class="mb-0"><strong>ONLINE SMITH CHART TOOL</strong></h4>
225229
<!-- <div class="col-2"></div> -->
226230
<div class="col-lg-8 p-0" id="smith_chart">
227231
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
228-
<div class="hollow_holder">
232+
<div class="hollow_holder" id="smithChartOverlay">
229233
<div id="hollowed_circle"></div>
230234
</div>
231235
</div>
@@ -236,35 +240,78 @@ <h4 class="mb-0"><strong>ONLINE SMITH CHART TOOL</strong></h4>
236240

237241
<div class="row mt-4">
238242
<div class="col-12 col-lg-2">
243+
<div class="form-check form-check-inline">
244+
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" autocomplete="off" onchange="toggle_zoom_en()">
245+
<label class="form-check-label" for="inlineCheckbox4">Enable Zoom</label>
246+
</div>
247+
</div>
248+
249+
<div class="col-12 col-lg-5">
250+
<div class="form-check form-check-inline">
251+
<label class="label">Show labels: </label>
252+
</div>
253+
<div class="form-check form-check-inline">
254+
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" checked autocomplete="off" onchange="toggle_labels_DP()">
255+
<label class="form-check-label" for="inlineCheckbox1">DP</label>
256+
</div>
257+
<div class="form-check form-check-inline">
258+
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" checked autocomplete="off" onchange="toggle_labels_imag()">
259+
<label class="form-check-label" for="inlineCheckbox2">Admittance</label>
260+
</div>
261+
<div class="form-check form-check-inline">
262+
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" checked autocomplete="off" onchange="toggle_labels_real()">
263+
<label class="form-check-label" for="inlineCheckbox3">Resistance</label>
264+
</div>
265+
</div>
266+
267+
<div class="col-12 col-lg-5">
268+
<div class="form-check form-check-inline">
269+
<label class="label">Show Circles: </label>
270+
</div>
271+
<div class="form-check form-check-inline">
272+
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" checked autocomplete="off" onchange="toggle_circles_adm()">
273+
<label class="form-check-label" for="inlineCheckbox4">Adm</label>
274+
</div>
275+
<div class="form-check form-check-inline">
276+
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" checked autocomplete="off" onchange="toggle_circles_res()">
277+
<label class="form-check-label" for="inlineCheckbox5">Res</label>
278+
</div>
279+
</div>
280+
281+
<!-- <div class="col-2 col-lg-2">
239282
<div class="input-group">
240283
<div class="input-group-text"><input class="form-check-input mt-0" autocomplete="off" type="checkbox" checked onchange="toggle_labels_DP()"></div>
241284
<span class="input-group-text">Show label: DP</span>
242285
</div>
243286
</div>
244-
<div class="col-12 col-lg-2">
287+
<div class="col-2 col-lg-2">
245288
<div class="input-group">
246289
<div class="input-group-text"><input class="form-check-input mt-0" autocomplete="off" type="checkbox" checked onchange="toggle_labels_imag()"></div>
247290
<span class="input-group-text">Show label: adm</span>
248291
</div>
249292
</div>
250-
<div class="col-12 col-lg-2">
293+
<div class="col-2 col-lg-2">
251294
<div class="input-group">
252295
<div class="input-group-text"><input class="form-check-input mt-0" autocomplete="off" type="checkbox" checked onchange="toggle_labels_real()"></div>
253296
<span class="input-group-text">Show label: res</span>
254297
</div>
255-
</div>
256-
<div class="col-12 col-lg-2">
298+
</div> -->
299+
300+
301+
<!-- <div class="col-2 col-lg-2">
257302
<div class="input-group">
258303
<div class="input-group-text"><input class="form-check-input mt-0" autocomplete="off" type="checkbox" checked onchange="toggle_circles_adm()"></div>
259304
<span class="input-group-text">Show circle: adm</span>
260305
</div>
261306
</div>
262-
<div class="col-12 col-lg-2">
307+
<div class="col-2 col-lg-2">
263308
<div class="input-group">
264309
<div class="input-group-text"><input class="form-check-input mt-0" autocomplete="off" type="checkbox" checked onchange="toggle_circles_res()"></div>
265310
<span class="input-group-text">Show circle: res</span>
266311
</div>
267-
</div>
312+
</div> -->
313+
314+
268315
</div>
269316

270317
<div class="row mt-4">
@@ -456,6 +503,60 @@ <h5 class="modal-title" id="exampleModalLabel">Changing permittivity</h5>
456503
</div>
457504
</div>
458505

506+
<div class="modal" id="customZModal" tabindex="-1" data-bs-backdrop="static">
507+
<div class="modal-dialog">
508+
<div class="modal-content">
509+
<div class="modal-header">
510+
<h5 class="modal-title" id="customZModalTitle">Modal title</h5>
511+
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal"></button> -->
512+
</div>
513+
<div class="modal-body m-2" >
514+
<div class="row">
515+
Enter rows of impedance vs increasing frequency
516+
</div>
517+
<div class="row">
518+
Don't enter units or characters; use 2440e6 notation for 2440MHz
519+
</div>
520+
<div class="row">
521+
comma separated: FREQUENCY, REAL, IMAGINARY
522+
</div>
523+
<div class="row">
524+
whitespace separated: FREQUENCY REAL IMAGINARY
525+
</div>
526+
<div class="row">
527+
<textarea id="customZModalBody" style="width:100%" rows="12" class="form-control is-valid" onchange="checkCustomZValid()" onkeyup="checkCustomZValid()"></textarea>
528+
</div>
529+
<div class="row">
530+
<div id="customZValidWarning" class="text-danger" style="display:none">
531+
If the textbox contains a comma it's assumed your data is comma separated, otherwise assumes whitespace separated.
532+
Each line must have 3 non-blank numberical values.
533+
The only accepted characters are 0-9, '-', '+', e, E and ','.
534+
Frequency must be increasing
535+
</div>
536+
</div>
537+
<div class="row">
538+
<div class="form-check form-check-inline">
539+
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="customz_interp_linear" value="option1" onchange="checkCustomZValid()" checked>
540+
<label class="form-check-label" for="inlineRadio1">linear interpolation</label>
541+
</div>
542+
<div class="form-check form-check-inline">
543+
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="customz_interp_sah" value="option2" onchange="checkCustomZValid()" >
544+
<label class="form-check-label" for="inlineRadio2">sample & hold</label>
545+
</div>
546+
</div>
547+
<div class="row">
548+
<div id="plotlyCustomZplot"></div>
549+
</div>
550+
551+
</div>
552+
<div class="modal-footer">
553+
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" onclick="removeCustom()">Close & Remove Element</button>
554+
<button type="button" id="saveLUT" data-bs-dismiss="modal" class="btn btn-primary" onclick="update_smith_chart();">Save & Draw</button>
555+
</div>
556+
</div>
557+
</div>
558+
</div>
559+
459560

460561
<script src="js/smith_tool.js"></script>
461562

0 commit comments

Comments
 (0)