A primitive template representing the shape you wish to draw. This must be turned into a Shape before being drawn to the screen with collage (see below).

A filled, outlined, or filled and outlined object that can be drawn to the screen using collage.

The Collage type represents the drawable surface of the window which contains a (x, y) pair of horizontal and vertical dimensions (arbitrary units, not necessarily in pixels) to which the drawing surface will be scaled, and the `List' of Shapes to be drawn on the drawing surface.

The GraphicSVG type alias represents the drawable surface of the window.

This type is only used to define a type signature for a user defined view as follows:

view : GraphicSVG.GraphicSVG userMsg

for use with graphicsApp and as follows:

view : Model -> GraphicSVG.GraphicSVG MyMsg

for use with notificationsApp, gameApp and App.

These assume that Model is the name of the user model type alias and MyMsg is the name of the user message type. Simply substitute the names actually used for these labels.

THIS IS DEPRECIATED AND ONLY KEPT FOR COMPATIBILITY WITH THE PREVIOUS VERSION; Use "Collage userMsg" instead of "GraphicSVG userMsg", as they are identical except in name.

Creates a blank canvas on which you can draw. Takes a width, height and a list of Shapes. Use this in your view functions in the three types of Apps above:

collage 500 500
    [
        circle 10 |> filled red
    ]

To apply the function over all the shapes in the given Collage using the map function. (Ask if you don't know what this means.)

This type alias is only used as a target for a user main type signature to make the type signature more clear and concise when main calls app:

main : App Flags Model Msg
main =
    app Tick
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        , onUrlRequest = onUrlRequest
        , onUrlChange = onUrlChange
        }

where Tick is a message handler called once per browser window update, Flags is the type alias (or type) of the flags input from JavaScript Model is the type alias of the user persistent model, and Msg is the name of the user message type; if other names are used, they can just be substituted for these names.

Note that "type alias" could also be an ordinary "type" in all case, just that the syntax for producing a new type is not as clean as using a type alias for a record.

Advanced Function Warning! app takes one parameter of its own type of the form:

{
  init = \flags url key -> (model, cmd)
, view = \model -> { title = "Your Title goes here",
                   , body = view model
                   }
, update = \userMsg userModel -> ( userModel, Cmd userMsg )
, subscriptions = \userModel -> Sub userMsg
, onUrlRequest = \urlRequest -> userMsg
, onUrlChange = \url -> userMsg
}

This matches the Elm architecture and is analogous to Browser.application.

This type alias is only used as a target for a user main type signature to make the type signature more clear and concise when main calls ellieApp:

main : EllieApp Flags Model Msg
main =
    ellieApp Tick
        { init = init
        , update = update
        , view = view
        , subscriptions = subscriptions
        }

where Tick is a message handler called once per browser window update, Flags is the type alias (or type) of the flags input from JavaScript Model is the type alias of the user persistent model, and Msg is the name of the user message type; if other names are used, they can just be substituted for these names.

Note that "type alias" could also be an ordinary "type" in all case, just that the syntax for producing a new type is not as clean as using a type alias for a record.

Advanced Function Warning! ellieApp takes one parameter of its own type of the form:

{
  init = \flags url key -> (model, cmd)
, view = \model -> { title = "Your Title goes here",
                   , body = view model
                   }
, update = \userMsg userModel -> ( userModel, Cmd userMsg )
, subscriptions = \userModel -> Sub userMsg
}

This matches the Elm architecture and is analogous to Browser.document. It is called ellieApp because this version is compatible with the online Elm IDE Ellie.

Create a line from a point to a point. Use outlined to convert to a viewable Shape.

Create a closed shape given a list of points. Can use outlined or filled to convert to a Shape.

Create an open shape given a list of points. Unlike with polygon, the first and last points will not join up automatically. Can use outlined or filled to convert to a Shape.

Create a regular polygon with a given number of sides and radius. Examples:

ngon 3 50 -- triangle


ngon 5 50 -- pentagon


ngon 8 50 -- octogon

Synonym for ngon 3. Creates a triangle with a given size.

Creates a right-angled triangle with a given base and height.

Creates an isosceles triangle with a given base and height.

Creates a triangle given two side lengths and the angle between them.

For example, sideAngleSide 30 (degrees 45) 50 creates a triangle with side lengths 30 and 50 with an angle of 45 degrees between them.

Creates a square with a given side length. (Synonym for rect s s)

Creates a rectangle with a given width and height.

Synonym for rect.

Creates a rectangle with a given width, height, and circular rounded corners with the given radius.

Creates a circle with a given radius.

Creates an oval with a given width and height.

Creates a wedge with a given radius, and a given fraction of a circle.

wedge 50 0.5 -- semi-circle


wedge 50 0.25 -- quarter-circle


wedge 50 0.75 -- three-quarter circle

Fill a Stencil with a Color, creating a Shape; Note that any Stencil converted to a Shape this way can be made transparent (for instance by using the blank Color) but will not be "click-through", meaning that the body will catch any attached notifications and not let them through to any visible Shape(s) revealed beneath them.

circle 10
    |> filled red

Outline a Stencil with a LineType and Color, creating a Shape; Note that this is the only way to convert a Stencil into a Shape that is "click-through" as if the body is not just transparent but doesn't exist at all. It works for all Stencil's except for Text which can never be made "click-through" due to a permanent transparent background area that cannot be disabled.

circle 10
    |> outlined (solid 5) red

Repaint an already-filled Shape. This is helpful for repainting every Shape inside a group as well.

Repaints the outline the same color as the body of the shape including the outline, if used; Note that this can repaint with a transparent Color (for instance, the blank Color) but will never have the ability to be "click-through" so that it will always block (or catch) notifications to covered Shape(s) revealed beneath.

group
    [ circle 10
        |> filled orange
    , rect 10 40
        |> filled blue
    ]
    |> repaint green

Add an outline to an already-filled Shape.

When applied to Group's including Shape's that have had union applied to them, the outline will have half the expected stroke width only outside the Shape's and for Shape's with clip or subtract applied to them, the half width stroke will be interior to the composite shapes displayed.

The limitation is that when displaying "clip's" or "subtract's" containing "Group's", the outline for the "Group's" won't be visibile at all (less common), nor will the outline's for "clip's" or "subtract's" inside "Group's" be visible (more common); also, the outline for the clipping or subtraction pattern may not be as expected when the pattern is a "Group" as it won't appear at all in a "clip".

In these cases the workaround is just as before this was made available, to build up the outlines desired using combinations of other shapes such as curves, clipped or subtracted shapes, convential pre-applied outlines, etc.

Note that when applied to Group(s), Clip(s), and AlphaMask(s) (from subtracts), the body colour may still be transparent so that Shape(s) can be revealed beneath, but the bodies are not "click-through" so that notifications can be passed through to them, and the transparent bodies can still capture notifications enabled on the resulting Shape(s).

circle 10
    |> filled red
    |> addOutline (solid 5) white

Define a colour given its red, green and blue components.

Define a colour given its red, green, blue and alpha components. Alpha is a decimal number (Float) from 0 to 1 representing the level of transparency.

Define a colour given its hue, saturation and light components.

Define a colour given its hue, saturation, light and alpha components. Alpha is a decimal number (Float) from 0 to 1 representing the level of transparency.

Combine any number of Shape types into one Shape that can be transformed (moved, rotated, scaled, etc) as one Shape.

Display HTML inside an SVG foreignObject.

Creates a curve starting at a point, pulled towards a point, ending at a third point. For example,

curve (0,0) [Pull (0,10) (0,20)]

gives a curve starting at (0,0), pulled towards (0,10) and ending at (0,20).

Think about curves as what you get when you take a bunch of bendy sticks with their ends glued down to a board, and then pulling each stick towards another point. You always need an initial point and at least one Pull, but you can add as many Pulls as you want to add additional curve segments, but each curve segment can only bend one way, since it is pulled in one direction.

To make it easier to read the code defining a curve, and to make sure we always use the right number of curve points and pull points (which is one more curve point than pull points), we define a special Pull type, whose first point is the point we pull towards, and second point is the end point for this curve segments.

Apply to a curve or group of curves in order to view their start points, end points and Pull points. Helpful while perfecting curves.

curve (0,0) [Pull (0,10) (0,20)]
    |> curveHelper

The LineType type is used to define the appearance of an outline for a Stencil. LineType also defines the appearence of line and curve.

Define aLineType that doesn't exist, doesn't appear.

Define a solid LineType with the given width.

Define a dotted LineType with the given width.

Define a dashed LineType with the given width. Dashes are short line segments, versus dots which are theoretically points, but may be drawn with very short line segments.

Define a dashed LineType with the given width, where the dashes are longer than normal.

Define a LineType with the given width, including alternating dots and dashes.

A custom line defined by a list of (on,off):

custom [ ( 10, 5 ) ] 5 -- a line with dashes 10 long and spaces 5 long


custom [ ( 10, 5 ), ( 20, 5 ) ] -- on for 10, off 5, on 20, off 5

Creates a text Stencil. You can change this Stencil using the text helper functions. Note that |> filled ... or |> outlined ... must go at the end of the text helper functions (ie note that all these functions have type Stencil -> Stencil). For example,

text "Hello World"
    |> fixedwidth
    |> bold
    |> size 14
    |> filled black

Apply to a text Stencil to change the font size of the text.

The size has a unit called "points", which depends on the size and type of screen used, but try 12 to start.

Apply to a text Stencil to make the text bold.

Apply to a text Stencil to make the text italicized (slanted).

Apply to a text Stencil to underline the text.

Apply to a text Stencil to put a line through the centre of the text.

Apply to a text Stencil to centre the text.

Apply to a text Stencil to left-align the text.

Apply to a text Stencil to right-align the text.

Apply to a text Stencil to make the text selectable (so users can copy your text and paste it elsewhere).

Apply to a text Stencil to render the text with a Sans Serif font (ie one without thinner and thicker bits).

Apply to a text Stencil to render the text with a Serif font (ie one with thinner and thicker bits).

Apply to a text Stencil to render the text Stencil with a font in which every character has the same width. This will mean that the letters line up from line to line which is important in programming languages like Elm.

Apply to a text Stencil to render the text with a font of your choosing by specifying its name in a String.

Use this sparingly as support for each font will vary across browsers and devices.

Move a Shape by a number of units along the x-axis and y-axis.

Rotate a Shape by the specified amount (in radians). Use the degrees function to convert from degrees into radians:

[
    rect 30 60
        |> filled blue
        |> rotate(degrees 30)
]

Scale a Shape by a given factor.

Scale a Shape in the x-axis by a given factor.

Scale a Shape in the y-axis by a given factor.

Flip a Shape along the x-axis.

Flip a Shape along the y-axis.

Skew a Shape along the x-axis.

Skew a Shape along the y-axis.

Clipping to a shape

Cut out the Shape on the right using the Shape on the left.

Shape union

Combine two Shapes together into one to use with clip.

Shape subtraction

Subtract the Shape on the left from the Shape on the right.

The whole region outside the given Shape.

Make a Shape into a ghost. Mostly to be used inside of the clip operations. Note that although the blank Color is transparent, it will still catch notifications enabled on the Shape or block them if not enabled on the Shape.

Receive a message (userMsg) when a Shape is clicked or tapped.

Receive a message (userMsg) with the x and y position of the mouse or finger when the Shape is clicked or tapped.

Receive a message (userMsg) when the mouse enters a Shape.

Receive a message (userMsg) with the x and y position of the mouse when the mouse enters a Shape.

Receive a message (userMsg) when the mouse leaves a Shape.

Receive a message (userMsg) with the x and y position of the mouse when the mouse leaves a Shape.

Receive a message (userMsg) with the x and y position of the mouse when the mouse is moved across a Shape.

Receive a message (userMsg) when the mouse button is pressed while the cursor is over a Shape.

Receive a message (userMsg) with the x and y position of the mouse when the mouse button is pressed while the cursor is over a Shape.

Receive a message (userMsg) when the mouse button is released while the cursor is over a Shape.

Receive a message (userMsg) with the x and y position of the mouse when the mouse button is released while the cursor is over a Shape.

Receive a message (userMsg) when the user begins touching a Shape.

Receive a message (userMsg) with the x and y position of the user's finger when the user begins touching a Shape.

Receive a message (userMsg) when the user lifts their finger off a Shape.

Receive a message (userMsg) with the x and y position of the user's finger when the user lifts their finger off a Shape.

Receive a message (userMsg) with the x and y position of the user's finger when the user moves their finger over a Shape.

Make a Shape transparent by the fraction given. Multiplies on top of other transparencies:

circle 10
    |> filled red
    |> makeTransparent 0.5
--results in a transparency of 0.5 (half vislible)


circle 10
    |> filled red
    |> makeTransparent 0.5
    |> makeTransparent 0.5
--results in a transparency of 0.25 (a quarter visible)

Add a hyperlink to any Shape:

circle 10
    |> filled red
    |> addHyperlink "http://outreach.mcmaster.ca"

Take a Collage width and height as well as a list of tuples of depth and Shape. to produce a list of Shape's suitable for display as a group in a Collage with Shape's with lesser depth larger and in front of Shape's with greater depth.

Creates a graph paper with squares of a given size.

Creates graph paper with squares of a given size, with a user-defined thickness and colour.

To compose multiple pages or components which each have a Msg/view/update, we need to map messages. (Ask if you don't know what this means.)

The Color type is used for filling or outlining a Stencil.

A matrix representing an SVG transformation matrix of the form:

( ( a , c , e ) , ( b , d , f ) )

or

 a c e
 b d f

The a, c, b and d control transformations such as skew, rotate and scale; e and f control translation.

These matrices are best built up by starting with the identity matrix and applying any number of *T functions (see below); for example,

myTransform =
    ident
        |> scaleT 2 2
        |> rotateT (degrees 30)
        |> moveT (0, 50)

The identity or "starting" matrix. Applying this matrix to a shape is the equivalent of doing no transformations at all. The matrix itself looks like

ident = ( ( 1 , 0 , 0 ) , ( 0 , 1 , 0 ) )

or,

 1 0 0
 0 1 0

Apply a move (translation) transformation to a transformation matrix. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)

Apply a rotation transformation to a transformation matrix. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)
    |> rotateT (degrees -30)

Apply a scale transformation to a transformation matrix. The first argument scales in x and the second argument scales in y. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)
    |> rotateT (degrees -30)
    |> scaleT 4 0.4

Apply a skew transformation to a matrix. The first argument skews in x and the second argument skews in y. This is designed to be used as part of a pipe:

ident
    |> moveT (15,-30.5)
    |> rotateT (degrees -30)
    |> scaleT 4 0.4
    |> skewT 0.5 1.3

Apply a rotation about a given point to a Transform matrix. For example, the following transform will rotate a Shape 30 degrees about the point (0,50):

rotateAbout050 =
    ident
        |> rotateAboutT (0, 50) (degrees 30)

Manually transform a shape using a Transform matrix. Matrix multiplication will be used to apply the given matrix to any transformations of the current shape. This is designed to be used in the usual way in a pipe:

circle 10
    |> filled red
    |> transform moveLeft50

moveLeft50 =
    ident
        |> moveT (50,0)

NOTE: Transformations generated using pipes this way are applied backwards compared to the "regular" Shape userMsg transformation functions. For example, rect0 and rect1 below are equivalent:

myTransform =
    ident
        |> scaleT 2 2
        |> rotateT (degrees 30)
        |> moveT (0, 50)

rect0 =
    rect 20 10
        |> filled red
        |> transform myTransform

rect1 =
    rect 20 10
        |> filled red
        |> move (0, 50)
        |> rotate (degrees 30)
        |> scale 2

On the other hand, single transformations produce a result consistent with the Shape userMsg transformations. rect2 is also equivalent to the two above:

moveRight50 =
    ident
        |> moveT (50,0)

scale2 =
    ident
        |> scaleT 2 2

rotate30 =
    ident
        |> rotateT (degrees 30)

rect2 =
    rect 20 10
        |> filled red
        |> transform moveRight50
        |> transform scale2
        |> transform rotate30

However, chaining together transformations in this way is discouraged because it is less efficient than the regular Shape userMsg transformations in the "Transformations" section.

The Msg type encapsulates all GraphicSVG internal messages.

This type is only used to define type signature fors user defined view and main as follows:

view : GraphicSVG.Collage (GraphicSVG.Msg Msg)

for use with graphicsApp and notificationsApp, and as follows:

view : Model -> GraphicSVG.Collage (GraphicSVG.Msg Msg)

for use with gameApp.

It is also used to define the type signature for a user supplied main as follows:

main : Program Never (GraphicsModel Model Msg) (GraphicSVG.Msg Msg)

for use with graphicsApp and notificationsApp, and as follows:

main : Program Never (GamesModel Model Msg) (GraphicSVG.Msg Msg)

for use when main calls gameApp

These assume that Model is the type alias of the user persistent model, and Msg is the name of the user message type.

Create Svg from a Shape. This is considered an advanced function and is usually not used. Instead, use collage as part of a regular GraphicSVG app or create a widget with GraphicSVG.Widget.