Changed text based numbers to 7-seg displays

Counter.elm

@@ -6,6 +6,7 @@ import Time
 import Debug
 import String exposing (concat)
 
+import SevenSeg exposing (sevenSeg)
 
 -- MODEL
 
@@ -15,11 +16,11 @@ type alias Model =
     , color : String
     , period : Time.Time
     , start : Time.Time
-    , fontSize : String
+    , fontSize : Float
     }
 
 
-init : String -> Float -> Model
+init : Float -> Float -> Model
 init fontSize period =
     { num = -1
     , limit = 10
@@ -54,25 +55,5 @@ view : Model -> Html Msg
 -- Each counter is just some coloured text and a number.
 view model =
     div []
-        [ div [style <| numberStyle model] [ text <| textFor model.num ]
+        [ div [] [ sevenSeg (model.fontSize*0.7) model.fontSize model.color model.num ]
         ]
-
-textFor : Int -> String
-textFor n =
-    if n > 0
-    then toString n
-    else "0"
-
-numberStyle : Model -> List ( String, String )
-numberStyle model =
-    [ ("font-family", "monospace")
-    , ("text-align", "center")
-    , ("font-size", model.fontSize)
-    , ("font-weight", "bold")
-    ] ++
-    -- Text glow, using CSS3. Tested on Chrome, not sure about other browsers.
-    if model.num > 0
-    then [ ("color", model.color)
-         , ("text-shadow", concat ["-1px 1px 20px ", model.color, ", 1px -1px 20px ", model.color])
-         ]
-    else [ ("color", "black")]

CounterGrid.elm

@@ -22,7 +22,7 @@ globals =
     in
         { tdPx = tdPx
         , tdSize = (toString tdPx) ++ "px"
-        , textSize = "1.5em"
+        , textSize = 16
         , border = "0px solid gray"
         , w = 40
         , h = 24

SevenSeg.elm

@@ -0,0 +1,203 @@
+module SevenSeg exposing (sevenSeg)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+
+
+-- SEVEN SEGMENT DISPLAY
+
+{-
+     A
+     -
+  B | | C
+     - D
+  E | | F
+     -
+     G
+-}
+
+type Orientation = Horizontal | Vertical
+type State = On | Off
+type alias Style =
+    { width : Float
+    , height: Float
+    , colour : String
+    }
+
+sevenSeg : Float -> Float -> String -> Int -> Html msg
+sevenSeg width height colour number =
+    let
+        segStyle =
+            { width = width
+            , height = height
+            , colour = colour
+            }
+
+        horizontalStyle =
+            [ ("display", "flex")
+            , ("justify-content", "center")
+            ]
+
+        verticalStyle =
+            [ ("display", "flex")
+            , ("justify-content", "space-between")
+            ]
+    in
+        Html.div
+            [ style <| sevenSegStyle segStyle ]
+            [ Html.div [ style horizontalStyle ] [ sevenSegA segStyle number ]
+            , Html.div [ style verticalStyle ]   [ sevenSegB segStyle number, sevenSegC segStyle number ]
+            , Html.div [ style horizontalStyle ] [ sevenSegD segStyle number ]
+            , Html.div [ style verticalStyle ]   [ sevenSegE segStyle number, sevenSegF segStyle number ]
+            , Html.div [ style horizontalStyle ] [ sevenSegG segStyle number ]
+            ]
+
+sevenSegStyle : Style -> List (String, String)
+sevenSegStyle style =
+    [ ("display", "inline-block")
+    , ("height", pixels <| style.height)
+    , ("width", pixels <| style.width)
+    ]
+
+
+-- SEGMENTS
+
+sevenSegA style number =
+    segment Horizontal style
+    <| case number of
+        1 -> Off
+        2 -> On
+        3 -> On
+        4 -> Off
+        5 -> On
+        6 -> On
+        7 -> On
+        8 -> On
+        9 -> On
+        _ -> Off
+
+sevenSegB style number =
+    segment Vertical style
+    <| case number of
+        1 -> Off
+        2 -> Off
+        3 -> Off
+        4 -> On
+        5 -> On
+        6 -> On
+        7 -> Off
+        8 -> On
+        9 -> On
+        _ -> Off
+
+sevenSegC style number =
+    segment Vertical style
+    <| case number of
+        1 -> On
+        2 -> On
+        3 -> On
+        4 -> On
+        5 -> Off
+        6 -> Off
+        7 -> On
+        8 -> On
+        9 -> On
+        _ -> Off
+
+sevenSegD style number =
+    segment Horizontal style
+    <| case number of
+        1 -> Off
+        2 -> On
+        3 -> On
+        4 -> On
+        5 -> On
+        6 -> On
+        7 -> Off
+        8 -> On
+        9 -> On
+        _ -> Off
+
+sevenSegE style number =
+    segment Vertical style
+    <| case number of
+        1 -> Off
+        2 -> On
+        3 -> Off
+        4 -> Off
+        5 -> Off
+        6 -> On
+        7 -> Off
+        8 -> On
+        9 -> Off
+        _ -> Off
+
+sevenSegF style number =
+    segment Vertical style
+    <| case number of
+        1 -> On
+        2 -> Off
+        3 -> On
+        4 -> On
+        5 -> On
+        6 -> On
+        7 -> On
+        8 -> On
+        9 -> On
+        _ -> Off
+
+sevenSegG style number =
+    segment Horizontal style
+    <| case number of
+        1 -> Off
+        2 -> On
+        3 -> On
+        4 -> Off
+        5 -> On
+        6 -> On
+        7 -> Off
+        8 -> On
+        9 -> On
+        _ -> Off
+
+segment : Orientation -> Style -> State -> Html msg
+segment orientation segStyle state =
+    case orientation of
+        Horizontal ->
+            Html.div
+                [ style <| segmentStyle orientation segStyle state ]
+                []
+        Vertical ->
+            Html.div
+                [ style <| segmentStyle orientation segStyle state ]
+                []
+
+segmentStyle : Orientation -> Style -> State -> List ( String, String )
+segmentStyle orientation style state =
+    let
+        segmentWidth = toFloat <| ceiling <| style.height/16
+    in
+        [ ("display",  "inline-block")
+        , case orientation of
+            Horizontal -> ("height", pixels <| segmentWidth)
+            Vertical   -> ("height", pixels <| (style.height-segmentWidth*3)/2 - 2)
+        , case orientation of
+            Horizontal -> ("width", pixels <| style.width - (4*segmentWidth))
+            Vertical   -> ("width", pixels <| segmentWidth)
+        , case state of
+            On  -> ("background-color", style.colour)
+            Off -> ("background-color", "#080808")
+        , case orientation of
+            Horizontal -> ("margin", pixels <| 0)
+            Vertical   -> ("margin", pixels <| 1)
+        , case state of
+            On  -> ("box-shadow", "0px 0px 4px 1.5px " ++ style.colour)
+            Off -> ("box-shadow", "none")
+        ]
+
+
+-- OTHER
+
+pixels : Float -> String
+pixels number =
+    toString number ++ "px"