topic Re: "Dynamic" HTML Interface in VRED Forum

"Dynamic" HTML Interface

g_juifKYXZC — Thu, 19 Sep 2024 11:01:14 GMT

Hi,

I'm working on a project with a lot of data in it (3D and Excel)

I manage to extract and convert all the Excel information as metadata witch is in my opinion the best way to reuse or update them on the fly.

I create basic functions that look inside my metadata to extract possibilities like :

Country gives access to specific version:

Version gives access to UI depending on selected country

UI gives access to function depending on country and version

For a POC I display the resulted lists in multiple front plate and it works great, but the text is not clickable to launch a variant set.

Now I need to set a HTML interface and past these list as button.

I tried to use the interface creation that Simon Nigel create, but the problem is that the interface will be recreate every time a variable change.

So I create a static interface with all my possibilities, but I'm not able to send my list in it to show or hide button.

Is there a way to send info from VRED to a web interface in a Frontplate to show hide <li>tag in my HTML interface ?

I will probably need a java script function for that but the main problem for now is to get the information from VRED.

Here is my HTML file :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> </style> </head> <body> <div class="intLeft"> <div class="col Titre"> <h1>MY<br>CONFIGURATOR</h1> </div> <div class="col Configurator"> <div class="container"> <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown">COUNTRIES<i class="icon-arrow"></i></a> <ul class="dropdown-menu" id="Countries"> <li><button class="button country" value="Country1" onclick="playVSetSimple(this.value)">Country1</button></li> <li><button class="button country" value="Country2" onclick="playVSetSimple(this.value)">Country2</button></li> <li><button class="button country" value="Country3" onclick="playVSetSimple(this.value)">Country3</button></li> <li><button class="button country" value="Country4" onclick="playVSetSimple(this.value)">Country4</button></li> <li><button class="button country" value="Country5" onclick="playVSetSimple(this.value)">Country5</button></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">VERSIONS<i class="icon-arrow"></i></a> <ul class="dropdown-menu" id="Tranches"> <li><button class="button tranche" value="V1" onclick="playVSetSimple(this.value)">V1</button></li> <li><button class="button tranche" value="V2" onclick="playVSetSimple(this.value)">V2</button></li> <li><button class="button tranche" value="V3" onclick="playVSetSimple(this.value)">V3</button></li> <li><button class="button tranche" value="V4" onclick="playVSetSimple(this.value)">V4</button></li> <li><button class="button tranche" value="V5" onclick="playVSetSimple(this.value)">V5</button></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">UI<i class="icon-arrow"></i></a> <ul class="dropdown-menu" id="Softwares"> <li><button class="button software" value="UI1" onclick="playVSetSimple(this.value)">UI1</button></li> <li><button class="button software" value="UI2" onclick="playVSetSimple(this.value)">UI2</button></li> <li><button class="button software" value="UI3" onclick="playVSetSimple(this.value)">UI3</button></li> <li><button class="button software" value="UI4" onclick="playVSetSimple(this.value)">UI4</button></li> <li><button class="button software" value="UI5" onclick="playVSetSimple(this.value)">UI5</button></li> <li><button class="button software" value="UI6" onclick="playVSetSimple(this.value)">UI6</button></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">FUNCTIONS<i class="icon-arrow"></i></a> <ul class="dropdown-menu" id="Capabilities"> <li><button class="button capability" value="F1" onclick="playVSetSimple(this.value)">F1</button></li> <li><button class="button capability" value="F2" onclick="playVSetSimple(this.value)">F2</button></li> <li><button class="button capability" value="F3" onclick="playVSetSimple(this.value)">F3</button></li> <li><button class="button capability" value="F4" onclick="playVSetSimple(this.value)">F4</button></li> <li><button class="button capability" value="F5" onclick="playVSetSimple(this.value)">F5</button></li> <li><button class="button capability" value="F6" onclick="playVSetSimple(this.value)">F6</button></li> <li><button class="button capability" value="F7" onclick="playVSetSimple(this.value)">F7</button></li> <li><button class="button capability" value="F8" onclick="playVSetSimple(this.value)">F8</button></li> <li><button class="button capability" value="F9" onclick="playVSetSimple(this.value)">F9</button></li> <li><button class="button capability" value="F10" onclick="playVSetSimple(this.value)">F10</button></li> </ul> </li> </ul> </div> </div> </div> <script> function playVSetSimple(vset){ var vsetString = `selectVariantSet("${vset}")`; vred.executePython(vsetString); }; </script> </body> </html>

Thanks for any solution or hint

Guillaume

Re: "Dynamic" HTML Interface

andreasK3K4G — Mon, 23 Sep 2024 12:45:13 GMT

Hi,

dont know that Interface from Simon you mentioned, but i would suggest to create the HTML dynamicly, like your topic name. To build a static html and show hide buttons is not a good way todo it.

Here is my approach:

def set_content(metadata): content= '<!DOCTYPE html><html><head><title>List</title>' content = content + '<script type="text/javascript">function playVSetSimple(vset){vred.executePython(selectVariantSet("${vset}")); }</script>' content = content + '</head><body>' content = content + '<div class="intLeft"><div class="col Titre"><h1>MY<br>CONFIGURATOR</h1></div><div class="col Configurator"><div class="container"><ul><li class="dropdown"><a href="#" data-toggle="dropdown">COUNTRIES<i class="icon-arrow"></i></a><ul class="dropdown-menu" id="Countries">' for key, value in metadata.items(): print(key) print(value) if key == "Country": for country, data in value.items(): content = content + '<li><button class="button country" value="' + str(country) + '" onclick="playVSetSimple('+ str(data) +');">'+ str(country) +'</button></li>' content = content + '</ul></div></div>' content = content + '</body></html>' return(content) ## example metadata metadata = {"Country": {"Germany": "vset_germany", "France": "vset_france", "Spain": "vset_spain"}} my_content = set_content(metadata) ###### setup the frontplate theRoot = vrSceneplateService.getRootNode() # Create text front plates attached to windows sides theNode = vrSceneplateService.createNode(theRoot, vrSceneplateTypes.Frontplate, "Plate") # Cast it to a scene plate object thePlate = vrdSceneplateNode(theNode) # Set scene plate type thePlate.setContentType(vrSceneplateTypes.Web) thePlate.setSize(1) # Set some properties from scene plate thePlate.setUrl(my_content) #######

From the metadata create a dictonary with all your information. My Example just with the Countries. Line 25.

"def set_content"

will create the html with all information from your meta data.

From line 9 to 16, we will just add a button when there is a country in the metadata, and we provide the information stored in the metadata.

This String you can add to the Frontplate "thePlate.setUrl(my_content)".

Anyway, if you need to get a return value, from the vred documentation it says:

// example how to call a Python command with a return value
vred.executePythonCommand("getFov()", function(value)
  { alert(value); } // do something with the value returned by getFov()
);

Re: "Dynamic" HTML Interface

seiferp — Tue, 24 Sep 2024 05:35:34 GMT

@andreasK3K4G here is the link to the script mentioned to create a dynamic html from the scene content https://github.com/simonnagel/VRED-autoGenerateHTMLOverlay

Re: "Dynamic" HTML Interface

g_juifKYXZC — Tue, 24 Sep 2024 13:59:08 GMT

Hello Andreas,

Thanks for your reply.

You solution doesn't solve my problem because I cannot recreate the interface every time it have to be update.

As the CSS of my webpage display of hide list of <li> items in each dropdown menu, I will not be able to keep consistency on menu that are visible or not.

But you script help me a lot on the HTML creation.

As menu are based on my metadata, I can use your script to dynamically create the HTML interface on Scene opening or every time I add new metadata.

On my side, I found a way to send my python list from my Variant set to my interface and display/hide elements in my lists according to it.

in my Vset I have :

mylist = ("element1","element2","element3"] #add the ID to update as first element mylist .insert(0,"IDToUpdate") mylist_json = json.dumps(mylist) we = vrWebEngineService.getWebEngine("Interface") we.sendEvent("UpdateInterface", mylist_json )

and in my java script I have :