Elm resizeable SVG canvas filling the screen

I am toying with writing an SVG-based game in (exciting-looking JavaScript-replacement) Elm, and I wanted an SVG that filled the whole screen and resized when the screen resized. I found it harder than I expected, so here is what I came up with for your information and comment.

Try the demo.

SVG-based game

Elm

Try the demo

Because I was using Html.App.programWithFlags I was not able to shortcut the process and use just elm-reactor - I needed to create an HTML file and compile my code with elm-make.

index.html sets up a full-screen app and passes in the window size:

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8"/>
   <title>Sootl</title>
   <script src="sootl.js"></script>
   <style>
       html, body, svg
       {
           margin: 0px;
           padding: 0px;
           border: 0px;
           overflow: hidden;
       }
   </style>
</head>
<body>
</body>
<script>
var app = Elm.Main.fullscreen(
   {
       width:  window.innerWidth,
       height: window.innerHeight
   }
);
</script>
</html>

Html.App.programWithFlags

elm-package.json requires the Html, Svg and Window packages:

{
   "version": "1.0.0",
   "summary": "Stay out of the light!",
   "repository": "https://github.com/andybalaam/sootl.git",
   "license": "GPL2",
   "source-directories": [
       "."
   ],
   "exposed-modules": [],
   "dependencies": {
       "elm-lang/core": "4.0.5 <= v < 5.0.0",
       "elm-lang/html": "1.1.0 <= v < 2.0.0",
       "elm-lang/svg": "1.1.1 <= v < 2.0.0",
       "elm-lang/window": "1.0.0 <= v < 2.0.0"
   },
   "elm-version": "0.17.1 <= v < 0.18.0"
}

elm-package.json

Main.elm contains the Elm code, which starts off with the window size from JavaScript, and then listens to resize events using the Window module.

import Html exposing (Html)
import Html.App exposing (programWithFlags)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Window

=> http://artificialworlds.net/elm/resizeable-svg/Main.elm  Main.elm

type alias Flags =
   { width : Int
   , height : Int
   }

type Msg = Resize Int Int

type alias Model =
   { screen :
       { width : Int
       , height : Int
       }
   }

init : Flags -> (Model, Cmd Msg)
init flags =
   (
       { screen =
           { width = flags.width
           , height = flags.height
           }
       }
   , Cmd.none
   )

view : Model -> Html Msg
view model =
   let
       sw = model.screen.width  - 0
       sh = model.screen.height - 0
   in
       svg
       [ width  <| toString sw
       , height <| toString sh
       ]
       [ rect
           [ x "0"
           , y "0"
           , width (toString model.screen.width)
           , height (toString model.screen.height)
           , fill "#eeffee"
           ]
           []
       , text'
           [ x <| toString <| sw / 2
           , y <| toString <| sh / 2
           , fontSize <| toString <| sh / 10
           , textAnchor "middle"
           ]
           [ text
               ((toString model.screen.width)
               ++ ", "
               ++ (toString model.screen.height))
           ]
       ]

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   let m =
       case msg of
           Resize w h -> {model | screen = {width = w, height = h}}
   in
       (m, Cmd.none)

subscriptions : Model -> Sub Msg
subscriptions model =
   Window.resizes (\size -> Resize size.width size.height)

main =
  programWithFlags
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

I installed all the packages with:

elm-package install

Then I compiled the code with:

elm-make --output=sootl.js Main.elm

Now I launched elm-reactor:

elm-reactor

And navigated my browser to http://localhost:8000/index.html to see it working.

Originally posted at 2016-08-26 01:10:43+00:00. Automatically generated from the original post : apologies for the errors introduced.

original post

-- Response ended

-- Page fetched on Sun May 19 03:46:00 2024