Drawing Bounding Box from JIIX Export on initial Handwriting
B
Brhempen
started a topic
over 2 years ago
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...
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>";
Both position and size of the bounding box do not seem make align with the strokes. What am I missing?
Best Answer
B
Brhempen
said
over 2 years ago
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:
I am currently a bit puzzled, as your algortithm seems fine to me.
Are you getting the ink from a web browser, or another writing device (e.g. digital pen, tablet...)?
Indeed, it looks like the resolution of the written ink is more around 150 DPI?
Can you please check and let us know?
Best regards,
Olivier
B
Brhempen
said
over 2 years ago
Answer
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:
Brhempen
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...
3. ... and convert it so it can be fed into the Batch API which gives me the follow JIIX object:
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:
5. This is the result I get:
Both position and size of the bounding box do not seem make align with the strokes. What am I missing?
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:
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:
- Oldest First
- Popular
- Newest First
Sorted by Oldest FirstBrhempen
Since I can' seem to edit my previous post:
The code in step 5 was supposed to be the SVG code:
Olivier @MyScript
Dear Brhempen,
thank you for contacting us.
I am currently a bit puzzled, as your algortithm seems fine to me.
Are you getting the ink from a web browser, or another writing device (e.g. digital pen, tablet...)?
Indeed, it looks like the resolution of the written ink is more around 150 DPI?
Can you please check and let us know?
Best regards,
Olivier
Brhempen
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:
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:
1 person likes this