1 of 9

Advanced Example

Let's build something more practical. Make sure you have read and understood the Simple Example. Before we begin, let's list some feature that the previous example lacked:

The config was hard coded. There was no way for the user to change it.
The infromation was only logged in the console. A regular user couldn't see the result.

Prerequisites

Boostrap

We will use Bootstrap as the CSS framework.

DataTables

Regular Bootstrap tables lacks any functionality. DataTables will add that.

jQuery

Both Bootstrap and DataTables require jQuery.

Select2

We are going to use select2 to extend the select boxes.

Getting Started

Let's install our prerequisites. We will use the DataTables CDN. DataTable has an excellent documentation if you get stuck. Anyways, go to their download page:

https://datatables.net/download/

We are going to use Boostrap 4 (not 5).

We'll select both jQuery 3 & Boostrap 4.

And we'll use CDN as our donwload method.

Simply copy the two lines and paste into your HTML.

Our HTML should look something like this:

<!DOCTYPE html>
<html>
<body>
    <h3>Advanced Example</h3>
    <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
</body>
</html>

Notice that this example might use outdated links. Go to the DataTables website and get the latest links.

Add Basic HTML Page

Let's add an input:

 <input type="file" id="myIfcFile">

A simple approach to run a function on each file change:

 <input type="file" id="myIfcFile" onchange="myFunction()">

The detailed insctructions covered the bascis of reading a file and using BIMWHALE.js.

var file = document.getElementById('myIfcFile').files[0];
var reader = new FileReader();
reader.onload = function(e) {
  var lines = e.target.result.split(/\r\n|\n/);
  // TODO
};
reader.readAsText(file);

Our HTML should look something like this:

<!DOCTYPE html>
<html>
    <body>
        <h3>Advanced Example</h3>
        <!-- Input -->
        <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>
        <!-- BIMWHALE.js -->
        <script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/bundle.min.js"></script>
        <script>
            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>

Add Config - part 1

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>

Add Config - part 2

Let's convert the select2 input to something we can use. We are going to use spread syntax in this example.

 var selectedEntities = {};
$("#selectedEntitesInput")
    .val()
    .forEach((entity) => {
        selectedEntities = {
            ...selectedEntities,
            [entity.toUpperCase()]: entity,
        };
    });

This might look very complicated, but don't worry.

We simply get our selection by calling $("#selectedEntitesInput").val()
We create an object for each selected entity using.forEach((entity) =>
We use an arrow function expression. Our emtpy object, selectedEntities, gets populated.

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() {
                let selectedEntities = {};
                $("#selectedEntitesInput")
                    .val()
                    .forEach((entity) => {
                        selectedEntities = {
                            ...selectedEntities,
                            [entity.toUpperCase()]: entity,
                        };
                    });
                var requiredEntities = {
                    IFCPROPERTYSINGLEVALUE: "IfcPropertySingleValue",
                    IFCRELDEFINESBYPROPERTIES: "IfcRelDefinesByProperties",
                    IFCPROPERTYSET: "IfcPropertySet",
                };
                var selectedPropertySets = [];
                var allEntities = {
                    ...requiredEntities,
                    ...selectedEntities,
                };
                var config = {
                    requiredEntities,
                    selectedEntities,
                    selectedPropertySets,
                    allEntities,
                };

                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>

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>

Final Touches

Let's make things a bit prettier. Since we use Boostrap, we will use ther system. First, we wrap everything inside a container.

Then, let's add some . We'll simply add py-2 to each element and a py-4 to the container.

Our website should look like this:

The Final Result

You can check out the final result on , use the box below or see the full source below.

Full Source: If you been following this example step by step, you should have something like this:

Good luck with your own project :)

Add Config - part 1

<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>

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>