I am trying to build a custom app using iink websockets. but whenever i draw something on my svg and send the strokes through websockets and append the incoming svg patches in my svg the result is such that everything seems to be mapped into top left corner of my parent svg. for example if i use a 1000 * 1000 pixel svg the result is mapped on the top left 200 * 200 corner of that svg. like in this picture whole white part is my canvas if i write something at the start of the arrow the result will be printed at the location where arrow is pointed
Best Answer
O
Olivier @MyScript
said
over 1 year ago
Dear Faisal,
thank you for the update.
Indeed, you shall use the svg from the server to properly render the strokes or converted result.
is there a way to draw recognized text exactly where i used my brush >>No, this is not possible, it is "as designed" in the iink SDK.
existing content to remain as it is on type change. is it possible? >>This cannot be done ; in your case, the easier solution is that you store the written strokes on your side, and when switching to a new part, add these again. If you want to keep the exisiting converted result (e.g. you have converted Math and want to add text), this cannot be done.
First, can you confirm you are using the iinkJS library in your project? Indeed, although not mandatory, it significantly helps to get the best of our iink Cloud.
If this doesn't help, feel free to provide with a project that allows to reproduce out of the box, so that we can investigate faster.
Best regards,
Olivier
F
Faisal
said
over 1 year ago
Thanks for the reply
No i am not using iinkJs library, i am using web sockets for text and math recognition and rest api for diagram. Also i am not restyling SVG patches with CSS and applying them as received using JavaScript. As of configuration i followed this link "https://developer.myscript.com/docs/interactive-ink/1.4/web/websockets/messages/" exactly without changing anything except in viewsize height and width i gave height and width of my own SVG. and yes i receive same svg patch messages except i have never received set_attribute and remove_attribute. One thing i am doing is i am not replacing the main parent svg that i receive immediately after handshake instead i am keeping my own svg and applying the patches to it. i wonder if that could have caused this problem.
F
Faisal
said
over 1 year ago
Also i could provide the link to my project if you want to investigate yourself.
O
Olivier @MyScript
said
over 1 year ago
Dear Faisal,
currently, is there a specific reason you are not using the iinkJS? You have a custom stroker? Or an already existing environment that is not compatible with the iinkJS? Indeed, we did a lot of work in the iinkJS to help integrate the webSocket, and it is likely you may face issues re-creating what is done in the iinkJS.
You then understand we recommend you refer to the source of the iinkJS, it will help in case you face issues: https://github.com/MyScript/iinkJS
In the current case, such behavior usually occurs when the init of the webSocket is not properly done, such as an incorrect resolution or a view size not properly set.
In your case, which resolution did you set? Can you please try with 96 (this is the defautl resolution we set)?
Which view size did you set? Can you please try with viewSizeHeight of 734 and viewSizeWidth of 1018?
For information, these values are set in the buildNewContentPackageInput function of the iinkJS (iinkJS\src\recognizer\websocketiinkWsRecognizer.js), which is called in the buildWebSocketCallback function and later called at the init of the webSocket. Looking at this code may help.
Let us know if this helps.
Best regards,
Olivier
F
Faisal
said
over 1 year ago
Thanks
I am using an open source whiteboard and customizing it.iinkjs isnt compatible with it.
it seems like the issue was with me using my own parent svg instead of the svg sent from the iink server.its working great when i replaced my svg with the one from the server. now last issue i am facing is that when i draw a diagram or some maths the resulting recognized svg is placed at exactly tha same spot where i drew my strokes but in case of text it always goes to the top of view and even if a write some text at two different points of my canvas(svg) sometimes the recognized text overlaps and difficult to read. i checked in iink demo app its same there as well. is there a way to draw recognized text exactly where i used my brush?
F
Faisal
said
over 1 year ago
And one more thing on your site u have three different demo apps for text, math and diagram but i want to implement all three in one app. but when i change type from diagram to text or math or other way around it clears the canvas. i want the existing content to remain as it is on type change. is it possible?
O
Olivier @MyScript
said
over 1 year ago
Answer
Dear Faisal,
thank you for the update.
Indeed, you shall use the svg from the server to properly render the strokes or converted result.
is there a way to draw recognized text exactly where i used my brush >>No, this is not possible, it is "as designed" in the iink SDK.
existing content to remain as it is on type change. is it possible? >>This cannot be done ; in your case, the easier solution is that you store the written strokes on your side, and when switching to a new part, add these again. If you want to keep the exisiting converted result (e.g. you have converted Math and want to add text), this cannot be done.
Faisal
Hi
I am trying to build a custom app using iink websockets. but whenever i draw something on my svg and send the strokes through websockets and append the incoming svg patches in my svg the result is such that everything seems to be mapped into top left corner of my parent svg. for example if i use a 1000 * 1000 pixel svg the result is mapped on the top left 200 * 200 corner of that svg. like in this picture whole white part is my canvas if i write something at the start of the arrow the result will be printed at the location where arrow is pointed
Dear Faisal,
thank you for the update.
Indeed, you shall use the svg from the server to properly render the strokes or converted result.
is there a way to draw recognized text exactly where i used my brush
>>No, this is not possible, it is "as designed" in the iink SDK.
existing content to remain as it is on type change. is it possible?
>>This cannot be done ; in your case, the easier solution is that you store the written strokes on your side, and when switching to a new part, add these again.
If you want to keep the exisiting converted result (e.g. you have converted Math and want to add text), this cannot be done.
Best regards,
Olivier
- Oldest First
- Popular
- Newest First
Sorted by Oldest FirstOlivier @MyScript
Dear Faisal,
thank you for contacting us and your questions.
First, can you confirm you are using the iinkJS library in your project? Indeed, although not mandatory, it significantly helps to get the best of our iink Cloud.
Then, is it possible to learn more the way you proceed to apply the svg patches? Can you confirm you do not re-style these on the client-side with CSS? Are you using exclusively Javascript to manipulate the content inside the editor? https://developer.myscript.com/docs/interactive-ink/1.4/web/websockets/architecture/#overall-architecture
Which configuration did you set to you renderer? Did you keep the default one? https://developer.myscript.com/docs/interactive-ink/1.4/web/iinkjs/advanced-usage/#renderer
I also invite you to refer to the SVG patch messages sent from the server to the browser, so that you can check if these are correct: https://developer.myscript.com/docs/interactive-ink/1.4/web/websockets/messages/#svg-patch
If this doesn't help, feel free to provide with a project that allows to reproduce out of the box, so that we can investigate faster.
Best regards,
Olivier
Faisal
Thanks for the reply
No i am not using iinkJs library, i am using web sockets for text and math recognition and rest api for diagram. Also i am not restyling SVG patches with CSS and applying them as received using JavaScript. As of configuration i followed this link "https://developer.myscript.com/docs/interactive-ink/1.4/web/websockets/messages/" exactly without changing anything except in viewsize height and width i gave height and width of my own SVG. and yes i receive same svg patch messages except i have never received set_attribute and remove_attribute. One thing i am doing is i am not replacing the main parent svg that i receive immediately after handshake instead i am keeping my own svg and applying the patches to it. i wonder if that could have caused this problem.
Faisal
Also i could provide the link to my project if you want to investigate yourself.
Olivier @MyScript
Dear Faisal,
currently, is there a specific reason you are not using the iinkJS? You have a custom stroker? Or an already existing environment that is not compatible with the iinkJS? Indeed, we did a lot of work in the iinkJS to help integrate the webSocket, and it is likely you may face issues re-creating what is done in the iinkJS.
You then understand we recommend you refer to the source of the iinkJS, it will help in case you face issues: https://github.com/MyScript/iinkJS
In the current case, such behavior usually occurs when the init of the webSocket is not properly done, such as an incorrect resolution or a view size not properly set.
In your case, which resolution did you set? Can you please try with 96 (this is the defautl resolution we set)?
Which view size did you set? Can you please try with viewSizeHeight of 734 and viewSizeWidth of 1018?
For information, these values are set in the buildNewContentPackageInput function of the iinkJS (iinkJS\src\recognizer\websocketiinkWsRecognizer.js), which is called in the buildWebSocketCallback function and later called at the init of the webSocket. Looking at this code may help.
Let us know if this helps.
Best regards,
Olivier
Faisal
Thanks
I am using an open source whiteboard and customizing it.iinkjs isnt compatible with it.
it seems like the issue was with me using my own parent svg instead of the svg sent from the iink server.its working great when i replaced my svg with the one from the server. now last issue i am facing is that when i draw a diagram or some maths the resulting recognized svg is placed at exactly tha same spot where i drew my strokes but in case of text it always goes to the top of view and even if a write some text at two different points of my canvas(svg) sometimes the recognized text overlaps and difficult to read. i checked in iink demo app its same there as well. is there a way to draw recognized text exactly where i used my brush?
Faisal
And one more thing on your site u have three different demo apps for text, math and diagram but i want to implement all three in one app. but when i change type from diagram to text or math or other way around it clears the canvas. i want the existing content to remain as it is on type change. is it possible?
Olivier @MyScript
Dear Faisal,
thank you for the update.
Indeed, you shall use the svg from the server to properly render the strokes or converted result.
is there a way to draw recognized text exactly where i used my brush
>>No, this is not possible, it is "as designed" in the iink SDK.
existing content to remain as it is on type change. is it possible?
>>This cannot be done ; in your case, the easier solution is that you store the written strokes on your side, and when switching to a new part, add these again.
If you want to keep the exisiting converted result (e.g. you have converted Math and want to add text), this cannot be done.
Best regards,
Olivier