Create a gist now

Instantly share code, notes, and snippets.

@evancz /Main.html
Last active Sep 26, 2016

Embed
Embed an Elm module in HTML. Compile with `elm-make Stamper.elm` or just generate the HTML automatically by specifying an HTML output file with `elm-make Stamper.elm --output=Main.html`
<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

This comment has been minimized.

Show comment
Hide comment
@chribben

chribben May 14, 2015

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

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

@hossameldeen

This comment has been minimized.

Show comment
Hide comment
@hossameldeen

hossameldeen May 23, 2015

@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 word exposing
  • I couldn't find hsva anywhere. Probably it was meant to be hsla. And probably, it's missing an import of Color module which has hsla.
  • I needed to change 1 1 0.7 to 1 x 0.7, where x < 1 to see any stamps. Don't know about HSLA colors, but seems like 1 there causes white color.
  • plainText should be changed to show. 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).

@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 word exposing
  • I couldn't find hsva anywhere. Probably it was meant to be hsla. And probably, it's missing an import of Color module which has hsla.
  • I needed to change 1 1 0.7 to 1 x 0.7, where x < 1 to see any stamps. Don't know about HSLA colors, but seems like 1 there causes white color.
  • plainText should be changed to show. 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).

@zcstarr

This comment has been minimized.

Show comment
Hide comment
@zcstarr

zcstarr May 24, 2015

@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

zcstarr commented May 24, 2015

@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

@xmo-odoo

This comment has been minimized.

Show comment
Hide comment

xmo-odoo commented Sep 6, 2015

https://github.com/evancz/elm-html-and-js/blob/master/Stamps.elm is an extended and up-to-date version of the gist.

@theironcook

This comment has been minimized.

Show comment
Hide comment
@theironcook

theironcook Oct 16, 2015

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 ((::))"

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 ((::))"

@category

This comment has been minimized.

Show comment
Hide comment
@category

category Apr 18, 2016

@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

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment