Forum Discussion
Drawing Annotation on Storyline Slide
Demo: https://360.articulate.com/review/content/518383b2-1161-408d-b9f5-adb9a6f57a11/review Inspired by code discussed on: https://img.ly/blog/how-to-draw-on-an-image-with-javascript/ Using C...
Offcourse i cannot resist a challenge. So to detect whether a user's drawing is valid you need to convert the image to base64. Do try it with 2 similar but different images.
https://www.base64-image.de/
Here you can create base64 encoding.
Then you compare the outputs like here.
https://codepen.io/rosca/pen/NWLqLJ
And you get a result in amounts of pixels that differ. If you would want this to work in Storyline, you need to do some testruns...how much pixels the endresult may vary. I made 2 images, i with an ok-selection...that varied 750 pixels, and one completely off..that varied > 8000 pixels.
If time permits i make a demo of this.
Good example math. If we wanted to incorporate that into this canvas drawing demo, it might be good to just forego the base image and just use the user drawn components to compare to a similar key overlay. This way, we could make generic keys that could be more easily applied to multiple image scenarios.
Indeed. I do think i have parts for the code for that available in some older project 😀
I recently started looking at this project again. I adapted the annotation example I posted earlier and added some test code for assessing the user-drawn input versus a couple of predetermined keys. This example used Resemble.js to compare the images. It has a numer of options that could be useful for finetuning comparisons.
Demo- https://360.articulate.com/review/content/868a0b98-e757-4355-909f-85d09337f2eb/review
The script is a hot mess right now and it is a bit slow due to a lot of extraneous debugging code, but it does a fair job at assigning a score to the user input. This example is contrived, but think of somethng like asking someone to draw in the missing path (in this case, the Arkansas River).
When I get a chance to clean this up, I will post a more complete example.
