Revision: 1060
Author: allain.lalonde
Date: Tue Aug 31 09:03:30 2010
Log: Adding images.html example.
http://code.google.com/p/piccolo2d/source/detail?r=1060
Added:
/piccolo2d.js/trunk/examples/images.html
Modified:
/piccolo2d.js/trunk/examples/calendar.html
/piccolo2d.js/trunk/examples/hierarchy.html
/piccolo2d.js/trunk/examples/index.html
=======================================
--- /dev/null
+++ /piccolo2d.js/trunk/examples/images.html Tue Aug 31 09:03:30 2010
@@ -0,0 +1,103 @@
+<!--
+Copyright (c) 2008-2009, Piccolo2D project, http://piccolo2d.org
+Copyright (c) 1998-2008, University of Maryland
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
modification, are permitted provided
+that the following conditions are met:
+
+Redistributions of source code must retain the above copyright notice,
this list of conditions
+and the following disclaimer.
+
+Redistributions in binary form must reproduce the above copyright notice,
this list of conditions
+and the following disclaimer in the documentation and/or other materials
provided with the
+distribution.
+
+None of the name of the University of Maryland, the name of the Piccolo2D
project, or the names of its
+contributors may be used to endorse or promote products derived from this
software without specific
+prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
IS" AND ANY EXPRESS OR IMPLIED
+WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER
OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR
+TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF
+ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
+<html>
+ <head>
+ <title>PImage Examples - Piccolo2d.js</title>
+ <link rel="stylesheet" href="examples.css" />
+ </head>
+ <body>
+ <div id="container">
+ <a href="index.html">Back to Examples List</a>
+
+ <h1>PImage Example</h1>
+ <p>Demonstrates the use of PImages.</p>
+ <canvas id="canvas" width="954" height="400">
+ <p>No Canvas Support in this browser.</p>
+ </canvas>
+ <script type="text/javascript" src="../lib/javascript-1.6.js"></script>
+ <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
+ <script type="text/javascript" src="../extends.js"></script>
+ <script type="text/javascript" src="../piccolo2d.js"></script>
+ <script type="text/javascript" src="examples.js"></script>
+ <script type="text/javascript" id="example">
+ // Example usage
+ var pCanvas = new PCanvas(document.getElementById('canvas'));
+
+ with ({
+ camera: pCanvas.camera,
+ layer : pCanvas.camera.layers[0]
+ }) {
+ var WrappedHorizontalLayoutNode = PNode.extend({
+ layoutChildren: function() {
+ var currentX = 0;
+ var currentY = 0;
+ var rowHeight = 0;
+ var cols = 0;
+ for (var i=0, n=this.children.length; i < n; i++) {
+ this.children[i].translate(currentX, currentY);
+ currentX += this.children[i].bounds.width + 10;
+ rowHeight = this.children[i].bounds.height;
+
+ cols += 1;
+ cols %= 8;
+ if (cols == 0) {
+ currentY += rowHeight + 10;
+ currentX = 0;
+ rowHeight = 0;
+ }
+
+ }
+ }
+ });
+
+
+ var layout = new WrappedHorizontalLayoutNode();
+ layout.scale(0.5);
+ layer.addChild(layout);
+
+ for (var i = 0; i < 64; i++) {
+ layout.addChild(new
PImage("http://www.piccolo2d.org/images/Piccolo2D-Logo-small.png";));
+ }
+
+
+ layer.addListener({
+ click: function(event) {
+ var clickedNode = event.pickedNodes[0];
+ var globalTransform = clickedNode.getGlobalTransform();
+ var focusBounds = clickedNode.getGlobalFullBounds();
+ var inverse = globalTransform.getInverse();
+ camera.animateViewToTransform(inverse, 500);
+ }
+ });
+ }
+ </script>
+
+ </div>
+</body>
+</html>
=======================================
--- /piccolo2d.js/trunk/examples/calendar.html Fri Aug 27 13:54:29 2010
+++ /piccolo2d.js/trunk/examples/calendar.html Tue Aug 31 09:03:30 2010
@@ -50,6 +50,15 @@
<script type="text/javascript" id="example">
var pCanvas = new PCanvas('canvas');
+
+// Contructs a date for the given details
+Date.build = function (year, month, day) {
+ var date = new Date();
+ date.setYear(year);
+ date.setMonth(month);
+ date.setDate(day);
+ return date;
+}
with ({
camera: pCanvas.camera,
@@ -58,8 +67,23 @@
var monthWidth = 600;
var columnWidth = 600/7;
- pCanvas.fillStyle = "rgb(0, 0, 0)";
-
+ pCanvas.fillStyle = "rgb(30, 30, 30)";
+
+ var TaskList = PNode.extend({
+ init: function(tasks) {
+ this._super();
+ for (var i=0; i < tasks.length; i++) {
+ this.addChild(new PText(tasks[i]));
+ }
+ },
+
+ layoutChildren: function () {
+ for (var i=0, n = this.children.length; i < n; i++) {
+ this.children[i].translate(0, 30 * i);
+ }
+ }
+ });
+
var Day = PNode.extend({
init: function (number, tasks) {
this._super({
@@ -67,15 +91,10 @@
fillStyle: number ? "rgb(255, 255, 255)" : "rgb(200, 200,
200)"
});
- this.addChild(new PText("" + number).scale(5).translate(10,
10));
-
-
- if (tasks) {
- var taskNode = new PNode();
- for (var i=0; i<tasks.length; i++) {
- taskNode.addChild(new PText(tasks[i]).translate(0, 30 *
i));
- }
- this.addChild(taskNode.translate(10, 130));
+ this.addChild(new PText("" + number).scale(5).translate(10,
10));
+
+ if (tasks) {
+ this.addChild(new TaskList(tasks).translate(10, 130));
}
},
@@ -89,45 +108,33 @@
this._super({
bounds: new PBounds(0, 0, monthWidth, 570),
fillStyle: "rgb(200, 200, 200)"
- });
-
- this.year = year;
- this.month = month;
-
- this.firstDay = new Date();
- this.firstDay.setMonth(month);
- this.firstDay.setYear(year);
- this.firstDay.setDate(1);
-
- this.lastDay = new Date();
- this.lastDay.setMonth(month + 1);
- this.lastDay.setYear(year);
- this.lastDay.setDate(-1);
-
+ });
+
this.addChild(new
PText(Month.monthNames[month]).scale(2).translate(5, 5));
-
+
var dayNames =
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
- for (var i = 0; i < dayNames.length; i += 1) {
- this.addChild(new PText(dayNames[i]).translate(i
*columnWidth, 50).scale(0.7));
+ for (var i = 0; i < dayNames.length; i ++) {
+ this.addChild(new PText(dayNames[i]).translate(i *
columnWidth, 50).scale(0.7));
};
- var dayOfWeek = this.firstDay.getDay();
-
+ this.firstDay = Date.build(month, year, 1)
+ this.lastDay = Date.build(month + 1, year, -1)
+
var daysInMonth = this.lastDay.getDate() -
this.firstDay.getDate();
-
- var columnNumber = Math.abs(dayOfWeek);
+
+ var columnNumber = Math.abs(this.firstDay.getDay());
var currentY = 70;
-
var currentDay = 0;
- while (currentDay < daysInMonth) {
- var dayLabel = currentDay < 0 ? "" : (currentDay + 1);
- var tasks = ["Woot", "Eat more fish", "Testing 1, 2,
3", "Testing Again", "Kilroy was here", "Random again", "Testing 1, 2,
3", "Testing Again", "Kilroy was here", "Random again"];
- this.addChild(new Day(dayLabel,
tasks).translate(columnNumber*columnWidth, currentY).scale(0.2));
- currentDay += 1;
- columnNumber += 1;
-
- if (columnNumber === 7) {
- columnNumber = 0;
+
+ var tasks = ["Woot", "Eat more fish", "Testing 1, 2,
3", "Testing Again", "Kilroy was here"];
+
+ while (currentDay++ < daysInMonth) {
+ var dayLabel = (currentDay < 0) ? "" : (currentDay + 1);
+ this.addChild(new Day(dayLabel,
tasks).translate(columnNumber++ * columnWidth, currentY).scale(0.2));
+
+ columnNumber %= 7;
+
+ if (columnNumber === 0) {
currentY += 100;
}
}
=======================================
--- /piccolo2d.js/trunk/examples/hierarchy.html Fri Aug 27 13:54:29 2010
+++ /piccolo2d.js/trunk/examples/hierarchy.html Tue Aug 31 09:03:30 2010
@@ -55,10 +55,6 @@
<script type="text/javascript" src="../piccolo2d.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript" id="example">
- // To deal with the case where firebug's console is not available'
- if (typeof console == "undefined")
- console = {log: function() {}};
-
// Example usage
var pCanvas = new PCanvas(document.getElementById('canvas'));
=======================================
--- /piccolo2d.js/trunk/examples/index.html Fri Aug 27 13:54:29 2010
+++ /piccolo2d.js/trunk/examples/index.html Tue Aug 31 09:03:30 2010
@@ -50,16 +50,21 @@
<p>Demonstrates: Very Deeply Nested Nodes</p>
</dd>
+ <dt><a href="sticky-nodes.html">Sticky Nodes</a></dt>
+ <dd>
+ <p>Demonstrates: activities, sticky nodes</p>
+ </dd>
+
+ <dt><a href="images.html">PImage Example</a></dt>
+ <dd>
+ <p>Demonstrates: creation of PImages</p>
+ </dd>
+
<dt><a href="calendar.html">Calendar Example</a></dt>
<dd>
<p>Example used to benchmark the basic code.</p>
<p>Demonstrates: events, scene construction</p>
</dd>
-
- <dt><a href="sticky-nodes.html">Sticky Nodes</a></dt>
- <dd>
- <p>Demonstrates: activities, sticky nodes</p>
- </dd>
</dl>
</div>
</body>
--
Piccolo2D Developers Group: http://groups.google.com/group/piccolo2d-dev?hl=en
![http://www.piccolo2d.org/images/Piccolo2D-Logo-small.png"](http://www.piccolo2d.org/images/Piccolo2D-Logo-small.png"){kind=link}