Redesign the UI for selecting absorption wavelengths.

[pixelzoom]

Related to #1 (design refresh) and phetsims/scenery-phet#211 (wavelength slider)...

We currently do not have a wavelength slider that supports UV/IR wavelengths. UV is essential for MOTHA, and that enhancement will be made in phetsims/scenery-phet#211.

The Java vesion of wavelength slider had some additional functionality that appeared in the Java version of MOTHA. The slider track (spectrum) could be decorated with vertical lines that denote the absorption wavelengths. Here's what that looks like in the Java version of MOTHA. Note the vertical black lines at the left end of the spectrum - those are the absorption wavelengths.

As I noted in phetsims/scenery-phet#211 (comment) on 11/18/2015, I've never felt that this is a particularly effective way of denoting the absorption wavelengths. And this also gets low marks for usability -- it's very difficult to select specific wavelengths, they're all bunched together. That's a bit sad, since setting specific absorption wavelengths is an important part of making things happen in this sim.

So... Can we come up with a better UI for this in the design refresh? Assigning to the design team for brainstorming. I'll be needing this functionality by early September 2022, so high prioroity to get the discussion going.

[pixelzoom]

7/14/2022 design meeting:

• @ariel-phet suggested adding another radio "UV" button that shows the zoomed-in part of the UV spectrum that has the absorption wavelengths.

• @matthew-blackman said that he things the term "Monochromatic" is important, and that is no longer in the HTML5 design, because we've changed to icons.

• @matthew-blackman suggested adding additional absortion wavelengths, for other than the ground state. @kathy-phet recalled that we limited to ground state for specific reasons, and we'll probably stick with that.

• @pixelzoom reminded that a significant amount of common-code work is needed for the monochromatic slider, see WavelengthSlider: support UV and IR wavelengths scenery-phet#211. Having to show vertical lines on the slider, highlight the slider thumb, etc. is additional work that probably won't be used by other sims, so might not be added in sim-specific code.

Of all of the "design" issues, this one is highest priority, so keeping it labeled as "high-priority".

[arouinfar]

Unassigning myself until work resumes on this sim.

[pixelzoom]

Some work on this was done in the design doc, and implemented in #35. There is now an "Absorption Wavelengths" info button. It opens a dialog, from which absorption wavelengths can be selected. @arouinfar and I also discussed displaying the associated transition next to the wavelength display whenever an absorption wavelength is set. It would be nice to mock this up, but I suspect that I might have it implemented before that happens :)

[pixelzoom]

I did indeed implement the Absorption Wavelengths dialog (test drive in main). But I did not implement a means of selecting wavelengths in that dialog, because I ran into many design questions.

Big questions:

• Using a left-right arrow implies absorption (right) AND emission (left). Should this dialog be retitled? Or use a right arrow only?
• If using a left-right arrow... Should we title this Absorption and Emission Spectra? See https://webbtelescope.org/contents/articles/spectroscopy-101--how-absorption-and-emission-spectra-work
• Should the UV and Visible wavelengths be selectable? If so, how?
• Being a modal dialog, this is not very useful with the Spectrometer, or with the Electron Energy Level accordion box. This information is needed in both of those places too.

Less big questions:

• Should we display the color for each wavelength?
• Should we somehow indicate whether wavelengths are UV/IR/Visible?
• Should the display be ordered by increasing wavelength, with wavelength as the left column? This would support the Spectometer better.

Assigning to @DianaTavares and @arouinfar to get the design discussion going.

[DianaTavares]

Today's Design meeting:
CM presented the Absorption design implemented in the simulation:

• Order by increasing wavelength looks good.

• Remove IR from Absorption dialog, since light source can’t fire IR photons.

• Turn into a panel and put it on top of the legend/light source.

• Add info button to Spectrometer to display emission data. Display it on the right on top of the models.

• Emission data panel covers the Model radio buttons.

• Add a label next to the NumberDisplay when the wavelength is set to an n-transition, e.g. n 1 → 6

I am working in the mockups!

[pixelzoom]

Add a label next to the NumberDisplay when the wavelength is set to an n-transition, e.g. n 1 → 6

The NumberDisplay lives inside of a NumberControl (where I can't determine its position), so it's pretty much impossible to decorate a NumberControl in this way (without resorting to awful hacks). So for now, I put the transition above the NumberControl. We can run this by the team, but I think that I actually like this better. For example:

[arouinfar]

So for now, I put the transition above the NumberControl. We can run this by the team, but I think that I actually like this better. For example:

Looks great @pixelzoom!

[DianaTavares]

Fist idea!:

Absorption and emission panels, that last one as an info button in the Spectrometer. To fit the Absortion panel, I have to move all the play areas to the center, but now that I see the notes:

Turn it into a panel and put it on top of the legend/light source

Then I will mock up that better.

[pixelzoom]

Hold off on the mockups @DianaTavares. I've run into some problems with the approach the we discussed in yesterday's design meeting. Too complicated to try to describe here (it has to do with switching between models, and between white/monochromartic), and we'll need to discuss again.

In the meantime, there is one "Absorption/Emission" non-modal dialog. It's movable, and opened via a checkbox below the light controls. Screenshot:

[DianaTavares]

ok, I will stop designing, and look for a space to meet next Monday. I was trying this (a panel):

[pixelzoom]

That looks like an AccordionBox. AccordionBox can be collapsed, but it never totally disappears.

[pixelzoom]

Also, for this bit in the above mockup:

We cannot put anything in the title bar of an AccordionBox. So the Info button cannot live there.

[DianaTavares]

In today's design meeting with @arouinfar, @pixelzoom, @Nancy-Salpepi and @kathy-phet , we decided to continue with the idea of only one panel, Absorption/Emission, that is draggable:

@pixelzoom will continue working in the implementation.

Now this issue is the same as #32, can we close one of the issues?

[pixelzoom]

Thanks @DianaTavares. I think we can close both this issue and #32. When the sim is feature complete, we can reevaluate and (if needed) open a new issue for any changes that we'd like to make.