Start a new topic

How to update HtmlDrawable when button is clicked?

How to update HtmlDrawable when button is clicked?

1 person has this problem


Sorry if this is repeat since I only did quick search of forum... I am new to both JavaScript or Wikitude...


What I am trying to do is have a "plus" and "minus" button and show current value. The buttons follow Image Recognition interactivity example and uses ImageResource / ImageDrawable.

this.imgButton = new AR.ImageResource("assets/wwwButton.png");


createWwwButton: function createWwwButtonFn(url, size, options) {
options.onClick = function() {
return new AR.ImageDrawable(this.imgButton, size, options);


I just modified the onClick function to either increment or decrement a local variable. I know local variable is updated correctly because I tried:


        AR.context.openInBrowser("" + variable + "_number");


And it brings me to the expected page based on number of times I hit plus button (I am only working on plus button for now).


I am displaying value with:


    var myHtmlDrawable = new AR.HtmlDrawable({html:"<div>" + variable + "</div>"},  1.0, {updateRate: AR.HtmlDrawable.UPDATE_RATE.HIGH});


But this give me static / inital value only. I can use myHtmlDrawable.html but doesn't seem to do what I want from options.onClick function (from above / following interactivity example).


What am I doing work?  Is the a different / better way of displaying a value that users can increment / decrement in described fashion?





I don't see anything wrong with what you are doing. Did you check for any javascript errors using the ade.js and a desktop browser? Just include the ade.js (comes with the SDK) and it allows you to run the AR experience in a desktop browser. It is a bit limited in terms of visualization but helps to get rid of any JS errors before running on a device.

I believe I am doing that already...

    <script src="architect://architect.js"></script>
    <script type="text/javascript" src="../ade.js"></script>

This is what I see when I open index.html with Firefox:

html: <html><head/><body style='background:transparent;margin:0;'><div>0</div></body></html>

Am I supposed to embed JS into HtmlDrawable object? How would do that?



var myHtmlDrawable = new AR.HtmlDrawable({html:"<div><script type='text/javascript'>document.write(window.count);</script></div>"},  1.0, {updateRate: AR.HtmlDrawable.UPDATE_RATE.HIGH});

I get undefined with this... How do I properly scope things?

Make sure the ../ade.js is available at that path.

Just as an information you do not need to pass updateRate anymore as of SDK 3.1.. Any html drawable will update when its content changes.

I just realized why it might not work as expected. You are using the window variable to pass information to the html drawable. I don't expect this to work (it has not been tested and not designed to work that way). However it is should be easy to pass default information at the beginning and update it later using myHtmlDrawable.evalJavascript().
Login or Signup to post a comment