hanabi¶ ↑

Hanabi is a beat prezi.com clone, for canvas-able browses (Firefox, Safari, Chrome).

I recommend prezi.com, it’s a marvellous tool.

testing¶ ↑

Open the self_presentation.html file in your browser.

Or look at :

hanabi.s3.amazonaws.com/self_presentation.html

usage¶ ↑

In your webpage, make sure to include hanabi.js :

<script src="hanabi.js"></script>

then, have a canvas with an id :

<canvas id="can" width="1000" height="700" style="background-color: white;">
</canvas>

to load the image, specify the trajectory and init the presentation :

<script>

  var source = 'path/to/my_image.png';

  var points = [
    { x: 504, y: 340, zoom: 0.5, r: Math.PI * 2 },
    { x: 504, y: 340, zoom: 3.5, r: Math.PI * 2, stop: false },
    { x: 641, y: 260, zoom: 2.0, r: Math.PI * 2 },
    { x: 832, y: 191, zoom: 2.0, r: Math.PI * 2 },
    { x: 977, y: 173, zoom: 2.0, r: Math.PI * 2 },
    { x: 1035, y: 297, zoom: 2.0, r: Math.PI * 2 },
    { x: 1037, y: 383, zoom: 4.0, r: Math.PI * 1.75 },
    { x: 497, y: 335, zoom: 2.0, r: Math.PI * 2 },
    { x: 696, y: 513, zoom: 2.0, r: Math.PI * 2.1 },
    { x: 914, y: 501, zoom: 2.0, r: Math.PI * 2 },
    { x: 363, y: 391, zoom: 2.0, r: Math.PI * 1.9 },
    { x: 86, y: 451, zoom: 2.0, r: Math.PI * 2 },
    { x: 506, y: 336, zoom: 2.0, r: Math.PI * 2 },
    { x: 321, y: 31, zoom: 2.0, r: Math.PI * 0.2 },
  ];

  Hanabi.init('can', source, points);

</script>

stop: false¶ ↑

If you flag a point with stop: false, hanabi will only travel through it.

t: “some text”¶ ↑

If a point has a key t and a string value and a “can_text” (“<canvas_id>_text”) element is present, the innerHTML of this element will be replaced with the string value provided. If no string value is provided, the innerHTML is cleared.

_counter¶ ↑

Similarily, if a “can_counter” (“<canvas_id>_counter”) element is present, its innerHTML will be replaced by the integer value for the current position in the trajectory.

f: function (index) { alert(“my callback !”); }¶ ↑

If the point has a ‘f’ key, its value must be a function and that function gets called when the point is reached.

click back¶ ↑

If you click on the 80 pixel right part of the canvas, hanabi will step back 1 point.

ruler.html¶ ↑

The file ruler.html contains a click, click then copy tool for determining trajectories for your image file.

Make sure to replace the src with the URI/path of your image

<img id="image" src="path/to/my_image.png" />

and then start clicking trajectories (don’t be afraid to scroll in any direction, the script uses pageX / pageY).

issue tracker¶ ↑

github.com/jmettraux/hanabi/issues

author¶ ↑

John Mettraux, githbub.com/jmettraux

license¶ ↑

MIT