Heuristically calculate the default staff zone

yinanazhou · yinanazhou · commit aed361d437fb · 2024-05-13T12:33:36.000-04:00
#1210
diff --git a/deployment/server/samples/mei/mei_template.mei b/deployment/server/samples/mei/mei_template.mei
@@ -14,7 +14,7 @@
     <music>
         <facsimile type="transcription">
             <surface>
-                <zone lrx="3830" lry="712" rotate="0.0" ulx="623" uly="498"/>
+                <zone rotate="0.0"/>
             </surface>
         </facsimile>
         <body>
diff --git a/src/Dashboard/UploadFileManager.ts b/src/Dashboard/UploadFileManager.ts
@@ -47,7 +47,7 @@ class UploadFileManager {
     }
   }
 
-  public createMeiFile(filename: string, lrx: number, lry: number): File {
+  public createMeiFile(filename: string, width: number, height: number, staffSpace: number): File {
     try {
       if (!this.meiTemplate) {
         throw new Error('Cannot find MEI template');
@@ -73,11 +73,20 @@ class UploadFileManager {
       const surface = mei.querySelector('surface');
       const surfaceId = 'm-' + uuidv4();
       surface.setAttribute('xml:id', surfaceId);
-      surface.setAttribute('lrx', lrx.toString());
-      surface.setAttribute('lry', lry.toString());
+      surface.setAttribute('lrx', width.toString());
+      surface.setAttribute('lry', height.toString());
+      
       const zone = mei.querySelector('zone');
       const zoneId = 'm-' + uuidv4();
       zone.setAttribute('xml:id', zoneId);
+      const marginRateV = 0.1;
+      const marginRateH = 0.15;
+      const marginV = Math.round(marginRateV * width);
+      const marginH = Math.round(marginRateH * width);
+      zone.setAttribute('ulx', marginH.toString());
+      zone.setAttribute('uly', marginV.toString());
+      zone.setAttribute('lrx', (width - marginH).toString());
+      zone.setAttribute('lry', (marginV + 3 * staffSpace).toString());
 
       const mdiv = mei.querySelector('mdiv');
       mdiv.setAttribute('xml:id', 'm-' + uuidv4());
@@ -107,7 +116,7 @@ class UploadFileManager {
     }
   } 
 
-  public getImgDimension(filename: string): Promise<{ width: number; height: number }> {
+  public getImgDimension(filename: string): Promise<{ width: number; height: number, staffSpace: number }> {
     return new Promise((resolve, reject) => {
       const imgFile = this.getFile(filename);
 
@@ -121,7 +130,51 @@ class UploadFileManager {
       reader.onload = (event) => {
         const img = new Image();
         img.onload = () => {
-          resolve({ width: img.width, height: img.height });
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d', { willReadFrequently: true });
+          if (!ctx) {
+            reject(new Error('Could not get 2D context'));
+            return;
+          }
+
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+
+          // Binarization
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const binaryThreshold = 127;
+          const data = imageData.data;
+          for (let i = 0; i < data.length; i += 4) {
+            const grayscale = (data[i] + data[i + 1] + data[i + 2]) / 3;
+            const binaryValue = grayscale < binaryThreshold ? 0 : 255;
+            data[i] = binaryValue;
+            data[i + 1] = binaryValue;
+            data[i + 2] = binaryValue;
+          }
+          ctx.putImageData(imageData, 0, 0);
+
+          // Finding staff space
+          const whiteRunLengths: number[] = [];  
+          let currSpaceCount = 0;
+          for (let x = 0; x < canvas.width; x++) {
+            // new currSpaceCount for every column
+            const column = ctx.getImageData(x, 0, 1, canvas.height).data;
+            for (let p = 0; p < column.length; p += 4) {
+              // Check if the pixel is black (0) or white (255)
+              if (column[p] === 0 && currSpaceCount > 0) {
+                whiteRunLengths.push(currSpaceCount);
+                currSpaceCount = 0;
+              } else {
+                currSpaceCount++;
+              } 
+            }
+          }
+
+          // Get the second most common value as staff space
+          const staffSpace = whiteRunLengths.length > 0 ? this.findSecondMode(whiteRunLengths) : 0;
+
+          resolve({ width: img.width, height: img.height, staffSpace:  staffSpace });
         };
         img.onerror = () => {
           reject(new Error(`Failed to load image: ${filename}`));
@@ -133,6 +186,20 @@ class UploadFileManager {
     });
   }
 
+  private findSecondMode(arr: number[]): number {
+    const countMap: Map<number, number> = new Map();
+
+    // Count occurrences of each element
+    arr.forEach(element => {
+      const count = (countMap.get(element) || 0) + 1;
+      countMap.set(element, count);
+    });
+
+    const sortedMap = Array.from(countMap.entries()).sort((a, b) => b[1] - a[1]);
+
+    return sortedMap[1][0];
+  }
+
 
   public getFile(key: string): File {
     if (this.allFiles.has(key)) {
diff --git a/src/Dashboard/UploadTools.ts b/src/Dashboard/UploadTools.ts
@@ -107,8 +107,8 @@ export function handleMakePair(): void {
     // Create new MEI file
     fm.getImgDimension(image_filename)
       .then((dimensions) => {
-        const { width, height } = dimensions;
-        const newMeiFile = fm.createMeiFile(mei_filename, width, height);
+        const { width, height, staffSpace } = dimensions;
+        const newMeiFile = fm.createMeiFile(mei_filename, width, height, staffSpace);
         fm.addFile(newMeiFile);
       })
       .catch((error) => {
