How-To: Display Model Tree, Toolbar and View in HTML

HOOPS Publish
, ,
1

If you need to display the model tree, toolbar and view like 3D PDF in the exported HTML, you need to set the value of A3DRWHtmlOfflineData::m_uiOptionFlags.

With the help of default sample ExportPDFToHtml,

Model Tree

image-20210607-082729 (1)
image-20210607-082729 (1)2069×790 145 KB

Toolbar

image-20210607-082724
image-20210607-0827242066×790 116 KB

View

image-20210607-082713
image-20210607-0827132183×698 91.2 KB

2

i want my model tree to be made directly with the XML structure and not include the scz file. How can I do this - const initViewer = async (xmlDoc: Document, filePathXML: string) => {
if (hwvRef.current) {
disablePreviousOverlays(hwvRef.current);
}

await loadHoopsScript();
const hwv = new Communicator.WebViewer({
  containerId: "viewer",
  endpointUri: process.env.NEXT_PUBLIC_ENV_FB_WEB_SOCKET_URL,
  model: "_empty",
});

const callbacks = {
  assemblyTreeReady: async () => {
    const rootNode = hwv.model.getAbsoluteRootNode();
    const products = Array.from(xmlDoc.getElementsByTagName("ProductOccurence"));

    const xmlIdMap = new Map<string, Element>();
    products.forEach((p) => {
      const id = p.getAttribute("Id");
      if (id) xmlIdMap.set(id, p);
    });

    const buildTree = async (product: Element, parentNode: number) => {
      const id = product.getAttribute("Id");
      const name = product.getAttribute("Name") ?? "Unknown";
      if (!id) return;

      const nodeId = (hwv.model as any).createNode(parentNode, name);
      idToNodeIdMap.current.set(id, nodeId);

      const positions = Array.from(product.getElementsByTagName("Position")).map(pos => ({
        x: Number(pos.getAttribute("X")),
        y: Number(pos.getAttribute("Y")),
        z: Number(pos.getAttribute("Z")),
      }));

      setPositionValues(positions);

      const externalModelTag = product.getElementsByTagName("ExternalModel")[0];
      const sczFileName = externalModelTag?.getAttribute("Name");

      if (sczFileName) {
        const path = await fetchSczFiles(filePathXML, sczFileName);
        if (path) {
          hwv.model.loadSubtreeFromModel(parentNode, path);
        }
      }

      const childrenIds = product.getAttribute("Children")?.split(",") || [];

      for (const childId of childrenIds) {
        const child = xmlIdMap.get(childId);
        if (child) {
          await buildTree(child, nodeId);
        }
      }
    };

    const rootProducts = products.filter(p => {
      const id = p.getAttribute("Id");
      return id && ![...xmlIdMap.values()].some(child =>
        child.getAttribute("Children")?.split(" ").includes(id)
      );
    });

    for (const product of rootProducts) {
      await buildTree(product, rootNode);
    }

    console.log("XML ID to HOOPS Node ID Mapping:");
    idToNodeIdMap.current.forEach((hoopsId, xmlId) => {
      console.log(`XML ID: ${xmlId} => HOOPS Node ID: ${hoopsId}`);
    });


    const structure = await getModelStructure(
      hwv,
      rootNode,
      idToNodeIdMap.current,
      positionValues ?? []
    );
    setModelStructure(structure);
  },

  modelStructureReady: async () => {
    setHwvInstance(hwv);
    onSetHwv(hwv);
    setupNavCube(hwv);
    setupCamera(hwv);
    setLoading(false);
  },

  selectionArray: (selectionItems: any[]) => {
    const nodeId = selectionItems[0]?.getNodeId?.() ?? selectionItems[0]?.nodeId;
    if (nodeId !== undefined) setActiveNodeId(nodeId);
  },
};

hwv.setCallbacks(callbacks);
await hwv.start();
hwvRef.current = hwv;
setupViewerComponents(hwv);

};

3

Hello @nivedita.srivastava,

Can you please elaborate on how to you want the structure of the model tree? You mention that you want it to be the same as the XML file but how does that look like? Depending on the SCZ that you may or may not load, that can potentially add another “subtree” to the larger model/assembly tree.

Thanks,
Tino