CN109189512B - Data graphical editing interface method - Google Patents
Data graphical editing interface method Download PDFInfo
- Publication number
- CN109189512B CN109189512B CN201810689884.4A CN201810689884A CN109189512B CN 109189512 B CN109189512 B CN 109189512B CN 201810689884 A CN201810689884 A CN 201810689884A CN 109189512 B CN109189512 B CN 109189512B
- Authority
- CN
- China
- Prior art keywords
- data
- display
- layer
- database
- processing logic
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a graphical data editing interface method. According to the method, the data interface display and functions of data processing logic, data storage and the like are decoupled, dynamic design of a front-end data display layer is realized in a layered processing and dynamic association mode, the data processing logic is dynamically loaded according to the requirements of the data display layer, data are obtained from a data storage layer and are submitted to the data display layer for display after processing, and therefore the dynamic drag type design function of the data display interface is realized. The method of the invention realizes the relationship of mutual connection and mutual independence between the data storage layer, the data processing layer and the data display layer, and each layer can be independently evolved and updated without influencing the function and normal operation of the related layer. The method has the characteristics of intuition, convenience, interactivity, fluency and the like.
Description
Technical Field
The invention belongs to the technical field of data visualization, and particularly relates to a graphical data editing interface method.
Background
Compared with the traditional chart and digital display mode, the data visualization is dedicated to the more vivid and friendly form, and the business insight hidden behind the complicated and transient data is presented in real time. No matter in retail, logistics, electric power, water conservancy, environmental protection, or traffic fields, data visualization is realized through imaging to help business personnel discover and diagnose business problems, and the data visualization becomes an indispensable link in large data solutions.
The data graphical interface technology enables users to learn, understand and use data more easily, is the main development direction of the current high-quality graphical interface, and because the development period of the graphical interface is long and the development cost is high, about 75% of codes of the graphical interface with high quality are related to the interface. Therefore, the invention provides a data graphical editing interface method, through the method, programming is not needed, and the data graphical interface can be easily established through simple dragging operation, so that unnecessary interface code development work is avoided, and the system development cost is reduced.
Gml (game Maker language) is an interpreted programming language. It is designed as a scripting language for a Game engine called "GameMaker", originally created by Mark overlars, to supplement the button drag and drop operating system used in GameMaker. However, in the latest version, all button drags and drops are converted to GML, rather than being separate therefrom.
GML is highly integrated with the Game Maker environment. Typically, elements like sprite images and sounds are organized in the IDE of Game Maker (although they may also be loaded from an external file). The framework of the Game Maker aims to process things such as event detection, level design and object configuration without manually writing codes, and the problem of long code length is reduced to the greatest extent through intuitive interface functions.
WebGL (full-write Web Graphics Library) is a 3D drawing protocol, the drawing technical standard allows JavaScript and OpenGL ES 2.0 to be combined together, and by adding one JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that Web developers can more smoothly display 3D scenes and models in a browser by means of a system display card, and complicated navigation and data visualization can be created. Obviously, the WebGL technical standard eliminates the trouble of developing web page-specific rendering plug-ins, can be used to create web site pages with complex 3D structures, and can even be used to design 3D web games, and the like.
The currently known data graphical interface technology is tableau and row, but still has many problems and faces huge challenges.
The problems with Tableau are: the method has the advantages of requiring input data types, being slow to operate, supporting a single terminal and only supporting pc. Row has problems that: the data assembly is single, and the operation is complex.
Disclosure of Invention
In order to solve the problems of strict requirements on input data types, single support terminal, single data component and the like in the conventional data graphical interface technology, the invention provides a data graphical editing interface method, which decouples the functions of data interface display, data processing logic, data storage and the like, realizes the dynamic design of a front-end data display layer in a layered processing and dynamic association mode, dynamically loads the data processing logic according to the requirements of the data display layer, acquires data from a data storage layer, and submits the data to the data display layer for display after processing. The method realizes the relationship of mutual connection and mutual independence among the data storage, data processing and data display layers, and each layer can independently perform evolution and updating without influencing the function and normal operation of the related layer.
In order to achieve the aim, the invention adopts the following technical scheme:
a data graphical editing interface method is characterized in that functions of data interface display, data processing logic, data storage and the like are decoupled, dynamic design of a front-end data display layer is achieved through a layered processing and dynamic association mode, the data processing logic is dynamically loaded according to requirements of the data display layer, data are obtained from a data storage layer and are submitted to the data display layer for display after processing, and therefore the dynamic drag type design function of the data display interface is achieved.
A data graphical editing interface method divides a logic structure of a system into five layers, namely a data storage layer, a data engine docking layer, a data algorithm layer, a service layer and a presentation layer from bottom to top. The display layer supports a user to design a data display interface in a dynamic dragging mode, the service layer analyzes the design requirement of the display layer, the data algorithm layer is called, the data engine docking layer is called by the data algorithm layer to read data from the data storage layer, the data is processed, the processed data are transmitted to the service layer, and the service layer transmits the data to the display layer for dynamic display.
The data storage layer comprises MySQL, ORACLE, SQLSERVER, data API, CVS, big data API, MongoDB and the like.
A graphical editing interface method for data, the method comprising the steps of:
1) designing an interface;
2) setting and generating data;
3) designing and releasing an interface;
4) and loading and displaying data.
Referring to fig. 1, the workflow of data setup and generation is as follows:
(1) configuring various data sources by a user, wherein the configuration comprises the setting of connection parameters, user information and service information;
(2) storing the setting information of various data sources in a database storing data processing logic;
(3) calling a data proxy engine;
(4) the data agent engine checks whether the set data exists in the display database;
(5) if the set data exists in the display database, the data agent engine analyzes whether the data is set to be not updated;
(6) if the data is set to be not updated, the data agent engine reads the data from the display database and transmits the data to a data cache pool of the display layer through a data transmission tool;
(7) the display layer extracts data from the data buffer pool for display, and jumps to the step (12);
(8) if the data in the step (6) is not set to be not updated, the data agent engine calls a data analysis logic to perform update operation on the data, stores an update result into the display database, transmits the data to a data cache pool of a display layer through a data transmission tool, and jumps to the step (7);
(9) if the data agent engine checks that the set data does not exist in the display database in the step (4), the data agent engine checks whether the display database has data obtained through calculation;
(10) if the display database has the calculated data, the data agent engine reads the data from the display database, transmits the data to a data cache pool of a display layer through a data transmission tool, and jumps to the step (7);
(11) if the display database does not contain the calculated data, the data agent engine calls a data calculation program to calculate the data and then stores the result into the display database, meanwhile, the data is transmitted to a data cache pool of a display layer through a data transmission tool, and the step (7) is skipped;
(12) the data setting and generating process ends.
Referring to fig. 2, the workflow of the interface design release is as follows:
(1) the user clicks the "publish" button;
(2) the display layer carries out logic check, and if error configuration exists, exception is prompted;
(3) if no error configuration exists, calling a service layer to generate a basic layout, wherein the basic layout comprises reading data processing logic structure data from a database for storing data processing logic and reading non-dynamic data from a display database for storing display data;
(4) in the processing process of the step (3), if an error occurs, an exception is prompted;
(5) in the processing process of the step (3), if no error occurs, packing the layout data, the non-dynamic data and the processing logic structure data into static resources;
(6) the interface design release process ends.
Referring to fig. 3, the data loading and display workflow is as follows:
(1) opening a webpage;
(2) loading processing logic structure data and static data in the static data resources;
(3) checking whether there is data to be updated by polling;
(4) if no data needing to be polled for updating is available, presenting static data on the webpage, and jumping to the step (10);
(5) if the data needing to be updated is polled, checking whether a thread for updating the data exists;
(6) if the thread for updating the data exists, calling the thread to perform polling updating on the data;
(7) the data updating thread stores the updated data into a display database, simultaneously transmits the data to a webpage for display through a data transmission tool, and jumps to the step (10);
(8) if no thread for updating the data exists, loading the data updating processing logic from a database storing the data processing logic;
(9) according to the requirement of the data updating processing logic, starting a data updating process to update the data, and skipping to the step (7);
(10) the data presentation process ends.
Preferably, the database storing the data processing logic is MySQL.
Preferably, the display database is MongoDB.
Preferably, the data processing logic structure data is JSON format data.
Preferably, the data transfer tool is Socket.
Preferably, the method of the invention adopts GML as spatial data conversion description language of different data models, and adopts WebGL to provide hardware 3D accelerated rendering function.
The invention has the advantages and beneficial effects that:
1) intuition: the data can be visually and vividly presented without encoding.
2) Convenience: and dragging can finish the style editing and data configuration.
3) Interactivity: the interaction between the user and the data is realized, and the data control by the user is convenient.
4) Fluency: compared with other display methods, the running speed is increased by 1-2 s.
Drawings
Fig. 1 is a flow chart of data setting and generation in a data graphical editing interface method according to the present invention.
Fig. 2 is a design release flowchart in a data graphical editing interface method according to the present invention.
Fig. 3 is a flow chart of data loading and display in the data graphical editing interface method according to the present invention.
Detailed Description
The present invention will be further described with reference to the following examples.
Example 1
A graphical editing interface method for data, the method comprising the steps of:
1) designing an interface;
2) setting and generating data;
3) designing and releasing an interface;
4) and loading and displaying data.
Referring to fig. 1, the workflow of data setup and generation is as follows:
(1) the user configures the ORACLE data source, including setting connection parameters, user information and service information;
(2) storing the setting information of the ORACLE data source into a MySQL database storing data processing logic;
(3) calling a data proxy engine;
(4) the data agent engine checks whether the set data exists in a display database MongoDB;
(5) if the set data exists in the display database MongoDB, the data agent engine analyzes whether the data is set not to be updated;
(6) if the data is set to be not updated, the data agent engine reads the data from the display database MongoDB and transmits the data to a data cache pool of a display layer through a data transmission tool Socket;
(7) the display layer extracts data from the data buffer pool for display, and jumps to the step (12);
(8) if the data in the step (6) is not set to be not updated, the data agent engine calls a data analysis logic to perform update operation on the data, stores the update result into a display database MongoDB, simultaneously transmits the data to a data cache pool of a display layer through a data transmission tool Socket, and jumps to the step (7);
(9) if the data proxy engine checks that the display database MongoDB does not have the set data in the step (4), the data proxy engine checks whether the display database MongoDB has the calculated data or not;
(10) if the display database MongoDB has the calculated data, the data agent engine reads the data from the display database MongoDB, transmits the data to a data cache pool of a display layer through a data transmission tool Socket, and jumps to the step (7);
(11) if the display database MongoDB has no data obtained through calculation, the data agent engine calls a data calculation program to calculate the data and then stores the result into the display database MongoDB, meanwhile, the data is transmitted to a data cache pool of a display layer through a data transmission tool Socket, and the step (7) is skipped;
(12) the data setting and generating process ends.
Referring to fig. 2, the workflow of the interface design release is as follows:
(1) the user clicks the "publish" button;
(2) the display layer carries out logic check, and if error configuration exists, exception is prompted;
(3) if no error configuration exists, calling a service layer to generate basic layout, wherein the basic layout comprises reading JSON data of a data processing logic structure from a database MySQL for storing data processing logic and reading non-dynamic data from a display database MongoDB for storing display data;
(4) in the processing process of the step (3), if an error occurs, an exception is prompted;
(5) in the processing process of the step (3), if no error occurs, packing the layout data, the non-dynamic data and the processing logic structure JSON data into static resources;
(6) the interface design release process ends.
Referring to fig. 3, the data loading and display workflow is as follows:
(1) opening a webpage;
(2) loading processing logic structure JSON data and static data in the static resource;
(3) checking whether there is data to be updated by polling;
(4) if no data needing to be polled for updating is available, presenting static data on the webpage, and jumping to the step (10);
(5) if the data needing to be updated is polled, checking whether a thread for updating the data exists;
(6) if the thread for updating the data exists, calling the thread to perform polling updating on the data;
(7) the data updating thread stores the updated data into a display database MongoDB, simultaneously transmits the data to a webpage for display through a data transmission tool Socket, and jumps to the step (10);
(8) if the thread for updating the data does not exist, loading data updating processing logic JSON format data from a database MySQL storing the data processing logic;
(9) according to the requirement of data in a JSON format of the data updating processing logic, starting a data updating process to update the data, and skipping to the step (7);
(10) the data presentation process ends.
Finally, it should be noted that: it should be understood that the above examples are only for clearly illustrating the present invention and are not intended to limit the embodiments. Other variations and modifications will be apparent to persons skilled in the art in light of the above description. And are neither required nor exhaustive of all embodiments. And obvious variations or modifications therefrom are intended to be within the scope of the invention.
Claims (7)
1. A data graphical editing interface method is characterized in that: the method decouples the data interface display with the data processing logic and data storage functions, divides the logic structure of the system into five layers, and respectively comprises a data storage layer, a data engine docking layer, a data algorithm layer, a service layer and a display layer from bottom to top;
the display layer supports a user to design a data display interface in a dynamic dragging mode;
the service layer analyzes the design requirement of the presentation layer and calls the data algorithm layer;
the data algorithm layer calls the data engine docking layer to read data from the data storage layer, processes the data, transmits the processed data to the service layer, and transmits the data to the presentation layer for dynamic presentation;
the method comprises the following steps:
1) designing an interface;
2) setting and generating data;
3) designing and releasing an interface; and
4) loading and displaying data;
the workflow of the data setting and generation is as follows:
(1) configuring various data sources by a user, wherein the configuration comprises the setting of connection parameters, user information and service information;
(2) storing the setting information of various data sources in a database storing data processing logic;
(3) calling a data proxy engine;
(4) the data agent engine checks whether the set data exists in the display database;
(5) if the set data exists in the display database, the data agent engine analyzes whether the set data is set not to be updated;
(6) if the data is set to be not updated, the data agent engine reads the data from the display database and transmits the data to a data cache pool of the display layer through a data transmission tool;
(7) the display layer extracts data from the data buffer pool for display, and jumps to the step (12);
(8) if the data in the step (6) is not set to be not updated, the data agent engine calls a data analysis logic, updates the data, stores the update result into the display database, transmits the updated result data to the data cache pool of the display layer through a data transmission tool, and jumps to the step (7);
(9) if the data agent engine checks that the set data does not exist in the display database in the step (4), the data agent engine checks whether the display database has data obtained through calculation;
(10) if the display database has the calculated data, the data agent engine reads the data from the display database, transmits the calculated data to the data cache pool of the display layer through a data transmission tool, and jumps to the step (7);
(11) if the display database does not contain the calculated data, the data agent engine calls a data calculation program to calculate the data and then stores the result into the display database, meanwhile, the calculated result data is transmitted to a data cache pool of the display layer through a data transmission tool, and the step (7) is skipped; and
(12) the data setting and generating process ends.
2. A graphical editing interface method for data according to claim 1, characterized by: the data storage layer comprises MySQL, ORACLE, SQLSERVER, a data API, CVS, a big data API and MongoDB.
3. The method for the graphical data editing interface of claim 1, wherein the workflow of the interface design release is as follows:
(1) the user clicks the "publish" button;
(2) the display layer carries out logic check, and if error configuration exists, exception is prompted;
(3) if no error configuration exists, calling a service layer to generate a basic layout, wherein the basic layout comprises reading data processing logic structure data from a database for storing data processing logic and reading non-dynamic data from a display database for storing display data;
(4) in the processing process of the step (3), if an error occurs, an exception is prompted;
(5) in the processing process of the step (3), if no error occurs, packing the layout data, the non-dynamic data and the processing logic structure data into static resources;
(6) the interface design release process ends.
4. The graphical data editing interface method of claim 1, wherein the workflow of data loading and display is as follows:
(1) opening a webpage;
(2) loading processing logic structure data and non-dynamic data in static resources;
(3) checking whether there is data to be updated by polling;
(4) if no data needing to be updated is polled, presenting non-dynamic data on the webpage, and jumping to the step (10);
(5) if the data needing to be updated is polled, checking whether a thread for updating the data exists;
(6) if the thread for updating the data exists, calling the thread to perform polling updating on the data;
(7) the data updating thread stores the updated data into a display database, transmits the updated data to a webpage for display through a data transmission tool, and jumps to the step (10);
(8) if no thread for updating the data exists, loading the data updating processing logic from a database storing the data processing logic;
(9) according to the requirement of the data updating processing logic, starting a data updating thread to update the data, and jumping to the step (7);
(10) the data loading and displaying process ends.
5. A graphical editing interface method for data according to claim 1, characterized by: the database for storing the data processing logic is MySQL, and the display database is MongoDB.
6. A graphical editing interface method for data according to claim 3, characterized by: the data processing logic structure data is JSON format data.
7. A graphical editing interface method for data according to claim 4, wherein: and the data transmission tool selects Socket.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810689884.4A CN109189512B (en) | 2018-06-28 | 2018-06-28 | Data graphical editing interface method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810689884.4A CN109189512B (en) | 2018-06-28 | 2018-06-28 | Data graphical editing interface method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109189512A CN109189512A (en) | 2019-01-11 |
| CN109189512B true CN109189512B (en) | 2021-12-28 |
Family
ID=64948623
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810689884.4A Active CN109189512B (en) | 2018-06-28 | 2018-06-28 | Data graphical editing interface method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109189512B (en) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8156155B1 (en) * | 2008-01-25 | 2012-04-10 | Intuit Inc. | Method and apparatus for displaying data models and data-model instances |
| CN102508706A (en) * | 2011-11-18 | 2012-06-20 | 北京航空航天大学 | Multi-source data integrating platform and establishing method thereof |
| CN103186567A (en) * | 2011-12-28 | 2013-07-03 | 金蝶软件（中国）有限公司 | Graphical processing method and system for data |
| CN103473041A (en) * | 2013-07-12 | 2013-12-25 | 西北工业大学 | Visualized data processing method and system |
| CN105653644A (en) * | 2015-12-28 | 2016-06-08 | 北京中电普华信息技术有限公司 | Page constructor and page construction method |
| CN107193951A (en) * | 2017-05-22 | 2017-09-22 | 环球智达科技（北京）有限公司 | WEB data visualization methods based on relational database |
| CN107391114A (en) * | 2017-06-27 | 2017-11-24 | 阿里巴巴集团控股有限公司 | The page visualizes rendering intent and device |
| US20180039399A1 (en) * | 2014-12-29 | 2018-02-08 | Palantir Technologies Inc. | Interactive user interface for dynamically updating data and data analysis and query processing |
| CN107766043A (en) * | 2017-11-08 | 2018-03-06 | 广东亿迅科技有限公司 | A kind of realization method and system based on large-size screen monitors data visualization |
-
2018
- 2018-06-28 CN CN201810689884.4A patent/CN109189512B/en active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8156155B1 (en) * | 2008-01-25 | 2012-04-10 | Intuit Inc. | Method and apparatus for displaying data models and data-model instances |
| CN102508706A (en) * | 2011-11-18 | 2012-06-20 | 北京航空航天大学 | Multi-source data integrating platform and establishing method thereof |
| CN103186567A (en) * | 2011-12-28 | 2013-07-03 | 金蝶软件（中国）有限公司 | Graphical processing method and system for data |
| CN103473041A (en) * | 2013-07-12 | 2013-12-25 | 西北工业大学 | Visualized data processing method and system |
| US20180039399A1 (en) * | 2014-12-29 | 2018-02-08 | Palantir Technologies Inc. | Interactive user interface for dynamically updating data and data analysis and query processing |
| CN105653644A (en) * | 2015-12-28 | 2016-06-08 | 北京中电普华信息技术有限公司 | Page constructor and page construction method |
| CN107193951A (en) * | 2017-05-22 | 2017-09-22 | 环球智达科技（北京）有限公司 | WEB data visualization methods based on relational database |
| CN107391114A (en) * | 2017-06-27 | 2017-11-24 | 阿里巴巴集团控股有限公司 | The page visualizes rendering intent and device |
| CN107766043A (en) * | 2017-11-08 | 2018-03-06 | 广东亿迅科技有限公司 | A kind of realization method and system based on large-size screen monitors data visualization |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109189512A (en) | 2019-01-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107832108B (en) | Rendering method and device of 3D canvas webpage elements and electronic equipment | |
| US10255044B2 (en) | Method and system for modifying deployed applications | |
| KR101787588B1 (en) | Manipulating graphical objects | |
| CN106873991A (en) | Page generation method and device | |
| JP6149165B2 (en) | Chart conversion system and method using metadata | |
| US20130117656A1 (en) | Conversion of web template designs | |
| US20130117657A1 (en) | Designing interactive web templates | |
| CN107908608B (en) | Method, storage medium and device for converting and displaying manuscript in three-dimensional space | |
| US20130262987A1 (en) | Document processing method, apparatus and editor | |
| CN112364496B (en) | Avionics simulation panel generation system based on HTML5 and VUE technologies | |
| US20210342135A1 (en) | Method for generating a binding between a c/c++ library and an interpreted language, and carrying out said method to transform a three-dimensional (3d) model | |
| US20120260237A1 (en) | Portable Business Language and Automated Software Application Development System | |
| Halliday | Vue. js 2 Design Patterns and Best Practices: Build enterprise-ready, modular Vue. js applications with Vuex and Nuxt | |
| KR20140051015A (en) | Apparatus ofautomating software development for smart device, method of the same and storage media storing the same | |
| CN109189512B (en) | Data graphical editing interface method | |
| KR20090000199A (en) | Web server application framework, web application processing method using the framework and computer readable medium processing the method | |
| US10846061B2 (en) | Development environment for real-time application development | |
| US9519985B2 (en) | Generating mobile-friendly animations | |
| CN109582580B (en) | System, method and apparatus for debugging pages | |
| CN113888684A (en) | Method and apparatus for graphics rendering and computer storage medium | |
| CN113296759A (en) | User interface processing method, user interface processing system, user interface processing device, and storage medium | |
| CN113190509A (en) | Animation processing method and device, electronic equipment and computer readable storage medium | |
| US20190163730A1 (en) | Systems and methods for a mobile device application having a markup-language document | |
| GB2523074A (en) | A method and system for modifying deployed applications | |
| CN112035106A (en) | Multi-platform synchronization method, device, medium and electronic equipment for homologous data |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |