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." | |
] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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 tosrc="Stamper.js"
i.e. https://gist.github.com/category/1212a49349dbede86a2546f352725ad8.js