Rapid building of 3D machine Room equipment panel based on HTML5

With the real equipment as the model, the equipment panel is built, and the operating parameters of the equipment are obtained in real time, which is displayed on the equipment panel, which is more vivid and intuitive than the pure numerical equipment monitoring system. Today we are building the device panel on the HT for Web 3D technology.

The equipment we simulate today is the machine room equipment, first to witness the final effect: http://www.hightopo.com/demo/blog_3d_20150810/server.html

Let me explain the model, a cabinet with a transparent glass door, the cabinet is equipped with 5 devices, the door can be opened and shut, the equipment can be plugged, then I how to build such a device? The method is not difficult, we take one step at a step.

Let's start with the device, as follows:

It looks like a model, in fact, it is a box, and then put a picture on the front of the box, this way the shell of the device comes out, create the code as follows:

var node = CreateNode ([0, 0, 0], [475, 0]), NODE.S ({    ' front.image ': ' Panel ',    ' all.color ': ' #E6DEEC '}); Node.settooltip (' Double Click to pop the server ');

The way to set the front picture of the device is by setting the node's Front.image style properties, setting the Front.image property to ' Panel ' in the Code, and the ' panel ' attribute is already passed HT. The Default.setimage () method registers the alias of the picture, and in the code it also sets the color of each face of the box and the cue language when the mouse hovers.

In the code also called the CreateNode () method, the method does not do anything special, just the creation of 3D topology node of the code to encapsulate, to streamline the code, to avoid the same code repeated writing, the specific package is as follows:

/** * Create 3D topology node and add to Datamodel * @param p3 {Array} location information * @param s3 {Array} Length-width-height information * @returns {ht. node} 3D topology Nodes */function CreateNode (P3, S3) {    var node = new ht. Node ();    NODE.S ({        ' shape ': ' Rect '    });    NODE.P3 (p3);    NODE.S3 (S3);    Datamodel.add (node);    return node;}

The method creates a 3D topology node by passing in location information and size information, adds it to Datamodel , and returns the Node object.

just now we just created the device shell, on the device and part of the port is occupied, so the next thing we want to do is to fill the device port, carefully look at the next device port shape, found that the shape is irregular, So how does the device port populate? We just need to find a picture with the same port shape on the front of the box, and then put it on the device, the specific implementation is as follows:

/** * Creates a port node and is adsorbed onto the specified node * @param indexes {Array} port location information * @param host {ht.         Node} is adsorbed on the Nodes object */function createport (indexes, host) {var P3 = host.p3 (), s3 = Host.s3 (), x =-s3[0]/2,    y = 100/2 + p3[1], z = 1 + s3[2]/2; Indexes.foreach (function (index) {var port = new Ht.        Node ();        Port.setname (' Port ');        Port.s ({' front.image ': ' Port_green ', ' all.light ': true});        Port.sethost (host);        Port.setsize3d (28, 23, 10);            if (index% 2 = = = 0) {var col = (index-2)/2;            Port.setposition3d (x + 67.5 + col *, y-60.5, z);        Port.s ({' front.uv ': [0, 1, 0, 0, 1, 0, 1, 1]});            } else {var col = (index-1)/2;        Port.setposition3d (x + 67.5 + col *, y-26.5, z);    } datamodel.add (port); });}

A total of 20 ports on the device, we use the incoming port location information to determine the location of the created node, carefully observe the device port can be found that the second row of ports and the first row of the port direction is different, So when you create the second row of ports, you need to set the Front.uv property to control the map rollover, of course, the map is also registered in advance.

Well, to here our equipment model is built, then the next is to create a cabinet, the creation of the cabinet and the creation of the device shell basically similar, not the same place is, the cabinet has a door, the door has a function of opening and closing, because the topology node can not separate a side of the node to do rotation operation, So the door must be a separate topology node, let's look at the cabinet first:

Species, we decorated the door a little bit, the edge of the door with a blue welt, so that the door looks more textured, and ideas are there, the code will come out naturally, look at the following code, a little bit complex oh.

var h = n, w = 477, D = n, k = 20;//Create enclosure var main = CreateNode ([0, 0, 0], [w, H, d]); Main.s ({' All.color ': ' #403F ' Front.visible ': false});//create door var face = new ht.  Shape (), s = {' all.visible ': false, ' front.visible ': true};d Atamodel.add (face); Face.addpoint ({x:-W/2, Y:D/2- 1}); Face.addpoint ({x:w/2, Y:D/2-1}), Face.addpoint ({x:w + W/2, y:d/2-1}); face.setsegments ([1, 2, 1]); f Ace.settall (h); face.setthickness (1); Face.s (s); Face.sethost (main); Face.s ({' All.color ': ' Rgba (0, H, G, 0.7) ', ' all . Reverse.flip ': True, ' all.transparent ': true, ' 3d.movable ': false}); face.face = True;face.open = False;face.angl E =-math.pi * 0.6;face.settooltip (' Double Click to open the Door ');//Create door welt var up = CreateNode ([0, H/2-K/2, D/2] , [w, K, 1], False, false). s (s), down = CreateNode ([0,-H/2 + K/2, D/2], [w, K, 1], False, false). s (s), right = CreateNode ([w/2-K/2, 0, D/2], [k, H, 1], False, false). s (s), left = CreatenOde ([-w/2 + K/2, 0, D/2], [k, H, 1], False, false). s (s); Up.sethost (face);d own.sethost (face); . Sethost (face);

The logic of the code is this, first create a box as the enclosure, and then set the front face of the box to hide, and then create a polygon as a door, the gate is set to light blue translucent, and finally create 4 blue box affixed to the edge of the door as decoration, so a cabinet is completed.

The equipment model has, the cabinet has, the next job is to combine the two, the method is very simple, is to create equipment and the device to the cabinet, the specific code is as follows:

var num = 5,    start = 400;for (var i = 0; i < num; i++) {    var y = start-170 * I,        z = (d-30)/2;    var node = CreateNode ([0, y, 0], [W-2, d-30]);    NODE.S ({        ' front.image ': ' Panel ',        ' all.color ': ' #E6DEEC ',        ' all.reverse.cull ': true,        ' 3d.movable ' : false    });    Node.pop = false;    Node.settooltip (' Double Click to pop the server ');    Node.sethost (main);    CreatePort ([1, 2, 3, 4, 5, 6, 7, +, +, +], node);}

Remember the previous build device model and machine door code, we add the mouse hover of the two models of the prompt content, double-click can open the door, double-click can pull out the device, then we now to achieve these two effects, first we analyze the specific implementation of the program:

Where do you want to add the double-click event? Do you listen to each topology node? This is the most direct method, but to do so, how many nodes will have the corresponding processing function, and the same type of processing function is the same, then this will lead to the waste of system resources, so it is not advisable to double-click on each node, then how should we handle the double-click event? We can think of a different angle, all the nodes are added to the 3D topology component, then we can listen to the 3D topology component of the double-click event, and then through the event object to get to the corresponding node, and then by judging the node set on the custom identity properties to do the corresponding processing, the specific code is as follows:

Listen for the datadoubleclicked event of the 3D topology component g3d.ondatadoubleclicked = function (data, E, datainfo) {    //If the node is a gate    if (data.face ) {        //traverse all the nodes that are adsorbed under the enclosure        data.gethost (). Getattaches (). each (function (attach) {            ///If the node status is pop-up, call the functions restore node location            if (attach.pop) {                toggledata (attach);            }}        );    }    If the node is a port node, it triggers the double-click event of its adsorbed device,    else if (data.a (' Port ')) {        toggledata (Data.gethost ());        return;    }    Toggledata (data);};

Reading the above code, you will find that the implementation of the scheme is not the same as the scheme we mentioned, we can listen to the 3D topology component of the Datadoubleclicked event to directly obtain the double-clicked Node object, Instead of having to get the corresponding node object through the event object ourselves, we listen to the datadoubleclicked event.

In the code, we call the Toggledata () method to handle the double-click event, with the following code:

/** * Node double-click Processing function * @param data {ht.    Node} was double-clicked on */function toggledata (data) {var angle = data.angle, pop = Data.pop;        The currently double-clicked object is gate if (angle! = null) {if (anim) {anim.stop (true);        } var oldangle = Data.getrotation ();        if (data.open) {angle =-angle;        } Data.open =!data.open; Anim = ht.            Default.startanim ({action:function (t) {data.setrotation (oldangle + t * angle);    }        });        }//The object currently double-clicked is the device else if (pop! = null) {if (anim) {anim.stop (true);        } var p3 = Data.p3 (), s3 = Data.s3 (), dist = (pop?-s3[2]: s3[2])/2;        Data.pop =!data.pop; Anim = ht.            Default.startanim ({action:function (t) {data.p3 (p3[0], p3[1], p3[2] + t * dist);    }        }); }}

In the code, you confirm what to do with the different attribute values of the node preset, and if the node object is a gate, pass ht. The Default.startanim () method slowly modifies the rotation of the gate and slowly modifies the device's position if the node object is a device.

Here, today's demo of all the performance and function is completed, today's content has design to the node style application, I did not do in-depth explanation, follow-up will give you one by one, interested friends can pass the HT for Web style manual To learn more about the content.

Below is attached today's demo source and video.

I have uploaded today's demo to the official website, interested friends can click here to visit.

Http://www.hightopo.com/demo/blog_3d_20150810/server.html

Http://v.youku.com/v_show/id_XMTMwNTY2ODE0NA==.html

Rapid building of 3D machine Room equipment panel based on HTML5