473,246 Members | 1,530 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 software developers and data experts.

Drawing line using map coordinates

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
Jul 20 '05 #1
19 4749
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)

Jul 20 '05 #2
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/

Jul 20 '05 #3
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.
Jul 20 '05 #4
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
Jul 20 '05 #5
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
Jul 20 '05 #6
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.'
Jul 20 '05 #7
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/

Jul 20 '05 #8
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/

Jul 20 '05 #9
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.
Jul 20 '05 #10
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.

Jul 20 '05 #11
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
Jul 20 '05 #12
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.

Jul 20 '05 #13
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/

Jul 20 '05 #14
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.

Jul 20 '05 #15
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

Jul 20 '05 #16
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.
Jul 20 '05 #17
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/

Jul 20 '05 #18
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.
Jul 20 '05 #19
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.
Jul 20 '05 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: Remon Huijts | last post by:
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...
6
by: johannblake | last post by:
I am wondering whether it is easy to setup a coordinate system for drawing (using GDI+) that uses meters (or any custom scaling for that matter). Currently, I need to convert from pixels to meters...
2
by: Martin Horn | last post by:
Hi all, I'm adding basic drawing capability to an application that I am writing, and I have been having problems with making the graphics output persist when the application is re-sized,covered...
4
debasisdas
by: debasisdas | last post by:
This article contains the basic syntax to draw graphics of various shapes and sizes in Visual Basic 6.0. Different types of geometrical shapes (rectangle, square, circle, arc, ellipse etc.) can be...
2
by: CyberSoftHari | last post by:
I am drawing a line for X, Y Z coordinates and I want to display lines in color. How can in draw? Below code display only white line. // Variables VertexPositionColor pointList; //Init Points...
0
by: emilnordiclake | last post by:
(C#, Microsoft .NET Framework 3.5) Hello! I'm in the process of creating a custom text control and I want to add functionality for superscripts and subscripts. I'm using TextRenderer for...
5
by: Macias | last post by:
Hi, Please help me, how I can make a line drawing on PictureBox similar to MS paint. I thinking about this: click and hold button, move mouse and relase button. I'm trying useing this...
5
by: Dave Bootsma | last post by:
I have an application where I want to redraw a polygon from points I retrieve from a file. The file is read with streamreader line by line each line contains the points for each polygon. Below is...
7
by: raylopez99 | last post by:
I have a logical drawing space much bigger than the viewport (the screen) and I'd like to center the viewport (the screen) to be at the center of the logical drawing space. After following the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.