CN106775766B - System and method for developing human-computer interaction interface on line in general visual manner - Google Patents
System and method for developing human-computer interaction interface on line in general visual manner Download PDFInfo
- Publication number
- CN106775766B CN106775766B CN201710021668.8A CN201710021668A CN106775766B CN 106775766 B CN106775766 B CN 106775766B CN 201710021668 A CN201710021668 A CN 201710021668A CN 106775766 B CN106775766 B CN 106775766B
- Authority
- CN
- China
- Prior art keywords
- human
- computer
- development
- interface
- universal
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Abstract
The invention discloses a system and a method for developing a human-computer interaction interface in an online universal visual manner. The system comprises a visual human-computer interface interaction development system, an online system and a human-computer interaction interface display system; the visual human-computer interface interaction development system and the online system export a universal human-computer interface data file, and the universal human-computer interface data file is analyzed and displayed through the human-computer interaction interface display system. The invention can complete the development of the universal human-computer interface on line by dragging a control and other code-free development means, and can universally use data files for other display systems to display and execute. On one hand, the development difficulty is reduced, on the other hand, the developed human-computer interface can be reused on different platforms, and manpower and material resources are saved.
Description
Technical Field
The invention belongs to the technical field of visualization development, particularly relates to an online universal system for visualizing and developing a human-computer interaction interface, and particularly relates to a method and a system for designing and manufacturing a universal human-computer interaction interface at a web end in a form of dragging a control and adding textures.
Background
Human-computer interfaces are widely used in various fields of human-computer interaction, including industrial control, smart home, automotive electronics, and the like, and the human-computer interfaces are required to exist as long as human-machine interaction is involved. The traditional method for developing the human-computer interface mainly writes codes or writes codes after a control is dragged to determine the layout, and the access threshold is high and complex. Meanwhile, different development modes are targeted to the products of the platform, so that each developed human-computer interface is limited by the application platform.
Qt is a cross-platform C + + gui development framework developed by fancy science in 1991. It can be used to develop both GUI and non-GUI programs, such as console tools and servers. Qt is an Object-oriented framework that uses special code to generate extensions called Meta Object Compiler (moc) and some macros, which are easy to extend, allowing components to be programmed.
The method has the disadvantages that the method provides the function of visually developing the application, however, the interface and the human-computer interaction need to be designed and realized by writing a C + + program, an embedded platform is required to support C + +, and cloud development cannot be achieved.
QNX is a commercial Unix-like real-time operating system that conforms to the POSIX specification, with the target market being primarily embedded-oriented. It is probably one of the most successful microkernel operating systems. QNX was established in 1980 and is a well-known embedded system developer in canada.
The application range of QNX is very wide, and comprises: the control system comprises a music and media function for controlling the Porsche sports car, a nuclear power station, a control system of the American army unmanned Crusher tank, and a BlackBerry PlayBook tablet computer of RIM company.
The method has the disadvantages that a human-computer interface system is required to run the QNX system, and a large amount of C + + or similar codes are required to be written for interface making and logic interaction design.
Disclosure of Invention
The invention aims to provide a system and a method for developing a human-computer interaction interface in an online universal and visual manner, so that cloud development is realized, and a universal human-computer interaction interface is developed.
In order to solve the technical problems, the invention is realized by the following technical scheme:
the invention relates to an online universal visualized development human-computer interaction interface system, which comprises a visualized human-computer interface interaction development system, an online system and a human-computer interaction interface display system; the visual human-computer interface interaction development system and the online system export a universal human-computer interface data file, and the universal human-computer interface data file is analyzed and displayed through the human-computer interaction interface display system.
Preferably, the hierarchy of the human-computer interaction interface display system comprises:
engineering, which consists of a plurality of pages;
a page consisting of a plurality of canvases;
the canvas consists of a plurality of layers, and the size and the position of each layer are consistent with those of the canvas;
the layer comprises a plurality of controls, and each control is a minimum basic logic unit;
the control comprises a button, a slider and a progress bar, and is used for configuring textures;
and the texture is used for displaying the appearance of the human-computer interaction interface.
Preferably, the visualization human-computer interface interaction development system comprises the following components:
a menu bar: for selecting a desired function;
thumbnail column: the system is used for previewing each page of the project in real time;
editing area: the user can select and drag the control through a mouse or a finger;
property editing area: the control configuration method comprises the following steps of configuring properties of a control, including a geometric property and a texture property;
page structure tree: for visualizing the organization of the current page.
Preferably, the online system comprises:
a registration login module: for registration and login of a user;
the engineering management module: for managing the project of the user.
An online universal visualization development man-machine interaction method comprises the following steps:
step one, registering and logging in a system;
step two, creating a new project and entering a visual development system;
adding a page, dragging a control and configuring attributes to manufacture a human-computer interaction interface;
step four, generating a general data file;
and fifthly, the human-computer interface display system analyzes and executes the general data file.
The invention has the following beneficial effects:
the invention can complete the development of the universal human-computer interface on line by dragging a control and other code-free development means, and can universally use data files for other display systems to display and execute. On one hand, the development difficulty is reduced, on the other hand, the developed human-computer interface can be reused on different platforms, and manpower and material resources are saved.
Of course, it is not necessary for any product in which the invention is practiced to achieve all of the above-described advantages at the same time.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a system diagram of an online universal visual development human-computer interaction interface according to the present invention;
FIG. 2 is a schematic diagram of a generic human-machine interface hierarchy;
FIG. 3 is a flowchart of the development system for the online universal visual human-computer interaction interface.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The reference numbers in the drawings represent:
1. a user.
2. An online universal visual human-computer interface interaction development system.
3. And (5) visualizing the human-computer interface interaction development system.
4. An online system.
5. A universal human machine interface data file.
6. A human-computer interaction interface display system.
7. And (5) engineering.
8. And (4) pages.
9. A canvas.
10. And (6) coating.
11. And (6) controlling.
12. And (4) texture.
13. And (4) registering and logging in.
14. A project is created.
15. And entering a visual development system.
16. And adding pages and controls.
17. Configuration attributes, events.
18. And exporting the universal data file.
19. And the human-computer interface display system analyzes and displays.
Referring to fig. 1, the present invention is an online universal visualized development human-computer interaction interface system and method, including a visualized human-computer interface interaction development system, an online system and a human-computer interaction interface display system; the system can develop the visual human-computer interface, namely, the system adopts the modes of adding and dragging a control, and the development interface comprises a menu bar, a thumbnail bar, an editing area, an attribute configuration bar and a page structure bar.
As shown in fig. 2, in order to develop a universal human-machine interface, the online universal visual development human-machine interface system adopts a cross-platform universal data format JSON. The human-machine interface data structure is as follows:
engineering, which consists of a plurality of pages; the project controls the attributes of the page such as resolution.
The page is composed of a plurality of canvases and also comprises a background of the page.
The canvas consists of a plurality of layers, and the size and the position of each layer are consistent with those of the canvas;
the layer comprises a plurality of controls, and each control is a minimum basic logic unit;
the control comprises different types such as buttons, sliders and progress bars, and different requirements can be met through customization. Controls in addition to the logical differences, textures may be configured to achieve the differences in appearance. Meanwhile, the controls can configure the actions of the controls, and linkage among the controls is achieved.
And the texture is used for displaying the appearance of the human-computer interaction interface.
The visual human-computer interface interaction development system comprises the following components:
a menu bar: for selecting a desired function; including hold, undo, and redo, etc.
Thumbnail column: the system is used for previewing each page of the project in real time;
editing area: the user can select and drag the control through a mouse or a finger;
property editing area: the control configuration method comprises the following steps of configuring properties of a control, including a geometric property and a texture property;
page structure tree: for visualizing the organization of the current page.
Wherein, online system includes:
a registration login module: for registration and login of a user;
the engineering management module: for managing the project of the user.
Referring to fig. 1, a method for online universal visualization development human-computer interaction includes the following steps:
step one, registering and logging in a system;
step two, creating a new project and entering a visual development system;
adding a page, dragging a control and configuring attributes to manufacture a human-computer interaction interface;
step four, generating a general data file;
and fifthly, the human-computer interface display system analyzes and executes the general data file.
It should be noted that, in the above system embodiment, each included unit is only divided according to functional logic, but is not limited to the above division as long as the corresponding function can be implemented; in addition, specific names of the functional units are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present invention.
In addition, it can be understood by those skilled in the art that all or part of the steps in the method for implementing the embodiments described above can be implemented by instructing the relevant hardware through a program, and the corresponding program can be stored in a computer-readable storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, or the like.
The preferred embodiments of the invention disclosed above are intended to be illustrative only. The preferred embodiments are not intended to be exhaustive or to limit the invention to the precise embodiments disclosed. Obviously, many modifications and variations are possible in light of the above teaching. The embodiments were chosen and described in order to best explain the principles of the invention and the practical application, to thereby enable others skilled in the art to best utilize the invention. The invention is limited only by the claims and their full scope and equivalents.
Claims (1)
1. An online universal visualized development human-computer interaction interface system is characterized by comprising a visualized human-computer interface interaction development system, an online system and a human-computer interaction interface display system; the visual human-computer interface interaction development system and the online system export a universal human-computer interface data file, and the universal human-computer interface data file is analyzed and displayed through a human-computer interaction interface display system;
the online universal visualized development human-computer interaction interface system develops a universal human-computer interface and adopts a cross-platform universal data format JSON;
the online universal visual development human-computer interaction interface system carries out visual human-computer interface development and adopts the forms of adding a control and dragging the control for development;
the hierarchical structure of the human-computer interaction interface display system comprises:
engineering, which consists of a plurality of pages;
a page consisting of a plurality of canvases;
the canvas consists of a plurality of layers, and the size and the position of each layer are consistent with those of the canvas;
the layer comprises a plurality of controls, and each control is a minimum basic logic unit;
the control comprises a button, a slider and a progress bar, and is used for configuring textures;
the texture is used for displaying the appearance of the human-computer interaction interface;
the visual human-computer interface interaction development system comprises the following components:
a menu bar: for selecting a desired function;
thumbnail column: the system is used for previewing each page of the project in real time;
editing area: the user can select and drag the control through a mouse or a finger;
property editing area: the control configuration method comprises the following steps of configuring properties of a control, including a geometric property and a texture property;
page structure tree: an organization structure for visualizing the current page;
the online system includes:
a registration login module: for registration and login of a user;
the engineering management module: for managing the project of the user.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710021668.8A CN106775766B (en) | 2017-01-12 | 2017-01-12 | System and method for developing human-computer interaction interface on line in general visual manner |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710021668.8A CN106775766B (en) | 2017-01-12 | 2017-01-12 | System and method for developing human-computer interaction interface on line in general visual manner |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106775766A CN106775766A (en) | 2017-05-31 |
| CN106775766B true CN106775766B (en) | 2020-08-11 |
Family
ID=58947794
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710021668.8A Active CN106775766B (en) | 2017-01-12 | 2017-01-12 | System and method for developing human-computer interaction interface on line in general visual manner |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106775766B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109582304A (en) * | 2017-09-28 | 2019-04-05 | 北京迪文科技有限公司 | A kind of UI control generation method and device based on man-machine interactive system |
| CN108469954A (en) * | 2018-03-16 | 2018-08-31 | 宁波帝洲自动化科技有限公司 | A kind of HMI visualization systems |
| CN108595169B (en) * | 2018-04-28 | 2021-07-27 | 南京南瑞继保电气有限公司 | Visual programming method, cloud server and storage medium |
| CN109144492A (en) * | 2018-06-23 | 2019-01-04 | 上海泽阳智能科技有限公司 | A kind of oriented object development system |
| CN108984166A (en) * | 2018-06-23 | 2018-12-11 | 上海泽阳智能科技有限公司 | A kind of quick tool System for interactive software |
| CN109669688A (en) * | 2018-09-26 | 2019-04-23 | 深圳壹账通智能科技有限公司 | Based on visual software development methodology, device, terminal device and storage medium |
| CN110806871B (en) * | 2019-10-22 | 2023-05-16 | 中国船舶重工集团公司第七一九研究所 | Configurable ship management system |
| CN111176627A (en) * | 2019-12-06 | 2020-05-19 | 深圳市科南软件有限公司 | Device and method for separating front end from back end based on micro-service |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101819529A (en) * | 2010-02-24 | 2010-09-01 | 上海引跑信息科技有限公司 | System and method for realizing visual development of workflow task interface |
| US9773264B2 (en) * | 2013-03-26 | 2017-09-26 | Blackberry Limited | Method for providing composite user interface controls and an online storefront for same |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103019731A (en) * | 2012-12-13 | 2013-04-03 | 长安大学 | Visual progress presentation software system |
| US9286038B2 (en) * | 2013-06-19 | 2016-03-15 | Microsoft Technology Licensing, Llc | Interface development and operation |
| CN104484171B (en) * | 2014-12-11 | 2018-05-29 | 深圳市路通网络技术有限公司 | Terminal interface design system, method and relevant device |
| CN104484189B (en) * | 2014-12-31 | 2018-07-10 | 北京拼图科技有限公司 | The structure and design method of a kind of application interface |
| CN104636139B (en) * | 2015-01-26 | 2018-05-15 | 北京邮电大学 | One kind visualizes cross-platform mobile application exploitation and generation system |
-
2017
- 2017-01-12 CN CN201710021668.8A patent/CN106775766B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101819529A (en) * | 2010-02-24 | 2010-09-01 | 上海引跑信息科技有限公司 | System and method for realizing visual development of workflow task interface |
| US9773264B2 (en) * | 2013-03-26 | 2017-09-26 | Blackberry Limited | Method for providing composite user interface controls and an online storefront for same |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106775766A (en) | 2017-05-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106775766B (en) | System and method for developing human-computer interaction interface on line in general visual manner | |
| Lipp et al. | Interactive visual editing of grammars for procedural architecture | |
| KR101669914B1 (en) | Ontological filtering using spatial boundary of 3d objects | |
| Tominski et al. | CGV—An interactive graph visualization system | |
| CN105653644A (en) | Page constructor and page construction method | |
| US8165711B2 (en) | Automated generation of garment construction specification | |
| CN112506502B (en) | Visual programming method, device, equipment and storage medium based on man-machine interaction | |
| KR20060070463A (en) | Product edition and simulation database system with user interactive graphical tool | |
| Liu et al. | Virtual DesignWorks—designing 3D CAD models via haptic interaction | |
| JPH0793527A (en) | Object-oriented graphic input and display system | |
| Nancel et al. | Causality: A conceptual model of interaction history | |
| CN110050270B (en) | System and method for visual traceability for product requirements | |
| CN103473041B (en) | A kind of visual data processing method and system | |
| CN111881662A (en) | Form generation method, device, processing equipment and storage medium | |
| CN109716294A (en) | With the user interface for moving mini label | |
| CN108140250A (en) | The Computerized method for the curved surface for representing clothes is created and edited on manikin in virtual three-dimensional environment | |
| CN101944021B (en) | Method and system for realizing graphical user interface | |
| CN102520935A (en) | Method for quickly developing user interface | |
| CN109191590A (en) | It is a kind of for making the processing system and processing method of virtual reality applications | |
| Victoria et al. | liteITD a MATLAB Graphical User Interface (GUI) program for topology design of continuum structures | |
| JP2018530052A (en) | Object selection system and object selection method | |
| CN104793927A (en) | Interface editing method and device | |
| Wenhua et al. | Studies on visual scene process system of aircraft assembly | |
| CN108762750A (en) | A kind of visualization interface generation method and system based on FMP models | |
| Onishi et al. | Interactive modeling of trees by using growth simulation |
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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 230000 F1 1401, room two, innovation industrial park, 800 Wangjiang West Road, Hefei, Anhui. Applicant after: Hefei speed Microelectronic Technology Co., Ltd. Address before: Room two, building F1, No. 800, innovation industrial park, No. 230088 Wangjiang West Road, high tech Zone, Hefei, Anhui Applicant before: Hefei Jiemei Electronic Technology Co., Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |