Components: Canvas (advanced) - Know your US States using Image Mapping

[Scott Ferguson]

This variation of the US states project takes a different approach to solving the problem of providing feedback when the user touches the screen.

Instead of using ImageSprites and their associated Touched event handlers (50 required - one for each state) as in the previous project, we have used a Canvas component and it's Touched event handler here instead (1 for each region). The tradeoff is that several lists need to be created to handle display of the states' text, pronouncing the state names and the x1,y1,x2,y2 areas of each state where the user will touch.

The x,y position of the canvas touch event is matched with the correct state's image map boundaries to access that state's properties from each of the lists.

Open the lrn_Canvas_ImageMap.zip project.

Screen Designer: 

I found a teacher's resource of US map drawings HERE and cropped and resized the images to fit the emulator at 480x270 pixels using GIMP.

The images are included in the media list of the project.

A Canvas component is used to display the US map as seven regions, and enable opening region screens via the Touch event block.

An ImageSprite is used to toggle between two mute icons.

TinyDB is used to save the mute state between screens and app  sessions.

TextToSpeech is used to pronounce the state and region names.

Blocks Editor, Screen1:

There are more global variables required when image mapping is used with a Canvas rather than using ImageSprites.

Most of these are associated with lists that hold property values for each state's image map.

The properties for a given image map are associated by a common index to each list.

Screen Designer, NonContiguous (region) screen:

This is one of seven region screens which group states together such that the user can touch either the state or a target next to the state.

The NonContiguous screen consists of a Canvas component with two image map areas (x1,y1,x2,y2) representing the upper left and bottom right corners of a rectangle.

These areas are associated with an area around each state in the example below. 

Blocks Editor, NonContiguous screen:

I used the X,Y,Width and Height property values of ImageSprites covering each state from a previous exercise to create 4 lists - x1s, y1s, x2s, y2s for each state in the above region.

Each X and Y value was stored in the x1s and y1s lists for each state and the Width and Height values from the ImageSprites were added to the X and Y values for each state to get the x2,y2 values stored in the x2s and y2s lists (a Google Docs spreadsheet was useful for simplifying this process.) (I also found an online image map utility which interactively allows you to highlight areas over an image to create the x1,y1,x2,y2 values for you to enter into these lists HERE.)

Once these lists of values are created, any area of the Canvas that is Touched can be compared to the bounds of each of these rectangles.

The Canvas1.Touched event block iterates through the bounds of each state.

If the Touched area is contained within those bounds:

• a text label is alternately displayed or erased
  
• the state name is pronounced, if mute is off

NonContiguous.Initialize:

Set the mute icon to show muted or unmuted.

mute_spr.Touched:

This event block toggles the mute icon Picture displayed and in the database.

Test the packaged project.

Challenge:

It would be a nice enhancement to this project to include state capitols.

[bob flynn]

How about have map where the states are different colours and test the background color of pixel touched and have a lookup of colors to states ? Might this remove the x,y definition of state areas and allows for easier presentation of non-straight lines making up states.

[Scott Ferguson]

bob-

You have hit on a simple, elegant solution :)

Congrats!

I had not thought of that.

I have used GetBackgroundPixelColor in the past but did not think of using it for this project.

All you would need is to do a lookup in a list of the colors for each state after GetBackgroundPixelColor, I imagine.

You are welcome to post your solution in this thread if you wish.

---

Happy Inventing!

sf