Hi @all,
we are currently investigating the Speckle Viewer and are doing great so far.
However we miss a imporant feature:
Coloring objects while keeping other objects visible
Currently we only can either show not colored objects as ghost objects or dont show them at all.
Is there a way we can keep the surrounding objects (without ghosting) while coloring at the same time?
That would be great.
As far as I digged the code I haven’t found a way to do this.
Thanks in advance! 
Lukas
I don’t know whether if this is what you are asking for or not, filters in the latest.speckle.dev colors elements by their properties.
Hi @gokermu
no, thats not what i meant. This screenshot you’ve shown is from speckle directly (for example via .xyz) but we are integrating the speckle viewer itself (link to github) in a react/typescript application. @speckle/viewer - npm (npmjs.com)
From there we are loading an speckle stream which then renders via the provided viewer from speckle but in our own application. We only want to highlight some specific ids while keeping the other meshes intact.
Unsure whether the default filter api allows for this. I think we’ll need to add an “leave others as they are” option in the colour by functionality, unless you can get away with using the default color (which you can specify, see docs snippet below!).
Category (for coloring each unique value differently): `{ 'type': 'category', 'property': propertyName, 'values': { value1: color1, value2: color2, ... }, 'default': colorForAnyOtherValue }`
@cristi knows the ins and outs better than me here 
Hi @lklepper ,
Can you post API calls examples? I’m trying to understand what you are coloring by and how do you get the ghosted / not ghosted behavior.
Currently, when coloring by a “category”, all objects are colored based on custom colors provided or by a hash of their value by default.
When coloring with a gradient on fields of number types, objects that don’t have that property are “ghosted” out indeed.
Do you need an option to use gradient colors on numeric fields, and the objects that don’t have that property to keep their existing material (can be any color)? Or Would you like to set a default material color for all objects that don’t have the property?
Hi @cristi ,
async colorById(ids: Array<string>, color: string) {
await this.viewer.applyFilter({filterBy: {'applicationId': ids}, colorBy: {property: 'applicationId', type: 'category', default: color}, ghostOthers: false });
}
With the last boolean we are setting the “ghosting” value. When its false the surrounding objects are invisible. When set to true the surrounding objects are ghosted as seen in my screenshot above.
I would like to color specific objects (from application id) with a specific color. Other objects should not be affected and should stay the same material / color.
Hi,
Unfortunately this is not currently supported, but it’s indeed a very good use-case of the coloring and will look into supporting this.
I created a ticket to allow for default: null to mean pass-through the original material.
This will allow you to specify colors for your ids like the current functionality (either the same color or different colors), but also specify default: null to pass-through the materials for the rest of the objects
So this is the closest you can get to the future functionality:
let color = 'red'
let colorMapping = Object.assign({}, ...ids.map(x => ({[x]: color})))
await this.viewer.applyFilter({colorBy: {property: 'applicationId', type: 'category', values: colorMapping, default: 'white'}})
And after the ticket is resolved, you can change default to null to pass-through other materials as they are
This has been implemented as described above. (fixed in main branch in the repo, but hasn’t been released as a new viewer npm package)
Wow, that was rather quick. looking forward to the next release. ty for the help
