WPD is plug and play and is very easy to install.
Suppose you have some javascipt code in a textarea you want to demonstrate,
<textarea>
//javascript, probably Raphael code
</textarea>
First download WPD
here, Raphael
there. To start, copy from <div ... to </div> below:
wrap the textarea with a container div, give it an id and some styles. You MUST set the width and height in px for the container div.
<div id="show1" style="position:relative; width:640px; height:480px;">
<textarea id="code1" style="position:absolute; width:98%; height:98%" wrap="off" onkeydown="return catchTab(this,event)">//
//WPD javascripts
D1.restart();
var x = 0;
D1.draw = function(){ //the drawing function
D1.drawCircle( x,40,20);
D1.paper.text( 100,200,"Hello WPD and Raphael!"); //use any raphael functions like that
}
D1.update = function(){
if ( x<D1.areax) { x += 40;}
else { x = 0;}
}
</textarea>
<!--then, you include the required libraries and write 3 lines of code( these script must be put inside the div): -->
<script src="wpd_source.txt"></script>
<script src="raphael-min.js"></script>
<script>
D1 = new webphydemo();
D1.embed_createplayer( "show1","code1");
//use null instead of show1 to use the whole page as canvas, and do not make the <div> tag
D1.run();
</script>
</div>
make sure you place the HTML file in the same directory as wpd_source.txt and raphael-min.js .
and the result would be as follow:
Note that you can only embed one WPD in <div> in one HTML file, so use the <iframe> tag to refer to individual full page WPD webpages. There are still things to do for "single page multiple WPDs", and it remains a question that would they perform well if they share the same memory space.
What is meant by just in place code editing?
In the demo above, click "+code" to show the code. Modify this fraction
if ( x<D1.areax) { x += 40;} into this
if ( x<D1.areax) { x += 1;}. Then click run.
What do you see? Yes the circle is moving more slowly.
When you read through online programming tutorials, how many times have you really tried to run the code yourself? With WPD, you can play with the code in online tutorials. That's the goal of WPD, to make web demonstrations and tutorials more
playful.
If you have any problem or
find WPD interesting, email me to tyt2y3@gmail.com or leave a comment.
