Create a Table
Let's output our result to a table using DataTables.
<table class="table table-hover" id="ifcTable" width="100%"></table>We need to populate the table ourselves... this might be a bit tricky to do. Here's an example to help you get started. See Ajax sourced data for more information.
var data = [];
Object.values(ifcEntites).forEach((entity) => {
Object.keys(entity.properties).forEach(
(propertySet) => {
Object.keys(
entity.properties[propertySet]
).forEach((property) => {
data = [
...data,
[
entity.instanceName,
entity.attributes.parsed[0],
entity.entityName,
entity.attributes.parsed[2],
propertySet,
property,
entity.properties[propertySet][
property
],
],
];
});
}
);
});
Our HTML should look something like this:
<!DOCTYPE html>
<html>
<body>
<h3>Advanced Example</h3>
<!-- Input -->
<select
id="selectedEntitesInput"
name="selectedEntites[]"
multiple="multiple"
style="width: 100%"
required
></select>
<input type="file" id="myIfcFile" onchange="myFunction()" />
<!-- Table -->
<table class="table table-hover" id="ifcTable" width="100%"></table>
<!-- Bootstrap, jQuery, DataTables -->
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/datatables.min.css"
/>
<script
type="text/javascript"
src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.22/datatables.min.js"
></script>
<!-- Select2 -->
<link
href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<!-- BIMWHALE.js -->
<script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/bundle.min.js"></script>
<script>
// Select
$(document).ready(function () {
var data = [
{
text: "Shared Building Elements",
children: [
{
id: "IfcDoor",
text: "IfcDoor",
},
{
id: "IfcWallStandardCase",
text: "IfcWallStandardCase",
},
{
id: "IfcWindow",
text: "IfcWindow",
},
],
},
];
$("#selectedEntitesInput").select2({
data: data,
placeholder: "Select which entities to include",
});
});
// File Input
function myFunction() {
// Get selected entities
let selectedEntities = {};
$("#selectedEntitesInput")
.val()
.forEach((entity) => {
selectedEntities = {
...selectedEntities,
[entity.toUpperCase()]: entity,
};
});
// Build config
var requiredEntities = {
IFCPROPERTYSINGLEVALUE: "IfcPropertySingleValue",
IFCRELDEFINESBYPROPERTIES: "IfcRelDefinesByProperties",
IFCPROPERTYSET: "IfcPropertySet",
};
var selectedPropertySets = [];
var allEntities = {
...requiredEntities,
...selectedEntities,
};
var config = {
requiredEntities,
selectedEntities,
selectedPropertySets,
allEntities,
};
// Read IFC file
var file = document.getElementById("myIfcFile").files[0];
var reader = new FileReader();
reader.onload = function (e) {
var lines = e.target.result.split(/\r\n|\n/);
// Create new BIMWHALE.js object
var ifcFile = new BIMWHALE.IfcFile(lines, config);
// Parse file and get IFC entiteis
var ifcEntites = ifcFile.parseIfcFile();
// Generate table data
var data = [];
Object.values(ifcEntites).forEach((entity) => {
Object.keys(entity.properties).forEach(
(propertySet) => {
Object.keys(
entity.properties[propertySet]
).forEach((property) => {
data = [
...data,
[
entity.instanceName,
entity.attributes.parsed[0],
entity.entityName,
entity.attributes.parsed[2],
propertySet,
property,
entity.properties[propertySet][
property
],
],
];
});
}
);
});
// Genereate DataTable
var ifcTable = $("#ifcTable").DataTable({
data: data,
searching: false,
columns: [
{
title: "Id",
data: 0,
},
{
title: "GUID",
data: 1,
},
{
title: "Entity",
data: 2,
},
{
title: "Name",
data: 3,
},
{
title: "Property Set",
data: 4,
},
{
title: "Property Name",
data: 5,
},
{
title: "Property Value",
data: 6,
},
],
});
};
reader.readAsText(file);
}
</script>
</body>
</html>
Last updated