TS3 configurator

Supervisor: Hanno Stehling
Company: Design-to-Production GmbH

“The new Timber Structures 3.0 technology (TS3) bonds timber components made of solid wood, glulam, or cross-laminated timber on the front side. This means that point-supported, multi-axis load-bearing panels or tiled slabs can be created in any shape and size.” (source: ts3 website)

As a frontend designer and developer at Design-to-Production, I had the chance to work on creating a web interface for displaying specifications of TS3 technology. Users can specify the column span and the load requirements, and the application will output the required slab thickness. The interface is capable of drawing a plan, section, and FEM analysis of that specific TS3 slab.

visit TS3 Configurator

React for Frontend

Different react and page events had to be taken care of to achieve a performative generation of SVG drawings and animations. The illustrations are adapting to their container sizes instead of being scaled. As a result, the text size will stay readable even on small screens.

RFEM exporter, HTML Canvas

The FEM deformation gradients are drawn dynamically based on their canvas size. An application, written in C#, converts the FEM models into a JSON file, which will later use to draw the analysis onto an HTML canvas.
Using the COM API of Dlubal RFEM, This application is capable of cycling through a set of RFEM files, run the calculation if required, and export the resulted mesh into the JSON format.