

# Edit your scenes
<a name="scenes-editing"></a>

After you've created a scene, you can add entities, components, and configure augmented widgets into your scene. Use entity components and widgets to model your digital twin and provide functionality that matches your use case.

**Topics**
+ [Add models to your scenes](scenes-editing-add-models.md)
+ [Add model shader augmented UI widgets to your scene](scenes-editing-add-color-widget.md)
+ [Creating tags for your scenes](scenes-editing-add-tags.md)

# Add models to your scenes
<a name="scenes-editing-add-models"></a>

To add models to your scene, use the following procedure.

**Note**  
To add models in your scene, you must first upload the models to the AWS IoT TwinMaker Resource Library. For more information, see [Upload resources to the AWS IoT TwinMaker Resource Library](scenes-using-resource-library.md).

1. On the scene composer page, choose the plus (**\$1**) sign, and then choose **Add 3D model**.

1. On the **Add resource from resource library** window, choose the **CookieFactorMixer.glb** file, and then choose **Add**. Scene composer opens.

1. **Optional**: Choose the plus (**\$1**) sign, and then choose **Add light**.

1. Choose each light option to see how they affect the scene.  
![\[A scene canvas with the "Light type" and "Color" controls displayed for the selected cookie mixer.\]](http://docs.aws.amazon.com/iot-twinmaker/latest/guide/images/CookieMixerInScene.png)
**Note**  
Scenes have default ambient lighting. To avoid frame rate loss, consider limiting the number of additional lights placed in your scene.

# Add model shader augmented UI widgets to your scene
<a name="scenes-editing-add-color-widget"></a>

Model shader widgets can change the color of an object under conditions that you define. For example, you can create a color widget that changes the color of a cookie mixer in your scene based on the mixer's temperature data.

Use the following procedure to add model shader widgets to a selected object.

1. Select an object in the hierarchy that you want to add a widget to. Press the **\$1** button and then choose **Model Shader**. 

1. To add a new visual rule group, first follow the instructions below to create the ColorRule, then in the Inspector panel for the object of the Rule ID, choose **ColorRule**.

1. Select the entityID, ComponentName, and PropertyName you want to bind the model shader to.

## Create visual rules for your scenes
<a name="scenes-editing-add-visual-rules"></a>

You can use visual rule maps to specify the data driven conditions that change the visual appearance of an augmented UI widget, such as a tag or a model shader. There are sample rules provided, but you can also create your own. The following example shows a visual rule.

![\[Example visual rules with temperature based expressions that activate error, warning, and info icons.\]](http://docs.aws.amazon.com/iot-twinmaker/latest/guide/images/scene-topic-temp-sample-rule.png)


The image above shows a rule for when a previously defined data property with ID 'temperature' is checked against a certain value. For example, if the 'temperature' is greater than or equal to 40, the state will change the appearance of the tag to a red circle. The **target**, when chosen in the Grafana dashboard, populates a detail panel that is configured to use the same data source.

The following procedure shows you how to add a new visual rule group for the mesh colorization augmented UI layer.

1. Under the rules tab in the console, enter a name such as ColorRule in the text field and choose **Add New Rule Group**.  
![\[The "Rules" tab with the New Rule Map name entered above the "Add New Rule Group" button.\]](http://docs.aws.amazon.com/iot-twinmaker/latest/guide/images/scenes-new-vis-rule-create.png)

1. Define a new rule for your use case. For example, you can create one based on the data property 'temperature', where the reported value is less than 20. Use the following syntax for rule expressions: Less than is **<**, greater than is **>**, less than or equal is **<=**, greater than or equal is **>=**, and equal is **==**. (For more information, see the [Apache Commons JEXL syntax](https://commons.apache.org/proper/commons-jexl/reference/syntax.html).) 

1. Set the target to a color. To define a color, such as `#fcba03`, use hex values. (For more information about hex values, see [Hexadecimal](https://en.wikipedia.org/wiki/Hexadecimal).)

# Creating tags for your scenes
<a name="scenes-editing-add-tags"></a>

A tag is an annotation added to a specific `x,y,z` coordinate position of a scene. The tag uses an entity property to connect a scene part to the knowledge graph. You can use a tag to configure the behavior or visual appearance of an item in the scene, such as an alarm.

**Note**  
To add functionality to tags, you apply visual rules to them.

Use the following procedure to add tags to your scene.

1. Select an object in the hierarchy, choose the **\$1** button, and then choose **Add Tag**.

1. Name the tag. Then, to apply a visual rule, select a visual group Id.

1. In the dropdown lists, choose the EntityID, ComponentName, and PropertyName.

1. To populate the Data Path field, choose **Create DataFrameLabel**.