preface

Today’s cotton processing industry is still stuck in the traditional reactive maintenance mode, when the cotton plant equipment suddenly fails, the control program needs to be replaced. In this case, the customer first needs to request the equipment manufacturer to send technical personnel for maintenance, and then the manufacturer can send people to the site for processing according to the situation. As the cotton processing equipment is distributed all over China and even exported to all over the world, the time cycle from the customer’s response to the manufacturer’s sending personnel to the site will be very long, at least one day, some remote places may need several days, affecting the continuation of the production activities of enterprises to varying degrees. Traditional reactive maintenance has the following disadvantages: slow response speed of after-sales service; High maintenance cost; Low production efficiency; High parking rate; High management costs; Unable to cope with the shortage of qualified engineers.

Remote monitoring system mainly through the distribution in cotton processing production line equipment sensor, switch signal, video surveillance equipment, PLC controller, such as device, through the intelligent networking equipment integrated into the Internet and LAN, realize the production and operation at any time to master, the monitoring data and network within the scope of online knowledge repository, Carry out remote diagnosis and online maintenance according to the equipment operation data collected on site.

www.hightopo.com/demo/Plucke…

Code implementation

Create a scenario

The first is to create a 3 d scene (https://hightopo.com/guide/guide/core/3d/ht-3d-guide.html), Through the scene elements added to save the data in the data container (https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html) can be:

var dm = new ht.DataModel(); Var g3d = new hT.graph3d.graph3dView (dm); // G3d.addtodom (); // Add the 3d component to the bodyCopy the code

The addToDOM method that appears in the code above takes the component calling this method and gets the component’s underlying div through the getView method, which is then added to the body. 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'; // Ht sets position for all components to absolute. Right ='0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize'.function () { self.iv(); }, false); // Window size change event, call refresh function}Copy the code

After the whole environment is built, we need to add 3D models to the scene and place them. Here, we put the model of the whole scene and its placement into a JSON format file, and then deserialize the JSON file into the data container DataModel. The scene content in JSON file and the location of the model can be displayed:

ht.Default.xhrLoad('Scenes/cotton grabber. Json'.functionDm. deserialize(text) {// Load JSON file dm.deserialize(text); // deserialize JSON to the data container});Copy the code

The hT.default. xhrLoad method is a wrapped asynchronous file loading function, which can be used to load JSON files. Because this method is asynchronous loading, if you want to manipulate elements in the data container after deserialization of this function, you need to perform subsequent operations in this function.

Scene animation

Since all the elements in the whole scene are deserialized from this JSON file, only the content of the scene is saved in this JSON file, excluding animation and interaction. Animation of elements in different parts is also different, so we need to extract these elements separately. Here by dm. GetDataByTag (tag) method (https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html#ref_datamodel), This method uses a unique tag to retrieve node information:

var equipment = dm.getDataByTag('equipment'); Var hand = dm.getDatabyTag ('hand'); Var light = dm.getDatabyTag ('light'); // Get the top indicator node of the cotton ginCopy the code

<script src="ht.js"></script> <! Ht.js --> <script SRC ="ht-animation.js"></script>
Copy the code

There are a total of three parts of the animation, using roughly the same method, here only to the whole body of the cotton gin left and right movement of the animation is explained.

Equipment. setAnimation({// Animation calls moveDown: {// defines an animation procedure called moveDown that changes the x-coordinate of the primitive from 623 to -256 from: 623,// Attribute value at the beginning of animation to: -256,// Attribute value at the end of animation interval: equipInterval,// Animation interval, ms next: ["moveUp"],// A string that specifies the next animation to execute after the current animation completes.function(value) {this.setx (value) {this.setx (value) {this.setx (value); // Set the X-axis of this object to the value of the current animation from to formpane.getitembyId ('xValue').element = value.toFixed(2); // Get the xValue element on the form and change that value formpane.iv (); }}, moveUp: {// Define an animation process called moveUp that changes the X-axis of the pixel from -256 to 623 from: -256, to: 623, interval: equipInterval, next: ["moveDown"],
        onUpdate: function(value) {
            this.setX(value);
            formPane.getItemById('xValue').element = value.toFixed(2);
            formPane.iv();
        }
    },
    start: ['moveDown']// start is an array that specifies one or more animations to start});Copy the code

Ht. DataModel#enableAnimation(interval) to start the global animation timer. The default interval is 16ms. If this parameter is not set, Then the DataModel timer will traverse all its Data every 16ms or so and execute the animation according to the animation configuration of Data.

dm.enableAnimation();
Copy the code

Form creation

Form form in the previous code (https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html), which is created by createForm method, this method is defined as follows (PS: Since the form form list is a bit long, here are some typical form elements:

// Create the form formfunction createForm() { var fp = new ht.widget.FormPane(); // Create the form component instance fp.setwidth (200); // Set the width of the form component fp.setheight (250); // Set the form component's height fp.getView().style.top ='8%'; // Set the style of the form component fp.getView().style.right = 0; fp.getView().style.background ='rgba (255, 255, 255, 0.3)'; document.body.appendChild(fp.getView()); // Add the underlying div of the form component to the body.'equipment'); Var hand = dm.getDatabyTag ('hand');

    fp.setLabelAlign('right'); Fp. addRow([// Add a line to the form. The first argument to this method is an array of elements, which can add more than one element to a line.Machine No.,
            color: '#fff'}, {// Element 2 displays text with "Machine" element:'Machine',
            color: '#fff'}], [0.1, 0.1]); Fp. addRow([// add a line to the form. This method takes an array of parameters, You can add more than one element in a line {// element one displays the text content as "machine number" element:'Cotton grab motor painting',
            color: '#fff'}, {// Element 2 displays text content as a button element. Button: {label:'开始',
                onClicked: functionDm.enableanimation (); dm.enableAnimation(); dm.enableAnimation(); Var light = dm.getDatabyTag ('light');
                    if(! light)return;
                    lightColor(light);
                    colorTimer = setInterval(function() {
                        lightColor(light);
                    }, 1000);
                }
            }
        },
        {
            button: {
                label: 'stop',
                onClicked: functionDm.disableanimation (); dm.disableAnimation(); dm.disableAnimation(); // Stop the global animation timer clearInterval(colorTimer); var light = dm.getDataByTag('light');
                    if (light) light.s('all.color'.'rgba (0,0,255,0.51)'); }}}], [0.2, 0.1, 0.1]); Fp. addRow([// Add a row to the form. This method takes an array of parameters that can be added to a row. {// Element 1 displays text content like "car walking speed" element:'Car speed',
            color: '#fff'}, {// Element two displays the text content as a slider ID:'slide', slider: {// slider value: equipInterval,// slider current value min: 0,// slider minimum value Max: 300,// slider maximum value step: 20,// Slider moves value onValueChanged for each step:function() {// Slider changes trigger event var anim = dm.getDataAnimation(equipment); Anim.movedown.interval = this.getValue(); anim.moveDown.interval = this.getValue(); Anim.moveup. interval = this.getValue(); }}}], [0.1, 0.1]); Fp.addrow ([// Add a row to the form) This method takes an array of parameters and can add multiple elements in a row {element:'X',
            color: '#fff'
        },
        {
            id: 'xValue', element: equipment.getx ().tofixed (2),//'#fff'}], [0.1, 0.1]);return fp;
}
Copy the code

So much for the fun part, if you have any suggestions or opinions, please leave a comment or a private message ~ or visit the official website for related information (hightopo.com/).

conclusion

In the past, ANIMATION was seldom used, but this time I used it to study the mechanism of animation carefully. The animation set by animation can carry out value changes in a “peaceful” way, and the animation looks more orderly. Of course there is also the ability to set what the next animation needs to do, this design is also very human; At the same time, it can also get the animation configuration of the object through getDataAnimation, and reconfigure the animation of the object through this method. These advantages are worth sharing with everyone.