uliwitness / Stacksmith

An intuitive software erector kit targeted at people new to programming, but with enough potential to stay useful once they've learned, inspired by HyperCard.
http://stacksmith.org
131 stars 13 forks source link

Custom iOS-style switches #62

Open uliwitness opened 9 years ago

uliwitness commented 9 years ago

Effectively a checkbox, but looking like a sliding switch. Should probably be themeable with custom graphics, too, but different from a button with icon graphics, this can't just toggle on click, but has to detect which side was clicked on, and has to be able to track a drag in the button.

Maybe we can have 2 graphics, the cartouche or slot (whose transparency is used to clip the switch), and the actual switch knob that is drawn underneath and inside the slot. Will probably need 3 graphics for that: The slot mask, the slot graphic, and the switch knob.

uliwitness commented 7 years ago

Let's make this a "switch" button style. A custom NSView class that does the drawing, and a few properties for the images, and if they're missing, fall back on default images. The switch should look and behave like the "do not disturb" switch in macOS's Notification Center.

Image properties needed would be an "knobImage", "onTrackImage", "offTrackImage" (between which the button could cross-fade if you drag the button past the 50% mark, like Notification Center's does), "bevelImage" and "clipImage". onTrackImage/offTrackImage are clipped to clipImage, bevelImage is drawn underneath them but not clipped and contains the border.

Also need to be able to show the images (which contain the knob) disabled (i.e. not usable right now because the "enabled" property is false), inactive (i.e. in non-current window), and the knob also needs a "pressed" state. Should probably all just be extra properties.

Tracking positions should be relative to the image sizes, so a graphics designer can use transparency to control the relative sizes of each image. The images should be loaded as icons from the stack (ask the part's document for its media).