Case Study: Window Configurator

Migration to the new help center
We are currently migrating to a new help center. Old documentation articles will remain here until they are updated in the new version. However, keep in mind that this migration goes along a completely new ShapeDiver platform, a new version of the viewer and an updated Grasshopper plugin. Therefore, the information contained in the present article might contain outdated information. If you have questions about the topic addressed in the present article but cannot find a version of it in the new help center, don't hesitate to let us know on the forum so we can work on an update shortly.

A window is a product which can have endless configurations and using basic inputs such as sliders or value lists can become very messy or restricted. By using ShapeDiver JSON components, you can expand your possibilities and keep organised the product logic of the window.

For this case study, we will build the window logic as a series of rectangles arranged in the same XZ Plane. A rectangle in Grasshopper requires a X size (Width) and Y size (Height) domain which is exactly what will be provided in the JSON object:

{
 "widthDomain": [0,1000],
 "heightDomain": [0,1000]
}

In this case, this rectangle starts at the origin and expands 1000 units in width and height. The size domains are achieved by giving as values arrays with two numbers [start , end]. In order to add more divisions to our window, we need a list of rectangles which in a JSON translates in an array of objects:

[
 {
 "widthDomain": [0,500],
 "heightDomain": [0,3000]
 },
 {
 "widthDomain": [500,1000],
 "heightDomain": [0,3000]
 },
 {
 "widthDomain": [1000,1500],
 "heightDomain": [0,3000]
 }
]

Here we have an array of three objects which contain identical attributes but different values. Each rectangle starts where the last one ends so they don't overlap and generate a nice end result. Finally, in order to access this array of objects we need to wrap everything in a single object with a name we can identify via ShapeDiver components:

{
 "divisions": [
   {
     "widthDomain": [0,500],
     "heightDomain": [0,1500]
   },
   {
     "widthDomain": [500,2500],
     "heightDomain": [0,500]
   },
   {
     "widthDomain": [500,2500],
     "heightDomain": [500,1000]
   },
   {
     "widthDomain": [500,2500],
     "heightDomain": [1000,1500]
   }
 ]
}

Now that we have our JSON data logic, we need to create geometry with it. The first step is to Parse our JSON with the ShapeDiverJSONParse and then look for the attributes with the ShapeDiverJSONAccess component:

In the example above, we first access the "divisions" main object which gives a list of objects, then we look for the "widthDomain" and "heightDomain" inside that list of objects, which finally gives a tree with lists of numbers. Each branch of this tree comes from each object in our JSON array and the two numbers inside those branches are the boundaries of the X and Y domains for the rectangles.

Having these numbers, the next step is to create the rectangles by getting the domains, either with Construct Domain or Bounds, and then offset those rectangles to get the frame of the window:

With the inner offset of the rectangle we can create the glass pane and with the Region Union of the external offset we can create the boundary of the entire window. Finally, with simple extrusions we give thickness to the window and we display and add materials by using the ShapeDiverDisplayGeometry and ShapeDiverSimpleMaterial components.

With this definition, we can achieve all kind of window configurations and you can control them via ShapeDiver by using our ShapeDiverTextInput (recommended for small JSON objects) or ShapeDiverTextfileImport components. These components can be changed via our API which means you can add a user friendly User Interface and change the JSON object in the background of the web app.

Check out the final result of the window configurator. You can either select an example or edit your own JSON in the Text Input. The JSON object can be also downloaded for you to study.

Download this Example
You can download the Grasshopper definition of this case study here.