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

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

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.

What is a STEP file?

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

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

Abbreviation

Meaning

AEC

Architecture, Engineering, and Construction.

BIM

Building Information Modelling

CAD

Computer Aided Design

IFC

Industry Foundation Classes

TBW

The BIM Whale

Getting Started

Installation

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

<script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/BIMWHALE.min.js"></script>

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

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

Detailed instructions

Step by step

Step 1

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

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.

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.

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

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.

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

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.

var selectedPropertySets = ["Custom_Pset"];

Notice how the object is structured.

This is an array, not an object.

All Entities

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

Config Object

Our final config object is constructed as:

var config = {
    requiredEntities,
    selectedEntities,
    selectedPropertySets,
    allEntities
};

Get Property Set

<!DOCTYPE html>
<html>
<body>
  <h3>Example</h3>
  <input type="file" id="myFile">
  <button onclick="myFunction()">Click me</button>
  <script src="https://cdn.jsdelivr.net/gh/andrewisen/bim-whale/dist/BIMWHALE.min.js"></script>
  <script>
    var config = {
        requiredEntities:{
            IFCPROPERTYSINGLEVALUE: "IfcPropertySingleValue",
            IFCRELDEFINESBYPROPERTIES: "IfcRelDefinesByProperties",
            IFCPROPERTYSET: "IfcPropertySet",
        },
        selectedEntities:{
            IFCDOOR: "IfcDoor",
            IFCWALLSTANDARDCASE: "IfcWallStandardCase",
        },
        selectedPropertySets: ["Custom_Pset"],
        allEntities:{
              ...requiredEntities,
              ...selectedEntities,
        },
    };
    function myFunction() {
        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);
    }
  </script>
</body>
</html>

Print the Result

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

{
  "#219": {
    entityName: "IfcWallStandardCase",
    instanceName: "#219",
    attributes: {
      parsed: [
        "1F6umJ5H50aeL3A1As_wTm",
        "#42",
        "Basic Wall:Bearing Wall:346660",
        "$",
        "Basic Wall:Bearing Wall",
        "#188",
        "#215",
        "346660"
      ]
    },
    properties: {
      Custom_Pset: {
        TypeMark: "_TYPE-MARK_",
        Keynote: "_KEYNOTE_",
        StoreyName: "Level: Level 1",
        TypeDescription: "_DESCRIPTION_",
        StatusConstruction: "New Construction",
        NetArea: "14.04739",
        Height: "4000.",
        Width: "200.",
        Length: "4000.",
        Hyperlink: "_URL_"
      }
    }
  },
  "#572": {
    entityName: "IfcDoor",
    instanceName: "#572",
    attributes: {
      parsed: [
        "1F6umJ5H50aeL3A1As_wUF",
        "#42",
        "M_Single-Flush:Outside door:346843",
        "$",
        "M_Single-Flush:Outside door",
        "#938",
        "#566",
        "346843",
        "2134.",
        "915."
      ]
    },
    properties: {
      Custom_Pset: {
        TypeMark: "20",
        Keynote: "--KEYNOTE--",
        StoreyName: "Level: Level 1",
        TypeDescription: "--DESCRIPTION--",
        StatusConstruction: "New Construction",
        NetArea: "3.18957899999998",
        Height: "2134.",
        Width: "915.",
        SillHeight: "0.",
        Hyperlink: "--URL--"
      }
    }
  }
}

Print Property Set

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

function printPropertySet(entites, myPropertySet) {
    for (var entitiy in entites) {
        for (var propertySet in entites[entitiy].properties) {
            if (propertySet === myPropertySet) {
                console.log(entites[entitiy].properties[pset]);
            }
        }
    }
}

Calling this function will give us a prittier result:

{
  TypeMark: "_TYPE-MARK_",
  Keynote: "_KEYNOTE_",
  StoreyName: "Level: Level 1",
  TypeDescription: "_DESCRIPTION_",
  StatusConstruction: "New Construction",
  NetArea: "14.04739",
  Height: "4000.",
  Width: "200.",
  Length: "4000.",
  Hyperlink: "_URL_"
}
{
  TypeMark: "20",
  Keynote: "--KEYNOTE--",
  StoreyName: "Level: Level 1",
  TypeDescription: "--DESCRIPTION--",
  StatusConstruction: "New Construction",
  NetArea: "3.18957899999998",
  Height: "2134.",
  Width: "915.",
  SillHeight: "0.",
  Hyperlink: "--URL--"
}

Good job! You are now ready for the Advanced Example

Final result

Advanced Example

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

DataTables

jQuery

Select2

Getting Started

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>

Add Basic HTML Page

Let's add an input:

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

Our HTML should look something like this:

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()" />

$(document).ready(function () {
    // select2
    $("#selectedEntitesInput").select2({
        data: data,
        placeholder: "Select which entities to include",
    });
});

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

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

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>

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

Our website should look like this:

The Final Result

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:

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

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.

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.

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.

Leave the array empty to include all Property Sets

All Entities

Demos

WIP

Demo 1

The demo can be found here:

Demo 2 (in Swedish)

The second demo is available here:

Industry Foundation Classes, IFC

What is IFC?

Introduction

A data schema
An exchange file format structure

1. Data Schema

The data schema is defined in:

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:

In more detail

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

1. Data Schema

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

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

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

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

2. Exchange File Format Structure

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

SCHEMA Family;

ENTITY Person
     name: STRING;
END_ENTITY;

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.

Schema

Family

Class Name

Person

Class Attribute

Name

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

Window Example

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

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

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

ENTITY { NAME }
    // content goes here
END_ENTITY;

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.

SCHEMA IFC2X3; 

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

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:

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

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

Attribute

Value

2cXV28XOjE6f6irgi0CO$D

#42

M_Fixed:0915 x 1830mm:353953

#35337

#13061

353953

1830.

#10

914.999999999999999

Let's dive deep into EXPRESS

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

SCHEMA IFC2X3; 

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

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:

SCHEMA IFC2X3; 

ENTITY IfcBuildingElement
	 ABSTRACT SUPERTYPE OF (ONEOF
		(IfcBeam
		,IfcBuildingElementComponent
		,IfcBuildingElementProxy
		,IfcColumn
		,IfcCovering
		,IfcCurtainWall
		,IfcDoor
		,IfcFooting
		,IfcMember
		,IfcPile
		,IfcPlate
		,IfcRailing
		,IfcRamp
		,IfcRampFlight
		,IfcRoof
		,IfcSlab
		,IfcStair
		,IfcStairFlight
		,IfcWall
		,IfcWindow))
 	SUBTYPE OF (IfcElement);
END_ENTITY;

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

ENTITY IfcElement
	 ABSTRACT SUPERTYPE OF (ONEOF
		(IfcBuildingElement
		,IfcDistributionElement
		,IfcElectricalElement
		,IfcElementAssembly
		,IfcElementComponent
		,IfcEquipmentElement
		,IfcFeatureElement
		,IfcFurnishingElement
		,IfcTransportElement
		,IfcVirtualElement))
 	SUBTYPE OF (IfcProduct);
		Tag : OPTIONAL IfcIdentifier;
 INVERSE
		HasStructuralMember : SET [0:?] OF IfcRelConnectsStructuralElement FOR RelatingElement;
		FillsVoids : SET [0:1] OF IfcRelFillsElement FOR RelatedBuildingElement;
		ConnectedTo : SET [0:?] OF IfcRelConnectsElements FOR RelatingElement;
		HasCoverings : SET [0:?] OF IfcRelCoversBldgElements FOR RelatingBuildingElement;
		HasProjections : SET [0:?] OF IfcRelProjectsElement FOR RelatingElement;
		ReferencedInStructures : SET [0:?] OF IfcRelReferencedInSpatialStructure FOR RelatedElements;
		HasPorts : SET [0:?] OF IfcRelConnectsPortToElement FOR RelatedElement;
		HasOpenings : SET [0:?] OF IfcRelVoidsElement FOR RelatingBuildingElement;
		IsConnectionRealization : SET [0:?] OF IfcRelConnectsWithRealizingElements FOR RealizingElements;
		ProvidesBoundaries : SET [0:?] OF IfcRelSpaceBoundary FOR RelatedBuildingElement;
		ConnectedFrom : SET [0:?] OF IfcRelConnectsElements FOR RelatedElement;
		ContainedInStructure : SET [0:1] OF IfcRelContainedInSpatialStructure FOR RelatedElements;
END_ENTITY;

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

ENTITY IfcProduct
			 ABSTRACT SUPERTYPE OF (ONEOF
				(IfcAnnotation
				,IfcElement
				,IfcGrid
				,IfcPort
				,IfcProxy
				,IfcSpatialStructureElement
				,IfcStructuralActivity
				,IfcStructuralItem))
			 SUBTYPE OF (IfcObject);
					ObjectPlacement : OPTIONAL IfcObjectPlacement;
					Representation : OPTIONAL IfcProductRepresentation;
			 INVERSE
					ReferencedBy : SET [0:?] OF IfcRelAssignsToProduct FOR RelatingProduct;
			 WHERE
					WR1 : (EXISTS(Representation) AND EXISTS(ObjectPlacement))
                		OR (EXISTS(Representation) AND 
                       (NOT('IFC2X3.IFCPRODUCTDEFINITIONSHAPE' IN TYPEOF(Representation))))
                    OR (NOT(EXISTS(Representation)));
END_ENTITY;

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

ENTITY IfcObject
	 ABSTRACT SUPERTYPE OF (ONEOF
			(IfcActor
			,IfcControl
			,IfcGroup
			,IfcProcess
			,IfcProduct
			,IfcProject
			,IfcResource))
	 SUBTYPE OF (IfcObjectDefinition);
			ObjectType : OPTIONAL IfcLabel;
	 INVERSE
				IsDefinedBy : SET [0:?] OF IfcRelDefines FOR RelatedObjects;
	 WHERE
				WR1 : SIZEOF(QUERY(temp <* IsDefinedBy | 'IFC2X3.IFCRELDEFINESBYTYPE' IN TYPEOF(temp))) <= 1;
END_ENTITY;

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

ENTITY IfcObjectDefinition
	 ABSTRACT SUPERTYPE OF (ONEOF
			(IfcObject
			,IfcTypeObject))
	 SUBTYPE OF (IfcRoot);
	 INVERSE
		HasAssignments : SET [0:?] OF IfcRelAssigns FOR RelatedObjects;
		IsDecomposedBy : SET [0:?] OF IfcRelDecomposes FOR RelatingObject;
		Decomposes : SET [0:1] OF IfcRelDecomposes FOR RelatedObjects;
		HasAssociations : SET [0:?] OF IfcRelAssociates FOR RelatedObjects;
END_ENTITY;

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

ENTITY IfcRoot
 ABSTRACT SUPERTYPE OF (ONEOF
	(IfcObjectDefinition
	,IfcPropertyDefinition
	,IfcRelationship));
	GlobalId : IfcGloballyUniqueId;
	OwnerHistory : IfcOwnerHistory;
	Name : OPTIONAL IfcLabel;
	Description : OPTIONAL IfcText;
 UNIQUE
	UR1 : GlobalId;
END_ENTITY;

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:

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

Inhertited from

Attribute

Value

IfcRoot

GlobalId

2cXV28XOjE6f6irgi0CO$D

IfcRoot

Own

#42

IfcRoot

Name

M_Fixed:0915 x 1830mm:353953

IfcRoot

Description

IfcObject

ObectType

M_Fixed:0915 x 1830mm:353953

IfcProduct

ObectPlacement

#35337

IfcProduct

Representation

#13061

IfcElement

Tag

353953

IfcWindow

OverallHeight

1830.

IfcWindow

OverallWidth

914.999999999999999

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.

IFC Sample Files

Sample files

The BIM Whale contains 6 different sample files.

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