Discussion Forums  >  WebViews and HTML for Mobile

Replies: 14    Views: 186

beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
12/04/14 12:30 AM (5 years ago)

Custom URL issue in Android

Hello Everybody.

I’m having issues in an Android App using the Custom URL plugin.

I use URLs to display 360º Panoramic Views. The issue is that inside the app the 360º Views doesn’t display correctly, show graphic distortions and a complete erratic behavior while you interact with them but, if you select and open those URLs in the device’s native browser, the 360º Views display correctly without any problems!
How can I fix this erratic behavior inside the App?

I really appreciate any type of help around this particular.

Best Regards.
Beto
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
like
12/04/14 01:35 AM (5 years ago)
There has been an instance or two where the 'default' webview wasn't doing what I wanted it to do. I had to 'convert' it from a 'WebViewClient' to a 'WebChromeClient'.

There's a couple of 'includes' that I can't remember, but if you click on the errors, you have an option for the system to 'fix' it for you, by inserting the needed library statements.

There is some discussion on it here:

http://stackoverflow.com/questions/6474768/are-webviewclient-and-webchromeclient-mutually-exclusive

Cheers!

-- Smug
 
Tony @ Buzztouch
buzztouch Evangelist
Profile
Posts: 528
Reg: Mar 05, 2011
Saint Louis, Mi...
24,620
like
12/04/14 06:20 AM (5 years ago)
Great tips Smug!

Tony
Buzztouch
 
beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
like
12/04/14 07:27 PM (5 years ago)
Thank you Smug for your input, but I’m really struggling on this and I can’t fix the errors. I read the forums and documents related and try to set different code arrangements around the WebChromeClient conversion without any success. I can’t find in the WEB a relative issue with 360º panoramic views in Android devices, which is even more frustrating.
Each 360º view is an HTML5 Virtual Tour which includes a JavaScript file, an XML Document, the HTML doc and a Tiles directory with all the fragmented images of the whole virtual panoramas.

This is my first Android App and all of this WebClients and more heavy stuff are so new and confusing for my limited experience. The app is already finished but presents that serious issue that I have to repair. I hope I can do it with the help of the forum.

Any commentary about this I will really appreciate.

Thanks a lot!
Beto.
 
Niraj Shah
buzztouch Evangelist
Profile
Posts: 2938
Reg: Jul 11, 2012
Cerritos
37,880
like
12/04/14 09:31 PM (5 years ago)
For my future Beto, can you tell us where you got the 360° view code of HTML, XML, JS, etc?

Thank you,

-- Niraj
 
beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
like
12/04/14 09:57 PM (5 years ago)
Hello Niraj,
The 360 views are compiled in Pano2VR software, a platform specialized in Flash and HTML5 Virtual Tours.
 
beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
like
12/05/14 10:18 AM (5 years ago)
This is a link with a 360º view with the issue in mention.

http://www.museosdefensa.gob.ec/360/rv/chillogallo/chillogallo.html

Viewed inside the app (using Custom URL plugin) presents a lot of distortion and graphic issues, but if you select to open, an view it in the Device Native Browser, it displays correct.

I hope to fix this as soon as possible!
 
Rachelle-Joanne
Aspiring developer
Profile
Posts: 65
Reg: Jan 15, 2013
Lagos
650
like
09/03/15 05:34 AM (4 years ago)
Hello @Beto, were you able to fix the issue with the custom url plugin and regards the display? Having the same issue too and I am trying to fix it.
 
beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
like
09/03/15 08:34 AM (4 years ago)
Hello Rachelle, the answer is no. I can´t fix that issue.

Sorry!
 
Rachelle-Joanne
Aspiring developer
Profile
Posts: 65
Reg: Jan 15, 2013
Lagos
650
like
09/03/15 05:14 PM (4 years ago)
@Beto after several hours of searching the net, I was finally able to get it to work. Thank you for the feedback
 
beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
like
09/03/15 07:41 PM (4 years ago)
That sounds great Rachelle, could you tell us how you solved that Android issue? we will really appreciate a lot.

Thanks!
-- Beto
 
Rachelle-Joanne
Aspiring developer
Profile
Posts: 65
Reg: Jan 15, 2013
Lagos
650
like
09/04/15 02:02 AM (4 years ago)
Ok I was trying to load an html page which contained local storage code in it to enable users store data locally on the phone.
But I realised that the webView on Android by default does note enable this setting, also does not enable javascript. So I had to do enable it.
You just place the following code to any of the custom html plugins like HTML Pro, Custom URL, Smugs Android HTML, it depends on which ever you are using.

1. Place this code at the import statements

import android.webkit.WebStorage;
import android.webkit.WebChromeClient;
import android.os.Build;

Then place the next set of codes where the webView settings are enabled

// enable javascript (This is usually enabled in buzztouch by default but still make sure its there)
webView.getSettings().setJavaScriptEnabled(true);
// enable local storage
webView.getSettings().setDatabaseEnabled(true);

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {

webView.getSettings().setDatabasePath("/data/data/" + webView.getContext().getPackageName() + "/databases/");

}
webView.getSettings().setDomStorageEnabled(true);

webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize,
long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2);
}
});


This codes was basically to enable local storage on webview and also define the path where the local database will be stored on the phone.

You can check if other settings are needed to be enabled to allow your particular web page display properly.
Here is a test page I had to run on the plugin to see what HTML features were supported by webview on my device http://www.html5test.com

Another thing I found out was that all accompanying files such as images,css and javascript for your web page have to all reside in the same directory, even if you are loading from a remote url.

Hope this helps
 
beto
Aspiring developer
Profile
Posts: 14
Reg: May 05, 2014
Quito
8,740
like
09/04/15 07:43 AM (4 years ago)
Thank you Rachelle for your knowledge. We think that this instructions will help a lot of people in the forum.

Great job!!
 
Niraj Shah
buzztouch Evangelist
Profile
Posts: 2938
Reg: Jul 11, 2012
Cerritos
37,880
like
09/10/15 11:27 AM (4 years ago)
Mighty awesome -- suggest to make a new post with a meaningful title and the solution.

Congratulations!

-- Niraj
 
Rachelle-Joanne
Aspiring developer
Profile
Posts: 65
Reg: Jan 15, 2013
Lagos
650
like
09/10/15 12:46 PM (4 years ago)
@Niraj, how do I do this.
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.