Paint Doodler Plugin Developmet Tutorial

Uploading Plugin

In order to upload a plugin
Step 1 - Go to File|Plugin.
Step 2 - Select you zipped file with the plugin.
Step 3 - Click on the upload button.

Plugin will be uploaded and browser will be refreshed to include the requested changes.

Delete Plugin

In order to delete a plugin
Step 1 - Go to File|Plugin.
Step 2 - Select your plugin it should be highlighted with yellow color.
Step 3 - Click on the delete button.
Plugin will be removed from the paint doodler app after the page refresh.

Creating Plugin

Create a zip file with following files. Please ensure that the file names are as specified below
Following is the list of mandatory files for the plugin

info.txt
js.txt
tools.txt

Following is the list of optional files for the plugin

control.txt
stylesheet.txt

Contents of info.txt

Sample content of info.txt can should be as follows

name=<your plugin name>

shortDescription=<Your plugin description>

url=<URL to your page>

Content of js.txt

A sample java script file could look like following. The content of this file will be read and placed under the <head></head> section of the app page.

function myFunction()

{

document.write("hello world")

}

</script>

Content of tools.txt

Sample content of tools page could like follows. The content of this page will be used to create the toolbox. Clickng the added icon will call the myFunction defined in js.txt. If you are not familiar with the Paint doodler user interface kindly refer to blog page at

http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html

To use an image/icon in toolbar we are using base64 encoded image.

Content of this page will be read and added to html used to create toolbox. Skeleton code for tool box is shown below.

<table>

</table>

Global Variables

Getting access to canvas layers are standard HTML5 canvas element. You can get the ordered list of document is using the java script global variable canvasList (Array). All the global variables are defined in file http://www.paintdoodler.com/design/js/windowload.js

Top Menu

If you need to change any element under top menu, you can access the HTML code for the top menu at Top Menu and use java script to modify.

Please note at the moment we are allowing use of single plugin file. It is for in order to keep the storage space in control. It is not a limitation and in near future we will open it to as many plugin as you want.

Do email us at admin@paintdoodler.com to increase the number allowed plugin and we will increase it on a case by case basis.Decision of the pant doodler admin in this regard will be final.

Plugins and tutorials

Adding plugin for static canvas - http://paindoodlerplugindev.blogspot.co.uk/2013/09/adding-plugin-for-static-canvas.html

This post is part of series plugin development tutorial series for Paint Doodler app.

This is the official blog for paint doodler app
Online painting,drawing and image editing platform . paint doodler is based html5 canvas and is purely java script diven
Doodle Paint is a full featured painting and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.
visit - http://www.paintdoodler.com/

Paint Doodler Plug In Development

Monday, 13 May 2013

Overview