Data sharing between AutoCAD Civil 3D and HTML5 application

By Partha Sarkar

In the
process of exploring HTML5 canvas and draw geometries, I thought how about
‘creating a HTML5 application to show a Civil 3D Pipe Network geometry’. 

With this
goal in mind, I first approached to create a simple Civil 3D .NET application to
select a Pipe, get the Pipe Network and export the Pipe coordinates from the
selected network to an external file (TXT file). We can use the following Civil
3D .NET API to get the Pipe’s start and end points –

Pipe.StartPoint

Pipe.EndPoint

So, the first
part was easy to create a TXT file and store all the StartPoint and EndPoint of
the Pipes in a selected Pipe Network.

In the second
part, I wanted to read the TXT file with Pipe Geometry from Civil 3D. I found
the FileReader
in HTML5 which provides an API to select files and access their data.

After
accessing the data, I had to parse it and create an array in JavaScript. In the
next part, it was easy to get the HTML5 canvas and the context and loop through
the array storing the pipe network vertices and create line using HTML5 context.lineTo()
API

 if (cleanlineVertices.length > 3)

{	context.beginPath();	context.moveTo(cleanlineVertices[0], cleanlineVertices[1]);	for (var i = 2; i < (cleanlineVertices.length - 1); i+=2)	{			 context.lineTo(cleanlineVertices[i], cleanlineVertices[i+1]);		}			// Set Line width	context.lineWidth = 5;			// Set Line color	context.strokeStyle = '#fa00ff';	context.stroke();}

In this video
you will see the workflow and a quick demo of this application.

So, we can share data from AutoCAD Civil 3D and a HTML5 can show us the
geometry in the actual project site and all the stakeholders can verify if the
network is passing through the desired location  :) !