Try it

Click here to open the demo

How to use the interface

• Click on the upper left button to open a photo from your computer
• Adjust the scale if required
• Add lines, bolts, belay stations on the photo
• The photo and what you added are automatically saved in your web browser. You can only work on one photo at a time.
• When you're done, click Export image to download a PNG file that you can then embed in a forum, in a paper book, etc.
• Recommended: If you want to be able to re-edit the shapes you have created later on, click Export shapes, this will download a .json file. This file can be loaded on top of an existing image by using the upper left button.

Using it on your website

These are the original instructions for embedding this software inside an existing website. They have no use for you if you just want to create rock climbing topos.

Setup

To use BetaCreator on your site, you will first need to download the code and include the BetaCreator stylesheet, icon sheet, and javascript file on your server. The stylesheet can be found at css/betacreator.css, the icon sheet at css/images/icons_13.png, and the javascript file at js/bin/betacreator.js. The stylesheet expects the icon sheet to be in a folder called images/ that exists along side the stylesheet itself.

Next you will need to include the stylesheet and the javascript file in your page headers as follows:

<link rel="stylesheet" type="text/css" href="stylesheets/betacreator.css" />

<script src="javascripts/betacreator.js"></script>

Usage

To create a BetaCreator instance, you must call BetaCreator with an image element as the first parameter. It takes an optional second parameter which contain settings.

BetaCreator(image, onReady, settings);

So, in the simplest case, using BetaCreator would look something like this:

var foo = BetaCreator(document.getElementById('myImg'));

With some settings, it might look like this:

var foo = BetaCreator(document.getElementById('myImg'), function() {
    fooIsReady = true;
    foo = this; // 'this' in the onReady callback is the same object returned by calling BetaCreator();
},{
    zoom: 'contain',
    height: 400,
    width: '100%',
    parent: document.getElementById('myDiv'),
    onChange: function() {
        // do something (call getData and save it?)
    }
});

The settings are as follows:

zoom

The zoom level for the editor upon load. Accepts a number from 1-1200, 'cover', 'contain' (default).

height

The inner height of the editor, not including the option bar at the top. Can be a number or a percentage as a string ('100%'). If omitted it will be the height of the image.

width

The inner width of the editor. Can be a number or a percentage as a string ('100%'). If omitted it will be the width of the image. Note: there is a minimum width of 556 enforced if you set this to a number or omit it (to fit the option bar).

parent

The parent element for the editor to be appended to. If omitted, the source image will be replaced by the editor.

onChange

A callback function that will be called every time the document is changed by the user.

API

Calling BetaCreator() returns an object with the following API methods on it:

getData(escape:Boolean = false):String

Returns a string of JSON encoded data representing the drawing layer of the editor. It takes an optional boolean escape which, if true, will cause the output of getData to have quotes and special characters (like new lines) escaped. This is particularly useful if you were to store this in a database and inject it into some JavaScript code on the server. For example if you did the following in php, you would need to have the data escaped: myBetaCreator.getData("<?php echo $bcData; ?>");

getImage(includeSource:Boolean = false, type:String = 'png'):String

Returns a base64 encoded data URI of the image. It takes two optional parameters. includeSource is a boolean which, if true, will return the image data for the drawing layer composited with the source image. The type parameter can be either 'png' or 'jpg'. In order for 'jpg' to work, includeSource will have to be true. There is no point in giving back the drawing layer without transparency. With no parameters getImage will produce the image data for the drawing layer as a PNG.

loadData(data:String)

Takes a string of JSON as output from getData and loads it into the editor.