Linking to Application Data

---

Summary

In this chapter, we will walk through how to link our database application data to HOOPS Communicator.

Concepts

• Loading the application data
• Inserting models into the scene

---

Retrieve supplemental database information

Now that we have a running WebViewer and have successfully loaded a model into that viewer, we want to bring in the supplemental part data from our "database". By using identical naming between the model .SCS file and the .JSON database files, we can use the loaded model name to request the part specific database information. It makes sense to do this when we request the model. We can use the then() method of the returned promise from loadSubtreeFromScsFile to fetch our data, as shown below.

this._viewer.model.loadSubtreeFromScsFile(modelNodeId, "/data/" + modelName + ".scs")
  .then(() => {
    this._viewer.view.fitWorld()
    fetch("/data/database/" + modelName + ".json")
      .then((resp) => {
        if (resp.ok) {
          resp.json()
            .then((data) => {

            })
        }
        else {
          alert("No JSON data for this Model was found.")
        }
      })

Storing retrieved data

The data variable contains the NodeData JSON object we created earlier. In order to minimize the number of asynchronous requests to this database, we will store the data we need in a Map structure. The keys of the map will be the Node IDs and the values which contain the rest of the data object and its members. We will loop through the array of NodeData objects, and store each in the Map.

First let's define the Map as a member of our main class.

class main {
    constructor() {
        // Initialize a Map to quickly reference nodeId -> external app data
        // The Map will be populated when a model is loaded
        this._modelData = new Map()
        
        // Instantiate the viewer
        this._viewer = new Communicator.WebViewer({
            containerId: "viewer",
            empty: true
        })

Now, back within the loadModel function and the then() block of the parsed JSON response, we will clear (if populated already) and populate this Map. While we are looping through, we will also aggregate the price of all the parts, so we can display the total cost as well.

resp.json()
    .then((data) => {
        let nodeData = data.NodeData
        let numEntries = nodeData.length
        let clippedID
        let totalCost = 0
        this._modelData.clear()
        for (let i = 0 i < numEntries ++i) {
            clippedID = nodeData[i].ID
            this._modelData.set(clippedID, nodeData[i])
            totalCost += nodeData[i].Price
        }
    })
    
    // Display the total cost of the assembly
    document.getElementById("inv-total-cost").innerHTML = `$ ${totalCost.toFixed(2)}`

Filling application data

With the new _modelData map populated, we can use the selectionArray callback to query our additional part data when a selection is made. The selectionArray callback will return an array of node IDs when a selection operation is made by the user. Using these node IDs, which are identical to the node IDs in our _modelData object, we can retrieve the corresponding part data for the selection. Since the selectionArray callback can contain multiple entries, we will just display the first entry's information.

selectionArray: (selectionEvents) => {
    // Reset info fields if no selection item was chosen
    if (selectionEvents.length == 0) {
        document.getElementById("node-id").innerHTML = "--"
        document.getElementById("node-name").innerHTML = "--"
        document.getElementById("inv-manufacturer").innerHTML = "--"
        document.getElementById("inv-select-cost").innerHTML = "--"
        document.getElementById("inv-total-stock").innerHTML = "--"
        document.getElementById("inv-avail-stock").innerHTML = "--"
        document.getElementById("inv-claimed").innerHTML = "--"
        document.getElementById("inv-location").innerHTML = "--"
        return
    }
    
    // Otherwise, display node information for the first node in the selection array
    const nodeId = selectionEvents[0].getSelection().getNodeId()
    document.getElementById("node-id").innerHTML = nodeId.toString() || "Unknown"
    document.getElementById("node-name").innerHTML = this._viewer.model.getNodeName(nodeId) || "Node Name Not Defined"
    
    // If the selection nodeId is found in the application data, populate the inspector fields
    if (this._modelData.has(nodeId)) {
        let nodeData = this._modelData.get(nodeId)
        document.getElementById("inv-manufacturer").innerHTML = nodeData.Manufacturer
        document.getElementById("inv-select-cost").innerHTML = `$ ${nodeData.Price.toFixed(2)}`
        document.getElementById("inv-total-stock").innerHTML = nodeData.Stock.toString()
        document.getElementById("inv-avail-stock").innerHTML = (nodeData.Stock - nodeData.Reserved).toString()
        document.getElementById("inv-claimed").innerHTML = nodeData.Reserved.toString()
        document.getElementById("inv-location").innerHTML = nodeData.Location
    }
}

If we reload our application, load the "microengine" or "Moto" model, and select a part on the model, we will see the inspector fields populate. Selecting other parts (or no part at all), updates this information based on the selection. We have successfully brought in external application data and showed an example of linking this data with node IDs.

Section 7: Creating the Display Filter

top_level:1 tutorials:2