Based on HTML5 WebGL, json and echarts charts are displayed on the same interface.

Based on HTML5 WebGL, json and echarts charts are displayed on the same interface.

Suddenly I had an idea. If I could put some different knowledge points on the same interface and put them in a box, I could directly display what I wanted to watch, the box must be opened. I used HT to implement my idea. There are more than one hundred lines of code, so few codes can achieve this effect. I think it is still cool.

Let's take a look:

The most basic of this example is the outermost box, so let's first look at how to implement it:

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

Using HT can easily implement this box, and many basic primitive types are encapsulated in HT, which we often use. node is also one of them, so that we do not need to repeatedly write the same code to complete the basic implementation.

The encapsulated basic elements used in this example are ht. CSGBox, a box model, can refer to the HT for Web modeling manual, we can see in the manual, in CSGBox we can only operate on each side of the box, if you want to set some special features, you only need to operate ht. style (HT for Web Style Manual.

To add a texture on a surface of the box, all I can think of is the HT. Default. setImage function encapsulated by ht.

Here, I implemented the operation by referring to the HT editor, re-declaring a graphview component and a datamodel data model, and then using ht. default. the xhrLoad method calls json and uses ht in the method. default. parse converts text to json format, deserializes the content in json to display the visual interface, sets the animation, and refreshes the interface that uses this json. Otherwise, even if an animation is set, the screen 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 can also be refreshed here, but partial refreshing saves pumpGV. validateImpl () ;}, 10) ;}, 10 );

At this time, I cannot add both pumpGV and g3d to the underlying div, and my intention is to add pumpGV TO THE CSGBox side of g3d, therefore, in order for pumpGV to be displayed, the width and height of pumpGV must be set. The width and height must be larger than the area occupied by the image I have drawn in json format. Otherwise, the display is incomplete. If you want to see the effect of the width and height on the display, you can change it to play.

PumpGV. getWidth = function () {return 600;} pumpGV. getHeight = function () {return 600;} pumpGV. getCanvas (). dynamic = true; // set this parameter so that the canvas can be dynamically displayed.

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

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

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

The ht. Default. drawImage function generates a new graph that is actually drawn on the canvas. Therefore, you only need to upload the canvas we have drawn to ht. Default. setImage to generate the image.

One thing we need to improve is that we can see that the line segments, graphics, and text on the box all have a circle of sawtooth, because we have set a translucent when setting the font, the "blend" style will be closed when it is translucent. At this time, we cannot control the style. Generally, when there is transparency, we need to set "all. transparent "is set to true,

You can set the transparent: true to be displayed. See the following:

Summary

The above section describes how to use HTML5-based WebGL to display json and echarts charts on the same page. I hope this will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!