The next generation of information processing and interactive web

Presentation of Authoring-Tools SVG Studio, SVG Builder, Steer and the INDU-Framework.



Alexander Adam
PCX Software
Muehlenweg 10

94469 Deggendorf
Deutschland
e-mail: client@pcxsoftware.com

fax: ++49-991-3831720
webpage: http://www.pcxsoftware.com/
publication: http://www.svg-cafe.com/

Keywords: Authoring Tools, SVG Browser, Creating SVG

Abstract

SVG is a powerful new graphics technology for the Web. For every new technology there must be an application which enables developers to use this new technology. PCX Software has specialized since September 2001 in SVG. We have created four powerful applications for SVG and will them present here.

Introduction

I am proud to present our product line for SVG at the SVG Open Conference. Our company has specialized in SVG since we think it's one of the most exciting and interesting developments for the World Wide Web of the past few years since HTML 4.0 and Javascript. Of course SVG is more than just a new Web format, it's also an exchange format for graphics applications and many developments are developing from SVG 1.0 e.g. Mobile SVG or eSVG. This development is also mirrored in our product palette. Our main-product is SVG Studio, and I will use most of my time to present it. The first part consists of a short overview about our products. The second part goes into a more deep about our whole "Indu-Framework" for SVG-Enterprises.

Topics

Product Overview

First there is SVG Studio, available in three different versions, Standard, Professional and Enterprise. It is a complete development environment for SVG, including WYSIWG designing, DOM editing, source code editor and preview. It gives an SVG designer all the features he needs, starting from designing with a wide support of the SVG 1.0 specification from full code support with little Code Helpers and syntax highlighting, support of animations to full scripting capatilies.

The second product is SVG-Builder. This application can be best compared to what Homesite (R) is for HTML. A DOM tree that works together with the editor is the same as a project-manager, standard for the builder. Other features include a flexible and comfortable editor, supporting syntax highlighting for SVG and Javascript in one document gives the designer full control over the code. The source-editor is the heart of SVG-Builder. The included Code-Helpers like Code-Insight, Code-Hint and Code-Complete do a good job for the programmer. Another feature is the Tag-Assistants, providing an options dialogue for nearly every Tag and attribute in SVG. SVG-Builder also includes a "Tag-Inspector" that can visually get and set the properties of a tag. Extended search and replace facilities, SVG pre-processor and expressions are other features, SVG-Builder supports. In the Enterprise Version of SVG Builder, you can create SSP - SVG Server Pages.

The third SVG-product is called Steer. This is software for creating professional e-Learning applications. You can create tutorials, demos, online help, product sales presentations, e-Learning and much more. Imagine creating an animated and interactive demo of your product to show your clients what they get and can do. To create such powerful presentations using Steer is a big advantage for you instead of creating, for example, a short, self-running, Powerpoint-presentation. It could also be a good feature for your software, to have interactive, animated online help, that helps the user to go through your software step by step. It also saves time and money for you create a visual help instead of writing a lot of text to explain everything your user should do.

The fourth product may be very interesting for the SVG community to view SVG graphics. It is called SVG-Browser and, as the name says, is for viewing and browsing SVG. It implements the Adobe SVG plugin in a comfortable and very useful via additions to the plugin core: A DOM tree for viewing the DOM of a Document in a visual tree structure, a thumbnail-Browser, a source viewer with integrated syntax highlighter for SVG and a validator. The Browser is free, which means you can freely use and distribute it. The Browser is fully supported by us and in ongoing further development.

SVG-Browser Creator is an addition to the Browser that helps you to create self running presentations on the fly. You can create runtime files with your own title and content. The creator lets you compress your whole presentation including all files used and the Browser itself into one file that can be executed on every machine. The Creator also makes it possible to skin the Browser so that it fits your needs. Use your own UI with your logo and images easily.

Next to this Software products is the Indu-Framework. What is Indu? Indu is the Shortcut of "Industry" and stands for a whole, compact and flexible System of several technologies working with SVG. The kernel are the SSP - SVG Server Pages in team with the SSP Pre-Processor. The SSP etablishy a new, easy inline-language for Server-Side SVG-Documents with full database access. They save time, money and power for creators of dynamic content. The Pre-Processor and the SSP are included within the Indu-Framework where SVG Studio Enterprise, SVG Builder Enterprise and SVG Browser Enterprise are also part of. They all have special features that support the enterprise's needs, just as SVG Builder has full support of SSP. You will learn more about the Framework including the SSP and Software later in this talk.

The systems architecture

Figure 1: The whole PCX Software product-palette, including the new enterprise solutions and the end-user software.

[ View chart in bigger size ] [ View chart in biggest size ]

SVG Studio

Now that you have an overview over our product line for SVG, I want to start presenting the SVG Studio in more detail. The Studio was designed to give the SVG developer the full ability to exploit all that SVG has. So it has a powerful designer with all needed tools, such as Selector, Layer-Mover, Rect-, Ellipse-, Arc-, Bezier-, Pen- and Text tool. It is very easy to use these tools as they work like in the most popular drawing applications. When you have drawn a shape onto your sheet, its very easy to fill this shape with a color, gradient or pattern. We have invented a complete new system. You can assign gradients directly to every object, there is no need to select a gradient from a list and then use it. That saves a lot of time. To make a gradient for a shape, you just move to the gradient-editor at the right. There you set your gradient, linear or radial and then you click the assign button. The rest, like adding the gradient to the definition and assigning the id to the shape is done by the application. The system works this way when you have another object and assign the same gradient, the application will get it and won't add a new to the definition but use the old one. In another case, if you delete the gradient of the first shape by for example, applying a color as fill, the application will delete the gradient-definition if there is no other object using it. That is convenient, less time consuming and more space saving for working with gradients in SVG. The designer works with a special layer technique that works great within SVG files.

The SVG Studio

Figure 2: SVG Studio in action showing the panels at right, the designer in center, the toolbox and the library in the middle. The layer-manager is also visible on this screen. You can see the animation-timeline including the DOM-Tree at top and the inspector at bottom.

As well as the powerful designer there is the Source-Editor. Here you can edit your SVG source files and reload them into the design view. The Source-Editor includes a syntax highighlighter, specially designed for work with SVG, a validator which validates against the SVG DTD and some little helpers like they are known from Homesite. So you find a Tag-Insight tool that gives you a list of all available attributes for a tag or you find the Tag-Hint which helps you for every tag and attribute by showing a short hint.

The third features are two things together: scripting support and animation support. Scripting support works in the same manner as the gradient support, so you add the scripting to an object by defining an action, e.g. a mouse-click, for it. Then you start the powerful script editor which gives syntax highlighting and Code-Helpers. It is very easy to handle even very big code with this editor. The next part, animations, is very comfortable and flexible. You have an animation timeline available where you specifiy events, keypoints and beginning and ending of your application. Supported are a wide variety of SVG-specific animation elements, just as the different animation-modes, the KeySpline-property with a visual KeySpline-Editor and the assigning of Events instead of time for begin and end.

SVG Builder

The SVG Builder is a Homesite(R)-like Editoring Tool for SVG-Developers. It is full of code-features that helps the developer in his daily work with SVG and other XML-languages. One of the main-features is the so-called "Tag-Inspector". This inspector can list and edit all attributes of an element in which the actual cursor is between. Also can this inspector recognize if the cursor is between a style="" tag. If he recognized this, he will change the mode and now parse all Styleattributes, these can also be set. Various editors in the inspector like the one for colors complete the inspector-feature. The inspector works hand in hand with the DOM-Tree that is created while editing or opening a document. There you will find all elements used in the document. Selecting one entry in this Dom-Tree makes also a selection in the source-editor for the actual tag. This feature is known from Macromedia(R) Dreamweaver(tm) that used as one of the first and as one of the onliest this feature to selecting something in WYSIWYG-manner and select its part in the source.

The SVG Builder

Figure 3: An overview of SVG Builder. This is a screenshoot of an early version that shows the basics of SVG Builder. Most of the power of SVG Builder you cannot see on such a screenshoot as these things are in details.

SVG Builder is code-oriented only, means that there is no real WYSIWYG but a mass of Code-Assistants. One of these Assistants e.g. helps you in visually creating a path or polygon-element, as it is nearly impossible to create more complex shapes by hand-coding. For every important (like <svg>, basic shapes and animations) is an asisstant available. Other things are nearly standard and only shortly described now in a small list:

These features are very useful and good as they are all supported in SVG Builder, but the main feature is implemented in SVG Builder Enterprise. Here is support implemented for our new technology, the SSP or SVG Server Pages. They are fully supported, including database-connection in the Builder, Syntaxhighlight of the tags and insight-language and much more things about SSP. With the Builder you can create SSP at ease. It was created in the meaning of creating a document with the SVG Studio in WYSIWYG in a fast way and then load it into SVG Builder where you can now insert your expressions and your SSP-Code.

The Indu-Framework

You have now learned about our Softwares for the End-User and you have already heard something of the SVG Server Pages. The SVG Server Pages are part of the Indu-Framework which is in its short definition

"Indu-Framework is the powerful enterprise solution that gives a powerful plattform based on SVG with a stable and flexible Webserver including the SSP-Preproccesor, the SVG Server Pages itself inclusive language, the SVG Browser Enterprise for getting out the most of your documents and the SVG Studio Enterprise included with SVG Builder Enterprise that starts the whole chain with creating the SVG and SSP Pages."

Indu is the name of this Framework and means a shortcut for "Industry" - the main target group of this system. Often companies use a connection of many different applications, coming from many different manufactures, to create their ouput like Process Visualization or Dynamic Mapping. The Problem is that they have to use several different technologies and the standards are absent here. For outputting Data in what manner ever, SVG is the ideal component. Because of this the Indu-Framework is completly build on the World Wide Standard Scalable Vector Graphics.

Normally, you have about three stations to pass from inputting your data to outputting it to your clients:

The Creation

First comes the creation of the data. If you have already the data but nothing more you need a form to offer this data. This can be done through creating on first step some templates e.g. in Html that makes a general look&feel of your later output. For your data you insert special place-holders directly in the Html-Code, a hard thing to create. After your templates are ready, you begin to use these templates. This must be done by anything dynamic, mostly used are script-languages like Perl, Php or ASP. Here you will work with your templates and create them step for step in a long, complex way of scripting functions and calls. Your output is build on top of many pieces that are filled with the data. But before you can begin to script, you first have to find a right technology for your needs. Every language has it advantages and disadvantages, so find the right one.
The other hard part on this first of three steps is the using of the Template-Technology. Mostly used is Html, but that language is old and not update anymore for real customer needs in outputting processes of data. With Html you must create any graphics directly in the code of your scriptings and write them out - a hard thing to do. If you already thought about using SVG, you are on the right way but still has the massive problem that you have to use templates or build your Graphics step by step out of different pieces filled with data and generated by your scripts.

The information processing

After your data is available in an usable form, your templates are created and your scripts written and working, you have to decide what plattform to use to do the information processing depending on your used script-language, your used output and your used template-format. You have now to start searching for technologies that fits your needs. In the meantime we have a minimum of three different formats and technologies that exists of your data, your templates and your scripting. If you have found the right technology which has already cost you time and money only for searching, you have to evaluate the technology to look if it really runs with your one. This process costs again time, money and power that would be much better for you to invest in people improving your solution instead of evaluating a mass of software.
Now, after some time of this evaluating process, you have found your technology. This technology not really fits exactly your needs as it was not developed for your solution, but it was the best that you were able to get on the market.
Now, the information processing can begin after a long time of searching, evaluating and installing.

The output processing

After you were able to setup your solution within a technology that works so far, you can now start to output to your users. The output can be in many different ways - just like the Hypertext Markup Language. For this, your clients need as a minimum a Webbrowser, here we have already the fifth different technologies with that you get in contact for outputting your data. After you have looked that your Templates run fine with the Webbrowser, your clients can now really view your data. Surely, the data is not as flexible at it could be and it runs not perfectly, but it works and costed you only a much time, money and power to get all running.

You see that the three stages of electronic information processes are very hard, cost much time and need much different technololgies. Here is were the Indu-Framework goes. See the three stages in a more shorter way, realized with the Indu-Framework.

The Creation

Say you have your data already available in a good form like in a Database. That is a very good starting point for the project. For creating the look&feel of the output, we simply use the SVG Studio Enterprise to create the templates. After that, you begin to edit them in SVG Builder Enterprise where they will connected within the SVG Server Pages. These SVG Server Pages allows you nor to create a script and output pieces of your graphic but going the other way and createing your graphic where you can use so-called "inline"-scripts to output something step by step into your graphic.

This can be made possible by using the powerful combination of SVG Studio and SVG Builder. They let you do whatever you want to do, but they let you still use your data as flexible as possible. The process of creation is often the hardest. But the the three-component-suite from PCX Software you have all on one box:

SVG Studio -> SVG Builder -> <SSP> -> Webserver -> Ouput -> Client

You save all the time of first creating a template in e.g. html, then using other software like php, perl or asp to work with the data and then another technology to ouput this data. The other thing is that you have nearly none possibility in Html to make a flexible output of your data. This is the opposite in SVG: Thanks to its wide language-reference and flexibility you can even in the Create-Process start to save time, money and power.

The information processing

Your SSP-Pages are now ready, now you simply set up the SSP Webserver which is already written in Java to be very stable, flexible and running on many plattforms. After this Server is set up, you can already output your data as the Webserver is the only thing you need for outputting SSP-Pages and the Webserver fits also perfectly to your solution as you have already creating this one with the Webserver's own language SSP. Here you have already saved much time and money for finding and evaluating any software-solutions.

The output processing

The output of SSPs is clear SVG Code interpretable by any SVG-enabled Browser like Internet Explorer or Mozilla with the Adobe SVG Plugin. Another Viewer would be Batik, also based on Java maybe even the better solution.
But even in this stage, the Indu-Framework gives you a solution. You can use the SVG Browser Enterprise to output your data. The SSP Webserver directly sends its data to the SVG Browser. This Browser will show it in the best way for the customer. With the SVG Browser you enable your user to most the most flexible viewing system for your data. Many things are supported that you can influence while the creating process already. SVG Browser is ideal e.g. for dynamic maps, process visualization and much more.

I hope that I was able to give you a more or less short overview about the Indu-Frameworks. What you have heard is the reality, it sounds simple and it is simple, doesn't matter while the Creation, the Information or the Ouput Process. This technology helps you to get most out of your data and even save much money, time and power with it you can better invest in improving your solution.

SSP - SVG Server Pages

The SVG Server Pages work like any other Server-Side language inside the output-code directly. You can embed the Scripts into the Graphic. When loading this SSP-Files, they get be processed by the SSP Webserver who will interpret the scripts and after all output a fine formated, 100% SVG-Document. The SSP introduce a new, simple yet powerful inline language called "SLI" that stands for "Server Language Interpreter". In deep, the SSP work with the same system as PHP, ASP or JSP does with one big difference: SSP are made for SVG-Graphics and support all needed language-features of SVG.

SSP - SVG Server Pages

SSP Exists of the SLI-Language that is build out of the best features coming from Perl, PHP and Javscript. The Language is easy to learn if you have experience in one if the three languages. The power of the language is the Database connection and the so-called "this"-object.
This object is a placeholder for the actual element in which the current SLI-Code is.
Take this example to get the way it works:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
  <text x="0" y="50" style="font-size: 24pt">
  <?ssp
   
print "this.style"
  ?>

  </text>
</svg>

This small code-sample would print the following output:
"font-size: 24pt".

As you can see, the this object holds all attributes of the actual element (in this case this would be "<text>") on which you have easy access in the code. With SSP & SLI, it is even possible to have code directly in an attribute. The following samples shows this and another feature: the setting of functions.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<?ssp
  sub change_element(evt)
    if evt.id == "rect1" [
      evt.fill = "red"
    ] | evt.id == "rect2" | [
      evt.fill = "green"
    ]
  end sub
?>

<svg width="100%" height="100%">
  <rect x="100" y="0" fill="[% &change_element(this) %]" id="rect1">
  <rect x="100" y="0" fill="[% &change_element(this) %]" id="rect2">
</svg>

 

The language-reference of SLI is currently not completly worked out and will be developed with companies together to fit their needs.
But even in this early stage you can see the powerful technology that is behind this. SSP makes SVG real dynamic.

GUI - Components

This is a short paragraph about an OpenSource Project called "Unified Component Suite", shortly "UCS". The goal of the project is to create a good, flexible and extendible GUI-Component Suite for SVG Users. The whole project is as it said OpenSource and completly written in SVG. The project is my personal project together with other peoples to work out a solution, the GUI-Components are not in any way connected with PCX Software, but still PCX Software allowed me to talk a short time about the project. Why I bring it up here has one simple reason and that is that we need more developers joining the project. So I start a call here for Developers to help out creating a real GUI-library for SVG. A missing GUI is one of the biggest disadvantages of SVG I think, and that should now be changed.

Some notes to the project itself. The project tries to create a flexible structure for widgets the same way as Tcl/Tk meanwhile Perl/Tk does. We want to copy exactly the same system and widgets of this powerful and successfull GUI-Library, but additionally with the graphical power of SVG. All is written in Javascript. We also want to make an own Namespace, maybe even an own DTD for the library. So could e.g. look in future the creation of a menu with some items:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<sv
g width="100%" height="100%">
  <ucs:menu x="10" y="10" width="100" height="25">
    <ucs:menu-item caption="&File">
      <ucs:menu-item caption="Subitem-1"/>
    </ucs:menu-item>
  </ucs:menu>

</svg>

 

If you got interested now in the project and want to join or just get some more information, please jump to the offical project-homepage at http://www.svg-cafe.com. You can also talk with at SVGOpen 2002 for some more information you are interested in.

Future Developments

PCX Software already thinks forward in the future of SVG and has also already some concret plans what we will do in next time. The first thing will be SVG Studio Next Generation. This application will be written completly in Java, so running stable on many different operating systems. Another point will be the full, min 98% support of SVG 2.0 in the authoring tool. Means that all elements will be rendered, read and written correct.

Other future developments are the Indu-Framework that will be expanded into new areas of solutions. No concrete plans are here yet but will coming soon.

The last, important future Development will be a project called "CartoMotion". This is a very flexible and powerful application for creating anything that has to do with Maps and SVG in whatever way. We want to have a very good support for cartographics to build on a fast and efficient way.

Valid XHTML 1.0!