Challenge: Override Color by Category

Summary

By completing this you will learn how to:

• Clone, install, and run a basic desktop viewer app.
• Modify the application with custom behavior.
• Write code that overrides the color of elements in the view.
• For the bonus, write your own ECSQL query
• For the bonus, send a message to the user

Setup

1. Install the required tools

2. Clone the repo from github

3. npm install

4. npm start

5. The app should run and display a small model of a plant.

Note: The app will be built automatically in step 3, and will be automatically updated anytime you make code changes. There is no need to stop and restart the app manually when making code changes.

Goals

Goal Add code to the skeleton app such that whenever the user selects an element, the app will override the color of that element and also every element that shares the same category as that element.

Bonus goal is to further extend the app so that a message is displayed to the user telling him the name of the category of the selected element.

Solution

The best way to learn is by doing! But, if you want to skip ahead you can go right to the full solution.

Instructions

1. Find the method ColorByCategoryListener.overrideElementColors.

2. Implement the method. Use the Emphasize Elements sample as a starting point.

   If you need help try these hints.

Hint 1

The method you need to call is EmphasizeElements.overrideElements

Hint 2

You need a Viewport. You can use static methods on IModelApp to get the viewport with which the user is currently interacting.

Hint 3

The viewport you need is IModelApp.viewManager.selectedView

Hint 4

To get the color value, you need to call ColorByCategoryListener.getNextColor

Hint 5

private overrideElementColors(ids: Id64String[]) {
const vp = IModelApp.viewManager.selectedView;

if (undefined === vp)
    return;

const emph = EmphasizeElements.getOrCreate(vp);
emph.overrideElements(ids, vp, this.getNextColor());
}

Instructions for bonus goal

1. Find the method ColorByCategoryListener.showMessageForCategoryOfSelectedElement.

2. To complete the bonus, you need to implement both this method and the one above it to find the category name.

3. To show the message, use MessageManager.outputMessage as described here. The message type OutputMessageType.Toast works nicely for this case.

   If you get stuck this hint will help.

const categoryName = "Placeholder";
MessageManager.outputMessage(new ReactNotifyMessageDetails(OutputMessagePriority.Info,
    "Category = " + categoryName, "", OutputMessageType.Toast));

1. To query for the category name, look at the other query method in the same file. Getting the category name requires a join between two tables bis.SpatialCategory and bis.GeometricElement3d.

   Try these hints if you get stuck.

Hint 1

Use the property Category.Id on GeometricElement3d.

Hint 2

You need to join the two tables ON the condition that the ecinstanceid of the category is equal to the category.id of the geometric element.

Hint 3

You need to limit the results with a WHERE clause so you consider only the geometric element with the specified inputId.

Hint 4

Use this query:

const query = `SELECT cat.codeValue categoryName
    FROM bis.SpatialCategory cat
    JOIN bis.geometricElement3d selected ON cat.ecinstanceid = selected.category.id
    WHERE selected.ecinstanceid = ` + inputId;

Conclusion

So, were you up to the challenge? Check out how we solved it by viewing our full solution. Let us know if you have a better way.

Feedback is welcome! Let us know via the iModel.js community.