Panorama App - My WebView challenges (and some solutions)

[runewinse]

Hi,

I have a lot of (far too many, actually) hobbies. Drone flying and app writing being two of them. Some weeks ago I decided to combine these two and write a small app that shows my drone panorama pictures.

At first I used the newMapView. It worked all right, but it soon turned out to be too limited. So with the help of this post by Rob Miracle I switched to a WebView and an on-the-fly html code solution.

Now the app actually works more or less like I envisioned:

https://www.youtube.com/watch?v=qBKUtN_uGEw

The panoramas are created with PTGui and with an integrated tool made web ready. That is, they are converted to a special .html file along with some javascript code and a image set so that pointing to this .html file shows the panorama. I’ve slightly modified this .html file (made a .php file out of it to enable some parameters to be transferred) so that I only need one common .php for all panoramas.

Each panorama has (currently) these data:

-Name

-Comment

-Date

-Latitude/longitude

-GUID

(The GUID is used as a parameter to the .php file to point to the actual panorama files.)

I have a database on a server containing the panorama data above and at startup the app fetched this list. Based on the these coordinates I write a local .html file that uses the Google Map API and place markers at the correct positions. When a marker is tapped one of two things can happen (dependent on the settings). Either an info box opens, containing information about the panorama (along with a link to the panorama itself) or the panorama is shown directly. This is shown in the video above.

Now, as I said, most of the stuff works great. The only problem I have is related to what happens when I do a webview:back() and show the map with the markers again. If the user has zoomed the map to a preferred level and tap to show a panorama, this zoom level is reset when he goes back to the map again.

And I’m not sure how I can avoid this. Is there some way to communicate back to the Corona app when the user has zoomed the map? I know this event can be handled in the javascript code inside the generated .html file, but can it somehow be conveyed back to the parent app?

[carloscosta]

hope this helps:

https://forums.coronalabs.com/topic/55883-webview-javascript-to-lua-communication/

[runewinse]

Thanks, I’ll have a look!

[runewinse]

After some stumbling I have come a bit closer to a solution.

I found out that this could not be used:

 if (event.type == "other") then

Because event.type == nil when using window.location.href. Don’t ask me why…

Anyhow, I now can differentiate between a normal url request and one generated by window.location.href.

But I just cannot prevent the webview from actually trying to load the url given in the window.location.href = … call:

map.addListener('zoom\_changed', function() { window.location.href = "ZoomLevel:" + map.getZoom(); });

Is it possible to catch this in the webListener() and somehow prevent the webview from reloading?

[rob]

I think the purpose in JavaScript to set window.location.href is to do a redirect to a different page which would by it’s nature trigger a reload. Can you append some query string to the end of a URL and then in the event handler parse that string to look for the query string:

"http://some.url?zoomLevel=" + map.getZoom();

Then on the Lua side do a string.match() on the URL, perhaps something like:

local zoomLevel = string.match(URL, "zoomLevel=(%d+)")

Rob

[runewinse]

I have tried something like this:

map.addListener('zoom\_changed', function() { window.location.href = window.location.href + "?zoomlevel=" + map.getZoom(); });

This just reloads the current page and adds a parameter.

What happens then is that every pinch zoom from the user results in a reload of the web page and unfortunately it looks - awful.

A user is not expecting “unsmoothness” just by zooming.

Maybe I’ve misunderstood what you mean?

[rob]

Maybe try: window.location.href = “#?zoomlevel=” + map.getZoom();

There isn’t a good way to deal with this.

Rob

[carloscosta]

@runewinse, did you resolve your problem of refreshing?

you said 

 if (event.type == "other") then

is not working? i use it and works fine (only on IOS, in android i had to use ==“loaded” to work)

[runewinse]

@carloscosta

@runewinse, did you resolve your problem of refreshing?

you said 

 if (event.type == "other") then

is not working? i use it and works fine (only on IOS, in android i had to use ==“loaded” to work)

Well, as far as I remember, the problem is that event.type == nil in the webViewListener.

So checking for it being “loaded” unfortunately doesn’t bring me much further.

[carloscosta]

hope this helps:

https://forums.coronalabs.com/topic/55883-webview-javascript-to-lua-communication/

[runewinse]

Thanks, I’ll have a look!

[runewinse]

After some stumbling I have come a bit closer to a solution.

I found out that this could not be used:

 if (event.type == "other") then

Because event.type == nil when using window.location.href. Don’t ask me why…

Anyhow, I now can differentiate between a normal url request and one generated by window.location.href.

But I just cannot prevent the webview from actually trying to load the url given in the window.location.href = … call:

map.addListener('zoom\_changed', function() { window.location.href = "ZoomLevel:" + map.getZoom(); });

Is it possible to catch this in the webListener() and somehow prevent the webview from reloading?

[rob]

I think the purpose in JavaScript to set window.location.href is to do a redirect to a different page which would by it’s nature trigger a reload. Can you append some query string to the end of a URL and then in the event handler parse that string to look for the query string:

"http://some.url?zoomLevel=" + map.getZoom();

Then on the Lua side do a string.match() on the URL, perhaps something like:

local zoomLevel = string.match(URL, "zoomLevel=(%d+)")

Rob

[runewinse]

I have tried something like this:

map.addListener('zoom\_changed', function() { window.location.href = window.location.href + "?zoomlevel=" + map.getZoom(); });

This just reloads the current page and adds a parameter.

What happens then is that every pinch zoom from the user results in a reload of the web page and unfortunately it looks - awful.

A user is not expecting “unsmoothness” just by zooming.

Maybe I’ve misunderstood what you mean?

[rob]

Maybe try: window.location.href = “#?zoomlevel=” + map.getZoom();

There isn’t a good way to deal with this.

Rob

[carloscosta]

@runewinse, did you resolve your problem of refreshing?

you said 

 if (event.type == "other") then

is not working? i use it and works fine (only on IOS, in android i had to use ==“loaded” to work)

[runewinse]

@carloscosta

@runewinse, did you resolve your problem of refreshing?

you said 

 if (event.type == "other") then

is not working? i use it and works fine (only on IOS, in android i had to use ==“loaded” to work)

Well, as far as I remember, the problem is that event.type == nil in the webViewListener.

So checking for it being “loaded” unfortunately doesn’t bring me much further.