UI in Vred

[rikkarlo]

Hello everyone, 

what's the best and easiest way to build a UI in vred, without any knowledge in HTML?

It would be nice if Vred had a feature similar to the Unreal Engine widget, to design the UI inside VRed and assign touch sensors to the buttons.

At the moment I'm creating the UI by parenting transparent planes to the camera at a very close distance and applying decals to them, the planes are then transformed into touch sensors and assigned to a specific variant set or action. This procedure works, but it does not update with the resolution of the screen, so if I visualize the scene on a screen with a different aspect ratio some buttons might exit the visible area, and sometimes the planes intersect with the geometry of the scene since they are actual geometries.

Is there any better way to do it, or are you planning to add an improved feature for the UI design in Vred in the future?

[seiferp]

I don´t think for your little use case you need a full blown UI Editor or need to be web designer. What do you need? A few div buttons with an image text or icon that trigger variant sets probably. HTML will provide you everything you can imagine and is probably the most flexible way in terms of styling and fancy animations. 

There are a couple of Editors such as Google Web Designer (free) or Bootstrap Studio or Adobe Dreamweaver.

Since you don´t have to deal with User Logins and databases in the backend it´s more rather about lay outing than programming but those editors are a good starting point.

There are also a couple of examples in the VRED Asset Manager and example folder you can check how the connection to the Variant Sets or Python API is made.

[rikkarlo]

Hi, thanks for the fast response, 

I'm an educator for product designers so the use cases can vary very much year by year and the students are not experts in either Vred, scripting or UI design in HTML. What we need is usually just buttons (touch sensors) texts and images as you said (maybe animated a little bit), which resize based on the resolution of the screen (so maybe it would be useful to be able to anchor a button 10 by 10 pixel from the top left corner or bottom right corner and so on) so it is a rather simple setup, I must say that most of these features are already doable by just parenting transparent planes to the camera as I said in my previous message, except the anchor to the corner of the screen feature.

Anyway, These HTML web editors that you suggested look already very good options, however, if there were a much simpler UI editor into Vred that would require no scripting would be very appreciated and even if it would be less versatile it maybe would cover most cases. 

Is there any video tutorial or official Vred documentation explaining how to make touch sensors starting from HTML code??