Cloud Development Kit

myscript general usage in react

Hi,

I am using the math myscript component which is awesome. However I am using it in react and finding it tricky to follow documention, that seems to primarily be written for vanilla js approach.

Perhaps my questions will help others using React too...

I have setup myscript editor such that

this.editor = MyScript.register(this.refs.editor, {
triggers: {
exportContent: "DEMAND"
}
...
})


So now, going forward I can do things like 

 

this.editor.model.rawStrokes

I am now trying to read documentation so that I can change the theme of the pen, put a background on the myscript blackboard, send the strokes over a socket to another part of my app, and get the dimensions of the canvas...

I have successfully got the strokes so that I can send them over my socket (I want to display what someone is drawing elsewhere on a vanilla html canvas). It works, although rawStrokes does give me very jiggidy lines, but I suppose thats an optimization (unless there's a way to extract the beautiful strokes rather than the raw ones?). 

What I havent been able to work out is how to access setting themes, for instnce

this.editor.recognizer.setTheme({
".greenThickPen": {
"font-family": "Open Sans",
color: "#00FF00FF",
"-myscript-pen-width": 1.5
}
})

this.editor.recognizer.setPenStyle({
color: "#00FF00FF",
"-myscript-pen-width": 1.5
})

I thought the above would do it, as from here, it seems it would come under `recognizer` https://myscript.github.io/MyScriptJS/docs/ However that doesnt work.

I would like to be able to change the background/opacity of the myscript canvas if I could aswell, although while I cant set the theme above, i'm not sure how to approach this?


Finally, with my socket, I have another normal canvas that I am sending the strokes to via a websocket (as mentioned). The issue is that the dimensions don't get scaled correctly, or the dimensions coming from rawStrokes are scaled up or something. In the end what happens is, on the canvas receiving the strokes the strokes come out HUGE and the canvas needs to go way off the page. I assume I need to send the dimensions of the original canvas (the myscript) one and then scale accordingly the other side. How would I get the dimensions from myscript editor to be able to do this?


Thanks


Dear Alex,

Thank you for contacting us.

In order to change the pen style, you can set the style associated to the pen directly on the editor object.
If I stick to your example, you could do it using the following lines:


<span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>this.editor.theme = {".greenThickPen" : { "font-family": "Open Sans", "color": '#00FF00FF', '-myscript-pen-width': "1.5"} };
this.editor.penStyleClasses = 'greenThickPen';<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span>


Regarding the second part of your request, you can find in GitHub an example of how you could replicate the display in two screens.
The first editor is working in Websocket mode and used to collect and export the strokes when you are writing and that are displayed on the left part.
The second editor is working in REST mode and configured without any grabber and without recognition, as it is only used in a display purpose.
When clicking on the "recopy strokes" button, the editor2 imports and displays editor1 strokes on the right part.

Regards,


Olivier

This is great Olivier, thanks!

Are there more react examples?

I have a socket sending over mouse positions (from another application), I want those mouse positions to draw strokes on the canvas here, is it better to draw them as stroke groups (like the example you posted) or raw Strokes? And if its better as stroke groups, how can I convert x,y coordinates to a stroke group, or how can I in real time, draw canvas (x,y) coordinates to the myscript canvas, for processing (instead of the mouse directly on the myscript canvas)?

Is there any documentation for react? Its quite tricky to port the standard js to the react equivelent atm

Thanks


Also...

If there was some react equivelent docs somewhere would be so helpful, for instance, I want to "css" the loader and error (and error message). From here I can see the classes, https://developer.myscript.com/docs/interactive-ink/1.0/web/myscriptjs/styling/ but this seems to work only for standard vanilla js implementation....


Login or Signup to post a comment