Drawing lines on webpage 1

[Madere]

Hi,

I am busy with displaing genealogy information on a webpage.
I do not want to show it as normal statistics but the same as it is shown in the programmes itself.
This means I have to draw horizontal and vertical lines and maybe also boxes.
I wonder if this is possible with HTML and so how to do this. I have seen it once on a webpage but I can not find it anymore.
If anyone knows how to do this, please let me know.
I have no idea how to achive this myself.
Regards,
Madere.

 

[EdwardMartinIII]

Madere,

There isn't a simple way to draw for an online page the same way you would draw in, say, Word, by grabbing a line object and dragging across the screen.

However, this means you have lots of different options available.

The simplest one is to build your diagram in another application, such as Word or PageMaker or Acrobat and save it as a PDF.

Speaking of Word, you can build your document using Word and export it as a web page. The code's messy as hell, but that won't matter to you -- it'll have all the pieces you wanted.

Cheers,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[Madere]

Edward,

thanks for the reply.
But I want to create the lines dynamicly. When creating it from Word or whatever it is static.
So in fact I want to use ASP to do this, because I have a MsAccess database. I do not know in advance how many horizontal or vertical lines need to be drawn.
But to be able to do this in ASP, I need to know how to do it it HTML.
That is why I posted this question here in this forum and not HTML.
Regards,
Madere.

 

[StuckInTheMiddle]

Madere,

It sounds like what you want is a TREE VIEW control, that would allow you to build up your list with relationships and display the results in html dynamically.


Microsoft has an article on how to achieve this with Dynamic HTML

http://www.microsoft.com/mind/0799/htmltree/htmltree.asp

Also several 3rd party companies offer Treeview controls to allow you to do this with minimal programming effort, im not going to go into the list here, but do a google search for asp.net treeview controls and you'll be offered an abundance of choices.

Hope this points in the right direction

S.


(The more ASP.NET I do, the more Javascript I find myself using)

 

[EdwardMartinIII]

Madere,

Ah, dynamic drawing.

Well, clearly that's going to be problematic using just HTML.

I suppose you could use ASP (check the ASP forums).

If I had to have an online drawing program, however, I'd immediately start hunting for Java applets which I can simply embed into the HTML page. HTML doesn't allow much in the way of interactivity and when that interactivity is in the form of graphics, then you're really getting limited by your tools.

http://www-sphys.unil.ch/escher/

has a neato drawing applet, although that might not be exactly what you're looking for. Still, it's a good example of the sort of thing you can embed.

http://www.cis.upenn.edu/~josephr/Treefig/

might be helpful if you're an under-the-hood kinda' person.

There are lots more -- just hit Google with Java Drawing Tools and sniff away!

Cheers,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[Madere]

Edward,

to my understanding ASP does not have functions to draw lines. But I already mentioned in my 1e reply that I want to use ASP afterall. But I need to know how to do it in (D)HTML.
In fact I have a ODBC connectionless MsAccess database displayed on the net using ASP (see

http://familie.dereuver.net).

I do NOT want to use ODBC. According to me Java and Java applets require ODBC/JDBC. This can be done without ODBC but then you have to pay money, which I do not want. So to me Java and JDBC does not look like an option.
But I have to say that the second link you mention shows what I am looking for, except not from within Java but ASP.

As mentioned earlier, I have a genealogy database to show on the internet dynamicly in the way showed in the second link of Edward (

http://www.cis.upenn.edu/~josephr/Treefig/).

Each time someone clicks on a name, the "tree" needs to be rebuild from the database ==> dynamic.

So if anyone knows how to do this in (D)HTML or ASP, please let me know.

Madere.

 

[CliveC]

Maybe I am missing something but I think that all you need is to place any data within a table with a border of one.

<table border=&quot;1&quot;>
<tr><td>YOUR DATA</td></tr>
</table>

You can do horizontal or vertical lines using ascii characters between the <pre> tags.

Clive

http://tubularity.com

 

[EdwardMartinIII]

Madere,

If I understand you right, you have a database with this information on your server. You want to present this information to the client. If the client clicks (for example on an &quot;expand relationship&quot; icon) on the image, you want it to go back to the server and display new information, in accordance with the clicking?

It seems that the solution to this problem is going to lie in building a server application that makes web pages. Perl is a good example of this. The application builds them according to a formula you program. You're not talking about a complete wild-and-crazy drawing program -- you're talking about using a small number of building blocks to corm complicated trees.

If this is the case, it's going to require some serious work on your part to determine the actions and cases and layouts. Then you figure out the rules for what to display when. Then you program them into your server application.

This can all be done using clean HTML on the client side because all the thinking is done on the server side using your favorite CGI tool (Perl, C, .net, whatever).

This results in regular hits to your server, but if you have data and it's dynamic (else you would just build dozens of little web pages) and you want interactivity, it seems like this is a clean way to go.

Another option is to have the database present on the client. I've not tried this, but doesn't Access have an export-to-web option? You can build your form the way you want your clients to see it, then export the whole she-bang to a web page. Just don't look at the code.

Cheers,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[Madere]

Edward,

your are getting close.
I am going to use ASP - so server sided code.
Yes I want only a small amount of data at a time and depending of the click of the user.
But I still do not know how to draw decent lines (a table is not nice enough) using HTML (and then from ASP).
I only want to use ASP and (D)HTML, so Perl and C are no option.
I have a pretty good idea how to do it, but not how to show it. So again: how to draw horizontal and vertical lines using HTML?
Regards,
Madere.

 

[CliveC]

Try this after removing the space between the & and the #.

<html><body style=&quot;color:blue; font-family:mono; font-size:60px&quot;>
& #9556;& #9552;& #9559;<br />
& #9562;& #9552;& #9565;<br />
</body></html>

Clive

http://tubularity.com

 

[EdwardMartinIII]

Madere,

You would better serve yourself -- I think -- making a few building-block images and then stacking them however you wished.

So, a small GIF that is a horizontal line, a small GIF that is a vertical line, a right-down bend, a left-down bend, etc.

Think of the old IBM character set, where the &quot;graphics&quot; were just interesting characters, but when gridded properly could pretty much make any picture you liked.

The trick is to spend an afternoon looking over your layout and figuring out all the various display rules. If you're careful and detailed, you should have no problem and your graphic display will look fine.

To address your original question and the repeat of it, I will repeat my answer -- there is no simple way to draw lines in HTML. You can display lines, as files, but dynamic drawing isn't really what you want to do anyway, so don't spend time trying to do it -- just focus on the quick way to get to your solution.

On the HTML side, this is a snap: Build your web page from the server using the various building blocks to make the diagram you want. I've done this and build fairly complicated hierarchical views that looked almost exactly like the Windows Explorer, yet were squeaky-clean HTML.

As far as the server side, if you're using ASP, then there's probably a dandy ASP forum here for that.

Can you show me a site that has the same basic functionality you want to make? How many nodes of data are you dealing with? More than a hundred?

Cheers,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[EdwardMartinIII]

And the Microsoft link posted by StuckInTheMiddle seems pretty useful, too.

Cheers,


Edward

Like Lovecraft? Know Photoshop? Got time for the Unspeakable?

http://www.petting-zoo.org/Movies_Dreamquest.html

 

[Madere]

Well,

on this page:

http://www.genealogie.hccnet.nl/plein/zwaan_k-aan/html/frames/frameset3.html

you will find an example of what I am looking for. Forget about the light grey grid.
So it does not look like a tree as described in the article of DHTML Trees. The number of levels may be 3, 4 or 5, but not 100. Because the viewer must be able to see some levels. Otherwise it will be to small.
I am looking for a piece of code (or a page which has).
I toughed it was done on the page I have seen with <DIV>.

Maybe the trows some light on the issue.

Regards,
Madere.

 

[Madere]

CliveC,

your last reply, with 9556, starts to look like it.
Now I have to find the right codes for the lines I like to use.
Is this the normal ASCII table?? I think it is.

Regards,
Madere.

 

[CliveC]

Try this to find your codes:

<html><body><code>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
for (i=9472;i<9836;++i) {
disp = i+&quot;;=&#&quot;+i+&quot;; &quot;;
document.write(disp);
}
</script>
</code></body></html>

Clive

http://tubularity.com

 

[Madere]

CliveC,

thanks.
I already had done it.
I have found the characters I want.
The only disadvantage is that I have to place a lot of spaces or tabs between the lines to get them in line.

But I will try this first.
Thanks,
Madere.

 

[Boomerang]

Hi Clive, FYI:

To write the code for ascii characters here on a tek-tips post you have to now the trick.

If you simple write &amp;#63; you will see the character and NOT the code you want to tell the other members. So instead of adding the space you did, you have to code:

&amp;amp;#63;

But DO NOT do a preview post, because after the preview post all the &quot;amp&quot; will be erased and the characters will still be shown instead of the character-codes.

If you're not sure and you want to see the preview post then FIRST copy all the text here in the &quot;Your Reply textarea&quot; and put it temporary in &quot;notepad&quot;. Then do the preview post (you will see the codes) . Then go back with the &quot;edit post&quot; button and copy the code from notepad back to the textarea.

Hope this helps,
Erik

<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->

 

[CliveC]

Madere,

&quot;The only disadvantage is that I have to place a lot of spaces or tabs between the lines to get them in line.&quot;

Your might try position:relative; top:20px; left:200px, or something like that. Relative, offsets an item relative to where it would originally have been.

Erik,

Thanks, I think you mentioned that before but I had forgotten.


Clive

http://tubularity.com

 

[tdhprestatyn]

I have just had the same problem. I got around it by using CSS and a 1x1 transparent gif as below (called spacer.gif):

<IMG style=&quot;position: absolute; top: 73px; left: 177px; border: 1px solid black; width: 0px; height: 425px;&quot; src=&quot;spacer.gif&quot;>

Simply: set the gif to 0px wide, set the height to the height of the line, set the border to 1px solid black, this is what will be visible. When drawn as the gif has no width, all you see is the border, which merges into a line.

Tony

 

[davekok]

Hi,

The easiest way I can thing of is using the HR tag and use CSS to manipulate it.

Example:
<hr style=&quot;position:absolute; left:10px; top:10px; width:0px; height:20px; border-width:1px; border-style:solid; border-color:black;&quot;>

Now something more complex. How do you draw diagonal lines?

Dave