Super URLs
check out full sample | code diff
“We want to create a hyperlink that opens up a 3D model and zooms into a specific element.”
Can iModel.js do that?
I snapped out of my post-lunch slump as those words emerged through my headset. The outreach team was on a Skype call with an engineering company that was new to iModel.js. We were going through the initial discussion of understanding their requirements and development needs.
There was something riveting about this requirement; The idea that I could just upload an iModel, select an element and generate a shareable link that I can then drop-in at the end of a paragraph. A paragraph like this one. Eg. did you know that the Retail Building Sample has a designated area for a dairy cooler?
Pretty cool, right? So how do we do that…?
We make a Super URL!
Step 1) Pass data into the URL.
Step 2) Enhance your app to do something with it.
The first piece of info we need is the iModel to open. If you have worked with simple-viewer-app before, you are probably familiar with the humdrum task of changing the iModel and Project name in the config:
While this works in a development setting, it’s not reasonable for a deployed app. Users need the option to pick the iModel during runtime. URLs can help here.
To start with, we need a project and iModel name. I recently uploaded one using the registration dashboard:
Let’s see what this could look like.
This also makes switching to new iModels much easier!
Perfect! We can now use the URL to open a specific iModel. What’s next?
We need something to uniquely identify the elements to zoom into. Lucky for us, the simple-viewer-app conveniently logs the IDs of elements that are selected in the viewport.
Let’s select some letters as an example:
Using these IDs…I can construct this shareable link that hands the context over to you. Similarly, you can pass in any combination of information you need as URL parameters. Here are some more (dairy-free) examples:
- elementColor: change the color of selected elements (color pallette reference.)
- isolate: isolate selected elements.
- wireFrame: render iModel in wireframe mode.
- signIn: to use your own iModel.
In the last one above, make sure to pass in your project and iModel name. Else it freaks out.
Overall, these techniques can be an elegant way to integrate iModel.js into your web-apps. The shareable links can serve as powerful gateways into the world of infrastructure digital twins. Just remember to respect the 2000 character limit :)
-Roop, reporting live from the basement.
<- previous post | home | next post ->
