Wikitude

bar chart in wikitude sdk

Hi Team,

is it possible to implement a BAR chart as an overlay on top of a target and handle onlclicks on corresponding bars?

I am using wikitude js API 5.0

Hi Ramesh,

I think this should be possible, but won't be easy to implement. You would need to define every bar as a seperate ImageDrawable and implement an onClickListener on each of them. Issues could arise with the positioning of the bars, and the size of the bars so they are big enough to be clickable, especially over multiple devices. Please feel free to try it.

Best regards,
Simon

Hi Simon,

Thanks for the reponse.I achieved the bar chart using html.

One query 

1)On click of 1st html content,i want to hide/display 2nd html dynamically.

example:-

var pageOne = new AR.Trackable2DObject(this.tracker, "*", {

drawables: {

cam:

}

});

oncliking anywhere in html1,i want to hide html2&html3.is it possible?

 

2)I want to dynamically update the contents present inside my html4,based on click event inside html1.is it possible?

 

Thanks in advance,

Ramesh

Hi Ramesh,

1. You could set enabled to false or destroy html2 and html3.

3. Try to reset the uri component of html4. 

Best regards,
Simon

Thanks Simon for the response.

set enable/disable is working.However,i observed that my click events are not limited to the html Drawable in which i defined it.

The same click even is getting invoked from anywhere on the screen and also from any other html drawable on the screen.Am is missing anything?

i am defining onclick for html1  to create an alert("html1 clicked"),but same alert appears for html4 also even though i have defined an empty onclick for html4.

I went through the documentation and found out that we need to return true in onlick of a drawable so that only that drawable click event occurs but still it's triggering same onclick on other htmldrawables.Please help me on this.

To be clear,here is what i am doing.

 

var html1 = new AR.HtmlDrawable({
        uri: "assets/lifestyle.html"
        }, 1.5, {
        viewportWidth:720,
        viewportHeight:1024,
        offsetX: -0.25,
        offsetY: +0.1,
        clickThroughEnabled: true,
        allowDocumentLocationChanges: false,
        onClick : function() {
                        alert("html1 Clicked");
                        html2.enabled=true;
                        html3.enabled=false;
                        return true;

                      }});

 

but still when i click on html2,i get alert("html1 Clicked"); 

Hi Ramesh,

this is strange. I just made a little test with our example application, expanding the HTMLDrawable example with another weather widget and implemented onClick like you did. OnClick was only fired when I hit the widgets exactly and the right code was executed.

To clarify:

If you click anywhere on the screen the code in html1.onclick will get executed?

What device are you using and what Android OS is it running?

Best regards,
Simon

1)yes Simon,if i click anywhere else also on the screen,onclick even of html1 gets fired(specially if i click on any other html view on screen).

2)I am using a samsung note3 device with 4.4 version.

Please refer the below doc which talks about onclick of htmlDrawable and let me know if i am missing something.

 

onClick

 


Inherited from Drawable



When the Drawable is clicked, the system will trigger Drawable.onClick(ARObject). A click on the screen might hit multiple Drawables, thus a click creates a "clicked Drawables-queue", with the uppermost Drawable in the front of the queue. The return value of the function determines if, after the onClick()-Function was executed for this Drawable, the queue shall continue to execute onClick() for the next Drawable in the queue. In case the last Drawable in the queue still requests to continue the click-queue, ARObject.onClick() will be executed. If the queue still continues, context.onScreenClick() will be executed.

The return value of the function determines what happens next. If false, the click-queue should not stop with this Drawable. Thus, the next Drawable's onClick() function will be executed. This is the default value in case no return value is set or the function is not defined for this Drawable. If true, the queue-execution will stop at the current Drawable, underlying Drawables will not receive onClick() calls.

Hi Simon/Team,

any clue as to why i am getting onclicks from other htmldrawables even if onclick is on a specific drawable.

 

Thanks in advance,

Ramesh