Hacking web-viewer: tips for data-backed storytelling

Ever been puzzled by wrapping your design data in a nice packaging and presenting to the stakeholders? Everyone in AEC industry knows how important it is to find the right approach to sharing your data and its interpretation, so the right message gets across.

There are multiple ways architectural concepts, designs and analytics are being presented through digital mediums: via sketches, illustrations, interactive models, flythrough videos and many more. What if we could take advantage of all these types of expression in one presentation?

This article is a guide for taking advantage of undocumented Speckle web-viewer functionalities and examples of their implementation. In order to follow this guide, minimum proficiency in Rhino, Grasshopper, Javascript and VueJS is necessary. By the end of the article we are going to assemble THIS presentation embeddable into your webpage:

Mock presentation of the Golden Nugget model accessible here.

Web interface for design exploration

We are going to look at some simple and useful hacks into a Speckle web-viewer which help to enrich your presentation: data layers, animations and camera views counter.

Speckle web-viewer at its current state has the most essential functions for exploring your model: you can rotate, zoom and pan the model, create sections and switch camera views. Viewer can be embedded into your webpage and visitors can explore the model independently.

Current Speckle web-viewer functionality

Data layers

Layers of the data can be understood as groups of objects with similar properties. In this example, we used Grasshopper interface to assign different properties to Speckle objects. The layers in the video below are the sunlight hours analysis from Ladybug Tools, and isovist analysis from DeCodingSpaces Toolbox.

For the frontend part, these properties need to be captured during object loading, unique values extracted, and later used to filter and change the visibility of relevant groups of objects.

Data layers - Grasshopper implementation 

Animations

Object properties can be extended further: instead of possessing only 1 property (in this case, in a text/string format), each object can also have a corresponding numerical property. For example, we want to show the drop shadows position at each hour of the day. The list of numerical values has to be assigned as the property of the corresponding list of Speckle objects.

The frontend can be implemented in several ways. You can create a slider that will filter the object by their numerical property, or you can simply set a timeout to switch objects one by one as an animation.

Animations - Grasshopper implementation 

Camera views counter

Last and the easiest hack is to add a simple counter to go through the list of Named Views and switch between them one by one. You can use the list of default views, or the views imported, for example, from Rhino. All of them are already loaded into the viewer, so you don't need to make any changes beyond a simple counter.

How do we assemble the actual presentation?

The best part comes to combining these features into a presentation, highlighting necessary data from the best angle, changing the views according to your narrative, and even showing the notes to each view. As you remember, the viewer can be embedded into a webpage, so the visitors can catch up with your story even without your presence.

In order to create a presentation similar to the one above, you would need to combine all of the tricks described earlier. To simplify the process and make an assembly file more lightweight, we created each object in a separate file (and some in a different software) and sent them to different branches of a Speckle stream.

Sending objects to different branches and receiving all of them in 1 Grasshopper file

We again used Grasshopper interface to assemble the presentation from the different branches. Here we first, received all the branches in one file (in a SpeckleObject format, without converting it to a heavy geometry). Second, we assigned properties to each object that will be treated as layers in the frontend. Third, we extracted the Named Views from the Rhino branch, and specified which layers, and, possibly, comments, should be displayed along with each view. Lastly, we combined these Speckle objects together and sent it to the main branch.

Assembling the presentation in Grasshopper interface

To conclude 🕺

The frontend code is not shared here because 1) it's in a messy draft stage and 2) it is not universal and fully customized to the specific model and its properties. Also, there are many more cool ways to utilize the web-viewer. This article is aimed to wake up your imagination and show first directions on how to start!

Join the conversation on the forum to share your ideas and use cases!