Difficult Task

[Mezzorio]

Hey Guys

I am currently struggling significantly with a task, I have my canvas with 38 sprites in, which you pan across each is set up with these values;

staffnum = 38;
                staffs[staffnum].name = "Dave";
                staffs[staffnum].description = "Description: Dave is cool";
                staffs[staffnum].title = "Title: Dave's Title"
                staffs[staffnum].image = "Images/TinyPNG/Dave.png";
                staffs[staffnum].department = "Dave's Tech"
                staffs[staffnum].position.x = 23.3;
                staffs[staffnum].position.z = -0.2;
                staffs[staffnum].position.y = 5.65;
                staffs[staffnum].isPickable = true;
                staffs[staffnum].size = 3;

 

I currently run through the array and can pull the data values for each.name .description and so on... with a mouse click, so when you click a sprite it opens a modal box in html over the top of the canvas with that image and the values pulled through and displayed, then you can close the box and return to canvas.

The task I am trying to accomplish, is when my mouse cursor is hovering over someone, i want to display there .name and .title value that's being created in my js file through and display above the cursor so you can see who you are hovering over basically. I currently cannot find a way of completing this task, if anyone could make a simple playground, code pen, whatever platform with a small demo of this in affect that I could use to understand and then apply to my work? My build is seperated into multiple files currently so making a babylon playground isnt possible, but if need be i can provide a link to my build folder for download,

THANKSSSS

Mezz

 

 

[Pryme8]

https://doc.babylonjs.com/overviews/gui

[adam]

 

[Wingnut]

https://www.babylonjs-playground.com/#XCPP9Y#269

A little starter kit, perhaps.

There is one fullscreen cellophane (advancedDynamicTexture), 2 stack panels stacked atop each other... should be placed side-by-side somehow.  And in each stackpanel "column", there is two textBlocks (non-clickables), each with a rectangle container around them... for pretty borders.

If you can fig how to get the two stack panels to be side-by-side, you're off and rolling.  With me?  Green buttons should be in left column/stack, blue buttons in right column/stack.

Those two stack panels (widget-stacking silos is what they are)... MIGHT need to be put into a third stackPanel or rectangle... whose .isVertical is set to false.

So, to summarize... we have texts, inside rects, inside stacks, inside adt.  We might need texts->rects->stacks->horizonatalStack->adt. 

(folks sure talk funny 'round these parts, eh?)

update:  [link]  Just for fun, I tried adding papapanel, a "grouping stackpanel" which I then set isVertical = false; and then I put both green and blue stackpanels into IT.  No side-by-side green-blue stacks, yet.  hmm.

[Mezzorio]

15 hours ago, adam said:

 

This is great! Can i make this work with sprites?

[Wingnut]

Hi again.

Mezz... over in your other thread... I showed you the modified "Overlapping Sprites" demo that you created.  It was rigged with actionManagers on the sprites... that reported WHEN you were pointerOver them and pointerExit.  Watch the console. 

Console is reporting "over Kirsten" and "exit Kirsten", etc, so you KNOW that you can sense pointerOver and pointerExit for sprites, and take actions for both events.  Currently, that action is a console.log(actionEvent.source.name).

Now, in THIS thread, Adam showed you how to launch a textBlock, and turn it off, and I did the same, except I never turned it off... and my "panel" was a bit fancier, trying textblocks inside rectangles inside stackpanels... getting you ready for key/value display from your database of staffers.  Name: Kirsten, Age: 24, Location: Fort Worth, SomethingElse: whatever, you know... two columns... keys and values.  But, I wasn't able to get the blue values column to be BESIDE the green keys column... yet.

The only reason why the keys must be in a different stack/column from values... is that I want to allow the key and value to be different colors.  If you put the key and value on the same textBlock.text, the key and value text must be the same color.  With the 2-column method, keys and values can have individual text colors.

Anyway, you know how to sense pointerOvers/Exits for sprites. 

Instead of doing console.log(actionEvent.source.name) whenever you see a pointerOver... do displayStafferData(actionEvent.source.name).  DisplayStafferData() will be a big fat gui builder.  It doesn't add an advancedDynamicTexture every time a staffer panel pops-open.  That is done only once.  It DOES create/enable a special stackpanel or many stackpanels... with many textBlocks and maybe some rectangles.  It displays all the data for THAT staffer... piece by piece, assembled into a fairly large panel... somewhat like the starter kit I made (only much bigger)... or somewhat like Adam's example.

SO, you have a 2-piece thing, here. 

   #1 - use/install the "Am I over a sprite?" code from that other thread. 

   #2 - steal code from Adam's or my Babylon GUI demo , pasting it into a function - displayStafferData(staffer)..   A universal stafferData report-generator func.  With me?  You have all the tools you need.  One part from that other thread, and one part from this thread.  Wire them together, and you have success, yes?

But, if you wish, make us a nice 3 non-overlapping-sprite playground, wire-up the pointerOver stuff from the other thread, and then we will attach Adam's or my labelMaker/panelMaker that pops-up when each sprite is pointerOver'd.  Sound like a plan?

So yes, it can be done with sprites... and it starts with your other thread that has pointerOver working for sprites.  Include a call to displayStafferData(name) in your onPointerOver() handler, and you're done... sort-of. 

For at least PART-OF your pop-up panel, I think you will need a two-column display for the key-value structure of your DB, and I have not yet found HOW to position 2 GUI stackpanels side-by-side.  I'm stuck at https://www.babylonjs-playground.com/#XCPP9Y#270 with green stackpanel and blue stackpanel NOT sitting side-by-side... yet.  I'll fight with it a bit... see what I can learn. 

Rem... #270 is only the PANEL-building part of your 2-part situation. The other... is sensing pointerOver and CALLING the panel launcher with the correct staffer as a param/arg.  Then the panelMaker can do "staffersDB.findByName(name) and use the correct record/data to "populate" the new popup panel-with.

[Pryme8]

Wingnut needs to write a book.

[Wingnut]

  I think I just did.  Felt like I pooped-out a riverboat.  heh

[Mezzorio]

Hey @Wingnut,

Are you still around on here!?  

I was made redundant in my last place hence the halting of my work with this, but I am restarting it for my own personal sites use!

Just hoping your around for me to ask questions of again as you were my light in the dark with this work

 

Thankss