|<title>Embedding Elm in HTML!</title>|
|<div id="stamper" style="width:50%; height:400px;"></div>|
|var stamperDiv = document.getElementById('stamper');|
|module Stamper where|
|import Graphics.Collage (..)|
|import Graphics.Element (..)|
|import List ((::))|
|main : Signal Element|
|Signal.map2 renderStamps Window.dimensions clickLocations|
|clickLocations : Signal (List (Int,Int))|
|Signal.foldp (::)  (Signal.sampleOn Mouse.clicks Mouse.position)|
|renderStamps : (Int,Int) -> List (Int,Int) -> Element|
|renderStamps (w,h) locs =|
|let pentagon (x,y) =|
|ngon 5 20|
||> filled (hsva (toFloat x) 1 1 0.7)|
||> move (toFloat x - toFloat w / 2, toFloat h / 2 - toFloat y)|
||> rotate (toFloat x)|
|[ collage w h (List.map pentagon locs)|
|, plainText "Click to stamp a pentagon."|
@chribben: I got it to work by doing the following changes:
Note: What I mean with 'I got it to work' is that I copied this repo's code to the example page, then made changes till it worked. It's not that I tried it locally.
And in general, to see the breaking changes between versions 0.14 and 0.15 and how to fix them, you can check this page:
So, yes, the code here is outdated. I don't think I can PR a gist. But hope you now know why it doesn't work (if you don't already. Or for newcomers that come here).
@hossameldeenfci I believe those changes are correct, I just made another gist to help anyone new with changes. I'm new myself so hopefully this isn't destructive :) https://gist.github.com/zcstarr/0f0fa9082550e4520849
https://github.com/evancz/elm-html-and-js/blob/master/Stamps.elm is an extended and up-to-date version of the gist.
Is this example still supposed to work? I trying running elm-make Stamper.elm and got a few errors. I had to change this
But I still get a compilation error "Cannot find variable
Is this statement wrong somehow? "import List ((::))"
@evancz - In my own embedded elm html,