CN109254771A - A kind of monitoring page generation method and device - Google Patents
A kind of monitoring page generation method and device Download PDFInfo
- Publication number
- CN109254771A CN109254771A CN201810974194.3A CN201810974194A CN109254771A CN 109254771 A CN109254771 A CN 109254771A CN 201810974194 A CN201810974194 A CN 201810974194A CN 109254771 A CN109254771 A CN 109254771A
- Authority
- CN
- China
- Prior art keywords
- pel
- opened
- object tree
- source file
- configuration source
- 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
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a kind of monitoring page generation method and devices, wherein this method comprises: obtaining the configuration source file of figure to be opened in monitored picture；Wherein, configuration source file corresponds to the primitive information of figure to be opened；Figure to be opened includes master map or window figure；Configuration source file is parsed, all pels for drawing figure to be opened are obtained；An individual canvas is established respectively drawn, generate the monitoring page of figure to be opened for each pel of figure to be opened.Monitoring page generation method and device disclosed by the invention can establish an individual canvas for each pel and be drawn, when so that modifying to pel, it is only necessary to redraw to the pel, all redraw without all pels.
Description
Technical field
The present invention relates to the communication technology, espespecially a kind of monitoring page generation method and device.
Background technique
In existing industrial monitoring or TT&C system, Web industrial information monitors the page in real time and presents generally using two kinds of moulds
Formula, one is client/server (Client/Server, abbreviation C/S) modes, and one is browser/servers
(Browser/Server, abbreviation B/S) mode.
Former mode needs for client software to be mounted in specific qualified equipment, and can only set at this
It is for future reference to see, it is not able to satisfy user and wants the demand accessed immediately whenever and wherever possible.Latter mode generally use similar ActiveX or
SVG technology realizes that the existing realization technology of the mode has following defects that
The defects of insertion of 1.ActiveX control repeats to write there are code, browser-incompatible, system is dangerous:
It is also OLE control or OCX control before ActiveX plug-in unit, it is a component software or object, can insert it into web
In webpage or other applications.The advantages of this mode be in terms of language, as long as being completed using original C++, that is, editable,
Without realizing interaction using other scripting languages, but due to the compatibling problem of browser, support of the different browsers to control
Different, practicability allows of no optimist, and it is many to denounce in terms of safety, becomes the temperature of various forbidden codes in a way
Bed, with deepening continuously for industry control awareness of safety, cannot increasingly be received by user.
The advantage of 2.SVG drawing technique is to support mouse event operation, suitable for polar plot, the low drafting frequency of low data bulk
The scene of rate, such as figure, chart etc..But the industrial information real time monitoring page is generally all more complicated, generally wraps in single-page
More pel and lines are included, and a more complex system generally comprises up to a hundred master maps or window figure, page jump frequency
It is numerous, it is drawn with SVG inefficient when more complex industrial information monitors the page in real time.
Currently, drawing Web industrial information by canvas in the prior art monitors the page in real time, to overcome the above problem.
However, there are following defects in the existing technology for drawing the Web industrial information real time monitoring page by canvas:
When pel changes in canvas, the pel on entire canvas painting canvas all needs to redraw, for example, if a certain pel position is sent out
Changing, then entire scene is also required to repaint.
Summary of the invention
In order to solve the above-mentioned technical problems, the present invention provides a kind of monitoring page generation method and devices, can be every
A pel is established an individual canvas and is drawn, when so that modifying to pel, it is only necessary to carry out weight to the pel
It draws, is all redrawn without all pels.
In order to reach the object of the invention, in a first aspect, the present invention provides a kind of monitoring page generation methods, comprising:
Obtain the configuration source file of figure to be opened in monitored picture；Wherein, the configuration source file is corresponding described wait beat
The primitive information for the figure opened；The figure includes master map or window figure；
The configuration source file is parsed, all pels for drawing the figure to be opened are obtained；
Establish an individual canvas respectively for each pel of the figure to be opened and drawn, generate it is described to
The monitoring page of the figure of opening.
Second aspect, the present invention provides a kind of monitoring webpage generating devices, comprising:
Module is obtained, for obtaining the configuration source file of figure to be opened in monitored picture；Wherein, the configuration source file
The primitive information of the corresponding figure to be opened；The figure includes master map or window figure；
Parsing module obtains all pels for drawing the figure to be opened for parsing the configuration source file；
Drafting module is drawn for establishing an individual canvas respectively for each pel of the figure to be opened
System generates the monitoring page of the figure to be opened.
The third aspect, the present invention provides a kind of monitoring webpage generating device, including memory and processor, memory is used
It is executed instruction in storage；Processor executes instruction described in calling, for executing the monitoring page as described in first aspect embodiment
Generation method.
Fourth aspect, the present invention provides a kind of computer readable storage mediums, are stored thereon with computer instruction, described
The step of method described in first aspect embodiment is realized when instruction is executed by processor.
The monitoring page generation method and device that at least one of the invention embodiment provides, have the advantages that for
Each pel creates the mode that an individual canvas is drawn, when so that modifying to pel, it is only necessary to the figure
Member is redrawn.Canvas is solved when drawing pel, even if only single or several pels are modified, all pels are required
The problem of redrawing.
In some embodiments of the embodiment of the present invention, following effect: 1. pairs of monitored picture configuration source documents may also reach up
The format and drafting mode of part do not require, and can support the multiple formats such as XML, JSON and TXT.Drawing configuration source file
When, configuration source file does not need to be drawn with canvas, in this way relative to must with canvas draw and with canvas draw
For system, the ability of the system of backward compatible lowest version is improved.2. configuration source file can directly be parsed, without as SVG
Technology need to carry out conversion to configuration source file to draw, and can save the mistake for converting configuration source file to extended formatting file
Journey further improves the efficiency that the monitoring page is drawn.3. various monitored pictures be it is dynamic, operable, it is dynamic, can
The performance of operation is not only showed only as being also embodied by representated by each pel the reading and modification of each pel real time data
Equipment monitoring and instruction etc. sent to equipment, such as electrical domain, water supply pumping unit send open, close, hanging up and
The instructions such as solution extension.
Other features and advantages of the present invention will be illustrated in the following description, also, partly becomes from specification
It obtains it is clear that understand through the implementation of the invention.The objectives and other advantages of the invention can be by specification, right
Specifically noted structure is achieved and obtained in claim and attached drawing.
Detailed description of the invention
Attached drawing is used to provide to further understand technical solution of the present invention, and constitutes part of specification, with this
The embodiment of application technical solution for explaining the present invention together, does not constitute the limitation to technical solution of the present invention.
Fig. 1 is the flow chart for the monitoring page generation method that the embodiment of the present invention one provides；
Fig. 2 is the flow chart of monitoring page generation method provided by Embodiment 2 of the present invention；
Fig. 3 is the structural schematic diagram for the monitoring webpage generating device that the embodiment of the present invention one provides；
Fig. 4 is the structural schematic diagram of monitoring webpage generating device provided by Embodiment 2 of the present invention；
Fig. 5 is the structural schematic diagram that the monitoring page provided in an embodiment of the present invention generates system.
Specific embodiment
To make the objectives, technical solutions, and advantages of the present invention clearer, below in conjunction with attached drawing to the present invention
Embodiment be described in detail.It should be noted that in the absence of conflict, in the embodiment and embodiment in the application
Feature can mutual any combination.
Step shown in the flowchart of the accompanying drawings can be in a computer system such as a set of computer executable instructions
It executes.Also, although logical order is shown in flow charts, and it in some cases, can be to be different from herein suitable
Sequence executes shown or described step.
In the existing technology for drawing the Web industrial information real time monitoring page by canvas, have the following deficiencies:
1. not can solve that pel changes in canvas, the pel on entire canvas painting canvas all needs what is redrawn to ask
Topic.It is completed once figure is drawn, it would not continue to obtain the concern of browser.If its position changes, whole
A scene is also required to repaint, including any object perhaps covered by figure.
2. existing canvas system, in configuration, the configuration page is also required to be drawn with canvas, in this way, for it
The preceding configuration source file drawn in other ways cannot be resolved and monitor, and backward compatible ability is low.But existing work
Control field, most configuration source file are not that canvas is drawn, and the mode that can be drawn and the text finally saved
Part format is all not quite similar.
In order to avoid drawbacks described above, 1. the application are by the parsing of the configuration source file to multiple format, and in canvas
When drawing each pel, an independent canvas is established for each pel, in this way when pel changes, it is only necessary to update
The corresponding canvas of the pel.2. the format and drafting mode of pair picture source file do not require, can support XML,
The multiple formats such as JSON and TXT.In terms of the mode for drawing source file, configuration source file does not need to be drawn with canvas, this
Sample improves the system of backward compatible lowest version for the system that must be drawn with canvas and be drawn with canvas
Ability.
Fig. 1 is the flow chart for the monitoring page generation method that the embodiment of the present invention one provides, as shown in Figure 1, the present invention is real
The monitoring page generation method for applying example offer, can be applied to industrial monitoring system, such as scattered control system (Distributed
Control System, abbreviation DCS) in, this method comprises:
S101: the configuration source file of figure to be opened in monitored picture is obtained.
Wherein, configuration source file corresponds to the primitive information of figure to be opened；Figure includes master map or window figure.
Optionally, configuration source file can be XML, JSON or TXT text formatting.
It should be noted that the embodiment of the present invention is mainly used in the DCS system of power plant, with the configuration source file of the system
For being XML file, it is not limited to this, the configuration source file of remaining industrial monitoring system and system is JSON or TXT
Realization principle it is similar therewith, the present embodiment is herein without repeating.Monitored picture is that human-computer interaction function is realized in DCS system
Important component, by monitored picture can intuitively check it is each monitoring node real time data, understand the fortune of each equipment
Row state.
In the present embodiment, HTTP Server can be installed, in DCS system to obtain the configuration source file of DCS system.
When browser is wanted to open the master map or window figure of DCS system, HTTP request can be sent and obtain the system master map or window
The XML source file of figure.
Wherein, figure to be opened may include one or more master maps or window figure, and the present embodiment is mainly with to be opened
Figure for a master map or window figure including being illustrated, when figure to be opened includes multiple master maps or window figure, each
Master map or window figure to be opened can be according to generating the monitoring page the step of present invention method.
S102: parsing configuration source file obtains all pels for drawing figure to be opened.
In the present embodiment, parses the original xml document of DCS monitored picture and be converted into JS object technology, it is raw with JS object
At graphics primitive object.In DCS system, every master map or window figure all correspond to an independent xml document, can be in the present embodiment
Using the filename of every master map or window figure as major key, by all pels for including in xml and the algorithm of pel dependent event
Logic all parses, and subsequent draw to each pel and when pel is clicked adds event to it to facilitate.Wait beat
All attribute informations for including in the xml document for the figure opened will all be resolved and save, such as position of the pel in picture,
Color, size, text information, conditional expression etc..
S103: for each pel of figure to be opened an individual canvas is established respectively drawn, generated wait beat
The monitoring page for the figure opened.
In the present embodiment, a canvas is created for each pel, and the pel is drawn on the canvas.By above-mentioned step
It, can be raw by the mouse click event of user for each pel in the pel dye to designated position parsed in rapid
At the monitoring page of figure to be opened, finishing man-machine interaction.
Specifically, when the mouse of user clicks any pel on monitored picture, it can be according to mouse in the pel
The position clicked on canvas painting canvas, locks the type of the pel, and analyzes whether the pel has the event being clicked；In the figure
When member has the event being clicked, the mouse of the pel of the position is triggered in the position that can be clicked on canvas painting canvas according to mouse
Punctuate hits event, finishing man-machine interaction.
It should be noted that the monitoring page generated can be monitoring WWW (World Wide Web, abbreviation Web) page
Face, wherein Web page (alternatively referred to as webpage) is one on WWW according to hypertext markup language (HyperText
Markup Language, abbreviation HTML) file that gets up of format organization, when carrying out information inquiry by WWW, with information
The form of the page occurs, and may include the information such as figure, text, sound and video.
The monitoring page generation method that at least one embodiment of the invention provides, has the advantages that as each figure
The mode that the newly-built individual canvas of member is drawn, when so that each pel being modified, it is only necessary to the pel into
Row is redrawn.Canvas is solved when drawing pel, even if only single or several pels are modified, all pels require to redraw
The problem of.
The embodiment of the present invention also has the advantages that the format and drafting mode of 1. pairs of monitored picture configuration source files
It does not require, can support the multiple formats such as XML, JSON and TXT.When drawing configuration source file, configuration source file is simultaneously not required to
It is drawn with canvas, in this way for the system that must be drawn with canvas and be drawn with canvas, is improved downwards
The ability of the system of compatible lowest version.2. drawing Web industrial information by canvas monitors the page in real time, not only solve
The problems such as ActiveX control insertion repeats to write there are code, browser-incompatible, also solves SVG and draws more complex work
Industry information monitors problem inefficient when the page in real time.It is real in the Web industrial information for drawing more pels, multi-line and more pictures
When monitoring the page when, the drawing performance of canvas is substantially better than SVG, drawn by canvas, draw efficiency be not less than C/S model
The drafting efficiency of the middle monitoring page.3. pass through the monitored picture of canvas drawing technique complete simulation original C/S model, it can be with 1:1
Restore DCS system picture, display data in the way of replacing table in a manner of picture.
Further, in the above-described embodiments, configuration source file is parsed, all figures for drawing figure to be opened are obtained
Member may include:
Step a: configuration source file is resolved into JS object tree, the memory node of JS object tree is for storing figure to be opened
All pels title.
In the present embodiment, parsing XML file can be traversed, by XML document analysis of object at JS object tree, the object tree packet
It includes tagName attribute and carrys out memory node name, subs attribute stores all attribute-names and attribute value that the node includes.
Step b: graphics primitive object tree is generated according to JS object tree, the memory node of graphics primitive object tree is for storing JS object tree
The title of the middle pel for drawing figure to be opened.
In the present embodiment, corresponding graphics primitive object can be generated according to JS object tree by object oriented designing thinking
Tree.After having parsed the attribute that all pel and pel include in above-mentioned steps, by the pel for traversing JS object tree
Name, the newly-built graphics primitive object that can be drawn generate the graphics primitive object of the pel name and corresponding attribute for storing the pel drawn
Tree.
Wherein, a memory node stores the title of a pel, each storage in JS object tree and graphics primitive object tree
It include the attribute-name and attribute value of a pel in node.
Step c: traversal graphics primitive object tree obtains all pels for drawing figure to be opened.
In the present embodiment, each node of graphics primitive object tree, i.e. pel name in graphics primitive object tree are traversed, is drawn with obtaining
All pels of figure to be opened.
Monitoring page generation method provided in an embodiment of the present invention can directly parse configuration source file, without as SVG skill
Art need to carry out conversion to configuration source file to draw, and can save the mistake for converting configuration source file to extended formatting file
Journey further improves the efficiency that the monitoring page is drawn.
Further, in the above-described embodiments, one is established respectively individually for each pel of figure to be opened
Before canvas is drawn, monitoring page generation method provided in an embodiment of the present invention can also include:
According to the attribute that pel each in figure to be opened has, respectively each pel adds calling interface；Wherein, it adjusts
It include drawing interface with interface.
In the present embodiment, pel component class libraries can also be created, is the corresponding pel class of every class pel component construction, and be
Each pel addition draws interface, the more new interface of real value, picture rendering interface, screen operation interface and instruction and sends and connect
The calling interfaces such as mouth.
For figure to be opened each pel establish respectively an individual canvas carry out draw include: call it is to be opened
Figure each pel drafting interface, establish an individual canvas respectively for each pel and drawn.
In the present embodiment, the drafting interface of each pel is called, establishes an individual canvas respectively for each pel
It is drawn.
Further, in the above-described embodiments, when there is the pel comprising variable in figure to be opened, calling interface is also
It may include more new interface.
In the present embodiment, the attribute that can be had according to each pel adds attribute for each graphics primitive object and method (connects
Mouthful).Such as whether analysis pel has command_ attribute, and order is sent when which indicates to click, if there is the attribute, then can
Continue to get the command type and command context attribute that the attribute is included.In this way when the pel is clicked, so that it may touch
Send out the order.In terms of interface, if it is the pel that needs are drawn, then the interface for drawing the pel is externally provided, if the pel
Comprising variable, then the more new interface of more new variables real value is externally provided.
Monitoring page generation method provided in an embodiment of the present invention calls packet when can also include: traversal graphics primitive object tree
The more new interface of pel containing variable, updates the real value for the variable that corresponding pel includes.
It, can be by calling the more new interface of real value automatically, to complete the real-time update of picture pel in the present embodiment.
Optionally, the present embodiment can be completed to open window, switching by mouse, KeyEvent call instruction transmission interface
The functions such as picture, instruction transmission, realize human-computer interaction.It should be noted that the various monitored pictures of the present embodiment be it is dynamic, can
Operation, dynamic, operable performance is not only showed only as also showing the reading and modification of each pel real time data
For the monitoring to equipment representated by each pel and instruction etc. is sent to equipment, such as electrical domain, water supply pumping unit hair
It send opening, closing, hang up the instructions such as reconciliation extension.
Fig. 2 is the flow chart of monitoring page generation method provided by Embodiment 2 of the present invention, as shown in Fig. 2, the present invention is real
The monitoring page generation method of example offer is provided, comprising:
S201: the configuration source file of figure to be opened in monitored picture is obtained.
S202: configuration source file is resolved into JS object tree.
S203: graphics primitive object tree is generated according to JS object tree.
S204: it is added for each pel and draws the calling interfaces such as interface and more new interface.
S205: traversal graphics primitive object tree, be figure to be opened each pel establish respectively an individual canvas into
Row is drawn, and updates the real value for the variable that corresponding pel includes.
S206: pass through the mouse click event of user, finishing man-machine interaction.
Fig. 3 is the structural schematic diagram for the monitoring webpage generating device that the embodiment of the present invention one provides, as shown in figure 3, this hair
The monitoring webpage generating device that bright embodiment provides, comprising: obtain module 31, parsing module 32 and drafting module 33.
Module 31 is obtained, for obtaining the configuration source file of figure to be opened in monitored picture；Wherein, the configuration source document
Part corresponds to the primitive information of the figure to be opened；The figure includes master map or window figure；
Parsing module 32 obtains all figures for drawing the figure to be opened for parsing the configuration source file
Member；
Drafting module 33 is carried out for establishing an individual canvas respectively for each pel of the figure to be opened
It draws, generates the monitoring page of the figure to be opened.
Monitoring webpage generating device provided in an embodiment of the present invention is used to execute the technical side of embodiment of the method shown in Fig. 1
Case, realization principle is similar with effect is realized, details are not described herein again.
Further, in the above-described embodiments, parsing module 32 parses the configuration source file, obtains described for drawing
All pels of figure to be opened may include:
The configuration source file is resolved into JS object tree, the memory node of the JS object tree is described wait beat for storing
The title of all pels for the figure opened；
Graphics primitive object tree is generated according to the JS object tree, the memory node of the graphics primitive object tree is for storing JS object
The title of the pel of the figure to be opened is drawn in tree；
Wherein, a memory node stores the title of a pel in the JS object tree and the graphics primitive object tree, often
It include the attribute-name and attribute value of a pel in one memory node；
The graphics primitive object tree is traversed, all pels for drawing figure to be opened are obtained.
Further, in the above-described embodiments, monitoring webpage generating device provided in an embodiment of the present invention, can also wrap
It includes: adding module 34, for according to the attribute that each pel has in the figure to be opened, respectively each pel addition to be adjusted
Use interface；Wherein, the calling interface includes drawing interface.
Drafting module 33 is established an individual canvas for each pel of the figure to be opened respectively and is drawn,
Include: the drafting interface for calling each pel of the figure to be opened, establishes one respectively individually for each pel
Canvas is drawn.
Further, in the above-described embodiments, when there is the pel comprising variable in the figure to be opened, the tune
It can also include more new interface with interface；Drafting module 33 is also used to: when acquisition module 31 traverses the graphics primitive object tree, being adjusted
With the more new interface of the pel comprising variable, the real value for the variable that corresponding pel includes is updated.
Further, in the above-described embodiments, configuration source file can be XML, JSON or TXT text formatting.
Fig. 4 is the structural schematic diagram of monitoring webpage generating device provided by Embodiment 2 of the present invention, as shown in figure 4, this hair
The monitoring webpage generating device that bright embodiment provides, comprising: memory 41 and processor 42.
Memory 41 is executed instruction for storing, and processor 42 can be a central processing unit (Central
Processing Unit, abbreviation CPU) or specific integrated circuit (Application Specific Integrated
Circuit, abbreviation ASIC), or complete to implement one or more integrated circuits of the embodiment of the present invention.When the monitoring page generates
When device is run, communicated between processor 42 and memory 41,42 call executive instruction of processor, for performing the following operations:
Obtain the configuration source file of figure to be opened in monitored picture；Wherein, the configuration source file is corresponding described wait beat
The primitive information for the figure opened；The figure includes master map or window figure；
The configuration source file is parsed, all pels for drawing the figure to be opened are obtained；
Establish an individual canvas respectively for each pel of the figure to be opened and drawn, generate it is described to
The monitoring page of the figure of opening.
Further, processor 42 parses the configuration source file, obtains for drawing all of the figure to be opened
Pel may include:
The configuration source file is resolved into JS object tree, the memory node of the JS object tree is described wait beat for storing
The title of all pels for the figure opened；
Graphics primitive object tree is generated according to the JS object tree, the memory node of the graphics primitive object tree is for storing JS object
The title of the pel of the figure to be opened is drawn in tree；
Wherein, a memory node stores the title of a pel in the JS object tree and the graphics primitive object tree, often
It include the attribute-name and attribute value of a pel in one memory node；
The graphics primitive object tree is traversed, all pels for drawing figure to be opened are obtained.
Further, processor 42 can be also used for:
It is established before an individual canvas drawn respectively for each pel of the figure to be opened, according to institute
The attribute that each pel has in figure to be opened is stated, respectively each pel adds calling interface；Wherein, the calling interface
Including drawing interface；
Processor 42 establishes an individual canvas for each pel of the figure to be opened respectively and carries out drafting packet
It includes: calling the drafting interface of each pel of the figure to be opened, establish one respectively individually for each pel
Canvas is drawn.
Further, when there is the pel comprising variable in the figure to be opened, the calling interface further includes more
New interface；
Processor 42 can be also used for:
When traversing the graphics primitive object tree, the more new interface of the pel comprising variable is called, updating corresponding pel includes
The real value of variable.
Further, the configuration source file is XML, JSON or TXT text formatting.
The embodiment of the present invention also provides a kind of computer readable storage medium, is stored thereon with computer instruction, the finger
The step of order realizes the acquisition methods of monitoring data described in any of the above-described embodiment when being executed by processor.
Fig. 5 is the structural schematic diagram that the monitoring page provided in an embodiment of the present invention generates system, as shown in figure 5, of the invention
The monitoring page that embodiment provides generates system, comprising: Web industrial monitoring information real time information system is for each in monitoring system
The operating status of equipment, and the operating status of the equipment of monitoring is generated into monitored picture.Data module is used for from Web industrial monitoring
Real time data is obtained in information real time information system or is sent to equipment instructs.From Web industrial monitoring information real time information system
The middle acquisition page generates traditional configuration interface.JS object is converted by the page data in traditional configuration interface and is passed through
Canvas is drawn, and generates Web page.Browser clicks page graphic primitive, finishing man-machine interaction.Data module is also used to update Web
Page real value or Web page is sent instructions in the page.
It will appreciated by the skilled person that whole or certain steps, system, dress in method disclosed hereinabove
Functional module/unit in setting may be implemented as software, firmware, hardware and its combination appropriate.In hardware embodiment,
Division between the functional module/unit referred in the above description not necessarily corresponds to the division of physical assemblies；For example, one
Physical assemblies can have multiple functions or a function or step and can be executed by several physical assemblies cooperations.Certain groups
Part or all components may be implemented as by processor, such as the software that digital signal processor or microprocessor execute, or by
It is embodied as hardware, or is implemented as integrated circuit, such as specific integrated circuit.Such software can be distributed in computer-readable
On medium, computer-readable medium may include computer storage medium (or non-transitory medium) and communication media (or temporarily
Property medium).As known to a person of ordinary skill in the art, term computer storage medium is included in for storing information (such as
Computer readable instructions, data structure, program module or other data) any method or technique in the volatibility implemented and non-
Volatibility, removable and nonremovable medium.Computer storage medium include but is not limited to RAM, ROM, EEPROM, flash memory or its
His memory technology, CD-ROM, digital versatile disc (DVD) or other optical disc storages, magnetic holder, tape, disk storage or other
Magnetic memory apparatus or any other medium that can be used for storing desired information and can be accessed by a computer.This
Outside, known to a person of ordinary skill in the art to be, communication media generally comprises computer readable instructions, data structure, program mould
Other data in the modulated data signal of block or such as carrier wave or other transmission mechanisms etc, and may include any information
Delivery media.
Claims (10)
1. a kind of monitoring page generation method, comprising:
Obtain the configuration source file of figure to be opened in monitored picture；Wherein, the configuration source file corresponds to described to be opened
The primitive information of figure；The figure includes master map or window figure；
The configuration source file is parsed, all pels for drawing the figure to be opened are obtained；
An individual canvas is established respectively drawn, generate described to be opened for each pel of the figure to be opened
Figure the monitoring page.
2. the method according to claim 1, wherein the parsing configuration source file, obtains for drawing
All pels of the figure to be opened, comprising:
The configuration source file is resolved into JS object tree, the memory node of the JS object tree is described to be opened for storing
The title of all pels of figure；
Graphics primitive object tree is generated according to the JS object tree, the memory node of the graphics primitive object tree is for storing in JS object tree
Draw the title of the pel of the figure to be opened；
Wherein, a memory node stores the title of a pel in the JS object tree and the graphics primitive object tree, each
It include the attribute-name and attribute value of a pel in memory node；
The graphics primitive object tree is traversed, all pels for drawing figure to be opened are obtained.
3. according to the method described in claim 2, it is characterized in that, each pel for the figure to be opened is built respectively
Before a vertical individual canvas is drawn, the method also includes:
According to the attribute that each pel has in the figure to be opened, respectively each pel adds calling interface；Wherein, institute
Stating calling interface includes drawing interface；
Each pel for the figure to be opened is established an individual canvas respectively and draw
The drafting interface of each pel of the figure to be opened is called, establishes one respectively individually for each pel
Canvas is drawn.
4. according to the method described in claim 3, it is characterized in that, there is the pel comprising variable in the figure to be opened
When, the calling interface further includes more new interface；
The method also includes:
When traversing the graphics primitive object tree, the more new interface of the pel comprising variable is called, the variable that corresponding pel includes is updated
Real value.
5. method according to claim 1-3, which is characterized in that the configuration source file be XML, JSON or
TXT text formatting.
6. a kind of monitoring webpage generating device characterized by comprising
Module is obtained, for obtaining the configuration source file of figure to be opened in monitored picture；Wherein, the configuration source file is corresponding
The primitive information of the figure to be opened；The figure includes master map or window figure；
Parsing module obtains all pels for drawing the figure to be opened for parsing the configuration source file；
Drafting module is drawn for establishing an individual canvas respectively for each pel of the figure to be opened,
Generate the monitoring page of the figure to be opened.
7. device according to claim 6, which is characterized in that the parsing module parses the configuration source file, obtains
For drawing all pels of the figure to be opened, comprising:
The configuration source file is resolved into JS object tree, the memory node of the JS object tree is described to be opened for storing
The title of all pels of figure；
Graphics primitive object tree is generated according to the JS object tree, the memory node of the graphics primitive object tree is for storing in JS object tree
Draw the title of the pel of the figure to be opened；
Wherein, a memory node stores the title of a pel in the JS object tree and the graphics primitive object tree, each
It include the attribute-name and attribute value of a pel in memory node；
The graphics primitive object tree is traversed, all pels for drawing figure to be opened are obtained.
8. device according to claim 7, which is characterized in that described device further include:
Adding module, for according to the attribute that each pel has in the figure to be opened, respectively each pel addition to be adjusted
Use interface；Wherein, the calling interface includes drawing interface；
The drafting module is established an individual canvas for each pel of the figure to be opened respectively and is drawn, and wraps
It includes: calling the drafting interface of each pel of the figure to be opened, establish one respectively individually for each pel
Canvas is drawn；
When there is the pel comprising variable in the figure to be opened, the calling interface further includes more new interface；It is described to draw
Molding block is also used to: when the graphics primitive object tree described in the acquisition module walks, the more new interface of the pel comprising variable is called,
Update the real value for the variable that corresponding pel includes；
The configuration source file is XML, JSON or TXT text formatting.
9. a kind of monitoring webpage generating device, which is characterized in that including memory and processor, memory refers to for storing to execute
It enables；Processor executes instruction described in calling, for executing monitoring page generation method as described in any one in claim 1-5.
10. a kind of computer readable storage medium, is stored thereon with computer instruction, which is characterized in that described instruction is processed
The step of claim 1-5 described in any item methods are realized when device executes.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810974194.3A CN109254771B (en) | 2018-08-24 | 2018-08-24 | Monitoring page generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810974194.3A CN109254771B (en) | 2018-08-24 | 2018-08-24 | Monitoring page generation method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109254771A true CN109254771A (en) | 2019-01-22 |
| CN109254771B CN109254771B (en) | 2022-03-15 |
Family
ID=65050447
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810974194.3A Active CN109254771B (en) | 2018-08-24 | 2018-08-24 | Monitoring page generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109254771B (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109976723A (en) * | 2019-03-12 | 2019-07-05 | 北京国电智深控制技术有限公司 | A kind of algorithm development platform, algorithm development method and computer readable storage medium |
| CN109992698A (en) * | 2019-04-11 | 2019-07-09 | 北京字节跳动网络技术有限公司 | Data processing method, device, electronic equipment and readable storage medium storing program for executing |
| CN110929977A (en) * | 2019-09-30 | 2020-03-27 | 国网湖南省电力有限公司 | Cloud power network data display method and system based on space customization |
| CN111124384A (en) * | 2019-12-23 | 2020-05-08 | 中国航发控制***研究所 | JSON-based IO and control logic configuration integration method |
| CN111176636A (en) * | 2019-12-31 | 2020-05-19 | 新奥数能科技有限公司 | Method and device for realizing graphical configuration of comprehensive energy system |
| CN112231608A (en) * | 2020-10-30 | 2021-01-15 | 三峡机电工程技术有限公司 | Method for realizing embedded Web configuration graphics primitive |
| CN112817651A (en) * | 2021-01-14 | 2021-05-18 | 许继集团有限公司 | Canvas-based graph generation method and Canvas-based graph generation system |
| CN113656736A (en) * | 2021-08-19 | 2021-11-16 | 上海哔哩哔哩科技有限公司 | Data processing method and device |
| CN113868280A (en) * | 2021-11-25 | 2021-12-31 | 芯和半导体科技(上海)有限公司 | Parameterized unit data updating method and device, computer equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902847A (en) * | 2012-09-17 | 2013-01-30 | 华北电力大学 | Transmission grid single line diagram automatic design method based on combination primitives |
| CN105630483A (en) * | 2015-12-16 | 2016-06-01 | 青岛海信网络科技股份有限公司 | Configuration graphic element display method and device |
| CN105915394A (en) * | 2016-06-20 | 2016-08-31 | 河南派亚尼尔自动化设备有限公司 | Visual monitoring platform based on HTML5 and application method |
-
2018
- 2018-08-24 CN CN201810974194.3A patent/CN109254771B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902847A (en) * | 2012-09-17 | 2013-01-30 | 华北电力大学 | Transmission grid single line diagram automatic design method based on combination primitives |
| CN105630483A (en) * | 2015-12-16 | 2016-06-01 | 青岛海信网络科技股份有限公司 | Configuration graphic element display method and device |
| CN105915394A (en) * | 2016-06-20 | 2016-08-31 | 河南派亚尼尔自动化设备有限公司 | Visual monitoring platform based on HTML5 and application method |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109976723A (en) * | 2019-03-12 | 2019-07-05 | 北京国电智深控制技术有限公司 | A kind of algorithm development platform, algorithm development method and computer readable storage medium |
| CN109992698A (en) * | 2019-04-11 | 2019-07-09 | 北京字节跳动网络技术有限公司 | Data processing method, device, electronic equipment and readable storage medium storing program for executing |
| CN110929977A (en) * | 2019-09-30 | 2020-03-27 | 国网湖南省电力有限公司 | Cloud power network data display method and system based on space customization |
| CN111124384A (en) * | 2019-12-23 | 2020-05-08 | 中国航发控制***研究所 | JSON-based IO and control logic configuration integration method |
| CN111176636A (en) * | 2019-12-31 | 2020-05-19 | 新奥数能科技有限公司 | Method and device for realizing graphical configuration of comprehensive energy system |
| CN112231608A (en) * | 2020-10-30 | 2021-01-15 | 三峡机电工程技术有限公司 | Method for realizing embedded Web configuration graphics primitive |
| CN112231608B (en) * | 2020-10-30 | 2023-01-03 | 三峡机电工程技术有限公司 | Method for realizing embedded Web configuration graphics primitive |
| CN112817651A (en) * | 2021-01-14 | 2021-05-18 | 许继集团有限公司 | Canvas-based graph generation method and Canvas-based graph generation system |
| CN113656736A (en) * | 2021-08-19 | 2021-11-16 | 上海哔哩哔哩科技有限公司 | Data processing method and device |
| CN113868280A (en) * | 2021-11-25 | 2021-12-31 | 芯和半导体科技(上海)有限公司 | Parameterized unit data updating method and device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109254771B (en) | 2022-03-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109254771A (en) | A kind of monitoring page generation method and device | |
| US11144711B2 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
| US8665274B2 (en) | Method and system for generating and displaying an interactive dynamic view of bi-directional impact analysis results for multiply connected objects | |
| WO2018095261A1 (en) | Page rendering method, device, and data storage medium | |
| US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
| CN111611518B (en) | Automatic visual display page publishing method and system based on Html5 | |
| CN110096277A (en) | A kind of dynamic page methods of exhibiting, device, electronic equipment and storage medium | |
| US8890890B2 (en) | Pluggable web-based visualizations for applications | |
| US20150220496A1 (en) | Dynamic sprite based theme switching | |
| US20160012144A1 (en) | Javascript-based, client-side template driver system | |
| US20160012147A1 (en) | Asynchronous Initialization of Document Object Model (DOM) Modules | |
| CN111459501A (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| CN112817651A (en) | Canvas-based graph generation method and Canvas-based graph generation system | |
| US9781065B2 (en) | Lightweight application integration for mobile cloud computing | |
| CN112328933A (en) | Configuration graph web publishing method based on canvas | |
| CN112905944B (en) | Page online dynamic generation method and device, electronic equipment and readable storage medium | |
| CN112486482A (en) | Page display method and device | |
| CN105574114A (en) | On-line plotting method based on telecom resource management standard control library | |
| CN114168853A (en) | Data visualization display method, device, medium and electronic equipment | |
| CN115809056B (en) | Component multiplexing implementation method and device, terminal equipment and readable storage medium | |
| CN116860286A (en) | Page dynamic update method, device, electronic equipment and computer readable medium | |
| CN113849164A (en) | Data processing method and device, electronic equipment and memory | |
| CN114489639A (en) | File generation method, device, equipment and storage medium | |
| CN117251231B (en) | Animation resource processing method, device and system and electronic equipment | |
| CN111610943B (en) | Method, device and system for managing and using face sheet template |
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 |