App to trace letters.

[Dani Sánchez]

Hi,

I would like to make an App so that I can use it to teach pupils to write. I want them to trace letters with their fingers, I mean, I want to show a letter and they need to trace it. How could I make something like this?

Thank you.

[Peter Mathijssen]

Maybe this will help:

https://groups.google.com/forum/#!searchin/app-inventor-developers-library/letters%7Csort:relevance/app-inventor-developers-library/C1jGQIeYW-w/vKcIdt5lBwAJ

[Ghica]

Another way could be this:
You could have a canvas that has a certain color and a picture of a letter on it. The student could "write" on the canvas, see for an example the Paintpot tutorial: http://appinventor.mit.edu/explore/ai2/paintpot-part1.html
While the student is writing you could check the background color of the canvas. When the student hits a color that is not the color of the letter, which means he/she is writing outside the character, you could sound a beep or whatever.
Cheers, Ghica.

[Dani Sánchez]

Thank you all!!

Ghica, That's really interesting. That is exactly what I'm looking for. I want them to write inside the character, and once they have finished (Only if they write inside), they can pass to the next letter. Could you tell me where to find something about how to do that?

Thank you in advance!

[Ghica]

Start with the paint-pot tutorial I gave a link for. For finding if the student hits a wall, look here: https://groups.google.com/forum/#!topic/mitappinventortest/J6b8eVGcP54
(Tracing the letter is like solving a maze)
You need to find pictures with letters on them, where the letters have marked borders or have an even color.
I think it will be not so easy to find out whether the student completed the letter correctly. Maybe a visual check is needed, at least for your first prototype.

Try some blocks and report here if you have questions.
Cheers, Ghica.

[Hossein Amerkashi]

@Dani,

For this, you need to learn about Lists, TinyDB, Buttons, Canvas, Sprite and the general concept of handling events.

Go through some intro basic tutorials and then into higher level tutorials HERE. Also, you can check the Gallery to see if you can find something similar to what you are looking for.

-Hossein.

http://AppyBuilder.com

  

[Dani Sánchez]

Is it possible to do something like this? How?
I've attached a picture.
Thank you

[Hossein Amerkashi]

PaintPot tutorials show you how to do that. 

You'll need to change Canvas paint color

-Hossein.

http://AppyBuilder.com

    

[Juan Antonio]

Hi Dani, this First Step.

[Dani Sánchez]

The line is too thin. How Can I have a Thick like?
Thank.

[Hossein Amerkashi]

PaintPot tutorials go through Canvas.LineWidth blocks / usage.

-Hossein.

http://AppyBuilder.com

  

 

[Dani Sánchez]

Thank you all four your answers. I've got this (picture 1), but I would like to go further (picture 2). Can I have something so that when pupils trace the letter it fills the whole letter automatically like in the second picture? maybe it's imposible. Thank you in advance.

[Abraham Getzler]

Can you pre-draw your letter images with transparent letter images against an opaque background?

If so, then maybe you could use the images as stationary sprites floating above (higher z)

the standard Paint Pot app?

ABG

[Dani Sánchez]

Thank you! I've finished, but I have my last question.

What can I do to solve this problem?(Picture 1) When I draw the line there are some blank spaces.

What can I do to fill the whole screen?I don`t want the white line above the green area nor the white line below the green area. Can I put the buttoms inside?(Picture 2)

[Ghica]

You cannot put a button on top of a canvas. You could use an ImageSprite on top of the canvas, but it would be easier to make the background color of the screen the same as the background colour of the canvas. Cheers, Ghica.

[Dani Sánchez]

It's true!and do you know any solution for the first problem?

[Juan Antonio]

Use DrawCircle.