HT graphical Component Design (1)

HT for Web (HT) provides an all-in-one solution covering general components, 2D topology graphics components, and 3D engines. As stated on the hightopo official website, we hope to provide: everything you need to create cutting-edge 2D and 3D visualization. this vision is a long functional front and challenging in terms of design architecture. In fact, the HT team is very conservative, and we have never been greedy, only when we feel that we can get better and provide better comprehensive user experience, we have developed such a vision and achieved several meaningful milestones, I have gradually accumulated many innovations and experiences in graphic component design. I don't know how many articles this series will write, maybe it will never end, and there is no systematic outline plan, you can write whatever you think. It is enough to hope that the article will inspire those interested to think more deeply about the graphic component design.

Before the discussion, set the boundaries of the topic. HT is a graph component library based on HTML5. Therefore, the case of the article involves more HTML and JavaScript languages, but it is not limited to the Web Front-end, the design concept is also applicable to any GUI language platform. The complete front-end design requires consideration of factors such as backend loading concurrency. However, this series focuses more on client-only graphical components and does not involve network communication. For example, Alibaba wireless front-end recruitment recently: after entering the URL, press enter to see what happened on the webpage. This is a good topic that can be discussed in many aspects and help you understand the subject, but the topic discussed here will be more relevant to the following keywords: enterprise applications, single page applications, client-heavy interaction, monitoring, and MV.

As Linus said: Talk is cheap, show me the code. therefore, before I choose to expand the topic, I will first use ht to expand and customize several application cases so that you can understand the HT component and its extension design ideas.

Programmers familiar with Flex should be familiar with Tour de flex, an all-encompassing hodgedge. I have been very impressed by the Network Monitoring topology Network Monitor, especially its animation switching effect, it is impossible to provide a complete example here. We only try to display the CPU and MEM interface section.

As shown in the final result, the model data has two values, one representing the CPU usage, the other representing the memory usage, and the other representing the vector graphics display on the left using the graphic component graphview of HT, the Renderer of the two cells in the propertyview is customized in the upper right corner, and the two sliders in the lower right corner can be dragged to change the CPU and men values.

In this example, the three components are customized in three ways, and different components share the same data source, the presentation also supports interaction between the mouse and touch on the desktop and the mobile end, as well as the component layout function of different terminal screens.

In terms of business, we need to present a lawyer when the usage is less than 40%, yellow when 40%-70%, and red when the usage is greater than 70%. Therefore, the following getcolor tool function is defined:

getColor = function(value) {    if (value < 40)        return ‘#00A406‘;    if (value < 70)        return ‘#FFCC00‘;    return ‘#A60000‘;};

Propertyview adopts the most basic and original method. You can use the canvas paint brush to customize the painting of cells. When registering propertyview, you can use the drawpropertyvalue function to customize the Renderer of cells.

drawFunc = function(g, value, x, y, w, h){    g.fillStyle = ‘#A1A1A3‘;    g.beginPath();    g.rect(x, y, w, h);    g.fill();                        g.fillStyle = getColor(value);    g.beginPath();    g.rect(x, y, w * value / 100, h);    g.fill();    ht.Default.drawText(g, value + ‘%‘, ‘12px Arial‘, ‘white‘, x, y, w, h, ‘center‘); };propertyView.addProperties([    {        displayName: ‘CPU‘,        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view)    {            drawFunc(g, data.a(‘cpu‘), x, y, w, h);        }    },    {        displayName: ‘MEM‘,        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {            drawFunc(g, data.a(‘mem‘), x, y, w, h);        }            }]);

The slider pull part is directly applied on the HT encapsulated components, so you do not need to touch the bottom canvas paint brush. You only need to update the left color of the leftbackgroud pull when onvaluechanged, in fact, you can also use the getleftbackground function of the slider to achieve the following:

formPane.addRow([‘CPU‘, {    slider: {        step: 1,        onValueChanged: function(){            var value = this.getValue();            node.a(‘cpu‘, value);            this.setLeftBackground(getColor(value));        },        value: node.a(‘cpu‘)            }}], [50, 0.1]);formPane.addRow([‘MEM‘, {    slider: {        step: 1,                                onValueChanged: function(){            var value = this.getValue();            node.a(‘mem‘, value);            this.setLeftBackground(getColor(value));        },        value: node.a(‘mem‘)            }}], [50, 0.1]);

Graphview adopts the HT custom vector method introduced in the article "design of graphic components with HT full vectoring" to achieve the graphic effect. This method is between the two extension methods, you need to customize the rendering effect. However, with the vector format provided by ht, you can use a relatively intuitive and easy-to-read JSON format to describe the image, the data binding method is used to associate the model data with the interface presentation. This avoids the first custom Renderer method, that is, accessing the underlying rendering function, at the same time, business logic code and drawing Code are not easy to maintain together.

ht.Default.setImage(‘server_image‘, {    width: 300,    height: 200,    comps: [        {            type: "roundRect",            rect: [3, 5, 291, 189],            background: "#E3E3E3",            gradient: "linear.northeast",            shadow: true        },        {            type: "text",            text: "CPU",            font: "16px Arial",            rect: [20, 45, 59, 41]        },        {            type: "text",            text: "MEM",            font: "16px Arial",            rect: [20, 108, 59, 41]        },        {            type: "rect",            rect: [82, 55, 145, 22],            background: "#A1A1A3"        },        {            type: "rect",            rect: {                func: function(data) {                    return [82, 55, 145 * data.a(‘cpu‘) / 100, 22];                }            },            background: {                func: function(data) {                    return getColor(data.a(‘cpu‘));                }            }        },        {            type: "rect",            rect: [82, 117, 145, 22],            background: "#A1A1A3"        },        {            type: "rect",            rect: {                func: function(data) {                    return [82, 117, 145 * data.a(‘mem‘) / 100, 22];                }            },            background: {                func: function(data) {                    return getColor(data.a(‘mem‘));                }            }        },        {            type: "text",            font: "16px Arial",            rect: [240, 49, 53, 31],            text: {                func: function(data) {                    return data.a(‘cpu‘) + ‘%‘;                }            },            color: {                func: function(data) {                    return getColor(data.a(‘cpu‘));                }            }        },        {            type: "text",            font: "16px Arial",            rect: [240, 108, 47, 39],            text: {                func: function(data) {                    return data.a(‘mem‘) + ‘%‘;                }            },            color: {                func: function(data) {                    return getColor(data.a(‘mem‘));                }            }        }    ]});

The above code registers an image named server-image and binds the MEM and CPU attributes of ATTR. Therefore, after completing the basic work of these tripod, the app only needs to build ht. node object. setimage ('server-image') enables this element to present the vector effect described by 'server-image' on graphview, in addition, the propertyview, Slider, and graphview components all display the interface through the CPU and MEM on the ATTR of node, so that when the background obtains the collected real-time data, you only need to update the CPU and MEM attributes on the node's ATTR, and all the components on the interface will be updated and displayed:

node = new ht.Node();node.setName(‘SERVER‘);node.setImage(‘server_image‘);node.a({    cpu: 30,    mem: 70});dataModel.add(node);

Of course, the CPU and men values do not need to be pulled in actual applications. These values are generally collected in the background for real-time automatic updates only for presentation, but with the one-stop support of these front-end components, we do not need to connect to the backend or conduct simulated tests on the client. With this mechanism, we can separate the modules for step-by-step testing, for example, if we do not need to connect to the server now, we can also test whether the definition of the vector description is correct. After the numeric value changes, the green and yellow colors are updated correctly, and whether the data synchronization of each component is normal, whether the interaction between the mouse and touch is normal, and whether the interface is normal on the screen of different devices, etc. After the encapsulation of these pure client components is done, you can connect to the background data for testing.

When too many customers have encountered problems, they only say: the interface is not displayed correctly. The root cause of such a problem cannot be located at all. In the end, is there a background database problem, network communication problem, data parsing problem, and model setting problem or component encapsulation problem? This is another layer of MVC/MVP/mvvm. Apart from event distribution data binding, it is important to better present, model, and division of labor in business logic for independent testing, and classify TCP/IP layer-7 protocols, each protocol layer should ensure correct implementation of its own agreement, and each layer can be tested independently. This is a scalable system that can be maintained. Therefore, when the HT customer encounters problems, we usually help sort out the root cause layer by layer. If there is no problem with vector descriptions, it is a problem with the HT component library. If the ATTR data on the simulated node is correctly displayed, check whether the data after the backend communication Parsing is correctly set to the model, so that step-by-step analysis can easily locate the root cause of the problem.

The above three expansion methods have their own advantages and disadvantages. I will continue to analyze them in the next article. the last section of this article will show the operation video of this example on the mobile terminal.