The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

Web-based Drawing

Does anybody have any recommendations on a way to accurately "draw" within a web browser. I'd like to learn a way to visually represent an web configured product (i.e. door) using simple line drawings that can be saved off as an image.  Or maybe as an alternative a way to display DXF files within a browser?

Steve Stepp Send private email
Wednesday, June 25, 2008
Can't you render them as an image using the tool of your choice then simply display the image in the browser?

Wednesday, June 25, 2008
You could generate a png or jpg, and include it in an img tag... more complex would be to asynchronously load it using javascript. (unrelated to ajax)...
Totally Agreeing
Wednesday, June 25, 2008
Silverlight?  You get to manipulate a subset of WPF graphics entities with the .NET programming lnaguage of your choice, in a browser.
Stephen Lowe Send private email
Wednesday, June 25, 2008
We have a few places in our app where we have a graph, i.e. Boxes with lines connecting them.  We draw the lines using narrow divs with either the border or background color set.  For a horizantal line you'd have a 1 or 2pixel high div, with the width being set to how wide you want the line.  Obviously we can't draw diagonal lines using this method.  The user can't move the lines, but they can move the boxes.  Whenever they move the boxes we recompute the lines.  We just store the positions of the boxes.  These are all housed inside of a div container and all the positions are based on the object's positions within that container.  Another team member wrote the code that we use, but this is my understanding of it.
Wednesday, June 25, 2008
I believe that converting or importing your DXF files to an image or a Flash file will give you the best results.

I don't think that you really want to do the "drawing" in the browser, but rather on the server, by converting the dxf into another file format. You could do this on the fly or just pre-convert them by hand depending on your needs.

According to Adobe, they support DXF files in the Flash environment:

Also, if you do flash you can support zooming easily. You can also support zooming with normal JPEG by converting the DXF at predefined zoom levels and then doing some Ajax (ala Google Maps).

I see quite a few tools for working with the DXF file format, I'm sure you can find something to help you automate the process...
Wayne Bloss Send private email
Wednesday, June 25, 2008
After reading that Adobe link a bit more, it seems like Flash might give you more trouble than it's worth if you try to use it's built-in DXF functionality.
Wayne Bloss Send private email
Wednesday, June 25, 2008
Thanks Wayne, I'll check out some DXF tools and see what I come up with.

What I'd like to do with this project is have a web-based product configurator that allows the user to enter/select any size (door) and many different options. Then based on the size and options selected, I'll have logic to "generate" a DXF and/or image on the fly. Writing the DXF shouldn't be too hard because the drawing will be fairly simple, but getting it displayed in a browser (and possibly a printable PDF) is my main issue.

I've been reading a little about dojo.gfx is anyone familiar with that javascript graphics library?
Steve Stepp Send private email
Wednesday, June 25, 2008
google for the "canvas" tag.

It's currently not supported natively by IE (though you can get a JavaScript module that will give you canvas support in IE), but it's part of the W3C standards and is mostly there on other browsers.
Jeffrey Dutky Send private email
Wednesday, June 25, 2008
Why not generate an image dynamically on the server and return this to client? From what I recall this is fairly straightforward in ASP.Net.
Wednesday, June 25, 2008
Would Gliffy be of any use?
IanH. Send private email
Thursday, June 26, 2008
Flash has the usual full set of arbitrary drawing APIs - straight lines, bezier curves, fills, bitmap fills, gradient fills, etc.

So if you're willing to write your own drawing routines, or interpret your own DXF files or whatever, it can certainly be done. Built in support, I have no idea about.
aph Send private email
Thursday, June 26, 2008
we found a solution for our graphing; draw the graph on a Windows canvas & then (depending on client capabilities) either throw it up as a PNG, or if the client supports flash, then create a flash object on the fly from an EMF file exported by our teechart graphing package. Found a great 3 party component for doing this.

The flash object is nicely scalable, but I am looking forward to the day where web-browsers all support SVG or somesort of canvas that can be draw on.
Grant Black Send private email
Monday, June 30, 2008

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
Powered by FogBugz