Forums

Hi there, I want to draw the bounding box that I get from JIIX Export using the Batch API onto the original strokes (using SVG) but the bounding box does not align with the strokes at all. This is how I currently try to achieve it:

1. First, I use the iinkJS editor to draw the strokes: 

2. Then, I take the editorElement.model.strokeGroups...

[
  {
    penStyle: {},
    strokes: [
      {
        type: "stroke",
        x: [
          63, 68, 73, 80, 85, 90, 94, 97, 98, 100, 103, 105, 109, 112, 115, 119,
          121, 123, 124, 122,
        ],
        y: [
          94, 90, 84, 78, 71, 59, 51, 46, 43, 40, 41, 46, 54, 63, 70, 80, 87,
          92, 95, 92,
        ],
        t: [
          1656930388122, 1656930388202, 1656930388218, 1656930388235,
          1656930388252, 1656930388268, 1656930388284, 1656930388302,
          1656930388318, 1656930388352, 1656930388734, 1656930388752,
          1656930388769, 1656930388784, 1656930388802, 1656930388818,
          1656930388836, 1656930388852, 1656930388886, 1656930389027,
        ],
        p: [
          0.5, 0.7469560465564757, 0.7968145931762148, 0.8133650328603405,
          0.8067411006940866, 0.639444872453601, 0.8105224395454083,
          0.763022254896924, 0.6831899108492184, 0.7007103955941203,
          0.6831899108492184, 0.7531128489300326, 0.8105224395454083,
          0.8159623787273663, 0.7941045496521526, 0.6718181965088709,
          0.7891492414771674, 0.7531128489300326, 0.6831899108492184,
          0.7007103955941203,
        ],
        l: [
          0, 6.4031242374328485, 14.213373913339503, 23.43291837063239,
          32.035243637675016, 45.035243637675016, 53.979515547674175,
          59.810467442519474, 62.97274510268785, 66.57829637815185,
          69.74057403832023, 75.12573884545473, 84.0700107554539,
          93.55684373595903, 101.17261684182294, 111.94294645609195,
          119.22305634537247, 124.60822115250697, 127.77049881267536,
          131.37605008813935,
        ],
        width: 1.8897637795275593,
        pointerType: "mouse",
        pointerId: 1,
        color: "#000000",
        "-myscript-pen-width": 1,
        "-myscript-pen-fill-style": "none",
        "-myscript-pen-fill-color": "#FFFFFF00",
      },
      {
        type: "stroke",
        x: [87, 91, 97, 104, 112, 117, 120],
        y: [71, 71, 71, 71, 71, 71, 71],
        t: [
          1656930389579, 1656930389669, 1656930389685, 1656930389702,
          1656930389718, 1656930389735, 1656930389752,
        ],
        p: [
          0.5, 0.8, 0.7665225987135362, 0.78472787299413, 0.7993507587287858,
          0.7436746598382117, 0.6761535882018319,
        ],
        l: [0, 4, 10, 17, 25, 30, 33],
        width: 1.8897637795275593,
        pointerType: "mouse",
        pointerId: 1,
        color: "#000000",
        "-myscript-pen-width": 1,
        "-myscript-pen-fill-style": "none",
        "-myscript-pen-fill-color": "#FFFFFF00",
      },
    ],
  },
]

3. ... and convert it so it can be fed into the Batch API which gives me the follow JIIX object:

{
  type: "Text",
  "bounding-box": {
    x: 9.53495407,
    y: 26.8355789,
    width: 8.32519531,
    height: 9.16442108,
  },
  label: "A",
  words: [
    {
      label: "A",
      candidates: ["A", "a", "t", "tt", "A-"],
      "bounding-box": {
        x: 9.53495407,
        y: 26.8355789,
        width: 8.32519531,
        height: 9.16442108,
      },
      items: [
        {
          type: "glyph",
          timestamp: "2022-07-04 10:26:28.122000",
          label: "A",
          "bounding-box": {
            x: 10.5349541,
            y: 27.8355789,
            width: 6.32519531,
            height: 7.16442108,
          },
          baseline: 1.00000012,
          "x-height": 0.746682107,
          id: "0000020001000700ff00",
        },
      ],
    },
  ],
  version: "3",
  id: "MainBlock",
}

4. Now both the original strokes as well as the bounding boxes should be available. Now I create an SVG with the strokes x and y coordinates (which seems to work fine) as well as the bounding box's x, y, width and height (converted from mm to pixel) to draw a red react rectangle. This is my code to create the SVG:

let svg =
  '<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="3" height="500" width="900">';

for (const strokesWithStyles of STROKES_OBJ) {
  for (const stroke of strokesWithStyles.strokes) {
    svg += '<path d="';
    for (let index = 0; index < stroke.x.length; ++index) {
      const x_coord = stroke.x[index];
      const y_coord = stroke.y[index];

      if (index === 0) {
        svg += `M${x_coord} ${y_coord}`;
      } else {
        svg += ` L${x_coord} ${y_coord}`;
      }
    }
    svg += '" />';
  }
}

const dpi = 96; // 96 scheint standard zu sein
const mm_to_pixel = dpi / 25.4;

for (let index = 0; index < JIIX_OBJ.words.length; ++index) {
  const word = JIIX_OBJ.words[index];
  const bbox = word["bounding-box"];

  const x_coord = bbox.x * mm_to_pixel;
  const y_coord = bbox.y * mm_to_pixel;
  const width = bbox.width * mm_to_pixel;
  const height = bbox.height * mm_to_pixel;

  svg += `<rect x="${x_coord}" y="${y_coord}" width="${width}" height="${height}" style="fill:none;stroke:red" />`;
}

svg += "</svg>";

5. This is the result I get:

{
   "type":"Text",
   "bounding-box":{
      "x":9.53495407,
      "y":26.8355789,
      "width":8.32519531,
      "height":9.16442108
   },
   "label":"A",
   "words":[
      {
         "label":"A",
         "candidates":[
            "A",
            "a",
            "t",
            "tt",
            "A-"
         ],
         "bounding-box":{
            "x":9.53495407,
            "y":26.8355789,
            "width":8.32519531,
            "height":9.16442108
         },
         "items":[
            {
               "type":"glyph",
               "timestamp":"2022-07-04 10:26:28.122000",
               "label":"A",
               "bounding-box":{
                  "x":10.5349541,
                  "y":27.8355789,
                  "width":6.32519531,
                  "height":7.16442108
               },
               "baseline":1.00000012,
               "x-height":0.746682107,
               "id":"0000020001000700ff00"
            }
         ]
      }
   ],
   "version":"3",
   "id":"MainBlock"
}

Both position and size of the bounding box do not seem make align with the strokes. What am I missing?

Since I can' seem to edit my previous post:

The code in step 5 was supposed to be the SVG code:

<svg fill="white" fill-opacity="0" stroke="#000" stroke-width="3" height="500" width="900">
   <path d="M63 94 L68 90 L73 84 L80 78 L85 71 L90 59 L94 51 L97 46 L98 43 L100 40 L103 41 L105 46 L109 54 L112 63 L115 70 L119 80 L121 87 L123 92 L124 95 L122 92" />
   <path d="M87 71 L91 71 L97 71 L104 71 L112 71 L117 71 L120 71" />
   <rect x="112.61756775590551" y="316.95565629921265" width="98.32907846456693" height="108.24119385826772" style="fill:none;stroke:red" />
</svg>

Thanks Oliver, with your feedback I was able to find the bug in an earlier step which I posted on the forums a few weeks ago: Taking a closer look at the JSON the Batch API Call included the following: 

height: 0,
width: 0,

This resulted in a skewed JIIX response so drawing the bounding boxes did not work. Other than the JIIX object the code above is fine. Now it works flawlessly: