viewof params = { // create individual inputs const energy = Inputs.range([60, 300], { value: 300, step: 10, label: "energy [kV]" }); const semiangle = Inputs.range([5, 30], { value: 20, step: 1, label: "angle [mrad]" }); const C10 = Inputs.range([-500, 500], { value: 100, step: 1, label: "C10 [Å]" }); const C30 = Inputs.range([-1000, 1000], { value: 0, step: 1, label: "C30 [um]" }); const stig = xySlider({ min: -100, max: 100, value: [0, 0], width: "125px", height: "125px" }); const coma = xySlider({ min: -10000, max: 10000, value: [0, 0], width: "125px", height: "125px" }); const resetPosition = Inputs.button("reset position", { value: null, reduce: () => { mutable shift = [0, 0]; } }); const resetAberrations = Inputs.button("reset aberrations", { value: null, reduce: () => { C10.value = 100; C10.dispatchEvent(new Event("input", { bubbles: true })); C30.value = 0; C30.dispatchEvent(new Event("input", { bubbles: true })); stig.value = [0, 0]; stig.dispatchEvent(new Event("input", { bubbles: true })); coma.value = [0, 0]; coma.dispatchEvent(new Event("input", { bubbles: true })); } }); // magnitude labels for 2d sliders const stigLabel = htl.html`

C12: 0.0 Å

`; const comaLabel = htl.html`

C21: 0.0 Å

`; // 2. Build the responsive Grid const form = htl.html`

${energy} ${semiangle} ${C10} ${C30}

${resetPosition} ${resetAberrations}

${stigLabel} ${stig}

${comaLabel} ${coma}

`; const update = () => { const [sx, sy] = stig.value; const [cx, cy] = coma.value; const stigMag = Math.sqrt(sx ** 2 + sy ** 2).toFixed(1); const comaMag = Math.sqrt(cx ** 2 + cy ** 2).toFixed(1); stigLabel.textContent = `C12: ${stigMag} Å`; comaLabel.textContent = `C21: ${comaMag} Å`; form.value = { energy: energy.value, semiangle: semiangle.value, C10: C10.value, C30: C30.value, stig: stig.value, coma: coma.value }; form.dispatchEvent(new Event("input", { bubbles: true })); }; energy.addEventListener("input", update); semiangle.addEventListener("input", update); C10.addEventListener("input", update); C30.addEventListener("input", update); stig.addEventListener("input", update); coma.addEventListener("input", update); update(); return form; }