1. Choose objects

2. Detect selection set changes through properties and methods

3. Detect selection set changes through events

Once the digital twin visualizations are built, how should they interact? One of the most critical is how to achieve the selection of objects. For example, a mouse click determines whether a model or part of a model is selected. Hovering over an object in the digital twin visualizations does not mean that the object has been selected, but that it has to be clicked.

1. Choose objects

Selection of objects in a digital twin visual scene can be achieved through the Selection module, which is implemented through the interface of app.Selection. A Selection set is an ordered collection of DOM elements encapsulated in an abstract Selection. In general, the initial selection set instance is obtained by calling the selection set method on the global number twin visual object. You can then call the native methods on the Selection instance to create a subset of it.

See below:

// Add the object to the selection set app.selection. Select (obj); // Check whether the object is in the selection set app.selection. Has (obj); // Remove the object from the selection set app.selection. Deselect (obj); // Clear the selection set app.selection.clear();Copy the code

2. Detect selection set changes through properties and methods

Selection set changes can be detected through platform-provided properties and methods. Selection retrieves the Selection set changes by providing the isChanged method, and retrieves the current Selection set and the Selection set before the change through objects and previousObjects.

If (app.selection.ischanged ()) {// Get which objects are currently selected console.log(app.selection.objects); / / when isChanged, have those objects is selected before the console. The log (app. Selection. PreviousObjects); }Copy the code

3. Detect selection set changes through events

You can also detect selection set changes through events, and use Select and Deselect events to precisely control the response of a digital twin visual object to selection, as shown in the following example:

App.on (thing.eventType. Select, '.thing ', function (ev) {ev.object. Style. Color = "#ff0000"; }); App. On (THING. EventType. Deselect, 'THING', function (ev) {/ / objects from choosing concentrated delete, clear color ev. The object. The style, color = null; });Copy the code

You can also notify the digital twin visual object selection collection of updates through the SelectionChange event.

app.on(THING.EventType.SelectionChange, function (ev) {
 console.log(ev.previousObjects+" "+ev.objects);
});
Copy the code

My implementation scheme is the color differentiation method: when the mouse is pressed, the object is redrawn as red to change the color of the selected object; Cancel object color change when selected.

The specific code is as follows:

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); App.on ('load', function () {var obj = app.query('car01')[0]; Thing.widget. Button(' select object ', function () {// select object app.selection. }); Thing.widget.button (' unselected object ', function () {// Unselected object app.selection. }); }); App.on (thing.eventType. Select, '.thing ', function (ev) {ev.object. Style. Color = "#ff0000"; }); App. On (THING. EventType. Deselect, 'THING', function (ev) {/ / cancel the object selected, color cancel changes ev. The object. The style, color = null; });Copy the code

— — — — — — — — –

Digital Twin visualization: www.thingjs.com/