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.

custom annotation is 'floating'

Home Forums Programming custom annotation is 'floating'

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20169
    nikpetrov
    Participant

    Hello, please help, I tried everything I could.

    My client asked me to make animated annotations: when a user hover over it, it starts to pulse slightly changing its opacity and size. I tried everything regards the original ADD ANNOTATE puzzle, but after a lot of testing I found that it’s just impossible to change the original puzzles based annotation’s style, it can’t pulse changing opacity when hovered.

    I defined my custom annotation in the index.html with the following code:

    
    <div id="b1" onclick="b1changeColor()" >
    <div id="b1Text" style="display:none; padding-top:36%;">
    battery
    </div>
    </div>

    Then I hooked it up on an empty in Blender with help of the BIND puzzle:

    Then I define the annotation style in my mycustom.css file:

    #b1 {
      width: 35px;
      height: 35px;
      opacity: 0;
      color: #0074ff;
        text-transform: uppercase;
          letter-spacing: 1px;
      text-align: center;
      background-color: white;
      border-radius: 50%;
      animation: shadow-pulse 0s infinite;
    }
    #b1Text {
    	font-family: hassans;
    	font-size:5px;
    	color:grey;
    	}

    It works good only when the camera is near the object:

    (when the mouse is hovered it start pulsing

    When a user hover mouse over an annotation, index.html calls my custom function from mycustom.js file

    b1.onmouseover = function () {
    	b1.style.animation = "shadow-pulse 2s infinite";
    	b1Text.style.display = 'block';
    
    }
    
    function b1changeColor()  {
    	b1Text.style.display = 'none';
    	b1.style.backgroundColor = "blue";
    	unhide1();
    }
    
    b1.onmouseout = function () {
    	b1.style.animation = "shadow-pulse none";
    	b1Text.style.display = 'none';
    }

    The core of the problem is: when I’m moving the camera around or zooming it, ANNOTATIONS START RANDOMLY FLOATING AROUND, without actually being fixed on the object.
    Please help, it seems that your original “add annotate” get it’s position fixed on the object quite well and don’t “float” in the space. How could I attach my pulsing design and functionality to the original “add annotate” puzzle? Or how could I hard fix my own custom annotation with the empties without that floating? Here is a video with more detailed description of the problem: https://yadi.sk/i/oz0X7ACZV8dqPQ

    Thanks in advance !

    #20273

    Hi,

    can you create a simpler example, say, with cubes, and attach it here for us to look into? great app btw :good:

    Chief 3D Verger | LinkedIn | Twitter

    #20314
    nikpetrov
    Participant

    Hi Yuri and hi everyone,

    I’m glad to say I found a solution by myself… I added some new css here in index.html,
    it was:

    <div id="b1" onclick="b1changeColor()" >
    <div id="b1Text" style="display:none; padding-top:36%;">
    battery
    </div>
    </div>

    NOW:

    <div id="b1"style="position: absolute; cursor: pointer; user-select: none" onclick="b1changeColor()" >
    <div id="b1Text" style="display:none; padding-top:36%;">
    battery
    </div>
    </div>

    In other words, I added position: absolute to the annotation div. Hope it helps someone. Cheers – N

    #20320

    great you worked it out and thanks for sharing the solution! :good:

    Chief 3D Verger | LinkedIn | Twitter

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