tolgaatam / ColabTurtle

An HTML based Turtle implementation, in order to work in Google Colab
MIT License
55 stars 30 forks source link

Implement the write() function (Turtle "says" some text on the screen)? #5

Closed bdklahn closed 3 years ago

bdklahn commented 3 years ago

Since you asked in the other Issue about other things . . . (It's seems more useful/appropriate to separate these out into separate issues)

I know my daughter's teacher used the write() function. I wonder if that would be hard to implement. Is there a way to use something like an html alert/tooltip or manually activate the hover response on one?

I guess this would be the (best) way to do it: https://www.w3schools.com/graphics/svg_text.asp

And there, it looks like, the getx and gety would be useful for placing it (maybe adjust to up and right of Turtle).

tolgaatam commented 3 years ago

I do not know how original turtle implements this. Is it like there is a speech balloon that is shown for a few seconds and then disappear? Do you have a screenshot or smth? Once I understand, I am willing to implement if possible.

bdklahn commented 3 years ago

It is just very basic. No speech bubble. I think svg text would be just fine.

Let me know if you can see it with this: https://trinket.io/python/2d4218daeb

tolgaatam commented 3 years ago

Aha, that's easy to implement. What is more difficult to implement is the align parameter of the write() function. Otherwise, we can implement normal text writing and the optional move parameter.

tolgaatam commented 3 years ago

I implemented the write() functionality. Only move= parameter was not possible, because I could not know where the text in svg would end at.

bdklahn commented 3 years ago

I see it working. Cool! I wonder if it would be nice to make the text start a turtle radius distance+ to the right (or up and right), so it isn't partly over the turtle figure. I realize it still might end up getting obscured by parts of the drawing, too, but . . .

tolgaatam commented 3 years ago

I tried to make the behavior similar to the original turtle, checking from your trinket. In that one, the text is placed such that the text starts exactly from the middle of the turtle and part of it gets blocked by it until the turtle moves. If a user tries to calculate exactly where the text will be put arithmetically, I think this is the right way. If we apply shifting, it might break their calculation.

I see that our turtle is a little bit bulkier than the original (a sea turtle it is). Maybe that is why its blocking draws more attention from you. :)

bdklahn commented 3 years ago

This seems to work for me.

tolgaatam commented 3 years ago

Okay. Closing the issue, then 👍