Start a new topic

HtmlDrawable not displayed on Android

Hi,


with our custom react native wikitude bridge we're not able to display html content (i.e. <h1>my text</h1>) as augmentation for image trackables. The issue appears only on android (iOS works as expected).

Image targets are recognized successfully - both functions onImageRecognized and onImageLost are called on the js side. We use the same js implementation for ios and android.


Are there any known issues with displaying html drawables on android?


Setup:

Wikitude SDK (JS API): 8.3.2

Device: Samsung Galaxy S8

Development OS: MacOS


Hi Markus,


As I mentioned in this post - https://support.wikitude.com/support/discussions/topics/5000091832 - is this issue also happening with the JS API sample app if you change the code of the HTMLDrawable?


Thx and greetings

Nicola



Dear Nicola,


thanks for your response. When using the wikitude sample application with html drawables, everything's fine. Embedded into react-native all features except html drawables work.


I embedded the "01_ImageTracking_4_HtmlDrawable" example into our react-native application and the surfboard is displayed, the wheater widget is not. Any ideas?


Thanks

Markus


Hi Markus,


Ok then this sounds like it's related to the React-Native Plugin - did you reach out already to the maintaners of the Plugin (please note that Wikitude is not the creator of the Plugin).


Thx and greetings

Nicola

As i mentioned in my first post, we created our own custom react-native plugin. We did not use the plugin from bravedigital. I already read the code but there's no real magic behind the integration of wikitude into react-native. It's the same as i would use the js api with a native iOS/Android application.


Ok, do you have any other ideas on how to display svg-based models in wikitude? Live conversion to png or jpg seems a little exaggerated to me ;-)

Sorry for the confusion - when you mentioned custom react-native bridge - I assumed that you're working with the react-native plugin from bravedigital. Best would be to use .pngs and I'd recommend to try it with 1,2 to see if the outcome is fine and if this approach is working with your plugin.


Thx and greetings

Nicola

No problem. ImageDrawables work perfectly with our bridge. The samples 1 and 2 are displayed correctly. But we need to display svgs and the HtmlDrawables seems to be the way to go.


Does Wikitude provide any features to render basic svg-based vector data or do you have any advice how to convert them to image data? I saw that the ImageDrawable only provides uris and we would like to pass base64 strings then.

After debugging several hours i found out that, when changing the device orientation from portrait to landscape and vice versa, the html drawable immediately appears on Android.


After the HtmlDrawable appeared, updating the html code works as expected. Are there any special update calls from Wikitude when the orientation changes?

Do you have any more information about this approach? 


I'm in the same spot and my App is only in portrait.


Thanks

Hi,


We did fix some rendering issues related to the HTMLDrawables and our Android flutter plugin for release 9.2.0. The issue itself was related to a rendering issue calling onPause/onResume where the HTMLDrawable was always hidden.


Nevertheless, in the current version of the SDK we can't reproduce your issue in none of our architect/extensions apps. I would assume that this is another rendering issue caused by some missbehaviour between our SDK and react-native, but without a way to reproduce it, I can't proceed with the investigation. Could you please try if pause/resuming the activity makes some difference? That could give us a clue of where the problem could be.


Regards,


Aitor.


1 person likes this

Thanks for you response.

In the bridge with React Native, the Wikitude(ArchitectView) it's initialize when there is a View to attach, then is started (resume/start) without URL , when the bridge recognized an url property it will call the loadArchitectWorld method to load the URL. 

  • is there a issues (race condition) if I start the camera before an url is loaded or vice-versa, load an url before the camera is started?.
On Android I used a Fragment to attached to the ReactNative View and for IOS the View, then sync the lifecycle like the Wikitude examples. 
I'll look into give you an example/apk for you to test it out.

Thank you.

As long as you call the load method after the onPostCreate method on Android, there shouldn't be any issues there. In case there's an issue there, it should affect not only HTMLDrawable, but the rest of components. 


Your approach with the Fragment seems correct to me, so I'm looking forward to check your sample.


Regards,


Aitor.

Login or Signup to post a comment