Hi,
is there anyway to communicate with REST endpoints from babylonjs - I essentially want to show a certain configuration of buttons in babylon depending on REST API url.
Hello and welcome,
not sure to completely follow you. babylonjs is a javascript framework that will run in your browser. So if the question is: can you call web API: yes no problem at all but I’m not sure to see the connection with Babylon
Hi,
Thanks for the response. I want to show buttons using babylon on my GUI depending on the REST API url. For example, when only 3 buttons will show for a certain user whilst 5 will show for another user. So, i’m trying to see how I can establish that connection & some sample code/examples would be appreciated.
Ok but this is not babylonjs related right? I mean how to call the rest API is using XHR and then you want to add or remove the buttons
Or is it that part that you want? Can you help me understand better what do you need?
Yes sorry for not being clear. I’m confused about how I can connect what is returned from the XHR request to babylonjs such that a certain number of buttons only show. So, I want to know how I can add or remove buttons depending on a variable?
ok 
each button has a isVisible property that will do the trick
Maybe you can repro your problem in a Playground
Ok thanks - I’m using this code:
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = xhttp.responseText;
document.write(response);
}
};
xhttp.open("GET", "url", true);
xhttp.send();
}
</script>
</body>
</html>
which returns a list of button names that i want to show & their associated links that will open once clicked on. I’m confused as to how I can link this with my babylon code?
If I may add a bit…
There are mainly 3 types of button available via BabylonJS:
GUI 2d - a well-powered and versatile full-screen and/or textured-onto-a-mesh GUI system… with many “controls” (widgets) available.
GUI3d - a medium-powered and versatile in-the-scene GUI using real “mesh”… and contoured for virtual reality systems and gear.
Custom GUI made from mesh - This is where YOU model the mesh buttons in any shapes you please, including importing the “widgets” from modeling software like Blender. Those type of buttons often use Actions/ActionManagers to “listen” for trigger events like pointer clicks.
All three of these GUI types… CAN be “controlled” (added/removed/modified) from/per the responseText of a document retrieved from a ReST end-point… gotten via XHR.
XHR = XmlHttpRequest object. 74 of our playground demos… have a reference to XHR objects, so many others have tried “offsite queries” from BabylonJS scenes. There are strict security rules for using queries to other sites… and you will need to follow them.
Also, let it be known… that the XHR object is NOT really part of BabylonJS framework. It is part of “vanilla javascript”… which CAN BE accessed from nearly anywhere in a BJS scene. So, all three of the main button-types available in BJS… CAN use XHR to make queries off-site. BJS framework has access to almost all parts of “vanilla JS”.
That’s what Deltakosh was attempting to clarify with you. What part of your project… will be using actual BJS framework, and what part is using vanilla JS. Generally, we only help-with/teach BJS framework here… and not querying RST endpoints with XHR objects.
Ok, you have a good query to an endpoint, and it is returning a document. Good to see you are there. Now you need to visit GUI 2d docs… likely activate a full-screen AdvancedDynamicTexture (an ADT)… and then… the fun begins.
Here is a single simple button demo from the GUI 2d docs. Now go back to the gui2d docs “general-properties” section.
In the #121 playground… we see these lines…
button.onPointerDownObservable.add(function() {
textblock.text = "Down!";
});
button.onPointerUpObservable.add(function() {
textblock.text = "Up!";
});
button.onPointerEnterObservable.add(function() {
textblock.text = "Enter!";
});
button.onPointerOutObservable.add(function() {
textblock.text = "Out!";
});
button.onPointerMoveObservable.add(function(coordinates) {
var relative = button.getLocalCoordinates(coordinates);
Event listeners… for the button… same things seen in the “events” section of the docs.
Now, what YOU need to do. Think-up/build a system… where you analyze the document returned from the end-point… and add GUI buttons (like that simple button in the #121 demo)… based upon what you find in the queried document that was returned by XHR.
Before all that, you might wish to make a fullscreen ADT (advancedDynamicTexture - the invisible screen-sized panel that holds all BJS gui2d). Then perhaps make a stack panel… an empty container that goes onto the adt. THEN… for each name in button names… create a simple button, give it a label and name (not always same string) and then add one button to the stack panel… for each name in the list of names.
A little hint. For now… make a FAKE/simulated response-document (pretend you queried it from end-point but you didn’t)… and from that… create a stackpanel full of buttons with onPointerDownObservable event-watcher for each button.
You need to learn to drive BJS gui2d reasonable well, first. This will take some time and practice and stealing of other people’s GUI2d code. Use a fake XHR-return for now… and learn to grow GUI2d button panels from that fake doc. Later, you can go get real endpoint docs and grow the gui2d stackpanel-o-buttons from that.
Let’s use playground searcher. In the right field of 3, enter stackpanel. 841 results for playgrounds that use the term stackpanel in their code. Lots of examples to borrow/learn-from.
https://www.babylonjs-playground.com/#11NJQT#23 There is an interesting isVertical stackpanel-o-buttons. Stackpanels are cool… because they can automatically expand/shrink to fit a few buttons, or MANY buttons. Stackpanels are somewhat “smart containers”. Container-class controls/widgets are a different kind of control than non-containers. Stackpanel containers can be vertical or horizontal… and when put inside a rectangle container… can have borders (like the #23 playground up there).
So, now, after Wingnut yapping for days… I think you may be able to see your future a bit better. It won’t be magically easy for you. Deltakosh is handling a million things for the entire framework, and the questions you ask about your project/desires… require BIG answers like this one.
By using fake XHR responses (for now)… you can concentrate on learning BJS GUI 2d and control/widget layout techniques. If you have some experience with HTML forms and the widgets used for those, then SOME BJS GUI2d will seem familiar to you.
Study the #23 playground and it’s fancy stackpanel. Try different configurations of it. See all the properties and events that a GUI2d button CAN have/use.
I hope I have been helpful. Good luck. Break your project into little pieces… and work on small sections… to avoid being overwhelmed. Learn where the border-line is… between vanilla/general JS… and BabylonJS webGL framework. Search the web for answers to JS issues, and try to only ask about BabylonJS issues… in this forum. In your project… there is a DEFINITE border line between general/vanilla JS, and BabylonJS framework. Good luck.
4 Likes
Hi @Wingnut & @Deltakosh,
Thank you so much for the help - I will definitely look into it more.
I’ve made this & am just trying to work on the integration with REST endpoints such that only buttons returned from my request will show, with appropriate window.open urls & text etc.
https://www.babylonjs-playground.com/#HB4C01#304
1 Like
Hey, that’s a pretty good start with GUI3d! Nice work. You are on your way to success!
I think I did too much beginner-talk in my long post. Sorry. You are already advanced.
2 Likes
Hi, haha no worries - I’m definitely not advanced. just finding my way through the documentation. hopefully I can get this integration sorted.
Hey,
I’ve got the GET queries working now but I am trying to create a login page/front page with 3 buttons where each buttons will show you a different number of buttons. Can’t seem to get it to work?
Well you need to either give us a repro or tell us what is not working
function iterateButtonName (button, button_name, x) {
for (var i = 0; i < x.subscriptions.length; i += 1) {
console.log(x.subscriptions[i].SubscriptionURL)
if (button_name == x.subscriptions[i].SubscriptionName){
button.backMaterial.albedoColor = BABYLON.Color3.Green();
return x.subscriptions[i].SubscriptionURL;
}
else{
button.backMaterial.albedoColor = BABYLON.Color3.Red();
}
}
}
This changes all the buttons to green instead of only the ones found in the JSON array
Can you make a Minimal, Reproducible Example please using the (amazing) playground? And then click the “save” icon and share it with us. Thank you.
When you do create this minimal example that contains only enough code to recreate your bug you may also figure out what the problem is by yourself 
If not though the example will let others help you a lot more easily.
2 Likes
I should pin your answer 
2 Likes