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>

PreviousGetting StartedNextAdd Config - part 1

Last updated