Pixel.js Tools

Toolbox

The Toolbox offers essential tools that aim to reduce the amount of time it takes to create ground-truth data.
The following is a list of available tools:

• Brush
• Rectangle
• Erase
• Grab
• Select
• Lasso

Brush

Painting on layers

The brush tool is a circle brush that allows you to freely draw on a layer. The brush slider allows you to modify the brush size. The mouse paints on click (mouse down) and stops painting on release.

The implementation of the brush tool stores each stroke as a path, linking points within a path together. An action is determined by dragging between a mouse button down and mouse button up. Every separate action is stored separately as an individual path. The paths are stored in an array and thus can all be undone and redone, as desired.

Adjusting brush size

There are two ways to adjust the size of the brush. It is possible to control it through the brush size slider below the layers view. It is also possible to control it through right click.

While painting, on browser zoom, the brush size slider can be out of view. Pixel's brush tool allows you to change its brush size on right mouse button press and drag. In order to grow the brush size this way, press the right mouse button and drag right to grow the size and left to shrink the brush size.

Can be selected by the keyboard key B.

Rectangle

Painting a rectangle

When pressing down on the shift key, the rectangle option draws squares onto layers. Without shift, it allows you to draw rectangles in whichever size you desire within the Diva viewport. When dragging with mouse button down, a preview rectangle will be visible and will only paint and append itself to the layer when the mouse button is released.

Clearing a rectangular area

On right mouse button press and drag, a "subtracting rectangle" is drawn. This rectangle subtracts all paint that is drawn within it. A preview is also shown when clicking and dragging. Once the right mouse button is released, the drawn subtracting rectangle is appended to the layer. It is possible to remove it with the Undo button.

Can be selected by the the keyboard key R.

Erase

The erase tool draws a path and is implemented in a similar way to the brush tool, except clears out the path instead of filling it. On mouse down, the path taken by the mouse will be subtracted from the drawn elements on the selected layer.

Can be selected by the keyboard key E.

Grab

The grab tool allows the user to drag the elements in the viewport to scroll them in any direction. Hold down the left mouse button to move the layers in the desired direction.

Can be selected by the keyboard key G.

Select

The select tool allows users to select a rectangular area of pixels. The selected area can then be copied (Ctrl/Cmd + C) or cut (Ctrl/Cmd + X) from the layer on which the area has been selected. You can then select another layer and that area can then be pasted (Ctrl/Cmd + V) onto the newly selected layer.

This tool is particularly useful for correcting mis-classified pixels.
Can be selected by the keyboard key S.

Lasso

To be implemented.