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

A Method for Automatically Converting Design Drawings into Web Pages Based on Box Model

A technology of automatic conversion and design drawing, applied in software engineering design, calculation, visual/graphic programming, etc., can solve the problems of different output quality, time-consuming, and difficult to unify specifications, so as to improve output quality, avoid differences, reduce The effect of repetitive work

Active Publication Date: 2022-02-15
CCCC SECOND HARBOR ENG +1
View PDF14 Cites 0 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
  • A Method for Automatically Converting Design Drawings into Web Pages Based on Box Model
  • A Method for Automatically Converting Design Drawings into Web Pages Based on Box Model
  • A Method for Automatically Converting Design Drawings into Web Pages Based on Box Model

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0105] Such as figure 1 :

[0106] A01: Layout box: identifies the blocks (head, body, tail, etc.) on the design drawing, corresponding to the response block of the web page; the layout box has various box attributes, such as width (A05), height (A04), X coordinates (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; while the background box inherits the properties of the layout box, it also has proprietary properties, such as background color, background image, etc.;

[0108] A03: Element box: identify the content elements (text, picture, icon, etc.) on the design drawing; while the element box inherits the background box, it has some other attributes, such as font, link, alignment, etc., and unique content padding, Such as titles, paragraphs, lists, forms, etc., corresponding to various elements of web pages;

[0109] Thro...

Embodiment 2

[0140] The first step is to analyze the initialization work: use the box model theory of the present invention to carry out semantic annotation on the design drawing. The more important thing is to develop supporting labeling tools to visually mark the design drawings. The tools need to be smarter, to be able to reflect the box model theory of the present invention, and to be able to solve some layout boxes and element boxes in the labeling. Display the effects of collision, intersection, partial overlap, etc.; assist developers to perform visual drag-and-drop operations, so that users do not need to pay attention to some theoretical details of the box model. How to realize the tool of the box model theory with other programming languages ​​is not within the scope of discussion of the present invention. Here is a brief description of the basic idea of ​​implementing a simple tool with a programming language: using c language to develop a drawing board-based labeling tool, the ...

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 based on a box model into a webpage, comprising: S1, semantically defining the design drawing, so that the design drawing is transformed into box data; S2, analyzing and converting the box data obtained in step S1 into a web page. The present invention generates a computer-understandable intermediate language, that is, box data, by semantically defining the design drawing, and then uses a computer algorithm to automatically understand the box data of the design drawing and parses to generate a directly usable web page. The present invention has the advantages of improving front-end efficiency, reducing workload, increasing reusability, reducing repetitive work, improving output quality, reducing differences, etc., and can be widely used in the technical field of methods for converting design drawings into web pages.

Description

technical field [0001] The invention relates to the technical field of a method for converting a design drawing into a webpage. 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 (Style Activity) cascading style sheets (CSS) are two interfaces and technical standards for the interaction between the Web and users; Therefore, web design diagrams need to be converted into Html first. At present, front-end developers need to manually cut diagrams and write codes. The output has formed a certain contradiction. [0003] The box model opens up a way to solve this contradiction. In the box model, the definition page design diagram is divided into different parts by the box mark of the same level. Inside the box, by marking the nested sub-boxes, more fine-grained marking is performed; formi...

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
Patent Type & Authority Patents(China)
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