Problem in clicking stackpanel button

hello guys,

here is the PG https://www.babylonjs-playground.com/#XCPP9Y#1207

please the problem is when I click tio show, I display button 1,2,3 and 4 and when I click to button 1 I display button 5, 6, 7 and 8 but when display tem the middle colone (1,2,3 and 4 are not clickable ! anymore), normaly I can click button 1 again to disapear 5,6,7 and 8 button but it doen’t work.

the problem is when I resize the window in the right, it works !!!

any help please

Anes

Hi Anes,

I’m taking a look …

https://www.babylonjs-playground.com/#QKHMD4#1

No fixes yet… sorry. Just a little indenting cleanup and a fresh playground “series”. I inserted a few console.log reports, but I got interrupted by real life issue… can’t continue troubleshooting at this time. It needs a few (hundred) more console.log lines… should be able to start to see what is happening.

Anes… starting to “play with” a little OOP, eh? Alright! :slight_smile:

Button 1 seems to “go dead” after it is used to turn-on buttons 5-8. I think Anes wants Button 1 to toggle buttons 5-8 (panel2) on/off. Perhaps Button 1 should toggle panel2 on/off (with panel2.isVisible?), instead of other methods.

Line 46 never runs, and it probably SHOULD… sometimes. :slight_smile:

Maybe Anes, Cedric or others will nail it. Talk again soon.

@Wingnut Here I restart from 0 using OOP, so I create some panels and buttons here https://playground.babylonjs.com/#37G8FG#1
I think it is more clean now I strated creating observabls callback function, the problem I have an attribute inside my stackPanel class I initialize it by false, when I console it inside createScene Function (line 30) the value is false but when I console it inside the callback function (line 102) the value is true !!!
where this true come from, really I don’t understand :exploding_head::exploding_head::exploding_head::exploding_head::exploding_head:

@Wingnut @Cedric
Now using some classes it works fine for me (still don’t know why it doesn’t work before) but it works now ^^
https://playground.babylonjs.com/#37G8FG#2

@Wingnut I solved the console problem defining the callback function inside createScene, I don’t know the console.log(panel1.panel) inside createScene and outside it’s not the same still don’t know why :stuck_out_tongue:

Hey, that’s great news, Anes. (I’m also glad because I am short-on-time to help today). And thanks for telling us how you solved it. Yeah that sounds like a “scope” issue… sometimes an obstacle for noob OOPers like myself (and perhaps you, though you are doing objects pretty well, so far).

Badly said: “Scope” issues can cause a variable created in/by ONE “context”… to not be able to be seen/changed by another “scope context”. It’s part of OOP’s isolation of objects from each other, allowing “interfaces” (API’s) to be installed on objects/scopes. Public/private stuff.

An Object with an API/public-interface… can say/require “Only use THIS phone-line to communicate with me. Only use/change THESE exposed methods and properties, and maybe ONLY via get/set wrapper-methods. Don’t sneak into my windows or back doors.” When an object has these seemingly-strict “how to talk to me” rules/regulations, the object often becomes HIGHLY re-usable, project after project… forever. It gets put into your toolbag-of-useful-reusables. :slight_smile:

Likely, you have a variable declaration from within ONE scope-context… trying too sneak-in the basement window of another context (something trying to read/change/set a prop, or call a method - from outside-of the scope where it was declared/created). One isolated object/scope… is not allowed to see/use the value/change done (attempted) by ANOTHER object/scope.

Damn, I’m a bad explainer. heh. I should learn it myself before I try to teach stuff. :slight_smile:

But all is good good good! If you find some nice/easy tutorials about “OOP-scoping in JS… for Wingnuts”, drop a few URLs/links in this thread… as final post, perhaps. Then this thread (and your playgrounds) will be used for others to learn-from. This thread has a high edu-quotient. :slight_smile: