Spectrometer design problems

[pixelzoom]

Screenshots below show the Spectrometer in the Java and HTML5 versions. The Spectrometer has some significant design and usability problems, none of which have been addressed by the HTML re-design. Assigning to @DianaTavares and @arouinfar to kick-start the discussion.

Problems include:

1. The y-axis does not scale. In the screenshot below for example, photons continue to be emitted for 97 nm, but there is no change shown on the Spectrometer.

2. Some wavelengths overlap, making the spectrometer more difficult to read. For example, see 94 and 95 nm in the Java screenshot below. There's also overlap at 7460 nm, probably with 4053 nm, because the IR portion of the x-axis is compressed. There may be overlap between other wavelengths.

3. One cannot tell what the emission wavelengths are by looking at the spectrometer. The x-axis is not labeled with the emission wavelengths. One must open the Absorption Wavelengths dialog to find the emission wavelength values -- not very intuitive or usable.

4. There are 2 extra (unlabeled) x-axis tick marks between 380 nd 500 nm. By reading the code, I see that they are at 400 and 450, but this seems confusing.

5. The Java screenshot below shows emissions near 780 nm in the IR spectrum. There is no emission wavelength near 780 nm, so this looks like a potential bug, see https://github.com/phetsims/models-of-the-hydrogen-atom/issues/14.

Java:

HTML5 redesign:

[DianaTavares]

In today's design meeting, we proposed an option with lines:

But KP commented that the dots are important for the learning goal of comparing what transitions are more common. I will work on the mockup that addresses the problems described in this issue.

[DianaTavares]

In this new version, I extended the space for 90-130 range to fit the dots:

But in today's design meeting with @arouinfar, @Nancy-Salpepi, @kathy-phet and @pixelzoom, we review that the pudding model emits a photon in the 150 nm, and that value is not in the range.

@pixelzoom said that he will try to fit all the range. But we agree in:

• [ ] Place arrows at the top when you have revised the limit of points that can fit on the graph, indicating that the number is larger.

• [ ] add a small number in the top (same color that the dot) indicating the value of the wavelength (on the mockup, I don't put all the values, but in the sim should)

• [ ] Delete the record button.

• The graph can be divided into ranges (like the mockup, that include 3 different ranges for UV, visible and IR) to fit the values, and 150 need to be included.

[pixelzoom]

We also concluded in today's design meeting that the numbers at the top of each stack of photons do not need to be present in the snapshots. The numbers would be unreadable, and the snapshots are intended for qualitative comparison.