Artwork-to-Component Conversion for Layout Preservation

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

The design and development process for computer applications is inefficient and prone to errors due to the disconnect between designers' graphical conceptions and developers' implementation, where artwork is inaccurately translated into functional components, leading to inefficiencies and inaccuracies in preserving the original layout and behavior.

Innovation Solution

A method and system that directly converts static artwork into functional application components while maintaining the original appearance and layout by identifying and replacing artwork portions with functional components, allowing for the management of multiple artwork fragments to define different states of components, and using tools to facilitate this conversion.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Productivity

If traditional manual coding and layout processes are used, then developers have flexibility in implementation, but the process becomes error-prone and time-consuming with frequent iterations

Engineering Contradiction:

Improveapplication development speedVSAvoidlayout accuracy

Core Design Contradiction:

ProductivityVSReliability

Solution Approach 1:

The patent uses image processing to capture and copy the visual appearance of artwork directly into the application. Functional components are generated by copying visual properties (position, size, shape, color) from the artwork image, eliminating manual positioning and ensuring exact replication of the design layout.

Inventive Principle:

Principle #26Copying

Solution Approach 2:

The patent replaces manual mechanical processes (developer eyeballing and positioning elements) with automated image processing algorithms. The system automatically detects and extracts visual information from artwork images to generate functional components, substituting human manual operations with computational processes.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

2Ease of manufacture

If separate design and development stages are used, then designers can focus on appearance, but the translation to functional components becomes inaccurate and inefficient

Engineering Contradiction:

Improveartwork creationVSAvoidartwork to code translation accuracy

Core Design Contradiction:

Ease of manufactureVSManufacturing precision

Solution Approach 1:

The patent introduces an intermediary image processing layer between design artwork and functional code. This intermediary system automatically translates visual artwork into functional components by extracting visual properties and generating corresponding code, serving as a bridge that eliminates the disconnect between design and development.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent transforms the artwork from a visual representation into functional code by changing parameters - converting visual properties (position x,y, size w,h, color RGB) into programming parameters (element position, dimensions, styling properties). This parameter transformation enables accurate translation while maintaining the original design intent.

Inventive Principle:

Principle #35Parameter changes

3Adaptability or versatility

If manual positioning and layout is used, then developers can adapt to requirements, but the process requires repeated iterations to achieve correct layout

Engineering Contradiction:

Improvelayout flexibilityVSAvoiditeration cycles

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

The patent performs preliminary action by automatically extracting and establishing all layout parameters from the artwork image before development begins. The system pre-determines positions, sizes, and arrangements of all components based on image analysis, eliminating the need for iterative adjustments during development.

Inventive Principle:

Principle #10Preliminary action

Solution Approach 2:

The patent copies the exact layout structure from the artwork image directly into the application. By replicating the visual arrangement through automated image processing, the system preserves the designer's intended layout without requiring iterative refinement, as the copy is already precise.

Inventive Principle:

Principle #26Copying

Data Source

PatentUS8417728B1User interfaces, methods, and systems for developing computer applications using artwork

Publication Date: 2013.04.09 ADOBE INC

AI summary

Methods and systems for using artwork to develop computer applications in ways that preserve the artwork's appearance and layout, including by importing the artwork and selectively replacing potions with functional components. One embodiment comprises a method for developing an application that involves displaying artwork in a design view area. The method may involve displaying artwork comprising a list representation comprising a plurality of list item representations and identifying each list item representation as a group of one or more subitem representations. The method may further comprise determining a list layout for list items using the list item representations of the artwork and inserting a list as a component in the design view area. This list may determine or otherwise be used to determine the positions of either the list item representations or list items replacing the list item representations. These positions may be determined based on the list layout that was determined.