Domenico Strazzullo, Dotuscomus <> (+33)142622421


Business case study. Building an SVG interface for a pre-existing application. Demonstration and analysis of the realization process of grafting a mini operating system using SVG. The script controlled SVG interface allows engineers to monitor parallel microchip procedures.

Specifications required the building of a subsystem of interactive windows with current features like zooming, scrolling, displacement, collapse, maximize, menus, debugger like functions, etc.


A key feature is the possibility of opening new windows: the program running in the microchip can present several thousands of procedures, with events activity taking place in parallel in different channels at a given time. The monitoring engineer must be able to simultaneously visualize procedures in a time zone other than the current or to check events taking place in procedures not currently shown. At runtime one window for each procedure is created but not rendered. This method, while considerably increasing processing time, makes the window objects immediately available. Three master windows containing the clones of the totality of procedures are created and rendered:

  1. The Events window, showing the clock driven events sequence
  2. The Graph window, animated graphs of such events
  3. The Source window, the procedures' source code
global view

Review of the main elements

Its function is to carry the Events window time control unit, timer, menus, as well as act as a status bar showing some information. The Run menu proposes debugger like functions like: back 1 event; back x events; back to last breakpoint; run; run to next breakpoint; forward 1 event; forward x events. The Breakpoint menu allows typical breakpoint actions: show; hide; new; delete; delete all.

MENUSbreakpoints menu BREAKPOINTSbreakpoints

It acts as a monitoring meter and it is unique. It has tape transport functions: play; pause; back 5 sec; forward 5 sec; fast play (x2.5); rewind to begin. Time progression is represented by a needle moving across a time grid. One of its main functions is to show the events taking place in the procedures, materialized by numbered dots on the time (x) and the code's line (y) axis. This window has line numbering corresponding to the source lines, with synchronous line highlighting. The time grid shows time units expressed in seconds and grid lines with menu selectable spacing values of: 1 sec; 5 sec; no grid. The time units are event sensitive and set the time to the corresponding figure.

Time control unit

The horizontal slider of this window has the particularity of acting on the needle, providing a scrubbing functionality; a progress bar above the horizontal slider shows the percentile position of the slider in respect to the total time, and for this reason the slider is made to move automatically along this bar, i.e. it is driven by the clock, while it can still be driven by the user at any moment while in play or pause mode.

The zoom for this window has the same function as in video or sound editing, i.e. it only acts on the time span along the horizontal axis, the other elements, like the graphics representing the events, the grid and the time figures, remaining at their original size. Zoom in is infinite, with the theoretical possibility of displaying a nanosecond in the space of, say, one inch. Display all shows the entire time taken by the totality of the processes. This type of window is movable and resizable and has collapse and full buttons.

Effect of the Events window zoom

It shows a graphic representation of the processes. The animated events of procedure nodes taking place in this window determine the state of the other windows. This type of window has regular zoom and panoramic functions, collapse and full buttons.

Events and animation synchronous cloned procedure

It contains the procedures' code. This window has line numbering, with each individual procedure's Source window having conforming line numbering, i.e. the equivalent of its clone in the Source master window. Highlighting of relevant lines and evidencing of code variables are driven by onbegin and onend events of the Graph window procedures nodes' animations. This type of window is movable and resizable and has collapse and full buttons.

This is where various types of data, such as channel id, type of data, last known type, last known data, time of last event node id, line/column of source are shown by hovering over channel arcs and ellipses in the Graph window etc. The side panel also carries the window tabs, where all the windows can be activated to be brought to front, opened or restored after being collapsed.

Source windows tabs

Technical analysis

Detailed survey of the methods employed.

Valid XHTML 1.1