During the last week or so I’ve put together a number of new sample integrations of JavaScript-based technologies with AutoCAD, mainly to form the basis of my proposed AU2014 class but also (obviously) to share here. This first post introduces the series, giving an overview of some benefits – as I see them – of adopting this development environment.
As I’m sure I’ve mentioned before, over the years I’ve had a love/hate relationship with HTML and JavaScript: I’m comfortable working with them but have lived through plenty of frustrating moments. These days, though, I’m finding it to be very different experience: widespread HTML5 support has enabled some really interesting capabilities in the browser and there are plenty of things that make your life much easier.
Library support
A big reason for investing in any programming language is the existing community investment in the technology. .NET enjoys a vibrant community – as we all know – and is targeted by an increasing number of open source projects, but JavaScript is pretty much all about open source: the number of advanced toolkits and application development frameworks that are available for JavaScript is pretty awe-inspiring.
photo credit: Phil Bradley via photopin cc
Aside from a smattering of jQuery, for this series we’re going to focus on three different graphics toolkits:
- Paper.js
- Uses the HTML5 canvas for 2D graphics, in particular
- Isomer
- Uses the HTML5 canvas to show isometric views of 3D models
- Three.js
- Uses WebGL to display 3D graphics
At a later point I’ll probably look more deeply into the framework side of things: I know projects such as ShapeShifter have adopted AngularJS, for instance, but there are flavours of framework out there for everyone’s taste.
And of course the fact these tools are all open source gives you confidence that if they go in a direction that doesn’t sit well with you, it’s always possible to stay with what works or fork them in a direction you like better.
Cross platform
Some of you may be developing web and mobile applications, today, but I suspect most are still focused on developing desktop-centric tools. But that’s not to say the situation will be the same in the years to come: one important benefit of investing in HTML5 & JavaScript is that the generated assets (and skills/experience) are much more likely to be usable on other platforms and devices.
You may not have a specific need today, but as the landscape evolves it’s also prudent to aim at future-proofing your investments. And yes, there are other ways of leveraging existing .NET-centric IP on other platforms – whether creating Windows Phone apps, using Xamarin on iOS and/or Android or reusing .NET components in ASP.NET on Azure – but each of those tends to make assumptions that may or may not be valid (e.g. you’ll be able to use Xamarin in combination with a particular Autodesk technology, etc.). HTML+JavaScript arguably gives you better reach for newly developed assets.
photo credit: markbult via photopin cc
Centralised deployment
Not everyone wants to deploy apps via the web – and our New Tab Page in AutoCAD 2015 is a local web-page, for lots of good reasons – but you can choose to host your HTML and JavaScript assets centrally and access them from there. Which – along with the responsibility it gives for not introducing breaking changes – means you have the ability to fix things once and deploy them immediately.
Flexible debugging
This used to be a major weakness of working with JavaScript: I used to have to pepper my code with alert() calls to messagebox the contents of variables. Painful stuff. But the world has moved on: hitting F12 in an HTML-defined palette or document inside AutoCAD brings up an advanced debugging environment that lets you dig into what’s happening – extremely useful when marshalling data via JSON, for instance.
photo credit: Kevin Krejci via photopin cc
And it doesn’t stop there: if you want to edit your HTML or JavaScript, simply reopen the palette or document and the new version will be loaded (assuming it’s coded in an appropriate way, of course). There’s no need to relaunch AutoCAD unless you’re modifying .NET code that your HTML app relies upon (and even now you can avoid that if you’re running from the debugger and are using Edit & Continue with AutoCAD 2015). Life is just so much easier than it used to be.
The series itself
Over the coming posts I’m going to publish a few different approaches for harnessing JavaScript within AutoCAD. Each of the samples I’m creating will have both palette- and document-based versions – ideally using the same implementation for both, where possible – and interoperating with .NET code for any heavy lifting.
To start with we’re going to look at something I’d hinted at a long time ago, when I’d integrated Paper.js with LeapJS: making use of Paper.js within AutoCAD to implement a user interface of some kind. The specific sample is interesting, albeit very simple: we’re going to write our own version of the REVCLOUD command that allows the user to draw revision clouds using Paper.js and then insert them as polylines in AutoCAD. The task itself isn’t especially interesting – it’s been done before in-product – but the technique for marshalling data as well as the simplicity of the implementation are likely to be of interest.
This first sample will therefore show how to take information generated within HTML/JavaScript and use it to generate AutoCAD geometry – in some ways comparable to the work I did to prototype an integration of ShapeShifter (which I now need to go back and revisit now that I’ve learned more).
The other two samples I currently have in the pipeline go the other way: they take 3D geometry from inside the current drawing and extract it for display in a 2D isometric and a 3D view, respectively.
Should be a fun couple of weeks!
