Home › Forums › Programming › custom annotation is 'floating'
- This topic has 3 replies, 2 voices, and was last updated 5 years, 2 months ago by Yuri Kovelenov.
-
AuthorPosts
-
2019-10-13 at 11:36 am #20169nikpetrovParticipant
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 pulsingWhen 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/oz0X7ACZV8dqPQThanks in advance !
2019-10-14 at 2:58 pm #20273Yuri KovelenovStaff2019-10-15 at 8:58 am #20314nikpetrovParticipantHi 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
2019-10-15 at 9:13 am #20320Yuri KovelenovStaff -
AuthorPosts
- You must be logged in to reply to this topic.