Browse files

Adding the Tutorial and updated README

  • Loading branch information...
1 parent 976b909 commit dfed2377ad660084000e4a43f5dde27018671e7c @cthulhuology committed Jun 9, 2009
Showing with 99 additions and 3 deletions.
  1. +58 −0 README
  2. +35 −0 Tutorial.html
  3. BIN box.png
  4. +6 −3 phos.js
@@ -24,4 +24,62 @@ can act as a "class". Instances of that "class" are spawned using the "clone()"
Getting Started
+The easiest way to use Phosphor is to include both phos.js and phosphor.js in your HTML file:
+ <script src="phos.js"></script>
+ <script src="phosphor.js"></script>
+Then you initialize the system by invoking phos's boot function when the body loads:
+ <body onload="boot(); Phosphor.init()">
+This will by default add a canvas to the body object and set it to full window size. If you'd like
+to preset the canvas side simply add a canvas element with the id='canvas'.
+ <canvas id="canvas" height="320" width="240"></canvas>
+You can then use the Phosphor system in your very little 320x240 canvas.
+For a brief tutorial on how to use the Phosphor environment open the file Tutorial.html. Under
+Mac OS X you can open the file from the command line using:
+ open Tutorial.html
+Since Phos and Phosphor can be embedded into any HTML page,
+Both Phos and Phosphor are licensed under the GPL3 license. A copy of the license can be found in
+the git repository and is available from the Free Software Foundation at:
+If you'd like to submit your own fixes, extensions, or features please feel free to send them to:
+ dave at
+I'm always happy to incorporate good ideas, especially if they make things simpler, smaller, and
+faster. If you'd like to use Phos or Phosphor in a commercial product, licensing and support
+arrangements can also be made to meet your needs.
+Keeping Up To Date
+The latest and greatest source code is always available for both Phos and Phosphor at:
+In order to obtain the latest version of the source code from git you can use the git command:
+ git clone git://
+To stay up to date, you can grab the most current version using the command:
+ git pull
+End Transmission
@@ -0,0 +1,35 @@
+<title>Phosphor Tutorial</title>
+<script src="phos.js"></script>
+<script src="phosphor.js"></script>
+p { padding-left: 0.5em; padding-right: 0.5em }
+img {padding: 0.5em }
+canvas { padding: 0.5em }
+<body onload="boot(); Phosphor.init()">
+<div style="float:right">
+<canvas id="canvas" width="640" height="480"></canvas>
+<h3>To Use:</h3>
+<p>Right click anywhere on the black box to the right. A text input widget will pop up. If you then enter the word "Box" without the quotes and right click it will show the description of the Box:</p>
+<img src="box.png" style="float:left">
+<p>You can then inspect each of the Box object's properties by right clicking on them. This will produce a text widget off to the right which contains the value of the property. You can grab and tear off any property that you wish, and move the collection around as a group. Right clicking on any object or property will collapse all of its children and hide them.
+<p>If you have 2 finger horizontal scrolling on your trackpad, you can scroll around the space treating it as a very very large screen.
+<h3>Editing & Deleting</h3>
+<p>You can edit any text area simply by hovering over it with your cursor until it lights up, and then type the text you wish to add. The delete key will delete the last character entered, and if you delete all of the characters and press the delete key again, the entire text area will be freed.</p>
+<p>If you want to remove an entire text input widget, simply hold down shift while pressing delete and the widget will be removed from the scene.</p>
+<h3>Evaluating Javascript</h3>
+<p>To evaluate javascript, simply write the javascript code in a text area. (Remember you can right click anywhere to create a new one) Once you are ready to evaluate your code simply press Return. The result of the expression will then appear in the text box. You can use this to inspect any variable by simply typing its name in a text block and right clicking on it. Sub-objects can also be inspected by right clicking on the full object path of the value. For example, if you load an image:
+ myImage = Image.init('play.png')
+You can inspect myImage by right clicking on a text box containing the variable name myImage. You can look at the widget's data object by right clicking on:
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -280,7 +280,10 @@ var Widget = let(Box, {
var Display = let(Widget, {
canvas: null,
init: function() {
- if ($('canvas')) return,0).by($('canvas').width,$('canvas').height).instance();
+ if ($('canvas')) {
+ this.canvas = $('canvas');
+ return,0).by($('canvas').width,$('canvas').height).instance();
+ },0).by(window.innerWidth-16, window.innerHeight-16);
this.canvas = $_('canvas'); = 'canvas';
@@ -422,7 +425,7 @@ var Screen = let(Box,{
return this;
background: function(r,g,b) {
- = 'rgb(' + r + ',' + g + ',' + b + ')';
+ = 'rgb(' + r + ',' + g + ',' + b + ')';
return this;
color: function(r,g,b) {
@@ -439,7 +442,7 @@ var Event = let(Box,{
var ev = Event.clone();
ev.button = e.button;
ev.key = Keyboard.key(e.keyCode, e.type == 'keydown');
- + Display.x,e.clientY + Display.y);
+ + Display.x - Display.canvas.offsetLeft,e.clientY + Display.y - Display.canvas.offsetTop);,Math.floor(e.wheelDeltaY));
ev.time = new Date();
return ev;

0 comments on commit dfed237

Please sign in to comment.