We’ve recently released Viewer API 2 for the Speckle Viewer, offering more flexibility and control to the community. If you haven’t explored it, check out the documentation.
We are reaching out to you to help create a high-level tutorial demonstrating how the Speckle Viewer can be used across various front-end frameworks. While our Speckle web application is based on Vue/Nuxt, many of you use different frameworks for your projects. We want to learn from and share your experiences with the broader community. There are many variations, even within the same framework, and we’re keen to hear about your innovative approaches.
Here’s how you can contribute:
Share Your Examples: If you’ve integrated the Speckle Viewer into a front-end framework, we’d love to see your examples. Whether it’s React, Angular, Svelte, or something else, your work will help others see what’s possible.
Describe Your Integration Approach: How did you integrate the Speckle Viewer? What worked well for you? Were there any challenges, and how did you overcome them?
Community Tips and Insights: Any tips or insights from your experience? Share anything that might help others, even if it’s just a small trick or a lesson learned.
Supporting the open-source community isn’t just about code submissions to server and connectors. Sharing your knowledge, experiences, and unique approaches is just as vital. We aim to create a comprehensive “Viewer-in-Frameworks 101” tutorial that will benefit the entire community, and your input is crucial to achieving that.
Please share any code snippets, screenshots, or videos that illustrate your approach. The more information we gather, the better our tutorial will be. Of course, we will credit all contributors.
Thank you for your support. We look forward to seeing how you’ve used the Speckle Viewer to bring your projects to life.
I’m just finishing up our app upgrade to API 2. The app integrates IoT data and analytics with data in the model. Future iterations will add more interactions and simulations with the models. Everything is working well so far! With the new updates, I find it easier to manage the interactions between the rest of the app and the viewer. The update process was straightforward, which is really good!
We used the new Speckle Viewer API during a recent AEC Hackathon in the open detail platform. We used React and you can see the code here.
Haven’t managed to get it working with functional components which causes some limitations in using hooks etc. but maybe just need to try harder. We extended a class component and passed the relevant properties in. Using the in-built extensions was quite straightforward.
The example I’ve linked to also includes ghosting which has some specific needs such as selecting the first item in the hit chain of the selection event. Comments included in the code!
Hey @Ricardo_Zepeda ! Thanks for sharing this; it looks super interesting! Is the primary focus residential buildings? Do you have any plans for office/workspaces? I look forward to see the future iterations!
Is it possible to share with us what your frontend framework is that you are using? Thank you!
Hi Nikos, thanks for your comment. We operate a 1:1 prototyping and testing park where local companies can install prefabricated buildings. The purpose is to measure different aspects of the construction and on-site setup process. After installation, we analyze how the buildings behave in terms of comfort, energy and water usage. We also check how performance improves when combined with other systems, such as green roofs and similar features.
for the frontend we are using sveltkit for this one sadly since is an internal project i cant shre the code.
Example
I’ve used the Speckle Viewer API to build a data driven options explorer app. This is to allow us to quickly use a parallel graph to find the best fit for our engineering studies in building sciences.
Integration Approach
Data is stored in multiple speckle commits, the app pulls all of it into one place during the data selection / filtering process.
The results is then able to be investigated further using a custom built Viewer showing 2 different models, with the camera positions / filteringID’s and movements being synchronised between the two. The data is then presented in comparison graphs.
The app is built with React and Typescript.
Community Tips and Insights
Lessons Learnt 1.0 - Synchronising viewer information was the most challenging part of this piece, as tehre were a lot of quirks with the viewer itself that I had to account for. e.g. waiting for the mousemovements before updating the other viewer vs not waiting too long for the experience to not be instantaenous and potential conflicts of inputs between the two viewers.
Lessons Learnt 2.0 - Having a defined schema beforehand would definitely help with the graphing of information down the line. We needed to define this early and be able to account for potential changes in data structure to accurately display the graphs. As well as considering how many nested layers of information there is.
