GHCJS Examples

hello

Hello World example, uses the bare minimum of functions from ghcjs-dom to get text into the browser window.

embed

Only slightly more elaborate than hello, sets a large chunk of static HTML, and then selects several elements by id. The use of documentGetElementById is important. The use of embedFile is not so important. Both will disappear as I move to better libraries for constructing HTML.

hamlet

Use hamlet and blaze-html to create the inner HTML content.

echo

Use ghcjs-dom to read from an input field and echo the value to a paragraph..

echo-button

Like echo, but register a callback on a button, and only update the paragraph when the button is pressed. This is the simplest example with a callback.

timer

A countdown timer using an MVar event queue to tie the knot. Callbacks on DOM elements add events to the queue. A single Haskell thread pops events from the queue and updates the (global) state. A render function is called in a loop by requestAnimationFrame and updates the DOM based on the global state. This is the simplest example with an event queue.

diagrams-minimal

Uses diagrams-ghcjs and ghcjs-canvas to render to a Canvas element.

bouncing-canvas

Uses ghcjs-canvas to render a bouncing ball. Click in the canvas to move the ball to that point.

bouncing-diagrams

Uses diagrams-ghcjs to render a bouncing ball. Click in the canvas to move the ball to that point.

diagrams-reflex-counting

Uses diagrams-reflex to render a circle, and respond to clicks on the circle. The counter should update only when the circle is clicked, not when other parts of the SVG are clicked.

diagrams-reflex-follow

Uses diagrams-reflex to render a circle at the current mouse position. Uses the mouse position event streams associated with each Diagram by diagrams-reflex.