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.

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 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #33082
    Avatarchrisiwien
    Licensee

    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…

    • This topic was modified 1 month ago by Avatarchrisiwien.
    #33091
    Yuri KovelenovYuri Kovelenov
    Developer

    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

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

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #33119
    Avatarchrisiwien
    Licensee

    Dear Yuri!

    Thx for the answer, I will try that.

    #33279
    Avatarchrisiwien
    Licensee

    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.

    • This reply was modified 1 week, 6 days ago by Avatarchrisiwien.
    Attachments:
    You must be logged in to view attached files.
    #33327
    Yuri KovelenovYuri Kovelenov
    Developer

    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!

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #33334
    Avatarmashud008
    Licensee

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

    #33352
    Avatarchrisiwien
    Licensee

    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?

    • This reply was modified 3 weeks, 4 days ago by Avatarchrisiwien.
    Attachments:
    You must be logged in to view attached files.
    #33361
    Avatarchrisiwien
    Licensee

    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?

    • This reply was modified 3 weeks, 4 days ago by Avatarchrisiwien.
    Attachments:
    You must be logged in to view attached files.
    #33393

    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.

    Co-founder and CTO at Soft8Soft
    FB | Twitter | VK

    #33659
    Avatarchrisiwien
    Licensee

    Dear Alexander,

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

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