Canvas2D to GUI - frustration with unit values

[lihis]

Hello,

Today i decided to start convert my Canvas2D code to GUI since C2D is no longer supported and i'm having rendering issues with it. Plus it's nice to have a more up to date Babylon version.

However, all the Canvas2D position values and such are numbers whereas with GUI they seem to be strings(?)

I have used a lot of simple +, -, and multiply math to position my things, but that no longer works because the values are no longer just numbers. Animating things seems really difficult as well for the same reason. I have to say i am not having fun with this combined value and unit with GUI.

Could we perhaps have a way to separately set the unit? I donno. Maybe i'm missing something but i'm having trouble.

 

 

[aWeirdo]

Hi @lihis 

Can't you just add your math variables into the strings?  

simple example; https://www.babylonjs-playground.com/#XCPP9Y#275
see lines 33 - 37 & 45 - 46

If not, can you please create a more precise repo displaying your issue? 

[lihis]

@aWeirdo

Well, that's not really what i mean. For example in your example i would like to be able to take the value of say rect1.height and subtract 30 from it. It being a string doesn't make this very user friendly experience. Or try animating the value rect1.height. You'd need to what, have a separate value that you animate and then use some kind of observer to make a string from that value and then apply that to the rect1.height.

Compare that to C2D where i can just animate the number of rect1.height.

It's just not fun. I find it way too complex.

[aWeirdo]

@lihis

The babylon GUI is still very young, and it's basicly just HTML & CSS (hence the strings) rendered in the canvas  

But fear not, animations are easily done!
(the following example will only work on px values ofcourse, but it's a start )

PG; https://www.babylonjs-playground.com/#XCPP9Y#279
Code;

// Element, Target, INT to change target by, e.g. +10 (or just 10) to increase by 10 px, -10 to decrease by 10 px.
    guiPxAnimation(rect1, "height", +50);

function guiPxAnimation(element, target, change){
    if(!element || !target || !change) return;

    switch(target){
        case "height":
            var _height = element._height.internalValue;
            if( change > 0 ){
                change -= 1;
                _height += 1;
            }
            else if( change < 0 ){
                change += 1;
                 _height -= 1;
            }
            element.height = _height + "px";
        break;
    }
    setTimeout(function(){
        guiPxAnimation(element, target, change);
     }, 25);
}

[lihis]

@aWeirdo Mmm, but it used to be easier. With C2D i could just use CreateAndStartAnimation for example:

BABYLON.Animation.CreateAndStartAnimation('boxwidth', box1, 'width', 30, 120, 1.0, 1.5);

Now you need out of the box function.

So i know it's possible / how to change and animate the values but it's quite a bit more difficult with GUI than C2D, at least in my opinion, because fiddling around with string values just isn't as easy as fiddling with numbers.

But i do appreciate you giving me solutions,  even though this topic was more of a plea from me to have easier way for us to adjust GUI values.

I'ts entirely possible everyone else is happy with it the way it is, i don't know. My experience going from C2D to GUI isn't the most pleasant one.

[adam]

In this PG I created a heightPixel property on BABYLON.GUI.Control:

http://playground.babylonjs.com/#E2TSU0

[adam]

or you can just use TweenMax/TweenLite like this:

http://playground.babylonjs.com/#WB8QUM#1

(you won't have to do the s.onload part - that's just for the PG)

[lihis]

@adam Okay that's pretty neat.

Here's the same playground with "normal" babylon animation added:

http://playground.babylonjs.com/#E2TSU0#1

[GameMonetize]

See? It is ok actually

[lihis]

@Deltakosh Well, yeah, kind of i guess.

But if you look at this playground:

http://playground.babylonjs.com/#E2TSU0#2

I think the way i'm trying position the rect2 is entirely reasonable, but it doesn't work ( even though it did with Canvas2D ).

If you use the trick adam showed (demonstrated in rect3) then it works.

So it's fine, i can live with this, but i'm not sure it's as straightforward as it could be and i feel like there are going to be at least a few people who try to do what i'm trying to do in the rect2 example...

Edit: Well the blue rect3 worked when i posted this at least. Now that i closed and reopened the tab the blue rectangle is in the same place as the green one. Don't know what happened there. Just a few minutes ago it worked.

Edit2: http://playground.babylonjs.com/#E2TSU0#3

[GameMonetize]

I know there is always room for improvement

@adam: Relly like the idea of your XXXXinPixel. Do you want to PR something about that?

[GameMonetize]

Actually I did it

http://playground.babylonjs.com/#E2TSU0#6

 

[adam]

Sorry, I've been busy and I wasn't sure how you would deal with making the Pixel props accurate if they were not initially set using pixels.

[GameMonetize]

No problem we are a team