How to use H5 WebGL to make json and echarts charts in the same interface

This time I will show you how to use H5's WebGL to make json and echarts charts on the same interface. How to use H5's WebGL to make json and echarts charts on the same interface. What are the precautions? , the following is a practical case, let’s take a look.

Suddenly I had an idea. If I could put some different knowledge points on the same interface and put them in a box, then if I want to see something, it can be displayed directly, and The box must be able to be opened. I used HT to realize my idea, with more than 100 lines of code. I think it is awesome that such a small amount of code can achieve this effect.

The most basic thing about this example is the outermost box, so let’s take a look at how to implement it first:

var box = new ht.CSGBox();
dataModel.add(box);

This box can be easily implemented using HT and encapsulated in HT There are many basic primitive types, and ht.Node, which we often use, is also one of them, so that we can complete the basic implementation without writing the same code repeatedly.

The encapsulated basic primitive used in this example is ht.CSGBox, a box model. You can refer to the HT for Web modeling manual. We can see in the manual that in In CSGBox, we can only operate all sides of the box. If you want to set some special functions yourself, you only need to operate ht.Style (HT for Web Style Manual).

To add a texture to a face of the box, the only thing I can think of is the ht.Default.setImage function encapsulated by HT.

The method I implemented here is to operate with reference to the editor of HT, re-declare a graphview component and a datamodel data model, and then call json through the ht.Default.xhrLoad method, using ht.Default in the method .parse converts the text into json format, then deserializes it to display the content in json into a visual interface, then sets animation, and then immediately refreshes the interface using this json, otherwise even if the animation is set, The picture will not change.

ht.Default.xhrLoad('displays/demo/pump.json', function(text){
    const json = ht.Default.parse(text);
    pumpDM.deserialize(json);
    var currentRotation = 0;
    var lastTime = new Date().getTime();
    setInterval(function(){
        var time = new Date().getTime();
        var deltaTime = time - lastTime;
        currentRotation += deltaTime * Math.PI / 180 * 0.3;
        lastTime = time;
        pumpDM.getDataByTag('fan1').setRotation(currentRotation);
        pumpDM.getDataByTag('fan2').setRotation(currentRotation);
        box.iv();
        // g3d.iv();这边也可以刷新g3d，但是局部刷新更省
        pumpGV.validateImpl();
    }, 10);
}, 10);

At this time, I cannot add pumpGV and g3d to the underlying div, and my intention is to add pumpGV to one side of the CSGBox in g3d, so in order for pumpGV to be displayed, pumpGV must be set Width and height, and this width and height must be larger than the area occupied by the picture I drew in json, otherwise the display will be incomplete. If you want to see the impact of this width and height on the display, you can change it yourself and have fun.

pumpGV.getWidth = function() { return 600;}
pumpGV.getHeight = function(){ return 600;}
pumpGV.getCanvas().dynamic = true;//设置这个是为了让canvas能动态显示

The display of echarts charts is also very basic. Just add canvas.dynamic = true and refresh gv in real time.

Finally, you only need to pass the two returned canvases into ht.Default.setImage:

ht.Default.setImage('echart', charts(option));
ht.Default.setImage('pump', pumpGV.getCanvas());

ht.Default.drawImage function actually generates a new image. Draw pictures on canvas, so we only need to pass the canvas we have drawn to ht.Default.setImage to generate pictures.

There is one thing that needs improvement. We can see that there is a circle of jagged edges around the line segments, graphics, and text on the box, because when we set the font, we also set translucency. The "blend" style will be turned off. At this time, we cannot control the style. Generally, when there is transparency, you need to set "all.transparent" to true.

I believe you have mastered it after reading these cases. Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the title attribute of HTML to display text on mouse hover

How to use the a tag How to solve the inconsistency between the href attribute and the onclick event

The cursor size display in the input input box

The above is the detailed content of How to use H5 WebGL to make json and echarts charts in the same interface. For more information, please follow other related articles on the PHP Chinese website!