@shapediver/viewer.features.attribute-visualization 2.2.5 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,10 +1,68 @@
|
|
|
1
1
|
# `@shapediver/viewer.features.attribute-visualization`
|
|
2
2
|
|
|
3
|
-
This is the npm package for the ShapeDiver Viewer attribute visualization features.
|
|
3
|
+
This is the npm package for the ShapeDiver Viewer attribute visualization features. Please have a look at our [help desk section](https://help.shapediver.com/doc/attribute-visualization) for this feature.
|
|
4
4
|
|
|
5
5
|
For more information on ShapeDiver, please visit our [homepage](https://shapediver.com/). If you need help, have a look at our [help desk](https://help.shapediver.com/doc/Viewer.1836580882.html).
|
|
6
6
|
|
|
7
|
+
This feature is already implemented on our [Platform](https://shapediver.com/app). Just go to any model with attribute and click on the attributes tab.
|
|
8
|
+
|
|
7
9
|
## Installation
|
|
8
10
|
```
|
|
9
11
|
npm install --save @shapediver/viewer.features.attribute-visualization
|
|
10
|
-
```
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
As this is an additional package to the `@shapediver/viewer` package, we omit the initial setup. Please have a look [here](https://viewer.shapediver.com/v3/latest/api/index.html).
|
|
17
|
+
|
|
18
|
+
### AttributeVisualizationEngine
|
|
19
|
+
|
|
20
|
+
After creating a [Viewport](https://viewer.shapediver.com/v3/latest/api/interfaces/IViewportApi.html) and a [Session](https://viewer.shapediver.com/v3/latest/api/interfaces/ISessionApi.html), you can create an [AttributeVisualizationEngine](https://viewer.shapediver.com/v3/latest/api/features/attribute-visualization/index.html), which is the central hub for all attribute visualization related behavior. Additionally, you have to switch the viewport mode to visualize the attributes. You can switch forth and back to see the normal rendering again. This can easily done with the code below.
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import { RENDERER_TYPE } from "@shapediver/viewer";
|
|
24
|
+
import { AttributeVisualizationEngine } from "@shapediver/viewer.features.attribute-visualization";
|
|
25
|
+
|
|
26
|
+
// switch the viewport rendering typoe
|
|
27
|
+
viewport.type = RENDERER_TYPE.ATTRIBUTES;
|
|
28
|
+
|
|
29
|
+
// create the AttributeVisualizationEngine
|
|
30
|
+
const attributeVisualizationEngine = new AttributeVisualizationEngine(viewport);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Once an [AttributeVisualizationEngine](https://viewer.shapediver.com/v3/latest/api/features/attribute-visualization/index.html) has been created, Layers and Attributes can be visualized. Please see the following sections for the description of these features.
|
|
34
|
+
|
|
35
|
+
### Layers
|
|
36
|
+
|
|
37
|
+
Layers are a special kind of attributes. They are internally stored exactly the same as all other attributes, but get a special treatment for visualization purposes. In the example below you can see how the opacity and color of layers are change via their name.
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
// change the opacity
|
|
41
|
+
attributeVisualizationEngine.layers["pinky"].opacity = 0.5;
|
|
42
|
+
|
|
43
|
+
// change the color
|
|
44
|
+
attributeVisualizationEngine.layers["brain"].color = "#ff0000";
|
|
45
|
+
|
|
46
|
+
// apply the changes
|
|
47
|
+
attributeVisualizationEngine.updateLayers(attributeVisualizationEngine.layers);
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Attributes
|
|
51
|
+
|
|
52
|
+
Attributes can have different types, therefore the visualization is not always the same. In the code example below we show the code for visualizing a string attribute. You can also visualize multiple attributes at the same time by adding them to the array. If however an object contains multiple attributes that should be visualized, only the first one will be.
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { SDTF_TYPEHINT } from "@shapediver/viewer";
|
|
56
|
+
import { IStringAttribute, ATTRIBUTE_VISUALIZATION } from "@shapediver/viewer.features.attribute-visualization";
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
attributeVisualizationEngine.updateAttributes([
|
|
60
|
+
<IStringAttribute>{
|
|
61
|
+
key: "x+y, string",
|
|
62
|
+
type: SDTF_TYPEHINT.STRING,
|
|
63
|
+
visualization: ATTRIBUTE_VISUALIZATION.GREEN_WHITE_RED
|
|
64
|
+
}
|
|
65
|
+
]);
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Please make sure to visit our [help desk](https://help.shapediver.com/doc/attribute-visualization#AttributeVisualization-CodeSandBoxes) where there are many more examples linked.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shapediver/viewer.features.attribute-visualization",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Michael Oppitz <michael@shapediver.com>",
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
"testEnvironment": "node"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@shapediver/viewer": "2.
|
|
45
|
-
"@shapediver/viewer.shared.services": "2.
|
|
46
|
-
"@shapediver/viewer.shared.types": "2.
|
|
44
|
+
"@shapediver/viewer": "2.3.0",
|
|
45
|
+
"@shapediver/viewer.shared.services": "2.3.0",
|
|
46
|
+
"@shapediver/viewer.shared.types": "2.3.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"detect-it": "4.0.1",
|
|
50
50
|
"gl-matrix": "3.3.0",
|
|
51
51
|
"tsyringe": "^4.5.0"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "a5bc9fe97968c7f746ad4ba736fcfedd4fb9f616"
|
|
54
54
|
}
|