The cube is placed on a movable JSON file and the chart on the Echarts

Suddenly there is an idea, if you can put some of the different knowledge points on the same interface, and put in a box, so that I want to see what can be very direct display, and this box must be able to open. I use HT to realize my idea, code more than 100 lines, so little code can achieve this effect I think it is cattle.

Let's take a look:

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

var New ht. Csgbox ();d atamodel.add (box);

This box can be easily implemented with HT, which encapsulates a number of basic primitive types in HT, and we often use HT. node is one of them, so we can do the basic implementation without having to write the same code over and over again.

The encapsulated base entity in this example is HT. Csgbox, a box model, can refer to the HT for WEB Modeling Manual, as we can see in the manual, in the Csgbox we only have to operate the various sides 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 decal to a face on a box, I can think of only the ht.Default.setImage function of the HT package.

The way I do this is by referencing the HT editor to work, re-declaring a Graphview component and a Datamodel data model, and then passing HT. The Default.xhrload method calls the JSON and makes the appropriate action:

Ht. Default.xhrload (' Displays/demo/pump.json ',function(text) {const JSON=ht.    Default.parse (text);    Pumpdm.deserialize (JSON); varcurrentrotation = 0; varLasttime =NewDate (). GetTime (); SetInterval (function(){        varTime =NewDate (). GetTime (); varDeltatime = 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 (); This way you can also refresh the g3d, but the local refresh will savePumpgv.validateimpl (); }, 10);}, 10);

This time I can not add PUMPGV and g3d to the bottom div, and my intention is to add PUMPGV to g3d in the side of the Csgbox, so in order to let the PUMPGV display must be set PUMPGV the width of the high, And this width must be larger than the size of my JSON drawing, otherwise the display is incomplete. If you want to see the effect of this wide-height on the display, you can change it to play.

function  return function returntotrue; // This is set to allow canvas to dynamically display

The display of the Echarts chart is also very basic, as long as you add canvas.dynamic = True, and the GV is refreshed in real time.

Finally, you only need to pass the two backhaul canvases into HT. In Default.setimage, you can:

Ht. Default.setimage (' Echart ', charts (option)); Ht. Default.setimage (' pump ', Pumpgv.getcanvas ());

Ht. The Default.drawimage function generates a new graph that is actually drawing on canvas, so we can create a picture by uploading the canvas we've already painted to ht.Default.setImage.

One thing that needs to be improved is that we can see the segments on the box, the graphics, the edges of the text with a circle of Sawtooth, because:

We can set front.transparent:true and right.transparent = True so that both sides are not jagged.

The cube is placed on a movable JSON file and the chart on the Echarts