Installation

While it is possible to use Pixel.js on the dev-server, it is also possible to install Pixel.js and use it locally. These installation instructions are primarily for developers who wish to contribute to Pixel.js.

To use Pixel.js on a local host, it is mandatory to first install Diva.js version 6.0.
Quick Start allows you to start using Pixel.js through a script. If you want to install the dependencies on your own, the Alternative Start will guide you through the necessary steps with Homebrew.

Quick Start

---

• 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/source/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)

Alternative Start

---

Instantiating Pixel.js

• include the pixel.js script in the body of your your main html file diva.js/index.html <script src="build/plugins/pixel.js"></script>
• When instantiating diva, include Diva.PixelPlugin to the list of plugins. Your diva instantiation should like something like the following: (Take a look at the Example section for a full HTML example)

var diva = new Diva('diva-wrapper', {
                objectData: "https://images.simssa.ca/iiif/manuscripts/cdn-hsmu-m2149l4/manifest.json",
                plugins: [Diva.DownloadPlugin, Diva.ManipulationPlugin, Diva.PixelPlugin]
            });

Running Diva.js

• Running diva requires npm, gulp, and webpack. You can install these using homebrew and running the following commands

$ brew install npm
$ brew install gulp
$ brew install webpack

• Now to run diva, run the following commands

$ npm install 
$ npm install -g gulp webpack
$ gulp

• copy diva.css from diva.js/source/css/ to build/css/ (if it is not already there)
• Diva and Pixel.js are now running on http://localhost:9001/ and you can now start using Pixel by pressing on the pixel plugin icon on top of a page (black square)