Image Map and Sprites in Canvas

[Andrew Kerr]

I have a menu based on a pizza shape with the slices being the buttons.

Trouble is that the PNG files overlap in places and so when you click on one slice two screens open.

How can I get it to just see the image part and not the transparent part so there is no overlap?

Images showing menu and image sprites attached.

Thanks ... Andrew !!

[SteveJG]

You can not Andrew.  Nice idea but not possible.  ImageSprites are always rectangular objects; even if part of the sprite is transparent.

What you can do is use smaller sprites that fit within each individual pizza slice.  In that case, a user has to touch the hot spot within the slice and that might be acceptable.

Regards,

Steve

[Chris Ward]

Hi Andrew

What you need to do is (within the code), restrict the selection region to be within a slice area.

[Chris Ward]

Hi again

I made an example earlier this year that is similar to what you are trying to do. It restricts the selection area using vector math. It's important to define the Canvas  to be square (as square as possible). Setting Canvas width in pixels, then setting Canvas height to Canvas width gets close on many smartphones, but the tall narrow "chocolate bar" phones like the Galaxy 8/9 are trickier. Needs some experimentation.

In the example, the width is 250pix. Also, a picked slice is hidden - you can change that to suit your requirement.

Edit: The code does not rely on sprite pick, your pizza picture can simply be the Canvas background image (a good fit, as per the example file).

Save the attached project file (.aia) to your computer, then load it into App Inventor. You can test it in the Emulator.

[Chris Ward]

Hi again Andrew

Just noticed this in your post:

so when you click on one slice two screens open

It's best not to use many screens. In this case, you only need one screen that is populated at run time with whichever set of info describes whichever pizza slice selection, rather than one screen per pizza slice. 

[TimAI2]

Well just for fun, and in an exercise of sheer bloody-mindedness and pedancy, I thought I would have a go at this one using the grid system, previously put together by SteveJG and Scott Ferguson, which I also used in my Communications Baord app for my school. Their original was based upon a grid of 36 squares, whilst for this exercise I found I needed to take the grid up by 2 fold to 576 squares! The idea is that you group (list) together the squares which cover each of the items you wish to select, and any other squares not allocated will suggest doing something - in this case to pick a slice. The long winded part is putting together the list of grid squares for each slice, but once done, it is done. I couldn't see a way of doing this programatically, due to the underlying image and irregularity of each slice, but then that is the point of doing it with a grid, you can be fairly specific, and you don't have to do any complicated maths to work it all out. To get the "leftovers", I simply removed all the items already in the slice lists, leaving what hadn't been allocated, and added this list to the slice lists.

BLOCKS

SCREENS

with grid showing

I used Inkscape to make up the grid pattern  (create a rectangle, select it, then Extensions > Render > Grids > Grid)

For this to work the canvas needs to be square, with fixed dimensions, i used 300x300 pixels, and this still works with responsive sizing

The real trick in the blocks is the conversion of the x/y coordinates to a grid number (I believe Scott Ferguson gets the kudos for working this out)

Just to help, if you want a grid of 36:

a grid of 144

incidentally your use the numbers in the multiplication e.g    6 / 12 / 24 as the values when creating the grid in Inkscape :)

aia attached

[Andrew Kerr]

WOW!!  Chris and Tim you guys are amazing. I am going to play with both these methods and see what happens. ... Andrew !!

[Chris Ward]

Hi Andrew

I was just thinking that, maybe the User would like an image of whole pizzas rather than just a slice - I think it might look more inviting?

[TimAI2]

regular, large or supersize Chris ?  :)

[Chris Ward]

...actually square pizzas are good - easier to divide into equal portions. Probably wouldn't find a square one in Italy though.....

[moon]

Hi there,

Just came to see this post and thought worth providing my example as I had to go through this for one of my students few weeks ago.

I'm not an expert, not working for MIT, companion or whatever.

I wont interfere neither.

Just ignore this in case of any trouble.

Now,

My approach is based on very simple trigonometry. This allows identifying the areas easily. My Hyper_Slices.png shows an example of a complicated situation where we're not considering slices per see but little parts as we use to see that in many Italian restaurants (in my place). Usually very large pizzas kind of set with different ingredients. people jump on little parts according to their tastes. who can more can least.

I put my aia on a very simplified case and did the code in an extensive way to allow understanding. It can be simplified easily.

The data defining the "parts" used to be on a GoogleSheet. In this example I put it as a csv asset.

One can define the circle paving by providing the min/max of the angles and the radius.

This allows situation in which parts may overlap.

Basically considering radius between 0 & 1 leads to the situation described in this post.

In fact I'm not using buttons but canvas only.

If you're interested, you may have a look or even give it a try.

All my very best

M

[Andrew Kerr]

Thanks Mounib.

This is a very ingenious solution. My math skills are not the best but I can see how the CSV file gives the coordinates.

How do you calculate the values for the CSV file? The image (hyper slices) looks cool, but how to work out the angles and radius measurements?

Thanks ... Andrew !!

[moon]

Hi Andrew,

Not a big deal, 

In case the data come from any kind of numerical processes or sensors then there are some calculations to run. Mostly the same as I did which means converting from a cartesian coordinate system to a normalised polar system.

If it's about having something approx then using a transparent layout on the top of your picture makes it easy. This layer should just have a graduated circle in degrees (between 0 & 360) and graduated lines (between 0 & 1). You can do it by hand or using an image editor such as Gimp.

If you feel I didn't get what you mean please feel free to get back to me.

M

see attached 2 figures that you can use. Don't forget to add an alpha channel to get a transparent background.

EDIT: In case you need specifically the pizza as divided in your picture then we are in a situation in which each slice is 1/7 of the whole range i.e 360° AND each slice starts from the center (r=0) up to the exterior i;e r=1. the csv file will look like dropped the first columns)

0* (360/7) ; 1* (360/7) ; 0 ; 1

1* (360/7) ; 2* (360/7) ; 0 ; 1

2* (360/7) ; 3* (360/7) ; 0 ; 1

3* (360/7) ; 4* (360/7) ; 0 ; 1

4* (360/7) ; 5* (360/7) ; 0 ; 1

5* (360/7) ; 6* (360/7) ; 0 ; 1

6* (360/7) ; 7* (360/7) ; 0 ; 1

[TimAI2]

Just to confuse further ;) here is another method based upon the angles in a circle:

BLOCKS

AIA attached :)

[Chris Ward]

:)

[Andrew Kerr]

I have worked this out now. Thanks to all those who contributed solutions.

In the end I went with the mathematical solution from moon.

I created a multi layered photoshop file with protractor image and concentric equidistant circles on another layer.

Then placed the pizza behind them and was able to see the angles and percentages.

The forum won't let me upload the file, so I have a PSD file for anyone else who may like this solution here ...

https://drive.google.com/file/d/1PgaK4gnNfDLiEP7tRbi19dELbB935fRx/view?usp=sharing

... Andrew !!