[SOLVED] Adding HTML an asset

Help & Support
1

So I’m relatively new to PlayCanvas and I want to add a button to my 2D screen.
The code for the button is in an html file called Major.html
It would be helpful if you could tell me how I can make the button appear on the 2D screen

Editor - https://playcanvas.com/editor/scene/896589
Code Editor - https://playcanvas.com/editor/code/674640?tabs=29543649,29544034,29544091

1 Like
2

Hi @Krish_USCan and welcome,

The 2D screen is for use with the Playcanvas UI system. If you would like to add HTML on top of your Playcanvas app, then take a look at the following manual page and tutorial sample:

https://developer.playcanvas.com/en/user-manual/assets/html/

https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

3

I just started with game development and I went through these links you sent me.
But I need a little more help understanding what these links are telling me to do

4

Hello @Krish_USCan,

For sure, starting in Game Development can be overwelming. We all have been there. Playcanvas forums are very active and very helpful. So, feel free to post any questions you may have.

Do you have any spesific questions regarding this topic?

6

Hi @Leonidas

Do you think you can help with the project if I add you to it.
Only to help me add the html code.
Thank you

7

Hi @Krish_USCan, add me to your project to take a look. My Playcanvas username: leonidas

8

I added you
Thank you for your help

2 Likes
9

From what I see your HTML and CSS are loading fine in your project. I’ve opened the guitar scene.

image
image.jpg598×522 33.5 KB

1 Like
10

The button loads. But my teammate and I do not know how to make the dropdown buttons perform actions

1 Like
11

Do some HTML/CSS/Javascript tutorials online to get some experience on, and you will be able to easily write any UI code.

From the moment you load your HTML, you don’t have to call or write any Playcanvas specific code.

12

@Leonidas
The code I used for the buttons does work. I know that because I ran the code on editors such as repl and atom and it does work. But my teammate and I have been working on this for a day now and we don’t know what we are doing wrong. If you guide us even more that would help.
Sorry for taking so much of you time but please do assist us.

13

Your query selector is wrong, you don’t have any class named .button:

Change line 35 to the following and it should work:

var button = this.div.querySelector('button');
15

You will have to leverage Javascript with CSS to show/hide the options, definitely some HTML/CSS skills will help you a lot here.

16

@leonidas

Thank you that definitely helped.
But is there a way where I can see the dropdowns from the button.
There is a dropdown-menu class but it doesn’t work on playcanvas

17

You will have to use Javascript/CSS to show hide the menu options (elements) when the button is clicked.

18

@Leonidas

The above is a repl.it code where the buttons works perfectly. I am using the same code in Major.html in PC however it doesn’t work

1 Like
19

That’s HTML, that will put the elements in the DOM, which from I see works. The buttons gets rendered above your Playcanvas scene.

But that won’t provide the dropdown functionality you are asking for. You need Javascript or at least some CSS to show/hide the dropdown options.

20

@Leonidas, I don’t think you’ve noticed the Bootstrap cdn in the HTML code above. No JS code or CSS code is required for the dropdown to work. Is there any other reason that could cause the error?

21

Yes, if you are adding the functionality from a library you can’t append the library inside the HTML.

You have to include it in your Playcanvas project either by uploading the bootstrap.js file as an asset or loading it manually in code:

You need to do that before attaching your HTML, so bootstrap is already available.

Also make sure to remove the <html>,<head>,<body> elements from your HTML file. Since you aren’t attaching an HTML document, only appending elements to the existing main HTML document (in short you can’t have many <html> elements in the same HTML document).

Just this:

<div class="container">
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">C</a>
      <a class="dropdown-item" href="#">C#</a>
      <a class="dropdown-item" href="#">D</a>
      <a class="dropdown-item" href="#">D#</a>
      <a class="dropdown-item" href="#">E</a>
      <a class="dropdown-item" href="#">F</a>
      <a class="dropdown-item" href="#">F#</a>
      <a class="dropdown-item" href="#">G</a>
      <a class="dropdown-item" href="#">G#</a>
      <a class="dropdown-item" href="#">A</a>
      <a class="dropdown-item" href="#">A#</a>
      <a class="dropdown-item" href="#">B</a>
      <a class="dropdown-item disabled" href="#">Disabled</a>
    </div>
  </div>
</div>
2 Likes
22

Thanks, will try and revert.