A library for creating SVG graphics in a way that is compatible with Elm's old Graphics library. Also includes built-in functions for creating games and other applications including keyboard presses and mouse movements.
Secret.Stencil
A filled, outlined, or filled and outlined object that can be drawn to the screen using collage
.
Secret.Shape userMsg
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).
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.
Collage userMsg
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.
collage : Basics.Float -> Basics.Float -> List (Shape userMsg) -> Collage userMsg
Creates a blank canvas on which you can draw. Takes a width, height and a
list of Shape
s. Use this in your view
functions in the three types of Apps above:
collage 500 500
[
circle 10 |> filled red
]
mapCollage : (a -> b) -> Collage a -> Collage b
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.)
Platform.Program flags ( userModel
, HiddenModel ) (Msg userMsg
}
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.
app : { init : flags -> Url -> Browser.Navigation.Key -> ( userModel, Platform.Cmd.Cmd userMsg ), update : userMsg -> userModel -> ( userModel, Platform.Cmd.Cmd userMsg ), view : userModel -> { title : String, body : Collage userMsg }, subscriptions : userModel -> Platform.Sub.Sub userMsg, onUrlRequest : Browser.UrlRequest -> userMsg, onUrlChange : Url -> userMsg } -> App flags userModel userMsg
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
.
Platform.Program flags ( userModel
, HiddenModel ) (Msg userMsg
}
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.
ellieApp : { init : flags -> ( userModel, Platform.Cmd.Cmd userMsg ), update : userMsg -> userModel -> ( userModel, Platform.Cmd.Cmd userMsg ), view : userModel -> { title : String, body : Collage userMsg }, subscriptions : userModel -> Platform.Sub.Sub userMsg } -> EllieApp flags userModel userMsg
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.
line : ( Basics.Float, Basics.Float ) -> ( Basics.Float, Basics.Float ) -> Stencil
Create a line from a point to a point. Use outlined
to convert to a viewable
Shape
.
polygon : List ( Basics.Float, Basics.Float ) -> Stencil
Create a closed shape given a list of points. Can use outlined
or filled
to
convert to a Shape
.
openPolygon : List ( Basics.Float, Basics.Float ) -> Stencil
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
.
ngon : Basics.Int -> Basics.Float -> Stencil
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
triangle : Basics.Float -> Stencil
Synonym for ngon 3
. Creates a triangle with a given size.
rightTriangle : Basics.Float -> Basics.Float -> Stencil
Creates a right-angled triangle with a given base and height.
isosceles : Basics.Float -> Basics.Float -> Stencil
Creates an isosceles triangle with a given base and height.
sideAngleSide : Basics.Float -> Basics.Float -> Basics.Float -> Stencil
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.
square : Basics.Float -> Stencil
Creates a square with a given side length. (Synonym for rect s s
)
rect : Basics.Float -> Basics.Float -> Stencil
Creates a rectangle with a given width and height.
rectangle : Basics.Float -> Basics.Float -> Stencil
Synonym for rect
.
roundedRect : Basics.Float -> Basics.Float -> Basics.Float -> Stencil
Creates a rectangle with a given width, height, and circular rounded corners with the given radius.
circle : Basics.Float -> Stencil
Creates a circle with a given radius.
oval : Basics.Float -> Basics.Float -> Stencil
Creates an oval with a given width and height.
wedge : Basics.Float -> Basics.Float -> Stencil
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
filled : Color -> Stencil -> Shape userMsg
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
outlined : LineType -> Color -> Stencil -> Shape userMsg
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 : Color -> Shape userMsg -> Shape userMsg
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
addOutline : LineType -> Color -> Shape userMsg -> Shape userMsg
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
rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color
Define a colour given its red, green and blue components.
rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
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.
hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color
Define a colour given its hue, saturation and light components.
hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color
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.
group : List (Shape userMsg) -> Shape userMsg
Combine any number of Shape
types into one Shape
that can be
transformed (moved, rotated, scaled, etc) as one Shape
.
This feature is still very much experimental. Cross-platform support is not guaranteed and weird things can happen.
html : Basics.Float -> Basics.Float -> Html userMsg -> Shape userMsg
Display HTML inside an SVG foreignObject.
Secret.Pull
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.
curve : ( Basics.Float, Basics.Float ) -> List Pull -> Stencil
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 Pull
s as you want to
add additional curve segments, but each curve segment can only bend one way, since it is pulled in one direction.
curveHelper : Shape userMsg -> Shape userMsg
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
Secret.LineType
The LineType
type is used to define the appearance of an outline for a Stencil
.
LineType
also defines the appearence of line
and curve
.
noline : () -> LineType
Define aLineType
that doesn't exist, doesn't appear.
solid : Basics.Float -> LineType
Define a solid LineType
with the given width.
dotted : Basics.Float -> LineType
Define a dotted LineType
with the given width.
dashed : Basics.Float -> LineType
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.
longdash : Basics.Float -> LineType
Define a dashed LineType
with the given width, where the dashes are longer than normal.
dotdash : Basics.Float -> LineType
Define a LineType
with the given width, including alternating dots and dashes.
custom : List ( Basics.Float, Basics.Float ) -> Basics.Float -> LineType
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
text : String -> Stencil
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
size : Basics.Float -> Stencil -> Stencil
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.
bold : Stencil -> Stencil
Apply to a text
Stencil
to make the text bold.
italic : Stencil -> Stencil
Apply to a text
Stencil
to make the text italicized (slanted).
underline : Stencil -> Stencil
Apply to a text
Stencil
to underline the text.
strikethrough : Stencil -> Stencil
Apply to a text
Stencil
to put a line through the centre of the text.
centered : Stencil -> Stencil
Apply to a text
Stencil
to centre the text.
alignLeft : Stencil -> Stencil
Apply to a text
Stencil
to left-align the text.
alignRight : Stencil -> Stencil
Apply to a text
Stencil
to right-align the text.
selectable : Stencil -> Stencil
Apply to a text
Stencil
to make the text selectable (so users can copy your text and paste it elsewhere).
sansserif : Stencil -> Stencil
Apply to a text
Stencil
to render the text with a Sans Serif font (ie one without thinner and thicker bits).
serif : Stencil -> Stencil
Apply to a text
Stencil
to render the text with a Serif font (ie one with thinner and thicker bits).
fixedwidth : Stencil -> Stencil
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.
customFont : String -> Stencil -> Stencil
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 : ( Basics.Float, Basics.Float ) -> Shape userMsg -> Shape userMsg
Move a Shape
by a number of units along the x-axis and y-axis.
rotate : Basics.Float -> Shape userMsg -> Shape userMsg
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 : Basics.Float -> Shape userMsg -> Shape userMsg
Scale a Shape
by a given factor.
scaleX : Basics.Float -> Shape userMsg -> Shape userMsg
Scale a Shape
in the x-axis by a given factor.
scaleY : Basics.Float -> Shape userMsg -> Shape userMsg
Scale a Shape
in the y-axis by a given factor.
mirrorX : Shape userMsg -> Shape userMsg
Flip a Shape
along the x-axis.
mirrorY : Shape userMsg -> Shape userMsg
Flip a Shape
along the y-axis.
skewX : Basics.Float -> Shape userMsg -> Shape userMsg
Skew a Shape
along the x-axis.
skewY : Basics.Float -> Shape userMsg -> Shape userMsg
Skew a Shape
along the y-axis.
clip : Shape userMsg -> Shape userMsg -> Shape userMsg
Clipping to a shape
Cut out the Shape
on the right using the Shape
on the left.
union : Shape userMsg -> Shape userMsg -> Shape userMsg
Shape union
Combine two Shape
s together into one to use with clip.
subtract : Shape userMsg -> Shape userMsg -> Shape userMsg
Shape subtraction
Subtract the Shape
on the left from the Shape
on the right.
outside : Shape userMsg -> Shape userMsg
The whole region outside the given Shape
.
ghost : Stencil -> Shape userMsg
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
.
notifyTap : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when a Shape
is clicked or tapped.
notifyTapAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the mouse or finger when the Shape
is clicked or tapped.
notifyEnter : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when the mouse enters a Shape
.
notifyEnterAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the mouse when the mouse enters a Shape
.
notifyLeave : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when the mouse leaves a Shape
.
notifyLeaveAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the mouse when the mouse leaves a Shape
.
notifyMouseMoveAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the mouse when the mouse is moved across a Shape
.
notifyMouseDown : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when the mouse button is pressed while the cursor is over a Shape
.
notifyMouseDownAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
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
.
notifyMouseUp : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when the mouse button is released while the cursor is over a Shape
.
notifyMouseUpAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
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
.
notifyTouchStart : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when the user begins touching a Shape
.
notifyTouchStartAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the user's finger when the user begins touching a Shape
.
notifyTouchEnd : userMsg -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) when the user lifts their finger off a Shape
.
notifyTouchEndAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the user's finger when the user lifts their finger off a Shape
.
notifyTouchMoveAt : (( Basics.Float, Basics.Float ) -> userMsg) -> Shape userMsg -> Shape userMsg
Receive a message (userMsg
) with the x and y position of the user's finger when the user moves their finger over a Shape
.
makeTransparent : Basics.Float -> Shape userMsg -> Shape userMsg
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)
addHyperlink : String -> Shape userMsg -> Shape userMsg
Add a hyperlink to any Shape
:
circle 10
|> filled red
|> addHyperlink "http://outreach.mcmaster.ca"
puppetShow : Basics.Float -> Basics.Float -> List ( Basics.Float, Shape userMsg ) -> List (Shape userMsg)
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.
graphPaper : Basics.Float -> Shape userMsg
Creates a graph paper with squares of a given size.
graphPaperCustom : Basics.Float -> Basics.Float -> Color -> Shape userMsg
Creates graph paper with squares of a given size, with a user-defined thickness and colour.
map : (a -> b) -> Shape a -> Shape b
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.)
Secret.Color
The Color
type is used for filling or outlining a Stencil
.
black : Color
blank : Color
blue : Color
brown : Color
charcoal : Color
darkBlue : Color
darkBrown : Color
darkCharcoal : Color
darkGray : Color
darkGreen : Color
darkGrey : Color
darkOrange : Color
darkPurple : Color
darkRed : Color
darkYellow : Color
gray : Color
green : Color
grey : Color
hotPink : Color
lightBlue : Color
lightBrown : Color
lightCharcoal : Color
lightGray : Color
lightGreen : Color
lightGrey : Color
lightOrange : Color
lightPurple : Color
lightRed : Color
lightYellow : Color
orange : Color
pink : Color
purple : Color
red : Color
white : Color
yellow : Color
Secret.Gradient
A type representing radial and linear gradients.
Secret.Stop
A type representing stops in a gradient. Consists of one constructor with inputs for the position, transparency and colour.
stop : Color -> Basics.Float -> Stop
A colour stop in a gradient. This takes a colour and a position.
transparentStop : Color -> Basics.Float -> Basics.Float -> Stop
A colour stop with transparency.
gradient : List Stop -> Color
Create a linear gradient from a list of colour stops.
radialGradient : List Stop -> Color
Create a radial gradient from a list of colour stops.
rotateGradient : Basics.Float -> Color -> Color
Rotate a linear gradient by a certain angle in radians.
Advanced section warning! These functions provide a way to interface on a lower level to the transformations normally handled in the background by GraphicSVG. Most users should be happy to use the regular functions applied directly to shapes, which are provided in the section above this one.
Secret.Transform
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)
ident : Transform
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
moveT : ( Basics.Float, Basics.Float ) -> Transform -> Transform
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)
rotateT : Basics.Float -> Transform -> Transform
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)
scaleT : Basics.Float -> Basics.Float -> Transform -> Transform
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
skewT : Basics.Float -> Basics.Float -> Transform -> Transform
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
rotateAboutT : ( Basics.Float, Basics.Float ) -> Basics.Float -> Transform -> Transform
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)
transform : Transform -> Shape userMsg -> Shape userMsg
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.
Don't worry about these unless you really know what you're doing!
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.
createSVG : String -> Basics.Float -> Basics.Float -> Transform -> (a -> b) -> ((( Basics.Float, Basics.Float ) -> a) -> ( Basics.Float, Basics.Float ) -> b) -> Shape a -> Svg b
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.