preface

At present, material purchase and manpower cost are two bottlenecks of tunnel industry development. For example, relying on private lending, financing costs are high; The purchase price is not transparent and there is no VAT invoice; There are also issues of project control and supply chain management. Costs are rising, profits are falling, and the tunnel industry’s “Internet Plus” is imminent. The degree of mechanization of tunnel industry is high, the cost of machinery manufacturing and procurement is very large, in addition, the development of tunnel industry also faces the severe test of the construction market. “Internet plus” provides big data and information flow, providing opportunities for traditional tunnel enterprises to advance from mechanization to digitalization. Construction projects of the tunnel industry need continuous technical support as well as experience sharing. If the Internet can be used to organize and share relevant experience, it will bring intelligent power to the development of the tunnel industry.

Through the video monitoring image and voice recording system, it can master the construction situation of each station at any time, solve the problems encountered in construction in time, so as to improve the management efficiency; In a special location, such as the mountain ditch, point line length, traffic inconvenience, construction organization and management is very difficult, in the process of traditional construction, basic on people back and forth between the worksite or telephone communication, inspect and supervise the construction, often need a lot of people to participate in the management, but still tube is bad, often appear, asymmetric information problem such as management does not reach the designated position, Video surveillance image and voice recording system based on “Internet +” came into being.

Hightopo.com/demo/tunnel…

Code generation

Scenario building

HT (hightopo.com) has a 3D component. You can use the New HT.graph3d.graph3DView 3D component directly (hightopo.com/guide/guide…). To create an instance of the component, use getView() to get the underlying div of the component. Since it is a div, position display control is much easier:

dm = new ht.DataModel(); G3d = new hT.graph3d.graph3dView (dm); g3d = new ht.graph3d.graph3dView (dm); // 3D component g3d.addtodom (); // Add the underlying DIV of the 3D component to the bodyCopy the code

While HT components are typically embedded in containers such as BorderPane, SplitView, and TabView, the outermost HT components require the user to manually add the underlying div element returned by getView() to the DOM element of the page. When the parent container size changes, if the parent container is a predefined container component such as BorderPane and SplitView, the HT container automatically recursively calls the child component invalidate function to notify the update. However, if the parent container is a native HTML element, the HT component cannot know that it needs to be updated. Therefore, the outermost HT component usually needs to listen for the window size change event and call the invalidate function of the outermost component to update.

For ease of loading and filling Windows for the outermost components, all components of HT have addToDOM functions that implement the following logic, where iv is short for invalidate:

addToDOM = function(){var self = this, view = self.getView(),// get the component's bottom div style = view.style; document.body.appendChild(view); // Add the component's underlying div to the body. Left ='0'; // The HT component defaults to position with absolute style.right ='0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize'.function () { self.iv(); }, false);            
}
Copy the code

Scene serialization

Ht.default. xhrLoad is used to load the scene of json file directly, which makes me and the designer two processes. I am very happy. There are three steps to load scene:

ht.Default.xhrLoad('scenes/tunnel. Json'.functionParse (text){// Load JSON scene var json = ht.default.parse (text); // Escape json file dm.deserialize(json); // You can manipulate the data in the datamodel container in this context}Copy the code

animation

I added some functionality to the scene, including some animation operations mentioned earlier, HT encapsulated dataModel. AddScheduleTask dataModel (task) by manipulating the data container (https://hightopo.com/guide/guide/core/schedule/ht-schedule-guide.html) to control the loading animation, animation, part of the statement in the parameters of the task, the task as a json object, and can specify the following properties:

  • Interval: indicates the interval of milliseconds. The default value is 10
  • Enabled: Whether to enable the switch. The default value is true
  • Action: interval action function, this function must set my animation a total of three, two tunnels each have a fan, a wind vane and a shutter. In JSON, I set the tag of these three primitors to Feng, feng2, and door respectively. In the code, I can directly call the tag attribute of these three primitors:
var task = {
    action: function(data){
        if(! data.getTag())return; var tag = data.getTag(); // Get the tag attribute of the primitiveif(tag === 'feng'){ data.r3(0, (data.r3()[1]+Math.PI/12), 0); // r3 is the rotation in 3d, where the y axis is rotated in the original math.pi /12 Angle}else if(tag === 'feng2'){
        data.r3(0, 0, data.r3()[2]+Math.PI/12);
    }else if(tag === 'door') {if(data.gettall () > 0){// Get the tall attribute, data.settall (data.gettall ()-20); // Set the height to the current height minus 20}}}} dm.addscheduletask (task); // Add the scheduling task in the data container dataModelCopy the code

Then create the form form and add some information to the form, such as the switch of traffic lights, etc. By default, we will not explain the form form in the upper right corner of the scene. The content is similar to the form form that appears when clicking traffic lights, so we will mainly explain the form that appears when clicking traffic lights:

There are a lot of duplicated parts in the form, so I’ll pick out three parts to explain: the text part, the icon displayed in the “current state” and the icon click selection part in the “Modify State” below:

Form. AddRow ([// addRow adds a line to this part of me to add a title {element:'Traffic light control'// Display text for the first part of this line align:'center'// Text alignment color:'RGB (0210187).// Text color font:'bold 16px arial, sans-serif'}], [0.1]); // Remember to set the width of this line form.addrow ([// This line has two parts, a "device description" and a text "0", so set two widths, the widths should be placed in an array'Device Description :'// Part 1 {// Part 2 element:'0',
        color: 'RGB (0210187).}], [80, 0.1], 34); // The second argument to the addRow function is to set the width. The third parameter is height form.addrow ([Current status:, {// It is also possible to set some part of the array to an empty string, occupying some width, so that the ratio is better:' '
    },
    {
        id: '105',// id uniquely identifies attributes, which can be obtained via formpane.getitemById (id) and added to the corresponding item object button: {/ / Button, the HT. Widget. Button object will be automatically built based on the value of the property and stored on the Element property icon:'Symbols/tunnel ICONS /light.json'// Display icon background on the button:'rgba (0,7,26,0.60)',// Button background borderColor:'rgb(0, 7, 26)'// Clickable button border color:false}}],[80, 0.1, 84], 30); Form.addrow ([// If the distance between the form and the top line is different from the distance between the other lines, you can set the height by adding a blank line' ',
    {
        element: ' '}], [200, 0.1], 10); form.addRow(['Modify status :',
    {
        element: ' '
    },
    {
        button: {
            icon: 'Symbols/tunnel ICONS /light.json'// Set the button icon background:'rgba (0,7,26,0.60)',
            borderColor: 'rgb(0, 7, 26)',
            groupId: 'btn',// through getGroupId andsetGroupId Gets and sets the group number. Togglable buttons in the same group are mutually exclusive. The next three buttons also have the same groupId onClicked:function(e){// The callback function btnClick('light'); }}}],[80, 0.1, 84], 30);Copy the code

The background of this form is just an image:

background: url('assets/control. PNG') no-repeat;
Copy the code

There is another part not mentioned above, which is the btnClick function called after clicking the button:

function btnClick(imageName){
    if(flag === 1){dm.getDatabyTag (){dm.getDatabyTag (){dm.getDatabyTag ();'light').s({// get the node with getDataByTag and set the style of the node'back.image': 'Symbols/tunnel ICONS /'+imageName+'.json'// Set the back image of the primitives'front.image': 'Symbols/tunnel ICONS /'+imageName+'.json'}); }else if(flag === 2){
        dm.getDataByTag('light1').s({
            'back.image': 'Symbols/tunnel ICONS /'+imageName+'.json'.'front.image': 'Symbols/tunnel ICONS /'+imageName+'.json'
        });
    }else{}
    form.getViewById(105).setIcon('Symbols/tunnel ICONS /'+imageName+'.json'); // Set the content of the item whose id is 105 to the icon of the traffic light button clicked on the form}Copy the code

Finally, click on the event, clicking on the traffic light will directly switch the color of the traffic light (actually switch the map of the model) :

g3d.mi(function(e){// addInteractorListener listens for events in the scenarioif(e.kind === 'clickData') {
        if (e.data.getTag() === 'jam') { createDialog(e.data); }
        else if (e.data.getTag() === 'light'Var frontImage = e.data.s() {var frontImage = e.data.s('front.image');
            var imageName = frontImage.slice(frontImage.lastIndexOf('/')+1, frontImage.lastIndexOf('. '));
            btnClick('light', imageName);
        }
        else if (e.data.getTag() === 'light1'Var frontImage = e.data.s(){// frontImage = e.data.s('front.image');
            var imageName = frontImage.slice(frontImage.lastIndexOf('/')+1, frontImage.lastIndexOf('. '));
            btnClick('light1', imageName); }}});Copy the code

The concept of Internet + can operate well in the new industry, at the same time also well used in the traditional industries can produce very big benefits, such as wisdom urban construction, energy management wisdom, wisdom factory, even the subway regulation and so on can be combined with Internet + mode to run, to a certain extent, saves a lot of manpower and time cost.

Hightopo.com/demo/bigscr…

Hightopo.com/demo/intell…

Hightopo.com/demo/metro/…