viewof gamma = { const mouseR = svg``; const mouseX = svg``; const plotPoint = svg``; const mouseG = svg``; const chart = html` `; //get reference to input boxes for R and X const Rinput = document.getElementById("Rinput"); const Xinput = document.getElementById("Xinput"); const plotButton = document.getElementById("plotZbutton"); const z0 = 50; var reflCart = {real : 0, imaginary : 0 }; //if the plot button is clicked, set the svg lines to the values specified in the input boxes plotButton.onclick = event => { const Rvalue = Rinput.value; const Xvalue = Xinput.value; const Rnormalised = Rvalue/z0; const Xnormalised = Xvalue/z0; //set R and X values for the chart var [R,X] = [Rnormalised, Xnormalised]; //calculate the size and position of the R circle const cr = resistanceCircle(R); //define the x axis centre point for the R circle mouseR.setAttribute("cx", transform(cr)[0]); //define the y axis centre point for the R circle mouseR.setAttribute("cy", transform(cr)[1]); //define the radius for the R circle mouseR.setAttribute("r", scale(cr[2])); //define the path to be drawn (for X) mouseX.setAttribute("d", reactanceArc(X, 0, Infinity)); //reverse calculate the position for G (basically do all previous math backwards) [R,X] = smith([R,X]); const getG = transformToG([R,X]); //re-define the end points for the G line mouseG.setAttribute("x2", getG[0]); mouseG.setAttribute("y2", getG[1]); //draw a small point at the intersect of 3 lines plotPoint.setAttribute("cx", getG[0]); plotPoint.setAttribute("cy", getG[1]); plotPoint.setAttribute("r", 5); chart.dispatchEvent(new CustomEvent("input")); event.preventDefault(); //calculate values for Z and Z normalised impedanceVal (Rvalue, Xvalue, z0); //calculate cartesian form of reflection coefficient reflCart = reflectionCart(Rvalue, Xvalue); //calculate polar form of reflection coefficient reflectionPolar(reflCart); } function label([x, y]) { return transform([x * 1.025, y * 1.025]); } //if the mouse is over the chart, set the svg lines to follow the mouse position chart.onmousemove = event => { let point = chart.createSVGPoint(); point.x = event.clientX; //x coordinate of mouse position (in pixels) point.y = event.clientY; //y coordinate of mouse position //Learn current transformation matrix (CTM) of the SVG element and get screen position //i.e. convert the SVG coordinates to coordinates in terms of the entire screen const matrix = chart.getScreenCTM().inverse(); point = point.matrixTransform(matrix); //re-define the end points for the G line mouseG.setAttribute("x2", point.x); mouseG.setAttribute("y2", point.y); //draw a small point at the intersect of 3 lines plotPoint.setAttribute("cx", point.x); plotPoint.setAttribute("cy", point.y); plotPoint.setAttribute("r", 5); point = chart.value = transformInvert([point.x, point.y]); point = smithInvert(point); //if we are not within the readable scale, relove the X and R lines if (point === undefined) { mouseR.removeAttribute("r"); mouseX.removeAttribute("d"); } else { //define an array where R is the x coordinate and X is the y coordinate const [R, X] = point; const Rnormalised = R.toFixed(3); const Xnormalised = X.toFixed(3); const Ractual = (Rnormalised * z0).toFixed(3); const Xactual = (Xnormalised * z0).toFixed(3); //calculate the size and position of the R circle const cr = resistanceCircle(R); //define the x axis centre point for the R circle mouseR.setAttribute("cx", transform(cr)[0]); //define the y axis centre point for the R circle mouseR.setAttribute("cy", transform(cr)[1]); //define the radius for the R circle mouseR.setAttribute("r", scale(cr[2])); //define the path to be drawn (for X) mouseX.setAttribute("d", reactanceArc(X, 0, Infinity)); //calculate values for Z and Z normalised impedanceVal (Ractual, Xactual, z0); //calculate cartesian form of reflection coefficient reflCart = reflectionCart(Ractual, Xactual); //calculate polar form of reflection coefficient reflectionPolar(reflCart); } chart.dispatchEvent(new CustomEvent("input")); event.preventDefault(); } chart.value = [0, 0]; return chart; };