Start a new topic
Solved

Click on the click event of the point of interest in html, click on the no response question

Control the display and hiding of points of interest by adding click events for points of interest in html


Hi,


I am afraid that I do not exactly understand your use case but you could have a look at our Javascript API here https://www.wikitude.com/external/doc/documentation/latest/Reference/JavaScript%20API/classes/GeoObject.html


Thanks

Eva

Thank you for your answer:

The click event is added via html5 to control the point of interest, and the html click event does not take effect?

I want to add a corresponding click event to each tag in html5. What should I do?

This  connection https://www.wikitude.com/external/doc/documentation/latest/Reference/JavaScript%20API/classes/GeoObject.html

I tried but could not solve this problem,

Is there any other way to solve the problem of adding click events to the tags solved by html5?

thank you

Hi,


We do not offer any HTML5 tutorials. May I ask what error you are getting if you try the solution that I have suggested you above?


Thanks,

Eva

Thank you for your answer, the link you gave does not solve my problem.

I use html5 to define the style of POIs, and add the onClick event in html5 to control the display and hiding of POIs. As a result, I can't control the points of interest through the OnClick event control in html5.

I just want to control the POIs through the OnClik event added in htm5l. Is there any good advice?

For example: I added a Cancel button in html5, click the Cancel button and the POIs disappear.

This is my code。


photo3.png
(331 KB)
photo2.png
(426 KB)
photo1.png
(398 KB)

this is my code.

photo4.png
(489 KB)
photo3.png
(446 KB)
photo2.png
(331 KB)
photo1.png
(410 KB)

Hi,



I'm by no means proficient in HTML and JS, but I don't see why your Test.html file would know anything about the onTest function. That function is defined in a separate file Test.html knows nothing about.


Regardless, from what I understand, you're just trying to hide the HTML drawable when it is being clicked on. For such cases we offer a onClick event on the HTML drawable itself. Here's the corresponding reference page.


World.myHtmlDrawable = new AR.HtmlDrawable({
  uri: "some_url"
}, 
0.25,
{
  ...
  onClick: function() {
    World.myHtmlDrawable.enabled = false;
  }
});



Will this work for your use case?



- Daniel

World.markerDrawableIdle = new AR.HtmlDrawable({ uri: "html/Test.html" }, 0.001, { viewportWidth: 320, viewportHeight: 100, backgroundColor: "#FFFFFF", translate: { x: 0.36, y: 0.3 }, onClick: function(){ World.markerDrawableIdle.enabled = false alert('1231313') }, horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT, verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP, clickThroughEnabled: true, allowDocumentLocationChanges: false, onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) { AR.context.openInBrowser(uri); }, onError: World.onError, } );

Thank you Daniel for your answer:

   I tried it.

World.myHtmlDrawable = new AR.HtmlDrawable({

   Uri: "some_url"

},

0.25,

{

   ...

   onClick: function() {

     World.myHtmlDrawable.enabled = false;

   }

});

But I still don't take effect here. I can't call the event when I click "some_url".

Do you have other methods for this question?

photo1.png
(536 KB)

Hello there:

  How to set the width and height of ImageResource in the OnLoad method in ImageResource?

I try

      onLoaded: function onLoadedFn(loaded){

     Loaded.width = 450;

   Loaded.height = 900;

}

But the size of the ImageResource has not changed.

Can you give me some advice or use an example?

photo1.png
(483 KB)

Good morning,



the onClick event should definitely work. Have you tried attaching Safari/Chrome to see if there are any errors raised while your app is running or when you are clicking?



- Daniel

Hey again,



I'm a little confused as to what you're trying to do with this piece of code. It seems to me you just added an onLoaded field to the World variable of one of our POI samples.


The onLoaded callback of an AR.ImageResource receives a width and a height as its two inputs. You cannot set the width or height of an image resource though. You would either need to change the resolution of the underlying file, if you really wanted the resource to have different values for width and height, or, more practically, change the size of the AR.Image Drawable you will be using the image resource with instead.



- Daniel

Thank you for your answer:

     No error messages were debugged in Safari/Chrome.

Thank you for your answer:

To change the size of the AR image to achieve the purpose of changing the size of the ImageSource, use the AR.ImageDrawable setting height in the Wikitude SDK API Reference? I tried it without effect.

Can you give me some advice? Thank you.

Login or Signup to post a comment