Back to configurator app


The purpose of this app is to give a proof-of-concept (POC) for an industrial whitespace configurator. This POC is done in the form of a web app designed to aid in the planning stage of the installations in the whitespace of a water-cooled server room.
The main purpose is to save time and resources by simplifying the planning and configuration.
The principal user interaction elements of the webapp: (1) the input parameters (2) the output parameters (3) the panel to switch views (4) the 3d model (5) the link to the documentation
In particular, this app is designed in those stages of a development project which require a strong communication between the developper, the client, and the engineer by providing a real-time feedback prototype tool with intuitive user interface and 3d output.

Advantages and comparison with a CAD-bound configurator

Unlike a configurator realised in a CAD environment such as Rhino3d / Grasshopper, the approach pursued with this web app has the following advantages:
  1. Ease of use: due to the intuitive user interface, no training is required
  2. Reproducibility: A 3d model produced with Rhino3d depends on a large number of variables, configuration parameters and the previous history of human interaction in the form of mouse clicks and display options..
    In particular, the time evolution of a script written in the Grasshopper visual scripting language can hardly be kept track of by a version control system like git.
    On the other hand, in this POC a configuration and the resulting 3d model is very easily reproducible. The configuration only depends on the input parameters and the state of the underlying program at the time of creation of the configuration, but not on additional configuration files, settings, and mouse clicks. One could even think of a database of system configuration queries etc, something that would be very hard to realize with Grasshopper.
  3. Costs: This software does not incur any recurring license costs, unlike Rhino.
  4. Ease of deployment: This POC runs on any computer or mobile device with internet access, unlike Rhino which is typically bound to a particular computer by means of a single-seat license. No installation procedure is required at all, nor are there any restrictions on the operating system (Windows, Mac, Linux).
  5. Fitness for purpose: While Rhino is a general CAD system tailored to the needs of architects and geared towards quick generation of very general unconstrained (or even "free form" geometries), this POC is custom-tailored towards the particular use case at hand and automatically takes account of all constraints of the situation. In particular, error checking is being accounted for from the outset.
  6. Much lower complexity barrier: Experience shows that visual programming environments such as Rhino become very hard to handle once a certain threshold of complexity has been reached, manifesting itself in an unmanageable "spaghetti" of GH components. In contrast, a traditional programming approach such as the one pursued in this POC is linearly organized and remains manageable once a certain complexity threshold has been reached.
  7. Possibility of synergy effects due to abstraction : Rhino3d and Grasshopper provides little to no ways to generalizze from methods to behaviour, in other words from classes to interfaces. For instance, in the approach pursued in this POC, cables and pipes exhibit some very analogous behaviour (header vs stub installation, power distribution logic etc.), and can therefore be treated simultaneusly, to some large degree.
  8. Separation between model and view logic: Whereas in Rhino, the programming logic representing the data model is invariably tied up with the programming logic, in this approach these two programming logics are strictly separated. The first is in the file mf.js, and the latter is in the file client.js. The file mf.js does not make use of anything out of client.js.
    It is of great advantage to strictly separate between the model and the view, in other words: between the representation of the data in the code, and those parts of the code that are merely responsible for plotting the data.
    In a clean separation, it is much easier to modify either the abstract representation of the data, or its representation, by not touching the other part.
    Thus, such a representation serves the maintainability and the serviceability, by reducing the complexity of the software design. (One could even go one step further and separate the plotting components into those that view the model and those that control the model, resulting in a complete model-view-controller design. This would be very hard to impossible to achieve in Rhino3d.)
  9. Extensibility: It is very easy to replace the human and the export interface with a machine readable and validatable format, due to the abstract nature of the code.
  10. Performance : Due to the fact that this code is very custom-tailored, the performance should be superior to that of a Rhino configurator.
  11. Suitability for automatization and optimization: This code can be scripted more easily and is therefore much better suited to scripting tasks for automatization and optimization.
  12. Robustness: This code performs automatic validation and should therefore be much less prone to crashes or hang-ups than Rhino/Grasshopper.


The usage of the web app should be quite self-explanatory.
There are three "windows" that can be dragged with the mouse labelled (1), (2) and (3) in the screenshot above.
There is a main 3d windows labelled (4), and a link to the documentation (5).
The first window (1) is the window governing the configuration parameters and the submit button. In the future, there will also be an upload button to import geometrical constraints and outer dimensions of the building from the configurator. Second, there is an output window with the resulting configuration parameters. In the future, there will be a save/export button to save a configuration directly to Revit / construction documentation, to web export, or to Excel etc.
The window (3) allows to switch between plan view, front and side elevation view.
Mouse left: pan
Mouse wheel: zoom
Mouse right: move

Functionality, physics and underlying abstract class layout

The code works basically by performing the following steps:
  1. Calculate the power of the whitespace
  2. Calculate the volume flow using the formula P = Q rho c deltaT where P is power, rho is the density of water, c is the heat capacity of water, Q is volume flow, delta T is the temperature difference between hot and cold water.
  3. Calculate the ideal pipe diamters from the volume flow rate assuming a maximal effective water speed of 1m/s.
  4. Choosing the smallest larger DIN diameter for the stub pipe and the header pipe.
  5. Assemble the 3d output.

Next plans, further options and next steps, opportunities ....

  1. Import from configurator
  2. Export into configurator
  3. Export to Revit
  4. Export to Excel
  5. Incorporation of cable layout
  6. Extension to multiple floors


Mathias Fuchs, 0174 / 584 6212

Back to configurator app