Scratch-blocks: Specialized Menu — Angle Picker

[carljbowman]

Breaking out from Design - Specialized field editors - Issue #149

For example, this will be used in places like 'point in direction ( )'

[PullJosh]

Oops, didn't see this: https://github.com/LLK/scratch-blocks/pull/493 You guys are on top of things! :stuck_out_tongue:

What if there was some sort of circular selector which allowed users to choose non-cardinal directions more easily? That way users could set sprites in non-standard directions without requiring a full understanding of the directional system. This could be especially useful on the horizontal layout (for Scratch Jr users who want to make their sprites move a certain way without much of a knowledge barrier).

The purpose of a circular selector would be to lower the floor (entry barrier), not raise the ceiling.

_Update:_ I tried making a little demo of how this could work, but I was never quite happy with the results. I still think the idea is solid, but it could use a bit more thought before being used.
In case anybody's interested, here's what I was playing around with: http://codepen.io/PullJosh/pen/RRLGpa

[tmickel]

@PullJosh yeah, I think we are thinking on the same page :) I think not only does a circular selector lower the floor for setting direction, it should help communicate the layout of our directions by direct tinkering. One question I have is whether we may also want to consider involving a sprite in the selector to further demonstrate the direction:

[cpseager]

Out of interest will it show 270 or -90 (as per Scratch 2)?

It may be a very useful teaching tool to be able to pull the needle clockwise to give 270 and anticlockwise to give -90....

[tmickel]

Another question:
What happens in the block itself? Currently it shows a degrees symbol only when the picker is not open.

[carljbowman]

Here are a couple versions for the angle picker.

Some notes:

• Each version has two states: on the left static state and on the right when the users is dragging the handle. Both no longer user Hover to control the angle selection.
• Because Scratch uses negative values beyond 180°, we should flip the highlighted section of the picker - Versions 1 & 2 dragging states.
• One version includes a sprite. This reference is great when working with a sprite, but we may want to consider a more generalized version for use cases beyond a sprite.
• There slight different in angle tally marks between the versions

Open question:

• Currently Scratch does not give any indication of Rotation Style within this menu. This can be somewhat of a hidden state that the user can set in Sprite Info or by using the 'set rotation style' block. Would we want to give some indication of the rotation style within this menu?
• Displaying the degree symbol when the menu is closed?

[towerofnix]

Currently Scratch does not give any indication of Rotation Style within this menu. This can be somewhat of a hidden state that the user can set in Sprite Info or by using the 'set rotation style' block. Would we want to give some indication of the rotation style within this menu?

(For version 2) Perhaps the respective rotation style icon below the sprite? (Positioned below, I mean. It might not be a bad idea to have it "above" the sprite (layered above).)

But the more things we throw in the more crowded it is, and it _certainly_ wouldn't fit in the static state!

Another option would be a "shadow" of the sprite, in the dragging state. The shadow would follow the mouse like the sprite currently would, but the sprite would stay in whatever rotation that would be _rendered_. For example, if the rotation style is "don't rotate", the non-transparent sprite would always be 90°/right, but the shadow would follow the mouse.

The roles of the "shadow" and the non-transparent sprite could be flipped, as well.

I'm just not sure how obvious that behavior would be..

[tmickel]

@carljbowman:

• What happens when the user clicks? How do you pick the final angle? Only by clicking outside of the drop-down menu?
• What happens to the display when the angle is > 180 or < -179?
• When you transition from -179 to +180, does the selection flip?
• Can you provide an asset for the arrow icon floating along the edge?
• Can you be more specific about the pointer style (you show the pointer as the "grab" pointer anytime the cursor is above the picker in the screenshot above, should it always be that while above the picker circle?)
• The two versions are quite different - can we pick one or the other for all cases?

[tmickel]

Also regarding your qs:

• For rotation style, that's definitely tricky. One problem is that rotation style can change on run-time, since we have the "set rotation style" block. If we have an indicator in the menu somehow, we'd have to adjust the menu while the state is changing, or otherwise be ok with it being out-of-date. Hmmm
• Displaying the degree symbol: currently it displays when the menu is closed, but not while it's open. Should it be both?

[tmickel]

Answers:

• The only way to close the menu is clicking outside of it. No other way to close the menu, and clicking just selects an angle.
• Fill direction will be in the "negative" direction when the angle is negative, even if < -179. Similarly fill direction will be in the "positive" direction when the angle > 180. When the angle is converted to a respective positive/negative angle after the menu closes, the fill direction may switch.
• Yes, when you switch from -179 to +180, the selection must flip.
• Cursor should be default-mouse-style until dragging; during a drag, switch to drag-style cursor just like dragging a block.
• Choose the "standard" version with no sprite. Worried for the second version that we can't display the actual costume, or that the rotation style/whatever will make it confusing.
• Increase notch size at each 45 degree increment to match Blockly.

[tmickel]

• Remove the degree symbol entirely.

[paulkaplan]

@carljbowman

Can you provide an asset for the arrow icon floating along the edge?

bump

[carljbowman]

@paulkaplan - Here is the arrow icon: arrow.svg.zip