Quickly build a device panel based on HT for WEB 3D Technology

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:

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.setto Oltip (' Double Click to pop the server’);

The method of setting the front picture of the device is implemented by setting the node's Front.image style property, which sets the Front.image property to ’panel&rsquo in the code, and ’panel ’ properties are already through 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 shell of the device, 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 device's port shape, found that the shape is irregular, then the device port how to fill it? 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:

/** *  Create a Port node and snap to the specified node  *  @param  indexes {array}  Port location information  *  @param  host {ht. node}  the Adsorbed Node 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 * 32, 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 * 32 ,  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 = 1000, w = 477, d = 400, k = 20;//  Create cabinet Var main = createnode ([0, 0, 0], [w, h, d]); MAIN.S ({      ' All.color '  :  ' #403F46 ',     ' 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]); Face.settall (h); face.setthickness (1); Face.s (s); Face.sethost (main); FACE.S ({     ' all.color '  :  ' Rgba (0, 40, 60,  0.7) ',     ' all.reverse.flip '  : true,     ' All.transparent '  : true,     ' 3d.movable '  : false}); face.face =  true;face.open = false;face.angle = -math.pi * 0.6;face.settooltip (' Double  click to open the door ');//  create the door's 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;d own.sethost (face), left.sethost (face), right.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,&NBSP;100,&NBSP;D&NBSP;-&NBSP;30]); &NBSP;&NBSP;&NBSP;&NBSP;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, 13, 16, 17, 20], 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:

  Monitoring datadoubleclicked Event g3d.ondatadoubleclicked = function (data, e, datainfo) for 3D topology components  {    //  If the node is Gate     if  (data.face)  {         //  Traverse all the nodes that are adsorbed under the cabinet          Data.gethost (). Getattaches (). each (function (attach)  {             //  If the node status is popped, call the function restore node location              if  (Attach.pop)  {                 toggledata (Attach);             }        });    }     //  If the node is a port node, the double-click event     else if  (DATA.A (' Port ')) of the device to which it is adsorbed is triggered  {       &Nbsp; 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 will be able to directly obtain the double-clicked node object, without our own through the event object to obtain the corresponding node object, Of course, listen to the datadoubleclicked event.

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

/** *  node Double-click handler function  *  @param  data {ht. node}  the node  */function toggledata (data) that was double-clicked  {    var angle =  data.angle,        pop = data.pop;     //  the object currently double-clicked is Door     if  (angle != null)  {         if  (Anim)  {             anim.stop (True);        }         var oldangle = data.getrotation ();         if  (Data.open)  {             angle = -angle;        }         data.open = !data.open;     &Nbsp;  anim = ht. Default.startanim ({            action :  Function (t)  {                 data.setrotation (Oldangle + t * angle);             }        });     }     //  the currently double-clicked object is device     else if  (pop != null)  {        if  (Anim)  {             anim.stop (true);         }         VAR P3 = DATA.P3 (),             S3 = DATA.S3 (),      &Nbsp;      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, the follow-up will give you one by one, interested friends can through the HT for Web style manual to learn more content.

Below is attached today's demo source and video.

Demo Source

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

Quickly build a device panel based on HT for WEB 3D Technology