-
-
Save evancz/8456627 to your computer and use it in GitHub Desktop.
| <html> | |
| <head> | |
| <title>Embedding Elm in HTML!</title> | |
| <script type="text/javascript" src="elm.js"></script> | |
| </head> | |
| <body> | |
| <h1>Stamper</h1> | |
| <div id="stamper" style="width:50%; height:400px;"></div> | |
| </body> | |
| <script type="text/javascript"> | |
| var stamperDiv = document.getElementById('stamper'); | |
| Elm.embed(Elm.Stamper, stamperDiv); | |
| </script> | |
| </html> |
| module Stamper where | |
| import Graphics.Collage (..) | |
| import Graphics.Element (..) | |
| import List | |
| import List ((::)) | |
| import Mouse | |
| import Signal | |
| import Window | |
| main : Signal Element | |
| main = | |
| Signal.map2 renderStamps Window.dimensions clickLocations | |
| clickLocations : Signal (List (Int,Int)) | |
| clickLocations = | |
| 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) | |
| in | |
| layers | |
| [ collage w h (List.map pentagon locs) | |
| , plainText "Click to stamp a pentagon." | |
| ] |
@chribben: I got it to work by doing the following changes:
- Elm 0.15 now has a different import syntax. It's now
import someModule exposing (someStuff), i.e., adding the wordexposing - I couldn't find
hsvaanywhere. Probably it was meant to behsla. And probably, it's missing an import ofColormodule which hashsla. - I needed to change
1 1 0.7to1 x 0.7, where x < 1 to see any stamps. Don't know about HSLA colors, but seems like 1 there causes white color. plainTextshould be changed toshow. A small API change.
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:
http://elm-lang.org/blog/announce/0.15.elm
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
import Graphics.Collage (..)
import Graphics.Element (..)
import List ((::))
to this
import Graphics.Collage exposing(..)
import Graphics.Element exposing(..)
import List exposing(..)
But I still get a compilation error "Cannot find variable hsva"
Is this statement wrong somehow? "import List ((::))"
@evancz - In my own embedded elm html,
I got this to work by changing src to be the compiled elm js file.
Here src="elm.js" would be changed to src="Stamper.js"
i.e. https://gist.github.com/category/1212a49349dbede86a2546f352725ad8.js
Can't get Embed in HTML example to work unless I use the Stamper code on the example pages and compile with
elm-make Stamper.elm --output=Main.html