Sample Graphics Components and Component Hierarchy

Please install Adobe's SVG-Viewer 3.0 (ASV3.0) plug-in from Adobe-site to view SVG Components:

Note:  We strongly urge you to download SVG viewer and review links at 6 & 7. The SVG pages contains important examples, summary and proof, which support the claims and conclusions in this website.

We used SVG to validate the concepts, because Adobe's SVG viewer was released 5 years ago. But these concepts can be applied to build GUI-API for any of the emerging web platforms such as Microsoft's XAML/WPF/E or Adobe's MXML/Flash.

Please checkout the following links for DHTML/JavaScript Components
(Please see JSP code & notice the data-driven nature of the GUI Widgets)


(Internet Explorer and Netscape Navigator only) DHTML_Demo\scrollobj.html (please check out the code section in the page that uses the GUI-Class to scroll a list of components).


(Internet Explorer and Netscape Navigator only) DHTML_Demo\pom.html (Please click on Company names in the text boxes)


(Internet Explorer only) DHTML_Demo\EXAMPLE1\ie_float1a.html (Please move mouse on to all the top and sub-items of the hierarchical menu. Scroll down the page and see the expandable menu.)


(Internet Explorer only) DHTML_Demo\EXAMPLE1\ie_floats2a.html (Please review the component hierarchy at bottom right corner. Please review Component tree image and general code structure image of the component hierarchy)


(Internet Explorer and Netscape Navigator only) DHTML_Demo/EXAMPLE1/present_mix.html

Note: The above widgets were created in late 1999 and early 2000 and tested on the browsers available then. Please understand, only objective is to prove beyond any doubt that it is possible to build interchangeable code-blocks for the 'loosely coupled' components and the reusable GUI Classes. Hence, if you want to see conclusive proof, you must use Internet Explorer and Adobe’s SVG Viewer.

Important SVG Examples: Building Component Hierarchies & Positioning
(Please review the summary in the web pages & "HANDLE" for components)


Properly placed components:  Drawing Areas to build Component hierarchy
(please scroll the components and find other drawing areas, with in the larger drawing area. Please checkout the “Drawing Area” hierarchy. Once all the “Component Factories” for the components are ready, such component hierarchy can be created in about 30 minutes.)
Irregularly placed components: Random placement in Drawing area
(The placement of the components are not error. It is jus a test for drawing area. The drawing area takes locations for subcomponents and places at that location) --New Important Data added at Bottom of page on 9th, June, 2006.
Few More Sample Tests for Component Hierarchy:


(Samples that mix Agile components created by Agile-templates GUI and out side components) SVG-tests/SVGScroller3Dab.html  
(You may resize the Tree by dragging the red dot at bottom right corner)


(Please click and drag mouse on the chemical compound)




Please Note: They are just to prove that any complex component can be created as 'Contiguous Block of Code'. This is very important requirement to build our component based development paradigm. (Few more images for potential components Scales/Dials)

Few people were already snapping up components to compose the web-pages. They are calling it Mash-Ups. This technology has two simple but unobvious additions: 
(i) Custom creates the code-block for each mash-up component using "Component Factories" that uses real-time data and also make the components update themselves at real-time using Ajax methods.
(ii) Also we have invented integration methods, so that all these components/mash-ups collaborate with each other or exchange data; just like GUI components do in the desktop systems. Isn’t it Cool? (see discussion for
Air Traffic control monitor for 3 cities)

Sorry for bad ascetics and presentation of the components. They were created to test and validate various possibilities/concepts and not intended for marketing demo.

These are only small portion of hundreds of tests to understand and validate the concepts. However, I haven’t put any effort neither to make them error free nor to optimize them for performance.

Some sample SVG Components (e.g. Charts & Trees):
Some sample charts: Demo-SVGS\misc-charts.html
Couple of Regular Tree Components:  Demo-SVGS\SVG-DEMO\SVGTreeCB.html (Please move mouse on to SDQ, JFK and ATL etc.)
Note: More examples, if you like to quickly see more samples.
Trees& Geographic-Maps demo:
US-Map with pop-up message: Demo-SVGS\SVG-DEMO\maps.html 
(Move mouse on squares and dots on the map). This component takes a Component for background and a list of components and their locations. It places them at that location.
Folder & Files tree:  SVG-tests\folder_tree.html
Sample Application Templates:
Cartographic Map: AppTemplates\carto-net\TuerlerseeMAIN.html
US-Map with population data: AppTemplates\us-population\us-map.html
Adobe’s Ticket Reservation System: AppTemplates\adobe-theater\TheaterMAIN.htm

Very useful simple tutorial to illustrate basic principles behind the early reusable GUI Widget (e.g. Java Classes) and a brief background on how it all started


Pioneer-soft's online GUI Widgets far easier to build, use and highly flexible!

Few Outside Links (Need Internet Connection):
Visit Macromedia’s the flash:
Oakland Air traffic:
Many more samples at:
Few Outside Links (Need Internet Connection):
Adobe’s demos: Adobe-Demos\US-AIR\usair.htm
Chemical 3D Modeling: Caffeine, Cholesterol, Ethanol, Histamine, Riboflavin


Very early test DHTML components: Agile & Scroll Menu (Works only in IE and Netscape)


Other experiments to build DHTML Hierarchy: HTML-Table1 and HTML-Table2

Special Note: Please understand, examples in the website were created over period of several years. Initially the widgets were tested on both Netscape 3.0 and Internet Explorer. But, due to time and resource constraints, I didn't port them to new Browsers. OK, I am too lazy . My objective is to prove myself, beyond any doubt, that the concepts work for all cases and scalable. Since I got crystal clear understanding on how it works, I saw little value in porting them to the new releases. The DHTML components were tested on older less capable browsers (e.g. partial DOM/JavaScript support). I don't see any need for the cross browser testing now.

Therefore, it is possible to create easily interchangeable 'code-block' for any 'loosely-coupled' component. Hence, it is possible to create interchangeable software components and build applications by assembling them.

Unique Uses and Advantages of the Online-GUI_API
In today’s information driven economy the knowledge workers and customers, certainly going to demand more sophisticated functionality and agile applications that can be quickly adaptable to rapidly evolve business needs. In the emerging net centric world, it is desirable that nearly all the IT application securely accessible online from anywhere in the world. The graphics intensive IT applications include: visual simulations, near real-time dynamic GIS-maps (e.g. location-based), command & control, visual feedback (e.g. simulation of emerging weather patterns), visual analysis (e.g. data-warehousing) or decision support systems.
However, to deploy the IT applications online, many businesses are being forced to sacrifice rich graphical capabilities that they were accustomed to on the traditional GUI-platforms (e.g. sacrifice improved user productivity and reduced mistakes). Also, because there is no viable online-GUI-API technology today, many graphics intensive applications are forced to develop for the traditional-GUI platforms. The “Computer Graphics” technology, however, confronting two major fundamental limitations:
The software technologies and tools to build GUI (or 2D and 3D graphics intensive visual) online applications lagging far behind the incredible spread of Internet and rapidly growing data in the networked servers. Existing online technologies (e.g. HTML, DHTM or Macromedia’s Flash) can offer only limited capabilities compare to the traditional GUI platforms (e.g. Windows-XP, Java/Swing or UNIX/X11/Motif). Furthermore, development costs lot more to build even such primitive online graphics applications. There is a compelling need for innovative online GUI-application development technologies to build superior next generation online corporate information systems, enterprise applications or other real-time dynamic data-driven graphics applications (i.e. Information Technology or “IT applications” in short).
The traditional GUI technologies are too rigid and complex to create sophisticated custom applications. Even today it is very expensive to create large graphics intensive applications for Windows-XP. There is a compelling need for innovative technologies and tools, which could substantially cut the complexity and development cost of the “IT applications”. Furthermore, there is a need for new technologies to create many graphics intensive real-time IT applications, which are prohibitively expensive or not possible today using those traditional technologies.
Is there other work going on in this area that complements this effort?
Yes! Our GUI-API needs XML-graphics platforms. There are countless players actively engaged in building XML-based graphics technologies, among them the big players (or technology leaders) in the online-GUI technologies (for the rich internet applications) are the following organizations:
Microsoft has been working on Avalon/XAML for the future Windows-2006/Longhorn. (Update: Now vista is released)
Macromedia/Adobe working SVG and MXML/Flash (or Flex).
W3C, Mozilla, Apache and Open Software Foundation (active contributors Google, Adobe, IBM, SUN & many others) working on SVG, DHTML, Xforms, X3D, XUL and other XML technologies. For example, check out the status of Mozilla’s effort to natively support SVG in Firefox 1.5

It is very complex to implement dynamic data-driven large custom graphics Components writing bare 2D & 3D XML graphics instructions. It is 10 times more complex than bare HTML statements, for example, error prone math to draw 2D or 3D components using simple graphics elements (e.g. lines, arcs and transformations). Hence, it costs many times more than the traditional GUI- application, to build online GUI-applications that could barely match 50% of their GUI-features. It is practically impossible to build hierarchy of such large components, which is essential for many applications. Our innovative technology can leverage any of those XML-graphics technologies (e.g. XAML or SVG) and provides simple and elegant GUI-API (e.g. Java or C# class library) abstraction for the developers to build superior next generation online GUI-applications.

Is there other work going on that competes with this effort?

None (As far as we know)

Most experts (e.g. Microsoft and Macromedia) readily admit that it is not possible to create graphics intensive online-applications that can mach rich user experience comparable to the traditional-GUI. Our process is extremely unobvious, which needed a long arduous process that included a bit of luck lead us to the amazing discoveries in our early stages, of course, occasional setbacks and finally success to build the GUI-API and the novel component paradigm. It is very unlikely any one else could make the same mistakes that led to the discoveries, endure the long arduous process and stay undetectable from our ever-vigilant eyes for the potential competitors all these years. We haven’t even found any clue, that any one else in the world ever even contemplated the possibility of the online-GUI-API.

Acknowledgement to the Contributors of the Components & Predecessor to these Technologies

Building HTML component-hierarchy using reusable Java-classes (i.e. Component Code Generators) is not new. The BEA's HTMLkona and Apache’s ECS have been doing since 1997. Likewise few other technologies such as Macromedia’s Flash and Microsoft’s Web Controls supported tag based method to build component hierarchy. However, any one neither comprehended the unique characteristics of XML-based graphics platforms (e.g. DHTML, SVG or XAML) nor put sufficient effort to build ready to plug-in components.

Most components (e.g. SVG or DHTML) we find in most web site could be converted into a plug-in component for the web page. The plug-in components can be used as subcomponent to build component hierarchy. Once, we create the plug-in component, it is quite simple and straightforward to create a reusable-GUI-class. This GUI-class can support set-methods to input real-time data and subcomponent, and uses the inputs to build dynamic data driven plug-in component.

Note: Most of the DHTML examples in the site are built using DHTML component code found on DHTML educational sites in the mid 1999. Most of the sample components in the Elan-Soft web site were created using GPL licensed free software. Also, other SVG components are samples or examples, from many web sites, such as, Adobe,, KevLinDev and other sites.

All of those sites along with many individuals at Yahoo's SVG-group helped us in understanding these technologies. This is to acknowlodge their contribution and thanks for providing the samples to advance the component technology. These sample components are included here for educational purposes only and for any commercial enquires, please refer to respective web sites.

Miscellaneous Documents Privacy Policy | Site Map | Services
Copy Right © 2006 Pioneer Soft, LLC. All Rights Reserved.