Last active
October 22, 2020 10:46
-
-
Save evancz/8456627 to your computer and use it in GitHub Desktop.
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`
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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." | |
] |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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