Mentalo-drawing-tool NPM

Mentalo drawing tool

A minimalistic pixel art drawing and animation tool.

This tool is written is Javascript and can be integrated in a web page

Integration

The Mentalo Drawing Tool is a component designed to be rendered in a object-to-html-renderer context.

This means the project you want to integrate that drawing tool in must have object-to-html-renderer installed as a dependency, and a rendering root must be set. (See package documentation for more detail).

Then the tool can be instanciated and rendered as a component.

Example

const renderer = require("object-to-html-renderer");

class SomeApp {
	render() {
		return {
			tag: "main",
			contents: [
				new MentaloDrawingTool({
					canvas_ratio: { width: 16, height: 9 },
					canvas_width: 800,
					on_exit_callback: created_image_data => {
						// Do something with your image
					},
					mode: "scene",
					edit_image: some_already_created_image,
					renderer,
				}).render(),
			],
		};
	}
}

renderer.setRenderCycleRoot(new SomeApp());
renderer.renderCycle();

Parameters:

canvas_ratio: A { width, height } object that represents the proportions of the canvas. The values will be used to calculate the height of the canvas from the real canvas_width parameter.
canvas_width: An integer value to define the drawing canvas width in pixels.
on_exit_callback: A callback function that will execute on exiting the tool. If the "exit with the image" option is chosen by the user to exit the drawing tool, the created_image_data parameter will be passed to the callback.
mode: The drawing tool can be started either in "scene" or "object" mode. In "scene" mode, the empty image is filled with white, and the animation mode of the tool is available. In "object" mode, the canvas_ratio parameter is not used, the canvas is square and the pixel frame is filled with transparency, the animation mode is not available, and the maximum image resolution is smaller that for the "scene" mode.
edit_image: If you want to start the tool with an existing image you can pass it in there.
renderer: The reference of the object-to-html-renderer object that is set in your project dependencies.

Created image output data:

If the output is saved, the on_exit_callback function wil be called with an output argument passed in. If the user exits without saving, the argument will be undefined.

The output is formatted like this:

{
    output,
    frame_nb,
    animation_frequency,
    name,
}

output: String - base64/image A base 64 representation of the image data. If the image is an animation, all the frames are gathered in row next to each other in a single image.
frame_nb: Integer The number of frames the animation contains. Will be 1 if the animation mode is off.
animation_frequency: Integer A frequency value for the animation speed. The value defines how often the animation frame should be updated. So if it's 1, the frame will be updated each time the animation loop refreshed, if it's 2 it will update frame once every two cycles, etc. So the speed of the animation will depend on that value and the frame rate (fps) value that is defined in whatever is used to render the animation.
name: String An automatically generated string that stands for the name of the creation. It will be something like "mentalo-drawing-tool-output45632135". You can change it as you like, it doesn't really matter.

Import an existing image

If you want to edit an image you can pass an existing image data with the edit_image parameter when you instanciate the tool. It's also always possible for the user to import data from a previously exported file once the tool is open.

The edit_image paramter must be formated like follows:

{
    src,
    dimensions,
    frame_nb,
    frequency,
}

src: String - base64/image The image in base64 representation. The same you get as the output.
dimensions: Object A {width: Integer, height: Integer} object for the size of the frame in pixels.
frame_nb: The number of frames. Only used if mode is set to "scene".
frequency: The animation refreshment frequency. Only in "scene" mode.