preface

Data visualization has become a hot topic in the present information era, and B/S tendency, also appear that many domestic applications on the web site, today to share a screen page is not the same style, with traditional dark blue is different, the design adopts the wine, pink and yellow collocation, joined the elements in some industries, Make your page unique. The unique adaptive mechanism of Hightopo also solves the problem that large screens need to be designed for resolution, and achieves the effect of using multiple screens on one page.



With the advancement of industry 4.0 reform, the era of using information technology to promote industrial reform is gradually approaching, that is, the era of intelligence. With the trend of The Times, industrial Internet and 5G network gradually opened the curtain, data is no longer a simple source of data information, data can be combined with some visual interface as a carrier, real-time display feedback of the changes in the world. In many industries, we can through the control of the data reach the scene equipment maintenance effect, such as wisdom park, the construction of intelligent building, wind power monitoring of water system and other public facilities, data center construction of the visual system and so on, can carry through visual, data display and control.

HT for Web has independently developed powerful 2D and 3D rendering engines based on HTML5, providing rich display effects for visualization. Today we will use the Web configuration of HT for Web products of Hightopo (hereinafter referred to as HT) to introduce to you a large screen data visualization system built by the rich application of 2D configuration and the fusion of animation effects.

Interface introduction and effect preview

The drawings on the interface are adopted
HTThe unique design and the responsive layout of HT are used to divide and typeset, which can keep the same precision in the case of infinite zoom in and zoom out of pictures, and can adapt to the screen with different resolutions without blurriness. It can not only achieve perfect cross-platform, but also self-evident effect on large screen display. The corresponding data nodes and animation nodes are bound to show the operation of the data visualization system by docking data, and HT’s animation function HT.default.startanim () is added to drive data changes and animation display effects.

System analysis

Basic ideas of data visualization:

The basic idea of data visualization technology, is to each data item in the database as a single primitive elements, says a large number of data sets a data image, at the same time, the data values for each attribute in the form of multidimensional data, said data can be observed from different dimensions, thus further observation and analysis of data.

Basic means of data visualization:

1. Data visualization is a scientific and technological study on the visual representation of data. The visual representation of this data is defined as a kind of information extracted in a summary form, including various attributes and variables of the corresponding information unit. It is an evolving concept whose boundaries are constantly expanding. It refers to technically advanced techniques that allow visual interpretation of data through representation, modeling, and display of solids, surfaces, properties, and animations using graphics, image processing, computer vision, and user interfaces. Data visualization covers a much broader range of technical approaches than specific technical approaches such as stereo modeling.

2. Data visualization is mainly aimed at conveying and communicating information clearly and effectively by means of graphics. However, this does not mean that data visualization needs to be boring for its functional purpose, or extremely complex for the sake of being colorful. In order to communicate ideas and concepts effectively, aesthetic form and function need to go hand in hand, enabling deep insight into a fairly sparse and complex data set by visually communicating key aspects and features. However, designers often fail to strike the right balance between design and function, resulting in flashy data visualizations that fail to achieve their primary purpose, which is to communicate and communicate information.

3. Data visualization is closely related to information graphics, information visualization, scientific visualization and statistical graphics. Data visualization is an active and critical aspect of research, teaching, and development today. The term “data visualization” unites the established field of scientific visualization with the younger field of information visualization. HT, on the other hand, has a complete and rich 2D configuration for users to quickly get started and set up. It has a unique theme style design on display, which does not distort at various scales. In addition, the layout mechanism solves the display problem at different screen scales. Through the loading of data docking, we can build a complete set of data visualization system solutions, which should meet the needs of data display in various industries.

Effect of implementation

First, the diversification of theme style

HT has a unique design style and a variety of themes to choose from. In general, it not only has a fresh and simple light color style, but also has a cool and technological dark style. Matching with the project needs of users, it can create a unique and exclusive design for users. In terms of animation interaction, the implementation of HT is equally brilliant as the style design. Combined with the theme display in style, it integrates a large screen display of data visualization suitable for various screens, with distinct style subject and comfortable animation interaction.

The realization of theme style is based on HT’s unique drawing design mechanism, which can be applied to various screen resolutions during the implementation of data visualization system. System design process, for example, can be in personal computer under the display of drawings design and debug the program code development, when after the completion of the development phase, in the field of domestic decorate building or on the user’s display, don’t have to worry about the resolution changes will appear the distortion of the fuzzy problems, thus in the development of the project and build, It’s relatively easy for users to use. In addition, the DEVELOPMENT plug-in API developed by HT itself is also easy to use, which can realize the application of data visualization system in many industries.


Second, responsive (adaptive) layout

Layout function has always been one of the important function points of data visualization large screen, comfortable layout interface, can make people have a new feeling, with responsive (adaptive) layout, can take into account the screen of various sizes, will not make the overall typesetting disorder due to the change of proportion. The layout function is not only applicable to the overall layout of the large screen, but also can be completed in the form of 2/3D fusion and nesting on the left and right system data panels of the 3D scene data visualization system. In addition, the responsive (adaptive) layout can also be used in the arrangement of the panels, which can fully display the loaded data.



But automatic layout is not a silver bullet, complex situations still need manual layout, or make the necessary compromises on the business, according to the business even write special configuration algorithm to achieve the best effect, HT itself has to adapt to various occasions the layout of the mechanism, to complete the layout of the user in some special results specific layout.

Third, the transition of animation effect

Different animations will add more interesting interactive experience, and a comfortable panel interaction is inevitably inseparable from the implementation of animation. Excellent data visualization system is also in the same way. Through the presentation of data on the panel, on the one hand, the change of data drives animation interaction; on the other hand, animation interaction can also be represented by user experience such as suspension, click and double click, so as to maximize the improvement of user vision and physical examination.

The realization of animation effects can be encapsulated on HT’s original animation functions to match their own needs, such as fade-in and fade-out, clipping, shaking, rotation and numerical jumping. We can work hard on the function encapsulation of animation.



These animations mainly encapsulate a setValue() method to set the animation effect. When realizing the animation effect, the value of the property parameter change is set. In which, some parameter values are passed in, and attribute values are set according to the judgment of the type of data node:

  • Data: node where the animation is executed;
  • AccessType: the type of attribute involved in the animation;
  • Name: attribute name;
  • Value: Indicates the setting of a value.
With the animation property values wrapped, we can wrap some animation effects and use the setValue() method above to implement many animation effects.



For example, by encapsulating a clipping animation function, we simply pass in the animation node data, user-defined function Easing, and time Duration to drive the clipping property clip.percentage to the method call on the animation set value. Other interactive animations also rely on HT animation functions to encapsulate corresponding interactive animations.

The purpose of animation is to make moving data visually sensual and comfortable. And data carrying is the most critical part of the data visualization system, the implementation of a solution is for a set of user data on the industry of the embodiment of the management and maintenance, so the data of the part is vital, and HT data carry can adapt to all mainstream development data docking plan now, need not worry too much data docking problem, Only through the data collected by the back-end platform for system data access, you can make the data visualization embedded soul.

conclusion

Living in the era of big data, we have a lot of data sets waiting for us to explore. Through a series of data analysis, we can understand the development trend of many events, which can not only bring better life experience, but also predict the direction of events through data. Under the premise of the rapid development of the information age, data is an important information carrier. We can understand the data visualization system under the industrial control of an industry through data capture, supervision and maintenance.



HT has realized a set of elegant data visualization solutions with the accumulation of experience in many industries and the continuous improvement of products developed independently, such as: The coolest design of heat exchange station — Web SCADA industrial configuration software interface, with two different theme style built, interested partners can know about the classic case of data visualization.

2019 we also updated the hundreds of industrial Internet 2 d / 3 d visualization case set, here you can find many novel instance, can also find different industrial Internet: mp.weixin.qq.com/s/ZbhB6LO2k…

At the same time, you can also see more cases and results: www.hightopo.com/demos/index…