Cloud Development Kit

Answered

importing data from other data sources over restful and websocket editors (REACT)

Hi,

I have another data source other than a mouse or touch pad that is generating x/y coordinates.

I have two editors, one in REST and one in WEBSOCKET status, for instance:



    const workingEditorConfig = {

      recognitionParams: {

        type: "MATH",

        protocol: "REST",

        apiVersion: "V4",

        server

      }

    }

the difference is purely the protocol.

1st question. Why when my editor is in REST mode, is there a grid over the editor? I can see it because I have set a background on my editor

image

Its not there in WEBSOCKET mode, can I remove it?

Second question.

When I do

    const strokeData = [

      {

        penStyle: {},

        strokes: [

          {

            type: "stroke",

            x: [...],

            y: [...],

            t: [...],

            p: [...],

            width: 1.8897637795275593,

            pointerType: "mouse",

            pointerId: 1,

            color: "#FF0000FF"

          }

        ]

      }

    ]

    this.workingEditor.eastereggs.importStrokeGroups(

      this.workingEditor,

      strokeData

    )

    this.workingEditor.forceChange()


the stroke data is imported perfect IF I am in REST mode, however not in WEBSOCKET mode. 

However, it will appear IF i then draw something with the mouse, like it has to be sent to the server when in WEBSOCKET mode, for it to appear.

Is there a way to force the refresh of the canvas, as forceChange() doesn't seem to in WEBSOCKET mode.


3rd question. If I were in REST mode, how can I manually send the contents to the server for conversion/export using say, a button? 


My questions are specific to react, not vanilla JS


Thanks everyone!




Best Answer

  Dear Alex,

Thank you for contacting us.

Before using the API, you should be familiar with some key concepts about recognition: Recognition can be done two ways, either interactively (the content is recognized as the user writes) or in Batch Mode (a set of strokes are recognized at once).

This concept section will give you more details about it : https://developer.myscript.com/docs/concepts/batch-mode/

Websocket is the mode you thus need for "interactive" recognition, whereas REST is the required mode for batch mode.

Regarding the background style, in batch mode (so with REST protocol) the guidelines are deactivated: a grid is displayed instead of guide lines. You may override the `background-image` attribute of the CSS path `.ms-editor canvas.ms-rendering-canvas`.

As WebSocket is interactive, and if you want to mix contents, the best way is to import pointerEvents. This is the most suitable way to integrate inputs from other sources. 

For more details and how to do it, you can refer to: https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/pointer_events.html

You can send the content to get it converted on user demand this way https://github.com/MyScript/MyScriptJS/blob/master/examples/non-version-specific/on_demand_exports.html

Best regards,

Gwenaelle

 



Just to give some context, I receive x and y data in real time from a source, that I want to draw, in real time to the myscript editor. Ideally I would want to just be able to "be the mouse" on the canvas, but I don't think thats going to work, so next most ideal would be to be able to "push points" to the canvas. If I could do that, then leave myscript to work out the strokes etc then I would be very happy, but again, I suspect thats not possible with myscript so i am trying to work out a way to convert those real time x/y coordinates to valid strokes then import them. Im worried there may be lag this way, but i dont know of a better way, if I can't just draw points directly to the canvas....

Answer

  Dear Alex,

Thank you for contacting us.

Before using the API, you should be familiar with some key concepts about recognition: Recognition can be done two ways, either interactively (the content is recognized as the user writes) or in Batch Mode (a set of strokes are recognized at once).

This concept section will give you more details about it : https://developer.myscript.com/docs/concepts/batch-mode/

Websocket is the mode you thus need for "interactive" recognition, whereas REST is the required mode for batch mode.

Regarding the background style, in batch mode (so with REST protocol) the guidelines are deactivated: a grid is displayed instead of guide lines. You may override the `background-image` attribute of the CSS path `.ms-editor canvas.ms-rendering-canvas`.

As WebSocket is interactive, and if you want to mix contents, the best way is to import pointerEvents. This is the most suitable way to integrate inputs from other sources. 

For more details and how to do it, you can refer to: https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/pointer_events.html

You can send the content to get it converted on user demand this way https://github.com/MyScript/MyScriptJS/blob/master/examples/non-version-specific/on_demand_exports.html

Best regards,

Gwenaelle