Defects in WebView

[AlpVir]

I stated in another post that WebView displays images of poor quality when the image is large.
The following code can view or a large picture (4975x600 pixels) or a small image (320x240 pixels).
Who will have the courtesy to try this code you will notice the difference in image quality is considerable.

Sub Process_Globals
End Sub

Sub Globals
   Dim w As WebView 
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Dim sb As StringBuilder 
   Dim h  As String 
   Dim S As String 
   w.Initialize("W")
   Activity.AddView(w, 0, 0 , 4975, 600)
   sb.Initialize
   sb.Append ("<HTML>")
   sb.Append(CRLF)
   sb.Append("<head>").Append (CRLF)
       sb.Append("<script>").Append(CRLF)
         sb.Append("window.onload = function(){").Append(CRLF)
                sb.Append("var Canvas = document.getElementById('myCanvas');").Append(CRLF)
                sb.Append("var context = Canvas.getContext('2d');").Append(CRLF)
            '--- immagine
             sb.Append("var imageObj = new Image();").Append(CRLF)
                sb.Append("imageObj.onload = function(){").Append(CRLF)
              sb.Append("context.drawImage(imageObj, 0, 0);").Append(CRLF)
            sb.Append("}").Append(CRLF)
            '================================
             '--- large image  ( 4975 x 600 pixel )
             sb.Append("imageObj.src = '" & File.DirRootExternal &  "/big.jpg" & "';").Append(CRLF)
                '---  small image ( 320 x 240 pixel )
            'sb.Append("imageObj.src = '" & File.DirRootExternal & "/small.jpg';").Append(CRLF)
            '================================
           sb.Append("};").Append(CRLF)
        sb.Append("</script>").Append(CRLF)
    sb.Append("</head>").Append(CRLF)
   sb.Append(CRLF)
   sb.Append ("<BODY>").Append(CRLF)
   sb.Append("<Canvas id='myCanvas' width='4975' height='600'>").Append(CRLF)
   sb.Append ("</Canvas>").Append(CRLF)
   sb.Append ("</BODY></HTML>")
   sb.Append(CRLF)
   h=sb.ToString 
   w.LoadHtml(h)
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

My problem at this point is to give up a certain project in the code above is just a small part, or find, with your help, ways to improve the quality of the images displayed by WebView.
Add that the choice of WebView has been made ​​taking into account that I have the need to:
1) navigate within the image (and Webview allows)
2) overlay image lines and labels (and I can do with HTML5).
Both things I've done, but I was disappointed in WebView.
Thanks in advance for your attention.

 

[margret]

Poor Quality In Webview

Have a look at this from Stack Overflow. This may help correct your issue:

Android: Image displayed at Webview from Url with high quality loss - Stack Overflow

 

[AlpVir]

I added

Android: resizable = "true"

but every time I compile the program the file AndroidManifest.xml is overwritten.

It 's very strange that it can not be displayed correctly a 4000-5000 pixel wide image of only 152 KB.
The same image is displayed correctly by :
- Viewer for Android
- Viewer of "Astro File Manager"
- Emulator.

Any other ideas ?

 

[NJDude]

You will have to add that line using the Manifest Editor.

However, that has been deprecated, read THIS

 

[moster67]

In the Project-menu in B4A, you can enable "Do not overwrite Manifest file"

I added

Android: resizable = "true"

but every time I compile the program the file AndroidManifest.xml is overwritten.

 

[AlpVir]

I followed your suggestions, using both "resizeable" that "resizable" and also "xlargeScreens". Nothing positive.

<supports-screens android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
   android:resizeable="true"
   android:xlargeScreens="true"
    android:anyDensity="true"/>)

I made ​​a small Java project and here we see the image properly, as well as using Firefox URL www.lalpinistavirtuale.it/temp/big.jpg.

public void loadData(View button){
       StringBuilder htmlData = new StringBuilder("<html>");
       htmlData.append("<head><title>prova big</title></head>");
       htmlData.append("<body>");
       htmlData.append("<a href='http://www.lalpinistavirtuale.it/temp/big.jpg'>big</a>");
       htmlData.append("</body>");
       htmlData.append("</html>");
       webView.loadData(htmlData.toString(), "text/html", "ISO 8859-1");       
    }

I do not know what to do and think.
Has anyone tried using the code I posted previously and which reproduces exactly the problem ?
Thank you again.

 

[warwound]

Hi.

I've done some experiments and think there are three problems:

1) Image file size versus image quality - a JPG with lots of detail will be a large image file and may fail to load.

2) Image dimensions may cause errors - very large images may fail to load.

3) The WebView seems to re-render images that are large in dimensions and/or large in filesize - this you have already discovered.
So even if you load a high quality JPG it will not be displayed in it's original quality.

Your image big.jpg is 4975 x 600 pixels and ~152KBs in size.
My image editor tells me that the JPG image quality is 78%.
The majority of that image is plain white so even though the image dimensions are large it compresses well.

Take a look at this panorama i've been using for tests: http://code.martinpearman.co.uk/deleteme/webview_canvas/cley_windmill.png
It's 4096 x 392 pixels and, in PNG format, is ~2.5MBs in size.

If i convert it to a JPG with 78% image quality i get a filesize of ~250KBs.
This JPG loads with no problems in a WebView buts looks awful in the emulator - the JPG compression has removed far too much detail (or so it seems).
The same image on my Advent Vega (10" tablet) looks much better - acceptable quality.

Increasing the JPG image quality seems to have no effect using the emulator - even with 90% image quality (the image is ~398KBs) the image looks awful.
The same seems to apply to my Vega - the 90% image quality looks the same as the 78% image quality(acceptable).

So it looks to me as though a WebView will re-render an image based on the device's available resources.
BUT no matter how much you increase image quality and no matter how much memory the device has available, the WebView will likely re-render the image.

Try running the attached code on both an emulator and a real device and compare the image quality.
The image in the code is saved with 78% image quality btw.

This is my emulator:

And this is my Vega:

Martin.

 

[DarkMann]

Just a quick note about the size of your image, following on from warwound's analysis.

In your original post you give a size of 4975x600. That is 2985000 pixels and to display on a screen you need three bytes per pixel for RGB, so 8.9Mb approximately. The webview has to do something to cope with this and it will almost certainly be using the equivalent of LOADBITMAPSAMPLE or some other dynamic resampling method.

If you really need to display something that big, you will have to try a different solution I think. I always used Zoomify to display panoramic images. They originally only had a Flash version, but now do an HTML5 viewer that is tile based and may do what you need.

David

 

[thedesolatesoul]

That is 2985000 pixels and to display on a screen you need three bytes per pixel for RGB, so 8.9Mb approximately.

Actually that is 4 bytes per pixel for ARGB. Android usually uses ARGB for most stuff AFAIK. So 11.3 MB.

 

[AlpVir]

I performed the tests that I suggested warwound, also using the original file PNG of 2.5 MB without being able in any way to get a display of equal quality to that obtained with the viewer Astro File Manager, for example.

Among the various hypotheses that I think is more reliable than the third (WebView redraws the image to minimize resources).

Replacing the line of Java code

htmlData.append ("<a href='http://www.lalpinistavirtuale.it/temp/big.jpg'> big </ a>");

with

htmlData.append ("<img src='http://www.lalpinistavirtuale.it/temp/big.jpg'> big </ a>");

it returns to display the image badly.
From this I think I understand that the IMG tag forced webview to redraw the image.

It is not possible for me to change the image quality (78/80%) because the vimage is one of my 200 winter landscapes to 360 degrees available at URL
www.lalpinistavirtuale.it/Panorami.

Some clarification, hoping to explain in understandable English.
These views are created with a PC software (created by me) that recognizes semi-automatically the peaks and store their coordinates directly into the EXIF data of file.
The applet Java above mentioned site (also created by the writer) displays landscape, reads the EXIF data and draw vertical lines for each peak (with all other appropriate options).

I want to have, in my smartphone, something like that and there are already successful, apart from the low image quality.

If webview produces results not so bad I can only find another way to view the image and draw lines and labels on.
This means starting almost from scratch, but patience

What makes you angry that the image viewer Astro File Manager produces a satisfactory result !!!
May not be able, with B4A, to have something like that ?
Thanks.

 

[AlpVir]

ImageViewExtra (author Warwound) display images correctly !!!
For example a image 10709x600 pixels (1142 KB).
And it is possible to pan and zoom.
At this point I could replace the defective Webview with ImageViewExtra.
But how do you draw over the image lines and labels ?

 

[warwound]

But how do you draw over the image lines and labels ?

ImageViewExtras adds a couple of new methods to a standard B4A ImageView so you should be able to use the Canvas object to add lines and labels to your panorama.

ImageViewExtras is far from perfect though - it's easy to pan the image out of view and then not so easy to pan it back into view for example.
The pinch to zoom functionality is also temperamental.

I see there is another possibility to add multi-touch zoom to a native Android ImageView: android-pinch - A collection of inherited views that add multi-touch zoom ("pinch") to certain views. - Google Project Hosting.
If i can find some time i'll look at that in more detail and see if i can create a better library for B4A.

Martin.