JavaScript(w/ jQuery)/PHP shared whiteboard close to done

[lorlarz]

It may be working now though it is far from foolproof for users
(and may still have some problems).

Please feel free to download the whole system and help me polish it to
a good,
workable thing. The whole kit (all files, all js and all php) is
at :

http://mynichecomputing.org/newDrawKit.zip

email me at lorlarz AT gmail.com with input/feedback etc.

[Al MacDonald]

Do you have this working on a website somewhere?


lorlarz wrote:

 with input/feedback etc.
--~--~---------~--~----~------------~-------~--~----~
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.8/2086 - Release Date: 04/29/09 06:37:00

  

--

Alistair MacDonald
Hyper-Metrix
617.584.1420

[lorlarz]

It was not really fully working because I realized I needed a three-
dimensional
array (because each mouseup with a mousemove, in a sense starts things
all over
again). I do have it close now. Be glad for your help.

Here is the whole kit, close to working (at least it works for one
drawer) but I have
not yet tested it fully (to say the least). Still, I **know** it is
close:
It is a most excellent brain teaser. I can **guarantee** it will work
when
whatever minor errors that are left are worked out. I am getting
tired.
I would be glad for your help: Let me know if you solve the brain
teaser before me: HERE IS ALL IN ITS PRESENT STATE:

http://mynichecomputing.org/roughDrawKit.zip

On Apr 29, 3:16 pm, Al MacDonald <direc...@hyper-metrix.com> wrote:
> Do you have this working on a website somewhere?
>
>
>
>
>
> lorlarz wrote:
> > It may be working now though it is far from foolproof for users
> > (and may still have some problems).
>
> > Please feel free to download the whole system and help me polish it to
> > a good,
> > workable thing.  The whole kit (all files, all js and all php)  is
> > at :
>
> >http://mynichecomputing.org/newDrawKit.zip
>
> > email me at lorlarz AT gmail.com with input/feedback etc.
>

> > ------------------------------------------------------------------------

>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.8/2086 - Release Date: 04/29/09 06:37:00
>
> --

> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420
> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>- Hide quoted text -
>
> - Show quoted text -

[Al MacDonald]

cool lorlaz, i have downloaded it, and i will check it out tonight when i have a few more things finished

lorlarz wrote:

No virus found in this incoming message.
Checked by AVG - www.avg.com 
Version: 8.0.238 / Virus Database: 270.12.8/2086 - Release Date: 04/29/09 06:37:00

  

--

Alistair MacDonald
Hyper-Metrix
617.584.1420

[lorlarz]

I updated the files in the last zip ( http://mynichecomputing.org/roughDrawKit.zip
)
to allow a given user to take 2 turns in a
row, if the other person has not jumped in and taken their turn.

This could be a commonplace occurance

[lorlarz]

P.S. I needed to update the timer code in 2 places, so
it was like this:

thetimer = setInterval(function() {

$.post("readAvail.php", {'mydata': ''}, function(data){ $
("#available").val(data);});

},5000);

Again, I have updated http://mynichecomputing.org/roughDrawKit.zip

On Apr 29, 4:57 pm, lorlarz <lorl...@gmail.com> wrote:
> I updated the files in the last zip (http://mynichecomputing.org/roughDrawKit.zip

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

[lorlarz]

Update:
Rough draft kit NOW at http://mynichecomputing.org/roughDrawKit.zip
at least allows one drawer to successfully draw AND produces the
correct 3D-array in the user1 txt file, that should allow
reproduction
of user1's drawing on user2's canvas.

I will start by neatening up all could and fixing small things and
then
proceed to see if user2 does get user1's drawing (and fixing things
to make this happen.

On Apr 29, 5:33 pm, lorlarz <lorl...@gmail.com> wrote:
> P.S.  I needed to update the timer code in 2 places, so
> it was like this:
>
>  thetimer = setInterval(function() {
>
>    $.post("readAvail.php", {'mydata': ''}, function(data){ $
> ("#available").val(data);});
>
> },5000);
>

> Again, I have updatedhttp://mynichecomputing.org/roughDrawKit.zip

[lorlarz]

Final P.P.S. until I (or someone else) gets this thing working.
The new 8:25 a.m. (US CST) version in
http://mynichecomputing.org/roughDrawKit.zip
should work -- though I still have not seen it work, perhaps
due to a caching problem.

Also, you can run it live, by opening 2 browsers and loading
the web page http://mynichecomputing.org/sharedDraw
**PLEASE NOTE** In one browser, the first text box should
be set to "user1" and the second one to "user2". In the other
browser, set first textbox to "user2", second to "user1".
**AND**
PLEASE ONLY DRAW 15-30 SEC BEFORE CLICKING DONE,
and letting the other user have a turn -- so none of my txt files
that get written to get too huge. Let me know if it works OR
help me fix it: lorlarz at gmail dot com

[lorlarz]

Sorry, another quick P.S., so if you try the live site,
you have a chance of things working:

When testing this live: "user1" and "user2" should
quickly claim a turn (and do nothing) and both click
DONE to clear out anything anyone else trying it may have put in
or left in it (and: if one user is said to be using it, click their
DONE first).

On Apr 30, 8:27 am, lorlarz <lorl...@gmail.com> wrote:
> Final P.P.S. until I (or someone else) gets this thing working.

> The new 8:25 a.m. (US CST) version inhttp://mynichecomputing.org/roughDrawKit.zip

> should work -- though I still have not seen it work, perhaps
> due to a caching problem.
>
> Also, you can run it live, by opening 2 browsers and loading

> the web pagehttp://mynichecomputing.org/sharedDraw

[lorlarz]

FIXED. IT WORKS. Just had to get other users mouse clicked on there
canvas before trying to draw first user's data, thats all.

Good one in http://mynichecomputing.org/roughDrawKit.zip now,
though I think 5 sec intervals are too long -- so some tweaking needed

Also, live version, described above works, but please read all the
directions.
I would still be pleased to get email about improvements. Perhaps it
can
also be done with processing.js

Thanks for listening and thanks for your patience.

Regards, Larz

> > help me fix it: lorlarz at gmail dot com- Hide quoted text -

[julien de Nas de Tourris]

Thanks Larz for your work, gonna try it shortly.
I was thinking to do the same, using a database for the turn so we can have several users using a flag to 1 for availability.
When their turn is finish and they have finished drawing, it save the canvas as an image, refresh the browser of others and work on the last image saved.
Dunno if that make sense or not.

[lorlarz]

P.S. Re: Last drawer using live version:

Last user should be sure to also click there DONE button OR the
next other user of the app will get the last portion of the last
person's drawing

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

[lorlarz]

Julien

Apparently it is possible to save a canvas element as an image via
JavaScript:

http://www.nihilogic.dk/labs/canvas2image/

Let me know via email ( lorlarz at gmail dot com) is you make such a
version
as you describe. THANKS!!

On Apr 30, 12:41 pm, julien de Nas de Tourris <jdetour...@gmail.com>
wrote:

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

[lorlarz]

P.S. I fixed a non-fatal flaw in the code, spotted by Firebug this
morning.

People might want to download the new
http://mynichecomputing.org/roughDrawKit.zip

I also fixed the running sample.
http://mynichecomputing.org/sharedDraw/

[lorlarz]

Julien

In fact: As soon as you draw on a canvas element, it IS a png image.
ALSO: Images can be placed right into the canvas element _and_ can
be drawn on.

Again: http://www.nihilogic.dk/labs/canvas2image/ has it all
(** and it is all done with javascript **)

Thus, we know it is possible to import an image to a canvas and then
draw on top of it. The drawed-upon image IS also a png and a mySQL
database
could store the image and pass it
between users. This would allow for a very sophisticated version of
the
shared whiteboard program.

There is no doubt that if one simply saved the png to a database
via ajax between turns, 2 people ,sharing in a more sophisticated
shared whiteboard
program, could start with an image, take turns drawing on it, and
save
their product.

Also, nice to note: That http://www.nihilogic.dk/labs/canvas2image/
page has it canvas image built with the rectangle drawing
functions of the canvase element, show that those functions indeed
exist --
which is very convenient

On Apr 30, 12:41 pm, julien de Nas de Tourris <jdetour...@gmail.com>
wrote:

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

[lorlarz]

P.S. Julien

Here is great information on putting an image into a canvas
element: https://developer.mozilla.org/En/Canvas_tutorial/Using_images

AND
Relevant code in canvas2image.js indicates we can save the
image from a canvas element anywhere we want:

var saveFile = function(strData) {
document.location.href = strData;
}

<- In the code that exists, the image is just sent to the browser
but there is no reason it could not be saved anywhere!

So, now we know how to take a png out and put a png in and in the
middle
we know we can draw on it!! You already are aware images can
be saved in a database.

So, I hope you do the new version of my little ajax app, using pngs
and
make is sophisticated. If you do, please email me a lorlarz at gmail
dot com

On May 2, 10:18 am, lorlarz <lorl...@gmail.com> wrote:
> Julien
>
> In fact:  As soon as you draw on a canvas element, it IS a png image.
> ALSO: Images can be placed right into the canvas element _and_ can
> be drawn on.
>

> Again:http://www.nihilogic.dk/labs/canvas2image/has it all

> (** and it is all done with javascript **)
>
> Thus, we know it is possible to import an image to a canvas and then
> draw on top of it. The drawed-upon image IS also a png and a mySQL
> database
> could store the image and pass it
> between users.  This would allow for a very sophisticated version of
> the
> shared whiteboard program.
>
> There is no doubt that if one simply saved the png to a database
> via ajax between turns, 2 people ,sharing in a more sophisticated
> shared whiteboard
> program, could start with an image, take turns drawing on it, and
> save
> their product.
>

> Also, nice to note: Thathttp://www.nihilogic.dk/labs/canvas2image/

[julien de Nas de Tourris]

Hi Lorlarz,

It's nearly there for me, i have managed to save all the javascript values when the user is drawing or typing on the canvas in the db and undo the changes by httprequest, and reload the value by httprequest and javascript to update the canvas.
I need to improve the processing part now to give more possibility for the user like changing the fonts which is very important to me, drag selection, etc...
I'm making a module for expression engine, but will do a normal version to.
My main goal today is to get that font stuff working by glyph table. I'm gonna take a look at Inkscape and see how i can convert ttf fonts to glyph, as i cant find any info or vlw fonts to use in processing.
Nearly there... ;)

[Lorin Larson]

Great Julien. I look forward to seeing it.

[lorlarz]

I further update the program (and the zip) , so the shared drawing
thing
now allows drawing in different colors, 2 thicknesses, and allow
erasing.

On May 2, 9:42 am, lorlarz <lorl...@gmail.com> wrote:
> P.S.  I fixed a non-fatal flaw in the code, spotted by Firebug this
> morning.
>

> People might want to download the newhttp://mynichecomputing.org/roughDrawKit.zip
>
> I also fixed the running sample.http://mynichecomputing.org/sharedDraw/

[julien de Nas de Tourris]

Hi Lolarz, i have nearly finish my business card creation system. You can take a look here www.kohure.com/index.php/canvas

[Lorin Larson]

Julien

When you save the canvas, as the png it is, to the desktop:
The version in the zip allows for then uploading it to the site and
then later importing the pnp in a later session to continue drawing
on it in the shared whiteboard. (I just did not want to give the
entire world access to upload to my site, so the live sample does
not include this aspect.)

Nothing gives any font capabilities, though, so I very much look
forward to your version, Julien

[julien de Nas de Tourris]

Did you took a look at my version? If yes, we can work together on developing a white board.
Maybe we can put our ideas together.
The main way of doing my version is.
1. All is done with processig, jquery and javascript
2. The value in the fields control the text position, fonts, and string value, updated by jquery into the processing script.
3. Save those values by httprequest to the database and undo possibility by httprequest to delete the last row in the db and load the previous one.

What need to be done now : Draw shapes, or just draw with the mouse. Improve the draggable feature of the text, because i havent manage the length of the string, because the font size and font change dynamically. Will work on that later.
Send the image canvas as attachments by email.
Load image like logo or other images and change the transparency for it.
Improve the cpu usage who increased dramatically after several minutes of manipulation.
If i want to do something very user interactive with processing there is no so much choice that creating or changing new variables in the draw function, which i think is very bad for the cpu at the moment.
I can create a dev site just for that feature tomorrow or tonite.

[Lorin Larson]

Julien,

My apologies. I apparently did fail to see it. I saw some other sort of app
at the address you gave. Just for your information, I do have a text drawing
version now available. zip is at:
http://mynichecomputing.org/fullDrawingKit.zip

I will continue to check your site and links you give, because I very
much want to see your version.

Regards, Larz

On Tue, May 5, 2009 at 8:28 PM, julien de Nas de Tourris

[lorlarz]

P.S. Made changes to zips, this morning.

Newest version of shared JS/PHP/ajax whiteboard with many new
features:
http://mynichecomputing.org/fullDrawingKit.zip
Saves and reloads products, allow drawing text (FF only)
Had to stop errors when
users made attempts to draw outside canvas.


Old cross-platform version in roughDrawKit.zip also still exists.
AND: I made an important update to the zip this morning. Had to stop
errors when
users made attempts to draw outside canvas.

Demo at http://mynichecomputing.org/sharedDraw/ is the version in the
roughDrawKit.zip and reflects these changes

For your own use, this tool may be made slightly less crude by:

* changing the first alert to read simply:
"In using this you can just religiously take turns -- since it is
indicated within 5 sec when each person takes a turn & then also
within 5 sec when the canvas becomes available to the other for
drawing again (a person taking a turn could just collect the OTHER'S
updated drawing and then click DONE, if desired)."

* changing the last parameter of all setInterval's to 3000 or 2500 or
2000
instead of 5000 (i.e. 3sec, 2.5 sec, or 2sec, instead of 5 sec) --
do not
change the setTimeout. This would make the thing twice as responsive
in notifying you when you finished your turn AND when the next
started.

* designers could beautify this thing substantially.

* You could provide a separate page of some readable directions.

* If you used a database for storing updates (autonumbered), it would
be
easy to see how you could have more than 2 users and not worry
about
the exact timing of the updates.

On May 5, 7:58 pm, Lorin Larson <lorl...@gmail.com> wrote:
> Julien
>
> When you save the canvas, as the png it is, to the desktop:
> The version in the zip allows for then uploading it to the site and
> then later importing the pnp in a later session to continue drawing
> on it  in the shared whiteboard.  (I just did not want to give the
> entire world access to upload to my site, so the live sample does
> not include this aspect.)
>
> Nothing gives any font capabilities, though, so I very much look
> forward to your version, Julien
>
> On Tue, May 5, 2009 at 6:39 PM, julien de Nas de Tourris
>
>
>
> <jdetour...@gmail.com> wrote:
> > Hi Lolarz, i have nearly finish my business card creation system. You can
> > take a look herewww.kohure.com/index.php/canvas
>

[Al MacDonald]

Hey Lolarz, just checked out your project. Great stuff. Very interesting idea.

lorlarz 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.21/2102 - Release Date: 05/07/09 05:57:00

  

--

Alistair MacDonald
Hyper-Metrix
617.584.1420

[lorlarz]

Thanks Al,

The no-database versions (either zip I provide) have amazingly
simple
directions (to get an instance of your own on your web site):

Directions: Put all the files (except the write folder) in some
folder ("subsite") of your website.

Put the write folder (the folder itself) at the same level as
the folder ("subsite" folder), where you put everything else.

Make a empty folder named "thisuploads" (no quotes) IN the
folder with all the subsite files.

If you have a php-enabled site and proper folder permissions,
it should work.

(that's it)

I might add, regarding converting it to a version that saves each
update to
a database: I could say a little more about how that would work:

If you used a database for storing updates (autonumbered), it would

be easy to see how you could have more than 2 users *and* not worry
about the exact timing of the updates. (Just have a cookie or session
variable or variable in the browser keep track of the last updated id
a given
person and browsergot, and then be periodically (every few sec)
getting
all the updatesand applying those which have not yet been applied --
i.e. have higher
autonumbered id numbers.

ALSO: (on a only remotely related matter):
If you do make yourself a database version and have more
than 2 users all working exactly at the same time, you might
find my js/php personal twitter live ajax chat app useful (as easy
to install as the the shared whiteboard, described above):

Your own twitter. For the server/php/mySQL guy: http://tinyurl.com/cy8fux
For everyone's Desktop: http://tinyurl.com/aa3rqm (this last part is
optional, because everyone can just go directly to the web page on
the
site if they want).

On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> idea.
>
>
>
>
>
> lorlarz wrote:
> > P.S. Made changes to zips, this morning.
>
> > Newest version of shared JS/PHP/ajax whiteboard with many new
> > features:
> >http://mynichecomputing.org/fullDrawingKit.zip
> > Saves and reloads products, allow drawing text (FF only)
> > Had to stop errors when
> > users made attempts to draw outside canvas.
>
> > Old cross-platform version in roughDrawKit.zip also still exists.
> > AND: I made an important update to the zip this morning.  Had to stop
> > errors when
> > users made attempts to draw outside canvas.
>

> > Demo athttp://mynichecomputing.org/sharedDraw/is the version in the

> > ------------------------------------------------------------------------

>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.21/2102 - Release Date: 05/07/09 05:57:00
>
> --

> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420

> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>- Hide quoted text -

[julien de Nas de Tourris]

In the database version, i think it's possible to manage the image update from the last image of the db by ajax.
If we can create the file from the BLOB of the db in the data folder, we can reload it in the draw function of processing js

[Lorin Larson]

Julien,

That sounds correct (though I know nothing of processing.js).

BLOBS would be likely easier than loading all the updates data (which
has not yet been loaded) -- though that would be possible too.

Good luck, Julien. I know I am likely done with my work here.

Regards, Larz

[lorlarz]

Al,

Still, I saw that people needed some directions, so a directions link
has bben added
to the app page, http://mynichecomputing.org/sharedDraw/

I also updated the version in the zips provided for download.

http://mynichecomputing.org/roughDrawKit.zip
http://mynichecomputing.org/fullDrawingKit.zip

On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:

> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> idea.
>
>
>
>
>
> lorlarz wrote:
> > P.S. Made changes to zips, this morning.
>
> > Newest version of shared JS/PHP/ajax whiteboard with many new
> > features:
> >http://mynichecomputing.org/fullDrawingKit.zip
> > Saves and reloads products, allow drawing text (FF only)
> > Had to stop errors when
> > users made attempts to draw outside canvas.
>
> > Old cross-platform version in roughDrawKit.zip also still exists.
> > AND: I made an important update to the zip this morning.  Had to stop
> > errors when
> > users made attempts to draw outside canvas.
>

> > Demo athttp://mynichecomputing.org/sharedDraw/is the version in the

> > ------------------------------------------------------------------------

>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.21/2102 - Release Date: 05/07/09 05:57:00
>
> --

> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420

> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>- Hide quoted text -

[Lorin Larson]

A bug was found. It was fixed on both the demo page and the zips.

http://mynichecomputing.org/sharedDraw/

http://mynichecomputing.org/roughDrawKit.zip
http://mynichecomputing.org/fullDrawingKit.zip

Please redownload zips to have version with bug fixed.

[lorlarz]

All the zips and site referred to below have been improved. The
app is more easy to use and totally not confusing and much
of the possible user error has been removed. You will want to
get the new zip downloads.

On May 10, 11:58 am, Lorin Larson <lorl...@gmail.com> wrote:
> A bug was found.  It was fixed on both the demo page and the zips.
>
> http://mynichecomputing.org/sharedDraw/
>
>  http://mynichecomputing.org/roughDrawKit.zip
>  http://mynichecomputing.org/fullDrawingKit.zip
>
> Please redownload zips to have version with bug fixed.
>
>
>
> On Fri, May 8, 2009 at 1:28 PM, lorlarz <lorl...@gmail.com> wrote:
>
> > Al,
>
> > Still, I saw that people needed some directions, so a directions link
> > has bben added

> > to the app page,http://mynichecomputing.org/sharedDraw/

>
> > I also updated the version in the zips provided for download.
>
> >http://mynichecomputing.org/roughDrawKit.zip
> >http://mynichecomputing.org/fullDrawingKit.zip
>
> > On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> >> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> >> idea.
>
> >> lorlarz wrote:
> >> > P.S. Made changes to zips, this morning.
>
> >> > Newest version of shared JS/PHP/ajax whiteboard with many new
> >> > features:
> >> >http://mynichecomputing.org/fullDrawingKit.zip
> >> > Saves and reloads products, allow drawing text (FF only)
> >> > Had to stop errors when
> >> > users made attempts to draw outside canvas.
>
> >> > Old cross-platform version in roughDrawKit.zip also still exists.
> >> > AND: I made an important update to the zip this morning.  Had to stop
> >> > errors when
> >> > users made attempts to draw outside canvas.
>

> >> > Demo athttp://mynichecomputing.org/sharedDraw/isthe version in the

[lorlarz]

Sorry. I found one more bug:

I believe I have removed the last bug just within the last hour (it is
Thurs morn, 9 am).
There WAS a problem, IF on one's first "bout" of a turn he/she
clicked, but did not drag.
This screwed things up.

I fixed this so if the user does this things do not get messed up, but
rather they get a 1px dot at the location where they clicked. All
instances and zips have been updated.

Previous weirdnesses that were removed:

requiring a click at the beginning of the ones turn after the alert
-- no longer needed
(now you just wait for "[yourusername]" is
drawing" at the top)

requiring a click before the first text insertion -- now, works as
you would hope, right away
(put text in the one textbox and do a Shift-Click and text will
go in the canvas)

the "Another turn (RIGHT aft. last turn)" button was removed --
because it would rarely
if ever be used and would cause confusion and possible errors

The only user errors still possible are clicking the "My Turn" button
more than once or
clicking the DONE button more than once, or at the wrong time -- both
unlikely errors.

I guess it is possible to try to draw too soon between "bouts" of
drawing during one's
turn, but this is unlikely since the processing time seems to be
distinctly less than a
second -- but this could be a user error that could happen if a lot of
drawing was done
on one "bout" and the user did not wait the second or so to draw again
during the given
turn.

> > >> > Demo athttp://mynichecomputing.org/sharedDraw/istheversion in the

[lorlarz]

Julien

In order to use processing.js and share images, it seems to me that
one would have to save the pngs to a database and the other drawer
collect the png, modify it , and resave.

I found the following site for the code. Using jQuery you could do
all this with ajax:

http://www.webmasterworld.com/php/3572560.htm

Hope to hear from you and hope you share your product.

Regards, Larz

On May 7, 3:12 pm, julien de Nas de Tourris <jdetour...@gmail.com>
wrote:

> > For everyone's Desktop:http://tinyurl.com/aa3rqm(this last part is

> > optional, because everyone can just go directly to the web page on
> > the
> > site if they want).
>
> > On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> > > Hey Lolarz, just checked out your project. Great stuff. Very interesting
> > > idea.
>
> > > lorlarz wrote:
> > > > P.S. Made changes to zips, this morning.
>
> > > > Newest version of shared JS/PHP/ajax whiteboard with many new
> > > > features:
> > > >http://mynichecomputing.org/fullDrawingKit.zip
> > > > Saves and reloads products, allow drawing text (FF only)
> > > > Had to stop errors when
> > > > users made attempts to draw outside canvas.
>
> > > > Old cross-platform version in roughDrawKit.zip also still exists.
> > > > AND: I made an important update to the zip this morning.  Had to stop
> > > > errors when
> > > > users made attempts to draw outside canvas.
>

> > > > Demo athttp://mynichecomputing.org/sharedDraw/isthe version in the

[lorlarz]

P.S. The retrieving of the image is apparently quite easy

http://www.wellho.net/resources/ex.php4?item=h113/picscript.php

Instead of the print statement in that example you would get the
data ($imagebytes) and use it in the callback function (jQuery):
($imagebytes via jQuery is passed to the callback where it is called
data
or whatever you want)

Here is what the callback function (after the php retrievel script
runs would look like:

function drawtheImage(data) {

var img = new Image();
img.src = data;
img.onload = function(){


ctx.drawImage(img,0,0,700,600);

> > > For everyone's Desktop:http://tinyurl.com/aa3rqm(thislast part is

> > > optional, because everyone can just go directly to the web page on
> > > the
> > > site if they want).
>
> > > On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> > > > Hey Lolarz, just checked out your project. Great stuff. Very interesting
> > > > idea.
>
> > > > lorlarz wrote:
> > > > > P.S. Made changes to zips, this morning.
>
> > > > > Newest version of shared JS/PHP/ajax whiteboard with many new
> > > > > features:
> > > > >http://mynichecomputing.org/fullDrawingKit.zip
> > > > > Saves and reloads products, allow drawing text (FF only)
> > > > > Had to stop errors when
> > > > > users made attempts to draw outside canvas.
>
> > > > > Old cross-platform version in roughDrawKit.zip also still exists.
> > > > > AND: I made an important update to the zip this morning.  Had to stop
> > > > > errors when
> > > > > users made attempts to draw outside canvas.
>

> > > > > Demo athttp://mynichecomputing.org/sharedDraw/istheversion in the

> ...
>
> read more »- Hide quoted text -

[Al MacDonald]

If you are setting up a database that only ever holds one image, I would advise you to just use PHP to dump the octet the image data down to a gif on the server. Then it could be reloaded as a gif into the canvas as-and-when. No need to have a database if it's just one white board running.

lorlarz 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.31/2116 - Release Date: 05/15/09 06:16:00

  

[julien de Nas de Tourris]

i'm using the database to remember the value of some inputs like the text string, position, font, size etc. For a line there is only 4 parameter to store for example.
By httprequest, i can get all those parameters and redraw exactly the same canvas as it was at one moment. It's long and a bit of a pain, but it is more difficult to me to get the image back from a blob, than using the db to redraw the canvas.
I'm stuck on writing a file from the BLOB data of the jpeg image or png. I save them in two format in the db.

No virus found in this incoming message.
Checked by AVG - www.avg.com
 
Version: 8.0.238 / Virus Database: 270.12.31/2116 - Release Date: 05/15/09 06:16:00

  

[lorlarz]

Al,

I suspect that I could make my application much better if I did not
send the drawing
data to a txt file after each mouseup, etc and saved no drawing data
in a txt file at all.
At the end of one's turn just uploading the png to the folder (instead
of using a txt file
at all) would be much more reliable and then no limits would be placed
on the
speed of the drawing. At present, an error results if there are 2
mousedowns within
about a half a sec -- this would not occur, if I bothered to change
things as you
indicate. Perhaps I shall seek to make this change.

I do not totally know how to do this at present, but it seems you do.
Perhaps
you could provide the code.

Tips help or email on this issue would be appreciated.

Regards, Larz

> >>>> For everyone's Desktop:http://tinyurl.com/aa3rqm(thislastpart is

> >>>> optional, because everyone can just go directly to the web page on
> >>>> the
> >>>> site if they want).
>
> >>>> On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
>
> >>>>> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> >>>>> idea.
>
> >>>>> lorlarz wrote:
>
> >>>>>> P.S. Made changes to zips, this morning.
>
> >>>>>> Newest version of shared JS/PHP/ajax whiteboard with many new
> >>>>>> features:
> >>>>>>http://mynichecomputing.org/fullDrawingKit.zip
> >>>>>> Saves and reloads products, allow drawing text (FF only)
> >>>>>> Had to stop errors when
> >>>>>> users made attempts to draw outside canvas.
>
> >>>>>> Old cross-platform version in roughDrawKit.zip also still exists.
> >>>>>> AND: I made an important update to the zip this morning.  Had to stop
> >>>>>> errors when
> >>>>>> users made attempts to draw outside canvas.
>

> >>>>>> Demo athttp://mynichecomputing.org/sharedDraw/istheversionin the

[lorlarz]

Regarding my last post: Here are my ideas on how it has to be done.

The basic considerations:

One must have an img element with a src that is the image to upload
(this is what is required by
the ajaxupload.3.2.js (http://valums.com/ajax-upload/ )
program piece, below. The people at
http://www.nihilogic.dk/labs/canvas2image/ offer the ability to
replace a canvas element
with an img element that contains the png that was the canvas
element (and you can
then easily swap it back to the canvas element when needed)

One must do a file upload via ajax. There is a program that use
jquery that does that: ajaxupload.3.2.js
from http://valums.com/ajax-upload/
This program feeds the image SELECTED (<- & there is the problem)
to the php file that
was the original target of the standard file upload element (which
is already on the page with the
drawing application for another reason)

All this, except swapping the img back to a canvas would take place on
clicking the done button.
Swapping the img back to the canvas only needs to occur when on takes
their next turn (right at
the beginning) -- but could be done earlier, if easier (callback
function after the upload could swap
the img child back to the canvas, for example)

Problem is the ajaxupload.3.2.js seems to need a NAME (and extension)
of the image and it's extension
rather than the image
itself, but this program also accepts a data element, but that is a
json object, so I doubt that will
help.

Well, there's where I am so far. Can anyone help? How about you,
Al? Sounds, like you already
might know how. Of course, at the end of each drawing, a person could
just manually save the
png of the canvas element (which has the name canvas.png) to the
desktop and then upload it.
Then when another takes a turn, uploading that to be the content of
the canvas they see could
be done -- all that, manually, can be done using the program (as
provided in the zip file) AS IS.

[lorlarz]

The "problem" I cite is really bogus, since the src property of any
image is a string -- one that
can be parsed into name and extension which is what the ajax upload
plugin needs to know
(the name w/ extension given to an image
made within a canvas element seems like it is canvas.png by default)

Thus, the last 2 posts, in outline, is how to do it. This should work
for Julien too
and for those actually using the processingjs 'languange' to
manipulate the canvas.

On Jun 6, 3:52 pm, lorlarz <lorl...@gmail.com> wrote:
> Regarding my last post:  Here are my ideas on how it has to be done.
>
> The basic considerations:
>
>   One must have an img element with a src that is the image to upload
> (this is what is required by
>        the ajaxupload.3.2.js  (http://valums.com/ajax-upload/)
> program piece, below.  The people at

>        http://www.nihilogic.dk/labs/canvas2image/offer the ability to

> replace a canvas element
>        with an img element that contains the png that was the canvas
> element (and you can
>        then easily swap it back to the canvas element when needed)
>
>   One must do a file upload via ajax.  There is a program that use
> jquery that does that: ajaxupload.3.2.js

>     fromhttp://valums.com/ajax-upload/

[lorlarz]

Actually, I just spent about an hour doing a better google search
and the canvas png can be save DIRECTLY from the canvas
element (via ajax and php) to an image file on one's web site.

So, all the complicated stuff I post over the last 2 days can be
ignored
and replace with: (in the code below, req is the XMLHttpRequest
object):

Saving canvas images with PHP (from http://canvaspaint.org/blog/2007/01/saving-images/
) (quoting):

I’ve been asked for the source of save.php, which handles saving an
image to the server.

In JavaScript, the data url of the canvas is posted to save.php over
AJAX.
(As an aside, this is the single usage of Ajax in CanvasPaint, so it
really
doesn’t deserve to be that prominent of a tag for the site on
del.icio.us…)

req.open("POST", "save.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
req.send("u="+canvas.toDataURL());

In PHP, base64_decode() does all the magic: [(this apparently is
pretty much
the whole php )]:

$dataurl = str_replace(" ", "+", $_POST["u"]);
$data = substr($dataurl, strpos($dataurl, “,”));

$file = fopen(”image.png”, “wb”);
fwrite($file, base64_decode($data));
fclose($file);

Add a couple of security checks (mimetype, data url length, evil
hax0ring attempts…)
and filename generation, and you’re done

(end quote)

On May 7, 9:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:

> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> idea.
>
>
>
>
>
> lorlarz wrote:
> > P.S. Made changes to zips, this morning.
>
> > Newest version of shared JS/PHP/ajax whiteboard with many new
> > features:
> >http://mynichecomputing.org/fullDrawingKit.zip
> > Saves and reloads products, allow drawing text (FF only)
> > Had to stop errors when
> > users made attempts to draw outside canvas.
>
> > Old cross-platform version in roughDrawKit.zip also still exists.
> > AND: I made an important update to the zip this morning.  Had to stop
> > errors when
> > users made attempts to draw outside canvas.
>

> > Demo athttp://mynichecomputing.org/sharedDraw/is the version in the

> > ------------------------------------------------------------------------

>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.21/2102 - Release Date: 05/07/09 05:57:00
>
> --

> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420

> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>- Hide quoted text -

[lorlarz]

IT WORKS!! Here is the new code of the new index.html and of the
new save.php (that code, shown at the bottom of that same web page):
(This is to replace the index.html you get via the
zip at the bottom of http://mynichecomputing.org/sharedDraw) :

http://mynichecomputing.org/theNewCode.htm

Great thing about this code is that all processingjs stuff can be
done on the canvas and since the way it works is that the png
which is "on the canvas" is just saved at the end of each
turn as a png on the site (so all the weird stuff you processingjs
folks do can be done, as part of this shared whiteboard).

Email me with any feedback which you might not want to
post to this group.

On Jun 7, 12:54 pm, lorlarz <lorl...@gmail.com> wrote:
> Actually, I just spent about an hour doing a better google search
> and the canvas png can be save DIRECTLY from the canvas
> element (via ajax and php) to an image file on one's web site.
>
> So, all the complicated stuff I post over the last 2 days can be
> ignored
> and replace with:  (in the code below, req is the XMLHttpRequest
> object):
>

> Saving canvas images with PHP (fromhttp://canvaspaint.org/blog/2007/01/saving-images/

> > > Demo athttp://mynichecomputing.org/sharedDraw/isthe version in the

[lorlarz]

Let me better edits some of my last post. The last
paragraph should have read:

"Great thing about this code is that all processingjs stuff can be

done on the canvas, since the way it works is that the png

which is "on the canvas" is just saved at the end of each

turn as a png on the site (I.E., all the weird stuff you processingjs

folks do can be done, as part of this shared whiteboard). "

On Jun 7, 9:47 pm, lorlarz <lorl...@gmail.com> wrote:
> IT WORKS!!   Here is the new code of the new index.html and of the
> new save.php (that code, shown at the bottom of that same web page):
>  (This is to replace the index.html you get via  the

> zip at the bottom ofhttp://mynichecomputing.org/sharedDraw) :

> > > > Demo athttp://mynichecomputing.org/sharedDraw/istheversion in the

[lorlarz]

The zip at http://mynichecomputing.org/fullDrawingKit.zip now
contains
both versions -- so you can have a copy of your own

> > > > > Demo athttp://mynichecomputing.org/sharedDraw/istheversionin the

> ...
>
> read more »- Hide quoted text -

[lorlarz]

Just a little more information on what is now available:

I have developed 3 versions of a JavaScript/PHP
(no-database) Shared Whiteboard, for 2 people to
take turns drawing on the same canvas (with
the same contents on that canvas for both, of
course -- at the end of each turn).

Version 1 is crude, where there has to be about
half a second between bouts of drawing during
any given person's turn. The other 2 versions have
NO SUCH limitation. And, the other 2 versions
allow for saving a drawing (done together) and
uploading it to the web folder and then, later
on (if desired), that image can be imported to the
canvas for continued markup/shared drawing. (ALSO,
any gif or jpg or png can be imported to the
canvas for the active pair of drawers to draw on --
allowing for other great educational opportunities).
Moreover, the 2 more advanced versions save the
product ONLY at the end of each turn (with NO
communication to the web server between bouts
of drawing by any given person). This results
in the new version allowing for extremely fast
and detailed drawing, with no worry about time
between "bouts" of drawing by a given drawer.
And, these versions are extremely reliable.

Also, the advanced versions allow for the "drawing
of text" (any you put in a certain textbox) to the
canvas AND allow for choosing among millions of
possible colors.

The most advanced version (betterDraw3.html) also
has tools for drawing precise rectangles and ovals
and for drawing rounded rectangles and perfectly
straight lines -- ALL of any size one needs.

All the versions simply are installed on any given
php-enabled site, by simply putting the contents
of the zip file in a folder on your web site.
The only other thing you might need to do (I didn't
on my site) is set some folder permissions.
That's it!! And you can have multiple instances of
the set of three programs -- just put each instance
in a separate folder on your site. (I have
provided one art teacher with 20 different instances,
so she can have 40 students having the great fun
of drawing in pairs.)

The entire FREE kit, with all three versions and all you
need is at:
http://mynichecomputing.org/fullDrawingKit.zip and
a sample of Version One can be seen at:
http://mynichecomputing.org/sharedDraw/ (I only make
the crude version public because the other versions
allow for uploading of images to my site.) Though
this is the crudest version, you can try it by opening
2 FIREFOX browsers to http://mynichecomputing.org/sharedDraw/
(the program is Firefox only). In the first textbox of
one of the browsers, type user1 and type user2 in the second
textbox. In the first textbox of the other browser instance,
type user2, with user1 typed in the second textbox.
This totally mimics two users remote from one another,
taking turns in a shared drawing session -- so is a good
test of the program (at least the crude version).
All versions have a link to simple directions -- WHICH
SHOULD BE READ.


All versions have EXTREMELY simple to install on your
own site, with the direction I already stated (above).

Regards,

Larz , webmaster of mynichecomputing.org

On Jun 8, 9:41 am, lorlarz <lorl...@gmail.com> wrote:
> The zip at  http://mynichecomputing.org/fullDrawingKit.zipnow

[lorlarz]

Realized that in a very real sense, the newer versions of the
shared whiteboard, which involves NO database, can
handle any number of sharers -- just 1 drawer at a time
(but what else would you want to do??):

http://mynichecomputing.org/sharedDraw/coolhack.htm

> a sample of Version One can be seen at:http://mynichecomputing.org/sharedDraw/(I only make

> the crude version public because the other versions
> allow for uploading of images to my site.) Though
> this is the crudest version, you can try it by opening

> 2 FIREFOX browsers tohttp://mynichecomputing.org/sharedDraw/

[shelly]

Interesting project...
Similar to something I'm working on but for sharing and manipulating
images.

I see your using jquery, have you considered using comet-d to push
changes one user makes to all users, that would I think eliminate the
need for a "take turns approach",

If user 1 and user 2 are editing a drawing, and user 2 tries to save,
user 1 is immeadiately notified of user's 2 action and isn't allowed
to save until user one is completed. There also could possibly be two
displays of the shared drawing, one is the shared view , which is
being dynamically updated as changes are made, the other is the
scratchPad where you are working on changes. That way user one gets
the opportunity to decide if they want the change from user 2 , and
updates their working copy. This is similar to how commerical
whiteboarding software works. I didn't see if you included any kind of
chat capability, but you may want to think about it.


Also PHP isn't really well suited for concurrent access, so you may
want to consider java, I know that would put a little bit more strain
on the users requirements but you would get better performance.
Everything I mentioned above is still somewhat possible in PHP.

Regardless this is a good effort you made here , wish you luck.

Here's a link to my project...

http://sol3.typepad.com/tagalong_developer_journa/2009/06/typical-imageshare-scenario.html

Diagram of tagalong

http://sol3.typepad.com/tagalong_developer_journa/2009/06/use-as-little-or-as-much-as-you-want.html

I intend to use Processing.js to show both force directed and treemap
views of the social graph so you can easily invites your friends on
tweeter, facebook, myspace and plaxo.

On May 7, 10:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> idea.
>
>
>
>
>
> lorlarz wrote:
> > P.S. Made changes to zips, this morning.
>
> > Newest version of shared JS/PHP/ajax whiteboard with many new
> > features:
> >http://mynichecomputing.org/fullDrawingKit.zip
> > Saves and reloads products, allow drawing text (FF only)
> > Had to stop errors when
> > users made attempts to draw outside canvas.
>
> > Old cross-platform version in roughDrawKit.zip also still exists.
> > AND: I made an important update to the zip this morning.  Had to stop
> > errors when
> > users made attempts to draw outside canvas.
>

> > Demo athttp://mynichecomputing.org/sharedDraw/is the version in the

> > ------------------------------------------------------------------------

>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.21/2102 - Release Date: 05/07/09 05:57:00
>
> --

> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420

> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>- Hide quoted text -

[Lorin Larson]

Good thing about not using push, is that people can take a _long_ time

between turns, if they want.  So, for example a client could draw on a

proposed design for a web site and you could view that feedback hours

later, if you wanted to .

 

There is already a way to have more than 2 users (see link at the bottom of

http://mynichecomputing.org/sharedDraw .  And, I am totally not interested

in more than one person drawing at exactly the same time.

 

Still, of course, your information and ideas are great for someone interested

in many simultaneous drawers and I am happy you brought them up.

[shelly]

Sounds, like you got the impression I was being derogotory of your
project, I'm not , I think its an excelent idea. I just noticed a lot
of discussions here on wanting to have more than 2 users and noticed
the time limit. I have been doing a lot of work lately with push and
just thought maybe you weren't aware of grizzly comet.

Anyway, keep up the good work. :-)

On May 7, 10:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:

> Hey Lolarz, just checked out your project. Great stuff. Very interesting
> idea.
>
>
>
>
>
> lorlarz wrote:
> > P.S. Made changes to zips, this morning.
>
> > Newest version of shared JS/PHP/ajax whiteboard with many new
> > features:
> >http://mynichecomputing.org/fullDrawingKit.zip
> > Saves and reloads products, allow drawing text (FF only)
> > Had to stop errors when
> > users made attempts to draw outside canvas.
>
> > Old cross-platform version in roughDrawKit.zip also still exists.
> > AND: I made an important update to the zip this morning.  Had to stop
> > errors when
> > users made attempts to draw outside canvas.
>

> > Demo athttp://mynichecomputing.org/sharedDraw/is the version in the

> > ------------------------------------------------------------------------

>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.0.238 / Virus Database: 270.12.21/2102 - Release Date: 05/07/09 05:57:00
>
> --

> *Alistair MacDonald <http://twitter.com/F1LT3R>*
> *Hyper-Metrix <http://hyper-metrix.com>*
> 617.584.1420

> hyper-metrix.com <http://hyper-metrix.com> <http://hyper-metrix.com>- Hide quoted text -

[lorlarz]

Shelly,

I apologize if I sounded defensive. You should notice, given
your interests, that I have outlined how there
can be more than 2 users -- only limit is: only one
drawer at a time (see link at the bottom of
http://mynichecomputing.org/sharedDraw (and also
know the you really have to get the zip with the
advanced versions, to know what I am talking about
there -- the zip for all versions is second to the last
link on that same app page).).

I do not know what you mean by "time limits" .
There are none of any sort with the advanced
versions (again, get them via the zip). (The only
reason I do not display the advanced versions is
because I do not want to allow the whole world to
be saving images on my site; the crude version
'open to the public' is very crude compared to the
advanced versions -- still the advanced versions use
no database and are just as easy to set up and use.)

On Jun 22, 9:38 am, shelly <canno...@comcast.net> wrote:
> Sounds, like you got the impression I was being derogotory of your
> project, I'm not , I think its an excelent idea. I just noticed a lot
> of discussions here on wanting to have  more than 2 users and noticed
> the time limit. I have been doing a  lot of work lately with push and
> just thought maybe you weren't aware of grizzly comet.
>
> Anyway, keep up the good work. :-)
>
> On May 7, 10:22 am, Al MacDonald <direc...@hyper-metrix.com> wrote:
>
>
>
> > Hey Lolarz, just checked out your project. Great stuff. Very interesting
> > idea.
>
> > lorlarz wrote:
> > > P.S. Made changes to zips, this morning.
>
> > > Newest version of shared JS/PHP/ajax whiteboard with many new
> > > features:
> > >http://mynichecomputing.org/fullDrawingKit.zip
> > > Saves and reloads products, allow drawing text (FF only)
> > > Had to stop errors when
> > > users made attempts to draw outside canvas.
>
> > > Old cross-platform version in roughDrawKit.zip also still exists.
> > > AND: I made an important update to the zip this morning.  Had to stop
> > > errors when
> > > users made attempts to draw outside canvas.
>

> > > Demo athttp://mynichecomputing.org/sharedDraw/isthe version in the