Schematic mode touch areas need work

[phet-steele]

Testing in 1.0.0-dev.160 with pointer areas enabled. @samreid READ THIS: none of these issues are present when not in schematic mode except for the last one.

• [ ] Some pointer areas aren't centered. Most notably the wire (compare it to the battery below) but also a few other components. This maybe isn't a huge deal.

  

• [x] Many touch areas either don't encompass the text, OR have very inconsistent padding around the text.

Doesn't have text included:

Hand has a large space underneath. The wire is also slightly too big. Areas in non-schematic mode are good examples of good padding:

• [x] Both lightbulbs overlap with the resistor below them.

  

• [x] Coin overlaps with eraser.

  

• [x] This is a fun one. Each page with a lightbulb has a little square touch area tucked away under the resistor. Clicking there WILL produce a lightbulb for the user.

  

• [x] I'm confused about how far touch areas should extend on components. The wire has the areas extend until the vertices, but fixed length components have the areas extend past and into the vertices. Maybe this doesn't matter, but it is inconsistent.

  

• [x] The lightbulbs' touch area is not centered on the component, it is off to the right.

  

• [x] Areas from one page of the carousel extend into another page. Also don't think this is harmful since I cannot click those areas and produce a component. Haven't tried touch....

  

Seen on macOS 10.12.6 Chrome. For phetsims/QA/issues/48.

URL: http://www.colorado.edu/physics/phet/dev/html/circuit-construction-kit-dc/1.0.0-dev.160/circuit-construction-kit-dc_en.html?showPointerAreas Version: 1.0.0-dev.160 2017-09-07 18:03:16 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36 Language: en-US Window: 1920x1014 Pixel Ratio: 2/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 32 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"928741cf","branch":"master"},"axon":{"sha":"7083c475","branch":"master"},"babel":{"sha":"5b127384","branch":"master"},"brand":{"sha":"cfca902d","branch":"master"},"chipper":{"sha":"66110366","branch":"master"},"circuit-construction-kit-common":{"sha":"a165d9ef","branch":"master"},"circuit-construction-kit-dc":{"sha":"2722c8da","branch":"master"},"dot":{"sha":"630fb098","branch":"master"},"joist":{"sha":"f51d5ab4","branch":"master"},"kite":{"sha":"dc5c4382","branch":"master"},"phet-core":{"sha":"30da7870","branch":"master"},"phetcommon":{"sha":"1a5ceb11","branch":"master"},"query-string-machine":{"sha":"c74e454e","branch":"master"},"scenery":{"sha":"fc2d1cf1","branch":"master"},"scenery-phet":{"sha":"55f204d3","branch":"master"},"sherpa":{"sha":"e29820c9","branch":"master"},"sun":{"sha":"1ed8afa5","branch":"master"},"tandem":{"sha":"37243b99","branch":"master"},"twixt":{"sha":"6f27c1ff","branch":"master"}}

[samreid]

Haven't tried touch....

You can simulate touch from the comfort of your own Chrome by pressing the devices button in the dev tools:

[samreid]

https://github.com/phetsims/circuit-construction-kit-common/commit/826a8690201a6ec120bc2fd825888ee11cc92e99 updates touch/mouse areas when lifelike/schematic changes. I'll see which boxes that checks off.

[samreid]

Centering is better, but not perfect:

[samreid]

Areas from one page of the carousel extend into another page.

That is normal and doesn't cause problems because those objects are occluded by a clip area (more of a problem with our ?showPointerAreas implementation)

[samreid]

After the above commits, I got everything except the centering (which wasn't too bad to begin with, and even got better after the 1st commit. Not obvious where to look to improve the centering further, but I'm not too worried about it.

@phet-steele would you like a new version?

[samreid]

It looks like the centering issue is caused by the lifelike/schematic pages having different widths and carousel not updating its layout when the icons change.

[phet-steele]

@phet-steele would you like a new version?

No need.

@samreid master looked great. Up to you to pursue the centering. I didn't think it was critical either and it is much improved on master. You can close if you do not desire to improve it further.

[samreid]

Thanks for the review. The centering seems acceptable, let's close.