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 :) !