Outline (no fill) option for draw circle

[Matt Dabney]

Would it be possible to add an option to draw a circle with just an outline rather than a filled circle? Currently there appears to be no way to draw a ring without covering up everything that's underneath the location that you want the ring. The method could be Canvas1.drawRing or Canvas1.drawCircleNoFill, and it should take x and y coordinates of the center point, radius, and perhaps either stroke width or do inner and outer radii instead.

I know you can draw two concentric circles to create a ring currently, but you lose whatever is drawn beneath the ring if you do so. I have a particular project that I use at my summer Android camps that would greatly benefit from the ring option. In our project, the students write a GPS treasure hunt game in App Inventor and then use it to roam around the campus outside of the school to find goals. The goals are small QR codes that have been printed and laminated that simply encode the GPS coordinates of the next goal. The students' app remembers the coordinates after scanning a QR code, and when the student clicks a button, the app calculates the distance between their current location and the goal location. This distance is drawn onto a map of the campus as a circle around their current location with a radius of the distance. Then, after the student guesses a location on the circle and walks to it, they hit the Get Distance button again, and another circle is drawn on the map at the new distance to the goal. With two circles drawn on the map, the circles overlap at two possible goal locations. With a third, the three circles should approximately give the location of the goal. This gives us an excellent opportunity to teach about the GPS system, triangulation, and equirectangular approximation and to highlight the mobile device's GPS sensor and mapping capability through an App Inventor project.

Within the app, if we use the current Canvas1.drawCircle method, then the students can't see anything on the map between them and the goal, which makes it very difficult to find where they are on the map. We can use transparency with the current option, but after a couple overlapping circles, it becomes really difficult to see what's underneath (and it's less clear that the goal should fall on the edge of the circle with a filled-in circle rather than just an outline at the appropriate distance). The past two years we've been running through a for loop that draws dots on the map at 36 spots in a circle around the student's current position, but that's slow and a lot less clear than a ring could be. The option to draw a ring on a canvas would be incredibly useful.

One thing that we do as part of the project is have the app save the canvas every time a QR code goal is scanned, so we can discuss how students used triangulation to find the goals afterward by looking through the images. I've attached an image saved by the app using our current, less than optimal solution.

[Hal Abelson]

created ticket #729

[Abraham Getzler]

At app first run, you could pre-load a set of image files of pre-set sized circles on clear backgrounds,
for use in sprites on your app.

To prepare the images, size a temporary canvas, set it to clear background, draw a pair of
concentric opaque and clear disks on it to get a circle, and save the canvas as an image file.

Do it for each size you will need.

ABG

[Matt Dabney]

You're coming up with a lot of nice workarounds, Abraham. I'm hoping the actual functionality is added at some point, though. Unfortunately, I don't think it would be possible to implement the canvas preparation you suggest, because drawing a clear disk on top of an opaque one would just leave the opaque circle rather than erasing the center ring. However, I was able to create a .png file in Adobe Illustrator of a circle with transparent center and outside area that I set an ImageSprite to use, and I am able to scale that in size using ImageSprite1.width and ImageSprite1.height. The image gets pretty fuzzy when it gets large and pretty much disappears when it scales too small, though, so if I really wanted to make this method work great I would need a small, medium, and large image that I switch between based on the distance value to minimize the effect of the scaling, similar to your suggestion of creating different-sized disks for each distance. 

This is already quite a large App Inventor project for my students (it's the biggest project they write, with lots of complicated math and components they haven't yet seen). I'm not sure if this option would be more or less confusing than drawing 36 dots in a circle around the center point (though it could certainly improve the look of the app), but both options are much more difficult than they should be. If a drawRing method were added that would greatly simplify this valuable learning experience and remove unnecessary block clutter. 

Thanks again for your suggestion, Abraham

On Wednesday, March 12, 2014 5:39:43 PM UTC-4, Matt Dabney wrote:

[Matt Dabney]

Ah, I also just realized that to implement this you would need to include an arbitrary number of ImageSprites on the canvas since in our app there is no limit to the number of times you can hit the Get Distance button to draw circles on the map. If there were a way to dynamically add ImageSprites as needed, this could work nicely, but without that option adding 20+ ImageSprites in the Component editor and maintaining them all seems like an unwieldy task and a lot of block clutter.

[Scott Ferguson]

This will not work for your example since transparent colors cannot replace a solid color with transparency - they blend instead.

But, I have used this method to draw a circle filled with a different color.

It takes two DrawCircle blocks.

Set Line Width to 2 

Set PaintColor to Black.

The first block draws a black circle at x,y of R radius.

Set PaintColor to Yellow.

The second block draws the circle of radius R-2 at the same x,y position to fill the circle with yellow. but leaves the black border.

---

Scott

[Abraham Getzler]

Thanks for the correction, Scott.
I had thought that painting operations were replacements,and not additive.
ABG

On Wednesday, March 12, 2014 5:39:43 PM UTC-4, Matt Dabney wrote:

[Scott Ferguson]

They are additive when transparency is not set to the max of 255 (opaque).

---

Scott