Help with pencil and eraser by dragging

1

Dear community, could someone support me, with a Hype file, that when doing Drag, I color in the document, please? It is for our project for children with disabilities.
Like, one that erases what is on the sheet?
Sorry for the daring, but it will be of great help.

Blessings.

2

May help..

https://www.hypedocks.com/drawing-canvas/

3

It's perfect! MarkHunte, thank you very much.
It has a detail, it does not allow me to have a second scene working.
Is there a solution?
Blessings.

4

Can you explain more please.

5

With pleasure.
Download the template that you suggested to me, but when I want to make another scene below the first one, the coloring action no longer works.
Thank you from the bottom of my heart for your support.

6

If you mean another scene being a duplicate of the canvas scene it will be because the code is working by IDs.

You can change the code to have each scenes canvas work with class names instead.

But please try and explain exactly what you are trying to do. Please be more descriptive of what you are doing and want to achieve , so we do not have to guess.

Thanks.

7

I apologize for not knowing how to explain.
I send a photo of scenes, the first is the original, and it colors perfect.
I duplicate the scene to have 2, and then the colors no longer work, it doesn't paint anything.
My wish is to make several scenes with different drawings, so that children with disabilities can color them.
Sorry for so much trouble.

Captura de Pantalla 2020-10-16 a la(s) 12.33.19

8

Ok.

The code that controls what is being painted is looking for a canvas with an id.
When you duplicate the scene the second scenes canvas will have the same id.
This is not a good idea normally, and hype will normally remove the duplicate id. But the canvas is hard coded inside a hype elements innerHTML. So Hype will not touch it.

This means the code will not know which canvas to paint...

So the best thing to do is in the code that loads when a canvas scene loads. We change the code to look for the canvas with a class name.

1, we give every canvas the same class name.

Screenshot 2020-10-16 at 20.27.55
Screenshot 2020-10-16 at 20.27.551756×1482 251 KB

2, we change the code in paintSetup(),

from

 mandala = document.getElementById("canvasSignature");

to something like;

    var thisSceneID = hypeDocument.currentSceneId()
 	var thisScene = document.getElementById(thisSceneID)
  
	mandala = thisScene.querySelector(".canvasSignature");

You probably want to change the lines in dataUrl()

var fredaImg = document.getElementById('fredaImg')

to

 var thisSceneID = hypeDocument.currentSceneId()


var thisScene = document.getElementById(thisSceneID)
 
var fredaImg =  thisScene.querySelector(".fredaImg");
 
	context.drawImage(fredaImg, 27,	15, 598,600);

and

hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)

to

hypeDocument.showSceneNamed('gallery', hypeDocument.kSceneTransitionCrossfade, 1.1)

And give each save image template's innerHTML a class name and change it and it's path to reflect the image on the scene.

Screenshot 2020-10-16 at 20.39.33
Screenshot 2020-10-16 at 20.39.332852×1440 388 KB

There is likely more to do but hopefully you get the idea.

3 Likes
9

Mark, Thank you very, very much, indeed, this is the kindest and most generous community I have ever met.
You are of great help to solve this dilemma.
God bless you.

I will be uploading what I have done for the app, since I have done everything in HYPE, with some templates that I have found in this forum, because I want to recognize each one of you.
It is an App for children with intellectual disabilities such as cerebral palsy, Down syndrome and Autism.
YO APPRENDO

Nice day for you.

3 Likes