Presentation of Electron Energy Level diagram

[pixelzoom]

Related to #1 design refresh...

In the Java version, the Electron Energy Level diagram was in an accordion box that covered the Legend. It was a very odd UI. When collapsed it was a checkbox:

When expanded, it was an accordion box:

The Electron Energy Level diagram is relevant only in the 2nd (Energy Levels) screen of the HTML version. The HTML5 design doc shows this UI (collapsed and expanded):

But there's a major problem here. These mockups are using screen realestate that we simply do not have. Here's what the current HTML5 implementation looks like:

There's no way that we can squeeze a major accordion box in here without compromising usability.

Assigning to @arouinfar for design.

[pixelzoom]

7/14/2022 design meeting:

I mentioned that I prefer the layout of the original Java sim. The new layout has a lot of problems, and we can't fit everything in.

[arouinfar]

Unassigning myself until work resumes on this sim.

[DianaTavares]

Today design meeting

CM needs to build that screen to see how much real estate we actually have.

[pixelzoom]

Electron Energy Level diagrams are implemented and ready for pixel polishing. They currently look and behave exactly like the Java version.

Things that I don't like about this presentation:

• It's very problematic to display an arrow head. When transitioning to a lower state, the arrow head is behind the electron, because the electron sits on top of the energy-level line. And for states that are close together, we are omitting the arrow head because there's no space to draw one. So the arrow head looks awful, and it appears inconsistently. I would remove the arrow head, since the electron serves the same purpose -- showing you the transition direction.

• I don't like the squiggle line. It's intended to convey information about wavelength via the period of the squiggle. I think that's way too subtle, displayed periods are not different enough to be informative, and the squiggle results in a noisy display. A straight line (as is typically used on these diagrams) would be more effective.

Note that #64 also reported problems with the arrows. I'm going to close that issue, and we'll use this as the issue for pixel polishing going foward.

Over to @DianaTavares for review and next steps. I'm guessing that this will require a design meeting.

[pixelzoom]

For discussion....

• 1.0.0-dev.15 is the same as the Java version - squiggle with arrow head.

• 1.0.0-dev.16 has a squiggle, but no arrow head.

• 1.0.0-dev.17 uses a straight line (no squiggle, no arrow head), made slightly thicker (lineWidth: 2) so that the wavelength color is more prominent.

[DianaTavares]

I also think a design meeting is needed. I guess it needs to wait until January. These are my ideas:

1. The transition arrow/line disappears when the sim is paused and I think it is an error: I play with the sim and try to take screenshots of the transition in the Electron Energy Level Diagram, then, when it happens, I pause the simulation, but after a short time the line/arrow disappears!

2. looks like, the arrow and the squiggle, are drawn for the bottom do the electron, and they look overlapped going down. Is it possible that the arrow/squiggle line is drawn, not to the line of the level, but to the edge of the electron? Something like this:
   

My preference is the squiggle line (dev.16)

[pixelzoom]

1. The transition arrow/line disappears when the sim is paused and I think it is an error: I play with the sim and try to take screenshots of the transition in the Electron Energy Level Diagram, then, when it happens, I pause the simulation, but after a short time the line/arrow disappears!

We can certainly discuss changing that... But it is actually a feature in the Java version, which I've also implemented in the HTML5 version. A transition line is shown for a maximum of 1.5 seconds before it is hidden.

2. looks like, the arrow and the squiggle, are drawn for the bottom do the electron, and they look overlapped going down. Is it possible that the arrow/squiggle line is drawn, not to the line of the level, but to the edge of the electron? Something like this:

No, that's not possible n = 4, 5, 6 -- there is not enough space between those level lines to include both a squiggle and arrow head above the electron. I don't think we should have a solution that works only some of the time.

[pixelzoom]

... I pause the simulation, but after a short time the line/arrow disappears!

Oh, I see. Even when paused, the transition line disappears. Yes, that is a bug -- fix coming up!

[DianaTavares]

Oh, I see. Even when paused, the transition line disappears. Yes, that is a bug -- fix coming up!

Nice!

No, that's not possible n = 4, 5, 6 -- there is not enough space between those level lines to include both a squiggle and arrow head above the electron. I don't think we should have a solution that works only some of the time

True... now I think that something that works for everything is the straight line. But I like the squiggle, well we need a design meeting anyway, so let's wait to see what the team proposes, but I will think about it as well.