Filter by Property Value in my WebApp

[Alfredo]

Hi community!

My name is Alfredo and I have been using Speckle through the connectors for a while and I want to say thank you very much for providing such a nice platform!

After using the connectors and the online viewer for a while, I decided to start playing with the Viewer code so I am trying to develop my own web app using the viewer API.

Objective:

I have a simple objective: I want to colour code some items on my model based on a property value, this functionality is already performed by the Speckle Viewer but I am not sure how to implement it.

I have followed these steps:

• I have had a look at the online examples and documentation and I managed to fetch the object properties as a PropertyInfo array by using the getObjectProperties method.

• I go over the array and retrieve the elements that have a specific PropertyInfo, in my case is called userStrings.FABRICATED. (I retrieve them as PropertyInfo)

Issue:

The issue I am facing is that my property FABRICATED contains a string value and it may be ‘YES’ or ‘NO’. I don´t want to filter elements containing that property (which is what the code below does), but elements containing that property with the ‘NO’ value in it.

const properties = await viewer.getObjectProperties();

const data = properties.find((value) => {
        return value.key === 'userStrings.FABRICATED';
      }) as PropertyInfo;

const filteringState = filtering.setColorFilter(data);

My properties look like this:

Extra:

I have also found the following methods but I am not sure if they are what I am after:

Thank you very much for your support!

I am looking forward to hearing back from the community

Best,

Alfredo

[alex]

Hi @Alfredo

I’m always happy to see people developing their own apps using the viewer!

The current setColorFilter implementation doesn’t allow for much flexibility in the regard you are mentioning, however the filtering API itself offers alternatives that can get you where you want. You can use setUserObjectColor alongside isolateObjects to achieve what you are describing

I’ve made a live sandbox for you that exemplifies the approach above. I used the ‘speckle_type’ PropertyInfo since I don’t have access to your particular stream, but the concept is the same as with ‘userStrings.FABRICATED’

Alternatively you could use setMaterial with your own materials to do the same thing, since FilteringExtension is using that internally, however for simple filtering use cases with regular materials, using the FilteringExtension directly is usually more straightforward

Let us know if you need more help! We would love to see what you are working on, so feel free to showcase the application whenever you feel like it!

Cheers

[Alfredo]

Thanks Alex! The sandbox you shared has been super useful! I applied that same principle and it worked like a charm.

I will mark the answer as a solution but would like to ask you something else before closing the thread. Does the “setUserObjetColors” method allow for multiple filters in any way? (Sorry for the noob question). I am extracting two different arrays of ids but I would like to colour them differently, is this supported at the moment?

I am trying to implement multiple filters into our viewer so we can track different things and create reports from it (it is also a perfect excuse for me to finally start getting familiar with the Speckle API too! )

I am more than happy to share some images once I have it running with all the filters, we are using Speckle as the main coordination tool for a pavilion we are bringing to Burning Man this year and its proving to be the perfect tool to help us coordinating and tracking the progress with our overseas manufacturers .

Thanks again for your prompt response, I am looking forward to hearing back from you!

Best,

Alfredo

[alex]

Hi @Alfredo

Glad to hear you got it working.

I am extracting two different arrays of ids but I would like to colour them differently, is this supported at the moment?

Yes, it’s very much possible, as per the setUserObjectColors documentation, you can pass in any number of id arrays, each with it’s own color like so

filtering.setUserObjectColors([
    {
      objectIds: <sumIds>,
      color: '#ff0000',
    },
    {
      objectIds: <sumOtherIds>,
      color: '#0000ff',
    },
  ]);

I’ve also updated the live example to reflect this.

I am more than happy to share some images once I have it running with all the filters, we are using Speckle as the main coordination tool for a pavilion we are bringing to Burning Man this year and its proving to be the perfect tool to help us coordinating and tracking the progress with our overseas manufacturers .

Niiice! That sounds super exciting!

Let us know if you need more help!

Cheers

[Alfredo]

Thank you very much @alex ! Everything works perfectly