How to draw UI Elements with HTML inside the Canvas?

🌵 Needle Engine
1

Hey guys. I’ve created an entire UI in HTML and TailwindCSS working properly on my desktop and mobile (the UI is responsive). But there’s an issue while trying to insert it inside Needle Engine, because it keeps drawing the entire Canvas on top of my UI. How can I manage to draw it on top of the current canvas or below it, because I need my users to interact with it?

Screens captured for comparison between my UI and how does it renders on Needle.

Screenshot_2023-03-24_at_18.00.16.png
Screenshot_2023-03-24_at_18.00.16.png3456×2166 208 KB

Screenshot_2023-03-24_at_18.11.32.png
Screenshot_2023-03-24_at_18.11.32.png3456×2234 436 KB

Original Post on Discord

by user 185426914486386688

2

Just to clarify: you’d like it to look like the picture on the left, except with the 3D environment behind it?

by user 361212563452723200

3

Yes, exactly

by user 185426914486386688

4

Exactly to be like the picture on the left, but with the 3D Environment behind it

by user 185426914486386688

5

I did it entirely with Typescript and TailwindCSS, since I was informed it’d work within needle

by user 185426914486386688

6

Can you post the resulting HTML file?

by user 361212563452723200

7

Wait, is this separate from the environment? Is it rendering this as a UI layer from Unity?

by user 361212563452723200

8

yes

by user 185426914486386688

9

I can post it, no problem

by user 185426914486386688

10

I actually did a UI in pure HTML, but there’s a layer of the canvas inside that renders UI from Unity, which I think I’ll need to erase after

by user 185426914486386688

11

I’d be happy to take a look if you can post it and your CSS. Can you deploy to Glitch?

by user 361212563452723200

12

Sure, I can do it. Gimme some minutes

by user 185426914486386688

13

I’ll have to talk with my team related to show you the files for the project, if there’s no problem. I can return to you after some time, is that ok?

by user 185426914486386688

14

Absolutely, but I may be of limited help. And to be clear: I’m just a user, like you! But I have to ask: would it make more sense to implement this UI component directly as HTML/CSS in the resulting page?

by user 361212563452723200

15

Yes, that’s what I was trying to do. one moment

by user 185426914486386688

16

Hello @Bruno Dias I’ve been following along but not quite sure what’s happening there or why/how the canvas rendering should / could affect the display of the rest of your CSS UI (I dont want to dismiss some styles leaking yet - or maybe a css style in the style.css affects the TailwindCSS stuff - but would need to check that in chrome).
Happy to take a look if you have a link or (if that’s not enough to find the problem) a repo to share

17

Hi, @marcel :cactus: , sorry for taking so long. I’ll show you my code in a minute!

by user 185426914486386688

18

Here’s my current CSS code. You guys still need me to push the project to Glitch, right?
style.css

by user 185426914486386688

19

Yes i need a live version at least :slightly_smiling_face:

20

all right, one moment

by user 185426914486386688