How to use Pixel.js
This tutorial focuses on how to use Pixel.js in order to create ground truth.
For installation guidance, visit the Installation Guide.
For development guidance, visit the Developer's Guide or open an issue.
If you do decide to follow this tutorial, you must not skip any steps as each sub-section depends on the completion of the previous sub-section.
In this Tutorial, we will use 3 example PNG files that each contain either notes, staff lines, or text. We will upload them onto Pixel.js and we will correct a few mis-classified pixels on the manuscript Salzinnes, CDN-Hsmu M2149.L4.
Make sure that when Diva.js is loaded, the Salzinnes manuscript is rendered on the page. The title should be displayed at the top center of the page.
Before continuing, be sure to download the three PNG files we will use: PNG Files.
To download them, click on each image name to navigate to the download page for each image.
Now, click on the download button.
Scroll through the Salzinnes manuscript until you see the page with the code QA L-3 R. It should be the 5th page.
Now that you have chosen the page you wish to edit by navigating to it, click on the black square icon at the top of the chosen page in the manuscript in order to activate the Pixel.js plugin (see gif below).
Note that once activated, only the page on which you have activated the plugin will respond to the plugin functionalities. If you wish to edit another page in the manuscript, you must refresh the web page and start again.
A tutorial appears by default when activating the plugin. This pop-up tutorial serves as a reminder of tools that can be found in Pixel.js without taking you through the steps of correcting a specific page. In other words, the pop-up tutorial is not as complete. It is recommended for first-time users to follow the wiki Tutorial (this current one) in order to experience the recommended workflow.
Due to the size of different screens, it is possible that you have trouble scrolling down to the toolbox. If not already done, it is recommended that you turn on your scroll bars.
What causes this problem is the fact that when scrolling with your mouse inside the Diva.js viewport, it is the manuscript within Diva.js that will be scrolled. In order to scroll the web page itself, you need to position your mouse outside of the viewport or simply use the scroll bars themselves.
Notice how the mouse is positioned in the following .gif:
Each layer in Pixel.js represents a category, such as notes or staff lines. When images are uploaded onto a layer, all active pixels in the image will be converted into a single colour.
In this tutorial, we will upload 3 image files onto 3 separate layers.
The more layers there are, the more demanding Pixel.js becomes to the browser. Depending on your browser's speed, Pixel.js' performance may drop as more layers are created. For this reason, it is recommended to only create layers that are needed.
For the purpose of this tutorial, create 2 more layers for a total of 3 layers.
This can be done by pressing on the Create New Layer button or by pressing the keys ctrl + N.
Select the layer you would like to import the image into and press on Import Image. Navigate to the directory in which you have downloaded the 3 files from the pre-tutorial sub-section and select a file to import.
Repeat the same steps for the two remaining layers until all 3 files have been uploaded onto Pixel.js, each on a separate layer.
Note: the colours on your screen may be different from the colours in the .gif.
Once the images are uploaded onto their respective layer, you may want to rename the layers to reflect the category they now represent. In order to do so, double-click on a layer and type in the new layer name.
Press Enter or click outside the layers to save the layer name.
