An Svg Button.

Create one with simpleButton or repeatingButton.

Two ways to draw the button content.

TextContent encapsulates a String, which is sized to half the button height and centered.

SvgContent allows you to render any Svg you wish.

A two-dimensional location: (x, y)

A two-dimensional size: (width, height)

Opaque internal message.

You wrap these with the (Msg -> msg) you pass to render, and pass them to update.

First arg to repeatingButton.

The two Float args to RepeatTimeWithInitialDelay are the initial delay and the subsequent repeat period, in milliseconds.

Create a simple, rectanglar button.

It sends a msg when clicked or tapped.

The view function draws a two-pixel wide, black border around it. Your drawing function should leave room for that, or it will be overlaid.

Like simpleButton, but repeats the click or tap periodically, as long as the mouse or finger is held down.

Read a button's state.

Set a button's state.

Return True if a Button is touch aware.

Set whether a button is touch aware.

update notices when it gets a touch event, and sets the touchAware state, but since you usually don't save updated simple buttons, the next event won't notice. Mobile browsers have a delay in generating a simulated click event. Knowing that the button is touch aware eliminates that delay, since the click is then generated by the TouchEnd event instead of the MouseUp event.

Read a button's size.

Set a button's size.

This is the usual value used for the repeat time of a repeating button.

It has an initial delay of 1/2 second and a repeat period of 1/10 second.

Render a button's outline, your content, and the mouse-sensitive overlay.

Does this by sizing an SVG g element at the Location you pass and the size of the Button, and calling renderBorder, renderContent, and renderOverlay inside it.

Draw a button's border.

You won't usually use this, letting render call it for you.

You should call this BEFORE drawing your button, so that its opaque body does not cover your beautiful drawing.

Render the visible, non-border part of a button.

You won't usually use this, letting render call it for you.

But you could use it for a non-button, if you just want some text centered in a rectangle.

Draw a button's transparent, mouse/touch-sensitive overlay.

You won't usually use this, letting render call it for you.

You should call this AFTER drawing your button, so that the overlay is the last thing drawn. Otherwise, it may not get all the mouse/touch events.

Call this to process a Button message from inside your wrapper.

The Bool in the return value is true if this message should be interpreted as a click on the button. Simple buttons never change the button or return a command you need to care about, but you'll need to call getState on the button to figure out what to do (unless your application has only a single button).

Subscriptions are one type of message you can get inside your wrapper.

In order to check if a message is a subscription, call checkSubscription. If it returns a time delay and Button message, you need to use that to create a time subscription for your application.

Simple buttons don't need subscriptions. Only repeating buttons use them.