Home

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

Description

Pixel.js is a Diva.js plugin that aims to bring graphic editing power to the large image rendering service Diva provides. At its core, Pixel.js provides tools to layer and classify image pixels by type (background, note, staff line, etc.) directly on a browser. A parallel functionality Pixel.js provides is exporting the layers as a single matrix, which, in turn, can be used to provide the ground truth data for SIMSSA's machine learning algorithm that classifies and isolates the different components of old manuscripts and scores.

Setup and Installation

• Download Diva.js v.6.0 and Pixel.js.
• If necessary, rename the pixel folder to Pixel.js and place the entire folder into diva.js/source/js/plugins
• In diva.js/webpack.config.js you should find the list of plugins included in the Diva build like the following:

plugins: (process.env.NODE_ENV === "production") ? productionPlugins() : developmentPlugins()
}, {
    entry: {
        'download': './source/js/plugins/download.js',
        'manipulation': './source/js/plugins/manipulation.js'
    }

• Include the path to pixel.js file to the list of plugins your plugins entry should look like the following

entry: {
        'pixel': './source/js/plugins/Pixel.js/pixel.js',
        'download': './source/js/plugins/download.js',
        'manipulation': './source/js/plugins/manipulation.js'
    }

• In the Pixel.js directory, run the pixel.sh script using the following command.

$ ./pixel.sh

This will install the dependencies, build and run Diva with the pixel plugin instantiated.

• By the end of the script, You might get a JSHint error. This is okay, Diva should be running on http://localhost:9001/
• You can now start using Pixel by pressing on the pixel plugin icon on top of a page (black square)

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■