preface

“Internet +” thinking makes data collection and acquisition more convenient, and with the in-depth development and application of big data, data analysis and prediction is of great value to improving user experience, and also provides a broader space for cooperation in different industries and fields. The traditional power generation enterprise is A capital, technology intensive and relatively independent but closed industry, for example in shajiao A, with high quality of pier, essence, maintenance team, technical personnel and other resources, whether the future will go out, thanks to the Internet, or some other advanced management, technology can through the Internet came in combination can be to explore. The typical application of industrial Internet is not all on the machine, including lighting, intelligent transportation, intelligent machine application, factory control, plant application, state monitoring, and other agricultural and power equipment applications. The application of Internet + will be more and more widely, and the traditional power enterprises still need to keep pace.

http://www.hightopo.com/demo/electric-bling/index.html

Code generation

Vector to create

The whole scene is actually made up of a json format of files are generated, in view of the whole scene repeated part of too many, so will the part separate out as an icon for reuse, here said the “icon” means the vector ICONS, and similar to the SVG graph is commonly used in industry, in the case of scaling graphics are not distortion. Vector is short for vector graphics in HT for Web. Raster bitmaps such as PNG and JPG are commonly used to describe graphics by storing the color information of each pixel. When pictures in this way are stretched and enlarged or reduced, there will be problems such as blurred graphics, thick lines and jagged teeth. Vector images, on the other hand, describe images with points, lines, and polygons, so they can be zoomed in and out with consistent accuracy.

All raster bitmaps in HT can be replaced by vector graphics, such as GraphView metagraphs, TreeView and TableView ICONS, etc., and even the entire SYSTEM interface made by HT framework can be fully vectorized. In this way, the pixel scaling on the GraphView component is not distorted, and there is no need to provide different sizes of images for Retina display. In the mobile era of diversified devicePixelRatio, vectors may be the lowest cost solution to achieve perfect cross-platform.

In HT, vectors are described in JSON format in the same way as normal raster bitmaps, by setting node style properties such as node.setstyle (‘image’, ‘test.json’).

Vector JSON description must contain width, height, and comps parameter information:

  • Width Specifies the width of the vector shape

  • Height Height of the vector graphic

  • Comps vector graphics components Array Array, each Array object is an independent component type, the order of the Array is the component drawing sequence at the same time can set the following optional parameters information:

  • Whether visible is visible. Default is true

  • Opacity: 1 by default, the value ranges from 0 to 1

  • Color The color of the vector. After setting the color, the content drawn inside the vector will merge the color value

  • Clip is used to crop the drawing area. Two types of clip can be set: Boolean

    • Boolean type that controls whether content beyond width and height will be clipped when drawn. The default is false
    • The function type can be used to create custom clipping of any shape on canvas.

As can be seen from the picture, this icon consists of a straight line, a rectangle and an arrow. We call this icon arrow:

ht.Default.setImage('arrow', {// Register the image arrow"width": 60,// The width of the vector graphic"height": 30,// Height of vector graphics"comps"Each Array object is an independent component type. The order of the Array objects is the order in which the components are drawn. {// Draw the line parts"type": "shape", / / a polygon"borderWidth": 1,// border width"borderColor": "rgb(255,0,0)"// Border color"points": [// Point information points: [x1, y1, x2, y2, x3, y3,...] Store point coordinates 1.4262, 14.93626, 51.46768, 14.93626]}, {// Draw the tip part of the arrow"type": "shape"."borderWidth": 1,
            "borderColor": "rgb(255,0,0)"."rotation": 4.71239, / / rotate"points": [45.50336, 9.63425, 52.88591, 13.92955, 60.26846, 9.63425, 52.88591, 20.23827, 45.50336, 9.63425]},"type": "rect", / / rectangle"background": {// Background color"func": "attr@lightBg"."value": "rgb(255,0,0)"
            },
            "borderColor": "# 979797"."shadow": {/ / shadow"func": "attr@shadow"."value": false
            },
            "shadowColor": {// Shadow color"func": "attr@shadowColor"."value": "Rgba (255,0,0,0.7)"
            },
            "shadowBlur": 32,// Shadow blur"shadowOffsetX": 0,// Shadow horizontal offset"shadowOffsetY": 0,// Shadow offset"rect": [// specifies the starting position of the rectangle [x, y, width, height] and the size of the rectangle 11.44694, 10.43626, 30, 9]}]});Copy the code

The primitive type in each array object corresponds exactly to the shape parameter of style, except that the camel name in style is removed. Please refer to the HT for Web style manual to find the corresponding style attribute. Some of the attributes added later may not be added in the style manual. You only need to know such an attribute, generally see the attribute name to know the function of this attribute.

There is a point in the above code that may confuse you that I didn’t explain in the code, but let’s focus on this part of the code: data binding. As we know from the image at the beginning of this article, the rectangles in this icon will change color.

Data binding

Data binding means to automatically synchronize Data model information of Data graph elements with visual parameters such as color, size and Angle of interface graphics. By default, predefined graphics components of HT have been bound with Data Data in DataModel. For example, when users modify the position value of Node, Then the position of the corresponding pixel on GraphView and Graph3dView will automatically synchronize.

Traditional data binding has the concepts of one-way binding and two-way binding, but the design mode of HT system makes binding more simple and easy to understand. HT only has a DataModel DataModel, and the graphics component bound to DataModel does not have other data models inside the component. Therefore, components present interface effects according to the DataModel. Therefore, when the user drags the pixel to move, it is in essence to modify the position value of Node in the DataModel, and the event triggered by the change of this attribute is sent to the graphics component again through the model, causing the graphics component to refresh the interface according to the new model information.

The binding format is as simple as replacing the previous parameter value with an object with a func attribute. The contents of func can be of the following types:

  • Function: func(Data, view) function: funC (Data, view) function: funC (Data, view)
  • Type string:
    • Func @*** returns data.getStyle(***), where *** represents the style attribute name
    • Attr @*** returns data.getattr (***), where *** represents the attribute name of attr
    • Data.***(view); ***(view); ***(view); In addition to the func attribute, you can also set the value attribute as the default value. If the corresponding func value is undefined or null, the default value defined by the value attribute is used. For example, if the attR attribute lightBg of the corresponding Data object is undefined or null, the RGB (255, 0, 0) color will be used:
"background": {// Background color"func": "attr@lightBg"// Return getAttr('lightBg') the value of the"value": "rgb(255,0,0)"// Set the default value}Copy the code

In the same way, shadow and shadowColor in the above code are bound in this way. The bound data is only related to the part of the array object, so even if the icon is an image, we can still control the local color and so on. Want to know all the func can refer to the use of this example, http://www.hightopo.com/guide/guide/core/databinding/examples/example_piebinding.html, using all types, Very practical.

In the code, I change the color of the array object by controlling the binding properties. If the light is flashing, it must feel like “glow”, which is more realistic. So there is another content that needs to be explained here. A better explanation is that in a rectangular box, triggered by the center point of the rectangle, the color gradually lightens from the inside to the outside, a little like a blur. The following picture is a display of the shadow:

Set the scene

The next step is to set up the scene, using the lightBling/displays/ Powerdisplays. Json file, where I set part of the “arrow” icon’s tag tag. In HT, it is generally recommended that the id attribute be automatically assigned by HT, and the unique identifier of the user’s business significance can be stored in the tag attribute. Data#setTag(tag) function allows arbitrary dynamic change of tag value. The corresponding Data object can be found by DataModel#getDataByTag(tag) and can be deleted by DataModel#removeDataByTag(tag).

However, I directly added the “tag” attribute to the JSON. The specific JSON topology is described as follows:

We use the building. Json, I take part of the parse:

{
    "c": "ht.Node"// Class name for deserialization"i": / / id value, 274997"p": {//get/setType properties All of these properties are available via get/setGet and Set"displayName": "Light - red"// Display the name"tag": "alarm",// Tags are available via getTag andsetTag to get and set"image": "Symbols/tunnel ICONS/traffic lights/lights/lights - red. Json"// The path referenced is the json file of the "red light" icon called on the side of the relative path"position": {/ / coordinates"x": 70.9971."y": 47.78651}},"s": {/ /setStyle property"2d.movable": false,// can not be set under 2dsetStyle('2d.movable'.true) The same as below"2d.editable": false// not editable in 2d}}Copy the code

In fact, the entire part that does not need animation is the content of the JSON file, you can parse the json drawing according to the JSON topology above. How do I load the json file of my drawing in the GraphView? HT encapsulates the hT.defautl. xhrLoad function to load the corresponding drawing JSON into the GraphView. The parameter is text, which needs to be escaped into JSON through HT.default.parse:

ht.Default.xhrLoad('displays/ power/build.json '.function(text){ var json = ht.Default.parse(text); window.gv.dm().deserialize(json); // deserialize and add the deserialized object to DataModel});Copy the code

At this point, the contents of the DataModel are all primitives deserialized from the JSON file, so we can use the DataModel to arbitrarily obtain and change the style and properties of primitives in json. The setAttr/getAttr attribute must be defined first, otherwise HT will not know whether the node has the user-defined attribute:

for(var i = 0; i < gv.dm().size(); i++){ var data = gv.dm().getDatas().get(i); // Get the node corresponding to I in datamodelif(data.getTag()){// If this object has the tag value data.a('shadow'.false); // Set the custom property and give a value data.a('shadowColor'.'rgba (255,0,0,0.9)');
        data.a('lightBg'.'rgb(255, 0, 0)');
        data.a('alarmColor'.'red'); }}Copy the code

This allows us to manipulate the properties already declared above, as well as the HT default properties. Light1 to light15 and alarm tags are set in the JSON file. We can use data.getTag() to get the tag name of this node. Alternatively, datamodel.getdatabytag (tagName) is given the tagName to get the corresponding node.

Light flicker animation

There are three animation modes of HT for animation, with different points. The schedule I used here is mainly used for function callback processing at the specified time interval. The scheduling process in HT is as follows: first add the scheduling task through DataModel, and the DataModel will traverse all the action functions of DataModel’s diagram elements to call back the scheduling task when the time interval specified by the scheduling task arrives. In this function, you can modify the properties of the Data primitives to achieve the animation effect.

Here’s the animation-related code for my example:

Var blingTask = {interval: 1000,//function(data){// Interval action functionif(data.getTag() === 'light1' || data.getTag() === 'light13' || data.getTag() === 'light5' || data.getTag() === 'light6' || data.getTag() === 'light10' || data.getTag() === 'light11' || data.getTag() === 'light12' || data.getTag() === 'light14' || data.getTag() === 'light15') {if(data.a('lightBg') = = ='rgb(255, 0, 0)'){// If the attribute lightBg value is this, do the following series of actions data.a('lightBg'.'rgb(0, 255, 0)');
                data.a('shadow'.true);
                data.a('shadowColor'.'rgba (0, 255, 0, 0.9)');
            }else if(data.a('lightBg') = = ='rgb(0, 255, 0)'){
                data.a('lightBg'.'rgb(255, 255, 0)');
                data.a('shadow'.true);
                data.a('shadowColor'.'rgba (255, 255, 0, 0.9)');
            }else{
                data.a('lightBg'.'rgb(255, 0, 0)');
                data.a('shadow'.true);
                data.a('shadowColor'.'rgba (255, 0, 0, 0.9)'); }}else if(data.getTag() === 'alarm') {if(data.a('alarmColor') = = ='red'){
                data.a('alarmColor'.'rgb(0, 255, 0)');
            }else{
                data.a('alarmColor'.'red'); }}}}; window.gv.dm().addScheduleTask(blingTask); // Add an animation to the DataModelCopy the code

I’m sure you can understand the rest of it, but if you don’t go to the official website (or this link, which also has FAQ’s) and look up the documentation, it’s very clear.

Now industrial Internet has been used in all aspects of our city and industrial construction. Real-time data monitoring can be carried out not only in 2D, but also in 3D. For example: transformer data monitoring, intelligent industrial park.

https://hightopo.com/demo/intelligent-transformer/index.html

https://hightopo.com/demo/HTBuilding/index.html