Forums

I am tring to create a simple web page to show the bounding box of the handwriting.This is my request payload

{"width": 1850, "height": 932, "configuration": {"text": {"guides": {"enable": true}, "smartGuide": true, "smartGuideFadeOut": {"enable": false, "duration": 10000}, "mimeTypes": ["text/plain", "application/vnd.myscript.jiix"], "margin": {"top": 0, "left": 0, "right": 0, "bottom": 0}}, "lang": "en_US", "export": {"jiix": {"bounding-box": true, "strokes": false, "text": {"chars": true, "words": true}}}}, "xDPI": 96, "yDPI": 96, "contentType": "Text", "theme": "ink {color: #000000;-myscript-pen-width: 1;-myscript-pen-fill-style: none;-myscript-pen-fill-color: #FFFFFF00;}.math {font-family: STIXGeneral;}.math-solved {font-family: STIXGeneral;color: #A8A8A8FF;}.text {font-family: Open Sans;font-size: 10;}", "strokeGroups": [{"penStyle": null, "strokes": [{"x": [143, 145, 145, 145, 145, 143, 143, 143, 143, 138, 138, 138, 138, 136, 136, 137, 137, 143, 143, 153, 153, 179, 179, 184, 184, 186, 186, 186, 186, 181, 181, 182, 182, 189, 189, 199, 199, 205, 205, 210, 210, 225, 225, 229, 229, 229, 229, 222, 222, 209, 209, 200, 200, 198, 198, 198, 198, 200, 200, 208, 208, 221, 221, 230, 230, 234, 234, 238, 238, 254, 254, 266, 266, 276, 276, 287, 287, 290, 290, 291, 291, 289, 289, 284, 284, 277, 277, 262, 262, 261, 261, 257, 257, 258, 258, 262, 262, 273, 273, 283, 283, 319, 319, 327, 327, 306, 306, 298, 298, 294, 294, 296, 296, 301, 301, 313, 313, 323, 323, 329, 329, 330, 330, 330, 330, 328, 328, 328, 328, 331, 331, 347, 347, 358, 358, 363, 363, 363, 363, 360, 360, 351, 351, 347, 347, 341, 341, 334, 334, 334], "y": [42, 42, 42, 68, 68, 94, 94, 121, 121, 177, 177, 212, 212, 229, 229, 199, 199, 184, 184, 168, 168, 136, 136, 138, 138, 145, 145, 158, 158, 178, 178, 206, 206, 209, 209, 209, 209, 207, 207, 201, 201, 174, 174, 161, 161, 157, 157, 154, 154, 157, 157, 169, 169, 174, 174, 184, 184, 190, 190, 200, 200, 209, 209, 210, 210, 208, 208, 204, 204, 177, 177, 163, 163, 147, 147, 125, 125, 116, 116, 103, 103, 104, 104, 115, 115, 124, 124, 155, 155, 166, 166, 179, 179, 185, 185, 187, 187, 187, 187, 182, 182, 129, 129, 103, 103, 146, 146, 158, 158, 180, 180, 186, 186, 191, 191, 191, 191, 188, 188, 179, 179, 174, 174, 177, 177, 179, 179, 189, 189, 195, 195, 199, 199, 191, 191, 182, 182, 174, 174, 165, 165, 160, 160, 160, 160, 164, 164, 175, 175, 178]}, {"x": [771, 765, 765, 764, 764, 767, 767, 779, 779, 784, 784, 789, 789, 803, 803, 812, 812, 813, 813, 811, 811, 808, 808, 807, 807, 805, 805, 805, 805, 810, 810, 813, 813, 820, 820, 829, 829, 849, 849, 854, 854, 856, 856, 856, 856, 854, 854, 853], "y": [423, 455, 455, 470, 470, 473, 473, 475, 475, 474, 474, 470, 470, 455, 455, 438, 438, 428, 428, 432, 432, 433, 433, 446, 446, 451, 451, 462, 462, 471, 471, 473, 473, 476, 476, 476, 476, 448, 448, 436, 436, 426, 426, 424, 424, 424, 424, 427]}, {"x": [871, 863, 863, 863, 863, 861, 861, 861, 861, 863, 863, 870, 870, 885, 885, 889, 889, 893, 893, 898, 898, 896, 896, 889], "y": [446, 458, 458, 462, 462, 465, 465, 469, 469, 472, 472, 475, 475, 476, 476, 475, 475, 471, 471, 453, 453, 450, 450, 448]}, {"x": [917, 916, 916, 909, 909, 909, 909, 922, 922, 931, 931, 945, 945, 947, 947, 947], "y": [450, 458, 458, 479, 479, 475, 475, 457, 457, 452, 452, 452, 452, 453, 453, 455]}, {"x": [1008, 997, 997, 989, 989, 982, 982, 981, 981, 982, 982, 986, 986, 1012], "y": [420, 445, 445, 458, 458, 477, 477, 494, 494, 497, 497, 499, 499, 494]}, {"x": [1040, 1040, 1040, 1038, 1038, 1033, 1033, 1026, 1026, 1023, 1023, 1024, 1024, 1038, 1038, 1045, 1045, 1069, 1069, 1086, 1086, 1097, 1097, 1110, 1110, 1103, 1103, 1096, 1096, 1091, 1091, 1086, 1086, 1052, 1052, 1052, 1052, 1050, 1050, 1050, 1050, 1053, 1053, 1059], "y": [484, 470, 470, 467, 467, 467, 467, 472, 472, 481, 481, 484, 484, 483, 483, 480, 480, 461, 461, 443, 443, 426, 426, 410, 410, 418, 418, 422, 422, 429, 429, 433, 433, 481, 481, 485, 485, 488, 488, 496, 496, 500, 500, 502]}]}], "conversionState": "DIGITAL_EDIT"}

the web page looks like this, I would like to draw two bouding boxes around 'hello' and 'world':

the recognition result:

{"bounding-box":{"height":24.6935863,"width":84.3073273,"x":37.0349541,"y":6.40563202},"chars":[{"bounding-box":{"height":9.59436798,"width":6.46897888,"x":37.0349541,"y":6.40563202},"candidates":["h","k","b","H","K","t"],"grid":[{"x":37.1750565,"y":1.62613869},{"x":42.8822021,"y":1.62613869},{"x":42.8822021,"y":19.4611683},{"x":37.1750565,"y":19.4611683}],"items":[{"baseline":1,"bounding-box":{"height":7.59436798,"width":4.46897888,"x":38.0349541,"y":7.40563202},"id":"0000060001000700ff00","label":"h","left-side-bearing":-0.192414433,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942}],"label":"h","word":0},{"bounding-box":{"height":7.54798126,"width":6.52272034,"x":42.8227119,"y":8.55123711},"grid":[{"x":42.8822021,"y":1.62613869},{"x":48.5810776,"y":1.62613869},{"x":48.5810776,"y":19.4611683},{"x":42.8822021,"y":19.4611683}],"items":[{"baseline":0.982116222,"bounding-box":{"height":5.54798126,"width":4.52272034,"x":43.8227119,"y":9.55123711},"id":"0000070001000700ff00","label":"e","left-side-bearing":-0.124314442,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.964232564}],"label":"e","word":0},{"bounding-box":{"height":9.59436798,"width":2.81028748,"x":48.6766205,"y":6.40563202},"grid":[{"x":48.5810776,"y":1.62613869},{"x":50.9747314,"y":1.62613869},{"x":50.9747314,"y":19.4611683},{"x":48.5810776,"y":19.4611683}],"items":[{"baseline":1,"bounding-box":{"height":7.59436798,"width":0.810287476,"x":49.6766205,"y":7.40563202},"id":"0000080001000700ff00","label":"l","left-side-bearing":-1.06122446,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942}],"label":"l","word":0},{"bounding-box":{"height":9.59436798,"width":2.81028748,"x":51.3224525,"y":6.40563202},"candidates":["l","t"],"grid":[{"x":50.9747314,"y":1.62613869},{"x":53.6205673,"y":1.62613869},{"x":53.6205673,"y":19.4611683},{"x":50.9747314,"y":19.4611683}],"items":[{"baseline":1,"bounding-box":{"height":7.59436798,"width":0.810287476,"x":52.3224525,"y":7.40563202},"id":"0000090001000700ff00","label":"l","left-side-bearing":-1.06122446,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942}],"label":"l","word":0},{"bounding-box":{"height":7.54798126,"width":6.91546249,"x":53.6706314,"y":8.55123711},"candidates":["o","e","a","s"],"grid":[{"x":53.6205673,"y":1.62613869},{"x":59.5860939,"y":1.62613869},{"x":59.5860939,"y":19.4611683},{"x":53.6205673,"y":19.4611683}],"items":[{"baseline":0.982116222,"bounding-box":{"height":5.54798126,"width":4.91546249,"x":54.6706314,"y":9.55123711},"id":"00000a0001000700ff00","label":"o","left-side-bearing":-0.114381827,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.964232564}],"label":"o","word":0},{"grid":[{"x":59.5860939,"y":1.62613869},{"x":62.231926,"y":1.62613869},{"x":62.231926,"y":19.4611683},{"x":59.5860939,"y":19.4611683}],"label":"\n","word":1},{"bounding-box":{"height":7.34954453,"width":9.55715942,"x":93.2849579,"y":23.6504555},"candidates":["w","W","N"],"grid":[{"x":94.1733398,"y":19.4611683},{"x":101.976471,"y":19.4611683},{"x":101.976471,"y":38.0243149},{"x":94.1733398,"y":38.0243149}],"items":[{"baseline":1,"bounding-box":{"height":5.34954453,"width":7.55715942,"x":94.2849579,"y":24.6504555},"id":"00000b0001000700ff00","label":"w","left-side-bearing":-0.0147702415,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":1}],"label":"w","word":2},{"bounding-box":{"height":7.54798126,"width":6.91545868,"x":101.673073,"y":23.5512371},"candidates":["o","u"],"grid":[{"x":101.976471,"y":19.4611683},{"x":107.892395,"y":19.4611683},{"x":107.892395,"y":38.0243149},{"x":101.976471,"y":38.0243149}],"items":[{"baseline":0.982116222,"bounding-box":{"height":5.54798126,"width":4.91545868,"x":102.673073,"y":24.5512371},"id":"00000c0001000700ff00","label":"o","left-side-bearing":-0.114381827,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.964232564}],"label":"o","word":2},{"bounding-box":{"height":7.44876289,"width":5.07991791,"x":108.056145,"y":23.5512371},"grid":[{"x":107.892395,"y":19.4611683},{"x":112.282822,"y":19.4611683},{"x":112.282822,"y":38.0243149},{"x":107.892395,"y":38.0243149}],"items":[{"baseline":1,"bounding-box":{"height":5.44876289,"width":3.07991791,"x":109.056145,"y":24.5512371},"id":"00000d0001000700ff00","label":"r","left-side-bearing":-0.279194623,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.981790662}],"label":"r","word":2},{"bounding-box":{"height":9.59436798,"width":2.81028748,"x":112.289482,"y":21.405632},"grid":[{"x":112.282822,"y":19.4611683},{"x":114.587593,"y":19.4611683},{"x":114.587593,"y":38.0243149},{"x":112.282822,"y":38.0243149}],"items":[{"baseline":1,"bounding-box":{"height":7.59436798,"width":0.810287476,"x":113.289482,"y":22.405632},"id":"00000e0001000700ff00","label":"l","left-side-bearing":-1.06122446,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942}],"label":"l","word":2},{"bounding-box":{"height":9.69358635,"width":6.70462036,"x":114.637657,"y":21.405632},"grid":[{"x":114.587593,"y":19.4611683},{"x":120.342278,"y":19.4611683},{"x":120.342278,"y":38.0243149},{"x":114.587593,"y":38.0243149}],"items":[{"baseline":0.987103701,"bounding-box":{"height":7.69358635,"width":4.70462036,"x":115.637657,"y":22.405632},"id":"00000f0001000700ff00","label":"d","left-side-bearing":-0.119507916,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.695325136}],"label":"d","word":2}],"id":"MainBlock","label":"hello\nworld","type":"Text","version":"3","words":[{"bounding-box":{"height":9.69358635,"width":23.5511398,"x":37.0349541,"y":6.40563202},"candidates":["hello","helto","Hello","helle","hells"],"first-char":0,"items":[{"baseline":1,"bounding-box":{"height":7.59436798,"width":4.46897888,"x":38.0349541,"y":7.40563202},"id":"0000060001000700ff00","label":"h","left-side-bearing":-0.192414433,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942},{"baseline":0.982116222,"bounding-box":{"height":5.54798126,"width":4.52272034,"x":43.8227119,"y":9.55123711},"id":"0000070001000700ff00","label":"e","left-side-bearing":-0.124314442,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.964232564},{"baseline":1,"bounding-box":{"height":7.59436798,"width":0.810287476,"x":49.6766205,"y":7.40563202},"id":"0000080001000700ff00","label":"l","left-side-bearing":-1.06122446,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942},{"baseline":1,"bounding-box":{"height":7.59436798,"width":0.810287476,"x":52.3224525,"y":7.40563202},"id":"0000090001000700ff00","label":"l","left-side-bearing":-1.06122446,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942},{"baseline":0.982116222,"bounding-box":{"height":5.54798126,"width":4.91546249,"x":54.6706314,"y":9.55123711},"id":"00000a0001000700ff00","label":"o","left-side-bearing":-0.114381827,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.964232564}],"label":"hello","last-char":4},{"first-char":5,"label":"\n","last-char":5,"reflow-label":" "},{"bounding-box":{"height":9.69358635,"width":28.0573196,"x":93.2849579,"y":21.405632},"candidates":["world","World","Wurld","worled","Worled"],"first-char":6,"items":[{"baseline":1,"bounding-box":{"height":5.34954453,"width":7.55715942,"x":94.2849579,"y":24.6504555},"id":"00000b0001000700ff00","label":"w","left-side-bearing":-0.0147702415,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":1},{"baseline":0.982116222,"bounding-box":{"height":5.54798126,"width":4.91545868,"x":102.673073,"y":24.5512371},"id":"00000c0001000700ff00","label":"o","left-side-bearing":-0.114381827,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.964232564},{"baseline":1,"bounding-box":{"height":5.44876289,"width":3.07991791,"x":109.056145,"y":24.5512371},"id":"00000d0001000700ff00","label":"r","left-side-bearing":-0.279194623,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.981790662},{"baseline":1,"bounding-box":{"height":7.59436798,"width":0.810287476,"x":113.289482,"y":22.405632},"id":"00000e0001000700ff00","label":"l","left-side-bearing":-1.06122446,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.70440942},{"baseline":0.987103701,"bounding-box":{"height":7.69358635,"width":4.70462036,"x":115.637657,"y":22.405632},"id":"00000f0001000700ff00","label":"d","left-side-bearing":-0.119507916,"timestamp":"2024-04-22 09:39:41.169000","type":"glyph","x-height":0.695325136}],"label":"world","last-char":10}]}

draw the bouding box using the following code:

function drawBoundingBoxes() {

  const ppm = 96 / 25.4;

  if (recognition_result != null) {

    for (const word of recognition_result.words) {

      const boundingBox = word['bounding-box'];

      if (boundingBox != null) {

        ctx.strokeStyle = 'red';

        ctx.lineWidth = 1;

        ctx.strokeRect(boundingBox.x * ppm, boundingBox.y * ppm, boundingBox.width * ppm, boundingBox.height * ppm);

      }

    }

  }

}

looks like this:

What am I missing?

Dear Gwenaëlle,

Thank you very much for your assistance. I've implemented the method you suggested, and I'm pleased to confirm that it has indeed resolved the issue.