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.

Display annotation’s dialog box

Home Forums Programming Display annotation’s dialog box

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #54545
    ahdziri
    Customer

    Hello guys,

    m trying to display the annotation’s box when I mouseover the annotation.

    I have tried this to write this function

    const annoDialogs = document.querySelectorAll(“.v3d-annotation-dialog “)
    const annoColors = document.querySelectorAll(“#poi”); // annotations

    annoDialogs.forEach((annoDialog) => {
    annoColors.forEach((annoColor) => {
    annoColor.addEventListener(“mouseover”, function () {
    annoDialog.style.display = “block”
    })
    })
    })

    #54550
    kdv
    Participant

    It won’t work as you’re expecting. Annotations are objects having HTML elements and should be treated as objects.

    const annObjects = [];
    
    app.scene.traverse(function(object) {
        if (object.isAnnotation)
            annObjects.push(object.id);
    });
    
    for (let j = 0; j < annObjects.length; j++) {
        const annObj = app.scene.getObjectById(annObjects[j]);
        if (!annObj)
            continue;
        const annElem = annObj.annotation;
        if (!annElem)
            continue;
        annElem.addEventListener('mouseover', function () {
            annObj.annotationDialogVisible = true;
        });
        annElem.addEventListener('mouseout', function () {
            annObj.annotationDialogVisible = false;
        });
    }

    https://v3d.net/9cj
    This code works even with annotations on cloned objects (such annotations have no id and cannot be identified in HTML). Annotations with the same name and id are also supported…

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #54561
    ahdziri
    Customer

    Hello kdv77kdv,

    Thank you for your reply,

    I have tried the code you recommend but I’m getting an error

    “object not defined” (kindly check the attached img).

    Attachments:
    You must be logged in to view attached files.
    #54563
    kdv
    Participant

    Object != object, annoObjects != annObjects

    just copy and paste ))) you have at least four typos. why do you change names of variables?

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #54565
    ahdziri
    Customer

    My mistake, Now it worked.

    Just was trying to understand the logic by typing the code and explain to my self each line.

    Thanks again

    #54566
    kdv
    Participant

    The logic is simple: find all annotation objects in the app scene an add them to an array, then add listeners to html elements of all found annotations…

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #54567
    ahdziri
    Customer

    I really appreciate your help

    #54583
    Crunch
    Customer

    Kdv – very impressed by your contributions here and on boards in general, thanks for being so helpful!!!

    Related question for you about Annotation objects. It seems to me, that if you have a lot annotations in a scene and a lot of camera motion (from tween, or path animations), it can start dragging down the framerate. Which makes sense of course as the browser is constantly having to translate each of the elements position as the cam moves.

    Its been a while since I was last working with creating annotations via puzzles, but from what I remember, I think my idea was to ‘hide’ them before any cam animations then have them fade back in when motion had stopped.

    I believe I had finally figured out a way to ‘hide’ them (make then invisible and non-reactive to mouse events – hover, click, drag – with CSS), but… after looking at inspector window in browser, they were still there in the dom getting their positions translated (sucking up processing power)

    Is there an ‘easy’ way off turning them off?

    I believe I ended up having to create a few puzzle based functions that basically removed the anns, then another set to re-create them when I wanted them to be visible. Seemed like a lot of work (and a big puzzles mess) for a simple toggle function.

    I have since decided to develop my own puzzle based setup that uses my own custom html/css in conjunction with the ‘bind’ and ‘unbind’ puzzles.

    However, if there was a way to toggle on/off the tracking (‘binding’) mechanism for standard annotations, I might go back to using to using the standard Annotation tools in Verge. Your thoughts here would be appreciated. Thx again!

    #54591
    kdv
    Participant
    object.internVisible = false;
    object.doUpdate = false;

    this will make an annotation invisible and will prevent its html elements from tracking it ))) no need to re-create them, just hide and remove tracking…

    p.s. console.log(object); and you will see a lot of interesting in the browser console…

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #54592
    kdv
    Participant

    Somethig like this )))

    https://v3d.net/9cj

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #54614
    Crunch
    Customer

    OMG.. 2 stinking lines of codes.. nice. THANK YOU!
    +5 points for the follow up post with that example

    Don’t want to be too greedy with your time, but.. bonus question/riddle.

    Is there any way to be able to modify the bind function so instead of the html element’s top left box getting snapped to a 3d objects origin, the html elements center could be used instead?

    EDIT: I answered my own question before posting this, I can just get the width of my element, divide by 2, then change the result to negative and set it as the left margin on html element.

    Thanks again Kdv!

    #54616
    kdv
    Participant

    OMG.. 2 stinking lines of codes.. nice. THANK YOU!

    One more trick: if you find in puzzles.min.js the function changeVis and paste this in the end of the loop

            if (obj.children) {
                obj.children.forEach(function(child) {
                    if (child.isAnnotation) {
                        child.internVisible = child.parent.visible;
                        child.doUpdate = child.parent.visible;
                    }
                });
            }

    then you can hide/show annotations together with their objects.

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

    #55530
    kdv
    Participant

    object.internVisible = false;
    object.doUpdate = false;

    In 4.1.1 this doesn’t work. The following code will work
    hide:

    object.annotation.style.display = "none";
    object.doUpdate = false;

    show:

    object.doUpdate = true;
    object.annotation.style.display = "";

    Puzzles and JS coding. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

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