Home
Pixel.js, pronounced "Pixel-jazzz" [/ˈpɪksəl-d͡ʒæz/], is a Diva.js plugin that aims to bring graphics 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.
Pixel.js' performance depends on your browser's resources. It is recommended to use Google Chrome, as it currently provides the smoothest Pixel.js experience.
Currently, a demo instance of Pixel.js is running on Github pages. It can be reached at https://ddmal.github.io/Pixel.js/.
If you wish to run Pixel.js locally, you may consult the steps here.
To start using Pixel.js, navigate to the page you wish to edit and click on the black square icon at the top of the selected page.
Currently, Pixel.js only allows editing of one page at a time. If a document with multiple pages is loaded on the Diva.js renderer, then only the page on which Pixel.js is activated will react to the plugin's functionalities. If you activate Pixel.js on the wrong page, you will have to refresh the page and start over.
The Pixel.js plugin can be switched off by clicking the icon again.
On reactivation, Pixel.js will remember the edits and changes made in the last editing session as long as the browser's cache is not cleared.
It is recommended that you turn on your browser's scroll bars in order to navigate to the toolbox more easily.
Since the Toolbox is located at the bottom of the Diva.js viewport, it may be difficult to scroll down to the Toolbox without dragging the scroll bar itself depending on the dimensions of your monitor.
MacOS Users
To turn on the scroll bars, click on the Apple menu at the top-left of the screen and select System Preferences in the drop-down menu. Select the first icon titled General Preferences. Find the section named Show scroll bars and select Always.
We have written a tutorial that allows you to familiarize yourself with the Pixel.js environment. The tutorial walks you through the basic Pixel.js functionalities and shows you how to use each tool inside the toolbox.
Please follow the instructions here: Tutorial.
You may open Pixel.js on another page to try it with the tutorial.