Drawing line using map coordinates

[Atif]

Hello all,
In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

Thanks and Regards
Atif

[Michael Winter]

Atif wrote:

Hello all,
In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As far as I know, JavaScript has no drawing capabilities. I would
imagine that the only way you can accomplish this is using a Java
applet, or some other multimedia object like Flash.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Jim Ley]

On Wed, 24 Dec 2003 15:10:26 GMT, Michael Winter
<M.******@blueyonder.co.invalid> wrote:

Atif wrote:

In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As far as I know, JavaScript has no drawing capabilities.

it has no capability to do anything at really...

but javascript in SVG, or Flash, or with VML or VRML or
DirectAnimation all have great drawing abilities. I'd recommend SVG
myself.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Dr John Stockton]

JRS: In article <C%*********************@news-text.cableinet.net>, seen
in news:comp.lang.javascript, Michael Winter <M.******@blueyonder.co.inv
alid> posted at Wed, 24 Dec 2003 15:10:26 :-

Atif wrote:

In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As far as I know, JavaScript has no drawing capabilities. I would
imagine that the only way you can accomplish this is using a Java
applet, or some other multimedia object like Flash.

As a Rather Desperate Move, is it possible to take a graphic of a line,
say a black diagonal on a transparent 800*600 area, and scale & position
it over the existing image? Such a line, in a suitable graphical
format, should not need a large file. Several, of different sizes,
would be needed in order that the line-width would not scale into
invisibility.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[HikksNotAtHome]

In article <PH**************@merlyn.demon.co.uk>, Dr John Stockton
<sp**@merlyn.demon.co.uk> writes:

JRS: In article <C%*********************@news-text.cableinet.net>, seen
in news:comp.lang.javascript, Michael Winter <M.******@blueyonder.co.inv
alid> posted at Wed, 24 Dec 2003 15:10:26 :-

Atif wrote:

In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As far as I know, JavaScript has no drawing capabilities. I would
imagine that the only way you can accomplish this is using a Java
applet, or some other multimedia object like Flash.

As a Rather Desperate Move, is it possible to take a graphic of a line,
say a black diagonal on a transparent 800*600 area, and scale & position
it over the existing image? Such a line, in a suitable graphical
format, should not need a large file. Several, of different sizes,
would be needed in order that the line-width would not scale into
invisibility.

<URL: http://members.aol.com/_ht_a/hikksno...hit/index.html />

Is a page that I made a while back that does about what the OP wanted. It uses
divs and a 1x1 image and moves them between the points to create the line. That
one is 400 pixels wide and when it gets larger, it gets slower. Wouldn't be
hard to adapt it to work in IE4 as well, I know it works in IE5+, NS6+ and
Opera.

--
Randy

[DU]

Atif wrote:

Hello all,
In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

Thanks and Regards
Atif

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

DU

[Lasse Reichstein Nielsen]

DU <dr*******@hotWIPETHISmail.com> writes:

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Which browsers support SVG?

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Jim Ley]

On Thu, 25 Dec 2003 12:36:10 +0100, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:

DU <dr*******@hotWIPETHISmail.com> writes:

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Which browsers support SVG?

There's no browsers with good native support other than X-Smiles, but
with that not having any HTML capability... (Mozilla's SVG has good
support for some parts, and Konq in KDE 3.2 ships with KSVG, but it
doesn't do mixed namespace stuff.)

Mainly it's plugin based such as Adobe SVG Viewer, for Mac/Win/Linux ,
or Corel's SVG Viewer for Windows. There are also X-Smiles and DENG
of the XML family, but they're a bit impractical for proper users.

There's also Batik's Squiggle an excellent standalone java browser.

Most people will have ASV 3, normally you would include it in a page
with IFRAME or OBJECT, and script it internally.

Safari, Opera, IE, Gecko family on Win/Mac all go okay with asv3
(although you'll need the 3.01 ASV release for Gecko family), on Linux
the 3.01 release will give you Konqi and Gecko support, although there
are some limitations - no sound for example - there's no non-GPL
common sound library on linux I believe.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Jim Ley]

On Thu, 25 Dec 2003 12:36:10 +0100, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:

DU <dr*******@hotWIPETHISmail.com> writes:

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Which browsers support SVG?

http://jibbering.com/svg/whiteboard/
and
http://jibbering.com/svg/AnnotateImage.html

are examples which roughly do what the OP wants aswell.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Dr John Stockton]

JRS: In article <bs**********@news.eusc.inter.net>, seen in
news:comp.lang.javascript, DU <dr*******@hotWIPETHISmail.com> posted at
Wed, 24 Dec 2003 21:48:37 :-

Atif wrote:

In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Such a recommendation is better accompanied by an indication of where to
seek more information, and what is required to run SVG.

I have no recollection of the term, and suspect that SVG may not be
available to me.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

[DU]

Dr John Stockton wrote:

JRS: In article <bs**********@news.eusc.inter.net>, seen in
news:comp.lang.javascript, DU <dr*******@hotWIPETHISmail.com> posted at
Wed, 24 Dec 2003 21:48:37 :-

Atif wrote:

In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Such a recommendation is better accompanied by an indication of where to
seek more information, and what is required to run SVG.

Google.com, searching for svg newsgroups, etc... was a start. I was in
no way preventing the original poster to ask back for more clues, hints,
etc. on how to achieve what he wants with SVG. My post was not imposing
any implicit constraint.

FWIW, the Adobe SVG plugin is a good place to start. As mentioned by Jim
L., Mozilla can now make use of the Adobe SVG plugin (this is very
recent news: http://bugzilla.mozilla.org/show_bug.cgi?id=133567#c67 ).

http://www.adobe.com/svg/viewer/install/

DU
I have no recollection of the term, and suspect that SVG may not be
available to me.

[DU]

DU wrote:

As mentioned by Jim

L., Mozilla can now make use of the Adobe SVG plugin (this is very
recent news: http://bugzilla.mozilla.org/show_bug.cgi?id=133567#c67 ).

I may have spoken too soon. Adobe SVG plugin 3.01 won't work for
Gecko-based browsers on Windows. The news is that a beta version of the
plugin may work for RedHat Linux users instead.

DU

[DU]

Jim Ley wrote:

[snipped]

Safari, Opera, IE, Gecko family on Win/Mac all go okay with asv3
(although you'll need the 3.01 ASV release for Gecko family),
Are you sure about this? I'm using a recent build of Mozilla 1.7alpha
and downloaded and installed ASV 3.01

Also, no mention of ASV 3.01 at
http://plugindoc.mozdev.org/windows.html

As I understand it, ASV 3.01 is just a security release.

DU

on Linux the 3.01 release will give you Konqi and Gecko support, although there
are some limitations - no sound for example - there's no non-GPL
common sound library on linux I believe.

Jim.

[Jim Ley]

On Thu, 25 Dec 2003 14:18:22 -0500, DU <dr*******@hotWIPETHISmail.com>
wrote:

Jim Ley wrote:

[snipped]

Safari, Opera, IE, Gecko family on Win/Mac all go okay with asv3
(although you'll need the 3.01 ASV release for Gecko family),

Are you sure about this? I'm using a recent build of Mozilla 1.7alpha
and downloaded and installed ASV 3.01

I certainly believe so, 6preview certainly works with it and I'd heard
reports that 3.01 does to, it doesn't install itself so you need to do
it manually. I understood the fix which stopped it working in Mozilla
post 0.9.something also got rolled into into the recent release. ASV6
then if I'm wrong.

Jim.

--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Kien]

I use mulitple dots to draw lines
like these graphs:
http://www.caoxuan.com/cxk/webart/go...hs/graph1.html

Kien
Dr John Stockton <sp**@merlyn.demon.co.uk> wrote in message news:<AU**************@merlyn.demon.co.uk>...

JRS: In article <bs**********@news.eusc.inter.net>, seen in
news:comp.lang.javascript, DU <dr*******@hotWIPETHISmail.com> posted at
Wed, 24 Dec 2003 21:48:37 :-

Atif wrote:

In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Such a recommendation is better accompanied by an indication of where to
seek more information, and what is required to run SVG.

I have no recollection of the term, and suspect that SVG may not be
available to me.

[Kien]

Try this DHTML. Very crude but I hope it gives you some lead
http://www.caoxuan.com/cxk/webart/go...pes/index.html

Kien

at**@kics.edu.pk (Atif) wrote in message news:<6a**************************@posting.google. com>...

Hello all,
In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

Thanks and Regards
Atif

[cwdjr]

If you can write a mathematical expression for a curve, you can usualy
use JS to either display the selected path or move an object along it.
The secret is that JS can write both css and html. An example is at
http://www.cwdjr.net/dhtml/cuckoo.html . The curtain is built up of
hundreds of narrow vertical lines. The background-color of each
division is calculated as a function of x to produce the fold effect
in the curtain. It is most convenient to work using (r,g,b) for this.
For most computers a division must have some content to avoid
distortion. A single period of 1 px size and about the same color as
the background color usually works well enough. You can then use
visibility to hide each of the curtain divisions in sequence to open
the curtain. The circle is produced in much the same way, with the
vertical strips making up the circle starting and ending on the locus
of the circle. It is convenient to use polar coordinates for this.
Another example is at http://www.cwdjr.net/geometric/curve_write.html
.. Here some typical curves from analytical geometry are drawn. The
code to do these things usually is not very long. You just use a few
loops to generate the hundreds of document.write statements to create
all of the small divisions. The code for the first cuckoo sample is
very extreme. It validates as W3C xhtml 1.1. And how can that be, if
it has no style sheet? Even the general style sheet is written using
JS and document.write. But what does the W3C css validator think? It
is satisfied. It finds no style sheet, but does not detect any illegal
use of bgcolor, text, etc. in the code. In fact this page is nearly
all JS. The one body statment is just a dummy, that does nothing
useful, to keep the W3C xhtml 1.1 validator from complaining about no
body content detected. At lower levels of html, you often can get away
with writing the body statement itself with JS. One of the free hosts
once was using detection of the body statement to indicate that the
file was an html page suitable for their pop up ads. Some hackers
found they could defeat the ads by using a document.write to write the
body statement with "bo" and "dy" being combined in the document.write
so there was no free "body" to view. Another approach that will allow
you to do some drawing is SMIL. SMIL, the last I heard, is still not
official, but it seems to be in the final stages at the W3C. The IE6
will handle part of SMIL, but their code works only on IE6 - surprise,
surprise. Real has been a strong supporter of SMIL and their Real One
player supports most of the SMIL that the W3C has considered. It is
fun to play with. Real has a huge amount of information on SMIL, but
it takes considerable time to digest.

[Jim Ley]

On 25 Dec 2003 20:16:14 -0800, cw******@yahoo.com (cwdjr) wrote:

Another approach that will allow
you to do some drawing is SMIL. SMIL, the last I heard, is still not
official, but it seems to be in the final stages at the W3C.

SMIL 2.0 has been a REC since 2001.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

[Mark Szlazak]

at**@kics.edu.pk (Atif) wrote in message news:<6a**************************@posting.google. com>...

Hello all,
In my html page I want to add an image say of 800x600. Now I want that
when ever I am given two coordinates on this image say (x1, y1)=(50,
100) and (x2, y2)=(200, 300), the java script code will trace these
coordinates on the image and draw the line between these two points.
Can anyone please help me in writing the javascript code of this
problem?

Thanks and Regards
Atif

OP, some posts have given a basic JavaScript only way to draw lines of
any orientation by arranging many small colored layers in a straight
line. Slow but speed may not matter.

Another way that I haven't tried but maybe faster is to have gif's of
full lines each with transparent backgrounds and of different
orientation, say every 1 or 2 degrees. These gif's could all be in one
layer. That one layer could then be scaled, moved, and the gif with
the correct orientation shown. I have a page that works in IE and NN4
that does most of this except the scaling for a different effect,
rotating a pool cue based on mouse cursor position, but the ideas are
similar.

http://groups.google.com/groups?hl=e...com%26rnum%3D3

An alternative to many separate gif's is one large gif that has many
images of the line in different orientations arranged in rows and
columns. In this case you would also need to clip this large gif to
the appropriate image after scaling and move it to the correct
coordinates.

Maybe these alternatives provide better ways to do lines than
arranging many small individual colored layer squares.

[Dr John Stockton]

JRS: In article <bs**********@news.eusc.inter.net>, seen in
news:comp.lang.javascript, DU <dr*******@hotWIPETHISmail.com> posted at
Thu, 25 Dec 2003 13:07:09 :-

Dr John Stockton wrote:

JRS: In article <bs**********@news.eusc.inter.net>, seen in
news:comp.lang.javascript, DU <dr*******@hotWIPETHISmail.com> posted at
Wed, 24 Dec 2003 21:48:37 :-

As others mentioned, this is best done with SVG. SVG has all the
capabilities and more (much more) to satisfy your requirements.

Such a recommendation is better accompanied by an indication of where to
seek more information, and what is required to run SVG.

Google.com, searching for svg newsgroups, etc... was a start. I was in
no way preventing the original poster to ask back for more clues, hints,
etc. on how to achieve what he wants with SVG. My post was not imposing
any implicit constraint.

This is a Usenet newsgroup. Many read it off-line, and do not have
immediate access to Google. Authors should endeavour to make their
pages understandable to such readers.

This is a javascript newsgroup, and the default assumption in it is that
the javascript is being used on Web pages, and is being run on a Web
browser in its default state. If the technique recommended needs more
than that, an explanation is called for; though it need only be brief.

I have no recollection of the term, and suspect that SVG may not be
available to me.

Responses should go after quoted material; see FAQ etc.
For me, <URL: http://members.aol.com/_ht_a/hikksno.../graphit/index.
html/> draws a blue rectangle on a white background, eventually. It
shows not a word of explanation.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.