1 of 51

The BIM Whale Project

Welcome

Welcome to The BIM Whale Project's documentation.

Please note: This website is currently under construction!

What is The BIM Whale Project?

How do I use The BIM Whale (BIMWHALE.js) on my website?

How do I configure The BIM Whale (BIMWHALE.js)?

What is IFC?

Introduction

The BIM Whale Project

The BIM Whale (Swedish: BIM-valen) is a project about Industry Foundation Classes (IFC). The project is is abbreviated as: TBW (The BIM Whale).

The aim of TBW is to:

I: Introduce and explain the basics of IFC II: Teach people how to parse an IFC file and retrieve basic information

In more specific terms, the goal of this project is to:

A: Provide a simple and fast IFC parser B: Provide learning resources (documentation, videos, power points) to people within the AEC industry

To clarify, the focus with The BIM Whale Project is to educate people. The code itself and its functionality are secondary.

Content

TBW consists of three different parts:

A JavaScript module | BIMWHALE.js
Documentation | This website
A SaaS app | www.bimvalen.se

1. BIMWHALE.js

Goal A, Provide a simple and fast IFC parser, has been realized as BIMWHALE.js. It is a client-side IFC parser built using TypeScript.

Not sure what TypeScript is? Check out

The TypeScript code has been compiled into regular JavaScript using . That's why it is called BIMWHALE.js. Check out the pages for more information.

2. Docs

Goal B has been realized here; this website you are at right now. Please note that BIMWHALE.js has additional documention. These docs are intended for those who want to dive into the nitty gritty.

3. BIM-valen

TBW is also available as a SaaS app. The website consist of three different tools that handles IFC files. It uses behind the scenes.

www.bimvalen.se

N.B The website is currently only avaible in Swedish. Once complete, it will get translated into English.

Additional Notes

Here are some additional notes regarding TBW project.

FAQ

What does The BIM Whale do?

Parse so-called User Defined IFC Property Sets from an IFC file.

What does The BIM Whale NOT do?

Parse entity attributes
Parse geometry
Follow the EXPRESS standard
etc. etc.

What is an IFC file?

Industry Foundation Classes (IFC) is a standardized, digital description of a BIM model.

See for more information.

What is a STEP file?

A STEP-File is the file format that IFC uses.

Again, see for more information.

Is this code "hand made"?

Yes, the code is hand made. The parsing is not derived from an EXPRESS definition.

Is the code ready for production?

Abbreviations

Getting Started

Installation

You can download the latest version of BIMWHALE.js from the content delivery network (CDN) .

Not sure what a CDN is? Check out:

To get the latest version, simply include this snippet in your HTML:

If you want a specific realase of BIMWHALE.js, then head to:

Go to the folder dist and select bundle.min.js. Notice the dropdown in the picture below. It says 0.0.1. This indicates which realease you are at.

Quick Start

This is a quick start guide - i.e. this is intended for those who are exprienced in web development. Check out the detailed instructions for a more detailed explanation.

Use a FileReader
Create a new BIMWHALE object
Call parseIfcFile()

var file = document.getElementById('myFile').files[0];
var reader = new FileReader();
reader.onload = function(e) {
    var lines = e.target.result.split(/\r\n|\n/);
    var ifcFile = new BIMWHALE.IfcFile(lines, config);
    var ifcEntites = ifcFile.parseIfcFile();
};
reader.readAsText(file);

You are now done! If you have understood the snippet above, then head over to Simple Example. Otherwise, check the Detialed Instructions for a for a more in-depth explanation.

Detailed instructions

Step by step

Step 1

Create a HTML page with an . We'll call our input myFile.

Step 2

Make sure you include TBW before your main function.

Step 3

Step 4

Step 5

Step 6

Use BIMWHALE.js. by:

Creating a new BIMWHAlE object

Calling the method parseIfcFile()

Please note that the config object is missing at this moment.

Final result

The final result should look like this:

Please note that this code doesn't output the result. You won't see anything on your screen.

Simply log the IFC Entities like this:

Simple Example

This example will use the sample file.

Make sure you read the before continuing

We are looking to retrieve the Property Set called Custom_Pset. Custom_Pset occurs five times in our file, see below:

These lines are not in a human-readable form. We cannot interpret this data. BIMWHALE.js will help us retrive and parse this data. Take a very quick at the input/output then go ahead to the next step.

What are Property Sets?

Our BIM model was created in Revit.

We have created our own IFC export setup. With our custom setup, Revit exports a Property Set called Custom_Pset. This means that each object (each door, wall, window, etc.) will have a property set called Custom_Pset.

We can open our exported IFC file in Solibri Anywhere. Our information that we want to parse is avaible in the tab Custom_Pset.

A property set is simply a set of properties

Config

Required entities

The first thing we are going to configure is the required entities. These three should do fine.

Notice how the object is structured. The key must be in uppercase. The value can have any form.

Selected Entities

There's no need to get all IfcEntities. Let's specify which entities we want.

Our sample file has only a door and a wall. It would be unnecessary to try to get the roofs, floors, windows, etc.

A list of common Ifc Entites can be found here:

Selected Property Set

Also, there's no need to get all Property Sets. Let's specify which we want. Leave the array blank to include all Property Sets.

Notice how the object is structured.

This is an array, not an object.

All Entities

Config Object

Our final config object is constructed as:

Get Property Set

Let's reuse our example in the section.

Print the Result

The final thing we need to do is to output the result. With a simple console.log, we get:

Print Property Set

Let's take a minitue to prettify the result. We can implement this simple function:

Calling this function will give us a prittier result:

Good job! You are now ready for the Advanced Example

Final result

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

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 layout system. First, we wrap everything inside a container.

<div class="container">
    <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>
</div>

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

<div class="container py-4">
    <h3 class="py-2">Advanced Example</h3>
    <!-- Input -->
    <select
        class="py-2"
        id="selectedEntitesInput"
        name="selectedEntites[]"
        multiple="multiple"
        style="width: 100%"
        required
    ></select>
    <input
        class="py-2"
        type="file"
        id="myIfcFile"
        onchange="myFunction()"
    />
    
    <!-- Table  -->
    <table
        class="py-2 table table-hover"
        id="ifcTable"
        width="100%"
    ></table>
</div>

Our website should look like this:

The Final Result

You can check out the final result on Codepen, 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:

<!DOCTYPE html>
<html>
<body>
<div class="container py-4">
    <h3 class="py-2">Advanced Example</h3>
    <!-- Input -->
    <select
        class="py-2"
        id="selectedEntitesInput"
        name="selectedEntites[]"
        multiple="multiple"
        style="width: 100%"
        required
    ></select>
    <input
        class="py-2"
        type="file"
        id="myIfcFile"
        onchange="myFunction()"
    />

    <!-- Table  -->
    <table
        class="py-2 table table-hover"
        id="ifcTable"
        width="100%"
    ></table>
</div>
<!-- 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>

Good luck with your own project :)

Configuration

Config

The config object consist of four required properties:

Required Entities
Selected Entities
Selected Property Sets
All Entities

The config object is passed into BIMWHALE.js's constructor function as a paramter:

new BIMWHALE.file(lines, config);

The example showed us the easiest way to pass in this object:

var config = {
    requiredEntities:{
        IFCPROPERTYSINGLEVALUE: "IfcPropertySingleValue",
        IFCRELDEFINESBYPROPERTIES: "IfcRelDefinesByProperties",
        IFCPROPERTYSET: "IfcPropertySet",
    },
    selectedEntities:{
        IFCDOOR: "IfcDoor",
        IFCWALLSTANDARDCASE: "IfcWallStandardCase",
    },
    selectedPropertySets: ["Custom_Pset"],
    allEntities:{
          ...requiredEntities,
          ...selectedEntities,
    },
};
var file = document.getElementById('myFile').files[0];
var reader = new FileReader();
reader.onload = function(e) {
    var lines = e.target.result.split(/\r\n|\n/);
    var ifcFile = new BIMWHALE.file(lines, config);
    var ifcEntites = file.parseIfcFile();
};
reader.readAsText(file);

Notice that some properties are JavaScript objects as well. Here's a summary of the properties within the Config object:

Property Name

Type

Description

requiredEntities

{ [key: string]: string }

Required IFC entites

selectedEntities

{ [key: string]: string }

Selected IFC entites

selectedPropertySets

string[ ]

Selected Property Sets

allEntities

{ [key: string]: string }

All entities ( requiredEntities + selectedEntities )

Required Entities

These are the required IFC Entities. BIMWHALE.js will not work without these. They are hardcoded into the logic. You should NOT change these.

var requiredEntities = {
    IFCPROPERTYSINGLEVALUE: "IfcPropertySingleValue",
    IFCRELDEFINESBYPROPERTIES: "IfcRelDefinesByProperties",
    IFCPROPERTYSET: "IfcPropertySet",
};

Selected Entities

These are the selected IFC Entities. There's no need to get all IFC Entities. For example, an architect may not be intrested in HVAC components.

var selectedEntities = {
    IFCDOOR: "IfcDoor",
    IFCWALLSTANDARDCASE: "IfcWallStandardCase",
};

This requires that you to have a basic understanding of the IFC schema and its entities. Here are two major categories:

Notice how the object is structured. The key must be in uppercase. The value can have any form.

Selected Property Sets

These are the selected Property Sets. Again, there's no need to get all Property Sets. Please notice that the logic is case senstive. The name must match exactly.

var selectedPropertySets = ["Custom_Pset"];

Leave the array empty to include all Property Sets

var selectedPropertySets = [];

All Entities

All entites are simply requiredEntities and selectedEntities combined. The spread operator is used to join these objects.

var allEntities = {
    ...requiredEntities,
    ...selectedEntities,
};

Demos

WIP

Demo 1

The demo can be found here:

Demo 2 (in Swedish)

The second demo is available here:

The website is currently only available in Swedish. You can use in the mean time.

Industry Foundation Classes, IFC

What is IFC?

Introduction

Industry Foundation Classes (IFC) is an international standard for Building Information Model (BIM) data (buildingSMART, 2020a). The standard, ISO 16739-1, is used to exchanged BIM data among software applications used by the various participants in the AEC industry (ISO, 2020a).

IFC is developed and mainteined by buildingSMART International and is used with openBIM (buildingSMART, 2020b). According to (ISO, 2020a), the IFC specifies:

A data schema
An exchange file format structure

1. Data Schema

The data schema is defined in:

EXPRESS data specification language, ISO 10303-11,

2. Exchange File Format Structure

The exchange file formats structure is used for exchanging and sharing the data according to the data schema. The exchange file formats structure is defined in:

Clear text encoding of the exchange structure, ISO 10303-21

In more detail

Let's try to explain IFC in layman's terms.

1. Data Schema

According to (buildingSMART, 2020b), the IFC data schema describes:

identities and semantics
- name, machine-readable unique identifier, object type or function
characteristics or attributes
- material, color, thermal properties, etc.
relationships
- locations, connections, ownership, etc.
abstract concepts
- performance, costing, etc.
processes
- installation, operations, etc.
people
- owners, designers, contractors, suppliers, etc.
Etc.

2. Exchange File Format Structure

Whereas the Exchange File Format Structure allows the data described to be transferred from one computer system to another.

Example: The .IFC file can be used to transfer the BIM model from Revit to Solibri

Example

In this example we're going to take a look at a window. Please note that this section will simply introduce the data schema and STEP-file. We will explain how these works in detail later.

1. Data Schema

IFC2x Edition 3 Technical Corrigendum 1, or simply IFC2x3, describes a window like this:

ENTITY IfcWindow
	SUBTYPE OF (IfcBuildingElement);
		OverallHeight : OPTIONAL IfcPositiveLengthMeasure;
		OverallWidth : OPTIONAL IfcPositiveLengthMeasure;
END_ENTITY;

To clarify: This is the data schema for a window class. The window is defined using the EXPRESS data specification language (ISO 10303-11).

This is an abstract representation of a window object. I.e. this window doesn't exist in our building.

2. Exchange File Format Structure

The STEP-file, ISO 10303-21, describes the window object like this:

#13067= IFCWINDOW('2cXV28XOjE6f6irgi0CO$D',#42,'M_Fixed:0915 x 1830mm:353953',$,'M_Fixed:0915 x 1830mm',#35337,#13061,'353953',1830.,914.999999999999);

This is an representation of a physical window. I.e. this window exist somewhere in our building.

Summary

IFC is an international standard by buildingSMART International. It has two parts;

A data schema, EXPRESS
A file format, STEP-File

ENTITY IfcWindow
	SUBTYPE OF (IfcBuildingElement);
		OverallHeight : OPTIONAL IfcPositiveLengthMeasure;
		OverallWidth : OPTIONAL IfcPositiveLengthMeasure;
END_ENTITY;

#13067= IFCWINDOW('2cXV28XOjE6f6irgi0CO$D',#42,'M_Fixed:0915 x 1830mm:353953',$,'M_Fixed:0915 x 1830mm',#35337,#13061,'353953',1830.,914.999999999999);

Use the tab above to switch between the EXPRESS data schema and the STEP-file

In summary:

The data schema, EXPRESS, specifies: How an object should be represented
The file format, STEP-file, specifies: An actual object

Notice that we need both the data schema and the file format to understand our BIM model.

In other words:

The data schema is the manual
The file format is the usage of the manual

In object oriented programming words:

The data schema, EXPRESS, is the class
The file format, STEP-file, is the object

Editor's note:

I know that this can hard to understand. Please, take a good look at this article. Read it agian, think and reflect about the content.

EXPRESS

Introduction

Let's take a look a very basic EXPRESS data model.

We have defined a custom schema called Family. We have a Person class within this schema. The person has one attribute: name. The name is represented as a string.

If you are familiar with object oriented programming, then this should feel very straight forward. If not, check out:

, or

Window Example

Let's take a look at our previous example, the window:

We can see that we each "object" (window, wall, door, roof, etc.) is an ENTITY. Again, notice how we use the following format to specify an "object":

Here's a list of some common building elements. These are defined in IFC2x Edition 3 Technical Corrigendum 1 schema, SCHEMA IFC2X3;. Again, notice how each building element ("object") is its own ENTITY.

Let's go back to our window. This is a Window class defined using the EXPRESS data model format.

Take a look at line 5 and 6. We can see that we have two attributes:

Overall Height
Overall Width

Missing Attributes?

We can verify this by looking at the STEP-file. This has clearly more than two attributes:

We have 10 different attributes. Notice that we don't understand what any of these attributes mean.

Let's dive deep into EXPRESS

How does this work? How can we have more than two attributes?

Well, the answer lies within the EXPRESS definition. Take a close look at the 4th line above. We can see that IfcWindow is an subtype of an IfcBuildingElement. Here's the EXPRESS data model forIfcBuildingElement:

Notice how the IfcBuildingElement itself is a subtype of IfcElement (see line 25 above). Let's continue down the rabbit hole...

Again, notice how our IfcElement is a subtype of IfcProduct (see line 13 above). Let's continue...

Our IfcProduct is a subtype of IfcObject (see line 11 above).

Our IfcObject is a subtype of IfcObjectDefinition (see line 10 above). Let's continue...

Our IfcObjectDefinition is a subtype of IfcRoot (see line 5 above). We are almost done...

Finally, we have reached the end!

Inheritance

We call this behaivor inheritance.

IfcWindow
- IfcBuildingElement
  - IfcProduct
    IfcObject
    IfcObjectDefinition
    IfcRoot

Let's flip this "graph". This will make things a bit easier to explain.

IfcRoot
- IfcObjectDefinition
  - IfcObject
    IfcProduct
    IfcBuildingElement
    IfcWindow

We can see that IfcRoot has four different attributes; GlobalId, OwnerHistory, Name, Description. The IfcObjectDefinition will inherit these attributes. This means that the IfcWindow will inherit these attributes.

The IfcWindow will inherit all attributes from its parent entities.

Summary

If we use inheritance, we can see what each attribute in the STEP-file actually mean:

Editor's note:

I know that this can hard to understand. Please, take a good look at this article. Read it agian, think and reflect about the content.

STEP-file

Introduction

Let's take a look at our Window example.

This lines follows this encoding template:

Instance Name
Entity Name
Attributes

We can express this template in two different ways:

1. Instance Name = 2. Entity name(3. Attributes)

We have, in this example:

STEP-file Encoding

Here are some basic encoding rules

Again, this can be visualized as:

#Instance Name = Entity name(Attributes)

Or, as our example:

#13067 = IFCWINDOW('2cXV28X...)

Or, as a single line:

Additional Notes

Editor's note:

I know that this can hard to understand. Please, take a good look at this article. Read it agian, think and reflect about the content.

Work in progress...

IFC Sample Files

Sample files

The IFC sample files are hosted on .

The BIM Whale contains 6 different sample files.

lease notice that you have to right click and select "Save as" (or a similar option).