Playground Based Tutorials

[JohnK]

Writing playground based tutorials (PBTs) just got easier. Well a little bit easier than when it started in this thread. There are now methods available in the playground for anyone to highlight or hide lines in the editor and to build simple standard information and selection dialogue boxes. Documentation is available to describe the available functions with links to a couple of examples and how they were coded.

Even if you do not want to write a full tutorial the functions can be used just to highlight some lines in your code or even to hide and unhide some lines as in this example https://www.babylonjs-playground.com/#NLMGJ2

A word of warning - I thought that this example was simple enough so I ignored my own advice from the documentation and just added the function to hide code straight into the playground and forgot to change a true to a false and ended up losing the code I needed to correct. So unless you are just using line decoration always write and edit the code in a text editor and copy and paste into a PG and Run to test, don't Save until you are sure everything is correct..

[jerome]

Wunderbar ! 

[Wingnut]

6 hours ago, JohnK said:

forgot to change a true to a false and ended up losing the code I needed to correct.

Cool work, JK.  Did you try my "insert some blank lines at top of PG and re-save" -method... to get different lines to hide (and thus show the lines you accidentally hid)?  *shrug*

Anyway, this is big big big stuff... JK... thx!  Later, low priority... remember you have two different PG color-themes to deal-with, and we would like mouse-highlighting active in highlighted-by-code areas.  *shrug*  Would bordering be a better choice?  Probably difficult and might not look good, eh?  Needs option for multiple code-lines within a single border... not easy.

Perhaps only "blink" (or highlight) the line numbers of the code-section that the PBT programmer wants to talk-about?  hmm.

[JohnK]

16 hours ago, Wingnut said:

Later, low priority... remember you have two different PG color-themes to deal-with, and we would like mouse-highlighting active in highlighted-by-code areas.  *shrug*  Would bordering be a better choice?  Probably difficult and might not look good, eh?  Needs option for multiple code-lines within a single border... not easy.

Perhaps only "blink" (or highlight) the line numbers of the code-section that the PBT programmer wants to talk-about?  hmm.

Let's see how popular writing PBTs becomes. If it becomes popular then those writing them will also probably make additions to the project if they need them. Currently I am adding a couple of functions hideRange and showRange which will hide a and show the line range without changing other lines, unlike hideLines  which only hides the lines given and exposes all other lines Also working on adding sliders in the same way as addRadio and addCheckbox.

[Wingnut]

*nod*  I say these color things... because... https://www.babylonjs-playground.com/#NLMGJ2

In that playground, I can't read the code in the highlighted lines, and I can't highlight with mouse so it CAN be read.

Line 7 and line 22 are almost-completely unreadable, due to light-colored text on light-colored backdrop.

I use dark theme.  Do you use light, John? 

Thx for consids on this.

[JohnK]

@Wingnut Yes I always just use light theme and now I see the issue. Will find away to react to dark theme.

[Wingnut]

thx!  Umm... I've been thinking a bit... about a PBT feature that I once dreamed-up - the ability to GO BACK ONE STEP.   That led me to thinking about scroll-able stackPanels. 

Essentially, re-stocking the stackPanel with every up-scroll/down-scroll button click... to make it APPEAR-like scrolling. 

Just getting started.  Nothing active, yet.  Exciting, huh?  (snore)   

I love using percentages, and so far, Babylon GUI is SMOKIN' the percentages... sweet!  Fun to work-with.

I am currently using rectangle-wrapped textBlocks for the "entries" into the papapanel stackPanel.  I might switch-to unclickable simpleButtons, IF I can get some power over their borders/containingRectangle (simpleButtons can activate ._children[0].textWrapping = true;  - cool). 

*shrug*  A WingnutStackItem class of my own... is certainly an inviting possibility, too.  Learning learning learning.  Good fun, though.

[Wingnut]

Hi guys.  John... is that PG theme-sensing going to be a problem?

In order to maintain proper mouse-highlighting abilities (of highlighted-by-PBT-code-lines)... the PBT-highlighting needs to be a different color than mouse-highlighting.

There is probably a CSS style set in both dark and light stylesheets... for mouse-highlighting.  Perhaps there needs to be another stylerule inserted into both stylesheets... for dynamicHighlighting (PBT highlight).  Then, let's see... you would change the class of a code-line... from un-highlighted class... to dynamicHighlighted class.

Sorry if I'm saying something that you have already thought-about.  It just seems to me that... somehow inserting the stylerules needed for light/dark theme PBT-highlighting... into their respective stylesheets... would be a wise solution.  I don't know if I have ever tried changing a HTML node class AFTER the node is already rendered.  Wear protective suit and safety goggles, eh? 

[JohnK]

17 hours ago, Wingnut said:

John... is that PG theme-sensing going to be a problem?

Its done waiting for next build.

[JohnK]

Slider GUI added https://www.babylonjs-playground.com/#UL6BCD

Documentation

[Pryme8]

Ima try to write one of these.
whoa... after reading the docs this is not very clear cut.