11 Graphics

With graphics, here, we mean vector graphics. That is, you do not show premade jpeg or png images but actually draw something on the screen, like arrows, circles, or squares. Modern browsers and most old ones support this form of graphics in some form or other. A difficulty is that older browsers used different conventions and methods to draw the graphics, which is why it is necessary to use a JavaScript vector graphics library. If not, your drawings will not show up on certain (older) browsers. A good graphics library will convert the drawing commands into a format the browser of the subject’s machine will understand.

With NeuroTask Scripting, vector graphics are supported by the Dojo graphics library, which has great cross-browser support: Old browsers are supported using their native graphics systems: Firefox 1.5-3.0, Safari(Webkit) 3+, Opera 9+, Chrome 1.0+, iPhone Safari 2.1+, and Internet Explorer 6-7-8. For more modern browsers Canvas is used, the modern-day vector graphics rendering standard: Firefox 3.0+, Safari 3.0+ including iOS Safari 1.0+), Opera 9.0+, Chrome, and Internet Explorer 9+. Note that even the ancient Internet Explorer 6 is supported by the Dojo graphics library (Dojo GFX)!

A simple script that draws a red circle on the screen with Dojo GFX looks like this:

 1 var b = main.addblock(40,40,20,20,"lightgrey"), // Create a light grey block
 2     e;
 3 
 4 e = b.getsurface().createEllipse({
 5     cx: "50%",
 6     cy: "50%",
 7     rx: "40%",
 8     ry: "40%"
 9 });
10 
11 e.setFill("red");
12 
13 awaitkey(' ');

A (Dojo GFX) graphics surface is obained from Block b with getsurface(), which can then be used to draw shapes on. If a surface does not yet exist (which is the case in newly created blocks), getsurface() will create one. Else, it will simply return the existing surface. The circle is drawn with createEllipse() using relative (percent) coordinates for the center of the circle, (cx,cy), horizontal radius rx, and vertical radius ry. It is necessary to call setFill() explicitly with a color as the default is to show a fully transparent shape (i.e., you will not see anything). You can use all the familiar ways to indicate color, including an array of three integers in the range 0 to 255 to indicate red, green, and blue color values.

A Block’s surface can be cleared with b.clearsurface() (for a Block b), which will remove all shapes from the surface but leaves the surface itself in tact, ready for new drawing operations.

There are quite a few functions you can use, which are not yet discussed in this release of the book, including showing SVG files, mouse event handling, color gradients, text in different fonts and at any angle etc. These are covered, however, by the documentation about the Dojo GFX libraries. All of this is relevant and can be used immediately in NeuroTask scripts.

Notice that Dojo GFX uses inter-caps, as in createEllipse(), but NeuroTask Scripting does not (e.g., we use addblock() instead of addBlock()).