Image opened with Open Web Page in Mobile App Shell is very highly zoomed

UI Builder
1

Hi,

My app is built using UI Builder, and then wrapped into the Backendless Native Mobile App Shell.

I am using the “Open Web Page” block to open a URL. This URL can be HTML, PDF or an image. When loading an image, the image opens up, but at such a high zoom level that the user cannot see that the image is open ! He thinks the page is all black and has to unzoom in order to see the image.

How can I load the image so that it fits within the viewport ?

Thanks for your help.

Edit : This happens on Android. On iPhone the zoom level is OK.

2

@Nicolas_REMY,

I have created an internal ticket BKNDLSS-31610 to investigate and resolve this issue. We will let you know of any update on this issue.

Regards
Nazar

1 Like
3

Any news about this ?

This is a highly annoying issue, and users are providing feedback that the image was not loaded when in fact it is loaded but zoomed in and the display is all black.

I recorded a video to show the process :

Thank you very much for looking into this.

4

Hello, @Nicolas_REMY. no news yet.

Sorry for the inconvenience. I’ll take a look at this issue soon.

Best Regards, Nikita.

1 Like
5

Hello, @Nicolas_REMY.

Does this problem still exists?

Regards, Nikita.

6

I suppose so, I haven’t checked recently.

Indeed I’ve had to build a specific page to handle viewing the images because otherwise it was simply not manageable.

7

Ok, in near future I will start to investigate this issue. I will let you know if I will have another questions.

1 Like
8

Did you check if this problem reproducible in Backendless Viewer?

9

Hello, @Nicolas_REMY.

I find a solution.
Perhaps it’s not perfect. But the WebView we use does not yet provide the best tools.

  1. In order to do this, you need to check the url to make sure it’s a real image (there are several options here, including sending information through the bridge using the UI buider). In my test case, I made it much easier, just checking the url for “.jpg”, but the image types can be different, so it should be expanded, or some other way should be used.
  2. After you have made sure that this is a picture, you need to zoom out using the webview controller.

Here’s how I did it:

              if (io.Platform.isAndroid) {
                if (url.toString().contains('.jpg')) {
                  await controller.zoomBy(zoomFactor: 0.02);
                }
              }

file: web_view_container.dart.
I added this code after prints of progress in onLoadStop listener.

if you have any questions you are wellcome.

Regards, Nikita.

10

Hi @Nikita_Fedorishchev ,

Did you check if this problem reproducible in Backendless Viewer?

I believe I did, but it was so long ago that I don’t remember anymore :grin:

As I previously wrote, instead I created another page in my app to display the picture in. This way I can control the size within the HTML.

Thanks for the advice with the code, though.