1. Bind events and add conditions

Register multiple callbacks for the same event

3. Tag

4. Set the event priority

5. Register single events

Events do not execute on their own; they need to be fired (that is, the event is fired before it can be executed). Look at the heart of any JavaScript code and you’ll see that it’s events that hold everything together. Below I’ve learned some common ways to visualize events in digital twin scenarios.

1. Bind events and add conditions

Event adds a condition that click will only fire on a digital twin visual object that matches that condition, either an existing Thing or a new Thing created later.

app.on("click", ".Thing", function(ev) {
 console.log("you click " + ev.object.id);
});
obj.on("click", ".Marker", function(ev) {
 console.log(ev.object.name);
});
Copy the code

In the example above, when there is a Marker in the offspring of the digital twin visual object, it is triggered when it is clicked. Bind the Marker object globally, and the newly created Marker in obj’s descendant responds to this event.

Register multiple callbacks for the same event

Imagine having one module that changes the color of a digital twin visual object when it clicks, and another module that needs to enlarge the object when it clicks. Two modules are written by different people, so how do you register events?

// event1: obj.on("click", function(ev) {ev.object.style.color = "#FF0000"; }); On ("click", function(ev) {ev.object.scale = [2, 2, 2]; }); // unmount all obj click events obj.off("click");Copy the code

Both of these events are triggered when OBJ is clicked. But when you unload an event using off(), both events are unloaded at the same time. Therefore, I prefer to use [tag].

3. Tag

If you cancel or pause an event, be aware of the original callback function, which can be troublesome most of the time. Tag each event in the digital twin visualizations. When deleting or suspending an event, use the tag to specify the callback you want to operate on.

Obj. On ("click",function(ev) {ev.object.style.color = "#FF0000"; }, "module 1"); On ("click",function(ev) {ev.object.scale = [2, 2, 2]; }, "module 2"); Obj. Off ("click",null," module 1");Copy the code

4. Set the event priority

If you want to ensure that the events in module 2 are triggered before those in module 1, you need to add a parameter priority. The default priority for common events is 50.

// module 1: obj.on("click",function(ev) {ev.object.style.color = "#FF0000"; }, "module 1"); // module 2: obj.on("click",function(ev) {ev.object.scale = [2, 2, 2]; 2 "}, "module, 51);Copy the code

5. Register single events

In the digital twin visualization scenario, if an event needs to be executed only once and needs to be unloaded, you can use the interface one instead of on, which has the same parameters as ON.

The ability to provide Priority:

// Register an EnterLevel event for each floor Namely every Floor to enter for the first time in response to the app. One (THING. EventType. EnterLevel, 'Floor', function (ev) {the console. The log (ev) object) id); Var floor = app.query('.floor ')[0]; var floor = app.query('.floor ')[0]; floor.one(THING.EventType.EnterLevel, function (ev) { console.log(ev.object.id); })Copy the code

— — — — — — — — –

Digital Twin Visualization: Thingjs.com/