iink SDK Web

catch pointer events using iinkjs

Hi,

i am using iinkjs in a project and i can't seem to find documentation on how to catch pointer events.

My goal is to store those events and reimport them using the editor's pointerEvents function.

Examples show preexisting pointerEventsObject but no example on how to catch them

Thanks for your help.

Vivien


Hi Vivien,


Thank you for contacting us. 

There is no API to directly save the pointer events, but what you can do is export as JIIX then you can parse the JIIX data to rebuild the point events.


For further details, please check this discussion.


Gwenaëlle

Hi Gwenaelle,

so i did parse the jiix and rebuilt the pointer events but this is what i got in the output


image


image

is my code wrong somewhere?

editor.jiixToEvents = (jiix) => {

            const events = []

 

            JSON.parse(jiix).words.forEach(word => {

                if (word.items) {

                    word.items.forEach(item => {

                        if (item.X && item.Y && item.T && item.F) {

                            events.push({ x: item.X, y: item.Y, t: item.T, p: item.F })

                        }

                    })

                }

            })

            return { events: events }

        }

left is the original and right is the output

Thanks for your update.


One precision I forgot to mention is that the “input coordinates” of the strokes in the pointer events are in pixels, while those exported in the JIIX data in millimeters. For further details please, check this page about strokes and this one about jiix format.

By default, the input resolution is 96 DPI. To convert from millimeters to pixels, you shall compute the coordinates from the JJIX as follows:
Pixel = mm * 96/25.4

Of course, if you set another resolution than 96 (e.g. 300 DPI), you shall adapt the formula accordingly: Pixel = mm * 300/25.4


Gwenaëlle

Hi Gwenaëlle,

I am running into the exact same issue, and had a look at the documentation - from your post above, is the expectation to manually multiply all of the X and Y coordinates of the exported JIIX data to match the (default) DPI of the editor? Is there some way to set the DPI of the editor manually?

I try to set some other xDPI and yDPI, but this gives me an error that they are unrecognized:

 

{
xDPI: 300,
yDPI: 300,
events: [
        {
          pointerType: "PEN",
          pointerId: 1,
          x: [
            128,
            125,
            122,
          ],
          y: [
            83,
            91,
            99,
            107,
          ],
          t: [
            1516190046205,
            1516190046247,
            1516190046264,
          ],
          p: [
            0.5,
            0.7076987214308235,
            0.8060672826037246,
            0.8060672826037246,
          ],
        },
        {
          pointerType: "PEN",
          pointerId: 1,
          x: [117, 122, 128, 139, 146],
          y: [105, 105, 106, 107, 106],
          t: [
            1516190046870,
            1516190046930,
            1516190046947,
            1516190046963,
            1516190046980,
          ],
          p: [
            0.5,
            0.7763932022500211,
            0.7681880209236327,
            0.6676543814462531,
            0.785875329883628,
          ],
        },
      ],
    }
}

 Do you mind providing an example of how this could be done? Is there a way to set some consistent DPI of the editor so that this issue does not persist (I expect the screen to change sizes a lot, but I assume that the DPI can remain the same). The documentation calls it a 'request body,' but at the moment I do not see the parallels between what I/we are trying to do and the documentation.

Thanks again for the help!



The data above is just an example, but it is close to the sketch information I am working with. 

Dear Mason,


Currently, it is likely most of the web browsers assume a default 96 DPI resolution: https://stackoverflow.com/questions/935954/programmatically-determine-dpi-via-the-browser


From the above, the easier is that you parse the JIIX export, get the X and Y coordinates from the latter (you can use basic JIIX parsers, that normally do this easily). Once you have the X and Y arrays in milimeters, simply convert the milimeters in pixels, assuming a 96 DPI default resolution.


This is normally not a huge development work.


Best regards,


Olivier


2 people like this

Thank you all for your answers! 


1 person likes this

Hi Olivier,

I performed the conversions on the X and Y arrays generated by the editor's export for some initial strokes, and the issue remains. I tried messing with the magnitude of the arrays, and it still prints the import smaller and in the top left corner (see @vivien's image).

I use the pointer events in this example as a test, and it works fine: https://github.com/MyScript/iinkJS/blob/master/examples/v4/pointer_events.html

How would I edit the export/strokes array so that it resolves this?

Thanks!

Dear Mason,


you can indeed play with our pointer_events sample:

-https://myscript.github.io/iinkJS/examples/v4/pointer_events.html

-https://github.com/MyScript/iinkJS/blob/master/examples/v4/pointer_events.html


=> If you play with the strokes (e.g add offset, multiply the X and Y coordinates by a factor...), you will see the ink is changed.


There is therefore no magic behing, you shall ensure you properly compute your exported coordinates and re-import these. If the ink doesn't change although you re-size the coordinates, then there is an issue in your code.


Best regards,


Olivier

Login or Signup to post a comment