Hello World! Application

Hello World! Application

This example demonstrates how the drawing can be put into a webpage, and how the JSGL elements can be created and modified.

Complete HTML/JavaScript source code

Here is as an example copy/paste HTML file using JSGL to draw some basic shapes.

This example assumes that you have already downloaded the source file jsgl.js or jsgl.min.js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:vml="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>JSGL empty page template</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="./jsgl.min.js"></script>
  </head>
  <body>
    <div id="panel" style="width: 640px; height: 480px"></div>
    <script type="text/javascript">
      /* Instantiate JSGL Panel. */
      myPanel = new jsgl.Panel(document.getElementById("panel"));
 
      /* Start drawing! */
 
      /* Create circle and modify it */
      circle = myPanel.createCircle();
      circle.setCenterLocationXY(50,50);
      circle.setRadius(30);
      circle.getStroke().setWeight(5);
      circle.getStroke().setColor("rgb(255,0,0)");
      myPanel.addElement(circle);
 
      /* Create polygon and modify it */
      polygon = myPanel.createPolygon();
      polygon.addPointXY(50,50);
      polygon.addPointXY(110,50);
      polygon.addPointXY(150,80);
      polygon.addPointXY(110,110);
      polygon.addPointXY(50,110);
      polygon.getStroke().setWeight(5);
      polygon.getStroke().setColor("rgb(0,0,255)");
      polygon.getFill().setColor("rgb(0,255,0)");
      polygon.getFill().setOpacity(0.5);
      myPanel.addElement(polygon);
 
      /* Create text label and modify it */
      label = myPanel.createLabel();
      label.setText("Hello World!");
      label.setLocationXY(30,120);
      label.setBold(true);
      label.setFontFamily("sans-serif");
      label.setFontSize(24);
      myPanel.addElement(label);
 
    </script>
  </body>
</html>

The above-code produces following result:

Some explanation for above-used HTML tags

Specifying vector markup languages usage

JSGL requires svg and vml prefixes to be mapped to appropriate namespace declarations. This can be done at the level of <html> element like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:vml="urn:schemas-microsoft-com:vml">

Moreover, all the vml:* tags need to be bound with appropriate CSS behavior in Internet Explorer. The CSS syntax required, however, is not W3C compatible. To make this declaration recognized by Internet Explorer only, you may use conditional comments as shown below:

<head>
  ...
  <!--[if vml]><style>vml\:* {behavior: url(#default#VML);}</style><![endif]-->
  ...
</head>

Unfortunately, the support for vector graphics has been removed in Windows Internet Explorer 8 without any compensatory technology added. Hence the only way how to make JSGL work is to tell Windows Internet Explorer to render the page in IE7 mode using the UA-X compatibility meta tag:

<head>
  ...
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  ...
</head>

Creating a drawing panel

In order to put drawings into a web page, jsgl.Panel object has to be instantiated. A reference to an HTML placeholder to be drawn onto needs to be passed to its constructor as shown below:

<body>
  <div id="panel" style="width: 640px; height: 480px"></div>
  <script type="text/javascript">
    myPanel = new jsgl.Panel(document.getElementById("panel"));
    /* use myPanel's methods to draw shapes here */
  </script>
</body>

Having the jsgl.Panel object instantiated, graphics elements can be created using its factory methods.

jsgl.min.js versus jsgl.js

Since version 2.0, JSGL is published in 2 editions:

jsgl.js ā€“ original, large source file with human-readable source code, including comments,
jsgl.min.js ā€“ compressed version to save bandwidth.

In the stage of development, it is recommended to use jsgl.js, which may simplify debugging. When your application is to be released, you can simple switch to jsgl.min.js.

Acknowledgments

Thanks Piotr Jakubczyk for feedback to this page.