Get dynamic member names | Javascript SDK Viewer

Help
1

Hi, speckle is amazing! Keep it up.
I am trying to get my dynamic member names from the javascript viewer. I saw that it’s quite easy with the python sdk but how do I do it with the javascript SDK? Any hints?

2

Hi @VinzenzTrimborn, it should be easy to get the object properties from the viewer. On selection, we emit an event that contains the object’s information. You can listen to it by doing something like

yourViewerInstance.on('object-clicked', (args) => { /* do something */ })

The args are basically a viewer selection event, which looks like this:

export type SelectionEvent = {
  multiple: boolean
  hits: Array<{
    guid?: string
    object: Record<string, unknown>
    point: Vector3
  }>
}

The first hit is your selected object :slight_smile:

I’m making a lot of assumptions on your setup - hopefully this sets you in the right direction, otherwise let us know more details on what you’re trying to do!

3

Hi @dimitrie. An answer from the speckle team in under 30m, that’s amazing!

So a little bit more background:
I read this tutorial Create Revit Schedules on Web | SpecklePy🐍 Tutorial and wanted to do something similar in combination with the javascript viewer. So basically I want to give the user the option to select the category “Rooms” (in one of those selection fields which show me all my dynamic member names) and then I will just display the rooms in the viewer.

The idea behind this is that I want to build a more specialized viewer. So for example, I select all the @Walls as Category, I show them in the viewer and next to it, I show some graphs with special info about the walls etc. maybe even from different sources.

So I do not want that the user has to select all the walls in the viewer but just want to show a selection field with all the different member names next to the viewer.

4

I see, i think then you’re better off with walking through the tree, and basically doing something like

const dataTree = viewer.getDataTree()
const objects = dataTree.findAll((guid, obj) => {
	return obj.speckle_type === 'Objects.BuiltElements.Wall:Objects.BuiltElements.Revit.RevitWall'
})

To match that with a display in the viewer for just the walls, you’d need to use the filtering manager. Off the top of my head, it would be something like:

const ids = objects.map(o => o.id)

viewer.isolateObjects(ids)

You can of course go through the whole objects array that now contains your walls and do whatever stats/etc. you wanna do!

Your app will probably need some syntactic/display sugar to match the Wall to Objects.BuiltElements.Wall:Objects.BuiltElements.Revit.RevitWall, or other categories. Also note, you can do more crazy things in the predicate of dataTree.findAll, such as filtering through multiple object types, etc.

Full docs here:

PS: Now i realise you wanted the rooms instead of walls :smiley: you get it tough!
PPS: We should turn this in a mini tutorial at one point!

1 Like
5

Yes that’s exactly what I needed. Thank you.

6

Good call.

@VinzenzTrimborn I’ll catch up with you later to see how you are getting along. It sounds an interesting project.

7

Yeah sure. I am working at a German architecture studio as an intrapreneur. They are working with Autodesk and draw in 3D (which is not normal in Germany, a lot of architects only draw 2D). I hope that with the infrastructure of speckle I can find some custom automation solutions. I will let you know if we find something exciting.

1 Like