solved Scroll textBlock GUI

[Dad72]

Hello,

I'm trying to create a text block in a container with any defined size, and when the text is larger, the size of the textBlock increases in the fixed-size content. Until then no problem.

My problem is that I can not get the calculations necessary for the cursor, once down, to arrive correctly at the last line of text. On this PG we can see that it works correctly, as I wish. But the calculations are adapted to the size of this container but not to others :

https://playground.babylonjs.com/#T2LHL3#1

Now, if I change the size of the container in width and/or height, it is no longer good up and down. I would like the result to be like the first PG regardless of the size of the container, but I can not do it. I do not do the right thing, I guess.

https://playground.babylonjs.com/#T2LHL3#2

Thanking you in advance for your help.

[Wingnut]

Hi D!  Wingnut screws-around:  https://playground.babylonjs.com/#T2LHL3#8

It seems to work a LITTLE better... but don't change the fontSize or _lineHeight.  I'm still testing that.  Not working well, yet.

In line 102 observer (same as an executeWhenReady)... I am TRYING to use gameDesc.fontSize * gameDesc._lines.length to calculate a new after-wrapping gameDesc.height.

Line 106 uses a bad 3.25px "adjustment".  It essentially does:  20pt fontSize + 3.25 pt = 23.25 fontSize.  Might need some tweaking.

Line 107... I also try to set slider.maximum... using a similar "on-the-fly" formula.  *shrug*

I turned-off lines 73-74, which are text-upon-textblock aligners, and instead used lines 71-72, which is control-within-container aligners.

Perhaps line 73 should be modded and re-activated... like...  gameDesc.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

Ok, I don't know if I have been helpful.  I hope so.  Maybe it will give you more ideas.  What you try... is difficult (but cool!).

IF we could measure the height of each gameDesc._lines, then maybe we could have more power.  Not sure.  So far, I cannot find a way to measure the height of each line.

I added lots more text than earlier versions... seems to work sort-of OK.  I'll keep thinking.

[Dad72]

Thank you Wingnut. It seems better. On the other hand I see that the text is centered on each line, Why, because the text is however defined on HORIZONTAL_ALIGNMENT_LEFT ?  I think that if we could know the height of each line, it would help a lot. 

FontSize of 20 makes big text I think, 16 would be better for text. Why ? Because of the 3.25 of the adjustment ?
Maybe we can find a way to calculate this fit based on this fontSize (20 / 6.15 = 3.25). I do not even know where I find 6.15 , but that makes the result 3.25. Maybe 6.2 would work better than 3.25 is slightly too big. The result of 3.22 may be closer to your idea. I do not know.  so with a fontSize of 16, because I would make an adjustment of 2.6 I do not know if it would work.

Thanks again. If you have other ideas, do not hesitate to let me know.

I hope we'll soon have a scrollView embed in the GUI of Babylon, because it's something really useful, so we could create GUI tchat with that.

Currently I would like to integrate a system of quests to my editor and if the text is long, the scrollView would be a must. I also have a help window of the game and a scrollView would also be very useful. Currently I am limiting depending on the size of the windows.

I added the scroll with the mouse wheel too :  https://playground.babylonjs.com/#T2LHL3#12

[JohnK]

Last night I knew how to deal with getting the correct position of the textBox with the slider for a set height of textBox but did not know how to vary its height based on tthe font size. Thanks to @Wingnut's PG and his use of _lines and _fontSize I was able to work it out.

First replacing the private properties with public ones. When the scroll bar is at the top the value of the slider is 0 and we know the top position of the textBox, call it startTop. When the slider is at the bottom we need the textbox high enough for the bottom of the box to be level with the bottom of the rectangle, so the top at endTop. The difference in heights of the rectangle and the textbox give you the distance to move. So now just set a slider.maximum to say 100. Then at value 0 top is at startTop and at value 100 top is at endTop. In between you get values using linear interprolation. Giving https://playground.babylonjs.com/#T2LHL3#9

The part I don't like is lines 94 to 99 however if you do not re-set the alignment part of the text (for large text) disappears when at the top or bottom

and if you want the scroll bar inside the box

https://playground.babylonjs.com/#T2LHL3#13

 

[Dad72]

It's perfect John, big thank you.

I notice on the second PG, that there is a little jumping when we arrive at the bottom with the cursor when we put a fonttSize of 16. On the first PG it is impeccable.

Thank you very much John

[ssaket]

Hello All,  Awesome work everyone !
Just wanted to share something, The slider has a property , slider.isThumbClamped = true; If set true it goes till the end, Hence, the offset value of 10 can be avoided. 

var startTop = 10;

gameDesc.top = startTop + "px";

PG coming in -> https://playground.babylonjs.com/#T2LHL3#14

[Dad72]

Thank you Ssaket.

[Dad72]

I just noticed that with the use of grid, the text goes below the cursor, gameDesc.paddingRight = 55  solve the problem

[JohnK]

52 minutes ago, Dad72 said:

I notice on the second PG, that there is a little jumping when we arrive at the bottom with the cursor when we put a fonttSize of 16. On the first PG it is impeccable.

This is to do with those pesky lines 94 to 99. With lower fontsize values they are not needed. I will investigate further and see if they can be eliminated.

 

9 minutes ago, Dad72 said:

I just noticed that with the use of grid, the text goes below the cursor

Not sure what you mean here, I am missing something?

[Dad72]

8 minutes ago, JohnK said:

Not sure what you mean here, I am missing something?

The text is trimming on the right, paddingRight was not enough.

Ok, here we have something that works well.  No more jumping problems, I think. I have added that if the text is not bigger than the container, the slider is not visible, otherwise it becomes, I also add the mouse wheel and make some adjustment .

https://playground.babylonjs.com/#T2LHL3#16

Thank you all for your help.

[JohnK]

Using gameDesc.fontOffset.height rather than gameDesc.fontSizeInPixels to determine the gameDescHeight means you can remove the horrible if (value >....) { setAlignment} lines?

https://playground.babylonjs.com/#T2LHL3#17

 

 

[JohnK]

and no jumping at 16px https://playground.babylonjs.com/#T2LHL3#18

[Dad72]

That's great, thank you again John.

[JohnK]

Switching from `scene.onReadyObservable` to `gameDesc.onLinesReadyObservable` could possible make it easier in doing version for PR

https://playground.babylonjs.com/#T2LHL3#19

[JohnK]

5 minutes ago, Dad72 said:

That's great, thank you again John.

You are welcome. a great team effort, thank you for an interesting problem and thank you @Wingnut for pointing in the right direction and @ssaket for a valuable input.

Are you looking to do a PR @Dad72?

[Dad72]

Deltakosh planned to do a scroolView, but I do not know when.

I'm not sure that our way of doing it was what Deltakosh was thinking of doing, and I'm sure what he anticipates will be more adaptable. The scrollView is on their to-do list.

But this current version really looks good.

[JohnK]

Added as a feature request.

[Wingnut]

You guys are just SO SO cool.  Excellent fun and educational experiments!  Good teaming!   Dad72's GUI Experimenter's Convention, for sure.    Pretty good attendance, so far.

Although not a showstopper issue,  we should probably get the slider control... more ready-for .isVertical.  Right now, we sort of FORCE IT to be vertical. 

Also, the after-wrapping ._lines array... gives us a "something completely different" option.  In executeWhenReady or another "late" func... we COULD use the data in each _line... to make a separate textBlock for EACH _LINE.   Then stack them into a vertical stackpanel, delete the original BIG, WRAPPED textblock, and make our slider work-with a stackpanel full of single-line textBlocks.

I did something similar in earlier scrolling tests, but I was scrolling thru a vertical stackpanel of 2-column list items (listView) and not thru a stack of textBlocks created from _lines.

In brief, make big textBlock, word-wrap it, then use its _lines to make MANY textblocks, put them into a vert stackpanel, delete original textblock, and then go to work on stackpanel sliding. Scrolling thru vertical stackpanel items... is a whole new ballgame, eh? 

We could use some pop, push, shift, and unshift toys... for stackpanel children, eh?  Or maybe stackpanels need an .includedChildren or maybe .renderedChildren array, eh?  hmm. 

Sort of like .includedMesh.... for lights.   

I wish JS allowed...   stackpanel.renderedChildren = stackpanel.children[35..60].  I don't think JS allows the double-dot range-setting stuff, though.  I could be wrong.  And maybe... converting _lines into stackpanels-of-lines... is a bad idea.

AND POSSIBLY... the wise way is THE OTHER WAY... by making textBlock more powerful, able to nicely .textAlign its text... smoothly upward and downward.  (and leftward/rightward for non-wrapped textblocks).

I believe that Dad72's initial playgrounds were aiming in this direction.  He was working-with .top settings, heavily. 

The beginning of "overflow hell".    Keep "in mind" that 16 people are still in mental institutions... after coding HTML's box-model overflows/scrollers... 25 years ago.  heh

OR... maybe our push, pop, shift, and unshift work... should happen on _lines array.  Fun ahead.  "Animated GUI"... an area of computing with wide-open horizons (mostly for young kids or comedy-seeking adults).  Marquis borders... the legend lives-on!  GUI Rectangle Border Behaviors, v1.0a.  heh. 

How about a slow-spinning, light-twinkling gem-stone on the slider knob... to get us rolling?  Huh?  Anyone? 

[Guest]

This is a really cool community effort and as the main maintainer of the framework, I wanted to share my love with you guys for the help!!