How do you zoom image by finger pinch in mit ai2?

MIT App Inventor Help
1

How to zoom image by finger pinch in mit ai2??

2

A forum search would have revealed several methods. YOu cannot zoom/pinch an image in an image component or canvas (easily) or arrangement. You need to use the webviewer. See link below for some examples:

3

There are several zoom related extensions found on this page.
https://puravidaapps.com/extensions.php

App Inventor has it’s scale detector extension
https://mit-cml.github.io/extensions/

4

actually i am new to app building.can you please give me example or .aia file??

5

thanks TIMAI2 issue resolved.

but i have more than 20 images for that i have to make 20 html file.

or is there other option?if yes than please tell with example.

6

@Mitul_Karsariya

You may also want to look at the ScaleDetector extension:

7

Do you want to display all 20 images at once ?

If not just replace the image sent to the html file using the webviewstring.

If you want to show all the images, you can load then all into an html file if you want to…

1 Like
8

Actually you don’t need to have an html file to display an image. You can send the image path as the webviewer url and it will display it.

9

Correct, this was evident in the other topic I linked to, where the developer need to control the size of the image displayed as well. If the image size is within bounds (e.g. webviewer set to 360x240 and image is >360x240, then not an issue)

1 Like
10

i want all 20 display but condition based. hen one button clock show one and other click so other…so on…like this

11

i dont know how to use…can you guide or give link to tutorial of this?

12

may you please give an example of this??

13

please try something yourself and if you get stuck, then post a screenshot of your relevant blocks
here is a simple example https://puravidaapps.com/snippets.php#2ani

A very good way to learn App Inventor is to read the free Inventor’s Manual here in the AI2 free online eBook http://www.appinventor.org/book2 … the links are at the bottom of the Web page. The book ‘teaches’ users how to program with AI2 blocks.
There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro and the aia files for the projects in the book are here: http://www.appinventor.org/bookFiles
How to do a lot of basic things with App Inventor are described here: http://www.appinventor.org/content/howDoYou/eventHandling .

Also do the tutorials http://appinventor.mit.edu/explore/ai2/tutorials.html to learn the basics of App Inventor, then try something and follow the Top 5 Tips: How to learn App Inventor

Taifun

Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.

15

can you give me html code for
fit to screen
Height = fill parent
width = fill parent
back ground image = none

16

You set that in your blocks/designer for the webviewer, and then for the image as i indicated above:

17

Here you go,

<html>
<head><title>Fill Parent</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<img src="/storage/emulated/0/Pictures/abcd.png" width="100%" height="100%"/>
</body>
</html>

Type in the image source in img src.
Remove the height="100%" attribute if you don't want your image to be resized.

18

I tried finding things about zoom in the forum, but this doesn't help to zoom the image.