lunes, 7 de diciembre de 2015

LED is my new Hello World - Elm Time

So...as promised...here's my LED Numbers app written in Elm -:)

Now...this took me more time than expected, due to a couple of things...

a) Elm likes to handle Just and Maybe values...Haskell does the same...but Haskell provide alternative functions that deal with Just and Maybe...Elm does not...so I need to come up with some functions for it...

b) Elm doesn't provide a function to get elements from a list...so I need to build the function...

c) I'm still an Elm newbie

That put aside...Elm is still awesome and I love it -;)

Anyway...let's get to work...

Create an folder called LED_Numbers and type this into the terminal...

elm package install evancz/elm-html

elm package install evancz/start-app

Then, open your favorite editor and copy and paste the code...

LED_Numbers.elm
module LED_Numbers where

import Html exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import StartApp.Simple as StartApp
import String exposing (toInt,toList)
import Dict

--MODEL
type alias Model =
  { 
    number: String,
    leds: Dict.Dict Char (List String),
    line: String
  }

initialModel: Model
initialModel = 
  {
    number = "",
    leds = Dict.fromList[('0',[" _  ","| | ","|_| "]),('1',["  ","| ","| "]),
                         ('2',[" _  "," _| ","|_  "]),('3',["_  ","_| ","_| "]),
                         ('4',["    ","|_| ","  | "]),('5',[" _  ","|_  "," _| "]),
                         ('6',[" _  ","|_  ","|_| "]),('7',["_   "," |  "," |  "]),
                         ('8',[" _  ","|_| ","|_| "]),('9',[" _  ","|_| "," _| "])],
    line = ""
  }

--UPDATE
fromJust : Maybe a -> a
fromJust x = case x of
  Just y -> y
  Nothing -> Debug.crash ""

fromMaybe : Maybe (List String) -> List String
fromMaybe x = case x of
  Just y -> y
  Nothing -> Debug.crash ""

fromMaybeChar : Maybe Char -> Char
fromMaybeChar x = case x of
  Just y -> y
  Nothing -> Debug.crash ""

get_elem : List a -> Int -> Maybe a
get_elem lst n =
  List.head (List.drop n lst)

fromMaybeListChar : Maybe (List Char) -> List Char
fromMaybeListChar x = case x of
  Just y -> y
  Nothing -> Debug.crash ""

get_list: String -> List Char
get_list str =
  String.toList str

type Action = NoOp | Submit | UpdateNumber String

update: Action -> Model -> Model
update action model =
  case action of
    NoOp ->
      model
    UpdateNumber contents ->
      { model | number = contents }  
    Submit ->
      { model | 
          line = get_led (get_list model.number) 0 model,
          number = ""
      }

get_led: List Char -> Int -> Model -> String
get_led lst n model =
  if List.length lst > 0
  then let h = fromMaybeChar(List.head lst)
           t = fromMaybeListChar(List.tail lst)
           leds = model.leds
           line = Dict.get h leds
       in fromJust(get_elem (fromMaybe line) n) ++ get_led t n model
  else if n < 2
  then "" ++ "\n" ++ get_led (get_list model.number) (n+1) model
  else if n == 2
  then "" ++ "\n"
  else ""

--VIEW
buttonStyle: Attribute
buttonStyle = 
  style
    [ ("outline", "none"),
      ("border", "none"),
      ("border-radius","4px"),
      ("margin-right","5px"),
      ("padding","4px 10px"),
      ("background","#61a1bc"),
      ("color","#fff")
    ]

divStyle: Attribute
divStyle = 
  style
    [ ("margin", "50px auto"),
      ("padding", "0px 50px"),
      ("text-align", "center")
    ]

pStyle: Attribute
pStyle = 
  style
    [ ("font-size", "30px") ]

pageHeader : Html
pageHeader = 
  h1 [ ] [text "LED Numbers"]

view: Signal.Address Action -> Model -> Html
view address model = 
  div [ divStyle ]
    [ pageHeader,
      input
        [ 
          type' "text",
          name "number",
          placeholder "Enter a number",
          value model.number,
          on "input" targetValue (\v -> Signal.message address (UpdateNumber v))
        ]
        [ ],
      button [ buttonStyle, onClick address Submit ] [ text "Submit" ],
      pre [ pStyle ]
          [ text (model.line) ]
    ]
    
main: Signal Html
main = 
  StartApp.start { model = initialModel, view = view, update = update }

Go into the terminal again and type this...

elm make LED_Numbers.elm --output LED_Numbers.html

Open the file in your browser and run it...



Hope you like it -;)

Greetings,

Blag.
Development Culture.

jueves, 3 de diciembre de 2015

My first post on Elm

Looking through my list of new languages to learn...I came upon Elm...functional reactive programming in the browser...


Isn't that cool? Of course it is -:)

Now...Elm came to life around 2012...so it's fairly new...which means not some many tutorials and no books that I know of...but...don't let that scare you away...there's actually a couple of awesome courses handled by The Pragmatic Studio that will help you to get up and running -;)

Elm: Building Reactive Web Apps

Elm: Signals, Mailboxes & Ports

Now...to install Elm...if you have NodeJS already installed then you can simply use npm which is I guess the preferred and easier way...

sudo npm install elm

Otherwise just go the download section for the installers or for the source code to build it...but keep in mind that to build it you will need to have Haskell installed as well...

Anyway...we're going to see how to create a Fibonacci List app in Elm... -:)

Create a folder a call it "Fibonacci_App" and the go into it from the terminal...

elm package install evancz/elm-html



elm package install evancz/start-app



The first package is going allow us to generate HTML code and the second one is going to make our lives easier...

Now...open your favorite editor and type this away...

Fibonacci.elm
module Fibonacci where

import Html exposing (..)
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import StartApp.Simple as StartApp
import String exposing (toInt)

--MODEL
type alias Model =
  { 
    number: String,
    fibonacci: String
  }

initialModel: Model
initialModel = 
  {
    number = "",
    fibonacci = ""
  }

--UPDATE
parseInt : String -> Int
parseInt string =
  case String.toInt string of
    Ok value ->
      value
    Err error ->
      0

type Action = NoOp | Submit | UpdateNumber String

update: Action -> Model -> Model
update action model =
  case action of
    NoOp ->
      model
    UpdateNumber contents ->
      { model | number = contents }  
    Submit ->
      { model | 
          fibonacci = fib (parseInt model.number) 0 1,
          number = ""
      }

fib: Int -> Int -> Int -> String
fib num a b =
  if a > 0 && num > 1 then toString(a+b) ++ " " ++ fib (num-1) (a+b) a
  else if a == 0 then toString a ++ " " ++ toString b ++ " " 
                      ++ toString(a+b) ++ " " ++ fib(num-1) (a+b) b
  else ""

--VIEW
buttonStyle: Attribute
buttonStyle = 
  style
    [ ("outline", "none"),
      ("border", "none"),
      ("border-radius","4px"),
      ("margin-right","5px"),
      ("padding","4px 10px"),
      ("background","#61a1bc"),
      ("color","#fff")
    ]

divStyle: Attribute
divStyle = 
  style
    [ ("margin", "50px auto"),
      ("padding", "0px 50px"),
      ("text-align", "center")
    ]

pStyle: Attribute
pStyle = 
  style
    [ ("font-size", "30px") ]

pageHeader : Html
pageHeader = 
  h1 [ ] [text "Fibonacci List"]

view: Signal.Address Action -> Model -> Html
view address model = 
  div [ divStyle ]
    [ pageHeader,
      input
        [ 
          type' "text",
          name "number",
          placeholder "Enter a number",
          value model.number,
          on "input" targetValue (\v -> Signal.message address (UpdateNumber v))
        ]
        [ ],
      button [ buttonStyle, onClick address Submit ] [ text "Submit" ],
      p [ pStyle ]
        [ text (model.fibonacci) ]
    ]
    
main: Signal Html
main = 
  StartApp.start { model = initialModel, view = view, update = update }

Now, we just need to compile our application -;)

elm make Fibonacci.elm --output Fibonaccci.html



Now, we can just open that Fibonacci.html file and test our app -:D



Hope you like it -:) I will try to get my LED_Numbers app ready soon -;)

Greetings,

Blag.
Development Culture.