Design of A vectorized HTML5 topology component

Design of A vectorized HTML5 topology component

HT has always been praised by customers for its fully vectorized design features. The benefits of vector compared with traditional images are too much:

• The vector can be infinitely scaled, and the interface is non-distorted and non-blurred.
• The text content of the description vector is much smaller than that of the image.
• Currently, vector may be the only complete solution for devices with inconsistent window. devicePixelRatio
• Business Data Binding

  When vector is mentioned, SVG is generally thought of, but this is a pitfall. Over the years, we have never seen a perfect real-world player. browser implementations vary widely and advanced attributes cannot be used at all, adobe SVG Viewer stopped updating many years ago. Flex supports SVG imports only for basic attributes. Of course, SVG is not useless. highcharts still works well, the Java field is also available for Batik projects that have been maintained for many years. However, I still don't like the DOM, which is too heavy to be an element. I don't like the huge and all-encompassing design. No one can achieve the perfect standard, in addition, using XML, Flex MXML, or Sliverlgiht/wpf xaml to describe graphics is cumbersome and inflexible, HTML5-based HT for Web naturally chooses a simple and standard JSON format line.

  It is the HT function for Registering images. for traditional images, you can also use ht. default. setImage ('sunrise ','.. /res/sunrise.png '), but when the registered object is HT vector format standard JSON data, HT will use the vector information described in this JSON to draw the image, JSON is only the description of the picture on the left. The four red sunrise on the right are based on the registered JSON and can be reused to implement nested definition.

  ht.Default.setImage('group-sunrise', {    width: 240,    height: 160,    clip: true,    color: 'red',    comps: [        {            type: 'image',            name: 'sunrise',            rect: [0, 0, 120, 80],            opacity: 0.3        },        {            type: 'image',            name: 'sunrise',            rect: [120, 0, 120, 80],            rotation: Math.PI / 4        },        {            type: 'image',            name: 'sunrise',            rect: [0, 80, 120, 80],            shadow: true        },        {            type: 'image',            name: 'sunrise',            rect: [120, 80, 120, 80]        }    ]});

  The code above registers a new vector named 'group-sunrise ', which consists of four components, each of which is a registered 'sunrise' vector, you can also set effects of independent rotation, shadow, and transparency for different parts.

  So far, it can only be said that there is nothing special about recreating an SVG. If only the vectoring function can be achieved, it would be meaningless to define a set of standards with great effort, in fact, the original intention of setting vectors for the HT for Web is not to vectoring, but the core concept of the HT product: making it easier for programmers to develop graphical interfaces!

  As an old front-end that has gone through MFC, Qt, Swing, Flex, Silverlight/WPF, and Cocoa (the front-end here is a bit out of the ages, and now it seems that the front-end only refers to the page) programmer, I can draw a good user-defined interface, but I am still afraid of customers to change the East to the West, especially in the power and industrial control industries, there are a lot of industry icons you need to draw, originally interesting Graph 2D plotting technology, but repeated drawing of different types of devices on a daily basis will also cause people to crash. Therefore, HT for Web not only defines the vector format and implements vector rendering, but also provides a vector editing tool designer, which allows you to drag and drop to produce vector images and then export JSON, after registering with HT, you can use all HT components. Note: it is all components, not just topology, not only 3D, but also all common components:

  Http://www.hightopo.com/guide/guide/core/theme/examples/example_default.html

  After so many years of development, I still like hand-writing code. Even if the HT vector is used to describe the majority of the cases, I still write the code. Of course, the tool also plays a role, for example, if we use the HT vector for water monitoring, it is difficult to manually write code to describe the coordinates of the beiser curve points without tools:
  

  With tools, you no longer have to worry about creating curves, or even involve programmers. artists can also use the HT vector editor to draw images and export JSON to programmers, this is the original intention of HT to make designers and developers better cooperate with each other in vector design. Programmers no longer need to use code to draw various devices every day. In this design and development workflow, even if a leader is not satisfied, the artist can drag and drop a new vector image effect quickly. What programmers need to do is simply import JSON.

  Of course, as a programmer's development tool, HT is far from enough. This only solves the problem of vector rendering, for SCADA and other monitoring fields, hardware information often needs to be reported based on real-time background data, and vector synchronization changes on graphics are required, therefore, the color, size, angle, and other parameters of a vector image may need to be consistent with the real-time data. How can this be annoying?

  According to the traditional practice, programmers not only need to draw vectors, but also need to add business parameter logic in drawing graphic code. Therefore, code readability and maintainability are hard to imagine. Here, HT innovatively proposes the function of dynamically binding vector data. The HT vector format design considers the need to dynamically bind data from the beginning. In the HT vector JSON format, the color, size, angle, and other parameters of any graphic element can be dynamically bound to business data, such as the fan blades of a water pump, we only need to bind the rotation Angle of the fan blade to a certain attribute of Data, then the user only needs to set the angle to this attribute during running, and the water pump fan blades on the interface are automatically rotated, similarly, the PieChart Rotation Angle and whether or not the two hollow parameters are bound to the business data. In this way, when you drag the graph and double-click it, changing the corresponding business data elements will automatically change the rendering effect:

  The dynamic nature of vectors is also used for dynamic skin replacement. Traditional skin replacement users need to allow artists to make images of different colors, css and other resources. users need to remotely download dynamic images during switching, the HT skin replacement can be performed locally, without the need for server requests, or even the customer can provide color la, allowing users to dynamically switch to experience any color matching.

  After reading this article, we should understand why we need to repeatedly define and implement the vector wheel. Here we only propose the HT for Web of Hightopo to solve the graphic design problem in the field of monitoring, there is a unique implementation mechanism for everyone to think about. Radish and cabbage have their own love. This article is not about the argument between DOM components and the 2D Advantages and Disadvantages of Cavnas. SVG does have good applications such as highcharts, HT has successfully implemented the Canvas design for all components, while popular general components such as Sencha and Kendoui have developed well by DOM, therefore, the selection of the design scheme is not decisive in many cases. The key is to be careful. As long as you carefully implement it, you can make a wonderful design path.

  In the end, it is still easy to accept. In fact, vector is not so omnipotent, and ps is still very powerful. artists can use ps to quickly build pictures with various meticulous effects, the simple vector format cannot be described in many cases. Therefore, vector only solves some problems in the field of monitoring and reduces the workload of programmers, HT has made great efforts to solve these problems!