Thumbing through canvas images

[Brian Weir]

I have created an app that helps identify minerals.  I am kind of excited that it is working.  I am now trying to take it a step further in my thinking.  When a mineral is identified, I want a canvas to an sample image.  This part is working.  What I would like to do now is have the user swipe/thumb through multiple images.  My set up is as follows:

When label has a mineral identified, change canvas to pyrite1.jpg.  

When canvas is dragged, change canvas to pyrite2.jpg.

The above works.  How do I get my pyrite1 image to show up again if the user drags the canvas?  I have tried to use three images, but all that does is after I drag the canvas only the last image listed show up.

Also how do I allow the canvas to be dragged from left to right (opposite direction) so the user can go back and forth easily among images.  I guess what I am looking for is the way Google handles their images searches.  I swipe right and get the next image, I swipe left and get my previous images.

So far my code looks like this.

Thanks for any help.

If you are asking for technical help, you must provide the following information:

- Are you using MIT App Inventor Classic, MIT App Inventor 2, or something else (what?)

- What OS are you using? (e.g, MacOS 1.8, Windows 8, ...)

- What browser are you using (e.g, Chrome version 30, Firefox 24, IE 8, ...)

Also provide as much information as you can, such as screenshots and instructions that will let others duplicate the issue.

[Hal Abelson]

This is a cute programming problem.   Here are some hints:

- Make a ImageList  who elements are your imags (i.e., the names of your images). 

- Figure out how to tell if the drag is to the left or to the right (by checking the X-coordinates of the start and end points).

- Make a variable called currentImage, to use as a counter.  Initialize it to 1.

- Set up the drag handler to  that when you drag to the right, increments the currentImage count, and when you drag to the left decrements current image, EXCEPT that
when the count reaches 0, reset it to the length of ImageList, and when the count reached length of ImageList +1 reset it to 1.

- Now, drag, compute the new current Image count, and set the canvas background to the image indexed by currentImage

H*app*y Inventing.

[Taifun]

see also this AI1 example http://puravidaapps.com/snippets.php#flung

Taifun