SLOGO: A Vector Graphic Application Prototyping Language

Keywords: Scripted server-side graphics , Charting and diagramming software , Scripting languages , Rapid-prototyping SVG-based applications , Graph drawing and animation , Domain-specific languages

Alberto Pacheco
e-Learning Technologies
Chihuahua Institute of Technology
Av. Tecnológico 2909, Col. 10 de Mayo. CP 31310
Chihuahua
Chihuahua
MEXICO
alberto@acm.org

Biography

Alberto Pacheco teaches graduate and undergraduate Computing Engineering courses at Chihuahua Institute of Technology. He is also a Learning Technologies researcher and software developer. He is interested in Learning Sciences, Visualization and Web Programming applied to the design and development of W3C-IMS-SCORM standards compliant software supporting the creation and manipulation of learning artifacts and resources useful for web-enabled distance education and b-Learning.


Abstract


SLOGO is a web application, mini-language, software architecture and framework designed to aid in the development of rapid-prototypes of vector graphic applications. SLOGO is the intermediate text script-based language between graphic applications and the SVG viewer engine. SLOGO syntax is simple: an image is a collection of attributes and objects and these attributes may affect more than one object. SLOGO attributes embraces diverse SVG, CSS or SMIL attributes. SLOGO objects include rectangles, circles, lines, paths, images and groups of objects. Server-side SLOGO interpreter implemented in PHP is simple, efficient and small. By reusing SLOGO framework, building a new graphic application interpreter is simple and fast. This paper describes SLOGO architecture: the font-end components and back-end virtual machine, SLOGO formal language definition, and exposes different graphic applications running atop of SLOGO server-side framework. We also describe how within an undergraduate programming course, students using diverse programming languages developed their own graphic application front-end to create a Gantt chart, Pareto chart, histogram, pie chart, spider chart, block diagram, flowchart, timeline, concept map, Rube Goldberg machine animation, among other learning and teaching materials.


Table of Contents


1. SLOGO Design Goals.
2. SLOGO Architecture.
3. SLOGO scripting mini-language.
4. SLOGO Interpreter and SVG code generation.
     4.1 Show Time: Supporting SMIL Animations.
5. Creating a new SLOGO Graphic Application.
6. SLOGO Study Cases.
     6.1 Rube Goldberg Machines.
     6.2 Compilers: Design and Construction.
     6.3 Programming Languages Review.
     6.4 Web Programming.
     6.5 ExpoVision integration.
7. Final Remarks.
Appendix 1. SLOGO mini-language specification using EBNF.
Appendix 2. SLOGO interpreter output: an SVG image.
Appendix 3. SYNOPSIS mini-language definition using EBNF.
Appendix 4. SYNOPSIS interpreter.
Appendix 5. An SBLOCK Script.
Acknowledgements
Bibliography
Footnotes

1. SLOGO Design Goals.

Originally, SLOGO was designed for:

2. SLOGO Architecture.

SLOGO architecture effectively attempts to reduce the amount of time and effort required to implement a new graphic application (GA) in order to offer a new kind of vector-based figure, chart, diagram, map, etc. (Figure 1).

SLogo_Fig1_Applications.gif

SLOGO architecture supports a wide-range of vector graphic applications ( SVG , SLOGO ).

Figure 1: SLOGO applications.

SLOGO client/server architecture consists of diverse layers. By example, when webizens want to create a vector image, they choose the appropriate type of graphic application editor, and finally, after its GA traducer sends a small script to the server-side SLOGO virtual machine the corresponding SVG image is generated (Figure 2).

SLogo_Fig2_Architecture_Layers.gif

Figure 2: SLOGO layered architecture ( SVG , SLOGO ).

SLOGO architecture relies on the separation of concerns in two essential parts (Figure 3): the application specific front-end and one generic back-end. In the front-end the basic components for each graphic application are its user interface, i.e. GA editor, and its corresponding and usually hidden GA interpreter. The common virtual machine back-end has a pair of logical components: the SLOGO interpreter and the SVG viewer (Figure 4).

Normally, the GA editor and the SVG viewer reside on the client-side, i.e. the web-browser; and in SLOGO current version, all the interpreters are server-side PHP5 scripts.

SLogo_Fig3_GA_VM_1.gif

Each GA has its own editor and traducer and they are supported by SLOGO-VM ( SVG , SLOGO ).

Figure 3: SLOGO Graphic Application Components.

With this approach, the GA front-end requires only to define a specific editor and a small class-based interpreter (Figure 3, Figure 4). An editor can be as simple as a rudimentary web-form or sophisticated as an Ajax-based interactive application. Thanks to SLOGO open architecture, from the traducer implementation point of view, each graphic application has the freedom to define its own and more appropriate application mini-language syntax. On the contrary, all GA traducers’ output is always the same: SLOGO script code. Using SLOGO framework, GA parser implementation may result easier, less error-prone and faster to be developed as an SLOGO-GA rather than to write it from ground zero as a monolithic script that produces specialized SVG images. Moreover, a small class library defined in PHP5 helps to reuse code for defining any affordable new GA interpreter class.

SLogo_Fig4_GA_VM_2.gif

Information mapping: from user editing to SVG code generation ( SVG , SLOGO ).

Figure 4: SLOGO information flowchart.

3. SLOGO scripting mini-language.

Syntactically, SLOGO is simple and compact, and it is a coherent subset of SVG, CSS and SMIL (consult SLOGO grammar definition in Appendix 1). An SLOGO script describes an image as a collection of sentences defining a set of objects and their corresponding attributes (Figure 5).

SLogo_Fig5_Sentences.gif

An SLOGO script is a sequence of sentences defining attributes and objects ( SVG , Script ).

Figure 5: SLOGO Sentences.

SLOGO is case sensitive and ignores spaces between tokens. Sentences are delimited by the “!” symbol (semicolon is reserved for CSS style rules). Except for text labels, a sentence has the conventional “keyword–data” syntactical form:

attribute value(s)
object argument(s)

According to SLOGO design goals, an attribute can have an expanded or a compact notation (E-notation or C-notation). Examples of E-notation are:

c=777777!         ; E-notation Attribute
R 100:100, 50:50! ; E-notation Object

The following C-notation script has the same meaning than the former E-notation script:

c7!R100,50! % Draws at (100,100) a 50x50 gray rectangle (C-notation)

An attribute may affect one or more objects by enclosing them inside square brackets, i.e. block. Syntactically, a block becomes a composite object, and semantically corresponds to a SVG group or <g> element.

o=50! [ R 50,40! R 30,20! ]  % Block: both objects with opacity=50%

There are three kinds of attributes: basic attributes, transformation attributes and font attributes and diverse object types: blocks, rectangles, circles, lines, paths, images and strings of text.

Basic Attribute:  c=blue!        % set object to blue color
Transformation:   t=50:60!       % translate object to (50,60)
Font Attributes:  italic! mono!  % text in italics and monospace font

A rectangle, circle and path object may be displayed with an optional 3D filter effect. Example:

c=f! R3D 5,200:150! c=red! C3D 100:75,35!  % Japanese flag

The most elaborate syntax notation corresponds to SLOGO animations. Fortunately, all animations share the same syntactical rule (see ‘Animate’ rule in Appendix 1), for example:

a color=white:red,0:3! C 100,50!  % color animation

It displays a circle that from the beginning, within a lapse of 3 seconds, it changes gradually its color from white to red. The same mechanism “attribute=range, begin:duration” works for any other animation attribute including for changing position, dimension, color, opacity and the scale-rotate-translate transformations. Note, however, that any range value will depend on their context, i.e. the animated attribute keyword specified. Examples:

a scale=1:0.5,0:2!    % In 2 seconds, reduce its size to a half portion
a rotate=0:45,0:2!    % In 2 seconds, rotate 45 degrees
a width=50:90,0:2!    % In 2 seconds, change width from 50 to 90 pixels
a translate=0:50,0:2! % In 2 seconds, move from (0,0) to (50,50)

4. SLOGO Interpreter and SVG code generation.

The web-based SLOGO parser was fully implemented in PHP (Figure 6). This interpreter is simple (25 regular expressions), efficient (one-pass) and small (500 lines of code). It accepts GET/POST parameters: the SLOGO script string (s) or server-side filename (f), and the corresponding image width (w) and height (h). After sending a HTTP request, the SLOGO interpreter produces one SVG image (image/svg+xml).

SLogo_Fig6_Editor.gif

The SLOGO editor implemented as a web form, includes help and some examples.

Figure 6: SLOGO front-end.

Briefly, to illustrate how SLOGO is translated into SVG, consider for example the image that appears in the SLOGO editor showed in (Figure 6). This image was displayed embedding an SLOGO script using the following <iframe>:

<iframe
    src="logo.php?w=350&h=200&s=csilver!C3D60,30!C3D60,60@6"
    width="350" height="200"></iframe>

Another way to create the same image is retrieving a script file replacing the 's' parameter by the 'f' parameter. By example:

<iframe
    src="logo.php?w=350&h=200&f=Saturn"
    width="350" height="200"></iframe>

The interpreter will search the script file inside a designated web server’s directory. To enhance user readability, there are additional and exclusive script file features: the possibility of including remarks (symbol %) and using carriages returns as sentence delimiters, so there is not need to write at the end of each line the '!' delimiter.

% Saturn: SLOGO script file example
c=silver    % filling color
C3D 60,30   % 3D circle:  center=(60,60), radius=30px 
C3D 60,60@6 % 3D ellipse: center=(60,60), rx=60px, ry=6px

Note that in both queries, either using 's' or 'f' parameters, the interpreter receives practically the same instructions, thus both images are exactly the same (Figure 6). Here the corresponding SVG code produced by the SLOGO interpreter (see Appendix 2 for complete SVG source code listing):

<circle cx='60' cy='60' r='30' filter='url(#3D)' fill='silver'>
</circle>
<ellipse cx='60' cy='60' rx='60' ry='6' filter='url(#3D)' fill='silver'>
</ellipse>

Observe in the preceding listing that when a 3D filter effect is specified in one or more SLOGO objects the corresponding 3D filter effect definition is included and reused by all the corresponding 3D objects.

4.1 Show Time: Supporting SMIL Animations.

The following file script includes an animation attribute example:

a c=silver@gold, 0@3@-1   % Repetitive color change
C3D 60, 60@6              % 3D ellipse

Analyzing the SVG ellipse generated by SLOGO, we could evaluate how a relative simple couple of SLOGO sentences (an animation attribute and a 3D ellipse), corresponds to a somewhat error prone SVG code that indeed would be rather difficult to write down:

<ellipse cx='60' cy='60' rx='60' ry='6' filter='url(#3D)' fill='silver'>
	<animateColor attributeName='fill' attributeType='CSS'
		fill='freeze' begin='0s' dur='3s' repeatCount='indefinite'
		from='silver' to='gold' />
</ellipse>

A more complex animation scenario (Figure 7) is achieved using a collection of objects like in the next example [1]:

aopacity=.8@.4,0@6! ascale=.5@1,0@6! arotate=0@-15,0@6! [
	c=silver! C3D 60,30!
	ac=silver@gold,0@1@-1! C3D 60,60@6!
]
SLogo_Fig7_Animation.gif

Changing attributes of a group of objects using a block ( SVG , SLOGO ).

Figure 7: SLOGO animation.

As it was described before in Chapter 3, an SLOGO block corresponds to an SVG group, in this image (Figure 7), there are three group animations: it changes group’s opacity, scale and rotation angle. However, note that inside this group, an ellipse includes its own and continuous colorful animation. And that SLOGO script generates the following SVG code fragment:

<g>
	<animate attributeName='opacity' attributeType='XML'
		fill='freeze' begin='0s' dur='6s' from='.8' to='.4' />
	<animateTransform attributeName='transform' type='scale'
		attributeType='XML' fill='freeze' begin='0s' dur='6s'
		from='.5' to='1' additive='sum' />
	<animateTransform attributeName='transform' type='rotate'
		attributeType='XML' fill='freeze' begin='0s' dur='6s'
		from='0' to='-15' additive='sum' />
	<circle cx='60' cy='60' r='30' filter='url(#3D)' fill='silver'>
	</circle>
	<ellipse cx='60' cy='60' rx='60' ry='6' filter='url(#3D)' fill='silver'>
		<animateColor attributeName='fill' attributeType='CSS'
			fill='freeze' begin='0s' dur='1s'
			repeatCount='indefinite' from='silver' to='gold' />
	</ellipse>
</g>

5. Creating a new SLOGO Graphic Application.

As it was mentioned before in Chapter 2, to create a new SLOGO graphic application (SLOGO-GA) is required to implement its corresponding SLOGO-GA front-end: an application specific mini-language, an interpreter and optionally, an application editor.

Briefly explained, assume we have defined a new SLOGO-GA called [SYNOPSIS] (Figure 8) useful to create synoptic charts similar than (Figure 5) [2]. The first step is to formally define the GA language syntax (see Appendix 3).

Most SLOGO-GAs developed insofar has roughly the same syntax constructions described in the first three BNF lines, e.g. [SBLOCK] diagramming tool.

In this case, SYNOPSIS offers some settings and configuration commands that allow you to change some SYNOPSIS behavior and visualization options, e.g. the list’s bullet type. Also, if you need to add more SVG drawings figures to your image, you can also embedded SLOGO primitives inside your GA script, preceding them with ‘#’ symbol. For example, to draw a numeric list with three items, an inverse purple triangle below the title’s link, we can write the following SYNOPSIS script:

%Num,n=3; #c=purple! P m10,140 h50 l-25,15 z; SCORM http://www.adlnet.gov/scorm { CAM Book; RTE Book; SN Book }

The next step is to implement a small interpreter, who takes as input, by example, the preceding SYNOPSIS script and produces the following SLOGO script as output:

c=purple! P m10,140 h50 l-25,15 z! 
20px!c0!bold!italic!f=Palatino!ct! 38:129,SCORM http://www.adlnet.gov/scorm! 
20px!bold!italic!f=Palatino! 101:41,1) CAM Book! 101:124,2) RTE Book! 101:207,3) SN Book!
z=1.0@4.0!serif!50pt!79:47,{!

In SYNOPSIS for example, the GA interpreter was implemented by a small server-side PHP script (see Appendix 4).

Finally, it is recommended to implement a user interface, e.g. SYNOPSIS editor (Figure 8). The minimum editor implementation requirement is to be able to interactively assemble valid GA scripts and send them to the corresponding GA and SLOGO interpreter. Using SYNOPSIS editor, a webizen can easily create any synoptic chart or test any given example using [SYNOPSIS] web page:

SLogo_Fig8_SYNOPSIS.gif

SYNOPSIS editor and interpreter: an illustrative SLOGO-GA example.

Figure 8: SYNOPSIS front-end.

6. SLOGO Study Cases.

In the practice, SLOGO was used in different scenarios and for different purposes. We present a brief description of some SLOGO study cases in this section.

6.1 Rube Goldberg Machines.

How can I play with SLOGO? To make an SVG image with SLOGO is simple: just visit [SLOGO] web page and write down any given example. In a matter of minutes you will be producing amazing images and animations. A group of first semester undergraduate engineering students did it. In this experimental study case, within an introductory programming course, and before any teaching or programming practice were given, a traditional and empiric but effective and playful way of determining our students potential for doing well in programming was introduced: after a brief session playing with the SLOGO editor (Figure 6) and exposing some SLOGO examples, teachers gave students a workweek assignment consisting in creating Rube Goldberg Machines through SLOGO animations only (i.e. Figure 9). This case was useful for testing SLOGO and very successful with students; they were so motivated and they learnt by doing and playing, and teachers obtained a good appreciation of how skillful and creative their students are. A selected collection of student’s animations are reported in [GOLDBERG].

SLogo_Fig9_Goldberg_Machine.gif

Rube Goldberg Machine animation by a student using SLOGO ( SVG , SLOGO ).

Figure 9: Rube Goldberg Machine.

6.2 Compilers: Design and Construction.

Another study case was experimented with another undergraduate course, where the student has to construct a small traducer as a final term project. After explaining SLOGO architecture/framework and GA’s inner workings, students were able to develop their own GA editor and interpreter, i.e. an SLOGO front-end. They worked with different programming languages (Java, C++, C#, PHP) and developed different applications: timelines, Pareto and Gantt charts. At the end, some students not only created they own GA mini-language and interpreter, but also, some of them developed GUI-based editors (Figure 10).

SLogo_Fig10_Windows_Editor.gif

Undergraduate student project: A Windows-based Timeline editor implemented in C#.

Figure 10: SLOGO-GA Windows-based front-end.

6.3 Programming Languages Review.

In other case, within a review of different programming languages course, SLOGO open architecture was a very useful exemplar to show and compare different ways of representing SLOGO components using different programming languages. The following example was used to illustrate Ruby strings, regular expressions, loops and case blocks:

# slogo.rb: A small SLOGO interpreter, supports color attribute and circle object only.

def trad( script )
  svg = "<svg>\n" # SVG
  col = ""
  script.split('!').each do | cmd |
    case ( cmd.strip )
      when /^C\s*(\d+)@(\d+),(\d+)$/  # CIRCLE
        svg += "<circle cx='#$1' cy='#$2' r='#$3' fill='#{col}' />\n"
        col = ""
      when /^C\s*(\d+)@(\d+),(\d+)@(\d+)$/ # ELLIPSE
        svg += "<ellipse cx='#$1' cy='#$2' rx='#$3' ry='#$4' fill='#{col}' />\n"
        col = ""
      when /^c\s*(\S+)$/ # Color
        col = $1
      else # Error
        x = "<-- Syntax error: "+cmd+" -->\n"
        $stderr << x
        svg += x
    end # case
  end  # each
  return svg + "</svg>\n"
end

puts trad("C 60@60,5@20! c red! C 30@60,20!") # Testing

Example 1: An illustrative SLOGO interpreter implemented in Ruby.

6.4 Web Programming.

As part of a graduate course study case, students were exposed to the early design and development stages of SLOGO. Working with a real project was a useful way for learning PHP and Web programming. Finally, they were able to build their own SLOGO-GA. An unexpected by-product was to provide a start-point for a graduated student research project and thesis focused in porting SLOGO to Windows with language C, OpenGL and [OpenVG].

6.5 ExpoVision integration.

[EXPOVISION] is a server-side PHP web application designed to generate light-weight and W3C standards compliant web presentations, i.e. slides as HTML web pages. Before SLOGO, most web presentations graphics were bitmapped images (GIF and JPEG), but thanks to the integration of SLOGO scripts, progressively more and more SVG images start to be included on these web presentations. This integration took just a couple of days, since SLOGO looks like a ultra-light, autonomous and simple "web service" and EXPOVISION is also a script-based language, and there was already an image inclusion language primitive, it was easy to define an implement a new SLOGO image inclusion primitive (Figure 11). To display a dynamically generated SLOGO-GA image, the generated HTML code by ExpoVision uses <iframe> tags (mechanism explained in Chapter 3).

SLogo_Fig11_ExpoVision.gif

Displaying Figure 4 inside a web presentation slide (image's source code script can be found in Appendix 5).

Figure 11: SLOGO Slide Show.

7. Final Remarks.

SLOGO is still in its infancy, so there is a lot of work in progress. There are many different opportunities to improve it: optimizations, Web service implementation, SMIL path animations [3], iterators [4], macros, external file inclusion, SLOGO dialects, add support for [SCORM], etc. We are also trying to port SLOGO framework to Windows, [OpenVG], [HTML5] Canvas, CMS platforms (Moodle), other formats (GIF and PDF), etc. At the same time, there are many other graphic applications in project: bar charts, pie charts, spider charts, concept maps, etc.

Despite of all its shortcomings (non-full SVG/SMIL/CSS coverage), in the practice, as the reported study cases reported in Chapter 6, SLOGO has been very useful as a learning artifact for students. Also, SLOGO was very helpful in the generation of many SVG images for lecture materials.

In the future, SLOGO will serve as a core graphic system for implementing sequence of activities ([SCORM] IMS LD).

We consider that SLOGO, more than a formal and static script-based vector graphics programming language proposal is a certain flexible way of doing vector graphic applications. Therefore, we hope, it continues to serve as a way to creatively explore very interesting graphics design spaces.

And indeed, we are very grateful with SVG for being one of the fundamental reasons of SLOGO relaxed, quick and inexpensive implementation.

NOTE: All SVG drawing images presented on this article were created using SLOGO.

Appendix 1. SLOGO mini-language specification using EBNF.

SLogoScript::= Sentence+
Sentence   ::= Attrib* Object
Attrib     ::= Attr-Basic | Attr-Trx | Attr-Font | Attr-Adv
Attr-Basic ::= Color | Border | Opacity
Attr-Trx   ::= Translate | Rotate | Scale | Animate
Attr-Font  ::= “bold” | “italic” | Font-Size | Align | Font
Attr-Adv   ::= (“save” | “@”) | “@G” | “@L” | CSS-based | SVG-based
Object     ::= “[” SlogoScript “]” | Text “!” | Figure “!”
Figure     ::= Line | Rect | Circ | Path | Image

Text       ::= Point “,” Char+ (“http://” Char+)?
Line       ::= (“L”|“A”) Point “,” Point          ; Line or Arrow
Rect       ::= “R” “3D”? Point “,” Dim (“,” N99)?
Circ       ::= “C” “3D”? Point “,” Dim            ; Circle or Ellipse
Path       ::= “P” “3D”? Path-Val                 ; SLOGO Path = SVG Path
Image      ::= “I” Point “,” Dim “,” (“http://”? Char+)

Color      ::= (“c” | “c=none”) | “c” “=”? CVal
Border     ::= “b” “=”? CVal (“,” Digit+)?
Opacity    ::= “o” “=”? N100
Translate  ::= “t” “=”? Point
Rotate     ::= “r” “=”? Angle
Scale      ::= “z” “=”? (Scale | Scale2) ; e.g. z=2! z=0.25:1.5!
Animate    ::= “a” Anim-Attr “=” Anim-Range “,” Anim-Time
CSS-based  ::= “s” “=”? Char+             ; e.g. s=font-family:Arial;
SVG-based  ::= “S” “=”? Char+             ; e.g. S=fill=’none’;
Font-Size  ::= 8..99 (“pt” | “px”)
Align      ::= (“left” | “lf”) | (“right” | “rg”) | (“center” | “ct”)
Font       ::= “mono” | “sans” | “serif” | “script” | “fantasy” |
               “f” “=”? Char+

Anim-Attr  ::= “x1” | “x2” | “y1” | “y2” |          ; Line
    	       (“w” | “width”) | (“h” | “height”) | ; Rect
               “x” | “y” | “r” | “rx” | “ry” |      ; Circ and Rect
               (“c” | “color”) |          ; A-Range ::= CVal “@” CVal
               (“o” | “opacity”) |        ; A-Range ::= N100 “@” N100
               (“rot” | “rotate”) |       ; A-Range ::= Angle “@” Angle
               (“t” | “trans”) |          ; A-Range ::= Point “@” Point
               (“s” | “scale” | “z”) |    ; A-Range ::= Scale2 “@” Scale2
               (“sx” | “zx”) |            ; A-Range ::= Scale “@” Scale
               (“sy” | “sy”)              ; A-Range ::= Scale “@” Scale
Anim-Range ::= Value “@” Value            ; Range: from @ to
Anim-Time  ::= Init “@” Dur (“@” Repeat)? ; Time: begin @ dur
Init | Dur ::= Digit+ (“.” Digit+)?
Repeat     ::= “-1” | Digit+              ; Indefinite = -1
Value      ::= Dim | CVal | N100 | Point | Angle | Number | Scale | Scale2
CVal       ::= Char+ | Hex-Dig | Hex-Dig{3} | Hex-Dig{6}
Point      ::= Number | Number “:” Number
Dim        ::= Digit+ | Digit+ “:” Digit+
N99        ::= 1..99 | 1..99 “:” 1..99    ; Compact or Expanded form
Scale2     ::= Scale “:” Scale
Scale      ::= 0.01..1.0 | 1.0..99
Number     ::= “-”? Digit+
N100       ::= 0.0..1.0 | 0..100
Angle      ::= -359..359
Path-Val   ::= Char+ (Char | Digit | “,”)+ ; Same as SVG Path Grammar
Hex-Dig    ::= Digit | [A-F]
Digit      ::= [0-9]
Char       ::= [a-z]

Appendix 2. SLOGO interpreter output: an SVG image.

Complete SVG source code generated by the following SLOGO script: csilver! C3D60,30! C3D60,60@6!

<?xml version='1.0' encoding='iso-8859-1'?>
<svg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg'
		xmlns:xlink='http://www.w3.org/1999/xlink'
		width="350" height="200">
<defs>
  <filter id="3D">
	<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> 
	<feOffset in="blur" dx="2" dy="3" result="offsetBlur"/> 
	<feSpecularLighting in="blur"
		surfaceScale="10" specularConstant="0.8"
		specularExponent="18" style="lighting-color:#fcc" result="specOut"> 
		<fePointLight x="-1500" y="-1000" z="1000"/> 
	</feSpecularLighting> 
	<feComposite in="specOut" in2="SourceAlpha"
		operator="in" result="specOut"/> 
	<feComposite in="SourceGraphic" in2="specOut"
		operator="arithmetic"
		k1="0" k2="1" k3="1" k4="0" result="litPaint" /> 
	<feMerge> 
		<feMergeNode in="offsetBlur"/> 
		<feMergeNode in="litPaint"/> 
	</feMerge> 
  </filter>
</defs>
<circle cx='60' cy='60' r='30' filter='url(#3D)' fill='silver'>
</circle>
<ellipse cx='60' cy='60' rx='60' ry='6' filter='url(#3D)' fill='silver'>
</ellipse>
</svg>

Appendix 3. SYNOPSIS mini-language definition using EBNF.

SynopticScript ::= Settings DataSet
Settings       ::= (“%” ConfigSet+ “;”)? (“#” SLogoScript “;”)? 
ConfigSet      ::= (Config “,”)? Config
Config         ::= “Symb” | “Num” | “Alpha” | “n=” 1..12
DataSet        ::= SynopticLabel “{” SubLevel+ “}”
SubLevel       ::= SynopticLabel (“;” | Block)
Block          ::= “{” (SynopticLabel “;”)+ “}”
SynopticLabel  ::= (A-Za-z0-9)+

Appendix 4. SYNOPSIS interpreter.

PHP source code developed for implementing [SYNOPSIS] parser. Its output is an SLOGO script.

public static function trad( $inp ) // Translate SYNOPSIS code to SLOGO code
{
	$R = ""; // SLogo Output
	$Lines = explode(DELIM,trim($inp)); // ARRAY OF LINES
	...
	for ( $cnt=$i=0; $i< count($Lines); $i++ ): // EACH INSTRUCTION
		$line = trim($Lines[$i]);
		switch( $line[0] ):
			case ( '#' ): // SLogoScript
				$R .= trim(substr($line,1)).'!';
				break;
			case ( '%' ): // ConfigSet
				foreach( explode(",",substr($line,1)) as $cmd ):
					if ( !preg_match("/^([a-z\-]+)(?:=(.*))?$/", 
							strtolower(trim($cmd)),$t))
						continue;
					list(,$tok,$val) = $t; // token = value
					switch ( $tok ):
						case 'n':
							labels($val); break;
						case 'num':
							$Num = true; break;
						...
						default:
							$R .= "?$cmd!";
					endswitch;
				endforeach;
				break;	
			default: // SynopticLabel
				if ( $cnt==0 ):
					$R .= $CSS . "ct!" . // Title
					  intval($W/4-24) . 
					  ":" . intval($H/2+4) .
					  ",$line!";
				else:
					$line = $Num? "$cnt) $line" : "* $line";
					$R .= $CSS . ($MID-24).":".
					  intval($ROW/2+($cnt-1)*$ROW).
					  ",$line!";
				endif;
				$cnt++;
		endswitch;
	endfor;
	...
	return $R;
}

Appendix 5. An SBLOCK Script.

[SBLOCK] is a derived SLOGO-GA. Its purpose is to easily create simple flowchart diagrams. The following server-side SBLOCK script file, was written to create the Figure 4 shown on this article.

%% Fig4: SLOGO Architecture Flowchart, SBlock, 360x400

% SIZE=18, Y=55, LAST-ARROW, ROUND;

#
o20! c062! save! [5]
R3D 12:46,335:144,32!
R3D 12:211,335:144,32!
c0!
A 180:12,180:42!
11pt!
16:40,Graphic Application!
16:208,SLOGO Virtual Machine!
200:35,Webizen!
200:125,GA Script!
200:206,SLOGO Script!
200:288,SVG!
110:391,DISPLAY IMAGE!
r=-90! save!
-140:35, Front-end!
-328:35, Back-end!;

GA-Editor;
GA-Interpreter;
SLOGO Interpreter;
SVG Viewer

Acknowledgements

This work is part of sabbatical project "Editor SCORM de Objetos de Aprendizaje para el registro, estandarización, consulta y reuso de materiales de Educación a Distancia del SNEST", 2007-2008.

Bibliography

SLOGO Drawing Tool. http://apacheco.itch.edu.mx/slogo
[SYNOPSIS]
Synopsis: Simple Synoptic Charting Tool. http://apacheco.itch.edu.mx/sinopsis
[SBLOCK]
SBlock: Simple Flowchart Diagramming Tool. http://apacheco.itch.edu.mx/sblock
[EXPOVISION]
Alberto Pacheco, ExpoVision: Web Presentations. http://expo.itch.edu.mx
[GOLDBERG]
Students's Collection of Golberg's Machines SLOGO Animations. http:/expo.itch.edu.mx/view.php?f=prog_18
[OpenVG]
OpenVG - The Standard for Vector Graphics Acceleration. http://www.khronos.org/openvg
[HTML5]
HTML5 - Working Draft. http://www.whatwg.org/specs/web-apps/current-work
[SCORM]
ADL SCORM. http://www.adlnet.gov/scorm

Footnotes

  1. An alternative SLOGO dialect could be:

    	a time=0@6! opacity=.8@.4! scale=1@.5! rotate=0@-15! [
    		color=silver! C3D 60,30!
    		a time=0@1@-1! color=silver@gold! C3D 60,60@6!
    	]
    	
    
  2. Figure 5 was created using the following URL and embedded SYNOPSIS script: http://expo.itch.edu.mx/sinopsis.php?s=Sentences{Attributes;Objects}

  3. In the future, SLOGO would support SVG animateMotion paths may be through the following grammar extension: Anim-Motion ::= "a" ("p"|"path"!"m"|"motion") "=" Anim-Time "," Path-Val . Example: a path=0@5, M50,50 150,100 50,100 z! C 100,50! . As SVG paths already use comma delimiters, note that Anim-Time range must appears first. Thus, this case brings to question if is it good idea to armonize all others animation attributes, that is, to interchange animation ranges for the next SLOGO version, i.e. Animate ::= “a” Anim-Attr “=” Anim-Time “,” Anim-Range .

  4. Transformations (rotate, translate, scale) defined by Attrib-Trx rule can be syntactically extended using a kind of Anim-Range rule to perform repetitive transformations (see Appendix 1). For example: rotate=15! C 200,100:20! draws one rotated ellipse, but rotate=0@180,6! C 200,100:20! or rotate=0@180@30! C 200,100:20! or rotate=30,6! C 200,100:20! could be used to draw six ellipses performing a rotation of 30 degrees for each repetition.

  5. SLOGO save! attribute uses all currently active attributes for the following two in-a-row objects. It does not internally use any SVG group <g>, it uses a temporary variable instead. save! and @! are synonymous.

XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.