IElm examples

Aliases.ielm

import List

type alias Foo = List Int

bar : Foo
bar = [ 2, 3, 4 ]

bar

type alias Test = {
  a: Int,
  b: Int
}

foo : Test
foo = { a = 1, b = 2 }

foo

AllTypes.ielm

import List
import Array

a : Int -> Int -> Int
a b c = b + c

"foo"

"foobar"

'a'

a

0.3

17

type alias Test = {
  a: Int,
  b: Int
}

b : Test
b = { a = 1, b = 2 }

b

List.map (\n -> n - 1) [ 1, 2, 3 ]

origin : { x : Float, y : Float }
origin =
  { x = 0
  , y = 0
  }

origin

( 1, 2 )

( "a", [ 2, 6, 5 ])

( "a", Array.fromList [ 2, 6, 5 ])

type alias Test2 = ( String, String )

c : Test2
c = ( "a", "b" )

c

Arrays.ielm

import Array

Array.fromList (List.map (\n -> n - 1) [ 1, 2, 3 ])

Array.fromList [ "a", "b", "c" ]

Array.fromList [ [ 1, 2 ], [ 3, 4 ] ]

Basics.ielm

"foo"

"foobar"

0.3

17

'a'

Clock.ielm

-- Read more about this program in the official Elm guide:
-- https://guide.elm-lang.org/architecture/effects/time.html

import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)



main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model = Time


init : (Model, Cmd Msg)
init =
  (0, Cmd.none)



-- UPDATE


type Msg
  = Tick Time


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Tick newTime ->
      (newTime, Cmd.none)



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Time.every second Tick



-- VIEW


view : Model -> Html Msg
view model =
  let
    angle =
      turns (Time.inMinutes model)
    handX =
      toString (50 + 40 * cos angle)
    handY =
      toString (50 + 40 * sin angle)
  in
    svg [ viewBox "0 0 100 100", width "300px" ]
      [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
      , line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] []
      ]

Collage.2.ielm

import Html exposing (Html)
import List exposing (..)
import Color exposing (..)
import Element exposing (..)
import Collage exposing (..)

makeSquareOutlined : Color.Color -> Float -> Collage.Form
makeSquareOutlined color size =
    square size
    |> outlined (solid color)


toHtml (collage 300 300
    [makeSquareOutlined blue 50])


test : Float -> Html a
test n =
    toHtml (collage 300 300
        [makeSquareOutlined blue n])


test


triangle : Color -> Float -> Float -> Int -> Form
triangle color size angle gon =
     ngon gon size
     |> filled color
     |> rotate (degrees angle)


shape : Color -> Float -> Float -> Int -> Float -> Float -> Int -> List Form
shape color size1 rot1 gon1 size2 rot2 gon2 = map3 (triangle color) [size1,size2] [rot1,rot2] [gon1,gon2]


collage 300 300 (shape blue 100 30 3 100 90 3) |> toHtml


controlShape1 : Float -> Float -> Html a
controlShape1 rot1 rot2 =
    collage 300 300 (shape blue 100 rot1 3 100 rot2 3) |> toHtml


controlShape2 : Int -> Int -> Float -> Float -> Html a
controlShape2 gon1 gon2 rot1 rot2  =
    collage 300 300 (shape blue 100 rot1 gon1 100 rot2 gon2) |> toHtml


controlShape1


controlShape2

Collage.ielm

import Html exposing (Html)
import List exposing (..)
import Color exposing (..)
import Element exposing (..)
import Collage exposing (..)

makeSquareOutlined : Color.Color -> Float -> Collage.Form
makeSquareOutlined color size =
    square size
    |> outlined (solid color)


toHtml (collage 300 300
    [makeSquareOutlined blue 50])


test : Float -> Html a
test n =
    toHtml (collage 300 300
        [makeSquareOutlined blue n])


test


triangle : Color -> Float -> Float -> Form
triangle color size angle =
     ngon 3 size
     |> filled color
     |> rotate (degrees angle)


star : Color -> List Form
star color = map2 (triangle color) [100,100] [30, 90]


collage 300 300 (star blue) |> toHtml

Controls.ielm

a : Int -> Int -> Int
a b c =
    b + c

a

a 10

a 10 15

concatStrings : String -> String -> String
concatStrings s1 s2 = s1 ++ s2

concatStrings "f" "t"

concatStrings "f"

concatStrings

sumLengths : String -> String -> Int
sumLengths s1 s2 = String.length s1 + String.length s2

sumLengths "foo" "bar"

sumLengths "foo"

sumLengths

ControlsWebGL.ielm

import AnimationFrame
import Html exposing (Html)
import Html.Attributes exposing (width, height, style)
import Math.Matrix4 as Mat4 exposing (Mat4)
import Math.Vector3 as Vec3 exposing (vec3, Vec3)
import Time exposing (Time)
import WebGL exposing (Mesh, Shader)


main : Program Never Time Time
main =
    Html.program
        { init = ( 0, Cmd.none )
        , view = view
        , subscriptions = (\model -> AnimationFrame.diffs Basics.identity)
        , update = (\elapsed currentTime -> ( elapsed + currentTime, Cmd.none ))
        }


view : Float -> Html msg
view t =
    WebGL.toHtml
        [ width 400
        , height 400
        , style [ ( "display", "block" ) ]
        ]
        [ WebGL.entity
            vertexShader
            fragmentShader
            mesh
            { perspective = perspective (t / 1000) }
        ]


perspective : Float -> Mat4
perspective t =
    Mat4.mul
        (Mat4.makePerspective 45 1 0.01 100)
        (Mat4.makeLookAt (vec3 (4 * cos t) 0 (4 * sin t)) (vec3 0 0 0) (vec3 0 1 0))



-- Mesh


type alias Vertex =
    { position : Vec3
    , color : Vec3
    }


mesh : Mesh Vertex
mesh =
    WebGL.triangles
        [ ( Vertex (vec3 0 0 0) (vec3 1 0 0)
          , Vertex (vec3 1 1 0) (vec3 0 1 0)
          , Vertex (vec3 1 -1 0) (vec3 0 0 1)
          )
        ]



-- Shaders


type alias Uniforms =
    { perspective : Mat4 }


vertexShader : Shader Vertex Uniforms { vcolor : Vec3 }
vertexShader =
    [glsl|
        attribute vec3 position;
        attribute vec3 color;
        uniform mat4 perspective;
        varying vec3 vcolor;
        void main () {
            gl_Position = perspective * vec4(position, 1.0);
            vcolor = color;
        }
    |]


fragmentShader : Shader {} Uniforms { vcolor : Vec3 }
fragmentShader =
    [glsl|
        precision mediump float;
        varying vec3 vcolor;
        void main () {
            gl_FragColor = vec4(vcolor, 1.0);
        }
    |]

view


(\n a -> n * a * 10 |> view)

CustomMsgSvg.ielm

-- Read more about this program in the official Elm guide:
-- https://guide.elm-lang.org/architecture/effects/time.html

import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)

import Component.Cell exposing (Action(..))



main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model = Time


init : (Model, Cmd Msg)
init =
  (0, Cmd.none)



-- UPDATE


type Msg
  = Tick Time


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Tick newTime ->
      (newTime, Cmd.none)



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Time.every second Tick



-- VIEW


view : Float -> Html Msg
view model =
  let
    angle =
      turns (Time.inMinutes model)
    handX =
      toString (50 + 40 * cos angle)
    handY =
      toString (50 + 40 * sin angle)
  in
    svg [ viewBox "0 0 100 100", width "300px" ]
      [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
      , line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] []
      ]


(\f -> view (f * 1000) |> Html.map (\_ -> NoOp))


view

Destructuring.ielm

foo : Int -> { x: Int, y: Int } -> String
foo i { x, y } =
    toString ( i + x + y)

foo

foo 5

foo 5 { x = 10, y = 20 }

bar i { x, y } =
    toString ( i + x + y)

bar

Functions.ielm

a : Int -> Int -> Int
a b c = b + c

a

Html.ielm

import Html

Html.div [] []

Html.span [] [Html.text "Test"]

Lists.ielm

import List

List.map (\n -> n - 1) [ 1, 2, 3 ]

[ "a", "b", "c" ]

[ [ 1, 2 ], [ 3, 4 ] ]

[ [ [ "f" ], [ "o", "o" ] ], [ [ "b" ], [ "a", "r" ] ] ]

type alias Foo = List Int

bar : Foo
bar = [ 2, 3, 4 ]

bar

[ 'a', 'b' ] ++ [ 'c' ]

Maybes.ielm

type alias Test =
    { a: Int
    , b: String
    }

foo : Test
foo = { a = 1, b = "f" }

foo

Just foo

Nothing

Ok foo

Err foo

Err "Error with Message"

type TestApp e x f = TestApp e x f

a : TestApp String Int Test
a = TestApp "f" 2 { a = 3, b = "c" }

a

t : Float -> Int -> Maybe (Float, Int)
t n z = Just ( n, z )

t

Meshes.ielm

import Math.Vector3 as Vec3 exposing (vec3, Vec3)
import WebGL exposing (Mesh)

type alias Vertex =
    { position : Vec3
    , color : Vec3
    }


mesh : Mesh Vertex
mesh =
    WebGL.triangles
        [ ( Vertex (vec3 0 0 0) (vec3 1 0 0)
          , Vertex (vec3 1 2 0) (vec3 0 1 0)
          , Vertex (vec3 1 -1 0) (vec3 0 0 1)
          )
        ]

mesh

Present.ielm

'a'

(\n -> n * 10)

hugMe : String -> String -> String
hugMe str1 str2 =
    str1 ++ "Hi" ++ str2
    
hugMe

import Test

Test.test

Records.ielm

type alias Test = {
  a: Int,
  b: Int
}

b : Test
b = { a = 1, b = 2 }

b

origin : { x : Float, y : Float }
origin =
  { x = 0
  , y = 0
  }

origin

{ foo = [ 'a', 'b', 'c' ]
, bar = "abc"
}

Sets.ielm

import Set

type alias Foo = Set.Set Int

bar : Foo
bar = Set.fromList [ 2, 3, 4, 4, 2 ]

bar

SVG.ielm

import Html exposing (Html)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)


view : Time -> Html msg
view model =
  let
    angle =
      turns (Time.inMinutes model)
    handX =
      toString (50 + 40 * cos angle)
    handY =
      toString (50 + 40 * sin angle)
  in
    svg [ viewBox "0 0 100 100", width "300px" ]
      [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
      , line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] []
      ]


view 0


svg [ ]
    [ Svg.path [ d "M 25,100 C 25,150 75,150 75,100 S 100,25 150,75", stroke "#023963", fill "transparent", strokeWidth "5", transform "rotate(-30)" ] []
    ]


(\f -> view (f * 1000))

Tasks.ielm

import Task

Task.succeed 42

Task.fail "Foo"

Tuples.ielm

import Array

( 1, 2 )

( "a", [ 2, 6, 5 ])

( "a", Array.fromList [ 2, 6, 5 ])

type alias Test2 = ( String, String )

c : Test2
c = ( "a", "b" )

( "a", "b", "c" )

[ (1, 'a'), (2, 'b') ]

[ (1, 'a'), (2, 'b'), (3, 'c') ]

c

Unions.ielm

type FF = T1 | T2 Int String | T3 String | T4 { a: Int, b: String }

type FFI = TI1 | TI2 Int | TI3 String | TI4 FFI

a =
    T1

b =
    T2 2 "a"

c =
    T3 "f"

a

b

c

d =
    TI4 (TI3 "c")

d

e =
    T4 { a = 3, b = "x" }

e

toString d

WebGL.ielm

import AnimationFrame
import Html exposing (Html)
import Html.Attributes exposing (width, height, style)
import Math.Matrix4 as Mat4 exposing (Mat4)
import Math.Vector3 as Vec3 exposing (vec3, Vec3)
import Time exposing (Time)
import WebGL exposing (Mesh, Shader)
import Component.ThreeDViewer exposing (icosahedron, defaultVertexShader, defaultFragmentShader)

main : Program Never Time Time
main =
    Html.program
        { init = ( 0, Cmd.none )
        , view = view
        , subscriptions = (\model -> AnimationFrame.diffs Basics.identity)
        , update = (\elapsed currentTime -> ( elapsed + currentTime, Cmd.none ))
        }


view : Float -> Html msg
view t =
    WebGL.toHtml
        [ width 400
        , height 400
        , style [ ( "display", "block" ) ]
        ]
        [ WebGL.entity
            vertexShader
            fragmentShader
            mesh
            { perspective = perspective (t / 1000) }
        ]


perspective : Float -> Mat4
perspective t =
    Mat4.mul
        (Mat4.makePerspective 45 1 0.01 100)
        (Mat4.makeLookAt (vec3 (4 * cos t) 0 (4 * sin t)) (vec3 0 0 0) (vec3 0 1 0))



-- Mesh


type alias Vertex =
    { position : Vec3
    , color : Vec3
    }


mesh : Mesh Vertex
mesh =
    WebGL.triangles
        [ ( Vertex (vec3 0 0 0) (vec3 1 0 0)
          , Vertex (vec3 1 1 0) (vec3 0 1 0)
          , Vertex (vec3 1 -1 0) (vec3 0 0 1)
          )
        ]



-- Shaders


type alias Uniforms =
    { perspective : Mat4 }


vertexShader : Shader Vertex Uniforms { vcolor : Vec3 }
vertexShader =
    [glsl|
        attribute vec3 position;
        attribute vec3 color;
        uniform mat4 perspective;
        varying vec3 vcolor;
        void main () {
            gl_Position = perspective * vec4(position, 1.0);
            vcolor = color;
        }
    |]


fragmentShader : Shader {} Uniforms { vcolor : Vec3 }
fragmentShader =
    [glsl|
        precision mediump float;
        varying vec3 vcolor;
        void main () {
            gl_FragColor = vec4(vcolor, 1.0);
        }
    |]

view 790

perspective 790

mesh

icosahedron

WebGL.entity vertexShader fragmentShader mesh { perspective = perspective 790 }

WebGL.entity defaultVertexShader defaultFragmentShader icosahedron { perspective = perspective 20 }