In the previous post, I’ve demonstrated how to create a low-code interface with ShapeDiver, Grasshopper and RoomSurveyor. This post demonstrates a simple JavaScript interface to streamline the workflow for the user, overcoming the ShapeDiver’s current interaction limitations, namely allowing the user to draw on the canvas and interactive value collection and validation. It is worth mentioning that ShapeDiver developers have promised support for canvas drawing soon, yet interactive validation limitations might persist.

In the interface bellow you can draw any polygon that represents the space or morphology you might want to survey. The application validates the polygon (if it is not self-intersecting and is CCW oriented) and request lengths of all sides sequentially, validating the user input. This ensures the right information is feed to the RoomSurvey inputs. In the end you can download a JSON file that might be used on an online configurator (like this) to finish the triangulation process with the RoomSurveyor plugin. This download step may be removed altogether by sending the JSON file directly to the configurator using the ShapeDiver API.

This is an example application and it currently only works with mouse and keyboard inputs. I’ll try to improve this overtime to correctly support touch devices with no keyboard.

RS Draw and Measure


Draw the plan of your space. Click on the canvas to create the corners. Hit Enter to finish! The polygon is automatically closed! Hit Backspace to delete the shape. Hit Arrow Left to Undo.


The source code for the app is available on GitHub.


Leave a Reply

Your email address will not be published. Required fields are marked *

5 + two =


@