I have loaded an image into a webviewer component. The image is bigger than the webviewer, which shows only the top left portion.
I can manually pinch it to make it fit, but I would like to be able to make it autofit after loading.
Suggestions?
Load the image to an html page and use css to size the image to the viewport
Can I do that locally? (the app won’t necessarily have internet access)
Also I have no idea how to do any of that!
Here is an example html file
You put this in your assets along with yourimage.jpg
<!DOCTYPE html>
<html>
<head>
<style>
.contain {object-fit: contain;}
</style>
</head>
<body>
<img class="contain" src="yourimage.jpg" alt="AI2" style="width:100%;height:100%">
</body>
</html>
Use the same path blocks as you did just for the image - in your other thread
Brilliant - thanks.
can you please post html code here as i am not getting fit to screen in web viewer?
The posted html code should work for you
thanks TIMAI2.
As above:
Create an html file and paste the code into it. Save.
Upload this file and the image file (named yourimage.jpg) to your assets / Media.
The code is within an HTML file - you can make it with a plain text editor (not a word processor) and save it on your PC e.g. myfile.html, with the image in the same folder. Do not use huge images, make them smartphone friendly.
In App Inventor, Designer, upload both the HTML file and the image into the Media tray.
1 Like
This method is elegant (TIMAI2 is always a myth) but not convenient. For example, I with the Spreadsheet component have an image loaded into the web viewer (all image links are, for example, in column 3 of Sheet1 of Goggle Sheet), but the images are larger than the screen. Is there not some block such as: 'webviewer width=screen width'?
Hi TIMAI2,
I'm trying to use Viewport settings to fit the image file inside WebViewer with the size of 1/4 of the screen (I need to show 4 images on the screen in 4 WebViewers and then create a PDF page). But my images are large and the scaling factor of 0.1 (minimum) is not enough. I need a scaling factor up to 0.02.
I'm using this string (calculating X1 and Y1) and it works up to scaling factor 0.1:
meta name="viewport" content="width=X1, height=Y1, initial-scale=1.0, maximum-scale=0.1, minimum-scale=0.1, user-scalable=no"
Maybe you could suggest me the right solution?
p.s. normal use of image or canvas does not give good results due to image quality issues, but pathing the image to the webviewer gives an excellent quality
Provide an example image
Thank you!
p.s i'll delete this file later from this forum
Try something like this:
I set the webviewer width and height to half the width and half the height of the image.
Not been able to prevent a zoom glitch if the webview is touched (yet)
Thank you very much!!! i'll try it. I understood the idea with a Javascript. Thank you
Hi, possibly found a better way:
<html>
<body>
<div style="position:absolute; left:0; top:0; width:50%; height:50%; background-image:url(file:///home/tim/Downloads/aginv.jpeg);background-size:contain;background-repeat:no-repeat"></div>
<div style="position:absolute; left:50%; top:0; width:50%; height:50%; background-image:url(file:///home/tim/Downloads/aginv.jpeg);background-size:contain;background-repeat:no-repeat"></div>
<div style="position:absolute; left:0; top:50%; width:50%; height:50%;background-image:url(file:///home/tim/Downloads/aginv.jpeg);background-size:contain;background-repeat:no-repeat"></div>
<div style="position:absolute; left:50%; top:50%; width:50%; height:50%;background-image:url(file:///home/tim/Downloads/aginv.jpeg);background-size:contain;background-repeat:no-repeat"></div>
</body>
</html>
This uses one webviewer, and positions four images.
The webviewer dimensions / aspect should be the same as the images (assumes all the images have exactly the same dimensions)
You can use webviewstring to feed the html with the image urls which must be a full path to each file.