FloorSpaceJS by NREL

Open-Source, Web-Based Geometry Editor

DotsDots

How Devetry Built an Open-Source Energy Efficiency Tool

76%

percentage of electrical used by buildings in the US

35%

estimated energy savings by 2030 if research efforts are met

5

years of continuous delivery

The Problem

The National Renewable Energy Laboratory (NREL) owns OpenStudio, a building energy modeling program. It runs fairly complicated mathematical models to calculate a building’s annual energy usage. It’s used primarily for planning new building projects and getting grants. 

Essentially, a user could input building dimensions and features to get an estimate of energy expenditure. They needed to be able to ask questions like, “What would happen if we rotate this building?” “What if we used triple-pane glass instead of double-pane?”

In the past, building planners used Google Sketch Up to draw floorplans for use in OpenStudio, but a few years ago, they hit a licensing problem. Google Sketch Up was no longer a viable option and NREL needed a 2D editor that was purpose-built for commercial building floorplans and could be embedded into OpenStudio.  

Because this is a product for the Department of Energy, FloorSpaceJS needed to be open-source, so other companies can make changes to the codebase.

The Solution

NREL hired our team to build FloorSpaceJS, an open-source, web-based 2D geometry editor for building energy modeling (BEM). This project has been continuously delivered over the past five years. 

FloorSpaceJS works as a stand-alone application or it can be embedded into the OpenStudio desktop app. This solution helped NREL fulfill its duty of providing an open-source component within OpenStudio. View the project here: FloorspaceJS 

FloorSpace users can:

  • Model abstract building shapes
  • Insert custom images
  • Assign metadata like units, building types, thermal zones, space types, and pitched roofs
  • Add components like windows, doors, and daylighting control
  • Preview a 3D model of the building
DotsDots

Creating Geometry in the OpenStudio App with Floorspace.js

See more functionalities of FloorSpaceJS in this 2020 video demonstration.

Creating Geometry in the OpenStudio App with Floorspace.js

See more functionalities of FloorSpaceJS in this 2020 video demonstration.

Technology

“FloorspaceJS is written entirely in JavaScript with a minimal set of dependencies. The code is distributed under a 3-clause BSD software license that allows it to be reused in a wide range of applications. FloorspaceJS transpile modern ES2017 syntax using Babel.js and Webpack to produce code that runs in today’s browsers. It uses the Vue.js framework with Vuex for state management, OpenLayers for map integration, and d3 for drawing.” 

Source: FloorspaceJS - A New, Open Source, Web-Based Geometry Editor for Building Energy Modeling (BEM): Preprint

Left

01

/01

Right
Background

Results

  • FloorspaceJS was presented at the Symposium on Simulation for Architecture and Urban Design (SimAUD) 2018 

  • This technology was picked up by three for-profit companies, including Devetry partner Perkins + Will

Luigi G

Principal Investigator

They exceeded our expectations when we were just developing the software, so we brought them in again to resolve the issues. They’re highly flexible, skilled, and a great pleasure to work with.
Background