Bash: Extract data from files both filtering filename, the path and doing internal processing

The following code will find all files that match the pattern 2016_*_*.log (all the log files for the year 2016).

To avoid finding log files from other services than the Web API service, we filter only the files that their path contains the folder webapi. Specifically, we used "/ServerLogs/*/webapi/*" with the following command to match all files that are under the folder /ServerLogs/ and somewhere in the path there is another folder named webapi, we do that to match files that are like /ServerLogs/Production/01/webapi/* only. The way we coded our regular expression, it will not match if there is a folder called webapi directly under the /ServerLogs/ (e.g. /ServerLogs/webapi/*).

For each result, we execute an awk script that will split the lines using the comma (FS=",";) character, then check if the line contains exactly 4 tokens (if (NF == 4) {). Later, we get the 4th token and check if it contains the substring "MASTER=" (if (match($4,"MASTER=")) {), if it does contain it we split it using the space character and assign the result to the variable named tokens. From tokens, we get the first token and use substr to remove the first character. Finally, we use the formatted result to create an array where the keys are the values we just created and it is used as a hashmap to keep record of all unique strings. In the end clause, we print all the elements of our hash map.

Finally, we sort all the results from all the awk executions and remove duplicates using sort --unique.


find /ServerLogs/ \
    -iname "2016_*_*.log" \
    -ipath "/ServerLogs/*/webapi/*" \
    -exec awk '
        BEGIN {
            FS=",";
        }
        {
            if (NF == 4) {
                if (match($4,"MASTER=")) {
                    split($4, tokens, " ");
                    instances[substr(tokens[1], 2)];
                }
            }
        }
        END {
            for (element in instances) {
                print element;
            }
        }
    ' \
    '{}' \; | sort --unique;

Following is the same code in one line.

 find /ServerLogs/ -iname "2016_*_*.log" -ipath "/ServerLogs/*/webapi/*" -exec awk 'BEGIN {FS=",";} {if (NF == 4) {if (match($4,"MASTER=")){split($4, tokens, " "); instances[substr(tokens[1], 2)];}}} END {for (element in instances) {print element;}}' '{}' \; | sort --unique 

Another way

Another way to do similar functionality would be the following


find /ServerLogs/ \
    -iname "2016_*_*.log" \
    -ipath "/ServerLogs/*/webapi/*" \
    -exec sh -c '
        grep "MASTER=" -s "$0" | awk "BEGIN {FS=\",\";} NF==4" | cut -d "," -f4 | cut -c 3- | cut -d " " -f1 | sort --unique
    ' \
    '{}' \; | sort --unique;

What we changed is the -exec part. Instead of calling a awk script, we create a new sub-shell using sh -c, then we define the source to be executed inside the single codes and we pass as the first parameter of the shell the filename that matched.

Inside the shell, we find all lines that contain the string MASTER= using the grep command. Later we filter out all lines that do not have four columns when we tokenize using the comma character using awk. Then, we get the 4th column using cut and delimiter the comma. We remove the first two characters of the input string using cut -c 3- and later we get only the first column by reusing cut and changing the delimiter to be the space character. With those results we perform a sort that eliminates duplicates and we pass the results to the parent process to perform other operations.

Following is the same code in one line


find /ServerLogs/ -iname "2016_*_*.log" -ipath "/ServerLogs/*/webapi/*" -exec sh -c 'grep "MASTER=" -s "$0" | awk "BEGIN {FS=\",\";} NF==4" | cut -d "," -f4 | cut -c 3- | cut -d " " -f1 | sort --unique' '{}' \; | sort --unique;


An Introduction to Elm Series: Solution to ‘Binary Tree’ example supplementary module ‘Queue’

In http://elm-lang.org/examples/binary-tree, we are given a basic implementation of a binary tree and we are asked to extend it in various ways.

One of the tasks asked us to traverse the tree in various ways, in order to implement the Breadth First Traversal we needed a Queue.

Following is the code that we used for the Queue that is based on this package http://package.elm-lang.org/packages/martinsk/elm-datastructures/2.0.0/Queue.

The solution that this module was used in can be found here http://bytefreaks.net/programming-2/elm/an-introduction-to-elm-series-solution-to-binary-tree-example under the -- Breadth-first section.


module Queue exposing (Queue, init, enqueue, dequeue, length, foldr, foldl, map, fromList, toList)

{-| This Module implements a simple LIFO queue

# Definition
@docs Queue

This is based on the

# Fundamentals
@docs init, enqueue, dequeue, length

# Usefull functions
@docs foldr, foldl, map, fromList, toList

-}

{-| a simple queue.
-}
type alias Queue a = (List a, List a)

{-| Creates an empty queue -}

init : Queue a
init = ([], [])


{-|Enqueue an element on a queue -}
enqueue :  a -> Queue a -> Queue a
enqueue a (inqueue, outqueue) =
  ((a::inqueue), outqueue)

{-|Dequeues an element of the end of a queue, and also returns thel
element -}

dequeue : Queue a -> (Maybe a, Queue a)
dequeue (inqueue,outqueue) =
  case outqueue of
    [] ->
      case inqueue of
        [] -> (Nothing,(inqueue, outqueue))

        (_::_) -> dequeue([], List.reverse inqueue)

    (x::xs) ->
      (Just x, (inqueue, xs))


{-| Get the length(number of elements) in the queue -}
length : Queue a -> Int
length (inqueue, outqueue) =
  let
    inqueue_len  = List.length inqueue
    outqueue_len = List.length outqueue
  in
    inqueue_len + outqueue_len

{-| Fold across a queue front ot back -}

foldr : ( a -> b -> b) -> b -> Queue a -> b
foldr f acc (inqueue, outqueue) =
  List.foldl f (List.foldr f acc inqueue) outqueue

{-| Fold across a queue back ot front -}

foldl : ( a -> b -> b) -> b -> Queue a -> b
foldl f acc (inqueue, outqueue) =
  List.foldr f (List.foldl f acc outqueue) inqueue


{-| maps from a queue of type a to a queue containing elements of type
b -}

map : (a -> b) -> Queue a -> Queue b
map f (inqueue, outqueue) =
  (List.map f inqueue, List.map f outqueue)


{-| converts a queue into a list  -}

fromList : List a -> Queue a
fromList l =
  (l, [])


{-| converts a list into a queue  -}

toList : Queue a -> List a
toList (inqueue, outqueue) =
  inqueue ++ (List.reverse outqueue)

You can download the module from here Queue.elm (compressed) (22 downloads)


An Introduction to Elm Series: Solution to ‘Binary Tree’ example

In http://elm-lang.org/examples/binary-tree, we are given a basic implementation of a binary tree and we are asked to extend it in various ways.

To implement the Breadth First Traversal, we had to use another module that acts like a Queue. The code of that Queue is available at this post http://bytefreaks.net/programming-2/elm/an-introduction-to-elm-series-solution-to-binary-tree-example-supplementary-module-queue and it is also included in the zip file with the code of this solution ( binary-tree.elm (compressed) (19 downloads) ).

Below you will find our solutions to these challenges.

{- OVERVIEW ------------------------------------------------------

   A "Tree" represents a binary tree. A "Node" in a binary tree
   always has two children. A tree can also be "Empty". Below I have
   defined "Tree" and a number of useful functions.

   This example also includes some challenge problems!

   ----------------------------------------------------------------
-}


module Main exposing (..)

import Queue exposing (Queue)
import Html exposing (Html, div, text, br)
import Html.Attributes exposing (style)


-- TREES


type Tree a
    = Empty
    | Node a (Tree a) (Tree a)


empty : Tree a
empty =
    Empty


singleton : a -> Tree a
singleton v =
    Node v Empty Empty


insert : comparable -> Tree comparable -> Tree comparable
insert x tree =
    case tree of
        Empty ->
            singleton x

        Node y left right ->
            if x > y then
                Node y left (insert x right)
            else if x < y then
                Node y (insert x left) right
            else
                tree


fromList : List comparable -> Tree comparable
fromList xs =
    List.foldl insert empty xs


depth : Tree a -> Int
depth tree =
    case tree of
        Empty ->
            0

        Node v left right ->
            1 + max (depth left) (depth right)


map : (a -> b) -> Tree a -> Tree b
map f tree =
    case tree of
        Empty ->
            Empty

        Node v left right ->
            Node (f v) (map f left) (map f right)



-- (1) Sum all of the elements of a tree.


sum : Tree number -> number
sum tree =
    case tree of
        Empty ->
            0

        Node value left right ->
            value + sum left + sum right



-- (2) Flatten a tree into a list.


flatten : Tree a -> List a
flatten tree =
    case tree of
        Empty ->
            []

        Node value left right ->
            flatten left ++ [ value ] ++ flatten right



-- (3) Check to see if an element is in a given tree.


isElement : a -> Tree a -> Bool
isElement element tree =
    case tree of
        Empty ->
            False

        Node value left right ->
            -- We short circuit the evaluation, if we find early that the element is in the tree we stop the recursion down this path.
            if value == element then
                True
            else
                isElement element left || isElement element right



{--(4) Write a general fold function that acts on trees. The fold
    function does not need to guarantee a particular order of
    traversal.--}


fold : (a -> b -> b) -> b -> Tree a -> b
fold function element tree =
    case tree of
        Node value left right ->
            function value (fold function (fold function element right) left)

        Empty ->
            element



{--(5) Use "fold" to do exercises 1-3 in one line each. The best
    readable versions I have come up have the following length
    in characters including spaces and function name:
      sum: 16
      flatten: 21
      isElement: 46
    See if you can match or beat me! Don't forget about currying
    and partial application!--}
-- The following functions are called as parameters for the fold function
-- Sum the values of all nodes in the tree


sumByFold : number -> number -> number
sumByFold elementA elementB =
    elementA + elementB



-- Flatten the tree in a pre-order fashion


flattenByFold : a -> List a -> List a
flattenByFold element list =
    [ element ] ++ list



-- Count the total number of nodes in the tree


countByFold : number -> number -> number
countByFold element count' =
    1 + count'



-- The following functions are using fold internally
-- Sum the values of all nodes in the tree


sumUsingFold : Tree number -> number
sumUsingFold =
    fold (+) 0



-- Flatten the tree in an in-order fashion


flattenUsingFold : Tree a -> List a
flattenUsingFold =
    fold (::) []



-- Checks if a certain element is in the tree


isElementUsingFold : a -> Tree a -> Bool
isElementUsingFold element =
    fold ((==) element >> (||)) False



-- (6) Can "fold" be used to implement "map" or "depth"?
-- TODO
{--(7) Try experimenting with different ways to traverse a
    tree: pre-order, in-order, post-order, depth-first, etc.
    More info at: http://en.wikipedia.org/wiki/Tree_traversal--}
-- Depth-first


preOrder : Tree a -> List a
preOrder tree =
    case tree of
        Empty ->
            []

        Node value left right ->
            [ value ] ++ preOrder left ++ preOrder right


inOrder : Tree a -> List a
inOrder tree =
    case tree of
        Empty ->
            []

        Node value left right ->
            inOrder left ++ [ value ] ++ inOrder right


postOrder : Tree a -> List a
postOrder tree =
    case tree of
        Empty ->
            []

        Node value left right ->
            postOrder left ++ postOrder right ++ [ value ]



-- Breadth-first


go : Queue (Tree a) -> List a
go queue =
    let
        ( maybe', queue' ) =
            Queue.dequeue queue
    in
        case maybe' of
            Just node ->
                case node of
                    Empty ->
                        go queue'

                    Node value left right ->
                        [ value ] ++ go (Queue.enqueue right (Queue.enqueue left queue'))

            Nothing ->
                []


levelOrder : Tree a -> List a
levelOrder tree =
    case tree of
        Empty ->
            []

        Node value left right ->
            go (Queue.enqueue tree (Queue.init))



-- PLAYGROUND


deepTree =
    fromList [ 1, 2, 3 ]


niceTree =
    fromList [ 2, 1, 3 ]


deepTree' =
    fromList [ 1, 2, 3, 4, 5, 6, 7 ]


niceTree' =
    fromList [ 4, 6, 2, 3, 5, 1, 7 ]


main =
    div [ style [ ( "font-family", "monospace" ) ] ]
        [ display "depth deepTree" (depth deepTree)
        , display "depth niceTree" (depth niceTree)
        , display "incremented" (map (\n -> n + 1) niceTree)
        , display "sum deepTree" (sum deepTree)
        , display "sum niceTree" (sum niceTree)
        , display "fold sumByFold 0 deepTree" (fold sumByFold 0 deepTree)
        , display "fold sumByFold 0 niceTree" (fold sumByFold 0 niceTree)
        , display "sumUsingFold deepTree" (sumUsingFold deepTree)
        , display "sumUsingFold niceTree" (sumUsingFold niceTree)
        , display "flatten deepTree" (flatten deepTree)
        , display "flatten niceTree" (flatten niceTree)
        , display "fold flattenByFold deepTree" (fold flattenByFold [] deepTree)
        , display "fold flattenByFold niceTree" (fold flattenByFold [] niceTree)
        , display "flattenUsingFold deepTree" (flattenUsingFold deepTree)
        , display "flattenUsingFold niceTree" (flattenUsingFold niceTree)
        , display "isElement deepTree 3" (isElement 3 deepTree)
        , display "isElement deepTree 4" (isElement 4 deepTree)
        , display "isElement niceTree 3" (isElement 3 niceTree)
        , display "isElement niceTree 4" (isElement 4 niceTree)
        , display "isElementUsingFold 3 deepTree" (isElementUsingFold 3 deepTree)
        , display "isElementUsingFold 4 deepTree" (isElementUsingFold 4 deepTree)
        , display "isElementUsingFold 3 niceTree" (isElementUsingFold 3 niceTree)
        , display "isElementUsingFold 4 niceTree" (isElementUsingFold 4 niceTree)
        , display "fold countByFold 0 deepTree" (fold countByFold 0 deepTree)
        , display "fold countByFold 0 niceTree" (fold countByFold 0 niceTree)
        , display "preOrder deepTree" (preOrder deepTree)
        , display "preOrder niceTree" (preOrder niceTree)
        , display "inOrder deepTree" (inOrder deepTree)
        , display "inOrder niceTree" (inOrder niceTree)
        , display "postOrder deepTree" (postOrder deepTree)
        , display "postOrder niceTree" (postOrder niceTree)
        , display "levelOrder deepTree" (levelOrder deepTree)
        , display "levelOrder niceTree" (levelOrder niceTree)
        , br [] []
        , display "depth deepTree'" (depth deepTree')
        , display "depth niceTree'" (depth niceTree')
        , display "incremented" (map (\n -> n + 1) niceTree')
        , display "sum deepTree'" (sum deepTree')
        , display "sum niceTree'" (sum niceTree')
        , display "fold sumByFold 0 deepTree'" (fold sumByFold 0 deepTree')
        , display "fold sumByFold 0 niceTree'" (fold sumByFold 0 niceTree')
        , display "sumUsingFold deepTree'" (sumUsingFold deepTree')
        , display "sumUsingFold niceTree'" (sumUsingFold niceTree')
        , display "flatten deepTree'" (flatten deepTree')
        , display "flatten niceTree'" (flatten niceTree')
        , display "fold flattenByFold deepTree'" (fold flattenByFold [] deepTree')
        , display "fold flattenByFold niceTree'" (fold flattenByFold [] niceTree')
        , display "flattenUsingFold deepTree'" (flattenUsingFold deepTree')
        , display "flattenUsingFold niceTree'" (flattenUsingFold niceTree')
        , display "isElement deepTree' 3" (isElement 3 deepTree')
        , display "isElement deepTree' 4" (isElement 4 deepTree')
        , display "isElement niceTree' 3" (isElement 3 niceTree')
        , display "isElement niceTree' 4" (isElement 4 niceTree')
        , display "isElementUsingFold 3 deepTree'" (isElementUsingFold 3 deepTree')
        , display "isElementUsingFold 4 deepTree'" (isElementUsingFold 4 deepTree')
        , display "isElementUsingFold 3 niceTree'" (isElementUsingFold 3 niceTree')
        , display "isElementUsingFold 4 niceTree'" (isElementUsingFold 4 niceTree')
        , display "fold countByFold 0 deepTree'" (fold countByFold 0 deepTree')
        , display "fold countByFold 0 niceTree'" (fold countByFold 0 niceTree')
        , display "preOrder deepTree'" (preOrder deepTree')
        , display "preOrder niceTree'" (preOrder niceTree')
        , display "inOrder deepTree'" (inOrder deepTree')
        , display "inOrder niceTree'" (inOrder niceTree')
        , display "postOrder deepTree'" (postOrder deepTree')
        , display "postOrder niceTree'" (postOrder niceTree')
        , display "levelOrder deepTree'" (levelOrder deepTree')
        , display "levelOrder niceTree'" (levelOrder niceTree')
        ]


display : String -> a -> Html msg
display name value =
    div [] [ text (name ++ " ==> " ++ toString value) ]



{-----------------------------------------------------------------

Exercises:

(1) Sum all of the elements of a tree.

       sum : Tree number -> number

(2) Flatten a tree into a list.

       flatten : Tree a -> List a

(3) Check to see if an element is in a given tree.

       isElement : a -> Tree a -> Bool

(4) Write a general fold function that acts on trees. The fold
    function does not need to guarantee a particular order of
    traversal.

       fold : (a -> b -> b) -> b -> Tree a -> b

(5) Use "fold" to do exercises 1-3 in one line each. The best
    readable versions I have come up have the following length
    in characters including spaces and function name:
      sum: 16
      flatten: 21
      isElement: 46
    See if you can match or beat me! Don't forget about currying
    and partial application!

(6) Can "fold" be used to implement "map" or "depth"?

(7) Try experimenting with different ways to traverse a
    tree: pre-order, in-order, post-order, depth-first, etc.
    More info at: http://en.wikipedia.org/wiki/Tree_traversal

-----------------------------------------------------------------}

The output of the above is the following

depth deepTree ==> 3
depth niceTree ==> 2
incremented ==> Node 3 (Node 2 Empty Empty) (Node 4 Empty Empty)
sum deepTree ==> 6
sum niceTree ==> 6
fold sumByFold 0 deepTree ==> 6
fold sumByFold 0 niceTree ==> 6
sumUsingFold deepTree ==> 6
sumUsingFold niceTree ==> 6
flatten deepTree ==> [1,2,3]
flatten niceTree ==> [1,2,3]
fold flattenByFold deepTree ==> [1,2,3]
fold flattenByFold niceTree ==> [2,1,3]
flattenUsingFold deepTree ==> [1,2,3]
flattenUsingFold niceTree ==> [2,1,3]
isElement deepTree 3 ==> True
isElement deepTree 4 ==> False
isElement niceTree 3 ==> True
isElement niceTree 4 ==> False
isElementUsingFold 3 deepTree ==> True
isElementUsingFold 4 deepTree ==> False
isElementUsingFold 3 niceTree ==> True
isElementUsingFold 4 niceTree ==> False
fold countByFold 0 deepTree ==> 3
fold countByFold 0 niceTree ==> 3
preOrder deepTree ==> [1,2,3]
preOrder niceTree ==> [2,1,3]
inOrder deepTree ==> [1,2,3]
inOrder niceTree ==> [1,2,3]
postOrder deepTree ==> [3,2,1]
postOrder niceTree ==> [1,3,2]
levelOrder deepTree ==> [1,2,3]
levelOrder niceTree ==> [2,1,3]

depth deepTree' ==> 7
depth niceTree' ==> 3
incremented ==> Node 5 (Node 3 (Node 2 Empty Empty) (Node 4 Empty Empty)) (Node 7 (Node 6 Empty Empty) (Node 8 Empty Empty))
sum deepTree' ==> 28
sum niceTree' ==> 28
fold sumByFold 0 deepTree' ==> 28
fold sumByFold 0 niceTree' ==> 28
sumUsingFold deepTree' ==> 28
sumUsingFold niceTree' ==> 28
flatten deepTree' ==> [1,2,3,4,5,6,7]
flatten niceTree' ==> [1,2,3,4,5,6,7]
fold flattenByFold deepTree' ==> [1,2,3,4,5,6,7]
fold flattenByFold niceTree' ==> [4,2,1,3,6,5,7]
flattenUsingFold deepTree' ==> [1,2,3,4,5,6,7]
flattenUsingFold niceTree' ==> [4,2,1,3,6,5,7]
isElement deepTree' 3 ==> True
isElement deepTree' 4 ==> True
isElement niceTree' 3 ==> True
isElement niceTree' 4 ==> True
isElementUsingFold 3 deepTree' ==> True
isElementUsingFold 4 deepTree' ==> True
isElementUsingFold 3 niceTree' ==> True
isElementUsingFold 4 niceTree' ==> True
fold countByFold 0 deepTree' ==> 7
fold countByFold 0 niceTree' ==> 7
preOrder deepTree' ==> [1,2,3,4,5,6,7]
preOrder niceTree' ==> [4,2,1,3,6,5,7]
inOrder deepTree' ==> [1,2,3,4,5,6,7]
inOrder niceTree' ==> [1,2,3,4,5,6,7]
postOrder deepTree' ==> [7,6,5,4,3,2,1]
postOrder niceTree' ==> [1,3,2,5,7,6,4]
levelOrder deepTree' ==> [1,2,3,4,5,6,7]
levelOrder niceTree' ==> [4,2,6,1,3,5,7]

You can download the solution from here binary-tree.elm (compressed) (19 downloads)


An Introduction to Elm Series: Solution to ‘Pair of Counters’ example

In http://guide.elm-lang.org/architecture/modularity/counter_pair.html, we are given an application that reuses the counter application that was converted into a module for the purpose of this tutorial.

We were asked to make a swap between the two instances of the counter. That was easy due to the nature of the updates that create a new version of the model each time instead of updating it. So, we just swapped the instances of the two counters in the update.

Later, we were asked to extend the counter to log some statistics, since the parent module was not using the model directly it was very easy for us to extend the model and implement the changes needed in the update and the view of the model. No signatures were changed and init was modified to initialize all statistics along with the value.

Parent Module (1-counter-pair.elm)

import Counter
import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)



main =
  App.beginnerProgram
    { model = init 0 0
    , update = update
    , view = view
    }



-- MODEL


type alias Model =
  { topCounter : Counter.Model
  , bottomCounter : Counter.Model
  }


init : Int -> Int -> Model
init top bottom =
  { topCounter = Counter.init top
  , bottomCounter = Counter.init bottom
  }



-- UPDATE


type Msg
  = Reset
  | Top Counter.Msg
  | Bottom Counter.Msg
  | Swap


update : Msg -> Model -> Model
update message model =
  case message of
    Reset ->
      init 0 0

    Top msg ->
      { model | topCounter = Counter.update msg model.topCounter }

    Bottom msg ->
      { model | bottomCounter = Counter.update msg model.bottomCounter }

    Swap ->
      { model | bottomCounter = model.topCounter, topCounter = model.bottomCounter }


-- VIEW


view : Model -> Html Msg
view model =
  div
    []
    [ App.map Top (Counter.view model.topCounter)
    , App.map Bottom (Counter.view model.bottomCounter)
    , button [ onClick Reset ] [ text "RESET" ]
    , button [ onClick Swap ] [ text "Swap" ]
    ]

Counter Module (Counter.elm)

module Counter exposing (Model, Msg, init, update, view)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)



-- MODEL


type alias Model =
  { count : Int
  , max' : Int
  , min' : Int
  , increment : Int
  , decrement : Int
  }


init : Int -> Model
init count =
  Model count 0 0 0 0

-- UPDATE


type Msg
  = Increment
  | Decrement


update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      { model |
        count = model.count + 1
        , max' = Basics.max (model.count + 1) model.max'
        , increment = model.increment + 1
      }

    Decrement ->
      { model |
        count = model.count - 1
        , min' = Basics.min (model.count - 1) model.min'
        , decrement = model.decrement + 1
      }



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [ countStyle ] [ text (toString model.count) ]
    , button [ onClick Increment ] [ text "+" ]
    , div [] [ text ("Max " ++ (toString model.max')) ]
    , div [] [ text ("Min " ++ (toString model.min')) ]
    , div [] [ text ("Increment " ++ (toString model.increment)) ]
    , div [] [ text ("Decrement " ++ (toString model.decrement)) ]
    ]


countStyle : Attribute msg
countStyle =
  style
    [ ("font-size", "20px")
    , ("font-family", "monospace")
    , ("display", "inline-block")
    , ("width", "50px")
    , ("text-align", "center")
    ]

 

You can download the solution from here 1-counter-pair (compressed) (23 downloads)


An Introduction to Elm Series: Solution to ‘Time’ example

In http://guide.elm-lang.org/architecture/effects/time.html, we are given an application that resembles a clock and we are asked to add a button to pause it and add additional hands.

What we did in the following code is:

  • We created a normal clock that shows the time in UTC
  • A toggle button that pauses/resumes it was added
  • We added the second, minute and hour hands. Which we gave them different lengths and colors
  • We created utilities to convert time to angle in degrees both for minutes/seconds and for hours
  • A new function that adds the leading zero to values when we print the time in digital format was created
import Html exposing (Html, br, div, button)
import Html.Events exposing (onClick)
import Html.App as 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 : Time
  , state : Bool
  }


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



-- UPDATE


type Msg
  = Tick Time
  | Toggle


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

    Toggle ->
      (toggleState model, Cmd.none)


-- UTILITIES
toggleState : Model -> Model
toggleState model =
  {model | state = not(model.state)}

printWithLeadingZero : Int -> String
printWithLeadingZero number =
  if number < 10 then
    "0" ++ (toString number)
  else
    toString number

degressCorrection : Float
degressCorrection =
  90.0 -- The correction we must do on our analog clock to show 12 pointing up instead to the right

degressForHour : Float
degressForHour =
  360.0 / 12.0 -- We divide the total degrees of a full circle by the full hours of the day to get the degrees per hour

degreesForMinute : Float
degreesForMinute =
  360.0 / 60.0 -- We divide the total degrees of a full circle by the full minutes of the hour to get the degrees per minute

convertToDegrees : Int -> Float -> Float
convertToDegrees value degreesPerPoint =
  degrees (((toFloat value) * degreesPerPoint) - degressCorrection)

minutesToDegrees : Int -> Float
minutesToDegrees minutes =
  convertToDegrees minutes degreesForMinute

hoursToDegrees : Int -> Float
hoursToDegrees hours =
  convertToDegrees hours degressForHour

-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  case model.state of
    True ->
      Time.every second Tick
    False ->
      Sub.none



-- VIEW


view : Model -> Html Msg
view model =
  let


    second' =
        Time.inSeconds model.time

    secondOfMinute =
        truncate second' `rem` 60

    secondAngle =
      minutesToDegrees secondOfMinute

    secondHandX =
      toString (50 + 40 * cos secondAngle)

    secondHandY =
      toString (50 + 40 * sin secondAngle)

    minute' =
      Time.inMinutes model.time

    minuteOfHour =
      truncate minute' `rem` 60

    minuteAngle =
      minutesToDegrees minuteOfHour

    minuteHandX =
      toString (50 + 35 * cos minuteAngle)

    minuteHandY =
      toString (50 +35 * sin minuteAngle)

    hour' =
      Time.inHours model.time

    hourOfDay =
      truncate hour' `rem` 24

    hourAngle =
      hoursToDegrees hourOfDay

    hourHandX =
      toString (50 + 30 * cos hourAngle)

    hourHandY =
      toString (50 + 30 * sin hourAngle)

    currentTime =
      (printWithLeadingZero hourOfDay) ++ ":" ++ (printWithLeadingZero minuteOfHour) ++ ":" ++ (printWithLeadingZero secondOfMinute)

  in
    div []
      [ div [] 
      , svg [ viewBox "0 0 100 100", width "300px" ]
        [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
        , line [ x1 "50", y1 "50", x2 secondHandX, y2 secondHandY, stroke "#ee0000" ] []
        , line [ x1 "50", y1 "50", x2 minuteHandX, y2 minuteHandY, stroke "#0000ee" ] []
        , line [ x1 "50", y1 "50", x2 hourHandX, y2 hourHandY, stroke "#023963" ] []
        ]
      , br [] []
      , button [onClick Toggle] 
      ]

You can download the solution from here 6-clock (compressed) (19 downloads)

 


An Introduction to Elm Series: Solution to ‘HTTP’ example

In the http://guide.elm-lang.org/architecture/effects/http.html, we were given a sample that loads random images from a web application on another service thought HTTP requests.

We were asked to print the error message of the request (if any) and update the UI to allow changing the topic (a parameter of the web call) either through an input field or a drop down list.

We wrote a message that accepts as string the new topic, that message is used both in the case of the input and in the case of the select list. Finally, we made sure that the ‘Please Wait’ image is shown while loading the new image from the remote server. The path for the ‘Please Wait’ image was added to a custom function to emulate a public static string value.

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http
import Json.Decode as Json
import Task



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



-- MODEL


type alias Model =
  { topic : String
  , gifUrl : String
  , error : String
  }

waitingImage : String
waitingImage =
  "5-http/waiting.png"

init : String -> (Model, Cmd Msg)
init topic =
  ( Model topic waitingImage ""
  , getRandomGif topic
  )



-- UPDATE


type Msg
  = MorePlease
  | FetchSucceed String
  | FetchFail Http.Error
  | NewTopic String


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MorePlease ->
      ({ model | gifUrl = waitingImage }, getRandomGif model.topic)

    FetchSucceed newUrl ->
      (Model model.topic newUrl "", Cmd.none)

    FetchFail error ->
      (Model model.topic waitingImage (toString error), Cmd.none)

    NewTopic newTopic ->
      ({ model | topic = newTopic }, Cmd.none)


-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ h2 [] 
    , input [ type' "text", placeholder "Topic", onInput NewTopic ] []
    , select [ onInput NewTopic ]
      [ option [] [ text "Pokemon" ]
      , option [] [ text "SuperCars" ]
      , option [] [ text "Cyprus" ]
      , option [] [ text "Cats" ]
      , option [] [ text "Dogs" ]
      ]
    , button [ onClick MorePlease ] [ text "More Please!" ]
    , br [] []
    , img [src model.gifUrl] []
    , br [] []
    , div [] 
    ]



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none



-- HTTP


getRandomGif : String -> Cmd Msg
getRandomGif topic =
  let
    url =
      "//api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=" ++ topic
  in
    Task.perform FetchFail FetchSucceed (Http.get decodeGifUrl url)


decodeGifUrl : Json.Decoder String
decodeGifUrl =
  Json.at ["data", "image_url"] Json.string

You can download the solution from here 5-http (compressed) (20 downloads)


An Introduction to Elm Series: Solution to ‘Random’ example

In the http://guide.elm-lang.org/architecture/effects/random.html, we were given an application that rolls a die and prints the number of the face that was rolled.

We were asked to add a second die that would be rolled together with the first one and show an image of a die instead of just printing the number on the face of the die.

Following you will find our proposed solution. We added a new value in the model for the second die and updated the message for NewFace to produce a message to roll the second die as well. Also we created a function that accepts the number of the face of the die and produces a path to the image that should be loaded.

import Html exposing (..)
import Html.App as Html
import Html.Events exposing (..)
import Html.Attributes exposing (..)
import Random
import String exposing (concat)



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



-- MODEL


type alias Model =
  { dieFaceA : Int
  , dieFaceB : Int
  }


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



-- UPDATE


type Msg
  = Roll
  | NewFaceA Int
  | NewFaceB Int


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Roll ->
      (model, Random.generate NewFaceA (Random.int 1 6))

    NewFaceA newFace ->
      ({model | dieFaceA = newFace}, Random.generate NewFaceB (Random.int 1 6))

    NewFaceB newFace ->
      ({model | dieFaceB = newFace}, Cmd.none)



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


-- UTILITIES


createImage : Int -> String
createImage dieFace =
    concat ["./4-random/", (toString dieFace), ".png"]



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ img [src (createImage model.dieFaceA)] []
    , h1 [] [ text (toString model.dieFaceA) ]
    , img [src (createImage model.dieFaceB)] []
    , h1 [] [ text (toString model.dieFaceB) ]
    , button [ onClick Roll ] [ text "Roll" ]
    ]

You can download the solution from here 4-random (compressed) (20 downloads)


An Introduction to Elm Series: Solution to ‘Forms’ example

In http://guide.elm-lang.org/architecture/user_input/forms.html, you are given a simple form that accepts the name of a user and a password along with a validation field for the password.

You are asked to perform the following validations on the form:

  • Check that the password is longer than 8 characters.
  • Make sure the password contains upper case, lower case, and numeric characters.
  • Add an additional field for age and check that it is a number.
  • Add a “Submit” button. Only show errors after it has been pressed.

What we did was to add two new members to our model. One for the validation flag (if we should show the result or not) and one for the age. Then we created two new signals, one for the age field and one for the submit button and updated all signals to reset the validation flag. Afterwards, we added on the GUI the new input elements and attached the appropriate signals. Finally, we performed all checks using the appropriate libraries.

In the following proposed full source code solution we highlight our changes.

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String exposing (trim, length, isEmpty, toLower, toUpper, any, all)
import Char exposing (isDigit, isLower, isUpper)


main =
  Html.beginnerProgram
    { model = model
    , view = view
    , update = update
    }



-- MODEL


type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  , age : String
  , validate : Bool
  }


model : Model
model =
  Model "" "" "" "" False



-- UPDATE


type Msg
    = Name String
    | Password String
    | PasswordAgain String
    | Age String
    | Validate


update : Msg -> Model -> Model
update msg model =
  case msg of
    Name name ->
      { model | name = name, validate = False }

    Password password ->
      { model | password = password, validate = False }

    PasswordAgain password ->
      { model | passwordAgain = password, validate = False }

    Age age ->
      { model | age = trim age, validate = False }

    Validate ->
      { model | validate = True }

-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ input [ type' "text", placeholder "Name", onInput Name ] []
    , input [ type' "password", placeholder "Password", onInput Password ] []
    , input [ type' "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
    , input [ type' "number", placeholder "Age", onInput Age ] []
    , button [ onClick Validate ] [ text "Submit" ]
    , viewValidation model
    ]


viewValidation : Model -> Html msg
viewValidation model =
  let
    (color, message) =
      if model.validate then
        if length model.password < 8 then
          ("red", "Password too short")
        else if any isUpper model.password == False then
        -- Alternatively, instead of checking if there is at least one character that is Upper, we can convert the input toLower and check if it changed
        -- else if model.password == toLower model.password then
          ("red", "Password does not contain an upper case character")
        else if any isLower model.password == False then
        -- Alternatively, instead of checking if there is at least one character that is lower, we can convert the input toUpper and check if it changed
        -- else if model.password == toUpper model.password then
          ("red", "Password does not contain a lower case character")
        else if any isDigit model.password == False then
          ("red", "Password does not contain a numeric character")
        else if model.password /= model.passwordAgain then
          ("red", "Passwords do not match!")
        else if isEmpty model.age || all isDigit model.age == False then
          ("red", "Age is not a positive integer number")
        else ("green", "OK")
      else ("white", "")
  in
    div [ style [("color", color)] ] [ text message ]

You can download the solution from here 3-form.elm (compressed) (24 downloads)


An Introduction to Elm Series: Solution to ‘Buttons’ example

In http://guide.elm-lang.org/architecture/user_input/buttons.html, you are given a working code that produces a simple counter which can be incremented or decremented via two buttons on an HTML page.

Your task is to add a new feature to this code, which is to create a new button that will reset the counter. Following you will find a proposed solution to the task. What we did was to create a new message which when received it would zero the model value and then we attached it to a new button we created.

The full solution is as follows and we highlighted all the lines that were added for this additional functionality to work:

import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)



main =
  Html.beginnerProgram
    { model = model
    , view = view
    , update = update
    }



-- MODEL


type alias Model = Int


model : Model
model =
  0



-- UPDATE


type Msg
  = Increment
  | Decrement
  | Reset


update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

    Reset ->
      0

-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    , button [ onClick Reset ] [ text "Reset" ]
    ]

You can download the solution from here 1-button.elm (compressed) (25 downloads)


Create an HTML page with no JavaScript that will redirect the user after a few seconds

The following sample page will redirect the user to bytefreaks.net after 5 seconds. This page does not require JavaScript to be enabled on the user’s browser.

To modify the delay time and the redirect path, you need to edit the following line in the head of the page <meta http-equiv="refresh" content="5;URL=http://www.bytefreaks.net/">. In this example we set the delay to 5 seconds and the redirect url to be http://www.bytefreaks.net/.

You can download a working example of this code here ( DelayedRedirect.html (compressed) (25 downloads) ). If you rename the file to index.html and place it in a folder, it will be the first file that your webserver will read and the redirect will be applied.

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bytefreaks.net Redirect Page</title>
    <meta name="description" content="A page that will redirect the user to bytefreaks.net after 5 seconds">
    <meta name="author" content="Bytefreaks.net">
    <meta http-equiv="refresh" content="5;URL=http://www.bytefreaks.net/">
  </head>

  <body bgcolor="#ffffff">
    <center>You will be automatically redirected to <a href="http://bytefreaks.net">bytefreaks.net</a> as this resource is not available.</center>
  </body>
</html>