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.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:

/**/function  createnode (P3, S3    ) {varnew  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} is an object that is being adsorbed*/functionCreatePort (indexes, host) {varP3 =host.p3 (), S3=host.s3 (), X=-s3[0]/2, y= 100/2 + p3[1], Z= 1 + s3[2]/2; Indexes.foreach (function(index) {varPort =Newht.        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) {            varCol = (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 {            varCol = (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.

varH = +, W = 477, D = +, K = 20;//Creating Enclosuresvarmain = CreateNode ([0, 0, 0], [w, H, d]); MAIN.S ({' All.color ': ' #403F46 ',    ' Front.visible ':false});//Creating Doorsvarface =Newht. 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 ');//creating a door's weltvarup = 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), 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:

varnum = 5, start= 400; for(vari = 0; i < num; i++) {    vary = start-170 *I, Z= (d-30)/2; varnode = 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, 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 the Datadoubleclicked event of a 3D topology componentg3d.ondatadoubleclicked =function(data, E, datainfo) {//If the node is a door    if(data.face) {//traverse all nodes that are adsorbed under the cabinetData.gethost (). Getattaches (). each (function(attach) {//Call function to restore node location if node status is popup            if(Attach.pop) {toggledata (attach);    }        }); }    //If the node is a port node, the double-click event that triggers the device to which it is adsorbed    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 specific processing code:

/** * Node double-click Processing function * @param data {ht. Node} was double-clicked*/functionToggledata (data) {varAngle =Data.angle, Pop=Data.pop; //the currently double-clicked object is the door    if(Angle! =NULL) {        if(anim) {anim.stop (true); }        varOldangle =data.getrotation (); if(data.open) {angle= -angle; } Data.open= !Data.open; Anim=ht. Default.startanim ({action:function(t) {data.setrotation (Oldangle+ T *angle);    }        }); }    //the currently double-clicked object is a device    Else if(Pop! =NULL) {        if(anim) {anim.stop (true); }        varP3 =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.

Demo Source

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

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