The Basics

I started this just to have fun over a lunch break to have a custom MS Paint written in JavaScript. But it's going to do more and more, and I'm going to make it extendible.

Installation

Basically just include the file.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-paintbox/jquery.paintbox.js"></script>

<div id='container'></span>

<script>
    $('#container').paintbox({rows: 10, cols: 10});
</script>

Usage

Name Type Default Description
rows integer 50 Number of rows.
cols integer 50 Number of columns.
cell integer 10 Dimensions for pixel cell square.
colors array ... Override colors for pallete via array of CSS colors.
interactive boolean true Whether the paintbox should expect mouse input and draw a palette.
offColor css color string white Set the paintbox background color.

method param type description
'cell' i integer the row, from 0 -> rowcount-1
j integer the column, from 0 -> colcount-1
color CSS color string The color to use (does not need to be in palette)
'line' i integer the row, from 0 -> rowcount-1
j integer the column, from 0 -> colcount-1
color CSS color string The color to use (does not need to be in palette)
direction string The direction from the point, left, right, up, down.
length integer the number of blocks
'rect' i integer the row, from 0 -> rowcount-1, (x0)
j integer the column, from 0 -> colcount-1, (y0)
i2 integer the row, from 0 -> rowcount-1, (x1)
j2 integer the column, from 0 -> colcount-1, (y1)
color CSS color string The color to use (does not need to be in palette)
'fill' i integer the row, from 0 -> rowcount-1, (x0)
j integer the column, from 0 -> colcount-1, (y0)
color CSS color string The color to use (does not need to be in palette)

Demos

I will put a few demos here.

Default paintbox

$('#container').paintbox({});

I put a black background the div because it's default off-color is white.

Specified dimensions

A box where we specify the dimensions

$('#container_2').paintbox({rows: 25, cols: 25});

I put a black background the div because it's default off-color is white.

Specified cell dimensions

A box where we specify the cell dimensions as 5 pixels instead of the default 10.

$('#container_3').paintbox({rows: 25, cols: 25, cell: 5});

I put a black background the div because it's default off-color is white.

Specified other colors

Replace the colors with our own.

$('#container_4').paintbox({colors: ['red', 'purple', 'fuchsia', 'green'], rows: 10, cols: 10});

I put a black background the div because it's default off-color is white.

Programmatic only

You can make the programmatic updates in any mode, however if you only plan to then you can set interactive to false.

$('#container_9').paintbox({interactive: false, rows: 10, cols: 10});
$('#container_9').paintbox('cell', {i : 4, j: 5, color: 'black'});

I put a black background the div because it's default off-color is white.

Programmatic cell update

You can do this, or you can really just trigger a click if you're so inclined, that however will use the current pen color & settings. -- triggering the click doesn't work in non-interactive mode.

$('#container_5').paintbox({colors: ['red', 'purple', 'fuchsia', 'green'], rows: 10, cols: 10});
$('#container_5').paintbox('cell', {i : 4, j: 5, color: 'black'});

I put a black background the div because it's default off-color is white.

Programmatic line drawing

Does not presently support diagonal lines. I may implement this if I switch to a canvas base.

I included a lot of failing varities to test and for fun. The following four bullets should hold errors.

$('#container_6').paintbox({rows : 10, cols: 11});
$('#container_6').paintbox('line', {i : 2, j: 5, color: 'black', direction: 'left', length: 5});
$('#container_6').paintbox('line', {i : 4, j: 4, color: 'red', direction: 'right', length: 5});
$('#container_6').paintbox('line', {i : 4, j: 9, color: 'green', direction: 'up', length: 5});
$('#container_6').paintbox('line', {i : 5, j: 2, color: 'blue', direction: 'down', length: 5});

I put a black background the div because it's default off-color is white.

Programmatic rectangles

This code finds the upper left and lower right points and fills it in from there.

$('#container_7').paintbox({rows : 10, cols: 11});
$('#container_7').paintbox('rect', {i : 1, j: 2, i2: 1, j2: 5, color: 'black'});
$('#container_7').paintbox('rect', {i : 3, j: 5, i2: 6, j2: 1, color: 'red'});
$('#container_7').paintbox('rect', {i : 2, j: 8, i2: 6, j2: 8, color: 'blue'});

I put a black background the div because it's default off-color is white.

Programmatic paint fill

A way to fill an area like the MS paint bucket tool.

$('#container_8').paintbox({rows : 10, cols: 11});
$('#container_8').paintbox('rect', {i : 0, j: 0, i2: 9, j2: 10, color: 'red'});
$('#container_8').paintbox('rect', {i : 1, j: 1, i2: 8, j2: 9, color: 'white'});
$('#container_8').paintbox('line', {i : 1, j: 3, color: 'green', direction: 'down', length: 3});
$('#container_8').paintbox('line', {i : 3, j: 4, color: 'green', direction: 'right', length: 3});
$('#container_8').paintbox('fill', {i : 4, j: 6, color: 'blue'});

I put a black background the div because it's default off-color is white.

Different background coloe

A way to control the background color.

$('#container_10').paintbox({rows : 10, cols: 11, offColor: 'blue'});

I put a black background the div because it's default off-color is white.

License

Apache License 2.0