bimU.io Viewer API Demo

Calculate area of selected floors

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bimu.io.viewer@latest/dist/bimU.io.Viewer.umd.js"></script>
<div id="viewer" style="width:600px;height:400px;background-color:black;border:5px solid gray;"></div>

CSS

.image {
  width: 60px;
  height: 40px;
  margin: 5px;
  border: 2px solid gray;
}

JavaScript

// Initialize viewer component
let viewerConfigs = {
  domElementId: "viewer",
  showUI: true
};
let viewer = new bimU.Viewer(viewerConfigs);
viewer.initialize();

// Register selection event
let selectedElementIndices;
viewer.addEventListener(bimU.EventsEnum.ON_SELECTION_CHANGED, (e) => {
  // Cache selected element indices	
  selectedElementIndices = e.selectedElementIndices;
});

// Add custom button for calculating the sum of selected perimeters
viewer.addCustomButton("button1", "chart-donut", "#e91e63", "Calculate Total Perimeter", () => {
  if (!selectedElementIndices || selectedElementIndices.length === 0) {
    viewer.showDialog("Warning", "No element is selected.", "Close", null, null, true);
    return;
  }
  // Filter out selected floor elements
  let propertyFilter1 = new bimU.PropertyFilter("Element", "Category", "Floors");
  let propertyFilter2 = new bimU.PropertyFilter(null, "eIdx", selectedElementIndices);
  propertyFilter2.operator = bimU.OperatorsEnum.IN;
  // Calculate total perimeter
  let propertySelector = new bimU.PropertySelector("Dimensions", "Perimeter");
  propertySelector.dataType = bimU.DataTypesEnum.FLOAT;
  let func = bimU.AggregateFunctionsEnum.SUM;
  // Send query to BIM database
  viewer.aggregateElementProperty([propertyFilter1, propertyFilter2], propertySelector, func, (data) => {
    viewer.showDialog("Total Perimeter:", String(data[0].Perimeter), "Close", null, null, true);
  }, onError);
});

// Add custom button for calculating the sum of selected areas
viewer.addCustomButton("button2", "grid", "#e91e63", "Calculate Total Area", () => {
  if (!selectedElementIndices || selectedElementIndices.length === 0) {
    viewer.showDialog("Warning", "No element is selected.", "Close", null, null, true);
    return;
  }
  // Filter out selected floor elements
  let filterExpression = `"Element:Category" = 'Floors' AND eIdx IN ('${selectedElementIndices.join(`', '`)}')`;
  // The property value of "Area" includes a unit (e.g., 100 m²)...