Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Method for automatically converting a design drawing into a webpage based on a box model

An automatic conversion and design drawing technology, applied in software engineering design, computing, visual/graphic programming, etc., can solve problems such as time-consuming, difficult to unify specifications, and different output quality, so as to reduce workload, improve output quality, The effect of reducing duplication of work

Active Publication Date: 2019-04-19
CCCC SECOND HARBOR ENG +1
View PDF14 Cites 6 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0004] In the traditional software development process, after designing the drawings, front-end developers need to manually cut the design drawings one by one, and hand-write DIV and CSS, which will take up considerable time in the development cycle; if the design drawings are modified, page coding and cutting diagrams need Start all over again; in terms of output products at the same time, the output quality of different personnel is different, and the standards are difficult to unify

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method for automatically converting a design drawing into a webpage based on a box model
  • Method for automatically converting a design drawing into a webpage based on a box model
  • Method for automatically converting a design drawing into a webpage based on a box model

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0105] Such as figure 1 :

[0106] A01: Layout box: Identifies the blocks on the design drawing (head, text, tail, etc.), corresponding to the response block of the web page; the layout box has various box attributes, such as width (A05), height (A04), X coordinate (A08), ordinate (A09), border (A07), margin (A06), etc., can be used to describe the layout information of the box;

[0107] A02: Background box: Identifies the background elements on the design drawing; the background box inherits the attributes of the layout box and has proprietary attributes, such as background color, background image, etc.;

[0108] A03: Element box: Identifies the content elements (texts, pictures, icons, etc.) on the design drawing; while the element box inherits the background box, it has other attributes, such as font, link, alignment, etc., and unique content filling, For example, titles, paragraphs, lists, forms, etc., corresponding to various elements of the webpage;

[0109] Through the semanti...

Embodiment 2

[0140] The first step is to analyze the initialization work: use the box model theory of the present invention to semantically label the design drawings. One of the more important ones is the need to develop supporting annotation tools to visually mark the design drawings. The tools need to be smarter, to be able to embody the box model theory of the present invention, and to solve some layout boxes and element boxes in the annotation. The effect display of collisions, intersections, partial overlaps, etc.; assist developers in visual drag and drop operations, so that users do not need to pay attention to some theoretical details of the box model. How to use other programming languages ​​to implement the tool of the box model theory is beyond the scope of the present invention. Here is a brief description of the basic idea of ​​using a programming language to implement a simple tool: using C language to develop a drawing board-based annotation tool, the tool can load the design...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses a method for automatically converting a design drawing into a webpage based on a box model, and the method comprises the steps: S1, carrying out the semantic definition of thedesign drawing, and enabling the design drawing to be converted into box data; And S2, analyzing the box data obtained in the step S1, and converting the box data into a webpage. According to the method, semantic definition is carried out on the design drawing to generate an intermediate language which can be understood by a computer, namely box data, and then the box data of the design drawing are automatically understood by a computer algorithm and analyzed to generate a webpage which can be directly used. The method has the advantages of improving the front-end efficiency, reducing the workload, improving the reusability, reducing the repeated work, improving the output quality, reducing the difference and the like, and can be widely applied to the technical field of methods for converting design drawings into webpages.

Description

Technical field [0001] The invention relates to the technical field of a method for converting a design drawing into a web page. More specifically, the present invention relates to a method for automatically converting a design drawing based on a box model into a web page. Background technique [0002] In the field of software development, HTML (HTML Activity) and Style Activity (Style Activity) cascading style sheets (CSS) are two interfaces and technical standards for the interaction between the Web and users; the recognition of pictures is still a problem, especially for web design. Figures, so the Web design drawings need to be converted to HTML first. Currently, front-end developers need to manually cut the drawings and write codes. This is a very heavy workload, very labor-intensive and time-consuming work, and timely response to page output requirements, high-quality The output has formed a certain contradiction. [0003] The box model opens up a variety of ideas for solvi...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F8/38G06F8/34G06T11/60
CPCG06F8/34G06F8/38G06T11/60
Inventor 刘杰张爱平
Owner CCCC SECOND HARBOR ENG
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com