PHP online drawing program

[Remon Huijts]

Hi there,

For a very specific service, I have created a PHP script that uses the GD
library functions to create a PNG image from a few lines of XML data
describing a simple diagram/drawing. It's cool and works, writing the XML
data in a text editor is straightforward for me because I designed the
format. I have no idea however how I can make a simple online drawing
program that creates this XML code. The code is realy simple, just storing
things like the start and end coordinates of a line and its color. The
program however should be as intuitive as any simple drawing program: you
should see a line preview while you drag the end point after clicking
created a start point. Multiple undo, several colors, text, rectangle and
circle drawing are pretty much all the requirements.

Can I create such a program using just PHP? Any thoughts on how to make
those live line previews?
Or should I reach for other techniques like JavaScript or Java. Any other
suggestion that works well together with PHP and MySQL? I am still in the
dark here, so any hint or link to a somehow related tutorial is very much
appreciated.

Thanks in advance!
Remon Huijts.

[Andy Hassall]

On Sun, 14 Dec 2003 21:17:05 +0100, "Remon Huijts" <tr*****@hotmail.com> wrote:

For a very specific service, I have created a PHP script that uses the GD
library functions to create a PNG image from a few lines of XML data
describing a simple diagram/drawing. It's cool and works, writing the XML
data in a text editor is straightforward for me because I designed the
format. I have no idea however how I can make a simple online drawing
program that creates this XML code. The code is realy simple, just storing
things like the start and end coordinates of a line and its color. The
program however should be as intuitive as any simple drawing program: you
should see a line preview while you drag the end point after clicking
created a start point. Multiple undo, several colors, text, rectangle and
circle drawing are pretty much all the requirements.

Can I create such a program using just PHP? Any thoughts on how to make
those live line previews?
No, because you're asking for actions to be taken in response to client
actions (i.e. moving a mouse). PHP can only react to page requests.
Or should I reach for other techniques like JavaScript or Java. Any other
suggestion that works well together with PHP and MySQL? I am still in the
dark here, so any hint or link to a somehow related tutorial is very much
appreciated.

A Java applet would probably be most suited? Doing this in JavaScript would
probably be possible, but awkward.

--
Andy Hassall (an**@andyh.co.uk) icq(5747695) (http://www.andyh.co.uk)
Space: disk usage analysis tool (http://www.andyhsoftware.co.uk/space)

[Remon Huijts]

"Andy Hassall" <an**@andyh.co.uk> schreef in bericht
news:44********************************@4ax.com...

No, because you're asking for actions to be taken in response to client
actions (i.e. moving a mouse). PHP can only react to page requests.

A Java applet would probably be most suited? Doing this in JavaScript would probably be possible, but awkward.

Too bad, I was afraid of that, because my Java knowledge is still limited.
What is the best way for my future Java drawing applet to save the drawings?
The resulting drawing should be editable later, with the same applet, so I
guess drawing information has to be stored in a vector or object oriented
way, not as a bitmap. Right now my drawings are saved as simple XML data
describing the shapes, coordinates and colors, but perhaps other solutions
work better with applets?

Remon Huijts.

[Jedi121]

"Remon Huijts" a écrit le 15/12/2003 :

Too bad, I was afraid of that, because my Java knowledge is still limited.
What is the best way for my future Java drawing applet to save the drawings?
The resulting drawing should be editable later, with the same applet, so I
guess drawing information has to be stored in a vector or object oriented
way, not as a bitmap. Right now my drawings are saved as simple XML data
describing the shapes, coordinates and colors, but perhaps other solutions
work better with applets?

Remon Huijts.

May be you should consider another structure to answer the client
needs. Actually not everything can be done via PHP or a Web Client. It
is a well known problem, PHP is 'in' nowadays but that doesn't mean you
could do everything with it.
Maybe completely different solution could be better for your needs
(like a separate application for this drawing need).

Keep asking questions, ask other people around you about possible
solutions even strange and choose then.
Good luck to you,
Ben.

--
Have you read the manual?
http://www.php.net/manual/en/

[Christian Fersch]

You could of course do this with javascript, but it would be very evil and devil himself would rub his hands seeing you writing such a evil thing ;)

In such a case, i would suggest flash - it is faster, smaller, better-looking and easier to writee than a Java Applet.
--
mfg Christian (Chronial "at" web.de)

--
Composed with Newz Crawler 1.5 http://www.newzcrawler.com/

[Andy Hassall]

On Mon, 15 Dec 2003 20:11:10 +0100, "Remon Huijts" <tr*****@hotmail.com> wrote:

"Andy Hassall" <an**@andyh.co.uk> schreef in bericht
news:44********************************@4ax.com.. .

No, because you're asking for actions to be taken in response to client
actions (i.e. moving a mouse). PHP can only react to page requests.

A Java applet would probably be most suited? Doing this in JavaScript
would probably be possible, but awkward.

Too bad, I was afraid of that, because my Java knowledge is still limited.
What is the best way for my future Java drawing applet to save the drawings?
The resulting drawing should be editable later, with the same applet, so I
guess drawing information has to be stored in a vector or object oriented
way, not as a bitmap. Right now my drawings are saved as simple XML data
describing the shapes, coordinates and colors, but perhaps other solutions
work better with applets?

Getting the applet to POST an XML format document back to the PHP script
sounds like a reasonable way to approach it. There's always SVG if you want to
move to a 'standardised' format.

--
Andy Hassall (an**@andyh.co.uk) icq(5747695) (http://www.andyh.co.uk)
Space: disk usage analysis tool (http://www.andyhsoftware.co.uk/space)

[Shawn Wilson]

Remon Huijts wrote:

Hi there,

For a very specific service, I have created a PHP script that uses the GD
library functions to create a PNG image from a few lines of XML data
describing a simple diagram/drawing. It's cool and works, writing the XML
data in a text editor is straightforward for me because I designed the
format. I have no idea however how I can make a simple online drawing
program that creates this XML code. The code is realy simple, just storing
things like the start and end coordinates of a line and its color. The
program however should be as intuitive as any simple drawing program: you
should see a line preview while you drag the end point after clicking
created a start point. Multiple undo, several colors, text, rectangle and
circle drawing are pretty much all the requirements.

Can I create such a program using just PHP? Any thoughts on how to make
those live line previews?
Or should I reach for other techniques like JavaScript or Java. Any other
suggestion that works well together with PHP and MySQL? I am still in the
dark here, so any hint or link to a somehow related tutorial is very much
appreciated.

The only thing you couldn't do in PHP/HTML/Javascript is the live line preview.
If you decide you don't need the line preview, you could use a server-side image
map to get your coordinates (ie. the coords of the line to start or the center
of a circle, etc.).

You may also want to consider Flash. It's built-in language (Actionscript) is
pretty good now - you can control almost all aspects of a Flash movie
programatically. You could store your commands in an array and have a "Finish
Button". When that button is pressed it could send the array to your existing
script. This would require creating a whole new script in Actionscript,
though. And the resulting PNG wouldn't look as good as the Flash.

I don't know much about Java, but I imagine you could use that as well.

Regards,
Shawn
--
Shawn Wilson
sh***@glassgiant.com
http://www.glassgiant.com

[Remon Huijts]

"Christian Fersch" <Fr********@web.de> schreef in bericht
news:br*************@news.t-online.com...

You could of course do this with javascript, but it would be very evil and devil himself would rub his hands seeing you writing such a evil thing ;)

Ghehe, I thought about JavaScript the same way. I saw some very evil
scripts, creating a table cel, div or layer for every pixel. Very dynamic
indeed, but so is the devil. Nevertheless I found some interesting
JavaScript ideas here:
http://www.sru.edu/depts/cisba/comps.../drawlines.htm
In such a case, i would suggest flash - it is faster, smaller,

better-looking and easier to writee than a Java Applet.

Sigh. I know little about Java, but approximately nothing about Flash. Some
newbie questions (if you allow me to post them in this PHP newsgroup):
- Can I have the "line preview while you drag" in a Flash thingie?
- Can a Flash thingie save/output the collected data in a re-editable
format?

Remon Huijts.

[Remon Huijts]

"Shawn Wilson" <sh***@glassgiant.com> schreef in bericht
news:3F***************@glassgiant.com...

You may also want to consider Flash. It's built-in language (Actionscript) is pretty good now - you can control almost all aspects of a Flash movie
programatically. You could store your commands in an array and have a "Finish Button". When that button is pressed it could send the array to your existing script. This would require creating a whole new script in Actionscript,
though. And the resulting PNG wouldn't look as good as the Flash.

You say "the resulting PNG", but can the ActionScript output the final
result in another format that is suitable for re-editing? If for instance I
draw some lines and elipses, but a month later I realize there is one line
too much and a rectangle should be partially behind the elipse, are these
changes possible with ActionScript? Or another way of asking: can
ActionScript read such data?

Remon Huijts.

[Remon Huijts]

"Jedi121" <je*********@free.fr.Removethis> schreef in bericht
news:me********************************@free.fr.Re movethis...

May be you should consider another structure to answer the client
needs. Actually not everything can be done via PHP or a Web Client. It
is a well known problem, PHP is 'in' nowadays but that doesn't mean you
could do everything with it.
Maybe completely different solution could be better for your needs
(like a separate application for this drawing need).

Yes I have been considering other solutions, that's why I posted my
question, to ask people what solutions they see fit for my problem. And a
Java applet would be such a separate application as you suggested.

So far I have read these suggestions:
- JavaScript
- Java applet
- Flash / ActionScript

Anyone suggestions or remarks on SVG or MS VML?

Remon Huijts.

[Christian Fersch]

> http://www.sru.edu/depts/cisba/comps.../drawlines.htm

nice, but (I can see devil grining right now) of course works only in Ie.

Sigh. I know little about Java, but approximately nothing about Flash. Some
newbie questions (if you allow me to post them in this PHP newsgroup):
- Can I have the "line preview while you drag" in a Flash thingie? of course - in flash you can do as good as anything. You can even have your preview with size and color.
- Can a Flash thingie save/output the collected data in a re-editable
format?

In every format you like. Just format it with flash (not a problem at all - actionscript is very easy) and send it to your script via POST.
--
mfg Christian (Chronial "at" web.de)

--
Composed with Newz Crawler 1.5 http://www.newzcrawler.com/

[Christian Fersch]

> Or another way of asking: can ActionScript read such data?

ActionScript is a scripting language with a lot of features - it can read everything you can imagine.
--
mfg Christian (Chronial "at" web.de)

--
Composed with Newz Crawler 1.5 http://www.newzcrawler.com/

[Remon Huijts]

"Christian Fersch" <Fr********@web.de> schreef

- Can I have the "line preview while you drag" in a Flash thingie?

of course - in flash you can do as good as anything. You can even have

your preview with size and color.

- Can a Flash thingie save/output the collected data in a re-editable
format?

In every format you like. Just format it with flash (not a problem at

all - actionscript is very easy) and send it to your script via POST.

Or another way of asking: can ActionScript read such data?

ActionScript is a scripting language with a lot of features - it can read

everything you can imagine.

Flash is Heaven! Well that might be a bit exaggerated, but it sure sounds
promising. I will look for some good crash courses Flash/ActionScript on the
internet soon. Thanks for your advise!

Remon Huijts.

[Shawn Wilson]

Remon Huijts wrote:

"Shawn Wilson" <sh***@glassgiant.com> schreef in bericht
news:3F***************@glassgiant.com...

You may also want to consider Flash. It's built-in language

(Actionscript) is

pretty good now - you can control almost all aspects of a Flash movie
programatically. You could store your commands in an array and have a

"Finish

Button". When that button is pressed it could send the array to your

existing

script. This would require creating a whole new script in Actionscript,
though. And the resulting PNG wouldn't look as good as the Flash.

You say "the resulting PNG", but can the ActionScript output the final
result in another format that is suitable for re-editing? If for instance I
draw some lines and elipses, but a month later I realize there is one line
too much and a rectangle should be partially behind the elipse, are these
changes possible with ActionScript? Or another way of asking: can
ActionScript read such data?

I was suggesting that you have, essentially, 2 copies of the code - your
existing one using XML/PHP and one in Flash. You would code Actionscript to
understand your XML data, and create a mock-up of the "image" in Flash (the
actual PNG image would be created by your existing script. It would not be
editable by either the Flash or PHP scripts). You could have Flash talk to a
PHP script that could store the instructions for creating the image. If you
needed to redo an image, have Flash ask the PHP script for the instructions
again and recreate it, or just recreate the first n steps, then allow the user
to modify it from there.

Actionscript is a legit programming language now. It has it's drawbacks, but I
don't see anything in your requirements that it couldn't do. I'm talking about
Flash MX or newer. Flash 4 wouldn't do it. I'm not sure if 5 would work or not
- I skipped that version.

Regards,
Shawn
--
Shawn Wilson
sh***@glassgiant.com
http://www.glassgiant.com

[Remon Huijts]

"Christian Fersch" <Fr********@web.de> schreef in bericht
news:br************@news.t-online.com...

- Can I have the "line preview while you drag" in a Flash thingie?

of course - in flash you can do as good as anything. You can even have

your preview with size and color.

- Can a Flash thingie save/output the collected data in a re-editable
format?

In every format you like. Just format it with flash (not a problem at

all - actionscript is very easy) and send it to your script via POST.

After some reading on SVG (never heard of it before), I discovered the
following:
- It's a vector graphics format, like Flash
- It can be animated, like Flash
- It can be interactive, like Flash

Eventhough I have just as much experience with Flash as with SVG (i.e.
none), I guessed that Flash would be a better choice because the Adobe SVG
Viewer is a big download and many people can already view Flash in their
browser. But then I found out the following about SVG:
- It's open source and free, Flash costs $$
- It's an XML file and easily created on the fly, Flash is binary and not
suitable for online re-editing
- It's a W3C standard, Flash is proprietary software
- It's programmable with ECMAScript (JavaScript), Flash has it's own
scripting language ActionScript
- It's said to be technically superior to Flash...

Note that it is not my aim to tell the billions of Flash users to throw away
their popular tool. I'm sure you can find SVG people who can do that better
than me and even more Flash users willing to scream back.
To me, not being "burdened" by any prior knowledge, SVG seems the best thing
for my particular problem. But I would not have known what SVG can do if you
guys didn't tell me about all the wonderful things Flash can do.

Remon Huijts.

[Remon Huijts]

"Shawn Wilson" <sh***@glassgiant.com> schreef in bericht
news:3F***************@glassgiant.com...

I was suggesting that you have, essentially, 2 copies of the code - your
existing one using XML/PHP and one in Flash. You would code Actionscript to understand your XML data, and create a mock-up of the "image" in Flash (the actual PNG image would be created by your existing script. It would not be editable by either the Flash or PHP scripts). You could have Flash talk to a PHP script that could store the instructions for creating the image. If you needed to redo an image, have Flash ask the PHP script for the instructions again and recreate it, or just recreate the first n steps, then allow the user to modify it from there.

Actionscript is a legit programming language now. It has it's drawbacks, but I don't see anything in your requirements that it couldn't do. I'm talking about Flash MX or newer. Flash 4 wouldn't do it. I'm not sure if 5 would work or not - I skipped that version.

Recently I have learnt that SVG can do the same things as Flash, but has an
XML file format. This would eliminate one of the three image representations
to use (Flash, XML, PNG).

Remon Huijts.