CN104699483A - Efficient achieving method for WEB assembly - Google Patents
Efficient achieving method for WEB assembly Download PDFInfo
- Publication number
- CN104699483A CN104699483A CN201510114116.2A CN201510114116A CN104699483A CN 104699483 A CN104699483 A CN 104699483A CN 201510114116 A CN201510114116 A CN 201510114116A CN 104699483 A CN104699483 A CN 104699483A
- Authority
- CN
- China
- Prior art keywords
- assembly
- svg
- web
- attribute
- pel
- 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.)
- Pending
Links
Landscapes
- Stored Programmes (AREA)
Abstract
The invention provides an efficient achieving method for a WEB assembly. The appearance of the assembly is drawn through the Adobe Illustrator and is saved as an SVG file, related picture elements in an SVG graph are obtained through the JavaScript, the aim of dynamically changing the graph is achieved by setting attributes such as filling colors, frame colors, position coordinates, widths, heights and transformation matrixes of the picture elements, and therefore the WEB assembly is achieved. The assembly appearance drawn through the AI tool can be quite attractive and gorgeous, and the JS codes responsible for setting the SVG picture element attributes are quite short and simple. By means of the method, the design thought of a traditional GUI assembly is broken through, the drawing tool and programming are combined, and a quite important design thought is brought to the design of the GUI assembly. The method can be applied to the design of the WEB assembly, and can be used for the design of the GUI assembly with a desktop manufactured through the JAVA/C#.
Description
Technical field
The present invention relates to a kind of implementation method of WEB assembly, belong to computing machine WEB software field.
Background technology
Information is the important carrier of human civilization and social interactions, and word is the Main Means of descriptor, and most information uses word to describe preservation, such as common books ancient books and records.The history of information display is with the history of Development of Human Civilization, and in the computer internet epoch, the displaying of information is even more important.But along with social development, carry out performance information with traditional written form, can not meet everybody requirement far away, reason is the inadequate visual pattern of written form performance information, convenient and swift not.So visualization technique more and more receives the concern of people, it is supplied to the information interface of people's more convenient more dramatic of bug, enables people obtain information fast.
The visualization technique that the present invention relates to is the visualization technique of WEB, WEB technology is newer technology compared to desktop application, although WEB display technique compares desktop technology its distinctive advantage (the modelling interface structure of HTML and the agility of JavaScript), the technological accumulation of desktop application and degree of ripeness are that current WEB application can not be compared.Such as, the monitoring interface of real-time monitoring system and drawing bag software, that shows at its monitoring interface enriches lively wiring diagram, control chart, is all that the drawing bag provided by it is drawn out.WEB system needs similar software, but seldom has producer to provide, because such work is too complicated.
With the CHART assembly of the JFreeChart assembly of JAVA platform .NET platform (Microsoft Chart Controls for Microsoft .NET Framework) be typical case, GUI assembly is all that the drafting carrying out responsible assembly by assembly self is played up, and realizes complicated drawing modification in its paintComponent/OnPaint method.The GUI assembly that software company or tissue provide, its appearance better appearance, and the drafting effect of GUI assembly that individual realizes is difficult to accomplish attractive in appearance gorgeous, has very large gap compared with the figure generated with the drawing instrument such as Photoshop, AI, CorelDRAW.The GUI assembly in WEB field has continued the method for designing of desktop system, there is same problem.
Summary of the invention
Technical matters to be solved by this invention is, provides a kind of efficient implementation method of WEB assembly.AI+SVG+JS technology is adopted to realize WB assembly, to meet the needs of the day by day heavy informix displaying in WEB field and industrial monitoring.
Technical scheme of the present invention is as follows:
An efficient implementation method for WEB assembly, is characterized in that: draw outside assembly with Adobe Illustrator
See, preserve into the SVG file of assembly; Write the process code of assembly with JavaScript, by arranging the attribute comprising fill color, frame, position coordinates, wide height and transformation matrix about pel in assembly SVG, reach the object of assembly figure dynamic change, thus realize a WEB assembly.
Batik by apache wraps, and JAVA platform realizes the GUI assembly of desktop.
Specific implementation step is as follows: the outward appearance of drawing assembly with Adobe Illustrator, and for needing the graph primitive binding ID attribute of operation, exporting and saving as SVG file; Write the code of assembly with JavaScript, SRC attribute is directly set in the OBJECT label importing SVG control or the SVG filename of assembly is set by the setSrc method of control object; The method of operating of assembly mainly obtains the relevant pel in SVG figure with JavaScript, the attribute of fill color, frame, position coordinates, wide height and transformation matrix etc. is comprised by arranging assembly pel, reach the object of figure dynamic change, thus realize a WEB assembly.
The present invention ground good effect be: use AI(Adobe Illustrator) instrument drafting assembly outward appearance can accomplish very attractive in appearance gorgeous, then very simply short and small for the code being responsible for arranging SVG primitive attribute.The assembly that certain the present invention realizes can not substitute traditional components completely, have some limitations, as do not increased curve number easily as conventional curvature CHART assembly, but such as revise the functions such as scale, assembly of the present invention can reach similar effect by some skill.Because the color applying drawing work of handle component of the present invention has been carried out organically being separated with programming, Components Development can Each performs its own functions by the personnel of different role, thus GUI assembly is realized more attractive in appearance, more reliably, more professional.At the application scenarios that such as supervisory system giant-screen, driving cabin etc. are paid special attention to display effect, status is important and the application scenarios needing numerous special simulation figure, be especially applicable to adopting the present invention.The present invention breaches the design philosophy of traditional components, is incorporated into by drawing instrument during assembly realizes and combines with programming, for GUI component design brings a very important mentality of designing.The present invention not only can be applied to WEB component design, also may be used for the design that JAVA/C# makees desktop GUI assembly.
Accompanying drawing explanation
Fig. 1 is the CHART assembly design sketch based on WEB adopting SVG+JS to realize, and adopts traditional GUI component realization method.Although reduce many than the size of code of the GUI assembly of the higher level lanquage realizations such as JAVA/C#, each assembly still has 2,000 multirows.
Fig. 2 is the clock assembly design sketch that the present invention realizes.
Fig. 3 is the dial plate assembly design sketch that the present invention realizes.
Find out from Fig. 2, Fig. 3, the assembly that the present invention adopts AI+SVG+JS to realize, play up very attractive in appearance gorgeous, the code of this class component of great majority then only has 100 multirows, and private code is more than 20 row only.
Fig. 4 is the centrum assembly design sketch that the present invention realizes.As can be seen from Figure 4, adopt method of the present invention, not only can realize rotation single as clock, the dynamic change effect be made up of multiple SVG attribute can also be realized.
Fig. 5 is the conveyor monitor component design sketch of the shield structure that the present invention realizes.This class component of conveyor monitor component is that traditional components thinking is difficult to realize, and trifling numerous and diverse drawing is not suitable for directly producing with programming very much.
Fig. 6 is the SVG file of the dial plate that the present invention adopts AI instrument to draw, can understanding method of the present invention better by this file of Fig. 6.
Accompanying drawing 7 is fluid reservoir design sketchs common in configuration software.
Accompanying drawing 8 is that hydropower station water level monitors design sketch.
Accompanying drawing 9 is applied on JAVA platform by thought of the present invention, the test interface of the desktop GUI assembly of realization.
Embodiment
Below in conjunction with embodiment and accompanying drawing, the present invention is further described.
The efficient implementation method of WEB assembly of the present invention is, draws the outward appearance of assembly with Adobe Illustrator, preserves
Become the SVG file of assembly; Write the process code of assembly with JavaScript, by arranging the attribute comprising fill color, frame, position coordinates, wide height and transformation matrix about pel in assembly SVG, reach the object of assembly figure dynamic change, thus realize a WEB assembly.
Batik by apache wraps, and method of the present invention can be applied on JAVA platform, realizes the GUI assembly of desktop.
The performing step of WEB assembly of the present invention is: the outward appearance of drawing assembly with Adobe Illustrator, and for needing the graph primitive binding ID attribute of operation, exporting and saving as SVG file; Write the code of assembly with JavaScript, SRC attribute is directly set in the OBJECT label importing SVG control or the SVG filename of assembly is set by the setSrc method of control object; The method of operating of assembly mainly obtains the relevant pel in SVG figure with JavaScript, the attribute of fill color, frame, position coordinates, wide height and transformation matrix etc. is comprised by arranging assembly pel, reach the object of figure dynamic change, thus realize a WEB assembly.
The code that the present invention lists herein is all tested and is passed through in IE browser, owing to adopting SVG technology, so need the SVG plug-in unit (svgviewer.exe) installing ADOBE in IE browser.
(1), the process of clock assembly shown in Fig. 2.
As long as code process pointer rotates just passable, code below reaches the object of rotary indicator by the Transform attribute arranging each pointer pel.Parameter angle specifies the angle rotated, and x1/y1 is the coordinate in the center of circle.
Rotation of coordinate compares easy understand, be easy to derive point (x with trigonometric function, y) take initial point as the coordinate that the center of circle is rotated counterclockwise a angle be (cos (a) * x+sin (a) * y,-sin (a) * x+cos (a) * y), so its transformation matrix is as follows:
Rotate for the center of circle with (x1, y1), can be regarded as and first offset (-x1 ,-y1), then be that the center of circle rotates with round dot, then offset (x1, y1).Be expressed as with transformation matrix:
So, obtain the function code of this transformation matrix product:
this.getRotateTransform=function(angle，x1，y1)
{
var a=angle/180*Math.PI；
var ca=Math.cos(a)；
var sa=Math.sin(a)；
var e=ca*(0-x1)+sa*(0-y1)+x1， f=sa*x1+ca*(0-y1)+y1；
return String.format( 'matrix({0}，{1}，{2}，{3}，{4}，{5})'，
ca，0-sa，sa，ca，e，f)；
}
This function is the universal function that pel rotates, and can be placed in public function storehouse.
Code calculates the angle of Hour Minute Second pointer pel in each moment below:
var d=new Date()；
var h=d.getHours()%12，m=d.getMinutes()，s=d.getSeconds()；
var ha=rcd.hourInitAngle-(h*3600+m*60+s)%(12*3600)/(12*3600)*360，
ma=rcd.minInitAngle-(m*60+s)/3600*360，
sa=rcd.secondInitAngle-s/60*360；
The deviation angle of relative 12 positions when InitAngle is each pointer pel AI drafting.
So the process of rotary indicator pel is:
hourNode.setAttribute("transform"，this.getRotateTransform(ha，x0，y0))；
(x0, y0) is the coordinate of rotation center.
The rotation of a point so processes, and the process of a pel is also like this, and this is the support of SVG renderer certainly.Carry out the process such as movement, convergent-divergent, rotation of responsible pel with transformation matrix, enormously simplify the work of playing up of figure, this is also basic-level support of the present invention.
The process code of accompanying drawing 3 dial plate assembly is substantially the same with clock assembly:
var angle=initAngle-(val- min)/(max- min)*(endangle- stangle)；
needleNode.setAttribute("transform"，getRotateTransform(angle，x0，y0))；
(2), the process of the assembly of taper figure shown in accompanying drawing 4.
this.setValue=function(val)
{ ……
var f=val/this.max， h=f*(rcd.bottom[1]-rcd.top.cy)
// centrum is oval
var cx=rcd.bottom[0]，cy=rcd.bottom[1]-h；
rx=f*rcd.top.rx，ry=f*rcd.top.ry；
var circleNode=this.svgdoc.getElementById(rcd.circleID)；
circleNode.setAttribute("cx"， cx)；
circleNode.setAttribute("cy"， cy)；
circleNode.setAttribute("rx"， rx)；
circleNode.setAttribute("ry"， ry)；
// centrum triangle
var x1=cx-rx，y1=cy，h=cx+rx；
var triangleNode=this.svgdoc.getElementById(rcd.triangleID)；
triangleNode.setAttribute("d"，String.format("M{0}，{1} L{2}，{3} H{4} z"，rcd.bottom[0]，rcd.bottom[1]，x1，y1，h ))；
}
By the code of short a few row, just achieve the object that centrum figure assembly dynamically arranges data.
(3), the special process of assembly scale etc.
The above is the substance of invention components JavaScript code, in addition goes back some auxiliary code, as revised dial scale value and determining which which scale shows and do not show.
The value of scale is set:
text_node=svgdoc.etElementById(‘textnodeID’)
text_node.childNodes.item(0).data = str
Display/hide scale:
text_node.setAttribute("visibility"， "visible"/"hidden")
(4), curvilinear component is realized by method of the present invention.
As the curvilinear component in accompanying drawing 1, comparatively speaking it is applicable to realizing by traditional GUI assembly thinking really, but drawing complicated gorgeous scale to ask, enriching lively background and combining flexibly, conventional curvature CHART assembly is just difficult to accomplish, adopts the present invention to be then easier to realize such object.Comparatively speaking traditional components is static realization, and its plasticity is more limited, and the present invention uses drawing tool to draw the effect of hope, then carrys out controlled attribute form by program, so realization of the present invention has higher self-defined ability.The POINTS attribute mainly revising this polygon pel of curve that will make here: according to the curve values imported into, calculating is compared with the initial range value of X-axis, Y-axis, generate the coordinate (Xn, Yn) of each point, the list of all point coordinate is assigned to POINTS attribute.
The value of curve is set:
var polyline_node =svgdoc.etElementById(‘pnodeID’)
polyline_node. setAttribute("points"，"x0，y0 x1，y1 … xn，yn")；
The scale of certain curve also can be modified by method above.
(5), accompanying drawing 5 is conveyor monitor components of the shield structure that the present invention realizes, and this class component monitored by conveyor is that traditional components thinking is difficult to realize, and can realize relatively easily with the present invention.The core of this assembly represents whether conveyor operates with the in rotary moving of rotating shaft.The present invention AI draws conveyor shell and rotating shaft, and rotating shaft is than many drafting 1-2 rings (and rotating shaft will be placed on below shell) of actual displayed.Rotating shaft is done movement along oblique axis, can simulate rotating shaft rotate effect.The translate attribute of rotating shaft SVG pel is directly set, when attention shift reaches a ring, then returns 0.
tbmNode.setAttribute("transform"，" translate(step_x， step_y)")；
Accompanying drawing 6 is the SVG files of the dial plate that the present invention adopts AI instrument to draw, with helping understand method of the present invention.
Accompanying drawing 7 fluid reservoir figure and Fig. 8 hydropower station water level monitor figure, it is the common figure of configuration software, also be easy to realize by method of the present invention: draw these interfaces with AI, and drawn scale, liquid storage/water storage rectangle represents, its fill color is gradient look (adds transparent setup of attribute of Denging, and note the order relation between pel).The process of similar taper figure assembly, the height of a program code control rectangle is just passable, quite simple and convenient.
(6), thought of the present invention is applied on JAVA platform by accompanying drawing 9, realizes the GUI assembly of desktop, and this needs the Batik bag of apache to support, the classes such as the org.apache.batik.swing.JSVGCanvas of Batik bag provide related method of operation.The method of operating (JavaScript language) of the pel node in the method for operating (JAVA language) of the SVG pel node of JAVA assembly and WEB assembly presented hereinbefore is basically identical.
Claims (3)
1. an efficient implementation method for WEB assembly, is characterized in that: draw outside assembly with Adobe Illustrator
See, preserve into the SVG file of assembly; Write the process code of assembly with JavaScript, by arranging the attribute comprising fill color, frame, position coordinates, wide height and transformation matrix about pel in assembly SVG, reach the object of assembly figure dynamic change, thus realize a WEB assembly.
2. the efficient implementation method of WEB assembly as claimed in claim 1, is characterized in that: the Batik by apache wraps, JAVA platform realizes the GUI assembly of desktop.
3. as claim 1 or as described in the efficient implementation method of WEB assembly, it is characterized in that specific implementation step is as follows: the outward appearance of drawing assembly with Adobe Illustrator, and for needing the graph primitive binding ID attribute of operation, exporting and saving as SVG file; Write the code of assembly with JavaScript, SRC attribute is directly set in the OBJECT label importing SVG control or the SVG filename of assembly is set by the setSrc method of control object; The method of operating of assembly mainly obtains the relevant pel in SVG figure with JavaScript, the attribute of fill color, frame, position coordinates, wide height and transformation matrix etc. is comprised by arranging assembly pel, reach the object of figure dynamic change, thus realize a WEB assembly.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510114116.2A CN104699483A (en) | 2015-03-16 | 2015-03-16 | Efficient achieving method for WEB assembly |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510114116.2A CN104699483A (en) | 2015-03-16 | 2015-03-16 | Efficient achieving method for WEB assembly |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104699483A true CN104699483A (en) | 2015-06-10 |
Family
ID=53346652
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510114116.2A Pending CN104699483A (en) | 2015-03-16 | 2015-03-16 | Efficient achieving method for WEB assembly |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104699483A (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105786526A (en) * | 2016-03-24 | 2016-07-20 | 江苏大学 | Web-based efficient flow chart drawing system and method |
| CN105868161A (en) * | 2016-03-25 | 2016-08-17 | 华东交通大学 | A calculation method for a dispatching supervision breaker vector graph primitive coordinate conversion system |
| CN106250129A (en) * | 2016-07-26 | 2016-12-21 | 南京航空航天大学 | The vector quantization dynamic drawing method of symbol based on meta graph recognition model |
| WO2017080085A1 (en) * | 2015-11-12 | 2017-05-18 | 小米科技有限责任公司 | Graphical user interface drawing method and apparatus |
| CN107220357A (en) * | 2017-06-05 | 2017-09-29 | 广东亿迅科技有限公司 | The visual implementation method of SVG map datums and device |
| CN109445891A (en) * | 2018-10-09 | 2019-03-08 | 北京国电智深控制技术有限公司 | Picture configuration and methods of exhibiting, device, computer readable storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7613721B2 (en) * | 2001-03-14 | 2009-11-03 | Microsoft Corporation | Schemas for a notification platform and related information services |
| CN103019682A (en) * | 2012-11-20 | 2013-04-03 | 清华大学 | Method for displaying date by combining user-defined graphics into SVG (Scalable Vector Graphics) |
| CN103226471A (en) * | 2013-03-21 | 2013-07-31 | 南京工业大学 | Design method of firmware GUI based on SVG |
| CN104182233A (en) * | 2013-12-19 | 2014-12-03 | 南宁市磁汇科技有限公司 | Method for visual editing of vector graphs in WEB page |
-
2015
- 2015-03-16 CN CN201510114116.2A patent/CN104699483A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7613721B2 (en) * | 2001-03-14 | 2009-11-03 | Microsoft Corporation | Schemas for a notification platform and related information services |
| CN103019682A (en) * | 2012-11-20 | 2013-04-03 | 清华大学 | Method for displaying date by combining user-defined graphics into SVG (Scalable Vector Graphics) |
| CN103226471A (en) * | 2013-03-21 | 2013-07-31 | 南京工业大学 | Design method of firmware GUI based on SVG |
| CN104182233A (en) * | 2013-12-19 | 2014-12-03 | 南宁市磁汇科技有限公司 | Method for visual editing of vector graphs in WEB page |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2017080085A1 (en) * | 2015-11-12 | 2017-05-18 | 小米科技有限责任公司 | Graphical user interface drawing method and apparatus |
| US10108323B2 (en) | 2015-11-12 | 2018-10-23 | Xiaomi Inc. | Method and device for drawing a graphical user interface |
| CN105786526A (en) * | 2016-03-24 | 2016-07-20 | 江苏大学 | Web-based efficient flow chart drawing system and method |
| CN105868161A (en) * | 2016-03-25 | 2016-08-17 | 华东交通大学 | A calculation method for a dispatching supervision breaker vector graph primitive coordinate conversion system |
| CN106250129A (en) * | 2016-07-26 | 2016-12-21 | 南京航空航天大学 | The vector quantization dynamic drawing method of symbol based on meta graph recognition model |
| CN106250129B (en) * | 2016-07-26 | 2019-04-26 | 南京航空航天大学 | Vector quantization symbol dynamic drawing method based on meta graph recognition model |
| CN107220357A (en) * | 2017-06-05 | 2017-09-29 | 广东亿迅科技有限公司 | The visual implementation method of SVG map datums and device |
| CN109445891A (en) * | 2018-10-09 | 2019-03-08 | 北京国电智深控制技术有限公司 | Picture configuration and methods of exhibiting, device, computer readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104699483A (en) | Efficient achieving method for WEB assembly | |
| US10706599B2 (en) | Recursive cell-based hierarchy for data visualizations | |
| CN106997610B (en) | Image rendering method and device and electronic equipment | |
| US6956574B1 (en) | Methods and apparatus for supporting and implementing computer based animation | |
| US20190056854A1 (en) | Developing a non-rectangular user interface | |
| Beeley | Web application development with R using Shiny | |
| US9905034B2 (en) | Secure isolation of scripting from native graphic rendering of animated data visualizations | |
| Yim et al. | Matplotlib for Python Developers: Effective techniques for data visualization with Python | |
| CN105303506B (en) | A kind of data parallel processing method and system based on HTML5 | |
| Kuan | Learning highcharts 4 | |
| WO2020135586A1 (en) | Customized emergency map symbol template webgis-based display method and device | |
| CN106371695A (en) | Method and device for processing user-defined cursor | |
| Girašek et al. | Visualization of temperature fields distribution on power module within web interface | |
| Xia et al. | Improvement of virtual EAST system based on WebVR | |
| Jackson | Pro android wearables: Building apps for smartwatches | |
| Maloney et al. | Pattern Maps and Labels | |
| Flanagan | Canvas Pocket Reference: Scripted Graphics for HTML5 | |
| MacDonald | Introducing WPF | |
| Baek | A Simplified Graphics System Based on Direct Rendering Manager System | |
| Joshi | Canvas Cookbook | |
| Maruya et al. | Design Support Tool Using Pen Device for Simplification of Animation Design | |
| Liu | Applied information technology in graphics algorithm implementation based on the web canvas | |
| Asthana et al. | Computer graphics for scientists and engineers | |
| Yang et al. | An interactive computer framework for learning genetics | |
| Lyngfelt et al. | MophR: a method proposal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20150610 |
|
| WD01 | Invention patent application deemed withdrawn after publication |