University of the West of England Home Page Peter Hale My Home Page SEEDS Site Map Site Map - SEEDS - SEEDS Page

Software Engineering Research Group - Centre for Complex Cooperative Systems logoCentre for Complex Cooperative Systems

Text Only Site Map Text Only Site Map


Example Pages

Early Research - MSc Research Summary - The earliest research was into providing a user driven model development example that would provide the kind of user interface and visualisation required for interactive costing.

Engineering Examples - Aerospace - http://wiki.vanguardsw.com/bin/browse.dsb?dir/Engineering/Aerospace/ - These examples illustrate creation of component tree definitions that are then transformed to Web based representations. The information is translated from Protégé to DecisionPro (Vanguard System) to other software as required. Another type of transformation performed is that from a tree based to interactive diagrammatic representation. Further calculations can then be performed in whatever software represents the results to the user.

Explanation of Examples - http://www.cems.uwe.ac.uk/amrc/seeds/NewPaper/Explanation.htm.

Peter Hale Home - http://www.cems.uwe.ac.uk/~phale

SVG (Scalable Vector Graphics) - http://www.cems.uwe.ac.uk/~phale/#SVGScalableVectorGraphics

SVG Page - Scalable Vector Graphics Information and Examples.

Visualisation and Interaction - http://www.cems.uwe.ac.uk/~phale/#VisualisationandInteraction - Other Explanations and Examples.


How the examples are generated - Spar - Vanguard Studio software used to generate SVG from Protégé - Spar Example.

Vanguard Studio to Protégé and Access database link instructions - Text File - with instructions for developers trying to do this.

Stringer - Vanguard Studio software used to generate SVG from Protégé - Skin Example.

Skin - Vanguard Studio software used to generate SVG from Protégé - Stringer Example.

SVG Interactive Wing Component - With short explanation of use for E-Learning - http://www.cems.uwe.ac.uk/~phale/ELearning/ELearningDemonstration2.htm.

Usability Survey

I'm developing a survey on usability, I don't think it's quite right yet, but I would still welcome anyone using it to leave feedback on my research topic (or about the survey) - Click Here to take part in a usability survey, and support my PhD research, for anyone who does not want to remain anonymous, I would be pleased to take an interest in their research.

The survey compares these interfaces -

Taxonomy - http://www.cems.uwe.ac.uk/~phale/ELearning/ELearningDemonstration1.htm.

Diagrammatic - http://www.cems.uwe.ac.uk/~phale/ELearning/ELearningDemonstration2.htm.

And asks for further advice on end-user programming.

I'm interested in feedback from anyone, whatever their level of IT skills.

Survey - Seeking feedback on software usability.


Create polls and vote for free. dPolls.com

Survey Results - http://www.cems.uwe.ac.uk/amrc/seeds/EndUserProgramming.htm#SurveyResults - http://www.toluna.com/polls/37921/Do_You_Think_End-User_Programming_can_be_made_possible?.


Interactive SVG Examples

Explanation of SVG and Adobe Player

SVG (Scalable Vector Graphics) Explanation - Wikipedia.

The Internet Explorer Examples require an SVG plug in, this is available free at Adobe SVG Player.

This text is on the site of the Adobe SVG Player Download Page - 'Please note that Adobe has announced that it will discontinue support for Adobe SVG Viewer on January 1, 2008.'

Adobe to Discontinue Adobe SVG Viewer - http://www.adobe.com/svg/eol.html.

SVG expert Kurt Cagle's thoughts are mentioned in this article. -

Wherefore art thou, SVG? - http://www.oreillynet.com/xml/blog/2006/09/wherefore_art_thou_svg.html - O'Reilly XML.com - Kurt Cagle - September 10, 2006.

I'm interested in any comments that people might have on this, and my email is -

Later this year I will look at this (Flapjax) and other AJAX type options for a technology to produce my examples in a browser independent way that doesn't require downloads - Flapjax - http://www.flapjax-lang.org/ - What is Flapjax? - Flapjax is a new programming language designed around the demands of modern, client-based Web applications.

Internet Explorer Version

This is a re-implementation of my early research into providing interactive manipulation and costing of components using Visual Basic - Early MSc research.

The SVG (Scalable Vector Graphics) in these examples is produced automatically from information held in Protégé and DecisionPro.

The Internet Explorer examples require an SVG player to work. SVG players are available for free and can be found by a search for SVG Player Downloads. The examples also use Javascript and VBscript.

The examples have been tested in Internet Explorer 6 and seem to work fine. The mozilla SVG page explains that Mozilla Firefox 1.5, which is now a Beta, will support SVG without using an SVG plug in. Mozillas' example also works in Internet Explorer 6 without the need for a plug in. Explanations of the code are available here, static images are available for those who have browsers that can't show these pages.


Spar - Spar

Spar - Image Only - Spar

The link below shows the model and code behind the creation of this example.

Vanguard Global Knowledge Portal - Spar Example - Spar SVG Generator - Spar - Translated from Protégé Ontology - outputs results to other languages - e.g. XML, SVG, Java.

Stringer - Stringer

Stringer - Image Only - Stringer

The link below shows the model and code behind the creation of this example.

Vanguard Global Knowledge Portal - Stringer Example - Stringer SVG Generator - Stringer - Translated from Protégé Ontology - outputs results to other languages - e.g. XML, SVG, Java.

Skin - Skin

Skin - Image Only - Skin

The link below shows the model and code behind the creation of this example.

Vanguard Global Knowledge Portal - Skin Example - Skin SVG Generator - Skin - Translated from Protégé Ontology - outputs results to other languages - e.g. XML, SVG, Java.

Bottom Skin - Bottom Skin

Bottom Skin - Image Only - Bottom Skin

Mozilla Firefox Version

Mozilla SVG Resources - http://www.croczilla.com/svg/

I have begun work on creating SVG examples without the use of the plug in, using the native SVG approach researched by Mozilla. This treats SVG like any other sort of XML, allowing us to mix SVG and other XML. This code was generated using Protégé as a source of the parameters and DecisionPro to generate this code.

I have tested this on a local machine using Mozilla Firefox version 1.5 Beta 2, and using Internet Explorer 6 the basic page works in both but the interactivity I'm adding doesn't work in Internet Explore yet so causes an error, so if using this please open the Internet Explorer versions.

Spar Example Spar - Mozilla

The link below shows the model and code behind the creation of this example.

Vanguard Global Knowledge Portal - Spar Example - Spar SVG Generator - Spar - Translated from Protégé Ontology - outputs results to other languages - e.g. XML, SVG, Java.

Stringer Example Stringer - Mozilla

The link below shows the model and code behind the creation of this example.

Vanguard Global Knowledge Portal - Stringer Example - Stringer SVG Generator - Stringer - Translated from Protégé Ontology - outputs results to other languages - e.g. XML, SVG, Java.

Skin Example Skin - Mozilla

The link below shows the model and code behind the creation of this example.

Vanguard Global Knowledge Portal - Skin Example - Skin SVG Generator - Skin - Translated from Protégé Ontology - outputs results to other languages - e.g. XML, SVG, Java.

Bottom Skin Example Bottom Skin - Mozilla


The Mozilla Firefox examples are produced using a native XML implementation of SVG and so do not need a plug in. The Firefox examples are rendered in a build of the browser, which integrates an SVG renderer, so SVG contents appear as an integral part of the document instead of an embedded object. Both sets of examples are produced automatically using an intermediate tree that draws the component outlines dynamically from the design parameter values. Once defined, a component or a feature could be held in a library and re-used. SVG developers should introduce this automated construction and storage of SVG diagrams, and so make this available to those who do not have access to CAD software. This could allow 3D modelling and collaboration over the web as envisaged by [Park and Fishwick]. [Mohamed and Celik] used a similar technique when they created a system to map classes to a schematic drawing of a building, and allow for online editing of a table of values for this building. This assists designers to see the effect of their design on properties that could affect cost and scheduling.

References

Mohamed Abdulrezak, Tahir Celik, Knowledge based-system for alternative design, cost estimating and scheduling, 2002, Knowledge-Based Systems 15 177-188

Park, M., Fishwick P. A., 2005. Ontology-based Customizable 3D Modeling for Simulation http://etd.fcla.edu/UF/UFE0010095/park_m.pdf - PhD Dissertation.


Background

My current research approach builds on previous work undertaken for a large aerospace company to allow designers and manufacturers to visualise and share cost information. During this project one task was to automatically produce tree representations of information requested by the user. Information held in a relational database was visualised and exported in structured languages.

The theory behind this is that of showing examples of a program in whatever way most puts across the information in an understandable way. This must illustrate the concept that the information represents. This allows a user to manipulate the information and get immediate feedback on what has changed. This is related to Programming by Example, which is explained below.

In the mid 1970s Smith introduced the technique of Programming by Example with a program called Pygmalion. Smith elaborated on this in Watch What I Do: Programming by Demonstration (Chapter 1). This demonstrated the need to describe algorithms through concrete examples rather than abstractly. 'Example-based Programming: a pertinent visual approach for learning to program' University of Poitiers explains and expands on Smiths work with an example demonstrating how numbers fail to reveal the concept behind them. The example is a numerical representation of a triangle. This representation is 'fregean' because it does not show the concept of a triangle. Next to this is a diagram of the triangle that does show the concept, this is referred to as 'analogical' representation because it includes the context of the information. Including the context of the information allows a person to discover meanings or relationships in the information which would not always be obvious. Semantic web languages allow for the context of the information to be represented in documents and so make it possible to represent information in an analogical way, as well as allowing two way interaction, leading to an improvement in information discovery. This is the theory behind our conversions to interactive SVG (Scalable Vector Graphics) and tree based representations of information and functions.

These examples were produced via an automated conversion from a tree representation of this component. E.g. for the Spar example the interface demonstrates modelling of information within a browser; the 'Periphery', 'Area', 'Raw Volume', 'Finished Volume', 'Part Width' and 'Part Height' are all calculated dynamically. This calculation is in response to changes the user makes to the attributes on the left, as these changes are made the diagram will changes in response. It is also possible to reverse the translation by taking this interface and converting it to a tree or graph representation of the component.

The examples take the tree representations of a component and according to the properties of each feature of the component, a conversion tree in Vanguard Studio transforms the tree representation e.g this Spar into an SVG interactive diagrammatic representation.

This diagram explains the transformation process.

This diagram explains the transformation process

Figure 1 - Translation Process

These example images show some of the translation steps

These example images show some of the translation steps - Protégé to Vanguard Conversion

Figure 1 - Protégé to Vanguard Conversion

These example images show some of the translation steps - Web Tree View

Figure 2 - Web Tree View

These example images show some of the translation steps - Web Diagram View

Figure 3 - Web Diagram View

A Flash movie that explains how these are created using a simple example - User Driven Modelling Demonstration.

A taxonomy representation is translated into a computer model. Relationships can be conveyed to a software model that evaluates them. Information is translated from the taxonomy and is visualised in tree form in a decision support tool with the example of spar manufacture information. The visualisation of the information of a tree can be further translated into visualisation as an interactive diagram. The representation can be translated into differennt languages, to allow for language independence.

The process is also explained here - User Driven Programming, and here - Translation and Aspect-Oriented Programming, and Translation for De-abstraction.

This is my MSc research that I've based this SVG approach on - MSc Research Summary - The earliest research was into providing a user driven model development example that would enable the kind of user interface and visualisation required for interactive costing.


Links

Internal

Flash and SVG (Scalable Vector Graphics) Article - Visual Editor for SVG? (Scalable Vector Graphics) - Peter Hale - Article from my Blog.

Graph Example - SVG Graph Example.

Models Example Page Examples Page to Demonstrate Semantic Modelling.

State Transition Example - SVG State Transition Diagram.

XForms Articles - Tutorials - http://www.cems.uwe.ac.uk/amrc/seeds/Ajax/ajax.htm#XForms.

XML to SVG Transformation Example using XSLT - State Transition Diagram - Manufacturing Process Flow.

External

Are Server-Side XForms Engines the Future of XForms? - http://www.idealliance.org/proceedings/xtech05/papers/03-08-03/ - Erik Bruchez - XTech 2005 Conference.

Graphical Stylesheets Using XSLT to Generate SVG - Philip A. Mansfield, Darryl W. Fuller.

Koala Publishing Example Internet Explorer Version

Koala Publishing Ltd - SVG Example - Koala Airfield Example, this links to a page at Koala that has their SVG Examples.

Koala Samples

Koala Publishing Ltd - SVG Examples Page - SVG Examples - Airfield, Graphics, Animation Koala SVG Examples Page.

Mozilla Version

Koala Publishing Ltd - SVG Example - Koala Airfield Example, Mozilla Firefox example - Native XML.

Mozilla SVG Link

Mozilla samples project - Mozilla Samples - croczilla.com.

Park M., Fishwick P. A. (2005) Ontology-based Customizable 3D Modeling for Simulation. http://www.cise.ufl.edu/~mhpark/SCS.pdf.

The Geometer's Sketchpad:Programming by Geometry - http://www.acypher.com/wwid/Chapters/13Sketchpad.html - R. Nicholas Jackiw and William F. Finzer - from Watch What I Do: Programming by Demonstration - edited by Allen Cypher co-edited by Daniel C. Halbert, David Kurlander, Henry Lieberman, David Maulsby, Brad A. Myers, and Alan Turransky.

XML.com - SVG Parts catalog - http://www.xml.com/2000/03/22/style/parts-catalog.htm - Interactive Example - Explanation - Explanation of the Parts Catalog example.

My research is a test case for a whole new approach that could be possible, of collaborative end user programming by domain experts. The end user programmers can use a visual interface where the visualization of the software exactly matches the structure of the software itself, making translation between user and computer, and vice versa, much more practical. Jackiw and Finzer (1993) describe an example where a diagram is translated to a graph representation, the authors explain this as 'spatial programming'. Jackiw and Finzer explain that this type of programming removes the distinction between programmers and users, and helps people to 'understand how a geometric construction can be defined by a system of dependencies'. I have tended to work the opposite way around, translating graph and tree representations to diagrammatic visualisations, but this translation is valid in either direction. Semantic Web languages are ideal for representing graphs and trees in an open standard way. The spatial, and tree/graph forms both have the same underlying semantics, and therefore can both be translated to computer languages. In fact it would be much better in the long run to use the Semantic Web languages as standardised programming languages for such problems as this would avoid the need to further translate into other programming languages, and systems.

Jakiw, R. N., Finzer, W. F., 1993. The Geometer's Sketchpad:Programming by Geometry. In: A. Cypher, ed. Watch What I Do: Programming by Demonstration. MIT Press, Chapter 1 [online]. Available from: http://www.acypher.com/wwid/Chapters/13Sketchpad.html.

Programming by Example

A Computer Program to Model and Stimulate Creative Thought, Smith, D. C. (1977) Basel: Birkhauser. 187p.

Alan Kay, Allen Cypher - Watch What I Do - Programming by Example.

Example-based Programming: a pertinent visual approach for learning to program (2004) - University of Poitiers - Nicolas Guibert - Patrick Girard - Laurent Guittet - Proceedings of the working conference on Advanced visual interfaces - Pages: 358 - 361 - ISBN:1-58113-867-9.

Programming by Example - http://web.media.mit.edu/~lieber/PBE/index.html - Massachusetts Institute of Technology - MIT Lab.

Programming by Example Tutorial - http://giove.cnuce.cnr.it/EUD-NET/slides-workshop/PBE-Tutorial2.ppt - Henry Lieberman - MIT Lab - EUD-Net.

Pygmalion: A Computer Program to Model and Stimulate Creative Thought. Stuttgart, Basel - University of Calgary Summary - Smith, D. C. 1977.

Teaching and Learning Programming with a Programming by Example System - International Symposium on End User Development - Schloss Birlinghoven, Sankt Augustin (Bonn), Germany - October 6-7, 2003 - Nicolas Guibert, Patrick Girard.

The Geometer's Sketchpad:Programming by Geometry. Jakiw, R. N., Finzer, W. F., 1993. In: A. Cypher, ed. Watch What I Do: Programming by Demonstration. MIT Press, Chapter 1 [online]. Available from: http://www.acypher.com/wwid/Chapters/13Sketchpad.html.

Watch What I Do: Programming by Demonstration - Cypher, A, 1993, MIT Press, ISBN:0262032139.

http://www.acypher.com/wwid/ - Watch What I Do: Programming by Demonstration - The entire text of this book is included on this web site. Access it through the Table of Contents.

http://www.acypher.com/wwid/FrontMatter/index.html.

Your Wish is My Command: Giving Users the Power to Instruct their Software - http://web.media.mit.edu/~lieber/Your-Wish/ - Henry Lieberman, editor.


Conferences

SVG Open 2006 Cancelled Will be SVG Open 2007 - Cancelled will be 2007 - SVG Open 2006 cancelled, SVG Open 2007 under way.

SVG.Open - http://www.svgOpen.org - SVG.Open 2007 Conference, Tokyo, Japan - September 2007.

XTech Conference - Building Rich, Encapsulated Widgets Using XBL, XForms and SVG - Mark Birbeck, x-port.net Ltd.

Useful Papers

A Computer Program to Model and Stimulate Creative Thought, Smith, D. C. (1977) Basel: Birkhauser. 187p.

Are Server-Side XForms Engines the Future of XForms? - http://www.idealliance.org/proceedings/xtech05/papers/03-08-03/ - Bruchez, E, 2005. XTech 2005 Conference.

Lost in hyperspace: metrics and mental models, 2000, Otter and Johnson,Interacting with Computers, Volume 13, Number 1, September 2000, pp. 1-40(40).

Ontologies as Conceptual Models for XML Documents. Erdmann, M., Studer, R. 1999. In: Proceedings of the 12th Workshop on Knowledge Acquisition, Modelling and Management (KAW'99), Banff, Canada, October 1999. - http://xml.coverpages.org/erdmann-semantic-xql-webdb00.pdf.

Pygmalion: A Computer Program to Model and Stimulate Creative Thought. Stuttgart, Basel - University of Calgary Summary - Smith, D. C. 1977.

Techniques for Authoring Complex XML Documents - Quint, V., Vatton, I., 2004. - http://wam.inrialpes.fr/publications/2004/DocEng2004VQIV.html - DocEng 2004 - ACM Symposium on Document Engineering Milwaukee October 28-30 - This paper reviews the main innovations of XML and considers their impact on the editing techniques for structured documents.

The Geometer's Sketchpad:Programming by Geometry. Jakiw, R. N., Finzer, W. F., 1993. In: A. Cypher, ed. Watch What I Do: Programming by Demonstration. MIT Press, Chapter 1 [online]. Available from: http://www.acypher.com/wwid/Chapters/13Sketchpad.html.

Towards Active Web Clients - Quint, V., Vatton, I., 2005. - http://wam.inrialpes.fr/publications/2005/DocEng05-Quint.html - DocEng 2005 - ACM Symposium on Document Engineering - 2-4 November 2005 - Bristol, United Kingdom. - Recent developments of document technologies have strongly impacted the evolution of Web clients over the last fifteen years, but all Web clients have not taken the same advantage of this advance. In particular, mainstream tools have put the emphasis on accessing existing documents to the detriment of a more cooperative usage of the Web. However, in the early days, Web users were able to go beyond browsing and to get more actively involved.

XForms: an Alternative to Ajax?. Bruchez, E, 2006. In: XTech 2006: Building Web 2.0 16-19 May 2006, Amsterdam, The Netherlands. - http://xtech06.usefulinc.com/schedule/paper/133.


Home Pages

SEEDS Page - SEEDS Home Page

Software Engineering Research Group - http://www.cems.uwe.ac.uk/cccs/researchgroup.php?menu=off&group=serg - SERG's mission is to bridge the gap between software engineering research and its application to different disciplines.

Peter Home Page - Peter Hale Home Page


Developed by Peter Hale, 2006. The University of the West of England, Bristol, UK.


This page has been Accessed Free Counter times since August 2006.


Made with Notepad Valid XHTML Valid CSS

Terms and conditions
   Privacy policy    Accessibility

© 2005 University of the West of England, Bristol (except acknowledged extracts from newspapers, journals, etc)