2014년 12월 31일 수요일

Need pictures to adjust to screen

I need help to setup a picture viewer.  The app has two screens, one with all the pictures laid out (like thumbnails) and a second one which is the viewer per se.

I set up the viewer as full screen canvas with a single image sprite which is supposed to get a value (the pictures name) passed by the main page.

What I've been able to achieve:
-the correct image is shown;
-you can swipe to previous or next image;
-the title of the viewer reflects the picture's name;
-the sprite is correctly centered in the canvas;

My problem:
For now, I hardcoded picture's ratio and orientation in a list and I refer to that list to ajust the sprite so it is full screen.  What I want is for the code to calculate the ratio of the picture about to fill the canvas so I will not have to do it manually as I will add pictures in the list over time.

What I tried:
I can't find a way to extract an image's width and height BEFORE using it in any componnent.  I tried setting the sprite.picture to image.jpg and THEN getting width and height.  It works the first time but as soon as I swipe to the next picture, ratios get all screwed up because it's calculated over the last known dimensions instead of the original dimensions.  Changing orientation messes everything too.

I tried using an invisible dummy picture component, setting it as the image, calculting the ratio.  Seems like since it is invisible, its size is 0.  So I tried having it visible, getting the ratio and setting it invisible but I get a "divide by 0" error again.



You have a difficult programming exercise and not just because you are using App Inventor.   Here are some links that discuss ways to get image dimensions (using Java etc.)  https://www.google.com/search?q=android+image+height+width&oq=android+image+height+width&aqs=chrome..69i57.13055j0j7&sourceid=chrome&es_sm=93&ie=UTF-8       Some of these links might provide you with more ideas.

The obvious question is why do you have to use a Canvas?  If you use an Image control, you can use the Automatic settings to get the picture to display the largest size of the image on the Screen; but for some reason you can not do that?  For thumbnails, use a Table Layout and restrict the dimensions, for 'full size' and image component on the other screen?.

Good luck.



The reason I'm using a canvas is to be able to swipe between photos by using the .swipe event.  Unless I am mistaken, I don't think any such control exist for an image component?



If you got to swipe, Canvas can simulate it ....    http://puravidaapps.com/snippets.php#2flung is probably what you are using.    If you got to swipe, Eclipse and Android Studio are free, have the features you need but require more programming knowledge to get access to the full tool box.   For the moment, no swiping in AI2 except in a WebViewer and simulated in a Canvas.



I remember delving into a similar problem a long time ago. See here for my posts if they help:

https://groups.google.com/forum/#!msg/appinventor/pJV3nMVz5Kk/JhoqvPseXR4J

https://groups.google.com/forum/#!topic/programming-with-app-inventor/b2qdm-xM7YY

Basically try load the image into a visible dummy image sprite on an invisible canvas first. That should get you actual image width and height. You can then store these values in variables and use them anywhere.



댓글 없음:

댓글 쓰기