3D tunnel based on HTML5 combined with Internet +

Objective

At present, material procurement and manpower cost are two major bottlenecks in the development of tunnel industry. such as relying on private borrowing, financing costs are high, procurement prices are opaque, there is no VAT invoice, as well as project control and supply chain management issues. Costs are rising, profits are falling, and the tunnel industry's "Internet +" is imminent. The tunnel industry is high in mechanization, machinery manufacturing and procurement costs are very large, in addition, the development of the tunnel industry is faced with a severe test of the construction market. "Internet +" provides the big data, the information flow, provides the opportunity for the traditional tunnel enterprise from the mechanization to the digitization advance, the tunnel industry construction project needs the continuous technical support, also needs the experience to share, if can use the Internet to arrange and share the related experience, will bring the wisdom impetus for the tunnel industry development.

Through the video surveillance image and the voice recording system, we can grasp the construction situation of each work point at any time, solve the problems encountered in the construction, and improve the management efficiency. In the more special lots, such as the Big Ravine, point multi-line long, the traffic is inconvenient, the construction organization management difficulty is big, in the traditional construction process, Basic people shuttling back and forth between the work points or telephone communication, inspection, supervision of construction, often require a lot of people to participate in management, but still poorly managed, often appear asymmetric information, management is not in place and other issues, based on "Internet +" video surveillance image and voice recording system came into being.

Code Generation Scenario Setup

First create a 3D scene, HT has a component, you can create an instance directly from the new Ht.graph3d.Graph3dView, and then get the underlying div of the component via the GetView () function, which is a lot easier to display control from, since it is a div:

New ht. Datamodel ();  Data container, you can store all the data displayed on the interface via Datamodel.add in the data container new Ht.graph3d.Graph3dView (DM);  Component g3d.addtodom ();  Add the bottom div of the component to the body

HT components are typically embedded in containers such as Borderpane, SplitView, and Tabview, while the outermost HT component requires the user to manually add the underlying DIV element returned by GetView () to the DOM element of the page, where it is important to note that when the parent container size When changing, if the parent container is a predefined container component such as Borderpane and SplitView HT , HT the container automatically notifies the update by calling the child component invalidate function recursively. However, if the parent container is a native HTML element, the component is not aware of the HT need to update, so the outermost HT component generally needs to listen for window size change events, calling the outermost component invalidate function to update.

In order for the outermost component to fill the window-filled convenience, all HT components have the Addtodom function, the implementation logic is as follows, where IV is shorthand for invalidate:

Addtodom =function(){       varSelf = This, view= Self.getview (),// gets the underlying div for the componentstyle =View.style; Document.body.appendChild (view);// Add the component's underlying div into the bodyStyle.left = ' 0 ';// HT component default setting position style property is absolute absolute positioning modeStyle.right = ' 0 '; Style.top= ' 0 '; Style.bottom= ' 0 '; Window.addeventlistener (' Resize ',function() {SELF.IV ();},false); }

Scene serialization

What makes me happy is that my development is basically completely separate from the design, because HT can be passed through HT. The Default.xhrload function directly loads the JSON file scene, so I am a double-process with the designer, very happy ~ loading the scene has three steps, as follows:

function (text) {  load json scene    var json = ht. Default.parse (text);  Escape json file    dm.deserialize (JSON);  Deserializing JSON content into the scene     You can manipulate the data in the Datamodel data container in this case. }

Animation

I added some features to the scene, including some of the animation operations mentioned earlier, and the HT packaged Datamodel.addscheduletask (Task) controls the load animation by manipulating the data container Datamodel (https://hightopo.com /guide/guide/core/schedule/ht-schedule-guide.html), the animation section is declared in the parameter task, and the task is a JSON object that can specify the following properties:

• Interval: Interval of milliseconds, default value is 10

• Enabled: Enable switch, default to True

• Action: Interval action function, which must be set

There are three of my animations, and two tunnels have one fan, one wind meter and one volume gate. Setting these three elements changes, I set the tag of the three entities in JSON to Feng, feng2, and door, and in the code I can invoke the Tag property of the three entities directly:

varTask ={action:function(data) {if(!data.gettag ())return; varTag = Data.gettag ();//get the Tag property of an entity    if(Tag = = = ' Feng ')) {DATA.R3 (0, (DATA.R3 () [1]+MATH.PI/12), 0);//R3 is rotated in 3d, where the y-axis rotates math.pi/12 angle on the original basis}Else if(Tag = = = ' Feng2 ')) {DATA.R3 (0, 0, DATA.R3 () [2]+MATH.PI/12]; }Else if(Tag = = = ' Door ')){            if(Data.gettall () > 0) {//Gets the tall attribute of the entity, heightData.settall (Data.gettall ()-20);//set height to current height minus}}}}dm.addscheduletask (Task);//to add a dispatch task in the data container Datamodel

Next is to create form form, add some information on the form, such as the switch of traffic lights and so on, the scene default display of the form form in the upper right corner we do not explain, the content and click on the traffic lights appear form forms, so we mainly explain the click on the traffic lights appear when the form:

The repeating part of the form is much more, I pick out three parts to explain: The text section, the "Current status" Display icon and the following "Modify status" in the icon click on the selection section:

Form.addrow ([//AddRow Add a line I'm adding a title to this section{element:' Traffic light control ',//The display text for the first part of this lineAlign: ' center ',//Text AlignmentColor: ' RGB (0,210,187) ',//text colorFont: ' Bold 16px Arial, Sans-serif '//Text Font    }], [0.1]);//Remember to set the width of this lineForm.addrow ([//this line has two parts, a "device description", a text "0", so to set two width, the width to be placed in an array' Device Description: ',//First Part{//Part IIElement: ' 0 ', Color:' RGB (0,210,187) '    }],[80, 0.1], 34);//The second parameter of the AddRow function is the width setting, in which the width of the above content is placed sequentially into the array. The third parameter is a heightForm.addrow ([' Current state: ',    {//You can also set a part of an array to an empty string, occupy some width, so the ratio is betterElement: '}, {ID:' 105 ',//ID uniquely identifies the attribute, which can be added to the corresponding item object by Formpane.getitembyid (ID)Button: {//button to set this property, HT will automatically build the Ht.widget.Button object based on the attribute value and save it on the element propertyIcon: ' symbols/tunnel with icons/light.json ',//the Display icon on the buttonBackground: ' Rgba (0,7,26,0.60) ',//Button BackgroundBorderColor: ' RGB (0, 7, 26) ',//button Border ColorClickable:false//Whether you can click        }    }],[80, 0.1, 84], 30); Form.addrow ([//if the distance from the above line differs from the other line spacing, you can set the height by adding a row of blank lines‘‘, {element:‘‘    }], [200, 0.1], 10); Form.addrow ([' Modify state: ', {element:‘‘}, {button: {icon:' symbols/Tunnel with icon/light.json ',//set the icon for a buttonBackground: ' Rgba (0,7,26,0.60) ', BorderColor:' RGB (0, 7, 26) ', GroupId:' Btn ',//using Getgroupid and Setgroupid to get and set the group number, the Togglable button belonging to the same group has exclusive functionality. The following three buttons also set the same groupIdOnClicked:function(e) {//post-click callback functionBtnclick (' Light '); }        }    }],[80, 0.1, 84], 30);

The background of this form form is just a picture of a single image:

Background:url (' assets/control. png ') no-repeat;

Another part of the above is not mentioned, that is, the Btnclick function called after clicking the button:

functionBtnclick (imageName) {if(flag = = = 1) {//The judgment is handled according to the 3d event, and theDm.getdatabytag (' light '). S ({//to get a node through Getdatabytag, set the node's style style' Back.image ': ' symbols/Tunnel with icon/' +imagename+ '. JSON ',//set the back picture of an entity' Front.image ': ' symbols/Tunnel with icon/' +imagename+ '. JSON '//set the elements of your front picture        }); }Else if(flag = = = 2) {Dm.getdatabytag (' Light1 '). s ({' Back.image ': ' symbols/Tunnel with icon/' +imagename+ '. JSON ',            ' Front.image ': ' symbols/Tunnel with icon/' +imagename+ '. JSON '        }); }Else{} Form.getviewbyid (). SetIcon (' symbols/Tunnel with icon/' +imagename+ '. json ');//set the item content with ID 105 to display the icon for the button of the traffic light clicked on the form form}

Finally, click on the event, click the traffic light to switch the color of the traffic lights (in fact, the map to switch the model):

G3D.MI (function(e) {//Addinteractorlistener function listens to events in the scene    if(E.kind = = = ' Clickdata ')) {        if(E.data.gettag () = = = ' Jam ') {createdialog (e.data);} Else if(E.data.gettag () = = = ' Light ') {// if the element is the back of the tunnel light            varFrontimage = E.data.s (' front.image ')); varImageName = Frontimage.slice (Frontimage.lastindexof ('/') +1, Frontimage.lastindexof ('. '))); Btnclick (' Light ', ImageName); }        Else if(E.data.gettag () = = = ' light1 ') {// The light of the front tunnel            varFrontimage = E.data.s (' front.image ')); varImageName = Frontimage.slice (Frontimage.lastindexof ('/') +1, Frontimage.lastindexof ('. '))); Btnclick (' Light1 ', ImageName); }    }});

The concept of Internet + can operate well in new industries, and it can also produce very large benefits in traditional industries, such as smart city construction, smart energy management, smart factories, and even metro supervision, all of which are able to operate in combination with the Internet + model. To a certain extent, save a lot of manpower and time costs.

3D tunnel based on HTML5 combined with Internet +