Drag-and-Drop SVG Page Design Tool with Metadata Mapping

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Conventional page design tools for web applications lack flexibility in creating complex web application elements, requiring extensive programming knowledge and manual code writing, which is time-consuming and prone to errors, especially when integrating dynamic objects with back-end systems.

Innovation Solution

A page design tool that allows Scalable Vector Graphics (SVG) images, Tree, and Tab objects to be used as drag and drop objects, enabling users to incorporate metadata-defined images and complex objects into web application pages without extensive programming knowledge, using a graphical user interface (GUI) and pre-built code, with data sources and conditions mapped graphically.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of manufacture

If conventional page design tools are used to create complex web application elements, then programming knowledge and manual code writing are required, but this increases time consumption and error rates

Engineering Contradiction:

Improveease of creating complex web application elementsVSAvoidtime consumption for code writing and testing

Core Design Contradiction:

Ease of manufactureVSLoss of time

Solution Approach 1:

The patent introduces a visual programming environment as an intermediary between the user and the complex code generation process. Users interact with a graphical interface that automatically generates and manages the underlying code, eliminating the need for manual programming while reducing time consumption through automated processing

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The system provides templates and pre-built components that users can copy and customize rather than writing code from scratch. This allows rapid creation of complex web application elements by adapting existing working code structures, significantly reducing development time and errors

Inventive Principle:

Principle #26Copying

2Adaptability or versatility

If conventional page design tools are used, then basic web page structure can be designed, but flexibility in constructing complex web application elements is limited

Engineering Contradiction:

Improveflexibility in constructing complex web application elementsVSAvoidcomplexity of the page design tool

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent divides complex web application elements into separate, manageable components and modules that can be independently designed, configured, and assembled. This segmentation provides flexibility in constructing complex elements while keeping the overall system manageable through modular architecture

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The visual programming environment dynamically adapts to user needs by providing context-sensitive tools and automated code generation that responds to the specific requirements of each web application element, enabling flexible construction without requiring manual coding for each scenario

Inventive Principle:

Principle #15Dynamics

3Manufacturing precision

If page designers manually write code for complex objects, then precise control over the output is achieved, but extensive programming knowledge and testing effort are required

Engineering Contradiction:

Improveprecision of code generationVSAvoidease of use for page designers

Core Design Contradiction:

Manufacturing precisionVSEase of operation

Solution Approach 1:

The system performs self-service by automatically generating, validating, and optimizing the code based on the visual design inputs. The automated code generation handles the complex translation from graphical interface to executable code, ensuring precision while requiring minimal programming knowledge from users

Inventive Principle:

Principle #25Self-service

Solution Approach 2:

The visual programming environment incorporates real-time feedback mechanisms that automatically validate code generation and provide instant previews of the resulting web application elements. This feedback loop ensures precision in code output while simplifying the user experience by eliminating manual testing requirements

Inventive Principle:

Principle #23Feedback

Data Source

PatentUS7873946B2Scalable vector graphics, tree and tab as drag and drop objects

Publication Date: 2011.01.18 ORACLE AMERICAN INC

AI summary

A mechanism is disclosed for providing Scalable Vector Graphics (SVG) images, Tree and Tab as drag and drop objects. A page design tool receives an indication that a user wishes to place a metadata-defined image onto a page design canvas. The page design tool further receives an association of metadata defining the image, and in response, parses through the metadata to identify properties and characteristics of the metadata-defined image to expose to a user through a graphical user-interface of the page design tool. The page design tool enables a user to assign conditions to the exposed properties and characteristics of the image, as well as map available data sources to the properties and characteristics in order to dynamically control image properties during display. Hence, the page design tool presents graphical user interface tools for simply incorporating otherwise complex objects into page designs.