diff options
| author | Roshan Karki <roxan@roxan-desktop.(none)> | 2009-10-22 05:35:09 (GMT) |
|---|---|---|
| committer | Roshan Karki <roxan@roxan-desktop.(none)> | 2009-10-22 05:35:09 (GMT) |
| commit | cc95b917f528df62507208949fa7618f6133480a (patch) | |
| tree | 5bff41fc00c59cb4939a5c8de649f94db17f0b74 | |
| parent | dfc56fb599cf6ddb27c6f147f7d52ce6dc1c4b89 (diff) | |
static images from javascript removed to html
BAD CSS
test "erase" added to image itself, don't know if this is right thing to do.
| -rwxr-xr-x | examples/quadrilaterals/bg.png | bin | 0 -> 275387 bytes | |||
| -rwxr-xr-x | examples/quadrilaterals/css/activity.css | 54 | ||||
| -rwxr-xr-x | examples/quadrilaterals/images/erase.png | bin | 892 -> 1708 bytes | |||
| -rwxr-xr-x | examples/quadrilaterals/images/next.png | bin | 5753 -> 1906 bytes | |||
| -rwxr-xr-x | examples/quadrilaterals/images/previous.png | bin | 5604 -> 1851 bytes | |||
| -rwxr-xr-x | examples/quadrilaterals/index.html | 61 | ||||
| -rwxr-xr-x | examples/quadrilaterals/js/activity.js | 113 |
7 files changed, 128 insertions, 100 deletions
diff --git a/examples/quadrilaterals/bg.png b/examples/quadrilaterals/bg.png Binary files differnew file mode 100755 index 0000000..1a4249f --- /dev/null +++ b/examples/quadrilaterals/bg.png diff --git a/examples/quadrilaterals/css/activity.css b/examples/quadrilaterals/css/activity.css index a2ae7e9..f37eb8c 100755 --- a/examples/quadrilaterals/css/activity.css +++ b/examples/quadrilaterals/css/activity.css @@ -1,4 +1,50 @@ -#Karma { position: relative; } -#canvasDrawing { position: absolute; top: 0px; left: 0px; } -#canvasTmp { position: absolute; top: 0px; left: 0px; } -.button { position: absolute; top: 0px; left: 0px; }
\ No newline at end of file +#main +{ + background-image: url('../images/bg.png'); + width: 550px; + height: 400px; +} + +#Karma +{ + position: relative; +} + +#canvasDrawing +{ + position: absolute; + top: 0px; + left: 0px; +} + +#canvasTmp +{ + position: absolute; + top: 0px; + left: 0px; +} + +#btnerase +{ + position: absolute; + top: 270px; + left: 130px; +} + +#btn +{ + position: absolute; + top: 180px; + left: 400px; +} + +#left +{ + float: left; + width: 350px; +} + +#right +{ + margin-left: 350px; +} diff --git a/examples/quadrilaterals/images/erase.png b/examples/quadrilaterals/images/erase.png Binary files differindex 6e54657..f2ea68f 100755 --- a/examples/quadrilaterals/images/erase.png +++ b/examples/quadrilaterals/images/erase.png diff --git a/examples/quadrilaterals/images/next.png b/examples/quadrilaterals/images/next.png Binary files differindex a320792..81cc3c0 100755 --- a/examples/quadrilaterals/images/next.png +++ b/examples/quadrilaterals/images/next.png diff --git a/examples/quadrilaterals/images/previous.png b/examples/quadrilaterals/images/previous.png Binary files differindex 11232d4..ef3b168 100755 --- a/examples/quadrilaterals/images/previous.png +++ b/examples/quadrilaterals/images/previous.png diff --git a/examples/quadrilaterals/index.html b/examples/quadrilaterals/index.html index 346bbb7..ed7d791 100755 --- a/examples/quadrilaterals/index.html +++ b/examples/quadrilaterals/index.html @@ -18,29 +18,68 @@ <script type="text/javascript" src="../../js/jquery.jgrowl_minimized.js"></script> <script type="text/javascript" src="js/activity.js"></script> - </head> +<!-- <body> <noscript> Man, you need to enable JavaScript. </noscript> + <div id="main"> + + Construct a quadrilateral by moving the given straight lines to appropriate places + Make quadrilaterals on geo-board + + + <div id="Karma" class="kanimation"> - <canvas id="canvas" width="550" height="400"></canvas> - <canvas id="canvasDrawing" width="550" height="400"></canvas> - <canvas id="canvasTmp" width="550" height="400"></canvas> - <div class="kbutton" id="previous">Previous</div> - <div class="kbutton" id="next">Next</div> + + <img id="imgBg" src="images/bg.png" + <img id="imgPrev" src="images/previous.png" /> + <img id="imgNext" src="images/next.png" /> + <img id="btnErase" src="images/erase.png" /> + <canvas id="canvas" width="550" height="400"></canvas> + <canvas id="canvasDrawing" width="550" height="400"></canvas> + <canvas id="canvasTmp" width="550" height="400"></canvas> + </div> +</body> +--> + +<body> + + <noscript> + Man, you need to enable JavaScript. + </noscript> + + <div id="main"> + <div id="left"> + Construct a quadrilateral by moving the given straight lines to appropriate places </div> - <div id="bottom"> - <div class="kbutton" id="erase">Erase</div> + <div id="right"> + Make quadrilaterals on geo-board </div> - <div id="debug"> </div> - - + + <div id="Karma"> + <canvas id="canvas" width="550" height="400"></canvas> + <canvas id="canvasDrawing" width="550" height="400"></canvas> + <canvas id="canvasTmp" width="550" height="400"></canvas> + </div> + <div id="btn"> + <img id="imgPrev" src="images/previous.png" /> + <img id="imgNext" src="images/next.png" /> + </div> + <div id="erase"> + <img id="btnErase" src="images/erase.png" /> + </div> + + + + </div> + </body> + </html> diff --git a/examples/quadrilaterals/js/activity.js b/examples/quadrilaterals/js/activity.js index 0c76232..7bd09af 100755 --- a/examples/quadrilaterals/js/activity.js +++ b/examples/quadrilaterals/js/activity.js @@ -11,10 +11,6 @@ $(document).ready(function(){ ctxTmp.lineWidth = 3; ctxTmp.lineCap = 'round'; - var path={ - images: "images/" - }; - // var points=[]; //points of the quadrilateral function reset() { @@ -23,35 +19,11 @@ $(document).ready(function(){ started=false; points=[]; } - // + var buttons= { - next:{ x:510, y:135, width:30, height:30, - mouseup:function( ev ) {$.jGrowl("next pressed");}, - mousedown:function( ev ) { }, - mouseover:function( ev ) { } - }, - prev:{ x:330, y:135, width:30, height:30, - mouseup:function( ev ) {$.jGrowl("prev pressed");}, - mousedown:function( ev ) { }, - mouseover:function( ev ) { } - }, - erase:{ x:10, y:230, width:70, height:24, - mouseup:function( ev ) { - reset(); - }, - mousedown:function( ev ) {}, - mouseover:function( ev ) { - imgErase.src= path.images + "eraseOver.png"; - imgErase.onload = function(){ - ctx.drawImage( imgErase, 10, 230 ); - ctx.font = "bold 13px sans-serif"; - ctx.fillStyle = "#000000"; - ctx.fillText ( "Erase", 25, 245 ); - } - - } - } - }; + next:{ x:510, y:135, width:30, height:30}, + prev:{ x:330, y:135, width:30, height:30} + }; //f of functions, a "place" to put functions ;) var f={ @@ -87,10 +59,25 @@ $(document).ready(function(){ } }; - var imgBg = new Image(); //creates the image element for background - var imgErase = new Image(); //creates the image element for erase button - var imgPrev = new Image(); //creates the image element for previous button - var imgNext = new Image(); //creates the image element for next button + //var imgBg = document.getElementById("bg"); //creates the image element for background + var imgErase = document.getElementById("btnErase");; //creates the image element for erase button + var imgPrev = document.getElementById("imgPrev");//creates the image element for previous button + var imgNext = document.getElementById("imgNext");//creates the image element for next button + + imgNext.onmouseup = function() + { + $.jGrowl("next pressed"); + }; + + imgPrev.onmouseup = function() + { + $.jGrowl("previous pressed"); + }; + + imgErase.onmouseup = function() + { + reset(); + } //necessary stuff to do test the figure var match = false; function sortPoint( a, b) { @@ -122,40 +109,8 @@ $(document).ready(function(){ return true; } - - // - imgBg.src = path.images + "bg.png"; - imgBg.onload = function(){ - ctx.drawImage( imgBg, 0, 0 ); - - imgNext.src = path.images + "next.png"; - imgNext.alt = "next"; - imgNext.onload = function(){ - ctx.drawImage( imgNext, buttons.next.x, buttons.next.y, buttons.next.width, buttons.next.height ); - } - imgPrev.src= path.images + "previous.png"; - imgPrev.onload = function(){ - ctx.drawImage( imgPrev, buttons.prev.x, buttons.prev.y, buttons.prev.width, buttons.prev.height ); - } - - - imgErase.src= path.images + "erase.png"; - imgErase.onload = function(){ - ctx.drawImage( imgErase, 10, 230 ); - ctx.font = "bold 13px sans-serif"; - ctx.fillStyle = "#000000" - ctx.fillText ( "Erase", 25, 245 ); - } - - //Karma (need to add a textField function, something like flash one) - ctx.font = "bold 13px sans-serif"; - ctx.fillStyle = "#B74000" - ctx.fillText( "Construct a quadrilateral by moving the", 10, 40 ); - ctx.fillText( "given straight lines to appropriate places", 10, 60 ); - ctx.fillText( "Make quadrilaterals on geo-board", 330, 60 ); - //drawing area ctx.fillStyle = "rgba( 111, 226, 245, 0.7)"; ctx.strokeStyle = "#B74000" @@ -249,7 +204,7 @@ $(document).ready(function(){ } } - } + //clipping path, this is the drawing region ctxTmp.beginPath(); @@ -267,9 +222,7 @@ $(document).ready(function(){ return (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1) ; } var mouse= {x:0, y:0, x0:0, y0:0, listeners:[] }; - var debug,d; var started=false,counter=0; - //drawing object @@ -282,11 +235,7 @@ $(document).ready(function(){ } drawing.mousemove = function (ev) { if (started) { - //$("#debug").html( mouse.x +" "+mouse.y ); - //var lingrad = ctx.createLinearGradient(mouse.x0, mouse.y0,mouse.x, mouse.y); - //lingrad.addColorStop(0.5, '#000000'); - //lingrad.addColorStop(1, '#ff0000'); - //ctxTmp.strokeStyle = lingrad; + ctxTmp.clearRect(0, 0, canvas.width, canvas.height); ctxTmp.beginPath(); @@ -312,8 +261,7 @@ $(document).ready(function(){ $.each(buttons, function( i, val ){ d = distance2(mouse.x, buttons[i].x + buttons[i].width/2, mouse.y, buttons[i].y + buttons[i].height/2); mouse.minDist=(buttons[i].width/2) * (buttons[i].height/2); - //debug+="<br>"+i+" d="+ d +" <="+mouse.minDist; - //(buttons[i].width/2) * (buttons[i].height/2) + if ( d <= mouse.minDist ){ if ( ev.type==="mousemove"){ buttons[i]["mouseover"]( ev ); @@ -328,12 +276,7 @@ $(document).ready(function(){ }); //$("#debug").html( debug ); } - /* - //deprecated - canvasTmp.addEventListener('mouseup', onMouseUp, false); - canvasTmp.addEventListener('mousedown', onMouseDown, false); - canvasTmp.addEventListener('mousemove', onMouseMove, false); - */ + //Karma handler (need to work around mouse out) canvasTmp.addEventListener('mouseup', mouseHandler, false); canvasTmp.addEventListener('mousedown', mouseHandler, false); @@ -345,4 +288,4 @@ $(document).ready(function(){ -});
\ No newline at end of file +}); |
