GUI glitch while adding multiple rectangles

[foumfo]

http://www.babylonjs-playground.com/#L1SBDY

As you can see above,  my GUI's output is all wrong. What could possibly be the issue here?

[aWeirdo]

Hi @foumfo

Your measurements are off.
width & height uses percentage as default, 
left & top uses pixels as default
http://doc.babylonjs.com/how_to/gui#position-and-size

Using pixels (final size depends of number of rects);
http://www.babylonjs-playground.com/#L1SBDY#2 

Using percentage (final size is fixed and independent of number of rects)
http://www.babylonjs-playground.com/#L1SBDY#3

[foumfo]

4 hours ago, aWeirdo said:

Hi @foumfo

Your measurements are off.
width & height uses percentage as default, 
left & top uses pixels as default
http://doc.babylonjs.com/how_to/gui#position-and-size

Using pixels (final size depends of number of rects);
http://www.babylonjs-playground.com/#L1SBDY#2 

Using percentage (final size is fixed and independent of number of rects)
http://www.babylonjs-playground.com/#L1SBDY#3

I want the width and height of the rects to be the same and I also wanted to use percentages in order to have rects proportionate to the window's size.

To clarify, I want to create a minimap for my level.

I used your last method, and it's a bit off for me. There's gaps between the rects that look like rows and columns

[foumfo]

http://www.babylonjs-playground.com/#L1SBDY#4

I've done it, I found my own solution using a parent StackPanel and several children StackPanels.

I used a universal size factor for heigth and width:

var sizeFactor = Math.round((window.innerHeight * window.innerWidth) / 200000) + 'px';

 

[foumfo]

Could it be possible to avoid using pixels? I've noticed that when I resize the window, while the canvas is getting resized too, the gui stays the same

[Guest]

all measures can be expressed with percentage as well

[foumfo]

10 hours ago, Deltakosh said:

all measures can be expressed with percentage as well

I know, I've tried that along with using idealWidth for the gui and a fixed 1px size for the blocks.

I still get the effect of gaps between rows and columns:

http://www.babylonjs-playground.com/#L1SBDY#6

[Pryme8]

http://www.babylonjs-playground.com/#L1SBDY#7

<3

[foumfo]

43 minutes ago, Pryme8 said:

http://www.babylonjs-playground.com/#L1SBDY#7

<3

That does work and thank you for that, but I noticed that the bottom row is a bit shorter than the rest

[Pryme8]

Why not make a dynamic texture and use that instead of a ton of GUI elements?

[foumfo]

16 minutes ago, Pryme8 said:

Why not make a dynamic texture and use that instead of a ton of GUI elements?

You mean using my double array to create a dynamic texture? Are dynamic textures GPU accelerated?

This double array of mine is generated by my random labyrinth generator algorithm, so what I'm trying to do here is create a minimap

[Pryme8]

yup, create a dynamic texture which if you do it with array setting and not draw Rectangle methods it will be very fast (I bet faster then building the UI elements).

Then once it is assigned to the ram its load/impact will be minimal. At that point just set that dynamic texture as the image for a gui rect and whabam.

[foumfo]

10 minutes ago, Pryme8 said:

yup, create a dynamic texture which if you do it with array setting and not draw Rectangle methods it will be very fast (I bet faster then building the UI elements).

Then once it is assigned to the ram its load/impact will be minimal. At that point just set that dynamic texture as the image for a gui rect and whabam.

Ok I'll give it a shot

[foumfo]

13 hours ago, Pryme8 said:

yup, create a dynamic texture which if you do it with array setting and not draw Rectangle methods it will be very fast (I bet faster then building the UI elements).

Then once it is assigned to the ram its load/impact will be minimal. At that point just set that dynamic texture as the image for a gui rect and whabam.

I read here: https://doc.babylonjs.com/how_to/gui

that the GUI module is based on dynamic texture and also is GPU accelerated.

So isn't using a dynamic texture in my case a bit redundant?

[Pryme8]

no... doing what you are doing is redundant and is creative but not the way to go about it.

[foumfo]

1 minute ago, Pryme8 said:

no... doing what you are doing is redundant and is creative but not the way to go about it.

Ok then I'll use a dynamic texture. Is there a way to convert my double array into a dynamic texture?

[Pryme8]

just parse through it, Ill make an example here when I get a chance ^_^.

[foumfo]

41 minutes ago, Pryme8 said:

just parse through it, Ill make an example here when I get a chance ^_^.

Thank you, I'll wait for it because I don't know how to do that when it comes to dynamic textures

[Pryme8]

http://www.babylonjs-playground.com/#PJQHIH#2

There are some included comments to help.

[foumfo]

15 minutes ago, Pryme8 said:

http://www.babylonjs-playground.com/#PJQHIH#2

There are some included comments to help.

Are you saying that this little line:

var iDat = ctx.getImageData(0,0,w*cellSize, h*cellSize);

does exactly what I wanted? because that would be amazing!

[Pryme8]

no that was if I used an alt method, I went ahead and did the drawRect method just because its easier to understand.

If you would like I can do the imageData Manipulation method as well (is faster but is harder to understand)

 

for(var y=0; y<h; y++){
            for(var x=0; x<w; x++){
                var cell = data[x][y];
                var pos = {x:x*cellSize, y:y*cellSize};
                console.log(cell);
                if(cell){
                    ctx.fillStyle = 'black';
                }else{
                    ctx.fillStyle = 'white';
                }

                ctx.fillRect(pos.x, pos.y, cellSize, cellSize);    

            }  
        }

is whats doing all the work.

[foumfo]

3 minutes ago, Pryme8 said:

no that was if I used an alt method, I went ahead and did the drawRect method just because its easier to understand.

If you would like I can do the imageData Manipulation method as well (is faster but is harder to understand)

I'm already very grateful to you, so if you have the time now or in the future I would appreciate you showing me that method as well. Especially if that way is even more efficient

[Pryme8]

technically this should work:
 

 var iDat = ctx.getImageData(0,0,w*cellSize, h*cellSize);
        var _data = iDat.data;
        var x=0,y=0;
        for(var i=0; i<_data.length; i+=4){
            var cell = data[Math.floor(x)][Math.floor(y)];
            console.log(cell);
            if(cell){
                    _data[i] = 0;
                    _data[i+1] = 0;
                    _data[i+2] = 0;
                    _data[i+3] = 1;
                }else{
                    _data[i] = 1;
                    _data[i+1] = 1;
                    _data[i+2] = 1;
                    _data[i+3] = 1;
                }
            x+=1/cellSize;
            if(x>=w){x=0;y+=1/cellSize;}
        }
        ctx.putImageData(iDat, 0,0);

but its not... which is kinda confusing.  I wonder if the putImageData Method is not working correctly or something.
http://www.babylonjs-playground.com/#PJQHIH#4

Just use the fillRect method for now, performance wise you should be fine, the other method is for if you start making maps that are like 4k wide and stuff.

[foumfo]

Ok then I'll use the fillRect method, thank you anyway for your work on this.

Since I want to use the texture for my GUI, could I just implement it in it somehow rather than use it as a face texture for a plane?

[Pryme8]

yes convert the texture to a uriBlob element then on your ui element pass the image url as "data:"+uriBlob

http://www.babylonjs-playground.com/#PJQHIH#6

No clue why the URI is coming back blank... sorry I dont have more time for this.