design of arrow buttons in carousel

[pixelzoom]

Related to #166 (create a Carousel), the desired look of the buttons is shown below. This button is not a rounded rectangle. Two corners are rounded to match the corners of the carousel, the other 2 corners are squared off.

The sun library currently supports rectangular and circular push buttons (RectangularPushButton and RoundPushButton, respectively). We do not have support for the button shape requested here, which would require an arbitrary shape to implement.

Options:
(1) Change the requirements and use RectangularPushButton (least amount of work, approach used in Area Builder)
(2) Create a one-off button for use in Carousel (not recommended)
(3) Add support to sun for buttons with arbitrary shapes (a ton of work)

Assigning to @ariel-phet to decide how to proceed. Also mentioning @amanda-phet, since I'm working from her requirements in the Function Builder design doc, which @ariel-phet has stated is the requirements specification for Carousels in general.

[pixelzoom]

For comparison, here's a carousel from Level 5 of the Area Builder "Game" screen:

And here's a prototype from Function Builder that uses RoundPushButton:

[ariel-phet]

@pixelzoom are you saying that something like this could work

[ariel-phet]

@amanda-phet - a big part of this will be your call...how important is the look of this button on the end to you...does it have to fill the entire height? Could it have rounded inside corners (obviously not as nice aesthetically)

[ariel-phet]

@pixelzoom - I understand option (2) is not ideal, but can you flesh out a bit more why not recommended?

[pixelzoom]

#197 (comment)

Sorry, but... ugly.

I understand option (2) is not ideal, but can you flesh out a bit more why not recommended?

Because we don't need more one-off code. We spent a great deal of time on sun buttons, and I don't relish the task of reproducing what they do. Highly recommend to choose (1), with a longterm plan to do (3).

[pixelzoom]

Also wondering... If (1) is not acceptable, then why was it acceptable in Area Builder?

[ariel-phet]

(1) was acceptable for the same reasons, but not ideal. Were hoping to fix it in the more generalized version.

[amanda-phet]

When we had the carousel design meeting a while back, it was pretty clear that these buttons were problematic, but that it was probably important long-term to be able to draw a button with two rounded corners.

One thing I don't like about the button in Area Builder is that it is layered on top of the panel itself, and with the transparency it makes the stroke around the panel gray-ish on the edges.

Is it possible to make the button a gray rounded rectangle (with no stroke), layered under the panel stroke so that it does not cover it? Like this:

Also wondering... If (1) is not acceptable, then why was it acceptable in Area Builder?

I believe Area Builder was developed before the carousel design meeting happened- and actually prompted the discussion.

[pixelzoom]

@amanda-phet wrote:

One thing I don't like about the button in Area Builder is that it is layered on top of the panel itself, and with the transparency it makes the stroke around the panel gray-ish on the edges.

I noticed this too, yuck. The buttons in the new Carousel (and in Function Builder) do not overlap the carousel outline. Whether or not to stroke the edge of the button is optional. See sample in #197 (comment), where the button's edge is lightly stroked.

[pixelzoom]

A couple of other options that occurred to me, neither of them easy, but worth discussing:

(4) Change the API of scenery.Rectangle so that the radius of each corner can be specified separately.

(5) Change the API of sun.RectangularPushButton so that the radius of each corner can be specified separately.

[pixelzoom]

@ariel-phet and @amanda-phet I'm going to proceed with using buttons where all 4 corners are rounded (option 1) since this is the only option that is currently supported by PhET's button library.

Since this issue has come up before (and is certain to come up again), we should add support for it to sun. I've labeled this issue for discussion at developer meeting, to decide how to proceed.

[pixelzoom]

The button was factored out into CarouselButton, and I've referenced this issue in a TODO item in the code.

[pixelzoom]

9/17/15 dev meeting notes:

• add support to kite to create this shape (2 rounded corners), see phetsims/kite#56
• investigate how RectangularButtonView looks with this shape, see #201
• 3D look for buttons is difficult to implement for arbitrary shapes

[pixelzoom]

Sub-issues have been broken out into separate issues (shown immediately above), so closing.