DraftingJS: publish 2-D blueprints on the web in Javascript

Need to publish simple, two-dimensional technical drawings on the web, such as the ones on this page?

Infuriated how hard that can be with common CAD tools? I was.

So I wrote a little bit of Javascript, which I call DraftingJS. You include it in your web page. It lets you describe your drawing on a high level in Javascript, and DraftingJS renders it in SVG right in the browser. Most styles are defined in a separate CSS file, so you can easily change colors or line widths.

Below are some examples. Source is at gitlab.com/draftingjs.

I don't claim that this is complete at all; I've only written as much code as I needed for now :-) But it handles surprisingly many situations already. Arguably it qualifies as a parametric CAD tool, because you can use variables, and loops and anything Javascript to construct your diagrams.

Simple part with label

Here is the code:

<script src="js/drafting.js"></script>

<script src="examples/simple.drafting.js"></script>

The first line brings in the library, the second one reads the Javascript file that defines the diagram, converts it to SVG and inserts it into the HTML right after the diagram script itself. Click here to open that second file, or read on as I have it in-lined right here so it's easy to compare with the diagram:


   
   
This code creates an instance of DjsDiagram with defaults, and specifies
      which elements (here: two) to include in the diagram. We have a rectangle,
      and a label for the part. The coordinates and sizes for all are defined with
      a straightforward "Point" class and some suitable operations on it
      to make it easy to use.

   
I bet you can write this file faster than it takes some CAD tools to just come up.

  


  

   
  


  


  

   
Let's add dimensions

   
Parts are not very useful without dimensions. If you want to cut this part in the
      garage, you better know how big it needs to be. So let's add the right measures
      to the code above. We get:

   

   
   
There's not much to explain: two elements of type DjsLinearMeasure
      have been added at the points whose distance they measure. DraftingJS automatically
      calculates that distance, and creates the lines, arrow heads and labels. If you
      don't like where they are placed, you can override the location.

   
Yes, this works in any direction, not just horizontal or vertical.

   
Note that if you parameterize your diagram by using variables, all your
      distance labels will automatically update when variables change.

  


  

   
  


  


  

   
A more complex part

   
For this more complex part, we add some HTML5 custom attributes to the script
      tag to specify units, display size etc. instead of using the defaults as we did above.
      Here is the code in the HTML file:

   
<script src="js/drafting.js"></script>

<script src="examples/arm.drafting.js"
           data-scale="800/10" data-width="1000" data-height="600"
           data-origin-offset-x="80"
           data-rounding="2" data-unit='"'></script>


   
And here is the diagram, in-lined again. DraftingJS lets you use some version of
      Turtle Graphics to
      define an irregular part. As you can see, you can mix straight lines and curves.

   

   
  


  

   
  


  


  

   
Repeat elements

   
Given that this is Javascript, it will come at no surprise that we can do
      things such as loops and generate diagrams in the process. Here I define
      two custom part classes by encapsulating the code for the above part, and
      use it repeatedly:

   

   
   
Not very hard, is it? :-)

  


  

   
  


  


  
To use, easiest might be to clone
     this repo. All you need is files
     js/drafting.js and
     assets/drafting.css.
     Pull requests welcome!