Skip to content

bergey/gooey

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.