Start a new topic

Open pdf in overlay instead of image

Open pdf in overlay instead of image

Hi, gaurav mishra.

As for me, I have only tried to convert pdf into image files with the help of some 3rd party PDF converters. Have you ever worked it out? Any suggestion will be appreciated. Thanks in advance.




Best regards,


Do you want to use the HTMLDrawable for displaying a PDF in Augmented Reality. If so, I don't think that this works very well performance wise, but on the other hand I don't have any experience with rendering PDF using web technologies.

If you have a readily available solution for rendering a PDF, check if how it performs in the device's mobile browser. This should give you a first indication if it makes sense to try it out in an htmldrawable. Next step would be to try it using our SDK. I'm very much interested in your findings and hope you'll let us know if you have tried it.

is it possible to open pdf in overlay 


or is it possible to simply open webview when targetimage found ??


you can either use images or webviews for augmenting your target images, please see the documentation for instructions how to use them:



following are point, i want to clarify:

1:is there any way to way to show pdf when we get target image ?

2:when i try to show video using AR.HtmlDrawable

video doesn't starts when play is clicked on click or simpy no click action works on that 

i am using below code for id

htmlDrawable = new AR.HtmlDrawable({uri:""}, 5, {enabled: true, viewportWidth: 512, scale:1, updateRate:AR.HtmlDrawable.UPDATE_RATE.LOW, clickThroughEnabled: true});

3: i created simple html with content in scroll view scroll doesn't works or simply u can say not click action for htmlDrawable content any way to do this?

4: can i show video overlay ??

regarding 1:
There is no support for pdf built into the SDK. I suggest converting the pdf to an image and using this to overlay the target.

regarding 2:
HtmlDrawables are not inteded to dispaly video. Currently you would need to use AR.context.startVideoPlayer which starts playing the video in fullscreen.

regarding 3:
To enable click support you have to enable the property clickThroughEnabled and allowDocumentLocationChanges see api reference for a detailed description of each property. Additionally the htmldrawable needs to be set as dynamic (e.g. AR.HtmlDrawable.UPDATE_RATE.LOW). However depending on the content complexity this might add jitters. We are currently working on improving HtmlDrawables for dynamic content and user interaction.

regarding 4:
Video overlaid directly on top of the target is currently a planned feature. Please stay tuned and follow our developer newsletter to get notified once it is available.

Issues withe HtmlDrawable

Issue 1 : javascript not working

still not working unable to get click event on html

below i code:

htmlDrawable = new AR.HtmlDrawable({uri:""}, 5, {enabled: true, viewportWidth: 512, scale:1, updateRate:AR.HtmlDrawable.UPDATE_RATE.LOW, clickThroughEnabled: true, allowDocumentLocationChanges: true});

in i had wiritten simple javascipt to display alert message 

is there anything like html with javascript won't work

but when i write simple html action onclick it works

issue 2 : scroll event not works

i am unable to scroll html content 

i have also attached page see.php


Hi gaurav and arron,

The pdf.js might be a solution. Several months ago, I used this for a mobile app where PDF files had to be displayed in an Android webview. No external app has is opened, the PDFs are rendered inside the app webview. 

However, I have not yet tried using a PDF file with PDF.js as HTML drawable in Wikitude. But, I think it is worth a try. 

See the following page for further info:




alerts won't work on html drawables. Try changing the DOM or redirecting to another page.

Scrolling is not supported on the html content. Currently only clicking works.
Login or Signup to post a comment