In the last post, we draw some geometries on Android and upload to Mobile Service of Azure. As mentioned, Mobile Service of Azure allows you to access the service by HTML/JavaScript. So we could take advantage JavaScript AutoCAD 2014 provides. We will render the geometries in AutoCAD using the new technology.
Here is the sample project.
Download AzureMSAutoCAD. The key points are:
1. Create an ASP.NET project. In this demo, it is named AzureMSAutoCAD. Load the necessary Js libs or Js code in Default.aspx.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="AzureMSAutoCAD._Default" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<%--load Javascriot lib of AutoCAD--%>
<script type="text/javascript" src="http://www.autocadws.com/jsapi/v1/Autodesk.AutoCAD.js"></script>
<%--load jquery lib--%>
<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js'></script>
<%--load the js produced by Azure for your mobile service--%>
<script src='https://lxdcell.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js'></script>
<%--the js for this demo, which gets all records of mobile service and provides the ability the draw the geometries--%>
<script type="text/javascript" src="Scripts\AzureAutoCAD.js"></script>
<ul id='todo-items'>
</ul>
</asp:Content>
2. Similar to Android, you could download the Js demo from Azure. It shows how to access the service, including the access url and key.
3. In AzureAutoCAD.js of our demo, I will connect to my mobile service. The code reads each geometry data of the mobile table and produces the rows of a list in the web page.
$(function () {
var client = new WindowsAzure.MobileServiceClient('Access URL', 'Key');
var mytable = client.getTable('AzureTableItem');
// Read current data and rebuild UI.
// If you plan to generate complex UIs like this, consider using a JavaScript templating library.
function refreshTodoItems() {
// read two columns of the table and produce the rows of the list
var query = mytable.select("id", "graphicsdata").read().done(function (results) {
var listItems = $.map(results, function (item) {
return $('<li>')
.attr('data-todoitem-data', item.graphicsdata)
.append($('<button class="item-display">display graphics</button>'))
.append($('<input class="item-data" readonly = "true">').val(item.id + ":"
+ item.graphicsdata));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
}, handleError);
}
// …. Other codes
4. Before deploying to Azure, we need to test on local. Firstly, we need to add localhost as the [Allow Requests From Host Names] in the mobile service configuration.
This is how it works locally. Beside each row, there is a button, it will draw the geometry in AutoCAD with the corresponding data.
5. When the ASP.net project is ready, we could host it to a website. In this demo, I deploy it to Azure (before this, please create a website in Azure). Again, remember to add the website as a host names in mobile service.
6. Now, we will implement the Js code that draws geometry in AutoCAD. I’d recommend you have a look at the tutorial on AutoCAD Js basic my colleague Philippe has delivered. Since the 2014 Js has not much abilities such as creating database entities, we could use extension Js which calls a .NET function. In the tutorial AutoCAD Js basic, Philippe has introduced on extension Js. Here are two more nice blogs which are more helpful to understand the mechanism how to call .NET modules.
7. So, in AzureAutoCAD.js of our demo, it gets the geometry data of the corresponding row, produces a json string, and calls the function of .NET. To make the display more clear, it deletes the older geometry and zoom all after the new geometry is drawn.
// Handle display
$(document.body).on('click', '.item-display', function () {
//delete he previous entities, just for this demo
Acad.Editor.executeCommand("delete all ");
//the corresponding geometry data of this row
var thisata = getTodoItemId(this);
//execute the .NET function, passing the geometry data in.
execAsync(JSON.stringify({
functionName: 'JsCallDotNet',
invokeAsCommand: false,
functionParams: { args: thisata }
}),
OnArxSuccess,
OnArxError);
//zoom all
Acad.Editor.executeCommand("zoom e");
});
8. Next, we prepare a .NET project of AutoCAD, in which one command AdnJsDemo loads the webpage, the other JsCallDotNet is a JavaScript Callback function.
[JavaScriptCallback("JsCallDotNet")]
public string TestDotNetRead(string jsonArgs)
{
Document doc =
Autodesk.AutoCAD.ApplicationServices.Application.
DocumentManager.MdiActiveDocument;
Database db = doc.Database;
Editor ed = doc.Editor;
//lock the document
using (doc.LockDocument())
{
try
{
//parse the geometry data
var obj_jsonArgs =
JObject.Parse(jsonArgs);
var obj_args =
(string)obj_jsonArgs["functionParams"]["args"];
//get the geometry data array
JavaScriptSerializer js =
new JavaScriptSerializer();
JsonPt[] ptArray =
js.Deserialize<JsonPt[]>(obj_args);
//draw the lines one by one
using (Transaction tx =
doc.TransactionManager.StartTransaction())
{
BlockTableRecord btr =
tx.GetObject(db.CurrentSpaceId, OpenMode.ForWrite)
as BlockTableRecord;
for (int i = 0; i < ptArray.Length - 1; i++)
{
JsonPt stPt = ptArray[i];
JsonPt endPt = ptArray[i + 1];
Point3d oDBStPt =
new Point3d(stPt.X, stPt.Y, 0);
Point3d oDBEndPt =
new Point3d(endPt.X, endPt.Y, 0);
Line oNewLine =
new Line(oDBStPt, oDBEndPt);
oNewLine.Color =
Color.FromRgb(255, 0, 0);
oNewLine.LineWeight =
LineWeight.LineWeight018;
btr.AppendEntity(oNewLine);
tx.AddNewlyCreatedDBObject(oNewLine, true);
}
tx.Commit();
}
}
catch (System.Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
return "{\"retCode\":0, \"result\":\"OK\"}";
}
All are completed! Now, netload the .NET project in AutoCAD 2014, run the command AdnJsDemo, it will load our webpage in a panel. After the rows are generated, click the button, the corresponding geometries will drawn in AutoCAD.
Enjoy it!