CN107203503A - A kind of method of real-time monitoring form applied to SVG interfaces - Google Patents
A kind of method of real-time monitoring form applied to SVG interfaces Download PDFInfo
- Publication number
- CN107203503A CN107203503A CN201710332571.9A CN201710332571A CN107203503A CN 107203503 A CN107203503 A CN 107203503A CN 201710332571 A CN201710332571 A CN 201710332571A CN 107203503 A CN107203503 A CN 107203503A
- Authority
- CN
- China
- Prior art keywords
- svg
- real
- file
- interfaces
- grid control
- 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.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/22—Indexing; Data structures therefor; Storage structures
- G06F16/2282—Tablespace storage structures; Management thereof
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a kind of method of the real-time monitoring form applied to SVG interfaces：Step 1, real-time grid control is edited in graphic editor, and the picture editted is preserved into the file format for meeting CIM/G specifications；Step 2, the SVG file that the file for meeting CIM/G specifications that step 1 is obtained is converted into meeting to SVG specifications；Step 3, the loading SVG file generation dynamic surveillance form in SVG monitoring interfaces.Borrow Database Properties and display properties that SVG file obtains CIM/G list pels, table interface is generated using outside JavaScript, real-time monitoring form on dynamic creation SVG interfaces, and configure monitoring form in real time and the method for the overlay order at SVG interfaces, solve in monitoring SVG interfaces, dynamic table display effect and using effect with the problem of display styles differ larger in graphic editor.The size of SVG file is reduced, performance is significantly improved, also achieve quick real-time SVG interfaces complicated and changeable, editor's layout and generation display.
Description
Technical field
The present invention relates to a kind of method of the real-time monitoring form applied to SVG interfaces.
Background technology
In dispatch automated system, the electric network data and figure of web browsing are all non-maintaining, so needing to dispatch
The figure and data of automated system are converted into SVG (Scalable Vector Graphic, SVG) form, are sent out by browser
Characters show.A kind of language for the two dimensional image that SVG is use XML to describe, it is a kind of polar plot of the opening based on XML
Picture, is the picture format designed for network described completely with plain text.In SVG specifications, fundamental figure is only provided
And method for drafting, the graphic element and attribute of the force device for the standardization for being exclusively used in power system are not defined, is realized with SVG
Simple dynamic interface is to be relatively easy to, if realizing the electric power monitoring of complexity and real-time dynamic table circle of analysis with SVG
Face is just extremely difficult.
In existing design, the way that dynamic table is realized with SVG is typically the complete display sample that form is described with SVG
Formula and display styles, whole dynamic table are described with SVG.This method size of code is huge and is not easy to write, while can cause SVG
File is bigger than normal, and picture loading velocity is slow, the form described with SVG in using effect and display effect with the row under graphics edition
Table pel has very big deviation, it is impossible to meet the demand that display and user use in real time.
The content of the invention
In view of the above-mentioned problems, a kind of method that the present invention provides real-time monitoring form applied to SVG interfaces, is solved
Monitor in SVG interfaces, dynamic table display effect and using effect with the problem of display styles differ larger in graphic editor.
When realizing monitoring form in real time, the size of SVG file is reduced, picture loading velocity is improved.
To realize above-mentioned technical purpose and the technique effect, the present invention is achieved through the following technical solutions：
A kind of method of real-time monitoring form applied to SVG interfaces, comprises the following steps：
Step 1, real-time grid control is edited in graphic editor, and the picture editted is preserved into meet CIM/G
The file format of specification；
Step 2, the SVG file that the file for meeting CIM/G specifications that step 1 is obtained is converted into meeting to SVG specifications；
Step 3, the loading SVG file generation dynamic surveillance form in SVG monitoring interfaces.
It is preferred that, in step 1, edit real-time grid control and comprise the following steps：
1.1) it is unique No. ID of grid control distribution；
1.2) the connection Database Properties of definition tables control；
1.3) the Show Styles attribute of configuration form control.
It is preferred that, step 2 specifically includes following steps：
2.1) message that graphic file updates is monitored；
2.2) message body is parsed, the graphic file name updated is obtained；
2.3) CIM/G graphic file, the SVG file that form pel is converted into being described with SVG, in SVG file are parsed
Middle two customized labels of increase identify the Database Properties and display properties of form.
It is preferred that, step 3 specifically includes following steps：
3.1) browser loading SVG file, reads the form data of SVG file；
3.2) dynamic creation shows the subwindow of form, the position of configuration form window and size；
3.3) configuration form subwindow and the overlay order of the levels at SVG interfaces；
3.4) list data in the Database Properties reading database in SVG file；
3.5) generate grid control and complete to configure according to display properties.
The beneficial effects of the invention are as follows：
Firstth, when the present invention is applied to the real-time monitoring form at SVG interfaces, performance is significantly improved.
Secondth, the present invention has abundant bandwagon effect and preferable user experience.
3rd, there is the real-time monitoring form at SVG interfaces of the invention What You See Is What You Get, the automatic picture that adapts to scale, supervise
The characteristics of depending on content dynamic refresh.
There is the present invention parsing and refresh rate to accelerate, and monitoring form function is abundant, convenient, efficient advantage.
Brief description of the drawings
Fig. 1 is G listed files control editing process schematic diagram of the present invention；
Fig. 2 is SVG flow path switches schematic diagram of the present invention；
Fig. 3 is monitoring form interface display schematic flow sheet in real time of the invention.
Embodiment
Technical solution of the present invention is described in further detail with specific embodiment below in conjunction with the accompanying drawings, so that ability
The technical staff in domain can be better understood from the present invention and can be practiced, but illustrated embodiment is not as the limit to the present invention
It is fixed.
A kind of method of real-time monitoring form applied to SVG interfaces, comprises the following steps：
Step 1, real-time grid control is edited in graphic editor, and the picture editted is preserved into meet CIM/G
The file format of specification.
Step 2, the SVG file that the file for meeting CIM/G specifications that step 1 is obtained is converted into meeting to SVG specifications.
Step 3, the loading SVG file generation dynamic surveillance form in SVG monitoring interfaces.
Introduce in detail below.
In step 1, edit real-time grid control and comprise the following steps：
1.1) it is unique No. ID of grid control distribution；
1.2) the connection Database Properties of definition tables control, the Database Properties refer to grid control from database
Necessary parameter when reading data, including the information of application number, table number, display field, querying condition, ordering rule；
1.3) the Show Styles attribute of configuration form control, the Show Styles attribute includes the position of grid control, table
Lattice control size, gauge outfit background colour, gauge outfit font color, form font color, form background colour.
As shown in figure 1, the real-time monitoring spreadsheet interface of the present invention is that generation is edited in graphic editor, first in figure
Drag and drop grid control in editing machine, by the Database Properties of searcher instrument definition grid control, in graphic editor attribute window
The display properties of grid control defined in mouthful, is completed after spreadsheet interface editor, is preserved generation G files (state's net graphic file) and is led to
Cross messaging bus and send the message that figure updates.
Step 2 specifically includes following steps：
2.1) message that graphic file updates is monitored；
2.2) message body is parsed, the graphic file name updated is obtained；
2.3) CIM/G graphic file, the SVG file that form pel is converted into being described with SVG, in SVG file are parsed
Middle two customized labels of increase identify the Database Properties and display properties of form.
SVG file be meet XML format can be directly by the interface file of browser resolves, SVG file describes one
The definition of complete CIM/G list control, the Database Properties and display properties of form are all put into<metadata></
metadata>One combination in, customized label<web:table>Define the Database Properties of form, including form
Application number, the attribute such as table number；Customized label<web:showAttr>Define the Show Styles such as position, the size of form
Attribute.
As shown in Fig. 2 the SVG file of the present invention is generated by SVG conversion process, this is a backstage Resident Process,
The message that figure updates is received by messaging bus, parsing message body obtains updated G filenames, reads and parse G files,
The Database Properties and display properties of form in G files are generated in SVG file.
Step 3 specifically includes following steps：
3.1) browser loading SVG file, reads the form data of SVG file；
3.2) dynamic creation shows the subwindow of form, the position of configuration form window and size；
3.3) configuration form subwindow and the overlay order of the levels at SVG interfaces；
3.4) list data in the Database Properties reading database in SVG file；
3.5) generate grid control and complete to configure according to display properties.
Specifically following steps are subdivided into as shown in figure 3, generating grid control and completing configuration according to display properties：
3.5.1) according to the size and location attribute of grid control, JavaScript table interface dynamic creation forms are called
Window；
3.5.2) according to the Database Properties of form (including the ID of form, the information such as list data, position, size), hair
List data is sent to ask to database；
3.5.3) dynamic sets the display data of form；
3.5.4) according to form display properties configuration form pattern；
3.5.5) complete monitoring form in real time to show, and monitor form data variation.
Database Properties and display properties that SVG file obtains CIM/G list pels are borrowed, outside JavaScript is used
Table interface is generated, the real-time monitoring form on dynamic creation SVG interfaces, and configure the folded of monitoring form and SVG interfaces in real time
Plus the method for order, solve in monitoring SVG interfaces, dynamic table display effect and using effect in graphic editor with showing
Show the problem of style difference is larger.When realizing monitoring form in real time, the size of SVG file is reduced, performance has been obtained significantly
Improve, also achieve quick real-time SVG interfaces complicated and changeable, editor's layout and generation display.With parsing and brush
New speed is accelerated, and monitoring form function is abundant, convenient, efficient advantage.
The preferred embodiments of the present invention are these are only, are not intended to limit the scope of the invention, it is every to utilize this hair
The equivalent structure that bright specification and accompanying drawing content are made either equivalent flow conversion or to be directly or indirectly used in other related
Technical field, be included within the scope of the present invention.
Claims (7)
1. a kind of method of real-time monitoring form applied to SVG interfaces, it is characterised in that comprise the following steps：
Step 1, real-time grid control is edited in graphic editor, and the picture editted is preserved into meet CIM/G specifications
File format；
Step 2, the SVG file that the file for meeting CIM/G specifications that step 1 is obtained is converted into meeting to SVG specifications；
Step 3, the loading SVG file generation dynamic surveillance form in SVG monitoring interfaces.
2. a kind of method of real-time monitoring form applied to SVG interfaces according to claim 1, it is characterised in that step
In rapid 1, edit real-time grid control and comprise the following steps：
1.1) it is unique No. ID of grid control distribution；
1.2) the connection Database Properties of definition tables control；
1.3) the Show Styles attribute of configuration form control.
3. a kind of method of real-time monitoring form applied to SVG interfaces according to claim 2, it is characterised in that：
The Database Properties refer to necessary parameter when grid control reads data from database, including application number, table number,
The information of display field, querying condition, ordering rule；
The position of the Show Styles attribute including grid control, grid control size, gauge outfit background colour, gauge outfit font color,
Form font color, form background colour.
4. a kind of method of real-time monitoring form applied to SVG interfaces according to claim 2, it is characterised in that step
Rapid 2 specifically include following steps：
2.1) message that graphic file updates is monitored；
2.2) message body is parsed, the graphic file name updated is obtained；
2.3) CIM/G graphic file is parsed, the SVG file that form pel is converted into being described with SVG increases in SVG file
Plus two customized labels identify the Database Properties and display properties of form.
5. a kind of method of real-time monitoring form applied to SVG interfaces according to claim 2, it is characterised in that step
Rapid 3 specifically include following steps：
3.1) browser loading SVG file, reads the form data of SVG file；
3.2) dynamic creation shows the subwindow of form, the position of configuration form window and size；
3.3) configuration form subwindow and the overlay order of the levels at SVG interfaces；
3.4) list data in the Database Properties reading database in SVG file；
3.5) generate grid control and complete to configure according to display properties.
6. a kind of method of real-time monitoring form applied to SVG interfaces according to claim 5, it is characterised in that step
It is rapid 3.5) to specifically include following steps：
3.5.1) according to the size and location attribute of grid control, JavaScript table interface dynamic creation form windows are called
Mouthful；
3.5.2) according to the Database Properties of form, send list data and ask to database；
3.5.3) dynamic sets the display data of form；
3.5.4) according to form display properties configuration form pattern；
3.5.5) complete monitoring form in real time to show, and monitor form data variation.
7. a kind of method of real-time monitoring form applied to SVG interfaces according to claim 1, it is characterised in that step
G files are generated in rapid 1.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710332571.9A CN107203503B (en) | 2017-05-12 | 2017-05-12 | Method for monitoring form in real time applied to SVG interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710332571.9A CN107203503B (en) | 2017-05-12 | 2017-05-12 | Method for monitoring form in real time applied to SVG interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107203503A true CN107203503A (en) | 2017-09-26 |
| CN107203503B CN107203503B (en) | 2021-06-01 |
Family
ID=59905669
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710332571.9A Active CN107203503B (en) | 2017-05-12 | 2017-05-12 | Method for monitoring form in real time applied to SVG interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107203503B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832460A (en) * | 2017-11-28 | 2018-03-23 | 航天天绘科技有限公司 | The graphical page control method of real-time display Satellite TT data based on SVG |
| CN110908857A (en) * | 2019-09-29 | 2020-03-24 | 京东数字科技控股有限公司 | Interface data monitoring method and device, terminal equipment and storage medium |
| CN114266229A (en) * | 2021-10-13 | 2022-04-01 | 广西电网有限责任公司南宁供电局 | Intelligent conversion method for power supply data monitoring table of dispatching automation system |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103034502A (en) * | 2012-12-26 | 2013-04-10 | 江苏西电南自智能电力设备有限公司 | Method for embedding dynamic real-time monitoring chart in scalable vector graphics (SVG) interface |
| CN103399895A (en) * | 2013-07-24 | 2013-11-20 | 成都瑞科电气有限公司 | System and method for processing monitoring display on basis of SVG (scalable vector graphics) |
| CN104104149A (en) * | 2014-07-01 | 2014-10-15 | 国家电网公司 | Electric apparatus state display and real-time alarm method based on SVG (Scalable Vector Graphics) technology |
| CN104331545A (en) * | 2014-10-20 | 2015-02-04 | 国电南瑞科技股份有限公司 | Realization method of power network automation GIS (Geographic Information System) electrical layer based on CIM/G |
-
2017
- 2017-05-12 CN CN201710332571.9A patent/CN107203503B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103034502A (en) * | 2012-12-26 | 2013-04-10 | 江苏西电南自智能电力设备有限公司 | Method for embedding dynamic real-time monitoring chart in scalable vector graphics (SVG) interface |
| CN103399895A (en) * | 2013-07-24 | 2013-11-20 | 成都瑞科电气有限公司 | System and method for processing monitoring display on basis of SVG (scalable vector graphics) |
| CN104104149A (en) * | 2014-07-01 | 2014-10-15 | 国家电网公司 | Electric apparatus state display and real-time alarm method based on SVG (Scalable Vector Graphics) technology |
| CN104331545A (en) * | 2014-10-20 | 2015-02-04 | 国电南瑞科技股份有限公司 | Realization method of power network automation GIS (Geographic Information System) electrical layer based on CIM/G |
Non-Patent Citations (5)
| Title |
|---|
| 刘海涛，等: "基于B/S 架构的电网图形平台", 《电子技术与软件工程》 * |
| 张学勇，等: "基于可扩展架构的SVG图形系统的设计与实现", 《江苏电机工程》 * |
| 梁先勇: "基于SVG的图表组件设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑（月刊）》 * |
| 王斌: "基于SVG的电力图形平台研究", 《中国优秀硕士学位论文全文数据库工程科技II辑（月刊）》 * |
| 郑思远: "配电网监控信息动态展示技术的研究与实现", 《中国优秀硕士学位论文全文数据库工程科技II辑（月刊）》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832460A (en) * | 2017-11-28 | 2018-03-23 | 航天天绘科技有限公司 | The graphical page control method of real-time display Satellite TT data based on SVG |
| CN107832460B (en) * | 2017-11-28 | 2022-04-08 | 航天天绘科技有限公司 | SVG-based graphic page control method for displaying satellite measurement and control data in real time |
| CN110908857A (en) * | 2019-09-29 | 2020-03-24 | 京东数字科技控股有限公司 | Interface data monitoring method and device, terminal equipment and storage medium |
| CN110908857B (en) * | 2019-09-29 | 2024-01-12 | 京东科技控股股份有限公司 | Interface data monitoring method and device, terminal equipment and storage medium |
| CN114266229A (en) * | 2021-10-13 | 2022-04-01 | 广西电网有限责任公司南宁供电局 | Intelligent conversion method for power supply data monitoring table of dispatching automation system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107203503B (en) | 2021-06-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110007917B (en) | Visual page generation and browsing method based on browser | |
| CN105786526B (en) | A kind of efficient flow figure drawing system and method based on Web | |
| CN103970750B (en) | A kind of method and apparatus generating html web page | |
| CN103530407B (en) | Method and device for generating rich text document | |
| CN108153965B (en) | Method for automatically generating interval chart based on SCD file | |
| CN107203503A (en) | A kind of method of real-time monitoring form applied to SVG interfaces | |
| CN103970820B (en) | The method for visualizing of the open labeled data of Web multimedia resource and device | |
| CN106126779B (en) | Applied to the configuration multiplexing method in SVG picture configuration | |
| CN105096210B (en) | A kind of substation's on-line monitoring method based on multi-process framework | |
| CN105404757B (en) | A kind of method of calibration of intelligent substation SCD file standardization level | |
| CN110968294B (en) | Business domain model establishing system and method | |
| CN109977335A (en) | A kind of Web configuration method towards industrial equipment | |
| CN106708506A (en) | Method and device for optimizing starting speed of Android applications visually | |
| CN110415319A (en) | Animation method, device and electronic equipment and storage medium based on PPT | |
| CN105956133B (en) | Method and device for displaying file on intelligent terminal | |
| CN103559353B (en) | A kind of method for designing based on dynamic behaviour form in the monitoring system picture configuration of SVG | |
| CN111553129B (en) | SVG and echarts graph fusion method based on canvas | |
| CN108984175A (en) | The power grid SVG line chart methods of exhibiting of object-oriented suitable for mobile device | |
| CN106776994A (en) | Application process and system of a kind of technote in engineering form and webpage | |
| CN110427185A (en) | A method of man-machine browser function is realized based on electric power scripting language | |
| CN103544338B (en) | A kind of technique information modeling method assembling instruction issue towards three-dimensional | |
| CN113407171A (en) | Power grid dispatching control system graph editing and displaying method | |
| CN102411498A (en) | Method for realizing data model and graphical designer | |
| CN115309476A (en) | Browser-based ofd file display and editing method | |
| CN106485601A (en) | Substation field operating standard modularization editing system and method |
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 | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20171030 Address after: 211106 Jiangning City, Nanjing Province, the integrity of the road No. 19, Applicant after: NARI Technology Development Co., Ltd. Applicant after: SGCC NARI Nanjing Control System Co., Ltd. Applicant after: Nanjing Nari Co., Ltd. Applicant after: ENERGY SAVING ENVIRONMENTAL PROTECTION BRANCH, NANJING NARI GROUP COMPANY Address before: High road high tech Zone of Nanjing City, Jiangsu Province, No. 20 210032 Applicant before: NARI Technology Development Co., Ltd. Applicant before: SGCC NARI Nanjing Control System Co., Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |