Using JavaScript templates

The editor consist of 7 components. Putting all the applet definitions in your HTML page directly makes it very complex. In order to release your HTML code from many applet definitions you can prepare JavaScript code which creates the editor's GUI.

At the same time this resolves the issue of the Windows XP security update described here http://izhuk.com/docs/ie7fix.html

An example of such code can be found here: template.js, and below is an example how to use it.

<!-- include the template -->
<script language="javascript" src="../applet/applet.js"></script>
<script language="javascript" src="template.js"></script>

<script language="javascript">
    var codebase = '../applet'; // location of the editor files
    painter = new Painter(codebase);
    painter.canvas.width  = 640;
    painter.canvas.height = 480;
    painter.canvas.param.load = 'myimage.png'; // specify an image to load at startup  (if it's necessary)
    painter.canvas.param.save = 'save.php';    // specify your server-side script to save the image.
    painter.write();
</script>

The code below shows how to display cliparts using the template:

<script language="javascript">
    var cliparts = new Array( 'flower.gif', 'cherry.gif', 'ladybird.gif', 'carrot.gif', 'apple.gif' );
    clipartPanel = new ClipartPanel(painter,cliparts,1,5,50,50);
    clipartPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
    clipartPanel.write();

    document.write("&nbsp;&nbsp;"); // provide some space
    
    var photos = new Array( 'photo1.jpg', 'photo2.jpg' );
    photoPanel = new ClipartPanel(painter,photos,1,2,67,50);
    photoPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
    photoPanel.param.insertat = '0,0';
    photoPanel.write();

    // this function can be used to retrieve the image data
    function showImageData() {
	var data = painter.getImage("PNG");
	window.alert(data);
    }
</script>