Let's contiue by allowing the user to select options. Since we already use jQuery, we're going to use Select2 as well. Feel free to use any other alternative. We are going to use select2@4.0.13 for this example.
<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>Let's add a select box above the file input. We will name this selectedEntitesInput.
<!-- Input -->
<select
id="selectedEntitesInput"
name="selectedEntites[]"
multiple="multiple"
style="width: 100%"
required
></select>
<input type="file" id="myIfcFile" onchange="myFunction()" />
Let's configure select2. We're going to load our data from an array.
$(document).ready(function () {
// select2
$("#selectedEntitesInput").select2({
data: data,
placeholder: "Select which entities to include",
});
});Here's a staring template. Again, a list of IFC building elements can be found here.
var data = [
{
text: "Shared Building Elements",
children: [
{
id: "IfcDoor",
text: "IfcDoor",
},
{
id: "IfcWallStandardCase",
text: "IfcWallStandardCase",
},
{
id: "IfcWindow",
text: "IfcWindow",
},
],
},
];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()" />
<!-- 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() {
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();
console.log(ifcEntites);
};
reader.readAsText(file);
}
</script>
</body>
</html>