User Interface Using External Tools

Help & Support
1

Hi, I want to be able to put some web style interface elements (interactive table, dropdown menus, hamburger style menus etc) into my app (ideally that can be data driven) but I don’t want to program them from the ground up. Ideally I would build them in an external visual tool and have the code generated for me :slight_smile: After all theres no point re-inventing the wheel right?.

Once I have the code for the element, in theory, how do I add these kind of html elements/templates to a Playcanvas Project? Do I just paste it as a script to an empty element? Any examples of this?

Thanks

2

Hi @Grimmy,

That’s good thinking, check the HTML examples on how to add them on top of your PlayCanvas app and how to communicate:

https://developer.playcanvas.com/en/tutorials/?tags=html

Also take a look at the PCUI library for ready made PlayCanvas HTML components

3

Thanks!!
I did a quick test with the tutorial example in my project. It works, but but when my code makes the app go fullscreen the html element vanishes. If I then manually minimize and maximize using F11 the html re-appears. Is this expected behaviour? Do I need to do something else to keep the html elements on top during full screen?

I also noticed that the html element also remains even after I destroy the entity containing the css/HTML when I switch scenes. Why is this?

4

Regarding removing the element when scenes change its not enough to remove the enity. You need to use this to get rid of the DOM element.

 //fire this when the entity gets destroyed
    this.on("destroy", function () {
        document.head.removeChild(style);
    });

However, I still don’t know how to make it appear when full screen.

5

The fullscreen APIs will fullscreen the DOM element and it’s children that it’s being called on. You should be able to do it on the document body (eg document.body.requestFullscreen()) and that would include all DOM elements that have been added to the body.

6

Using document.body.requestFullscreen() my DOM seems to completly clear my Playcanvas canvas with dark grey and then put the dom element on top. If I manually use F11 to switch it works fine…See images

rrr
rrr1259×421 58.1 KB

I only have css for the red container and its contents. Do I need some CSS (that sets the alpha color of the background) for the document or something too?

7

I’ve just tried this in the console with https://launch.playcanvas.com/481136?debug=true and it works fine there.

You will have to debug with the webtools to work what is causing the issue. Maybe it’s one of the elements that have been added or something else.

8

Thanks, but in that example the window is not full screen (called by code). Same on my project, if I dont go full screen everything works fine.

9

Just tried this using code from https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API and https://www.w3schools.com/howto/howto_js_fullscreen.asp

https://playcanvas.com/editor/scene/1159662

Seems to work with the HTML DOM intact (click on the button to go full screen/exit full screen)

10

Sure does, it looks like the problem is because I was using it in conjunction with this.app.graphicsDevice.fullscreen = true;

I just got rid of that and from now on just resize using the DOM I guess.