SLOGO: A Vector Graphic ...on Prototyping Language

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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 [email protected] 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 rapidprototypes 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. http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

1/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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: Implementing a 2D vector graphics scripting mini-language with a simple, compact and plain text (non-XML) language syntax. Defining a small server-side interpreter for serving dynamic images through HTTP requests coming from a web-form or another web application, i.e. scripted server-side graphics. Embedding small SLOGO scripts inside web page's URLs. Providing a rapid-prototyping software development toolkit useful for defining a new graphic application (GA) i.e. a new language grammar, using SLOGO as an intermediate language between any GA and SVG, i.e. SLOGO virtual machine (SLOGO-VM). Building customizable, light-weight and easy-to-use graph editors (charts, diagrams, maps, etc.) through a web-enable interface. Helping students to learn and programming their undergraduate final term projects: programming languages, web programming, traducers, interpreters and other related courses.

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 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 http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

2/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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).

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.

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.

http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

3/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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).

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 Enotation are: http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

4/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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 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: Transformation: Font Attributes:

c=blue! t=50:60! italic! mono!

% set object to blue color % translate object to (50,60) % 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 a a a

scale=1:0.5,0:2! rotate=0:45,0:2! width=50:90,0:2! translate=0:50,0:2!

% % % %

In In In In

2 2 2 2

seconds, seconds, seconds, seconds,

reduce its size to a half portion rotate 45 degrees change width from 50 to 90 pixels 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 (onepass) 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).

http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

5/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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 :

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

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):

http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

6/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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 C3D 60, 60@6

% Repetitive color change % 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:

A more complex animation scenario (Figure 7) is achieved using a collection of objects like in the next example [1]: [email protected],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! ]

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:



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! [email protected]!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:

http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

8/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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].

http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

9/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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).

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 http://www.svgopen.org/2007/papers/SLOGO_Abstract/index.html

10/16

20/6/2014

SLOGO: A Vector Graphic Application Prototyping Language

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 = "