GUI Custom Controls

Questions
#1

Hi. I can’t find anything in the docs about creating custom controls in the GUI, is this possible? Can I inherit from Control and if so what are the appropriate hooks for drawing the control etc?

My use case is that I have a third party library that is generating a canvas (enclosed in a few other divs) which I want to embed in the GUI (in the ADT I have a grid control and the contents of the canvas need to go into one of the grid cells). Using an Image control I can inject the content into the domImage but then I don’t know what to do with it. That’s why I thought a custom control might be the go but cant see anything for it.

Related to this is that I can go a getContext() on the ADT to get the canvas context for the ADT to draw on it directly but I don’t see anything like that exposed on the controls, ie a getContext or getRect or something to return the portion of the ADT that the control will draw on. Is that possible or too hard/dependent on other layout concerns?

#2

Ok, I managed to achieve what I wanted by using a Rectangle and the metadata property. The third party library sets the metadata property to its generated content which contains its canvas. then I can do…

        var pos = new BABYLON.Vector2(2,0);
        var ctx = target.host.getContext();
        var adtSize = target.host.getBaseSize();
        target.onAfterDrawObservable.add( (c,s) => {
            if (target.metadata) {
                let dx = pos.y*(adtSize.width/3.0);
                let dy = pos.x*(adtSize.height/3.0);
                ctx.drawImage(target.metadata.canvas_view.canvas_el, 0,0,300,300, dx, dy, 300, 300);
            }
        })

where target is a GUI.Rectangle added at position {row: 2, column: 0} to a 3x3 grid in the ADT. Works ok but now I just need to remove the hardwired size assumptions and/or a better way to get the top-left coordinates of the rectangle on the ADT.

Note, I could have set the metadata directly to the canvas from the other library but there are other things included that I might want access to so I am getting its whole hierarchy for now.

#3

Have you tried to use target.leftInPixels / target.topInPixels?

1 Like
#4

leftInPixels and topInPixels return the local coordinates of target in its parent, in my case both zero.

There is a getLocalCoordinates method that takes global coordinates (usually from a mouse click) and converts into a controls local coordinates but there doesn’t seem to be a way (that I can find) that takes a controls local coordinates to return the coordinates on the ADT.

#5

Ok, it was simple. I did a dive into the code and worked out I could just do this (inside the onAfterDrawObservable otherwise it wont work as _currentMeasure will not have been set)

dx = target._currentMeasure.left;
dy = target._currentMeasure.top;