TWaver 3D is used in large data centers (continued) and twaver3d

TWaver 3D is used in large data centers (continued) and twaver3d

In February November 2014, we published an article about TWaver HTML5 3D application in large data centers. This blog details the implementation methods of some common functions, such: add cabinets, alarms, temperature, humidity, and other related functions dynamically. In fact, we can basically use TWaver HTML5 3D to implement related applications. However, some customers think This is not "dynamic" and it is generated by code, with less interaction, my colleague said a few days ago that he would not add more functions to make it more "dynamic, so today I took some time and went on to "continue"-dynamically add cabinets, hosts, and alarms.

1. dynamically Add a cabinet and enter the Cabinet ID:

The basic method is the same as that used by TWaver HTML5 3D to create a cabinet in a large data center (in fact, it is exactly the same. I only uploaded one cabinet id and position ):

Var loadRack = function (pos, type, isEmp, id) {var empRack = true; if (isEmp! = Undefined & isEmp! = Null) {empRack = isEmp;} var rackType = "s"; if (type! = Null & type! = Undefined) {rackType = type;} var addRack = function (element) {if (element & amp; pos) {element. setPosition (pos. clone (); element. rackType = rackType; element. setClient ('R _ id', ID); // adds an id to the created cabinet, you can find the corresponding cabinet if (rackType = 'emptyack') {element based on this id. setClient ('bycustom', true);} if (! EmpRack) {element. loaded = true; window. setTimeout (function () {showChart (element) ;}, 500) ;}}; var = '. /emptyRack. json '; mono. toolkits. loadTemplateUrl (network. getDataBox (), rack, null, null, addRack );}

As the cabinets also want to be dynamic, place them wherever you want. To achieve this function, I will first handle it like this. After clicking "add, A listener is added to the network. When you click it, you can obtain the position at the point of the mouse and use this position as the location where you want to place the Cabinet (this mainly means that, you can also use dblclick or get a button or something to manage this function ):

Var addRack = function (e) {network. getRootView (). removeEventListener ('click', addRack); // After the listener is executed, remove var objects = network. getElementsByMouseEvent (e); if (objects. length) {var first = objects [0]; var object3d = first. element; var point = first. point; var rack_id = txtRack. value; var position = new mono. vec3 (point. x, Size. rack_y, point. z); // 5710,0, 2546 loadRack (position, 'emptyack', true, rack_id) ;}// when creating: if (type = 'rack') {network. getRootView (). addEventListener ('click', addRack); // var position = new mono. vec3 (point. x, Size. rack_y, point. y); // 5710,0, 2546 // loadRack (position, 'emptyack', true, rack_id );}

:

2. Add a vswitch dynamically. Based on the vroid id and the vro location, add a vswitch dynamically (the vswitch is selected here because there are many ports in the vswitch, and alarms can be sent directly from the vswitch port, mainly because the vswitch is representative ):
The following is the 20u location in the Cabinet (Cabinet ID is "rid") created above (step 1) (I don't know if the conversion is wrong, huh, huh). A switch is added:

The Code is as follows:

Var createRouter = function (rack_id, host_id, y) {var addHost = function (element) {if (element) {var rack = findFromClient ('R _ id', rack_id ); // locate the cabinet if (! Rack) return; rack. addChild (element); // Add the new host to the cabinet if (host_id) {element. setClient ('id', host_id); // set the oid of the newly added switch (that is, a tag is attached to it) to facilitate searching} element. setPositionX (0); element. setPositionY (y); // location of the host in the cabinet element. setPositionZ (0) ;}} mono. toolkits. loadTemplateUrl (network. getDataBox (),". /ciscoroter. json ", null, null, addHost );}

3. Add an alarm dynamically. You can add an alarm to the specified port in the router, for example:

The addition method is similar to the previous one. The following is a simple improvement:

Var createAlarm = function (alarmid, rid, soid, poid, st) {var rack = findFromClient ('R _ id', rid); var alarm; var s; if (rack) {s = findOidfromChildren (rack, soid);} else {// when the Router is not placed in the cabinet, find s = findFromClient ('H _ id', soid) separately ); if (! S) {s = findFromClient ('id', soid) ;}} if (s) {var p = findOidfromChildren (s, poid); if (p) {alarm = new mono. alarm (alarmid, p. getId (), st);} else {alarm = new mono. alarm (alarmid, s. getId (), st) ;}} else if (rack) {alarm = new mono. alarm (alarmid, rack. getId (), st);} if (alarm) {network. getDataBox (). getAlarmBox (). add (alarm) ;}}var addAlarm = function (rack_id, host_id, port_id, severity_id) {var severities = mono. alarmSeverity. severities; var severity = severities. get (severity_id); createAlarm ('C', rack_id, host_id, port_id, severity );}

Add something to the router and cabinet: