Shape Drawing or html export

Questions
, , ,
1

image
image788×394 2.73 KB

Hello,
I want to draw the shape in the picture. But in babylonjs, I can’t put both a dynamic image area and a label inside the rectangle. What do you think is the easiest way to do this? I managed to draw this picture with html, but I could not reflect the html inside the rectangle. My goal is to make a tooltip. I request your help.

2

Well, there are different ways to achieve this and they all have pros and cons.
I believe first thing is you would need to choose the type of GUI you want to use

If you are looking to use the (integrated) 2D GUI of BJS, start by reading a bit about it.
You will most likely want to make an imbrication of your elements starting with a StackPanel.
Although, you could also use an ImageButton or even a Rectangle for your outter shape.
I believe the StackPanel would be the better option.
In this stackPanel, you would add a textBlock hosting your text and an Image or ImageButton for your dynamic image.

Else, the other option is to choose from any of the other UI, such as html.
It really starts by choosing one first. Next, we can eventually help you with it if needed…

2 Likes
3

@mawa You are amazing. Thanks for your reply and advice. I will start my work on your recommendations and get back to you.

4

@mawa I produced an html output as I wanted. I put this in Canvas. I only have one problem now. The HTML tooltip cannot be fixed to a mesh. For this, I thought: I think that if I can create a stackpanel and put the html output in it, all my problems can be fixed. I request your help in this matter. I can’t throw html output into stackpanel.

5

No, I’m afraid you can’t. These are two different GUIs and approaches. (Sadly) currently the 2D and 3D GUI do not support (any) HTML input.
I’m not sure though what you mean when you say “fixed to a mesh”? Do you mean in a 3D environment? because you can still use your mesh pick to trigger your html panel (in 2D).

6

Hello @farukcelim just checking in if you still have questions and if is there anything we can help with

7

Thanks for your answers. I solved the problem. I solved the shape using html in javascript with Css.

           		var btn = document.getElementById(btnId);

    if (btn) {
        btn.parentNode.removeChild(btn);
    }

    btn = document.createElement("div");

    btn.id = btnId;
    btn.className = "label-component";


    var btnName = document.createElement("span");
    btnName.className = "label-name";
    btnName.textContent = name;

    var btnTitle = document.createElement("span");
    btnTitle.className = "label-title";
    btnTitle.textContent = title;

    var btnImage = document.createElement("div");
    btnImage.className = "label-img";
    btnImage.style.backgroundImage = "url('" + img + "')";

    btn.appendChild("text");
    document.body.appendChild(btn);
2 Likes
8

Well, that’s sure one way to do it… but then @carolhmj and the 2D GUI team, I’m still looking forward to a way for better management of shapes in the BJS GUI 2D controls. I believe there was already this PR for the elipse (rounded button) shape; Is it still pending and/or on the list? Thx and have a great WE :sunglasses:

9

I checked on Github and didn’t find an issue, would you like to create a Feature Request on the forum so we can discuss it? :thinking: