We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Check if annotation has faded out/override click behaviour of annotions

Home › Forums › Puzzles › Check if annotation has faded out/override click behaviour of annotions

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • 2020-09-20 at 8:50 pm #33082
    chrisiwien
    Customer

    Hey Verge3D-Team!

    I’ve use annotations very well so far to create click buttons, I connected the button clicks with a camera-tween-to-position. The annotations are also fade out if “fade annotations” is selected in the init tab.

    However, since I use a custom onclick event to each annotation (to open a modal window), the click event remains active when an annotation is faded out behind another scene object.

    Questions:

    • How can I disable the click event if the annotation is faded out?
    • Is there any puzzles or API way to override the standard annotation click behaviour (showing a text element)?
    • Is there a variable which indicates if an annotation has faded out – which I can use in puzzles oder JavaScript?

    I nothing works I could also check if the annoation div has get the classname “v3d-annotation-transparent” via a JavaScript mutation observer… but that seems to be fiddling around…

    2020-09-21 at 7:35 am #33091
    Yuri Kovelenov
    Staff

    Hi,

    you can indeed use the JavaScript API to override the behavior of annotations.

    https://www.soft8soft.com/docs/api/en/objects/Annotation.html

    E.g. if you put in the browser console the following

    var annotation = new v3d.Annotation(v3d.apps[0].container, 'A', 'Hello! ...');
v3d.apps[0].scene.add(annotation);

    It will create an annotation. To check if it is faded you can use the property annotation.obscured.

    Chief 3D Verger | LinkedIn | Twitter

    2020-09-21 at 7:02 pm #33119
    chrisiwien
    Customer

    Dear Yuri!

    Thx for the answer, I will try that.

    2020-09-24 at 2:43 pm #33279
    chrisiwien
    Customer

    Hey Yuri!

    Basically your recommendation works. But for my solutions unfortunately it is not so easy.

    Disable fadeAnnotations:

    I assigned the annotations within puzzles and added an click event with a fadeIn CSS class to another annotation “poi_4_1”, which fades in smoothly if zoomed in via the “parent” annotation “poi_4”.

    Enable fadeAnnotations:

    The puzzles “set attr className” doesn’t longer work, the class for “poi_4_1” is overwritten with the class “v3d-annotation”.

    What is the solution for that? I want a smooth annotation fade, but the annotations should be also faded out if behind an object. Then, with the variable “annotation.obscured” as you proposed I could disable the click event.

    Attachments:
    You must be logged in to view attached files.
    2020-09-25 at 7:28 am #33327
    Yuri Kovelenov
    Staff

    Perhaps it is possible to use two CSS classes, one of which will be controlled by Verge3D while the other can be used for manual control. Just an idea!

    Chief 3D Verger | LinkedIn | Twitter

    2020-09-25 at 8:48 am #33334
    mashud008
    Customer

    chrisiwien
    Can you share your v3d project file? Just I want to learn

    2020-09-25 at 12:16 pm #33352
    chrisiwien
    Customer

    Hey Yuri!

    I think this is not possible. With “fade annotations” active, the class name “v3d-annotation” is inserted at startup into the annotation div AND overwrite my startup class name “fadeOutPOI”. Strange is, that every attempt to change this class name later is not possible. Why?

    I guess you are using the Javascript function element.setAttribute() for assigning the class “v3d-annotation” – which delete other class names. You should rather use element.classList.add() (pleeeease provide Puzzles elements “classList add” and “classList remove” for this), so custom classes can coexist with the “v3d-annotation” class.

    The main problem:

    • MOST IMPORTANT: I have to check if an object is behind an another object (and gets hidden). With that function I could disable fade annotations and code the “if behind object fade out and disable click” function myself.
    • But, in Verge3D only annotations offer this functionality.
    • Is this only a build-in function or is the “check-behind-object” function accessible via the API?
    • If this is not possible via Puzzles or the API I HAVE TO use the build-in annotations (because of the “check-behind-object” function).
    • But the build-in annotation function overwrite my custom class name.

    I want to use a smooth css fade animation to show annotations rather than just pop-in annotations. This can be only accomplished via switching class names, since such an animation needs a class with keyframes (one class for fading in, another for fading out).

    So what can I do to solve this problem?

    Attachments:
    You must be logged in to view attached files.
    2020-09-25 at 12:22 pm #33361
    chrisiwien
    Customer

    Hey Yuri!

    I think this is not possible. With “fade annotations” active, the class name “v3d-annotation” is inserted at startup into the annotation div AND overwrite my startup class name “fadeOutPOI”. Strange is, that every attempt to change this class name later is not possible. Why?

    I guess you are using the Javascript function element.setAttribute() for assigning the class “v3d-annotation” – which delete other class names. You should rather use element.classList.add() (pleeeease provide Puzzles elements “classList add” and “classList remove” for this), so custom classes can coexist with the “v3d-annotation” class.

    The main problem:

    • MOST IMPORTANT: I have to check if an object is behind an another object. With that function I could disable fade annotations and code the “if behind object fade out and disable click” function myself.
    • But, in Verge3D only annotations offer this functionality.
    • Is this only a build-in function or is the “check-behind-object” function accessible via the API?
    • If this is not possible via Puzzles or the API I HAVE TO use the build-in annotations (because of the “check-behind-object” function).
    • But the build-in annotation function overwrite my custom class name.

    I want to use a smooth css fade animation to show annotations rather than just pop-in annotations. This can be only accomplished via switching class names, since such an animation needs a class with keyframes (one class for fading in, another for fading out).

    So what can I do?

    Attachments:
    You must be logged in to view attached files.
    2020-09-26 at 8:06 am #33393
    Alexander Kovelenov
    Staff

    Hi,
    we had troubles with classList support in IE browser, that’s why we’re using this approach with overriding element classes. I looked into the code and I believe we can do better. Adding this task to out TODO list.

    Soft8Soft Tech Chief
    X | FB | LinkedIn

    2020-10-01 at 7:29 am #33659
    chrisiwien
    Customer

    Dear Alexander,

    ok, understood. I will try a workaround for this issue.

    2020-10-21 at 3:03 pm #34462
    Alexander Kovelenov
    Staff

    Hi, fixed in Verge3D 3.5 pre2!

    Soft8Soft Tech Chief
    X | FB | LinkedIn

    2020-10-22 at 4:47 pm #34506
    chrisiwien
    Customer

    Ok thx, i will try that out.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.