"Dynamic" HTML Interface

g_juifKYXZC · ‎09-19-2024

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

andreasK3K4G · ‎09-23-2024

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()
);

seiferp · ‎09-23-2024

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

g_juifKYXZC · ‎09-24-2024

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 :

document.addEventListener("UpdateInterface", function(event) {
    const allAvailable = event.detail;
    const specificUl = document.getElementById(allAvailable[0]);
    const allListItems = specificUl.querySelectorAll('li');
    // Loop through each <li> element
    allListItems.forEach(function(listItem) {
        // Assuming the text content or some data attribute inside <li> is being compared to allAvailable
        const listItemContent = listItem.textContent.trim();
        listItem.style.display = 'list-item';
        // Hide the <li> if its content is not in the allAvailable list
        if (!allAvailable.includes(listItemContent)) {
            listItem.style.display = 'none';
        }
    });
});

Community

&quot;Dynamic&quot; HTML Interface