Elm FEP Talk

counter-full.elm

module Main where
import Html exposing (div,button,Html,text,Attribute)
import Html.Events exposing(onClick)
import Html.Attributes exposing (style)
import StartApp.Simple exposing (start)


type alias Model = Int

type Action = Increment | Decrement

view : Signal.Address Action -> Model -> Html
view address model = 
  div []
    [ button [ onClick address Decrement] [ text "-" ]
    , div [ countStyle ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]

update : Action -> Model -> Model
update action model = 
  case action of
    Increment -> model + 1
    Decrement -> model - 1
    

countStyle : Attribute
countStyle =
  style
    [ ("font-size", "20px")]

main =
 start {model = 0, update = update, view = view}

fetch-readme.elm

import Http
import Markdown
import Html exposing (Html)
import Task exposing (Task, andThen)


main : Signal Html
main =
  Signal.map Markdown.toHtml readme.signal


-- set up mailbox
--   the signal is piped directly to main
--   the address lets us update the signal
readme : Signal.Mailbox String
readme =
  Signal.mailbox ""


-- send some markdown to our readme mailbox
report : String -> Task x ()
report markdown =
  Signal.send readme.address markdown


-- get the readme *and then* send the result to our mailbox
port fetchReadme : Task Http.Error ()
port fetchReadme =
  Http.getString readmeUrl `andThen` report


-- the URL of the README.md that we desire
readmeUrl : String
readmeUrl =
  "https://raw.githubusercontent.com/elm-lang/core/master/README.md"

shot-clock-with-pause.elm

import Graphics.Element exposing (..)
import Time exposing (every, second)
import Mouse
import Keyboard
--import Char
import Window
import Text



{-view (w,h) time =
  toString time
    |> Text.fromString
    |> Text.height 50
    |> centered
    |> container w h middle


main = 
  Signal.map2 view Window.dimensions (Time.every Time.second)
-}

default = {
  count = 5,
  state = Active
  }

type Action = Tick | NoOp | Increase | Decrease | Reset | TogglePause

type State = Active | Paused

update action model =
  let decrease = {model | count = max 0 (model.count - 1)}
  in
    case model.state of
      Paused ->
        case action of
          TogglePause -> {model | state = Active}
          _ -> model
      Active ->
      case action of
        NoOp -> model
        Increase -> {model | count = model.count + 1}
        Tick -> decrease
        Decrease -> decrease
        Reset -> default
        TogglePause -> {model | state = Paused}

everySecond = 
  --Time.every Time.second
  Signal.map (always Tick) (Time.every Time.second)

action = Signal.merge everySecond input

clock = Signal.foldp update default action

view (w, h) {count} = 
 toString count
   |> Text.fromString
   |> Text.height 50
   |> centered
   |> container w h middle

input =
  let 
    y = Signal.map .y Keyboard.arrows
    toAction y =
      if y == 1 then Increase
      else if y == -1 then Decrease
      else NoOp
    reset = Signal.map (always Reset) Keyboard.space
    upDown = Signal.sampleOn (Time.fps 30) (Signal.map toAction y)
    pause = Signal.map (always TogglePause) Keyboard.enter
  in
    Signal.mergeMany [reset, upDown, pause]

main = Signal.map2 view(Window.dimensions) clock

shot-clock.elm

import Graphics.Element exposing (..)
import Time exposing (every, second)
import Mouse
import Keyboard
--import Color exposing (red, blue)
import Window
import Text



default = 5

type Action = Tick | NoOp | Increase | Decrease | Reset

update action model =
  case action of
    NoOp -> model
    Increase -> model + 1
    Tick -> max 0 (model - 1)
    Decrease -> max 0 (model - 1)
    Reset -> default

everySecond = 
  --Time.every Time.second
  Signal.map (always Tick) (Time.every Time.second)

action = Signal.merge everySecond input

clock = Signal.foldp update default action

view (w, h) count = 
 toString count
   |> Text.fromString
   |> Text.height 50
   |> centered
   |> container w h middle

{-   Better formatting }
view (w, h) {count} = 
 let chooseColor text =
   if count <= 5 then Text.color red text
   else Text.color blue text
 in
   toString count
     |> Text.fromString
     |> Text.height 200
     |> chooseColor
     |> centered
     |> container w h middle
--}

input =
  let 
    y = Signal.map .y Keyboard.arrows
    toAction y =
      if y == 1 then Increase
      else if y == -1 then Decrease
      else NoOp
    reset = Signal.map (always Reset) Keyboard.space
    upDown = Signal.sampleOn (Time.fps 30) (Signal.map toAction y)
  in
    Signal.mergeMany [reset, upDown]

main = Signal.map2 view(Window.dimensions) clock