initial commit

triceam · Jun 18, 2012 · af609e4 · af609e4
1 parent a5610db
commit af609e4
Show file tree

Hide file tree

Showing 31 changed files with 531 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.DS_Store
diff --git a/License.txt b/License.txt
@@ -0,0 +1,9 @@
+THIS SOFTWARE IS PROVIDED BY ANDREW M. TRICE ''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 ANDREW M. TRICE 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.
diff --git a/README.md b/README.md
@@ -1,4 +1,13 @@
 Lil-Doodle
 ==========
 
-Lil' Doodle is children's drawing application for the iPad, built using PhoneGap and the power of the HTML5 Canvas element.
+Lil' Doodle is children's drawing application for the iPad, built using PhoneGap and the power of the HTML5 Canvas element.  
+This app is intended for iOS only.  The code for this will not work in a desktop browser b/c it is specifically designed for touch events.
+
+Lil' Doodle is available in the iTunes store at:
+http://itunes.apple.com/us/app/lil-doodle/id496228112?mt=8
+
+You can see a video of this application in action at: 
+http://www.youtube.com/watch?v=oMb5O-FavA0
+
+The source for Lil' Doodle is being opened up to demonstrate how to build interactive drawing experiences in PhoneGap applications.
diff --git a/www/assets/_notes/background.png.mno b/www/assets/_notes/background.png.mno
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?><info>	<infoitem key="fw_source" value="file:///Macintosh HD/Users/triceam/Documents/Super Doodle/ux/layout.png" /></info>

diff --git a/www/assets/background.png b/www/assets/background.png
diff --git a/www/assets/brush.png b/www/assets/brush.png
diff --git a/www/assets/brush2.png b/www/assets/brush2.png
diff --git a/www/assets/brush_circle.png b/www/assets/brush_circle.png
diff --git a/www/assets/brush_circle_small.png b/www/assets/brush_circle_small.png
diff --git a/www/assets/brush_diagonal.png b/www/assets/brush_diagonal.png
diff --git a/www/assets/brush_eraser.png b/www/assets/brush_eraser.png
diff --git a/www/assets/brush_star.png b/www/assets/brush_star.png
diff --git a/www/assets/brush_triangle.png b/www/assets/brush_triangle.png
diff --git a/www/assets/btn_circle.png b/www/assets/btn_circle.png
diff --git a/www/assets/btn_circle_sel.png b/www/assets/btn_circle_sel.png
diff --git a/www/assets/btn_circle_small.png b/www/assets/btn_circle_small.png
diff --git a/www/assets/btn_circle_small_sel.png b/www/assets/btn_circle_small_sel.png
diff --git a/www/assets/btn_diagonal.png b/www/assets/btn_diagonal.png
diff --git a/www/assets/btn_diagonal_sel.png b/www/assets/btn_diagonal_sel.png
diff --git a/www/assets/btn_slider.png b/www/assets/btn_slider.png
diff --git a/www/assets/btn_star.png b/www/assets/btn_star.png
diff --git a/www/assets/btn_star_sel.png b/www/assets/btn_star_sel.png
diff --git a/www/assets/btn_triangle.png b/www/assets/btn_triangle.png
diff --git a/www/assets/btn_triangle_sel.png b/www/assets/btn_triangle_sel.png
diff --git a/www/assets/styles.css b/www/assets/styles.css
@@ -0,0 +1,84 @@
+/* disable user selection */
+
+* {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none; /* Disable selection/Copy of UIWebView */
+}
+
+
+/* CSS Document */
+
+
+* {
+    -webkit-overflow-scrolling: none;
+}
+
+body {
+    background-color:#24389B;
+	padding: 0px;
+	margin: 0px;
+	text-align:center;
+}
+
+#background {
+	position:absolute;
+    top:0px;
+    bottom:0px;
+    left:0px;
+    right:0px;
+	background:url(background.png);	
+}
+
+#canvas {
+	position:absolute;
+	top:31px;
+	left:120px;
+	border-radius: 25px;
+}
+
+#sliderThumb {
+	position:absolute;
+	top:685px;
+	left:95px;
+	width:69px;
+	height:62px;
+	background:url(btn_slider.png);
+	-webkit-transform:translate3d(0px, 0px, 0px) scale(1);
+}
+
+#brushes {
+	position:absolute;
+	top:40px;
+	left:5px;
+	width:106px;
+}
+
+#btnCircleSmall {
+	position:absolute;
+	top:5px;
+	left:0px;
+}
+
+#btnDiagonal{
+	position:absolute;
+	top:120px;
+	left:0px;
+}
+
+#btnCircle{
+	position:absolute;
+	top:240px;
+	left:0px;
+}
+
+#btnStar{
+	position:absolute;
+	top:360px;
+	left:0px;
+}
+
+#btnTriangle{
+	position:absolute;
+	top:480px;
+	left:0px;
+}
diff --git a/www/index.html b/www/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+        <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+            <title>Lil' Doodle</title>
+
+            <script src="js/jquery-1.7.min.js"></script>
+            <script src="js/modernizr.custom.34982.js"></script>
+
+            <script src="js/sketcher.js"></script>
+            <script src="js/trigonometry.js"></script>
+            <script src="js/application.js"></script>
+
+            <link rel="stylesheet" href="assets/styles.css" />
+
+    </head>
+
+    <body>
+
+        <div id="background">
+
+            <canvas id="canvas" width="874" height="638" ></canvas>
+
+            <div id="sliderThumb" ></div>
+
+            <div id="brushes">
+                <img id="btnCircleSmall" src="assets/btn_circle_small_sel.png" />
+                <img id="btnDiagonal" src="assets/btn_diagonal.png" />
+                <img id="btnCircle" src="assets/btn_circle.png" />
+                <img id="btnStar" src="assets/btn_star.png" />
+                <img id="btnTriangle" src="assets/btn_triangle.png" />
+            </div>
+
+        </div>
+    </body>
+</html>
diff --git a/www/js/application.js b/www/js/application.js
@@ -0,0 +1,204 @@
+
+var sketcher = null;
+var brushEraser = null;
+var brushDiagonal = null;
+var brushCircle = null;
+var brushCircleSmall = null;
+var brushStar = null;
+var brushTriangle = null;
+var sliderMouseDownOffset = 0;
+var sliderStartX = 0;
+var touchID = 0;
+var lastTouchTime = 0;
+
+$(document).ready(function(e) {
+
+    window.getSelection().removeAllRanges();              
+    $(document).bind( "touchmove", function (e) { e.preventDefault(); return false; } );
+    $(document).bind( "touchstart", function (e) { e.preventDefault(); return false; } );
+
+    brushCircleSmall = new Image();
+    brushCircleSmall.src = 'assets/brush_circle_small.png';
+    brushCircleSmall.onload = function(){
+    sketcher = new Sketcher( "canvas", brushCircleSmall );
+    $("#sliderThumb").bind( sketcher.mouseDownEvent, onSliderMouseDown );
+
+
+    $("#btnDiagonal").bind( sketcher.mouseDownEvent, onDiagonalMouseDown );
+    $("#btnCircle").bind( sketcher.mouseDownEvent, onCircleMouseDown );
+    $("#btnCircleSmall").bind( sketcher.mouseDownEvent, onCircleSmallMouseDown );
+    $("#btnStar").bind( sketcher.mouseDownEvent, onStarMouseDown );
+    $("#btnTriangle").bind( sketcher.mouseDownEvent, onTriangleMouseDown );
+
+    sketcher.eraserImage = brushEraser;
+    }
+
+    brushDiagonal = new Image();
+    brushDiagonal.src = 'assets/brush_diagonal.png';
+
+    brushCircle = new Image();
+    brushCircle.src = 'assets/brush_circle.png';
+
+    brushStar = new Image();
+    brushStar.src = 'assets/brush_star.png';
+
+    brushTriangle = new Image();
+    brushTriangle.src = 'assets/brush_triangle.png';
+
+    brushEraser = new Image();
+    brushEraser.src = 'assets/brush_eraser.png';
+});
+
+function onSliderMouseDown( event ) {
+    var d=new Date();
+    var now = d.getTime();
+    if (( now - lastTouchTime ) > 500 ) {
+        cleanup();
+    }
+    lastTouchTime = now;
+
+
+    if ( touchID != 0 ) return;
+
+	var target = event.originalEvent.changedTouches[0];
+    if ( target ) {
+        cleanup();
+        touchID = target.identifier;
+
+        sliderMouseDownOffset = target.pageX - $("#sliderThumb").offset().left;
+        sliderStartX = target.pageX - (sketcher.canvas.offset().left+sliderMouseDownOffset);
+        $(document).bind( sketcher.mouseMoveEvent, onSliderMouseMove );
+        $(document).bind( sketcher.mouseUpEvent, onSliderMouseUp );
+    }
+}
+
+function onSliderMouseMove( event ) {
+
+    try {
+        var target;
+        for ( var x=0; x< event.originalEvent.changedTouches.length; x++ ) {
+            if ( touchID == event.originalEvent.changedTouches[x].identifier ) {
+                target = event.originalEvent.changedTouches[x];
+                break;
+            }
+
+        }
+
+        if ( !target ) return;
+
+        var leftMin = 95;
+        var leftMax = 949;
+
+        var eraseLeftMin = 20;
+        var eraseLeftMax = 50;
+
+        var slider = $("#sliderThumb");
+        var canvasOffset = sketcher.canvas.offset();
+        var sliderOffset = slider.offset();
+
+        var sliderNewX = target.pageX-sliderMouseDownOffset;
+        sliderNewX = Math.max( sliderNewX, leftMin );
+        sliderNewX = Math.min( sliderNewX, leftMax );
+        slider.css( "left", sliderNewX );
+
+        sliderNewX -= canvasOffset.left
+
+        var start, end;
+        if ( sliderStartX > sliderNewX )
+        {
+            start = sliderNewX+eraseLeftMin;
+            end = sliderStartX+(eraseLeftMax);
+        }
+        else {
+
+            start = sliderStartX+eraseLeftMin;
+            end = sliderNewX+(eraseLeftMax);
+        }
+
+        sketcher.erase( start, end );
+        sliderStartX = sliderNewX;
+
+        lastTouchTime = new Date().getTime();
+    }
+    catch (error) {
+        cleanup();
+    }
+
+	event.preventDefault();
+	return false;
+}
+
+function onSliderMouseUp( event ) {
+
+    try {
+        var target;
+        for ( var x=0; x< event.originalEvent.changedTouches.length; x++ ) {
+            if ( touchID == event.originalEvent.changedTouches[x].identifier ) {
+                target = event.originalEvent.changedTouches[x];
+                break;
+            }
+
+        }
+
+        if ( !target ) return;
+        cleanup();
+    }
+    catch (error) {
+        cleanup();
+    }
+}
+
+function cleanup() {
+
+    touchID = 0;
+    $(document).unbind( sketcher.mouseMoveEvent, onSliderMouseMove );
+	$(document).unbind( sketcher.mouseUpEvent, onSliderMouseUp );
+}
+
+
+function onCircleSmallMouseDown( event ) {
+	$("#btnCircleSmall").attr( "src", "assets/btn_circle_small_sel.png" );
+	$("#btnDiagonal").attr( "src", "assets/btn_diagonal.png" );
+	$("#btnCircle").attr( "src", "assets/btn_circle.png" );
+	$("#btnStar").attr( "src", "assets/btn_star.png" );
+	$("#btnTriangle").attr( "src", "assets/btn_triangle.png" );
+	sketcher.brush = brushCircleSmall;
+}
+
+function onDiagonalMouseDown( event ) {
+	$("#btnCircleSmall").attr( "src", "assets/btn_circle_small.png" );
+	$("#btnDiagonal").attr( "src", "assets/btn_diagonal_sel.png" );
+	$("#btnCircle").attr( "src", "assets/btn_circle.png" );
+	$("#btnStar").attr( "src", "assets/btn_star.png" );
+	$("#btnTriangle").attr( "src", "assets/btn_triangle.png" );
+	sketcher.brush = brushDiagonal;
+}
+
+function onCircleMouseDown( event ) {
+	$("#btnCircleSmall").attr( "src", "assets/btn_circle_small.png" );
+	$("#btnDiagonal").attr( "src", "assets/btn_diagonal.png" );
+	$("#btnCircle").attr( "src", "assets/btn_circle_sel.png" );
+	$("#btnStar").attr( "src", "assets/btn_star.png" );
+	$("#btnTriangle").attr( "src", "assets/btn_triangle.png" );
+	sketcher.brush = brushCircle;
+}
+
+function onStarMouseDown( event ) {
+	$("#btnCircleSmall").attr( "src", "assets/btn_circle_small.png" );
+	$("#btnDiagonal").attr( "src", "assets/btn_diagonal.png" );
+	$("#btnCircle").attr( "src", "assets/btn_circle.png" );
+	$("#btnStar").attr( "src", "assets/btn_star_sel.png" );
+	$("#btnTriangle").attr( "src", "assets/btn_triangle.png" );
+	sketcher.brush = brushStar;
+}
+
+function onTriangleMouseDown( event ) {
+	$("#btnCircleSmall").attr( "src", "assets/btn_circle_small.png" );
+	$("#btnDiagonal").attr( "src", "assets/btn_diagonal.png" );
+	$("#btnCircle").attr( "src", "assets/btn_circle.png" );
+	$("#btnStar").attr( "src", "assets/btn_star.png" );
+	$("#btnTriangle").attr( "src", "assets/btn_triangle_sel.png" );
+	sketcher.brush = brushTriangle;
+}
+
+
diff --git a/www/js/jquery-1.7.min.js b/www/js/jquery-1.7.min.js
diff --git a/www/js/modernizr.custom.34982.js b/www/js/modernizr.custom.34982.js