Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

How to use JavaScript Graphics Library (JSGL) in a WRT widget

From Wiki
Jump to: navigation, search
Article Metadata
Created: Maveric (01 Nov 2010)
Last edited: hamishwillee (25 Jul 2012)



JSGL (JavaScript Graphics Library) combines both VML(Vector Markup Language) and SVG(Scalable Vector Graphics) languages and provides common JSGL API isolating a the need for browser-dependent realizations. The programmer uses a set of elementary components representing basic shapes. In JSGL, these basic components are called JSGL elements. They are completely isolated from DOM interface, and we do not need to know more closely these XML-based technologies. As JSGL API follows object-oriented paradigm closely. JSGL components allow grouping and creation of a higher-level components to be used by application logic. The only unit currently used in JSGL is a pixel as an implicit measure for dimensions and coordinates, to keep things simple.


  • You need to download the JSGL library for the example from the main site
  • Full documentation for this library is available at the main site.
  • You can use a code editor of your choice, but this example is build with Aptana Studio and the WRT S60 plugin.

Note.pngNote: Aptana has been superseded by the Nokia Web Tools, an IDE and Simulator based on Aptana and Eclipse.

Example code

For this example we will create a default WRT S60 widget, with index.html and basic.js. The css file is not required for the example.

To see any drawings on screen we need the reference to a div element, which can then be drawn. This needs to be passed to the JSGL API. To accomplish this, JSGL uses a concept of "drawing panels". The Panel object takes a reference to an HTML div placeholder and provides a high-level interface to both creating graphics elements and putting them into the placeholder to put them visible.

Before a JSGL Panel object can be instantiated, we will need a HTML layout containing the placeholder. The placeholder reference needs to be passed as an argument for its constructor. A block-level HTML element (such as "div") is expected.

JSGL API provides a set of fundamental elements, such as a line, a circle, or a text label, in a form of so-called JSGL elements. JSGL element is practically a GUI component through the use of appropriate methods, appearance can be changed. As result of calling these methods, and event occurs internally in JSGL and the element in updated with a use of DOM.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns=""
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>JSGL test</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--[if vml]><style>vml\:* {behavior: url(#default#VML);}</style><![endif]-->
<script type="text/javascript" src="basic.js"></script>
<script type="text/javascript" src="jsgl.js"></script>
<body onload="init();">
<div id="panel" style="width: 200px; height: 200px"></div>


function init()
myPanel = new jsgl.Panel(document.getElementById("panel"));
circle = myPanel.createCircle();
This page was last modified on 25 July 2012, at 22:58.
31 page views in the last 30 days.