If canvas can be cloned (via jQuery) with deep copy, then shared drawing screen possible.

[lorlarz]

I have been thinking that if canvas can be cloned (via jQuery) with
deep copy, then shared drawing screens should be possible via ajax.

Wouldn't all one have to do is use Robert O'Rourke's DrawOnMe program
and do the jQuery deep clone and SOMEHOW pass that via ajax to the
person you want to share the drawing with?

I would love to see this done.

[dire...@hyper-metrix.com]

That's a very interesting idea. I have been playing with something
along those lines actually. No cloning as such... but general comet.

Start FireFox up on two machines (or open two firefox browser windows)
and point one to the first and the other to the second link:
http://www.hyper-metrix.com/remoteMe/
http://www.hyper-metrix.com/remoteMe/control/

You can probably guess what happens next. Don't everybody try it at
once though, just incase my server goes down, i'm not running an
actual comet server and I've only tested in on 20 simultaneous
machines.

If you want the source I can throw it your way.

[dire...@hyper-metrix.com]

I saw you change the page ;)

On Apr 27, 1:33 pm, lorlarz <lorl...@gmail.com> wrote:

[Robert O'Rourke]

I love the idea. I actually have another app in the pipeline that's
similar to what you're suggesting but without simultaneous collab on the
same canvas. It's gonna take me a lot longer to complete though.

If it helps lorlarz there's the first PJS app I did at
http://www.sanchothefat.com/code/scribble.html, it's just the web page
and doesn't save anything but feel free to nab any code you want. It
shows how you can control processing via jquery and links/buttons.

Nice demo Al... lots of potential there :)

[Al MacDonald]

Thanks :)
Yeah I used it for a presentation the other day. People were like... OK, how are you changing my screen?! Mwah ha ha h a haawwww!

Robert O'Rourke wrote:

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To post to this group, send email to proces...@googlegroups.com
To unsubscribe from this group, send email to processingjs...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/processingjs?hl=en
-~----------~----~----~----~------~----~------~--~---
  

No virus found in this incoming message.
Checked by AVG - www.avg.com 
Version: 8.0.238 / Virus Database: 270.12.4/2082 - Release Date: 04/27/09 06:19:00

  

--

Alistair MacDonald
Hyper-Metrix
617.584.1420

[lorlarz]

Robert

One problem I have using processing.js is knowing how the language
between
the script type="application/processing" tags can be used with or
mingled with
javascript. Thus, I believe I will make the application simply using
javascript
(and the jQuery library) and the canvas element and its built-in line
drawing
capabilities. People will take turns and one php program will keep
track of
which user (if any) is drawing now; if none, you can claim the board
for 15-30 sec
of so and then relinquish. The other php script will be called on
mouseup,
appending mouse x and y coordinates for drawline to a given person's
txt file.
This txt file would simply be of the nature {{x1,y1],[x2,y2], ...
[xN,yN]], appended
on each mouseup and properly terminated when the given user clicks
the
DONE. Between mouseups, the x and ys will be shared in a hidden field
in the needed
format and sent via ajax on each mouseup.

In addition to the DONE button, there will be a "I'll take a turn"
button and a couple
of textboxes: One indicating current drawer and the other indicating
"DRAW" or "WAIT"
(allowing for ajax submission on each mouseup). When a drawer clicks
done, the
"availability textbox" will signify "AVAILABLE" to the other users.
When a "I'll take
a turn" Button is clicked by some user, this textarea will read "Now
in Use by: [whoever]" .
Again, use is relinquished by clicking the DONE button. (Obviously
the content of this
availability textbox will be assessed on a javascript timer and via
ajax )

Actually, someone has already done such an application, but simple has
not shared
the code for download and has not set it up for privacy:
http://www.danga.com/misc/jsdraw/xmlhttp.html

I shall simply duplicate this and make the code available and set it
up so a logon with some
username and password is needed. IF any of you can figure out how
processing.js can
make it better, email me at lor...@gmail.com. Also please freely
comment and email me
at lor...@gmail.com

On Apr 28, 4:53 am, Robert O'Rourke <r...@sanchothefat.com> wrote:
> I love the idea. I actually have another app in the pipeline that's
> similar to what you're suggesting but without simultaneous collab on the
> same canvas. It's gonna take me a lot longer to complete though.
>

> If it helps lorlarz there's the first PJS app I did athttp://www.sanchothefat.com/code/scribble.html, it's just the web page

> and doesn't save anything but feel free to nab any code you want. It
> shows how you can control processing via jquery and links/buttons.
>
> Nice demo Al... lots of potential there :)
>
>
>
> direc...@hyper-metrix.com wrote:
> > I saw you change the page ;)
>
> > On Apr 27, 1:33 pm, lorlarz <lorl...@gmail.com> wrote:
>
> >> I have been thinking that if canvas can be cloned (via jQuery) with
> >> deep copy, then shared drawing screens should be possible via ajax.
>
> >> Wouldn't all one have to do is use Robert O'Rourke's DrawOnMe program
> >> and do the jQuery deep clone and SOMEHOW pass that via ajax to the
> >> person you want to share the drawing with?
>

> >> I would love to see this done.- Hide quoted text -
>
> - Show quoted text -

[Robert O'Rourke]

I understand,
Al has written a little intro to using regular javascript with
processing.js on http://processingjs.org/reference/articles/best-pratice
- See the bit about the 'Sloppy Parser'.

Processing.js esentially runs eval() on the script
type="application/processing" so you can embed your own javascript
directly in there and it will run.

Hope that helps, and good luck with your project!

[lorlarz]

Perhaps this post should be marked attn: John Resig

I initially thought about cloning (w/ deep copy) a canvas component
and then
serializing it to a txt file on the server with php doing part of the
work.
But, I do not know if it is possible to serialize a filled-in canvas
component.
Is is? If so, how? (Are you reading this John Resig?)

Right now, my plan (now more fully detailed at the link directly
below) involves
no cloning, only keeping track of all mouseX and mouseY on mousemove
and
sending those to the txt file on the server. Here is my whole plan at
present:

http://mynichecomputing.org/myplan.txt My email is lorlarz AT
gmail.com

On Apr 28, 9:03 am, Robert O'Rourke <r...@sanchothefat.com> wrote:
> I understand,
> Al has written a little intro to using regular javascript with

> processing.js onhttp://processingjs.org/reference/articles/best-pratice

> > make it better, email me at lorl...@gmail.com.  Also please freely
> > comment and email me
> > at lorl...@gmail.com

>
> > On Apr 28, 4:53 am, Robert O'Rourke <r...@sanchothefat.com> wrote:
>
> >> I love the idea. I actually have another app in the pipeline that's
> >> similar to what you're suggesting but without simultaneous collab on the
> >> same canvas. It's gonna take me a lot longer to complete though.
>
> >> If it helps lorlarz there's the first PJS app I did athttp://www.sanchothefat.com/code/scribble.html, it's just the web page
> >> and doesn't save anything but feel free to nab any code you want. It
> >> shows how you can control processing via jquery and links/buttons.
>
> >> Nice demo Al... lots of potential there :)
>
> >> direc...@hyper-metrix.com wrote:
>
> >>> I saw you change the page ;)
>
> >>> On Apr 27, 1:33 pm, lorlarz <lorl...@gmail.com> wrote:
>
> >>>> I have been thinking that if canvas can be cloned (via jQuery) with
> >>>> deep copy, then shared drawing screens should be possible via ajax.
>
> >>>> Wouldn't all one have to do is use Robert O'Rourke's DrawOnMe program
> >>>> and do the jQuery deep clone and SOMEHOW pass that via ajax to the
> >>>> person you want to share the drawing with?
>
> >>>> I would love to see this done.- Hide quoted text -
>

> >> - Show quoted text -- Hide quoted text -

[Robert O'Rourke]

I'd log the co-ords of the lines to an array and save it asynchronously
with jQuery eg:

<script type="text/javascript">
window.Processing.data.trace = [];
</script>

<script type="application/processing">
int i, t;
void draw(){
if(mousePressed){
window.Processing.data.trace[t] = [mouseX,mouseY];
}

if ( i == 200 ) {
$.post("save.php",{ data: window.Processing.data.trace });
window.Processing.data.trace = [];
i = 0;
}

i++;
t++;
}
</script>

Something along those lines anyway.

[dire...@hyper-metrix.com]

I think what you are dealing with is the fact that the canvas just
spits out pixels. There is no DOM elements inside a canvas unless you
put them there. (And those are only relevant if your browser does not
have canvas rendering capabilities.) Now I think you would like to get
the methods of the canvas attached to "p" and pass those to the remote
client. You can do this without cloning if you really wanted to,
because the script is just the text node of the dom element that has
been parsed and eval-ed. So there is no reason for a deep clone.

There is a method to get the pixels of one canvas and send it to
another, which may not be entirely relevant to you, but it is useful.
documented here: http://processingjs.org/learning/basic/creategraphics

I really like the plan.txt you set out lolarz. I just want you to know
that everything in there is possible. It sounds like you are building
a comet application. http://en.wikipedia.org/wiki/Comet_(programming)

[lorlarz]

Here is what I have as a first draft of the code (mainly I have just
php files left to write):

<head>
<title>First Rough</title>
<style>

body {
text-align: center
}

</style>
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></
script><![endif]-->

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>

<script type="text/javascript">

var pmousex = 0;
var pmousey = 0;
var nmousex = 0;
var nmousey = 0;

// need textbox for your name and other's name
// isAvail is textbox that reads who is the user from the server
(starts with 'available')

function doBinds(periodic) {


if(isAvail.value != othername) {
$("#mycanvas").bind(onmousedown, function(e) {
ctx.beginPath();
pmousex = e.pageX; // adjust for position of canvas
pmousey = e.pageY; // adjust for position of canvas
ctx.moveTo(pmousex, pmousey);




if(periodic == false) myhidden.value = "[" + "[" + pmousex + "," +
pmousey + "]";

if(periodic == true) myhidden.value = ",[" + pmousex + "," +
pmousey + "]";




});

$("#mycanvas").bind(onmousemove, function(e) {
nmousex = e.pageX; // adjust for position of canvas
nmousey = e.pageY; // adjust for position of canvas



ctx.lineTo(nmousex, nmousey);
ctx.closePath();
ctx.stroke();

myhidden.value += ",[" + nmousex + "," + nmousey + "]";
ctx.moveTo(nmousex,nmousey);


});


// sendtxtX.php appends the txt in your userfile on the server

$("#mycanvas").onmouseup(function() {

$("#mycanvas").unbind(mousemove);
$("#mycanvas").unbind(mousedown);

if(yourname =="user1") {
thesent = sendtxt1.php
}
else {
thesent = sendtxt2.php
}

var tosend = myhidden.value;
myhidden.value = "";
$.post(thesent,tosend,doBinds(true));


});
}
}

function startNew() {
ctx.moveTo(pmousex,pmousey);
doBinds(false);

}

window.onload = function() {
var ctx = document.getElementById('mycanvas').getContext('2d');
var myhidden = document.getElementById('myhidden');
var mycanvas = document.getElementById('mycanvas');
var isAvail = document.getElementById('available');


ctx.strokeStyle = 'black';
ctx.lineWidth = 1;

// timer runs for both at first, then only for non-active person
// timer reads shWBavail.txt and loads that value into textbox
id=isAvail via checkAvail.php

timer = setTimeout(function() {

$("#available").load(checkAvail.php)

},5000);




};



$("#buttonDONE").click(function() {

if(yourname="user1") {
thesent = sendtxt1.php
}
else {
thesent = sendtxt2.php
}



$("#mycanvas").unbind(mouseup);




timer = setTimeout(function() {

$("#available").load(checkAvail.php)

},5000);

myhidden.value += "]";
var tosend = myhidden.value;
myhidden.value = "";
$.post(thesent,tosend,function() {
// usertxt.php sets the username of the person using OR sets that
textbox to 'available
$.post(usertxt.php,"available");
});
});

// othertxtX.php reads all from the OTHER'S JSON store file on the
server
// othertxtXNA.php overwrites the txt in OTHER'S JSON store file to
"" (blank) on the server

$("#buttonMYTURN").click(function() {

othername = document.getElementById("otherusername").value;
yourname = document.getElementById("yourusername").value;

if(isAvail.value != othername) {

timer=null;
if(yourname="user1") {
thefile = "othertxt2.php";
thefileNA = "othertxt2NA.php";
}
else {
thefile = "othertxt1.php"
thefileNA = "othertxt1NA.php";
}
var otherarray = [];
$.getJSON(thefile,function(entryIndex,entry){

otherarray[entryIndex] = [entry[0],entry[1]]

});

for (var i = 0; i < otherarray.length - 2; i++) {
ctx.beginPath();

ctx.moveTo(otherarray[i][0],otherarray[i][1]);
ctx.lineTo(otherarray[i + 1][0],otherarray[i + 1][1]);
ctx.closePath();
ctx.stroke();
if(i = otherarray.length - 2)
{
pmousex = otherarray[i + 1][0];
pmousey = otherarray[i + 1][1];
}


}

$.post(thefileNA,"",startNew());





};


});

</script>
</head>
<body>
<center><input type="text" id="isAvail" value="available"></center>
Fill this in before clicking on the canvas: <input type="text"
id="yourusername" value="YOUR username" />
Fill this in before clicking on the canvas: <input type="text"
id="otherusername" value="OTHER'S username" /><br />
(Main user (or one of the users) must be "user1" (no quotes).)
<br />
<input type="button" value="My Turn" id="buttonMYTURN"><input
type="button" value="DONE" id="buttonDONE">
<input type="hidden" id="myhidden">
<br /><br />
<hr color="#008000" size="6"><br /><br />
<div style="position: absolute; width: 710px; height: 650px; z-index:
1; left: 50px; top: 150px;border: 3px double #FF0000" width="710">
<canvas id="mycanvas" width=700 height=600></canvas>
<p>This tests that lines work in the same way in different browsers
when you are
using sub pixel coordinates.</p>

</div>

</body>

[lorlarz]

I just noticed an obvious error:

if(i = otherarray.length - 2) in the code below
should, of course, be:

if(i == otherarray.length - 3)

On Apr 28, 4:44 pm, lorlarz <lorl...@gmail.com> wrote:

[snip]

>     if(i = otherarray.length - 2)
>     {
>     pmousex = otherarray[i + 1][0];
>     pmousey = otherarray[i + 1][1];
>     }
>
>   }
>
>   $.post(thefileNA,"",startNew());
>
> };
> });
>
> </script>
> </head>
> <body>
> <center><input type="text" id="isAvail" value="available"></center>
> Fill this in before clicking on the canvas: <input type="text"
> id="yourusername" value="YOUR username" />
> Fill this in before clicking on the canvas: <input type="text"
> id="otherusername" value="OTHER'S username" /><br />
> (Main user (or one of the users) must be "user1" (no quotes).)
> <br />
> <input type="button" value="My Turn" id="buttonMYTURN"><input
> type="button" value="DONE" id="buttonDONE">
> <input type="hidden" id="myhidden">

[snip]

> </body>
>
> On Apr 28, 1:02 pm, Robert O'Rourke <r...@sanchothefat.com> wrote:
>

[snip]

[lorlarz]

P.P.S Second correction: setTimeout should be setInterval

in the following (all locations):
[snip]

// timer runs for both at first, then only for non-active person
// timer reads shWBavail.txt and loads that value into textbox
id=isAvail via checkAvail.php

timer = setTimeout(function() {

$("#available").load(checkAvail.php)

},5000);
};

$("#buttonDONE").click(function() {

if(yourname="user1") {
thesent = sendtxt1.php
}
else {
thesent = sendtxt2.php
}

$("#mycanvas").unbind(mouseup);

timer = setTimeout(function() {

$("#available").load(checkAvail.php)

},5000);

[snip]

On Apr 28, 4:44 pm, lorlarz <lorl...@gmail.com> wrote:

> Here is what I have as a first draft of the code (mainly I have just
> php files left to write):
>

[snip]

>
>   timer = setTimeout(function() {
>
>   $("#available").load(checkAvail.php)
>
> },5000);
>

[snip]

> ...
>
> read more »