Viewer api materials


(Miekeroth) #1

Hi @james and @mauricesvay

I am working on a second viewer api app, now with a combination of annotations (to navigate through the model without seeing the annotations) and materials (to highlight a feature linked to an annotation).
Did the tedious work of copy pasting all the nodes and such, but now I get stuck at a line I can't explain. It's later over here, so I might want to sleep over it, but maybe a fresh pair of eyes will see a whole lot more than I do at the moment.
It's line 1052 and that's what surprises me: quite a few similar pieces of code there that don't give a problem.

front_paws.html (74.9 KB)


How to add an additional layer that shows on hover
(Miekeroth) #2

P.S. this part still is only the materials declaration and such. annotations will be added later


(Shaderbytes) #3

well its complaining because the object you want to add a listener onto does not exist, the best mouse events to use that wont have any errors if the object does not exist are delegates using the "on" method

$("yourselectorhere").on("click", function (event) {...});

This method also accepts a second parameter where you can filter the click to specific children.

eg :

$("yourparentobjectselector").on("click","yourchildobjectfilter", function (event) {...});

Ideally this is how you handle events for containers with lots of buttons. You dont add a listener to each button , you just add one onto the parent. The event object that is passed into the listener has arguments for the actual target, so you know which button was clicked.


(Miekeroth) #4

Yeah still need some cleaning up. But i have to look at your reply tomorrow. It's too late now.


(Shaderbytes) #5

Here is an example I whipped up for you :

• Notice I am able to add the event for non existing child items without any errors ( I only inject the button divs into the dom after the delegate mouse event ) .. the parent does need to exist already obviously.

• only one event is declared , and I can add or remove child buttons and the code will always work for all of them

• using the "data-*" attribute to store in any custom data onto the dom object i want , I just stored an index here

• TAKE NOTE : events work in phases in javascript so because I have a p tag nested within the div im using as a button the "target" variable of the event object will point to it - since its the actual object the mouse interacted with. So you need to use "currentTarget" variable to get a pointer to the object handling the event.

http://www.shaderbytes.co.za/javascript_events_example/


(Miekeroth) #6

Thanks @shaderbytes,
It might be because I am a bit too tired right now, but I don't know how to incorporate that into the rest of the code.

Maybe it's easier if I write it in words:

you have seen the skeleton it is linked to. Each bone of the skeleton has a duplicate: one colored, one white.
I would like the bones (of skeleton) linked to tabs, showing only the selected bone colored, the rest in white. The basis is rather straight forward, but I also want to be able to expand that later towards a third duplicate that has yet another feature.
I used the example @maurice made with Suzan, the default Blender object.


(Klaasnienhuis) #7

Hi @miekeroth ,
I've given it a shot. I've used the trick by @shaderbytes to apply the same event to a lot of buttons at the same time which works wonders. The file is a lot smaller now.
The difficult thing is keeping track of the object names since hiding and showing nodes works with these names. That's why the function doing the actual hiding and showing does a lot of name comparing which is very specific to your file. But I've put in some comments in that function to explain a bit what's going on.
front_paws_klaas.html (8.2 KB)


(Miekeroth) #8

Wow, thank you Klaas! Going to look at it immediately. Will turn this into something everybody can use eventually, OK? Just like I did with my annotations app.


(Miekeroth) #9

O, wow, it works perfectly! (and I am glad I used the names so consistently. I did something right :wink: )

(I keep adding text..) thank you both, @shaderbytes and @klaasnienhuis, this is a great help!


(Shaderbytes) #10

Excellent expansion of the logic :wink:


(Mauricesvay) #11

I'm late to the party, but I'm glad that you all sorted out the issue :smile:


(Miekeroth) #12

Yeah :wink: this was really great! Now I am struggling on how to combine two calls :wink: (annotations and materials). Will get there in the end.


(Shaderbytes) #13

@Klassnienhuis and @ miekeroth and @mauricesvay

I refactored the code Klaas wrote , so all the heavy looping and filtering of the scene per click no longer happens. The data is prepared just once when the scene starts, the actual mouse even then only targets the selected item and previously selected item etc..

http://www.shaderbytes.co.za/javascript_events_example/


#14

This is awesome.


(Miekeroth) #15

wow! cool @shaderbytes! I'm just going to be bold and ask: how would you combine two calls? So annotations and materials?


(Shaderbytes) #16

you mean annotation and objects .. we are not doing anything with materials :wink: anyway I updated the code and added it in for you :wink:


(Miekeroth) #17

This is great! Thanks! You are the Code Master :wink:


(Miekeroth) #18

And I love they way the code is now. I already thought there was a more elegant way to do it (than my code I mean of course).


(Klaasnienhuis) #19

I really like this @shaderbytes. I'm learning a lot of JS because of threads like these.


#20

Same! I really like the way you handle the button events, it's a huge learning experience for me :smile: