<!-- End Google Tag Manager (noscript) --> <input id="CurrentID" name="CurrentID" type="hidden" value="Smith-Chart: {032BEEB4-A9DC-43F3-BE93-3C81844DA466}" /> <div id="ajloaderoverlay" class="loaderoverlay"></div> <div id="ajloader" class="loader_img"><img src="/-/media/SkyWorks/Ajax-Loader/Ajaxloader.gif?h=200&w=200&hash=6C19769D4109DA3E2CD4B3F17D90AFFA" alt="loader" title="" loading="lazy"></div> <div class="overlay"></div> <div class="overlay_search"></div> <input id="BaseUrl" name="BaseUrl" type="hidden" value="https://www.skyworksinc.com/" /> <input id="NoRecordFound" name="NoRecordFound" type="hidden" value="No matching results found, please try different keywords" /> <header class="new-header bxshadow" id="sticky_header"> </header> <div class="SidebarCommon navpad width400 shownav bxshadow"> </div> <main id="main" class="header_spacing"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="template_content"> <div class="content_sec fullwidthtext"> <style> :root{ --bg:#0b1220; --panel:#111a2e; --text:#e6ecff; --muted:#a9b4d6; --grid:rgba(180,200,255,.18); --grid2:rgba(180,200,255,.10); --accent:#6ae4ff; --trace:#ff7aa2; --good:#7CFFB2; } html, body { height: 100%; } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background: radial-gradient(1200px 800px at 20% 10%, #182a55 0%, var(--bg) 55%); color:var(--text); /* Key for 1280x800: prevent page scrolling; panels scroll instead */ overflow: hidden; } header{ padding: 10px 14px 6px 14px; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; } header h1{ margin:0; font-size:16px; letter-spacing:.3px; } header .sub{ color:var(--muted); font-size:12px; } main{ padding: 10px 14px 14px 14px; gap: 12px; display: grid; grid-template-columns: 360px 1fr; /* Fit under header on 1280x800 */ height: calc(100vh - 56px); overflow: hidden; } .card{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.10); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.30); overflow:hidden; /* Fill column height; allow children to scroll */ height: 100%; display:flex; flex-direction:column; min-height:0; } /* LEFT panel scrolls internally */ .panel{ padding:12px; overflow:auto; min-height:0; } .panel h2{ margin:0 0 10px 0; font-size:13px; color:var(--muted); font-weight:650; letter-spacing:.2px; } .row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:8px; } .row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; margin-bottom:8px; } label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; } input, select{ width:100%; box-sizing:border-box; padding:8px 10px; border-radius: 10px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.20); color:var(--text); outline:none; } input:focus, select:focus{ border-color: rgba(106,228,255,.65); box-shadow: 0 0 0 3px rgba(106,228,255,.12); } .toggles{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0 0; } .chip{ user-select:none; display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); cursor:pointer; font-size:12px; color:var(--text); } .chip input{ width:auto; margin:0; } .btns{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; } button{ cursor:pointer; border:none; padding:10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(106,228,255,.95), rgba(106,228,255,.55)); color:#00131a; font-weight:700; } button.secondary{ background: rgba(255,255,255,.10); color: var(--text); border:1px solid rgba(255,255,255,.14); font-weight:650; } .readout{ margin-top:10px; padding:10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: var(--text); font-size: 12px; line-height: 1.45; white-space: pre-wrap; /* Keep compact on 800px tall screens */ max-height: 140px; overflow:auto; } /* RIGHT chart column layout */ .chartWrap{ padding:10px; display:grid; grid-template-rows: auto minmax(0, 1fr) auto; gap:10px; min-height:0; } .chartTitle{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; } .chartTitle .left{ display:flex; flex-direction:column; gap:2px; } .chartTitle .left b{ font-size:13px; } .chartTitle .left span{ font-size:12px; color:var(--muted); } .chartTitle .right{ text-align:right; font-size:12px; color:var(--muted); } svg{ width:100%; height:100%; min-height:0; min-height: 480px; background: rgba(0,0,0,.12); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; display:block; } .footerNote{ padding:10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.14); color: var(--muted); font-size: 11px; line-height:1.4; } .kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); padding: 1px 6px; border-radius: 7px; color: var(--text); } /* Smaller height tuning */ @media (max-height: 820px){ header{ padding: 8px 12px 6px 12px; } main{ height: calc(100vh - 52px); } svg{ min-height: 460px; } } /* Stack columns on smaller widths */ @media (max-width: 980px){ body{ overflow:auto; } main{ grid-template-columns: 1fr; height:auto; overflow:visible; } .card{ height:auto; } .panel{ overflow:visible; } .chartWrap{ min-height:520px; } svg{ height: min(70vh, 640px); } } </style> <header> <div> <h1>Smith Chart Tool (Standalone)</h1> <div class="sub">Fits 1280×800 • Impedance/Admittance • Γ, VSWR • optional RLC sweep</div> </div> <div class="sub">Single HTML file • SVG render • No libs</div> </header> <main> <!-- LEFT: Controls --> <section class="card"> <div class="panel"> <h2>1) Point Plot (Zload = R + jX)</h2> <div class="row"> <div> <label for="z0">Characteristic impedance Z0 (Ω)</label> <input id="z0" type="number" step="any" value="50" /> </div> <div> <label for="mode">Chart mode</label> <select id="mode"> <option value="impedance" selected="" />Impedance (Z) <option value="admittance" />Admittance (Y) </select> </div> </div> <div class="row"> <div> <label for="r">Load resistance R (Ω)</label> <input id="r" type="number" step="any" value="50" /> </div> <div> <label for="x">Load reactance X (Ω)</label> <input id="x" type="number" step="any" value="0" /> </div> </div> <div class="row"> <div> <label for="vswrCircle">VSWR circle (set 0 to hide)</label> <input id="vswrCircle" type="number" step="any" value="0" /> </div> <div> <label for="gridDensity">Grid density</label> <select id="gridDensity"> <option value="classic" selected="" />Classic (0.2,0.5,1,2,5) <option value="dense" />Dense (+0.1,0.3,3,10) <option value="light" />Light (0.5,1,2,5) </select> </div> </div> <div class="toggles"> <label class="chip"><input id="showGrid" type="checkbox" checked="" />Grid</label> <label class="chip"><input id="showLabels" type="checkbox" checked="" />Labels</label> <label class="chip"><input id="showAxis" type="checkbox" checked="" />Axes</label> <label class="chip"><input id="showTrace" type="checkbox" checked="" />Sweep trace</label> </div> <div class="btns"> <button id="plotBtn">Plot point</button> <button class="secondary" id="clearBtn">Clear trace</button> </div> <div class="readout" id="readout">Ready. Click inside chart to read out z and y. Shift+click to drop a marker.</div> <hr style="border:none; border-top:1px solid rgba(255,255,255,.10); margin:14px 0;" /> <h2>2) Optional Frequency Sweep (Series R-L-C)</h2> <div class="row3"> <div> <label for="sR">R (Ω)</label> <input id="sR" type="number" step="any" value="25" /> </div> <div> <label for="sL">L (nH)</label> <input id="sL" type="number" step="any" value="2" /> </div> <div> <label for="sC">C (pF)</label> <input id="sC" type="number" step="any" value="1" /> </div> </div> <div class="row3"> <div> <label for="fStart">f start (GHz)</label> <input id="fStart" type="number" step="any" value="0.5" /> </div> <div> <label for="fStop">f stop (GHz)</label> <input id="fStop" type="number" step="any" value="3.0" /> </div> <div> <label for="nPts">points</label> <input id="nPts" type="number" step="1" value="201" /> </div> </div> <div class="btns"> <button id="sweepBtn">Run sweep</button> <button class="secondary" id="useSweepAsPointBtn">Use sweep @ mid-f</button> </div> <div class="footerNote"> Tip: In <span class="kbd">Admittance</span> mode the chart is mirrored (Γy = −Γz).<br /> Tip: For passive loads, |Γ| ≤ 1 stays within the outer circle. </div> </div> </section> <!-- RIGHT: Chart --> <section class="card chartWrap"> <div class="chartTitle"> <div class="left"> <b id="chartHeader">Impedance Smith Chart (Γ-plane)</b> <span id="chartSub">Grid + point + optional sweep trace</span> </div> <div class="right" id="miniStats">Γ = 0 + j0</div> </div> <svg id="svg" viewbox="-1.12 -1.12 2.24 2.24" aria-label="Smith chart"></svg> <div class="footerNote"> Formulas used: <span class="kbd">z = Z/Z0</span>, <span class="kbd">Γ = (z − 1)/(z + 1)</span>, <span class="kbd">z = (1 + Γ)/(1 − Γ)</span>, <span class="kbd">VSWR = (1+|Γ|)/(1−|Γ|)</span>. </div> </section> </main> <script> /* --------------------------- Complex helpers ----------------------------*/ function C(re, im){ return {re, im}; } function add(a,b){ return C(a.re+b.re, a.im+b.im); } function sub(a,b){ return C(a.re-b.re, a.im-b.im); } function mul(a,b){ return C(a.re*b.re - a.im*b.im, a.re*b.im + a.im*b.re); } function div(a,b){ const d = b.re*b.re + b.im*b.im; return C((a.re*b.re + a.im*b.im)/d, (a.im*b.re - a.re*b.im)/d); } function inv(a){ const d = a.re*a.re + a.im*a.im; return C(a.re/d, -a.im/d); } function mag(a){ return Math.hypot(a.re, a.im); } function argDeg(a){ return Math.atan2(a.im, a.re) * 180/Math.PI; } /* --------------------------- Smith chart mapping ----------------------------*/ function gammaFromZ(z){ return div(sub(z, C(1,0)), add(z, C(1,0))); } function zFromGamma(g){ return div(add(C(1,0), g), sub(C(1,0), g)); } /* --------------------------- SVG helpers ----------------------------*/ const svg = document.getElementById('svg'); function make(tag, attrs={}, parent=svg){ const el = document.createElementNS("http://www.w3.org/2000/svg", tag); for(const [k,v] of Object.entries(attrs)) el.setAttribute(k, v); parent.appendChild(el); return el; } function clear(el){ while(el.firstChild) el.removeChild(el.firstChild); } let gRoot, gGrid, gAxes, gVSWR, gTrace, gMarkers, gHover; function ensureGroups(){ clear(svg); gRoot = make('g', {id:'root'}); gGrid = make('g', {id:'grid'}, gRoot); gAxes = make('g', {id:'axes'}, gRoot); gVSWR = make('g', {id:'vswr'}, gRoot); gTrace = make('g', {id:'trace'}, gRoot); gMarkers = make('g', {id:'markers'}, gRoot); gHover = make('g', {id:'hover'}, gRoot); // subtle background fill make('circle', {cx:0, cy:0, r:1, fill:'rgba(0,0,0,.10)', stroke:'none'}, gRoot); // outer boundary make('circle', {cx:0, cy:0, r:1, fill:'none', stroke:'rgba(255,255,255,.55)', 'stroke-width':0.012}, gRoot); } /* --------------------------- Circle intersections ----------------------------*/ function circleIntersections(c0, r0, c1, r1){ const dx = c1.x - c0.x, dy = c1.y - c0.y; const d = Math.hypot(dx, dy); if(d > r0 + r1 + 1e-12) return []; if(d < Math.abs(r0 - r1) - 1e-12) return []; if(d === 0 && r0 === r1) return []; const a = (r0*r0 - r1*r1 + d*d) / (2*d); const h2 = r0*r0 - a*a; const h = h2 <= 0 ? 0 : Math.sqrt(h2); const xm = c0.x + a*dx/d; const ym = c0.y + a*dy/d; const rx = -dy * (h/d); const ry = dx * (h/d); return [ {x: xm + rx, y: ym + ry}, {x: xm - rx, y: ym - ry} ]; } /* --------------------------- Draw reactance arc (clipped to unit circle) Circle center (1, 1/x), radius |1/x| ----------------------------*/ function drawArcForReactance(xVal, style, parent){ const cx = 1, cy = 1/xVal, r = Math.abs(1/xVal); const ints = circleIntersections({x:cx,y:cy}, r, {x:0,y:0}, 1); if(ints.length !== 2) return; const p1 = ints[0], p2 = ints[1]; const a1 = Math.atan2(p1.y - cy, p1.x - cx); const a2 = Math.atan2(p2.y - cy, p2.x - cx); function sampleArc(aStart, aEnd, ccw){ const pts = []; const N = 80; for(let i=0;i<=N;i++){ const t = i/N; let a = ccw ? aStart + t*(aEnd-aStart) : aStart - t*(aStart-aEnd); const x = cx + r*Math.cos(a); const y = cy + r*Math.sin(a); pts.push({x,y}); } return pts; } let da = a2 - a1; if(da < 0) da += 2*Math.PI; const ptsCCW = sampleArc(a1, a1+da, true); const ptsCW = sampleArc(a1, a1-(2*Math.PI-da), false); function insideScore(pts){ let count = 0; for(const p of pts){ if(p.x*p.x + p.y*p.y <= 1.0005) count++; } return count; } const pts = (insideScore(ptsCCW) >= insideScore(ptsCW)) ? ptsCCW : ptsCW; let d = `M ${pts[0].x} ${pts[0].y}`; for(let i=1;i<pts.length;i++) d += ` L ${pts[i].x} ${pts[i].y}`; make('path', {d, ...style, fill:'none'}, parent); } /* --------------------------- Resistance circles: center (r/(1+r),0), radius 1/(1+r) ----------------------------*/ function drawResistanceCircle(rVal, style, parent){ const cx = rVal/(1+rVal); const rad = 1/(1+rVal); make('circle', {cx, cy:0, r:rad, ...style, fill:'none'}, parent); } /* --------------------------- Labels ----------------------------*/ function drawLabel(text, x, y, parent, anchor="middle"){ make('text', { x, y, fill: 'rgba(230,236,255,.75)', 'font-size': 0.06, 'text-anchor': anchor, 'dominant-baseline': 'middle', 'paint-order': 'stroke', stroke: 'rgba(0,0,0,.55)', 'stroke-width': 0.02 }, parent).textContent = text; } /* --------------------------- Grid config ----------------------------*/ function getGridSets(){ const density = document.getElementById('gridDensity').value; if(density === 'light'){ return { r:[0.5,1,2,5], x:[0.5,1,2,5] }; } if(density === 'dense'){ return { r:[0.1,0.2,0.3,0.5,1,2,3,5,10], x:[0.1,0.2,0.3,0.5,1,2,3,5,10] }; } return { r:[0.2,0.5,1,2,5], x:[0.2,0.5,1,2,5] }; } /* --------------------------- Render grid ----------------------------*/ function renderGrid(){ clear(gGrid); clear(gAxes); const showGrid = document.getElementById('showGrid').checked; const showAxis = document.getElementById('showAxis').checked; const showLabels = document.getElementById('showLabels').checked; const mode = document.getElementById('mode').value; // Mirror for admittance display gRoot.setAttribute('transform', mode === 'admittance' ? 'scale(-1,-1)' : ''); if(showAxis){ make('line', {x1:-1, y1:0, x2:1, y2:0, stroke:'rgba(255,255,255,.22)', 'stroke-width':0.01}, gAxes); make('line', {x1:0, y1:-1, x2:0, y2:1, stroke:'rgba(255,255,255,.12)', 'stroke-width':0.008, 'stroke-dasharray':'0.03 0.03'}, gAxes); } if(!showGrid) return; const sets = getGridSets(); const styleMain = { stroke:getComputedStyle(document.documentElement).getPropertyValue('--grid').trim(), 'stroke-width':0.008 }; const styleMinor = { stroke:getComputedStyle(document.documentElement).getPropertyValue('--grid2').trim(), 'stroke-width':0.006 }; // resistance circles for(const rVal of sets.r){ drawResistanceCircle(rVal, styleMain, gGrid); if(showLabels){ const cx = rVal/(1+rVal); const rad = 1/(1+rVal); const xLabel = cx - rad + 0.02; drawLabel(`${rVal}`, xLabel, 0.04, gGrid, "start"); } } // r=0 faint circle drawResistanceCircle(0, styleMinor, gGrid); // reactance arcs for(const xVal of sets.x){ drawArcForReactance(+xVal, styleMain, gGrid); drawArcForReactance(-xVal, styleMain, gGrid); if(showLabels){ const gPos = gammaFromZ(C(1, xVal)); const gNeg = gammaFromZ(C(1,-xVal)); drawLabel(`+j${xVal}`, gPos.re, gPos.im, gGrid, "middle"); drawLabel(`-j${xVal}`, gNeg.re, gNeg.im, gGrid, "middle"); } } } /* --------------------------- VSWR circle ----------------------------*/ function renderVSWR(){ clear(gVSWR); const vswr = parseFloat(document.getElementById('vswrCircle').value || '0'); if(!isFinite(vswr) || vswr <= 0) return; const rho = (vswr - 1)/(vswr + 1); if(rho <= 0 || rho >= 5) return; make('circle', { cx:0, cy:0, r:rho, fill:'none', stroke:'rgba(124,255,178,.70)', 'stroke-width':0.01, 'stroke-dasharray':'0.03 0.02' }, gVSWR); drawLabel(`VSWR ${vswr.toFixed(2)}`, 0, -rho - 0.05, gVSWR, "middle"); } /* --------------------------- Trace handling ----------------------------*/ let tracePoints = []; // {g:{re,im}, meta:{}} function clearTrace(){ tracePoints = []; renderTrace(); } function renderTrace(){ clear(gTrace); const show = document.getElementById('showTrace').checked; if(!show) return; if(tracePoints.length >= 2){ let d = `M ${tracePoints[0].g.re} ${tracePoints[0].g.im}`; for(let i=1;i<tracePoints.length;i++){ d += ` L ${tracePoints[i].g.re} ${tracePoints[i].g.im}`; } make('path', { d, fill:'none', stroke:'rgba(255,122,162,.85)', 'stroke-width':0.012 }, gTrace); } if(tracePoints.length >= 1){ const last = tracePoints[tracePoints.length-1].g; make('circle', {cx:last.re, cy:last.im, r:0.02, fill:'rgba(255,122,162,.95)', stroke:'rgba(0,0,0,.35)', 'stroke-width':0.01}, gTrace); } } function addMarker(g, labelText){ const grp = make('g', {}, gMarkers); make('circle', {cx:g.re, cy:g.im, r:0.018, fill:'rgba(106,228,255,.95)', stroke:'rgba(0,0,0,.35)', 'stroke-width':0.01}, grp); if(labelText){ drawLabel(labelText, g.re, g.im - 0.06, grp, "middle"); } } /* --------------------------- Readouts ----------------------------*/ function formatComplex(a, digits=4){ const re = a.re.toFixed(digits); const im = Math.abs(a.im).toFixed(digits); const sign = a.im >= 0 ? '+' : '-'; return `${re} ${sign} j${im}`; } function computeFromInputs(){ const Z0 = parseFloat(document.getElementById('z0').value || '50'); const R = parseFloat(document.getElementById('r').value || '0'); const X = parseFloat(document.getElementById('x').value || '0'); const mode = document.getElementById('mode').value; if(!isFinite(Z0) || Z0 <= 0) return {ok:false, msg:"Z0 must be > 0."}; if(!isFinite(R) || !isFinite(X)) return {ok:false, msg:"R and X must be numbers."}; const Z = C(R, X); const z = C(R/Z0, X/Z0); let g = gammaFromZ(z); // Admittance chart uses Γy = -Γz if(mode === 'admittance') g = C(-g.re, -g.im); const gm = mag(g); const ph = argDeg(g); const vswr = (gm >= 1) ? Infinity : (1+gm)/(1-gm); const rl = (gm <= 0) ? Infinity : (-20*Math.log10(gm)); const mismatch = (gm >= 1) ? Infinity : (-10*Math.log10(1 - gm*gm)); return {ok:true, Z0, Z, z, g, gm, ph, vswr, rl, mismatch, mode}; } function updateReadouts(result){ const readout = document.getElementById('readout'); const mini = document.getElementById('miniStats'); const header = document.getElementById('chartHeader'); if(!result.ok){ readout.textContent = result.msg; mini.textContent = '—'; return; } header.textContent = (result.mode === 'admittance') ? 'Admittance Smith Chart (Γ-plane, mirrored)' : 'Impedance Smith Chart (Γ-plane)'; const Z0 = result.Z0; const zNorm = result.z; const gDisp = result.g; // For admittance mode, displayed Γ is Γy; recover Γz = -Γy to compute z from clicks/readout let zForImpedance = zNorm; if(result.mode === 'admittance'){ const gz = C(-gDisp.re, -gDisp.im); zForImpedance = zFromGamma(gz); } const yNorm = inv(zForImpedance); const lines = []; lines.push(`Inputs: Z0 = ${Z0.toFixed(4)} Ω, Zload = ${result.Z.re.toFixed(4)} + j${result.Z.im.toFixed(4)} Ω`); lines.push(`Normalized impedance z = ${formatComplex(zNorm, 4)}`); lines.push(`Reflection Γ = ${formatComplex(gDisp, 4)} |Γ|=${result.gm.toFixed(4)} ∠${result.ph.toFixed(2)}°`); lines.push(`VSWR = ${isFinite(result.vswr) ? result.vswr.toFixed(3) : '∞'} Return Loss = ${isFinite(result.rl) ? result.rl.toFixed(2) : '∞'} dB`); lines.push(`Mismatch Loss ≈ ${isFinite(result.mismatch) ? result.mismatch.toFixed(3) : '∞'} dB`); lines.push(`Normalized admittance y = 1/z = ${formatComplex(yNorm, 4)}`); readout.textContent = lines.join('\n'); mini.textContent = `Γ = ${formatComplex(gDisp, 3)} |Γ|=${result.gm.toFixed(3)}`; } /* --------------------------- Plot point / sweep ----------------------------*/ function plotPoint(){ const res = computeFromInputs(); updateReadouts(res); if(!res.ok) return; tracePoints.push({g: res.g, meta: {type:'point'}}); renderTrace(); clear(gMarkers); addMarker(res.g, "Zload"); } function runSweep(){ const Z0 = parseFloat(document.getElementById('z0').value || '50'); const mode = document.getElementById('mode').value; const R = parseFloat(document.getElementById('sR').value || '0'); const L_nH = parseFloat(document.getElementById('sL').value || '0'); const C_pF = parseFloat(document.getElementById('sC').value || '0'); const fStart = parseFloat(document.getElementById('fStart').value || '0.5'); const fStop = parseFloat(document.getElementById('fStop').value || '3'); const nPts = Math.max(5, Math.min(5001, parseInt(document.getElementById('nPts').value || '201', 10))); if(!isFinite(Z0) || Z0<=0) return; if(!isFinite(R) || !isFinite(L_nH) || !isFinite(C_pF)) return; if(!isFinite(fStart) || !isFinite(fStop) || fStop===fStart) return; const L = L_nH * 1e-9; const Cc = C_pF * 1e-12; const pts = []; for(let i=0;i<nPts;i++){ const t = i/(nPts-1); const fGHz = fStart + t*(fStop - fStart); const f = fGHz * 1e9; const w = 2*Math.PI*f; const xL = (L !== 0) ? (w*L) : 0; const xC = (Cc !== 0) ? (-1/(w*Cc)) : 0; const X = xL + xC; const z = C(R/Z0, X/Z0); let g = gammaFromZ(z); if(mode === 'admittance') g = C(-g.re, -g.im); pts.push({g, meta:{type:'sweep', fGHz}}); } tracePoints.push(...pts); renderTrace(); const last = pts[pts.length-1].g; document.getElementById('miniStats').textContent = `Sweep ${fStart.toFixed(3)}→${fStop.toFixed(3)} GHz • last |Γ|=${mag(last).toFixed(3)}`; } function useSweepMidAsPoint(){ const Z0 = parseFloat(document.getElementById('z0').value || '50'); const R = parseFloat(document.getElementById('sR').value || '0'); const L_nH = parseFloat(document.getElementById('sL').value || '0'); const C_pF = parseFloat(document.getElementById('sC').value || '0'); const fStart = parseFloat(document.getElementById('fStart').value || '0.5'); const fStop = parseFloat(document.getElementById('fStop').value || '3.0'); const fGHz = (fStart + fStop)/2; const f = fGHz * 1e9; const w = 2*Math.PI*f; const L = L_nH * 1e-9; const Cc = C_pF * 1e-12; const xL = (L !== 0) ? (w*L) : 0; const xC = (Cc !== 0) ? (-1/(w*Cc)) : 0; const X = xL + xC; document.getElementById('r').value = R; document.getElementById('x').value = X; plotPoint(); } /* --------------------------- Click-to-readout + Shift-click marker ----------------------------*/ function svgPointFromEvent(evt){ const rect = svg.getBoundingClientRect(); const x = (evt.clientX - rect.left) / rect.width; const y = (evt.clientY - rect.top) / rect.height; const vb = svg.viewBox.baseVal; let gx = vb.x + x * vb.width; let gy = vb.y + y * vb.height; // If admittance mode flips root visually, invert here to match user's click in displayed coords const mode = document.getElementById('mode').value; if(mode === 'admittance'){ gx = -gx; gy = -gy; } return C(gx, gy); } function hoverAtGamma(g){ clear(gHover); make('circle', {cx:g.re, cy:g.im, r:0.012, fill:'rgba(255,255,255,.85)', stroke:'rgba(0,0,0,.35)', 'stroke-width':0.01}, gHover); make('line', {x1:0, y1:0, x2:g.re, y2:g.im, stroke:'rgba(255,255,255,.25)', 'stroke-width':0.006, 'stroke-dasharray':'0.02 0.02'}, gHover); const Z0 = parseFloat(document.getElementById('z0').value || '50'); const mode = document.getElementById('mode').value; // Convert displayed Γ to Γz if needed let gz = g; if(mode === 'admittance') gz = C(-g.re, -g.im); const z = zFromGamma(gz); const Z = C(z.re*Z0, z.im*Z0); const y = inv(z); const msg = []; msg.push(`Clicked Γ = ${formatComplex(g, 4)} (|Γ|=${mag(g).toFixed(4)}, ∠${argDeg(g).toFixed(2)}°)`); msg.push(`Normalized z = ${formatComplex(z, 4)} => Z = ${formatComplex(Z, 4)} Ω`); msg.push(`Normalized y = 1/z = ${formatComplex(y, 4)}`); document.getElementById('readout').textContent = msg.join('\n'); } /* --------------------------- Full redraw ----------------------------*/ function fullRedraw(){ ensureGroups(); renderGrid(); renderVSWR(); renderTrace(); const res = computeFromInputs(); updateReadouts(res); clear(gMarkers); if(res.ok) addMarker(res.g, "Zload"); } /* --------------------------- Wire up UI ----------------------------*/ document.getElementById('plotBtn').addEventListener('click', plotPoint); document.getElementById('clearBtn').addEventListener('click', clearTrace); document.getElementById('sweepBtn').addEventListener('click', runSweep); document.getElementById('useSweepAsPointBtn').addEventListener('click', useSweepMidAsPoint); ['z0','r','x','mode','showGrid','showLabels','showAxis','gridDensity','vswrCircle','showTrace'] .forEach(id=>{ document.getElementById(id).addEventListener('input', fullRedraw); document.getElementById(id).addEventListener('change', fullRedraw); }); svg.addEventListener('mousemove', (evt)=>{ const g = svgPointFromEvent(evt); if(g.re*g.re + g.im*g.im <= 1.15*1.15) hoverAtGamma(g); }); svg.addEventListener('click', (evt)=>{ const g = svgPointFromEvent(evt); hoverAtGamma(g); if(evt.shiftKey) addMarker(g, "M"); }); /* Init */ fullRedraw(); </script> </div> </div> </div> </div> </div> </main> <footer> </footer> <!-- Start of ChatBot (www.chatbot.com) code --> <script type="text/javascript"> var enableChatbot = "True"; if (enableChatbot == 'True') { window.__be = window.__be || {}; window.__be.id = "6268f872af3da00007575e07"; (function () { var be = document.createElement('script'); be.type = 'text/javascript'; be.defer = true; be.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.chatbot.com/widget/plugin.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(be, s); })(); window.BE_API = window.BE_API || {}; window.BE_API.onHideGreeting = function () { }; window.BE_API.onLoad = function () { window.BE_API.resetSession(); var autoPopup = 0; if (autoPopup > 0) { setTimeout(window.BE_API.openChatWindow, 0); } window.BE_API.setSessionAttributes({ scDatabase: 'web', scLanguage: 'en', toastMessage: 'Show', }); }; } </script> <!-- End of ChatBot code --> <script src="/Scripts/Sitecore.Foundation.Theming.skyworks.min.js?v=639129726900000000-9008031"></script> <script src="/Scripts/search.min.js?v=639129726900000000-9008031"></script> <script defer src="/scripts/vendors/jquery-migrate.min.js"></script> <script defer src="/scripts/vendors/jquery-ui.min.js"></script> <!-- lodash --> <script defer src="/scripts/vendors/lodash.min.js"></script> <!-- cookiejs --> <script defer src="/scripts/vendors/js.cookie.min.js"></script> <script src="/scripts/vendors/ag-grid-enterprise.min.js"></script> <!-- BOWEN CRAGGS SURVEY WIDGET --> <script defer src="/scripts/vendors/8a8abb21-56a3-4e54-81f4-7f0989d95911.js"></script> <!-- END OF BOWEN CRAGGS SURVEY WIDGET --> <script type="text/javascript"> function RegisterProductVisits(jquery) { //Register a product/application visit var value = OptanonActiveGroups; if (value.includes(GetOneTrustCategory("sw_lvp"))) { var dataParameters = { 'id': '{032BEEB4-A9DC-43F3-BE93-3C81844DA466}', 'database': 'web', 'language': 'en' }; jquery.ajax({ type: 'GET', url: '/api/navigation/RegisterProductVisitJS', data: dataParameters, success: function(response) { NavTrail.init('web', 'en'); }, error: function(jqxhr, settings, ex) { console.error(ex); } }); } } </script> <script> (function ($) { function hasSitecoreConsent() { const match = document.cookie.match(/(?:^|;\s*)SC_TRACKING_CONSENT=([^;]+)/); if (!match) return false; try { let decoded = atob(match[1]); decoded = decoded.replace(/[^}\]]*$/, ""); const consentList = JSON.parse(decoded); return consentList.some(e => e.IsConsentGiven === true); } catch (e) { console.warn("Error parsing SC_TRACKING_CONSENT:", e); return false; } } function ApplyScAnalyticsConsent() { if (typeof window.OptanonActiveGroups !== "string" || OptanonActiveGroups === "0") { console.warn("OptanonActiveGroups is not ready. Skipping."); return; } const scGroup = GetOneTrustCategory("SC_ANALYTICS_GLOBAL_COOKIE"); const hasConsent = OptanonActiveGroups.includes(scGroup); const alreadyGiven = hasSitecoreConsent(); //console.log("SC Analytics Consent:", hasConsent, "| Sitecore Already Has:", alreadyGiven); if (hasConsent === alreadyGiven) { //console.log("Consent already synced with Sitecore. Skipping API call."); } else { const url = hasConsent ? '/api/metadata/giveconsent' : '/api/metadata/revokeconsent'; $.ajax({ type: 'PATCH', url: url, success: function (response) { //console.log(response.Message || (hasConsent ? "Consent has been granted" : "Consent has been revoked")); }, error: function (jqxhr, settings, ex) { console.error("Error applying consent:", ex); } }); } } window.addEventListener("OneTrustGroupsUpdated", function () { if (typeof OptanonActiveGroups === "string" && OptanonActiveGroups !== "0") { //console.log("OneTrustGroupsUpdated fired"); ApplyScAnalyticsConsent($); RegisterProductVisits($); } else { //console.log("OneTrustGroupsUpdated fired — but OptanonActiveGroups is '0', skipping."); } }); })(jQuery); </script> <script type="text/javascript"> $(document).ready(function () { HowToBuy.init(); if (CheckIfQueryStringExists()) { QueryStringSearchInit(); } }); </script> <!-- grid.js plugin --> <script defer src="/scripts/vendors/gridjs.umd.js"></script> <script defer src="/scripts/vendors/gridjs.production.min.js"></script> <script defer src='/scripts/vendors/plugin.js'></script> <script async defer data-allow-params="q,doc,PartNumber,partnumber,source,BU,company,locationsearch,searchResultView,family,categories" src=https://scripts.simpleanalyticscdn.com/latest.js> </script> <script async src="https://scripts.simpleanalyticscdn.com/auto-events.js"> </script> </body> </html>