🧊 One of the coolest thing you can do is traverse the IFC file and fetch the relevant information, web-ifc provides us with the capability to read and write IFC file from within the browser, In this tutorial we will Read Properties from IFC file and Output it on Frontend.
💾 This tutorial will help us to get the Analysis of IFC without a viewer😎.
📚 There are several types of properties in the IFC scheme, each with a specific purpose, and IFC.js can get all of them. Some of the most common are:
Specific to each IFC class.
Describe properties of all elements of the same type (e.g. all envelope walls of a particular type).
Describes all the materials that make up the layers of that element.
Arbitrary sets of user-defined properties. There may be multiple sets of properties associated with one or more elements. Each property set contains an arbitrary group of properties related to each other.
Sets of properties describing the dimensions of the elements to which they refer. Although it would also be possible to infer element dimensions implicitly from the geometry definition, this explicit description makes it much easier to create applications that measure IFC models.
🚴♂️ But enough theory! Let's get down to work.
Imports and Global Variables
We will read file and call
LoadFileData() and send IFC data as Text
Creating a method which will be called for getting Element Properties All the code for getting Element Data goes inside it
GetAllLines() gives you all the lines, but what if you want to get a line according to that ElementID?
GetLines() can be used at times like these when we know ElementID and want the data for it.
🔢 Getting Element Data by ElementID
🤨 But what is Element?
Every Entity can be considered as an Element which has it's own unique ElementID, by using the above code we can get various values that are contained in that Element Data. Few values that you can get and what we will output on Frontend are
- GUID : Globally Unique Identifier for the Element
- Name - Name given to that Element
- IfcType - It refers to the type of Element it is e.g.
- IfcObjectType - Defines the specific information about a type
- Tag - The IFC tag feature lets you assign IFC properties to the objects when they are exported to IFC
- and Many More
🤖 Element Data
createRowInTable() as of now, it will be covered in Frontend Section
Just remember 1st parameter is the Label and the 2nd parameter is the respected value.
Now that we have Element Data, we need to get the properties of that Element, the way IFC is structured we can't directly get Properties like we got Element Data, we have to fetch Lines which are Property Data and filter it according to the ExpressID we want.
Feels too hectic? Don't worry, web-ifc with it's Native Speed gets us the data easily.
1️⃣ Getting All Lines with Type
We will get all
Lines that has relation as properties with Elements i.e
2️⃣ Get ElementID of Property Sets
- After getting the lines we will fetch the ElementID from those lines, next we use those ElementID to get the Element Data same like what we have done above.
- Next, we will go through the Element Data and find out the RelatedObjects and if those RelatedObjects contain the ElementID for which we are trying to find properties we save them in a local array🥳
⚖️ The heavy lifting has been done, now we will repeat few of the steps.
3️⃣ Getting Property Sets from their ID
- Yes you are right, getting Element Data using Element IDs!, now we will use the IDs from propSetIds and Get Data.
- Then we will check whether they have properties i.e. check if they contain Nominal Values
- If you want you can store Property Sets but in our case we will show them on Frontend, so no need to store.
🤖 Method to Create Rows We will create a function to create rows dynamically, this will help us to insert data directly into table and show it on the FrontEnd.
- We will now use the
tablevariable we had created globally while doing the setup
🔳 Your HTML Code inside
<body> should like this
🎨 Now Styling
Input Field and button:
Table and Table Row:
🎉 Congratulations! You should now be able to traverse any IFC and extract the properties you are looking for.
You can use the web-ifc APIs to get Material Data as well and many more to query the lines according to your need.