Through the Interface

Google Chrome Web Lab’s Sketchbots: bits to atoms, zen-style

I clicked on through to the Chrome Web Lab from the Google home-page, yesterday. It contains some cool “experiments” that showcase the capabilities of modern web-browsers (and presumably Google Chrome, in particular).

The one that especially caught my interest was number 3, the Sketchbots experiment:

The experiment starts with an uploaded photo or – and this is what I did, in my case – a snapshot taken from your system’s webcam. Some image processing and computer vision techniques then get applied to it – essentially to perform edge detection and convert those edges to vectors – and the resultant sketch gets placed in a queue to be drawn in sand at the Science Museum in London. I queued mine up late afternoon in Switzerland, and as the queue took around 2.5 hours to get through (for 400+ sketches, I think it was), the museum was closed by the time it got drawn.

Not that it mattered, though, as I was able to capture a few snaps online of the sketch in progress (here’s one, above) and a pretty cool YouTube video gets composited and shared once complete:

This kind of analog –> digital –> analog transition (atoms –> bits –> atoms as Chris Anderson might say) is really very interesting, and is exactly the kind of process our Reality Capture team is focusing on (although for 3D rather than 2D). You may have heard or read Brian Mathews talking about Rip-Mod-Burn (similar to Rip-Mix-Burn for music and video), for instance.

Maybe we need a web-connected 3D printer in The Gallery, churning out miniature replicas of models created using 123D Catch? The advantage of drawing in sand is that it’s clearly highly sustainable, although perhaps innovations like the Filabot wouldn’t make a 3D version quite so bad, after all. But the scope for abuse would be pretty huge, of course: I can well imagine college students staying up late capturing fun vistas for replication in 3D. I’m pretty sure I would have.

Update:

I didn’t realise it was possible to get an image of the finished sketch (I was just sent a link to the video). Tilo’s comment helped me work out how to get it (even if it was reverse-engineered from the expanded version of the link he gave me). Here’s the snap – for some reason it reminds me of Salvador Dali, so I’ve included one of him, too. :-)

Cloud & mobile series summary

As we reach the end of this long series of posts on moving code to the cloud – and a look at ways to use the functionality from a wide variety of applications, many of them on mobile devices – I felt it was worth putting together a quick summary post to reinforce the overall message (which may have been a bit lost in the sheer volume of information).

Firstly, here are the posts in this series, including those looking at the original creation of the “desktop” application functionality:

Creating the core desktop functionality

• Circle packing in AutoCAD: creating an Apollonian gasket using F# – Part 1
• Circle packing in AutoCAD: creating an Apollonian gasket using F# – Part 2
• Sphere packing in AutoCAD: creating an Apollonian packing using F# – Part 1
• Sphere packing in AutoCAD: creating an Apollonian packing using F# – Part 2

Moving it to the cloud

• Moving to the Cloud
• Exposing a RESTful web service for use inside AutoCAD using the ASP.NET Web API – Part 1
• Exposing a RESTful web service for use inside AutoCAD using the ASP.NET Web API – Part 2
• Architecting for the Cloud
• Consuming data from a RESTful web-service inside AutoCAD using .NET
• Hosting our ASP.NET Web API project on Windows Azure – Part 1
• Hosting our ASP.NET Web API project on Windows Azure – Part 2
• Using Windows Azure Caching with our ASP.NET Web API project

Using the web-service from various clients

• AutoCAD
  • Calling a cloud-based web-service from AutoCAD using .NET
• Unity3D
  • Calling a web-service from a Unity3D scene
• Android
  • Creating a 3D viewer for our Apollonian service using Android – Part 1
  • Creating a 3D viewer for our Apollonian service using Android – Part 2
  • Creating a 3D viewer for our Apollonian service using Android – Part 3
• iOS
  • Creating a 3D viewer for our Apollonian service using iOS – Part 1
  • Creating a 3D viewer for our Apollonian service using iOS – Part 2
  • Creating a 3D viewer for our Apollonian service using iOS – Part 3
• HTML5/WebGL
  • Creating a 3D viewer for our Apollonian service using HTML5 – Part 1
  • Creating a 3D viewer for our Apollonian service using HTML5 – Part 2
  • Creating a 3D viewer for our Apollonian service using HTML5 – Part 3
• WinRT
  • Creating a 3D viewer for our Apollonian service using WinRT – Part 1
  • Creating a 3D viewer for our Apollonian service using WinRT – Part 2

Here are the client application projects I’ve posted for Android, iOS & WinRT.

Perhaps it’s time to say a few words about the experience I had with each of these environments…

• Unity3D was great and would certainly allow you to create a 3D app that could be used in any of the other environments (with the possible exception of WinRT for now, at least). I’d definitely consider this again to create a cross-platform 3D app.
• Android surprised me: I really liked the language (Java), the chosen 3D framework (Rajawali) and the development tool (Eclipse).
• WebGL & Three.js proved to be both easy to use and extremely powerful. Definitely an area to watch as WebGL gets more browser support, especially on mobile platforms.
• iOS was very strange for me, but didn’t prove to be so awful to develop for: while I found the Objective-C syntax to be quite jarring and the Xcode tool to be both confusing and somewhat unstable, the capabilities of the platform and its primary language were quite mature: you can do quite a lot with relatively few lines of (admittedly pretty weird-looking ;-) code. I found iSGL3D reasonably good, although I was ultimately disappointed with the results I was personally able to get from it.
• WinRT was fairly familiar – given my history with .NET – although the lack of a higher-level framework (with a simple sphere primitive, for instance) meant I struggled more with this than I’d have thought. I hope/expect that to be addressed by somebody at some point: while SharpDX allowed me to at least use C# to create a Metro-style Direct3D app, I really would have benefited from a higher abstraction layer to code against.

And to conclude…

This series was really intended to demonstrate that there are significant benefits in making core algorithms cloud-based, not only from an architectural perspective, but from the broad range of applications it enables you to provide to your customers in the long term. And also that this technology really isn’t hard: most of the client apps took a day or two to develop and none took more than a week.

I’ve chosen to deal with graphical data in this series of posts – mainly to make them more visually interesting – but it’s arguably even more compelling to broaden the reach of associated, non-graphical design data using this kind of approach.

Hopefully some of you have followed along with these posts, and derive at least some benefit from seeing similar code working in a variety of languages on a variety of technology stacks. It’s certainly been a fun one to work on: diving so deeply into the respective technologies has at times been challenging but highly educational. :-)

photo credit: blakespot via photo pin cc

Update:

For a further visualization of this data in an augmented reality application, see these posts:

• Using SLAM-based Augmented Reality to visualize 3D geometry
• An augmented reality view of an Apollonian packing using PointCloud Browser
• A gamification experiment: Apollonian Obliteration

Creating a 3D viewer for our Apollonian service using HTML5 – Part 3

To finish off our look at developing an HTML5-based 3D viewer for our Apollonian web-service, today’s post integrates the trackball capability of the Three.js library. Many thanks to Jeff Geer for once again pointing me in the right direction on this. :-)

The trackball capability allows you not to worry about manual implementation of 3D navigation inside your viewer: you simply set up some basic parameters to indicate the size of your model and the speed with which you want navigation to occur – as well as the keys for rotate, zoom and pan – and then you just let it fly.

Here’s the updated file for you to try in either Chrome or Firefox (or elsewhere with WebGL enabled), with the A, S and D keys mapped to rotate, zoom and pan, respectively.

Here’s a video of the trackball capability in action:

And here’s the updated source code:

<!doctype html>

<html>

  <head>

    <title>Apollonian Viewer</title>

  </head>

  <body>

    <script

      type="text/javascript"

      src="http://code.jquery.com/jquery-1.7.1.js">

    </script>

    <script type="text/javascript" src="js/xdr.js"></script>

    <script type="text/javascript" src="js/Three.js"></script>

    <script type="text/javascript">

      var animateWithWebGL;

      var container, root = null;

      var camera, scene, renderer, trackball;

      var zoomScale, xRotation, yRotation;

      var changingLevel = false;

 

      init();

      animate();

 

      // Feature test for WebGL

 

      function hasWebGL()

      {

        try

        {

          var canvas = document.createElement('canvas');

          var ret =

            !!(window.WebGLRenderingContext &&

                (canvas.getContext('webgl') ||

                 canvas.getContext('experimental-webgl'))

              );

          return ret;

        }

        catch(e)

        {

          return false;

        };

      }

 

      function init()

      {

        zoomScale = 1;

        xRotation = 0;

        yRotation = 0;

        var rotInc = 0.05;

 

        animateWithWebGL = hasWebGL();

 

        container = document.createElement('div');

        container.style.background = "#000000";

        document.body.appendChild(container);

 

        // Set the scene size (slightly smaller than the

        // inner screen size, to avoid scrollbars)

 

        var WIDTH = window.innerWidth - 25,

            HEIGHT = window.innerHeight - 25;

 

        // Set some camera attributes

 

        var VIEW_ANGLE = 45,

            ASPECT = WIDTH / HEIGHT,

            NEAR = 0.1,

            FAR = 200;

 

        // Create the renderer, camera, scene and trackball

 

        renderer =

          animateWithWebGL ?

            new THREE.WebGLRenderer() :

            new THREE.CanvasRenderer();

        camera =

          new THREE.PerspectiveCamera(

            VIEW_ANGLE,

            ASPECT,

            NEAR,

            FAR

          );

        scene = new THREE.Scene();

 

        trackball =

          new THREE.TrackballControls(camera, container);

        trackball.rotateSpeed = 1.4;

        trackball.zoomSpeed = 2.0;

        trackball.panSpeed = 0.5;

        trackball.noZoom = false;

        trackball.noPan = false;

        trackball.staticMoving = true;

        trackball.dynamicDampingFactor = 0.3;

        trackball.minDistance = 1;

        trackball.maxDistance = 100;

        trackball.keys = [65, 83, 68]; // [a:rotate, s:zoom, d:pan]

        trackball.addEventListener('change', render);

 

        // The camera starts at 0,0,0 so pull it back

 

        camera.position.z = 4;

 

        // Create a point light

 

        var pointLight = new THREE.PointLight(0xFFFFFF);

 

        // Set its position

 

        pointLight.position.x = 2;

        pointLight.position.y = 10;

        pointLight.position.z = 26;

 

        // Add to the scene

 

        scene.add(pointLight);

 

        // And the camera

 

        scene.add(camera);

 

        // Start the renderer

 

        renderer.setSize(WIDTH, HEIGHT);

 

        // Attach the renderer-supplied DOM element

 

        container.appendChild(renderer.domElement);

 

        $(document).keypress(

          function (event)

          {

            // On Firefox we need event.which rather than keyCode

 

            var code = event.keyCode ? event.keyCode : event.which;

            switch (String.fromCharCode(code))

            {

              case '0':

              case '1':

              case '2':

              case '3':

              case '4':

              case '5':

              case '6':

              case '7':

              case '8':

              case '9':

                var level = code - '0'.charCodeAt();

                populateWithLevel(level == 0 ? 10 : level);

                break;

            }

          }

        );

 

        populateWithLevel(10);

      }

 

      function populateWithLevel(level)

      {

        // Make sure we're not already changing levels

 

        if (changingLevel)

          return;

 

        changingLevel = true;

 

        // If we already have a level loaded, remove the

        // root from the scene and delete it

 

        if (root != null)

        {

          scene.remove(root);

          delete root;

        }

 

        // Make sure CORS is enabled

 

        jQuery.support.cors = true;

 

        // Call our web-service with the appropriate level

 

        $.ajax(

          {

            url:

              'http://apollonian.cloudapp.net/api/spheres/1/' +

              level,

            crossDomain: true,

            data: {},

            dataType: "json",

            error: function(err)

            {

              alert(err.statusText);

            },

            success: function(data)

            {

              // Create the spheres' materials

 

              var materials =

                [

                  new THREE.MeshLambertMaterial({ color: 0x000000 }),

                  new THREE.MeshLambertMaterial({ color: 0xFF0000 }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFF00 }),

                  new THREE.MeshLambertMaterial({ color: 0x00FF00 }),

                  new THREE.MeshLambertMaterial({ color: 0x00FFFF }),

                  new THREE.MeshLambertMaterial({ color: 0x0000FF }),

                  new THREE.MeshLambertMaterial({ color: 0xFF00FF }),

                  new THREE.MeshLambertMaterial({ color: 0xA9A9A9 }),

                  new THREE.MeshLambertMaterial({ color: 0x808080 }),

                  new THREE.MeshLambertMaterial({ color: 0xD3D3D3 }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF })

                ];

 

              // Set up the sphere vars

 

              var rootRad = 0.01, segs = 9, rings = 9;

 

              // Create our root object

 

              var sphereGeom =

                new THREE.SphereGeometry(rootRad, segs, rings);

 

              // Create the mesh from the geometry

 

              root =

                 new THREE.Mesh(sphereGeom, materials[0]);

 

              scene.add(root);

 

              // Process each sphere, adding it to the scene

 

              $.each(

                data,

                function (i, item)

                {

                  // Get shortcuts to our JSON data

 

                  var x = item.X, y = item.Y, z = item.Z,

                      rad = item.R, level = item.L;

 

                  var length = Math.sqrt(x * x + y * y + z * z);

 

                  // Only add spheres near the edge of the outer one

                  // (and only the front half if not animating)

 

                  if (

                    length + rad > 0.99 &&

                      (animateWithWebGL || z > 0)

                  )

                  {

                    // Create the mesh from the geometry

 

                    var sphere =

                      new THREE.Mesh(sphereGeom, materials[level]);

 

                    sphere.position.x = x;

                    sphere.position.y = y;

                    sphere.position.z = z;

                    var scaledRad = rad / rootRad;

                    sphere.scale.x = scaledRad;

                    sphere.scale.y = scaledRad;

                    sphere.scale.z = scaledRad;

 

                    root.add(sphere);

                  }

                }

              );

 

              // Draw!

 

              renderer.render(scene, camera);

 

              changingLevel = false;

            }

          }

        );

        }

 

      function animate()

      {

        requestAnimationFrame(animate);

        trackball.update();

      }

 

      function render()

      {

        renderer.render(scene, camera);

      }     

    </script>

  </body>

</html>

I was able to strip out all the code enabling zoom/spin, although I left the piece in that lets you change levels with the number keys. Once again Three.js and WebGL have really impressed me: this is very interesting technology, and really feels comparable with a native, GPU-enabled 3D graphics experience.

Over the next few posts, we’re going to wrap up this series by implementing a Metro-style 3D viewer using WinRT and DirectX. Fun, fun, fun! :-)

Creating a 3D viewer for our Apollonian service using HTML5 – Part 2

In the last post, we created another, basic 3D viewer for the data from our Apollonian web-service – this time using HTML5 via Three.js. In this post, we’ll extend the code to listen for keyboard events and manipulate the model according to user-input, as well as enabling feature detection of WebGL (allowing the same implementation to call into the canvas rendering code when WebGL isn’t present).

We’re introducing keyboard-based commands to enable zoom, rotate (meaning spin, although not continuously) and the change of levels:

• +
  • Zoom in
• -
  • Zoom out
• , or %
  • Rotate left
• . or /
  • Rotate right
• & or a
  • Rotate up
• ( or z
  • Rotate down
• 0 – 9
  • Change level (0 == 10)

You’ll see some strange choices for some of the rotate keys, above: on browsers other than Chrome, the keypress event gets called with symbols representing the arrow keys (left: ‘%’ right: ‘/’ up: ‘&’ down: ‘(‘). But because of an issue with Chrome that means its doesn’t receive the keypress event for arrow keys, we’re also checking for other characters, too (left: ‘,’ right ‘.’ up: ‘a’ down: ‘z”).

For changing levels: we might also have confirmed the change of level with the user via a message-box, but in the end I felt it wasn’t too disruptive to just do it.

Before we see the code, here’s a quick demo video and a link to the page:

[Errata: I mistakenly said “level 5” in the below video instead of “level 10”, and I also should have reinforced that the view was really using WebGL rather than basic HTML5 Canvas.]

Here’s the updated HTML code:

<!doctype html>

<html>

  <head>

    <title>Apollonian Viewer</title>

  </head>

  <body>

    <script

      type="text/javascript"

      src="http://code.jquery.com/jquery-1.7.1.js">

    </script>

    <script type="text/javascript" src="js/xdr.js"></script>

    <script type="text/javascript" src="js/Three.js"></script>

    <script type="text/javascript">

      var animateWithWebGL;

      var container, root = null;

      var camera, scene, renderer;

      var zoomScale, xRotation, yRotation;

      var changingLevel = false;

 

      init();

      animate();

 

      // Feature test for WebGL

 

      function hasWebGL()

      {

        try

        {

          var canvas = document.createElement('canvas');

          var ret =

            !!(window.WebGLRenderingContext &&

                (canvas.getContext('webgl') ||

                 canvas.getContext('experimental-webgl'))

              );

          return ret;

        }

        catch(e)

        {

          return false;

        };

      }

 

      function init()

      {

        zoomScale = 1;

        xRotation = 0;

        yRotation = 0;

        var rotInc = 0.05;

 

        animateWithWebGL = hasWebGL();

 

        container = document.createElement('div');

        container.style.background = "#000000";

        document.body.appendChild(container);

 

        // Set the scene size (slightly smaller than the

        // inner screen size, to avoid scrollbars)

 

        var WIDTH = window.innerWidth - 25,

            HEIGHT = window.innerHeight - 25;

 

        // Set some camera attributes

 

        var VIEW_ANGLE = 45,

            ASPECT = WIDTH / HEIGHT,

            NEAR = 0.1,

            FAR = 200;

 

        // Create the renderer, camera and scene

 

        renderer =

          animateWithWebGL ?

            new THREE.WebGLRenderer() :

            new THREE.CanvasRenderer();

        camera =

          new THREE.PerspectiveCamera(

            VIEW_ANGLE,

            ASPECT,

            NEAR,

            FAR

          );

        scene = new THREE.Scene();

 

        // The camera starts at 0,0,0 so pull it back

 

        camera.position.z = 4;

 

        // Create a point light

 

        var pointLight = new THREE.PointLight(0xFFFFFF);

 

        // Set its position

 

        pointLight.position.x = 2;

        pointLight.position.y = 10;

        pointLight.position.z = 26;

 

        // Add to the scene

 

        scene.add(pointLight);

 

        // And the camera

 

        scene.add(camera);

 

        // Start the renderer

 

        renderer.setSize(WIDTH, HEIGHT);

 

        // Attach the renderer-supplied DOM element

 

        container.appendChild(renderer.domElement);

 

        $(document).keypress(

          function (event)

          {

            // On Firefox we need event.which rather than keyCode

 

            var code = event.keyCode ? event.keyCode : event.which;

            switch (String.fromCharCode(code))

            {

              case '-': // Zoom out

                zoomScale -= 0.1;

                break;

              case '+': // Zoom in

                zoomScale += 0.1;

                break;

              case '=': // Reset view

                zoomScale = 1;

                root.rotation.x = 0;

                root.rotation.y = 0;

                break;

              case '\'': // Rotate right

              case '.':

                yRotation = rotInc;

                break;

              case '%': // Rotate left

              case ',':

                yRotation = -rotInc;

                break;

              case '&': // Rotate up

              case 'a':

                xRotation = -rotInc;

                break;

              case '(': // Rotate down

              case 'z':

                xRotation = rotInc;

                break;

              case '0':

              case '1':

              case '2':

              case '3':

              case '4':

              case '5':

              case '6':

              case '7':

              case '8':

              case '9':

                var level = code - '0'.charCodeAt();

                populateWithLevel(level == 0 ? 10 : level);

                break;

            }

          }

        );

        populateWithLevel(10);       

      }

 

      function populateWithLevel(level)

      {

        // Make sure we're not already changing levels

 

        if (changingLevel)

          return;

 

        changingLevel = true;

 

        // If we already have a level loaded, remove the

        // root from the scene and delete it

 

        if (root != null)

        {

          scene.remove(root);

          delete root;

        }

 

        // Make sure CORS is enabled

 

        jQuery.support.cors = true;

 

        // Call our web-service with the appropriate level

 

        $.ajax(

          {

            url:

              'http://apollonian.cloudapp.net/api/spheres/1/' +

              level,

            crossDomain: true,

            data: {},

            dataType: "json",

            error: function(err)

            {

              alert(err.statusText);

            },

            success: function(data)

            {

              // Create the spheres' materials

 

              var materials =

                [

                  new THREE.MeshLambertMaterial({ color: 0x000000 }),

                  new THREE.MeshLambertMaterial({ color: 0xFF0000 }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFF00 }),

                  new THREE.MeshLambertMaterial({ color: 0x00FF00 }),

                  new THREE.MeshLambertMaterial({ color: 0x00FFFF }),

                  new THREE.MeshLambertMaterial({ color: 0x0000FF }),

                  new THREE.MeshLambertMaterial({ color: 0xFF00FF }),

                  new THREE.MeshLambertMaterial({ color: 0xA9A9A9 }),

                  new THREE.MeshLambertMaterial({ color: 0x808080 }),

                  new THREE.MeshLambertMaterial({ color: 0xD3D3D3 }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF })

                ];

 

              // Set up the sphere vars

 

              var rootRad = 0.01, segs = 9, rings = 9;

 

              // Create our root object

 

              var sphereGeom =

                new THREE.SphereGeometry(rootRad, segs, rings);

 

              // Create the mesh from the geometry

 

              root =

                 new THREE.Mesh(sphereGeom, materials[0]);

 

              scene.add(root);

 

              // Process each sphere, adding it to the scene

 

              $.each(

                data,

                function (i, item)

                {

                  // Get shortcuts to our JSON data

 

                  var x = item.X, y = item.Y, z = item.Z,

                      rad = item.R, level = item.L;

 

                  var length = Math.sqrt(x * x + y * y + z * z);

 

                  // Only add spheres near the edge of the outer one

                  // (and only the front half if not animating)

 

                  if (

                    length + rad > 0.99 &&

                      (animateWithWebGL || z > 0)

                  )

                  {

                    // Create the mesh from the geometry

 

                    var sphere =

                      new THREE.Mesh(sphereGeom, materials[level]);

 

                    sphere.position.x = x;

                    sphere.position.y = y;

                    sphere.position.z = z;

                    var scaledRad = rad / rootRad;

                    sphere.scale.x = scaledRad;

                    sphere.scale.y = scaledRad;

                    sphere.scale.z = scaledRad;

 

                    root.add(sphere);

                  }

                }

              );

 

              // Draw!

 

              renderer.render(scene, camera);

 

              changingLevel = false;

            }

          }

        );

      }

 

      function animate()

      {

        requestAnimationFrame(animate);

 

        render();

      }

 

      function render()

      {

        if (root != null)

        {

          // Apply rotations around X and/or Y

 

          if (xRotation != 0)

          {

            root.rotation.x += xRotation;

            xRotation = 0;

          }

          if (yRotation != 0)

          {

            root.rotation.y += yRotation;

            yRotation = 0;

          }

        }

 

        // Apply the zoom

 

        camera.position.z = 4 / zoomScale;

 

        camera.lookAt(scene.position);

 

        renderer.render(scene, camera);

      }     

    </script>

  </body>

</html>

A few things to note:

• The hasWebGL() function returns true if the browser supports the use of WebGL. We use the result of this function to determine whether to create and use a WebGL or a Canvas renderer.
• We use jQuery to assign a handler to the document’s keypress() event.
  • We need to check event.keyCode in most browsers but event.which on Firefox.
• When changing levels we set a flag: if we kick off multiple level changes – very easy to do with the longer-loading levels – then we run the risk of stomping on our geometry list… safest to protect it with a rudimentary critical section.

That’s about all there is to it. The application itself works surprisingly well on WebGL-enabled browsers. If I use it for long enough, I can usually crash the page in Chrome (as you’ll see from the demo video), but in Firefox the page is rock solid (which leads me to be believe it’s a browser issue rather than a problem with the code).

Since publishing the last post (and this one was already pretty well baked, too), Jeff Geer has pointed me at the trackball capability in Three.js, which allows you to more simply create a user-interface to control 3D orientation of your model. In the next post we’ll take a look at integrating that – probably alongside some of the existing keypress-enabled level changing – to see what that provides.

Creating a 3D viewer for our Apollonian service using HTML5 – Part 1

After looking at how to bring data from our Apollonian web-service into Unity3D, Android and iOS over the last few weeks, it seemed natural to extend this series to cover HTML. A big thanks to Jeff Geer for suggesting Three.js, which is the HTML5-based framework I ended up adopting for this project.

I like Three.js for a number of reasons: just as jQuery (another library I’ve used in this project, to good effect) attempts to abstract away the messiness inherent in supporting multiple browsers, Three.js does the same for the world of browser-resident 3D.

The other main reason I like Three.js is that it’s open source. I know, I know – I work for a proprietary software vendor… :-) But unless there’s a trusted, proprietary vendor providing platform technology, I really do prefer to have the peace of mind of having access to the framework’s source. And for my adjacent, experimental projects, I tend not to want to spend money on fully-fledged toolkits/frameworks, either, which means I gravitate to open source tools, or at least those that have versions available for free.

In terms of getting started with Three.js, the online tutorial deals with creating a simple scene with a sphere in it, so that was just perfect. :-)

The coding was reasonably straightforward: the main issue – on all fronts – was to enable cross-domain scripting of our web-service. On the server side, we had done so using a crossdomain.xml file when we first needed to call it from Unity, but we needed to go one step further, this time: we had to modify the Web.config file of our ASP.NET project and redeploy the project to Windows Azure. Not a big deal, but it needed doing.

That addressed the issue of calling our web-service from most browsers, but then some additional work was needed for IE9. While it worked well enough from a local HTML file, we had to implement a special ajaxTransport to make it work (another one was suggested, in this bug report against jQuery, but even resolving this obscure issue, I couldn’t get that one to work.. so I took the previously suggested .js file, minified it, and posted it as xdr.js to the blog’s supporting folder).

Here’s the HTML code for our basic viewer application:

<!doctype html>

<html>

  <head>

    <title>Apollonian Viewer</title>

  </head>

  <body>

    <script

      type="text/javascript"

      src="http://code.jquery.com/jquery-1.7.1.js">

    </script>

    <script type="text/javascript" src="js/xdr.js"></script>

    <script type="text/javascript" src="js/Three.js"></script>

    <script type="text/javascript">

      var animateWithWebGL = false;

      var container, root = null;

      var camera, scene, renderer;

 

      init();

      animate();

 

      function init()

      {

        container = document.createElement('div');

        container.style.background = "#000000";

        document.body.appendChild(container);

 

        // Set the scene size (slightly smaller than the

        // inner screen size, to avoid scrollbars)

 

        var WIDTH = window.innerWidth - 25,

            HEIGHT = window.innerHeight - 25;

 

        // Set some camera attributes

 

        var VIEW_ANGLE = 45,

            ASPECT = WIDTH / HEIGHT,

            NEAR = 0.1,

            FAR = 200;

 

        // Create the renderer, camera and scene

 

        renderer =

          animateWithWebGL ?

            new THREE.WebGLRenderer() :

            new THREE.CanvasRenderer();

        camera =

          new THREE.PerspectiveCamera(

            VIEW_ANGLE,

            ASPECT,

            NEAR,

            FAR

          );

        scene = new THREE.Scene();

 

        // The camera starts at 0,0,0 so pull it back

 

        camera.position.z = 4;

 

        // Create a point light

 

        var pointLight = new THREE.PointLight(0xFFFFFF);

 

        // Set its position

 

        pointLight.position.x = 2;

        pointLight.position.y = 10;

        pointLight.position.z = 26;

 

        // Add to the scene

 

        scene.add(pointLight);

 

        // And the camera

 

        scene.add(camera);

 

        // Start the renderer

 

        renderer.setSize(WIDTH, HEIGHT);

 

        // Attach the renderer-supplied DOM element

 

        container.appendChild(renderer.domElement);

 

        jQuery.support.cors = true;

 

        // We'll just load level 8 - good detail, but also quick

 

        $.ajax(

          {

            url: 'http://apollonian.cloudapp.net/api/spheres/1/8',

            crossDomain: true,

            data: {},

            dataType: "json",

            error: function(err)

            {

              alert(err.statusText);

            },

            success: function(data)

            {

              // Create the spheres' materials

 

              var materials =

                [

                  new THREE.MeshLambertMaterial({ color: 0x000000 }),

                  new THREE.MeshLambertMaterial({ color: 0xFF0000 }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFF00 }),

                  new THREE.MeshLambertMaterial({ color: 0x00FF00 }),

                  new THREE.MeshLambertMaterial({ color: 0x00FFFF }),

                  new THREE.MeshLambertMaterial({ color: 0x0000FF }),

                  new THREE.MeshLambertMaterial({ color: 0xFF00FF }),

                  new THREE.MeshLambertMaterial({ color: 0xA9A9A9 }),

                  new THREE.MeshLambertMaterial({ color: 0x808080 }),

                  new THREE.MeshLambertMaterial({ color: 0xD3D3D3 }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF }),

                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF })

                ];

 

              // Set up the sphere vars

 

              var rootRad = 0.01, segs = 9, rings = 9;

 

              // Create our root object

 

              var sphereGeom =

                new THREE.SphereGeometry(rootRad, segs, rings);

 

              // Create the mesh from the geometry

 

              root =

                 new THREE.Mesh(sphereGeom, materials[0]);

 

              scene.add(root);

 

              // Process each sphere, adding it to the scene

 

              $.each(

                data,

                function (i, item)

                {

                  // Get shortcuts to our JSON data

 

                  var x = item.X, y = item.Y, z = item.Z,

                      rad = item.R, level = item.L;

 

                  var length = Math.sqrt(x * x + y * y + z * z);

 

                  // Only add spheres near the edge of the outer one

                  // (and only the front half if not animating)

 

                  if (

                    length + rad > 0.99 &&

                      (animateWithWebGL || z > 0)

                  )

                  {

                    // Create the mesh from the geometry

 

                    var sphere =

                      new THREE.Mesh(sphereGeom, materials[level]);

 

                    sphere.position.x = x;

                    sphere.position.y = y;

                    sphere.position.z = z;

                    var scaledRad = rad / rootRad;

                    sphere.scale.x = scaledRad;

                    sphere.scale.y = scaledRad;

                    sphere.scale.z = scaledRad;

 

                    root.add(sphere);

                  }

                }

              );

 

              // Draw!

 

              renderer.render(scene, camera);

            }

          }

        );

      }

 

      function animate()

      {

        // Animation really only looks good with WebGL rendering

 

        if (animateWithWebGL)

        {

          requestAnimationFrame(animate);

 

          render();

        }

      }

 

      function render()

      {

        var timer = Date.now() * 0.0005;

 

        camera.position.x = Math.cos(timer) * 4;

        camera.position.z = Math.sin(timer) * 4;

        camera.lookAt(scene.position);

 

        renderer.render(scene, camera);

      }     

    </script>

  </body>

</html>

If you want to give it a try, here’s the “canvas” version of the viewer, which I’ve chosen not to have animated. If you’re using Google Chrome or Mozilla Firefox, you may want to try the WebGL version of the viewer, which has some hard-coded rotation. Apparently this can work in other browsers, too, but I haven’t managed to see that, myself.

The only difference between the two HTML files is the value of the animateWithWebGL flag, which obviously causes a slightly different code-path to be followed in a few places.

To see them both in action on my system, here’s a quick video:

To compare how the canvas-based viewer looks on different OS/browser combinations, here are those I’ve tested. The results are mostly pretty decent, although Safari on OS X had something very strange going on (whereas it worked fine in the iOS emulator on the same system).

In the next post, we’re going to make a few enhancements to this HTML5-based viewer: we’ll add support for keyboard events – to enable zoom, rotate and changing levels, in particular – as well as implementing feature detection to use WebGL automatically when available or to default to the use of the canvas renderer, otherwise.

Consuming data from a RESTful web-service inside AutoCAD using .NET

Consumption seems to be a relevant topic, coming after the long Easter weekend here in Switzerland… I was laid up with gastric flu on Monday: after having consumed large amounts of food with friends on Saturday and Sunday, I ended up eating nothing for the whole day. I managed to put the finishing touches on the previous post in this series, but beyond that I was pretty useless.

Anyway, back to the point. We’ve looked at the trend of moving to the cloud, and the steps for creating and implementing a RESTful web-service using the new ASP.NET Web API. Now we’re going to look at how we can call these web-services from within AutoCAD and use the data they provide to generate database geometry.

Let’s start with looking at why we chose JSON for our transport protocol…

RESTful web-services don’t mandate the use of JSON – we could also be returning XML, or even HTML if that made sense – but it’s a fairly common data protocol, these days. I chose it because it was the default served up by the ASP.NET Web API, and it’s generally a little less verbose than XML. Some web-services allow you to chose between JSON and XML (and even YAML, apparently, although I ‘m not familiar with that), but we’ve kept it simple by only returning JSON.

JSON is really easy to parse from Javascript, by all accounts, but we’re going to use C#. So what’s the best way to proceed? There are a couple of choices – perhaps more, but I know of a couple: we could map our JSON to physical classes and serialize into them, which wouldn’t be overly complex, in our case, or we could make use of the dynamic capabilities of .NET 4 to provide access to the data.

I ended up choosing the latter route – mainly for simplicity – although I suspect the former would probably end up being marginally quicker, performance-wise. The concept of using dynamic capabilities in this way was originally presented here, and then refined here and here.

Here’s the code I borrowed from the last of the above links for JSON serialization and access:

using System;

using System.Collections;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Dynamic;

using System.Linq;

using System.Text;

using System.Web.Script.Serialization;

 

internal sealed class DynamicJsonConverter : JavaScriptConverter

{

  public override object Deserialize(

    IDictionary<string, object> dictionary, Type type,

    JavaScriptSerializer serializer

  )

  {

    if (dictionary == null)

      throw new ArgumentNullException("dictionary");

 

    return

      type == typeof(object) ?

        new DynamicJsonObject(dictionary) :

        null;

  }

 

  public override IDictionary<string, object> Serialize(

    object obj, JavaScriptSerializer serializer

  )

  {

    throw new NotImplementedException();

  }

 

  public override IEnumerable<Type> SupportedTypes

  {

    get {

      return

        new ReadOnlyCollection<Type>(

          new List<Type>(new[] { typeof(object) })

        );

    }

  }

 

  #region Nested type: DynamicJsonObject

 

  private sealed class DynamicJsonObject : DynamicObject

  {

    private readonly IDictionary<string, object> _dictionary;

 

    public DynamicJsonObject(IDictionary<string, object> dictionary)

    {

      if (dictionary == null)

        throw new ArgumentNullException("dictionary");

      _dictionary = dictionary;

    }

 

    public override string ToString()

    {

      var sb = new StringBuilder("{");

      ToString(sb);

      return sb.ToString();

    }

 

    private void ToString(StringBuilder sb)

    {

      var firstInDictionary = true;

      foreach (var pair in _dictionary)

      {

        if (!firstInDictionary)

          sb.Append(",");

        firstInDictionary = false;

        var value = pair.Value;

        var name = pair.Key;

        if (value is string)

        {

          sb.AppendFormat("{0}:\"{1}\"", name, value);

        }

        else if (value is IDictionary<string, object>)

        {

          new

            DynamicJsonObject(

              (IDictionary<string, object>)value

            ).ToString(sb);

        }

        else if (value is ArrayList)

        {

          sb.Append(name + ":[");

          var firstInArray = true;

          foreach (var arrayValue in (ArrayList)value)

          {

            if (!firstInArray)

              sb.Append(",");

            firstInArray = false;

            if (arrayValue is IDictionary<string, object>)

              new DynamicJsonObject(

                (IDictionary<string, object>)arrayValue

              ).ToString(sb);

            else if (arrayValue is string)

              sb.AppendFormat("\"{0}\"", arrayValue);

            else

              sb.AppendFormat("{0}", arrayValue);

 

          }

          sb.Append("]");

        }

        else

        {

          sb.AppendFormat("{0}:{1}", name, value);

        }

      }

      sb.Append("}");

    }

 

    public override bool TryGetMember(

      GetMemberBinder binder, out object result

    )

    {

      if (!_dictionary.TryGetValue(binder.Name, out result))

      {

        // return null to avoid exception.

        // Caller can check for null this way...

        result = null;

        return true;

      }

 

      var dictionary = result as IDictionary<string, object>;

      if (dictionary != null)

      {

        result = new DynamicJsonObject(dictionary);

        return true;

      }

 

      var arrayList = result as ArrayList;

      if (arrayList != null && arrayList.Count > 0)

      {

        if (arrayList[0] is IDictionary<string, object>)

          result =

            new List<object>(

              arrayList.Cast<IDictionary<string, object>>().Select(

                x => new DynamicJsonObject(x)

              )

            );

        else

          result = new List<object>(arrayList.Cast<object>());

      }

 

      return true;

    }

  }

 

  #endregion

}

Here’s our client code that makes use of it:

using Autodesk.AutoCAD.ApplicationServices.Core;

using Autodesk.AutoCAD.ApplicationServices;

using Autodesk.AutoCAD.DatabaseServices;

using Autodesk.AutoCAD.EditorInput;

using Autodesk.AutoCAD.Geometry;

using Autodesk.AutoCAD.Runtime;

using System.Web.Script.Serialization;

using System.Net;

using System.IO;

using System.Diagnostics;

using System.Collections.Generic;

using System;

 

namespace Packing

{

  public class Commands

  {

    [CommandMethod("AGCWS")]

    public static void ApollonianGasketWebService()

    {

      Document doc =

        Application.DocumentManager.MdiActiveDocument;

      Database db = doc.Database;

      Editor ed = doc.Editor;

 

      // Ask the user to select a circle which we'll then

      // fill with out Apollonian gasket

 

      PromptEntityOptions peo =

        new PromptEntityOptions("\nSelect circle");

      peo.AllowNone = true;

      peo.SetRejectMessage("\nMust be a circle.");

      peo.AddAllowedClass(typeof(Circle), false);

 

      PromptEntityResult per = ed.GetEntity(peo);

 

      // If none is selected, we'll just use a default size

 

      if (per.Status != PromptStatus.OK &&

          per.Status != PromptStatus.None

        )

        return;

 

      // Also prompt for the recursion level of our algorithm

 

      PromptIntegerOptions pio =

        new PromptIntegerOptions("\nEnter number of steps");

      pio.LowerLimit = 1;

      pio.UpperLimit = 11;

      pio.DefaultValue = 8;

      pio.UseDefaultValue = true;

 

      PromptIntegerResult pir = ed.GetInteger(pio);

 

      if (pir.Status != PromptStatus.OK)

        return;

 

      int steps = pir.Value;

 

      Transaction tr =

        doc.TransactionManager.StartTransaction();

      using (tr)

      {

        // Start by creating layers for each step/level

 

        CreateLayers(db, tr, steps + 1);

 

        BlockTableRecord btr =

          (BlockTableRecord)tr.GetObject(

            db.CurrentSpaceId, OpenMode.ForWrite

          );

 

        // If the user selected a circle, use it

 

        Circle cir;

        if (per.Status != PromptStatus.None && per.ObjectId != null)

        {

          cir =

            tr.GetObject(per.ObjectId, OpenMode.ForRead) as Circle;

        }

        else

        {

          // Otherwise create a new one at the default location

 

          cir = new Circle(Point3d.Origin, Vector3d.ZAxis, 10);

          btr.AppendEntity(cir);

          tr.AddNewlyCreatedDBObject(cir, true);

        }

 

        // Let's time the WS operation

 

        Stopwatch sw = Stopwatch.StartNew();

        dynamic res = ApollonianPackingWs(cir.Radius, steps, true);

        sw.Stop();

 

        doc.Editor.WriteMessage(

           "\nWeb service call took {0} seconds.",

           sw.Elapsed.TotalSeconds

         );

 

        // We're going to offset our geometry - which will be

        // scaled appropriately by the web service - to fit

        // within the selected/created circle

 

        Vector3d offset =

          cir.Center - new Point3d(cir.Radius, cir.Radius, 0.0);

 

        // Go through our "dynamic" list, accessing each property

        // dynamically

 

        foreach (dynamic tup in res)

        {

          double curvature = System.Math.Abs((double)tup.Curvature);

          if (1.0 / curvature > 0.0)

          {

            Circle c =

              new Circle(

                new Point3d(

                  (double)tup.X, (double)tup.Y, 0.0

                ) + offset,

                Vector3d.ZAxis,

                1.0 / curvature

              );

 

            // The Layer (and therefore the colour) will be based

            // on the "level" of each sphere

 

            c.Layer = (tup.Level + 1).ToString();

 

            btr.AppendEntity(c);

            tr.AddNewlyCreatedDBObject(c, true);

          }

        }

        tr.Commit();

 

        doc.Editor.WriteMessage(

           "\nCreated {0} circles.", res.Count

         );

      }

    }

 

    [CommandMethod("AGSWS")]

    public static void ApollonianGasket()

    {

      Document doc =

        Application.DocumentManager.MdiActiveDocument;

      Database db = doc.Database;

      Editor ed = doc.Editor;

 

      // Rather than select a sphere (which may not have history)

      // simply ask for the center and radius of our spherical

      // volume

 

      PromptPointOptions ppo =

        new PromptPointOptions("\nSelect center point");

      ppo.AllowNone = false;

 

      PromptPointResult ppr = ed.GetPoint(ppo);

 

      if (ppr.Status != PromptStatus.OK)

        return;

 

      Point3d center = ppr.Value;

 

      ppo.BasePoint = center;

      ppo.Message = "\nSelect point on radius";

      ppo.UseBasePoint = true;

      ppo.UseDashedLine = true;

 

      ppr = ed.GetPoint(ppo);

 

      if (ppr.Status != PromptStatus.OK)

        return;

 

      // Calculate the radius and the offset for our geometry

 

      double radius = (ppr.Value - center).Length;

      Vector3d offset = center - Point3d.Origin;

 

      // Prompt for the recursion level of our algorithm

 

      PromptIntegerOptions pio =

        new PromptIntegerOptions("\nEnter number of steps");

      pio.LowerLimit = 1;

      pio.UpperLimit = 11;

      pio.DefaultValue = 8;

      pio.UseDefaultValue = true;

 

      PromptIntegerResult pir = ed.GetInteger(pio);

 

      if (pir.Status != PromptStatus.OK)

        return;

 

      int steps = pir.Value;

 

      Transaction tr =

        doc.TransactionManager.StartTransaction();

      using (tr)

      {

        // Start by creating layers for each step/level

 

        CreateLayers(db, tr, steps + 1);

 

        // We created our Apollonian gasket in the current space,

        // for our 3D version we'll make sure it's in modelspace

 

        BlockTable bt =

          (BlockTable)tr.GetObject(

            db.BlockTableId, OpenMode.ForRead

          );

        BlockTableRecord btr =

          (BlockTableRecord)tr.GetObject(

            bt[BlockTableRecord.ModelSpace], OpenMode.ForWrite

          );

 

        // Let's time the WS operation

 

        Stopwatch sw = Stopwatch.StartNew();

        dynamic res = ApollonianPackingWs(radius, steps, false);

        sw.Stop();

 

        doc.Editor.WriteMessage(

           "\nWeb service call took {0} seconds.",

           sw.Elapsed.TotalSeconds

         );

 

        // Go through our "dynamic" list, accessing each property

        // dynamically

 

        foreach (dynamic tup in res)

        {

          double rad = System.Math.Abs((double)tup.Radius);

          if (rad > 0.0)

          {

            Solid3d s = new Solid3d();

            s.CreateSphere(rad);

            Point3d cen =

              new Point3d(

                (double)tup.X, (double)tup.Y, (double)tup.Z

              );

            Vector3d disp = cen - Point3d.Origin;

            s.TransformBy(Matrix3d.Displacement(disp + offset));

 

            // The Layer (and therefore the colour) will be based

            // on the "level" of each sphere

 

            s.Layer = tup.Level.ToString();

 

            btr.AppendEntity(s);

            tr.AddNewlyCreatedDBObject(s, true);

          }

        }

        tr.Commit();

 

        doc.Editor.WriteMessage(

           "\nCreated {0} spheres.", res.Count

         );

      }

    }

 

    private static dynamic ApollonianPackingWs(

      double p, int numSteps, bool circles

    )

    {

      string json = null;

 

      // Call our web-service synchronously (this isn't ideal, as

      // it blocks the UI thread)

 

      HttpWebRequest request =

        WebRequest.Create(

          "http://localhost:64114/api/" +

          (circles ? "circles" : "spheres") +

          "/" + p.ToString() +

          "/" + numSteps.ToString()

        ) as HttpWebRequest;

 

      // Get the response

 

      using (

        HttpWebResponse response =

          request.GetResponse() as HttpWebResponse

        )

      {

        // Get the response stream

 

        StreamReader reader =

          new StreamReader(response.GetResponseStream());

 

        // Extract our JSON results

 

        json = reader.ReadToEnd();

      }

 

      if (!String.IsNullOrEmpty(json))

      {

        // Use our dynamic JSON converter to populate/return

        // our list of results

 

        var serializer = new JavaScriptSerializer();

        serializer.RegisterConverters(

          new[] { new DynamicJsonConverter() }

        );

 

        // We need to make sure we have enough space for our JSON,

        // as the default limit may well get exceeded

 

        serializer.MaxJsonLength = 50000000;

 

        return serializer.Deserialize(json, typeof(List<object>));

      }

      return null;

    }

 

    // A helper method to create layers for each of our

    // levels/steps

 

    private static void CreateLayers(

      Database db, Transaction tr, int layers

    )

    {

      LayerTable lt =

        (LayerTable)tr.GetObject(

          db.LayerTableId, OpenMode.ForWrite

        );

      for (short i = 1; i <= layers; i++)

      {

        // Each layer will simply be named after its index

 

        string name = i.ToString();

        if (!lt.Has(name))

        {

          // Our layer will have the color-index of our

          // index, too

 

          LayerTableRecord ltr = new LayerTableRecord();

          ltr.Color =

            Autodesk.AutoCAD.Colors.Color.FromColorIndex(

              Autodesk.AutoCAD.Colors.ColorMethod.ByAci, i

            );

          ltr.Name = name;

 

          // Add the layer to the layer table and transaction

 

          lt.Add(ltr);

          tr.AddNewlyCreatedDBObject(ltr, true);

        }

      }

    }

  }

}

A few comments on this implementation…

This code is still calling our local web-service, but it will be a one-string change to have it connect to our cloud-based service (which will simply have a different URL).

Right now the code uses a synchronous web-service call, which has the unfortunate behaviour of locking the UI thread for the duration of the call (and actually of the processing of the data – we’re not checking in to process events during those loops, either).

Asynchronous calling is clearly the way to go, at this stage, with respect to web-services. Even if we have to wait for AutoCAD to be ready to generate all our geometry, blocking the UI thread means AutoCAD becomes unresponsive and also won’t check for the user cancelling the operation.

I started implementing code based on the Async CTP to do this, but realised (and I think I have this right) that the capabilities that are likely to be introduced in .NET 4.5 – and can be used now in VS11 – work with different types/extension methods than those in the Async CTP. Rather than publish code that I already know will change, I’ve chosen to come back to this later, with some code that works inside VS11 rather than VS2010.

Let’s see the code in action. Here are the results at the command-line when we run AGCWS and AGSWS, accepting the default number of recursion steps for each:

Command: AGCWS

Select circle:

Enter number of steps <8>:

Web service call took 4.7617224 seconds.

Created 6549 circles.

Command: AGSWS

Select center point:

Select point on radius:

Enter number of steps <8>:

Web service call took 3.640632 seconds.

Created 12119 spheres.

And here are the graphical results:

Now that we have the various parts of our application working together on a local system, over the coming posts we’ll move our web-service to the cloud and update the client code to access it there.

Architecting for the Cloud

After introducing the (apparently somewhat charged, judging from the comments) topic of moving application functionality to the cloud, and then looking at the steps of creating and implementing an ASP.NET Web API project, we’re now going to take a brief step back before looking at how we can effectively make use of the data provided by these web-services inside AutoCAD.

If you’re looking to assign blame (not that any is needed ;-), it’s Scott McFarlane’s fault we’re taking this brief backwards step: Scott raised the excellent point – which really needs addressing sooner rather than later in this series – that, aside from the technical issue of creating and hosting a web-service, it’s really important to start with the right architecture in terms of separating your application’s business logic from the AutoCAD-specific code. While it’s hard to give more than general pointers in this area – as applications vary greatly – we’ll at least look at the specific example we’re covering in this series: moving core F# algorithms to the cloud that will return data to be used to generate AutoCAD geometry.

Business logic separation

Scott has a great deal of experience in this process, and I’ve been lucky enough to hear him talk about the benefits of a clean separation between business logic and platform-specific code at AU, over the years. While the devil is clearly in the detail, we can (and feel free to jump in with comments, Scott et al. :-) boil the process down to separating core algorithms so that they don’t have a dependency on specific platform capabilities. For instance, you may have an algorithm that needs to create geometry inside AutoCAD, but you can either collect the data you need from the separated algorithm (which is almost a requirement if hosting on the cloud – more on this later) or implement some kind of call-back capability, so that your platform-centric code can be called as appropriate by the core algorithm.

AutoCAD itself is a pretty good example of a product that was gone through this process with respect to its own dependent platform(s): after having become a Windows-only product over the course of many releases, it took significant re-architecture to strip out AutoCAD’s Windows-specific code during the project known internally as “The Big Split”. We now have a clean codebase shared across Windows and Mac versions of AutoCAD with platform-specific modules for each.

Now I’m not specifically encouraging you to depend less on AutoCAD as a platform – why on earth would I do that? ;-) – but this approach should help you integrate more cleanly with future versions of AutoCAD along with other platforms that are important to your business.

It also has additional benefits, as Scott has highlighted: it certainly makes algorithms easier to unit-test (very important if you’re adopting Agile processes such as test-driven development) and, of course, to move to the cloud.

AutoCAD components in the cloud

You may want to use some core AutoCAD-related component on the server – such as RealDWG – but this will change the shape of your application and the work needed to implement it: if you’re able to live without having a product-specific dependency in your web-service implementation, you’ll ultimately benefit from greater flexibility.

That said, there are lots of good reasons for using RealDWG in the cloud. You clearly don’t want heavyweight files transferred between the client and server, if it can be avoided: as the cloud-based platforms available to us become more rich, I expect we’ll see more and more all being done up there. In the meantime it’s worth taking a measured approach to data transfer.

Let’s take our example web-service: we pass two arguments to it, as part of the URL (the radius of the outer circle/sphere and the “level” or number of recursion steps to take). So it’s very lightweight in that respect. We could have used RealDWG to create a DWG containing our data on the server – effectively using .DWG as the data transport – but that would have been overkill, even with the large number of entities we’re potentially talking about. Se we choose to return JSON with a reasonably small (although it could be made smaller by abbreviating the field names) footprint.

If you choose to go down the route of integrating RealDWG, I recommend this AU session from a good friend and colleague of mine – as well as an accomplished AU speaker – Albert Szilvasy:

CP231-1 – Using RealDWG™ in the Cloud

While we’re on the subject, you might want to check out this more recent session of Albert’s:

CP5163 – Moving from Desktop to Cloud

Sadly neither of these sessions were recorded, but the material should be of interest, at the very least. Be warned: the latter session is a little more future-oriented, and doesn’t necessarily reflect product capability that is either available today or in development.

What F# brings to the table

Part of the reason I chose F# in the first place for this project was that I find functional programming encourages good architectural practice: it encourages programmers to generate “pure” functions that do not modify things like the drawing database directly (these are known as “side effects”), but that return data which can then be used to do so. So from the start I wanted a clear separation of my core algorithm (my business logic) from my AutoCAD-centric code. It was therefore relatively easy to take that code and move it behind a web-service, as the code didn’t work directly with AutoCAD APIs, at all.

The original code returns a list of tuples – a core F# data-type that many of you will know from LISP – which is super-handy for returning sets of similar-looking data when you don’t want the overhead of implementing types or classes. Unfortunately these look pretty ugly when returned via JSON, so I decided to map them to lists of a temporary type I created for both Circles and Spheres. This has the advantage of having named properties (rather than m_Item1 etc.), making the JSON output easier to work with.

A side note on optimising the web-service’s behaviour: as we’ve implemented them as “pure” functions, our algorithm will always return the same results for the same arguments. This means it lends itself to some kind of memoization, so that we simply remember the results for arguments that have been used before – which could probably be implemented via some kind of caching mechanism in our web-service. I didn’t go down this path, though: I’ll leave that as a possible future exercise, as it seems an interesting challenge.

OK, I think that’s where I’m going to leave it, for today. In the next post we will take a look at consuming JSON data inside AutoCAD – honest! :-)

Exposing a RESTful web service for use inside AutoCAD using the ASP.NET Web API – Part 2

In the last post, we looked at the core technology we’re going to use to expose our web-service, along with the basic project set-up. In today’s post, we’re going to flesh out this project and see the web-service in action.

At this point, I should point out that I've switched back across for VS2010 for the purposes of this post (and its immediate successors), as it really will simplify the eventual integration with Windows Azure.

Before we dive into the implementation of our web-service, here are a few words on what we’re after…

We want to implement two web-service APIs:

1. One that will provide the circles representing an Apollonian gasket (in 2D)
2. One that will provide the spheres representing an Apollonian packing (in 3D)

Both of these services will take a radius (for the enclosing circle/sphere) and a “level” (i.e. the number of times we should recurse to create our fractal geometry).

They should be accessible via a simple URL – as we’re talking REST rather than SOAP – for example, with a provisional domain name:

http://myapollonianservice.com/circles/5/3 should return the circles enclosed in an outer circle of radius 5, recursing through 3 levels.

http://myapollonianservice.com/spheres/10/4 should return the spheres enclosed in an outer sphere of radius 10, recursing through 4 levels.

The results should be returned as JSON containing the circle/sphere definitions. These will simply be records containing fields for the center (X, Y, [Z] and radius (or curvature, for circles), and also the “level” of each circle/sphere, so we can colorise appropriately).

Let’s take a look at the structure of our boilerplate solution…

There are two projects: a C# project called ApollonianPackingWebApi that acts as the main entry-point into our code, but is very shallow. It exists to call through into the F# project, ApollonianPackingWebAppApi, where our application logic is all defined.

It’s the code in this latter project that we care about, particularly that contained in two files: Global.fs and ValuesControllers.fs file.

The standard Global.fs contains the below code which defines the way the REST API’s URL structure translates into calls into the project’s code:

namespace FsWeb

 

open System

open System.Web

open System.Web.Mvc

open System.Web.Routing

open System.Web.Http

open System.Data.Entity

 

type Route = { controller : string

               action : string

               id : UrlParameter }

 

type MapHttpRouteSettings = { id : obj }

 

type Global() =

  inherit System.Web.HttpApplication()

 

  static member RegisterGlobalFilters(filters:GlobalFilterCollection) =

    filters.Add(new HandleErrorAttribute())

 

  static member RegisterRoutes(routes:RouteCollection) =

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

 

    routes.MapHttpRoute("DefaultApi", "api/{controller}/{id}", {id = RouteParameter.Optional}) |> ignore

 

    routes.MapRoute("Default",

                    "{controller}/{action}/{id}",

                    { controller = "Home"; action = "Index"

                      id = UrlParameter.Optional } )

 

  member this.Start() =

    AreaRegistration.RegisterAllAreas()

 

    Global.RegisterGlobalFilters(GlobalFilters.Filters)

    Global.RegisterRoutes(RouteTable.Routes)

The actual “intelligence” of the app is contained in ValuesControllers.fs:

namespace FsWeb.Controllers

 

open System.Web

open System.Web.Mvc

open System.Net.Http

open System.Web.Http

 

type ValuesController() =

  inherit ApiController()

 

  // GET /api/values

  member x.Get() = [| "value1"; "value2" |] |> Array.toSeq

  // GET /api/values/5

  member x.Get (id:int) = "value"

  // POST /api/values

  member x.Post (value:string) = ()

  // PUT /api/values/5

  member x.Put (id:int) (value:string) = ()

  // DELETE /api/values/5

  member x.Delete (id:int) = ()

This should be familiar if you’ve spent time looking at the introductory blog post I pointed to, last time.

Now for the changes we want to make… Let’s start with Globals.fs, which is being adjusted to have “rad” and “steps” parameters registered for our API controller(s).

namespace FsWeb

 

open System.Web.Mvc

open System.Web.Routing

open System.Web.Http

 

type Route =

  { controller : string

    action : string

    rad : UrlParameter

    steps : UrlParameter }

 

type MapHttpRouteSettings =

  { rad : obj

    steps : obj }

 

type Global() =

  inherit System.Web.HttpApplication()

 

  static member RegisterGlobalFilters(gfc:GlobalFilterCollection) =

    gfc.Add(new HandleErrorAttribute())

 

  static member RegisterRoutes(rc:RouteCollection) =

    rc.IgnoreRoute("{resource}.axd/{*pathInfo}")

 

    rc.MapHttpRoute(

      "DefaultApi",

      "api/{controller}/{rad}/{steps}",

      { rad = RouteParameter.Optional

        steps = RouteParameter.Optional }) |> ignore

 

    rc.MapRoute(

      "Default",

      "{controller}/{action}/{rad}/{steps}",

      { controller = "Home"

        action = "Index"

        rad = UrlParameter.Optional

        steps = UrlParameter.Optional } )

 

  member this.Start() =

    AreaRegistration.RegisterAllAreas()

 

    Global.RegisterGlobalFilters(GlobalFilters.Filters)

    Global.RegisterRoutes(RouteTable.Routes)

 

The ValuesController.fs file is actually being replaced with two files: CirclesController.fs and SpheresController.fs.

Here’s CirclesController.cs, which simply calls into the CirclePackingFull.fs file copied directly from our previous project (where the code ran directly inside AutoCAD):

namespace FsWeb.Controllers

 

open System.Web.Http

 

type Circle (X, Y, Curvature, Level) =

  member this.x = X

  member this.y = Y

  member this.k = Curvature

  member this.l = Level

 

type CirclesController() =

  inherit ApiController()   

 

  // GET /api/values/rad/steps

  member x.Get(rad:double, steps:int) =

    CirclePackingFullFs.Packer.ApollonianGasket rad steps |>

      List.map (fun ((a,b,c),d) -> new Circle(a,b,c,d)) |>

      List.toSeq

 

And here’s SpheresController.fs, which calls into the analogous SpherePackingInversion.fs file (the code from this post):

namespace FsWeb.Controllers

 

open System.Web.Http

 

type Sphere (X, Y, Z, Radius, Level) =

  member this.x = X

  member this.y = Y

  member this.z = Z

  member this.r = Radius

  member this.l = Level

 

type SpheresController() =

  inherit ApiController()   

 

  // GET /api/values/rad/steps

  member x.Get(rad:double, steps:int) =

    SpherePackingInversionFs.Packer.ApollonianGasket steps 0.01 false

      |>

      List.map

        (fun ((a,b,c,d),e) -> new Sphere(a*rad,b*rad,c*rad,d*rad,e))

        |>

        List.toSeq

Now it should just be a matter of building the app and starting Internet Explorer from the debugger, which shows the default web-page provided in the boilerplate project:

To test our APIs, we can extend the URL shown in the address bar to try them both:

http://localhost:64114/api/circles/5/3

and

http://localhost:64114/api/spheres/10/4

Here is the JSON data – returned as plain text from the API – for the first call:

[{"Curvature":0.43094010767585034,"Level":3,"X":5,"Y":7.6794919243112272},{"Curvature":0.43094010767585034,"Level":3,"X":7.3205080756887728,"Y":3.6602540378443873},{"Curvature":0.43094010767585034,"Level":3,"X":2.6794919243112272,"Y":3.6602540378443873},{"Curvature":2.7856406460551022,"Level":2,"X":4.9999999999999991,"Y":5},{"Curvature":6.8641016151377556,"Level":1,"X":5.4370564668483263,"Y":5.2523346687859487},{"Curvature":12.66632301492381,"Level":0,"X":5.6315960828232612,"Y":5.3646521684371233},{"Curvature":19.730424630061563,"Level":0,"X":5.4054651711758446,"Y":5.0585238564313482},{"Curvature":19.730424630061563,"Level":0,"X":5.2534157319849024,"Y":5.321881210372414},{"Curvature":6.8641016151377556,"Level":1,"X":4.9999999999999991,"Y":4.4953306624281035},{"Curvature":12.66632301492381,"Level":0,"X":4.9999999999999982,"Y":4.2706956631257533},{"Curvature":19.730424630061563,"Level":0,"X":4.8479505608090578,"Y":4.6195949331962387},{"Curvature":19.730424630061563,"Level":0,"X":5.15204943919094,"Y":4.6195949331962387},{"Curvature":6.8641016151377556,"Level":1,"X":4.5629435331516728,"Y":5.2523346687859487},{"Curvature":12.66632301492381,"Level":0,"X":4.3684039171767388,"Y":5.3646521684371242},{"Curvature":19.730424630061563,"Level":0,"X":4.7465842680150976,"Y":5.3218812103724131},{"Curvature":19.730424630061563,"Level":0,"X":4.5945348288241563,"Y":5.0585238564313491},{"Curvature":0.8928203230275511,"Level":1,"X":8.3601385660969356,"Y":6.93997690565051},{"Curvature":3.7094010767585033,"Level":0,"X":7.156682395474709,"Y":6.2451611615838516},{"Curvature":1.8165807537309524,"Level":0,"X":9.4038779908734238,"Y":5.6356450358772605},{"Curvature":1.8165807537309524,"Level":0,"X":7.7524237442958892,"Y":8.496047697324931},{"Curvature":0.8928203230275511,"Level":1,"X":4.9999999999999982,"Y":1.1200461886989812},{"Curvature":3.7094010767585033,"Level":0,"X":5,"Y":2.509677676832299},{"Curvature":1.8165807537309524,"Level":0,"X":3.3485457534224632,"Y":0.86830726679781078},{"Curvature":1.8165807537309524,"Level":0,"X":6.6514542465775328,"Y":0.86830726679781056},{"Curvature":0.8928203230275511,"Level":1,"X":1.6398614339030615,"Y":6.9399769056505116},{"Curvature":1.8165807537309524,"Level":0,"X":2.2475762557041086,"Y":8.4960476973249328},{"Curvature":3.7094010767585033,"Level":0,"X":2.8433176045252893,"Y":6.2451611615838525},{"Curvature":1.8165807537309524,"Level":0,"X":0.59612200912657454,"Y":5.6356450358772623}]

And here’s the JSON for the second:

[{"Level":2,"Radius":1.0102051443364382,"X":0,"Y":0,"Z":0},{"Level":3,"Radius":0.89897948556635621,"X":1.9070234711746936,"Y":-1.9070234711746936,"Z":-1.9070234711746936},{"Level":4,"Radius":0.73674517520435534,"X":-1.5628725281804123,"Y":1.5628725281804123,"Z":-4.6886175845412374},{"Level":5,"Radius":0.28271609708738882,"X":-0.599731408203261,"Y":0.599731408203261,"Z":-1.7991942246097827},{"Level":5,"Radius":0.67576886917362144,"X":0,"Y":0,"Z":-5.7340889988891917},{"Level":5,"Radius":0.54135422270335332,"X":-5.7419286284627038,"Y":-3.4451571770776228,"Z":1.1483857256925409},{"Level":5,"Radius":0.54135422270335332,"X":3.4451571770776228,"Y":5.7419286284627038,"Z":1.1483857256925409},{"Level":4,"Radius":0.73674517520435534,"X":-1.5628725281804123,"Y":-4.6886175845412374,"Z":1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":-0.599731408203261,"Y":-1.7991942246097827,"Z":0.599731408203261},{"Level":5,"Radius":0.67576886917362144,"X":0,"Y":-5.7340889988891917,"Z":0},{"Level":5,"Radius":0.54135422270335332,"X":-5.7419286284627038,"Y":1.1483857256925409,"Z":-3.4451571770776228},{"Level":5,"Radius":0.54135422270335332,"X":3.4451571770776228,"Y":1.1483857256925409,"Z":5.7419286284627038},{"Level":4,"Radius":0.73674517520435534,"X":4.6886175845412374,"Y":1.5628725281804123,"Z":1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":1.7991942246097827,"Y":0.599731408203261,"Z":0.599731408203261},{"Level":5,"Radius":0.67576886917362144,"X":5.7340889988891917,"Y":0,"Z":0},{"Level":5,"Radius":0.54135422270335332,"X":-1.1483857256925409,"Y":5.7419286284627038,"Z":-3.4451571770776228},{"Level":5,"Radius":0.54135422270335332,"X":-1.1483857256925409,"Y":-3.4451571770776228,"Z":5.7419286284627038},{"Level":3,"Radius":0.89897948556635621,"X":-1.9070234711746936,"Y":1.9070234711746936,"Z":-1.9070234711746936},{"Level":4,"Radius":0.73674517520435534,"X":1.5628725281804123,"Y":-1.5628725281804123,"Z":-4.6886175845412374},{"Level":5,"Radius":0.28271609708738882,"X":0.599731408203261,"Y":-0.599731408203261,"Z":-1.7991942246097827},{"Level":5,"Radius":0.54135422270335332,"X":-3.4451571770776228,"Y":-5.7419286284627038,"Z":1.1483857256925409},{"Level":5,"Radius":0.54135422270335332,"X":5.7419286284627038,"Y":3.4451571770776228,"Z":1.1483857256925409},{"Level":4,"Radius":0.73674517520435534,"X":-4.6886175845412374,"Y":-1.5628725281804123,"Z":1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":-1.7991942246097827,"Y":-0.599731408203261,"Z":0.599731408203261},{"Level":5,"Radius":0.54135422270335332,"X":1.1483857256925409,"Y":-5.7419286284627038,"Z":-3.4451571770776228},{"Level":5,"Radius":0.67576886917362144,"X":-5.7340889988891917,"Y":0,"Z":0},{"Level":5,"Radius":0.54135422270335332,"X":1.1483857256925409,"Y":3.4451571770776228,"Z":5.7419286284627038},{"Level":4,"Radius":0.73674517520435534,"X":1.5628725281804123,"Y":4.6886175845412374,"Z":1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":0.599731408203261,"Y":1.7991942246097827,"Z":0.599731408203261},{"Level":5,"Radius":0.54135422270335332,"X":5.7419286284627038,"Y":-1.1483857256925409,"Z":-3.4451571770776228},{"Level":5,"Radius":0.67576886917362144,"X":0,"Y":5.7340889988891917,"Z":0},{"Level":5,"Radius":0.54135422270335332,"X":-3.4451571770776228,"Y":-1.1483857256925409,"Z":5.7419286284627038},{"Level":3,"Radius":0.89897948556635621,"X":-1.9070234711746936,"Y":-1.9070234711746936,"Z":1.9070234711746936},{"Level":4,"Radius":0.73674517520435534,"X":1.5628725281804123,"Y":-4.6886175845412374,"Z":-1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":0.599731408203261,"Y":-1.7991942246097827,"Z":-0.599731408203261},{"Level":5,"Radius":0.54135422270335332,"X":-3.4451571770776228,"Y":1.1483857256925409,"Z":-5.7419286284627038},{"Level":5,"Radius":0.54135422270335332,"X":5.7419286284627038,"Y":1.1483857256925409,"Z":3.4451571770776228},{"Level":4,"Radius":0.73674517520435534,"X":-4.6886175845412374,"Y":1.5628725281804123,"Z":-1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":-1.7991942246097827,"Y":0.599731408203261,"Z":-0.599731408203261},{"Level":5,"Radius":0.54135422270335332,"X":1.1483857256925409,"Y":-3.4451571770776228,"Z":-5.7419286284627038},{"Level":5,"Radius":0.54135422270335332,"X":1.1483857256925409,"Y":5.7419286284627038,"Z":3.4451571770776228},{"Level":4,"Radius":0.73674517520435534,"X":1.5628725281804123,"Y":1.5628725281804123,"Z":4.6886175845412374},{"Level":5,"Radius":0.28271609708738882,"X":0.599731408203261,"Y":0.599731408203261,"Z":1.7991942246097827},{"Level":5,"Radius":0.54135422270335332,"X":5.7419286284627038,"Y":-3.4451571770776228,"Z":-1.1483857256925409},{"Level":5,"Radius":0.54135422270335332,"X":-3.4451571770776228,"Y":5.7419286284627038,"Z":-1.1483857256925409},{"Level":5,"Radius":0.67576886917362144,"X":0,"Y":0,"Z":5.7340889988891917},{"Level":3,"Radius":0.89897948556635621,"X":1.9070234711746936,"Y":1.9070234711746936,"Z":1.9070234711746936},{"Level":4,"Radius":0.73674517520435534,"X":4.6886175845412374,"Y":-1.5628725281804123,"Z":-1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":1.7991942246097827,"Y":-0.599731408203261,"Z":-0.599731408203261},{"Level":5,"Radius":0.54135422270335332,"X":-1.1483857256925409,"Y":3.4451571770776228,"Z":-5.7419286284627038},{"Level":5,"Radius":0.54135422270335332,"X":-1.1483857256925409,"Y":-5.7419286284627038,"Z":3.4451571770776228},{"Level":4,"Radius":0.73674517520435534,"X":-1.5628725281804123,"Y":4.6886175845412374,"Z":-1.5628725281804123},{"Level":5,"Radius":0.28271609708738882,"X":-0.599731408203261,"Y":1.7991942246097827,"Z":-0.599731408203261},{"Level":5,"Radius":0.54135422270335332,"X":3.4451571770776228,"Y":-1.1483857256925409,"Z":-5.7419286284627038},{"Level":5,"Radius":0.54135422270335332,"X":-5.7419286284627038,"Y":-1.1483857256925409,"Z":3.4451571770776228},{"Level":4,"Radius":0.73674517520435534,"X":-1.5628725281804123,"Y":-1.5628725281804123,"Z":4.6886175845412374},{"Level":5,"Radius":0.28271609708738882,"X":-0.599731408203261,"Y":-0.599731408203261,"Z":1.7991942246097827},{"Level":5,"Radius":0.54135422270335332,"X":3.4451571770776228,"Y":-5.7419286284627038,"Z":-1.1483857256925409},{"Level":5,"Radius":0.54135422270335332,"X":-5.7419286284627038,"Y":3.4451571770776228,"Z":-1.1483857256925409},{"Level":1,"Radius":4.4948974278317806,"X":-3.1783724519578227,"Y":3.1783724519578227,"Z":3.1783724519578227},{"Level":2,"Radius":2.8989794855663567,"X":4.09977610552932,"Y":-4.09977610552932,"Z":-4.09977610552932},{"Level":3,"Radius":0.69693845669906873,"X":0.98561981760319706,"Y":-0.98561981760319706,"Z":-0.98561981760319706},{"Level":4,"Radius":0.59531041938993878,"X":-1.6837921378465335,"Y":1.6837921378465335,"Z":-3.367584275693067},{"Level":5,"Radius":0.361050735467887,"X":-1.0212056936069329,"Y":1.0212056936069329,"Z":-2.0424113872138658},{"Level":5,"Radius":0.51954937761543474,"X":0.73475377614624837,"Y":-0.73475377614624837,"Z":-5.1432764330237379},{"Level":5,"Radius":0.46089451836521378,"X":-5.2144262295640074,"Y":-2.6072131147820037,"Z":1.3036065573910018},{"Level":5,"Radius":0.46089451836521378,"X":2.6072131147820037,"Y":5.2144262295640074,"Z":1.3036065573910018},{"Level":4,"Radius":0.59531041938993878,"X":-1.6837921378465335,"Y":-3.367584275693067,"Z":1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":-1.0212056936069329,"Y":-2.0424113872138658,"Z":1.0212056936069329},{"Level":5,"Radius":0.51954937761543474,"X":0.73475377614624837,"Y":-5.1432764330237379,"Z":-0.73475377614624837},{"Level":5,"Radius":0.46089451836521378,"X":-5.2144262295640074,"Y":1.3036065573910018,"Z":-2.6072131147820037},{"Level":5,"Radius":0.46089451836521378,"X":2.6072131147820037,"Y":1.3036065573910018,"Z":5.2144262295640074},{"Level":4,"Radius":0.59531041938993878,"X":3.367584275693067,"Y":1.6837921378465335,"Z":1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":2.0424113872138658,"Y":1.0212056936069329,"Z":1.0212056936069329},{"Level":5,"Radius":0.51954937761543474,"X":5.1432764330237379,"Y":-0.73475377614624837,"Z":-0.73475377614624837},{"Level":5,"Radius":0.46089451836521378,"X":-1.3036065573910018,"Y":5.2144262295640074,"Z":-2.6072131147820037},{"Level":5,"Radius":0.46089451836521378,"X":-1.3036065573910018,"Y":-2.6072131147820037,"Z":5.2144262295640074},{"Level":3,"Radius":2.139387691339814,"X":-1.5127755441334152,"Y":1.5127755441334152,"Z":-7.5638777206670751},{"Level":4,"Radius":0.37775486824598364,"X":-0.2671130289629659,"Y":0.2671130289629659,"Z":-1.3355651448148294},{"Level":5,"Radius":0.34576134060244468,"X":1.2224509430607009,"Y":-1.2224509430607009,"Z":-2.6893920747335427},{"Level":5,"Radius":0.31876398046728993,"X":-2.9302022384236803,"Y":-2.479401894050806,"Z":1.5778012053050583},{"Level":5,"Radius":0.31876398046728993,"X":2.479401894050806,"Y":2.9302022384236803,"Z":1.5778012053050583},{"Level":4,"Radius":1.4037600977966975,"X":-6.94825799017795,"Y":-4.96304142155568,"Z":0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":-0.97590346538812722,"Y":-0.6970739038486623,"Z":0.13941478076973246},{"Level":5,"Radius":1.0445812551367069,"X":-0.7386304890075206,"Y":-8.1249353790827268,"Z":-3.6931524450376023},{"Level":5,"Radius":1.1978243827074595,"X":-8.469897436830351,"Y":-1.6939794873660703,"Z":-1.6939794873660703},{"Level":5,"Radius":0.83175965498126991,"X":2.9407144617731955,"Y":4.1170002464824735,"Z":7.6458576006103094},{"Level":4,"Radius":1.4037600977966975,"X":4.96304142155568,"Y":6.94825799017795,"Z":0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":0.6970739038486623,"Y":0.97590346538812722,"Z":0.13941478076973246},{"Level":5,"Radius":1.0445812551367069,"X":8.1249353790827268,"Y":0.7386304890075206,"Z":-3.6931524450376023},{"Level":5,"Radius":1.1978243827074595,"X":1.6939794873660703,"Y":8.469897436830351,"Z":-1.6939794873660703},{"Level":5,"Radius":0.83175965498126991,"X":-4.1170002464824735,"Y":-2.9407144617731955,"Z":7.6458576006103094},{"Level":3,"Radius":2.139387691339814,"X":-1.5127755441334152,"Y":-7.5638777206670751,"Z":1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":-0.2671130289629659,"Y":-1.3355651448148294,"Z":0.2671130289629659},{"Level":5,"Radius":0.34576134060244468,"X":1.2224509430607009,"Y":-2.6893920747335427,"Z":-1.2224509430607009},{"Level":5,"Radius":0.31876398046728993,"X":-2.9302022384236803,"Y":1.5778012053050583,"Z":-2.479401894050806},{"Level":5,"Radius":0.31876398046728993,"X":2.479401894050806,"Y":1.5778012053050583,"Z":2.9302022384236803},{"Level":4,"Radius":1.4037600977966975,"X":-6.94825799017795,"Y":0.992608284311136,"Z":-4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":-0.97590346538812722,"Y":0.13941478076973246,"Z":-0.6970739038486623},{"Level":5,"Radius":1.0445812551367069,"X":-0.7386304890075206,"Y":-3.6931524450376023,"Z":-8.1249353790827268},{"Level":5,"Radius":0.83175965498126991,"X":2.9407144617731955,"Y":7.6458576006103094,"Z":4.1170002464824735},{"Level":4,"Radius":1.4037600977966975,"X":4.96304142155568,"Y":0.992608284311136,"Z":6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":0.6970739038486623,"Y":0.13941478076973246,"Z":0.97590346538812722},{"Level":5,"Radius":1.0445812551367069,"X":8.1249353790827268,"Y":-3.6931524450376023,"Z":0.7386304890075206},{"Level":5,"Radius":0.83175965498126991,"X":-4.1170002464824735,"Y":7.6458576006103094,"Z":-2.9407144617731955},{"Level":5,"Radius":1.1978243827074595,"X":1.6939794873660703,"Y":-1.6939794873660703,"Z":8.469897436830351},{"Level":3,"Radius":2.139387691339814,"X":7.5638777206670751,"Y":1.5127755441334152,"Z":1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":1.3355651448148294,"Y":0.2671130289629659,"Z":0.2671130289629659},{"Level":5,"Radius":0.34576134060244468,"X":2.6893920747335427,"Y":-1.2224509430607009,"Z":-1.2224509430607009},{"Level":5,"Radius":0.31876398046728993,"X":-1.5778012053050583,"Y":2.9302022384236803,"Z":-2.479401894050806},{"Level":5,"Radius":0.31876398046728993,"X":-1.5778012053050583,"Y":-2.479401894050806,"Z":2.9302022384236803},{"Level":4,"Radius":1.4037600977966975,"X":-0.992608284311136,"Y":6.94825799017795,"Z":-4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":-0.13941478076973246,"Y":0.97590346538812722,"Z":-0.6970739038486623},{"Level":5,"Radius":1.0445812551367069,"X":3.6931524450376023,"Y":0.7386304890075206,"Z":-8.1249353790827268},{"Level":5,"Radius":0.83175965498126991,"X":-7.6458576006103094,"Y":-2.9407144617731955,"Z":4.1170002464824735},{"Level":4,"Radius":1.4037600977966975,"X":-0.992608284311136,"Y":-4.96304142155568,"Z":6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":-0.13941478076973246,"Y":-0.6970739038486623,"Z":0.97590346538812722},{"Level":5,"Radius":1.0445812551367069,"X":3.6931524450376023,"Y":-8.1249353790827268,"Z":0.7386304890075206},{"Level":5,"Radius":0.83175965498126991,"X":-7.6458576006103094,"Y":4.1170002464824735,"Z":-2.9407144617731955},{"Level":1,"Radius":4.4948974278317806,"X":3.1783724519578227,"Y":-3.1783724519578227,"Z":3.1783724519578227},{"Level":2,"Radius":2.8989794855663567,"X":-4.09977610552932,"Y":4.09977610552932,"Z":-4.09977610552932},{"Level":3,"Radius":0.69693845669906873,"X":-0.98561981760319706,"Y":0.98561981760319706,"Z":-0.98561981760319706},{"Level":4,"Radius":0.59531041938993878,"X":1.6837921378465335,"Y":-1.6837921378465335,"Z":-3.367584275693067},{"Level":5,"Radius":0.361050735467887,"X":1.0212056936069329,"Y":-1.0212056936069329,"Z":-2.0424113872138658},{"Level":5,"Radius":0.51954937761543474,"X":-0.73475377614624837,"Y":0.73475377614624837,"Z":-5.1432764330237379},{"Level":5,"Radius":0.46089451836521378,"X":-2.6072131147820037,"Y":-5.2144262295640074,"Z":1.3036065573910018},{"Level":5,"Radius":0.46089451836521378,"X":5.2144262295640074,"Y":2.6072131147820037,"Z":1.3036065573910018},{"Level":4,"Radius":0.59531041938993878,"X":-3.367584275693067,"Y":-1.6837921378465335,"Z":1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":-2.0424113872138658,"Y":-1.0212056936069329,"Z":1.0212056936069329},{"Level":5,"Radius":0.46089451836521378,"X":1.3036065573910018,"Y":-5.2144262295640074,"Z":-2.6072131147820037},{"Level":5,"Radius":0.51954937761543474,"X":-5.1432764330237379,"Y":0.73475377614624837,"Z":-0.73475377614624837},{"Level":5,"Radius":0.46089451836521378,"X":1.3036065573910018,"Y":2.6072131147820037,"Z":5.2144262295640074},{"Level":4,"Radius":0.59531041938993878,"X":1.6837921378465335,"Y":3.367584275693067,"Z":1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":1.0212056936069329,"Y":2.0424113872138658,"Z":1.0212056936069329},{"Level":5,"Radius":0.46089451836521378,"X":5.2144262295640074,"Y":-1.3036065573910018,"Z":-2.6072131147820037},{"Level":5,"Radius":0.51954937761543474,"X":-0.73475377614624837,"Y":5.1432764330237379,"Z":-0.73475377614624837},{"Level":5,"Radius":0.46089451836521378,"X":-2.6072131147820037,"Y":-1.3036065573910018,"Z":5.2144262295640074},{"Level":3,"Radius":2.139387691339814,"X":1.5127755441334152,"Y":-1.5127755441334152,"Z":-7.5638777206670751},{"Level":4,"Radius":0.37775486824598364,"X":0.2671130289629659,"Y":-0.2671130289629659,"Z":-1.3355651448148294},{"Level":5,"Radius":0.34576134060244468,"X":-1.2224509430607009,"Y":1.2224509430607009,"Z":-2.6893920747335427},{"Level":5,"Radius":0.31876398046728993,"X":-2.479401894050806,"Y":-2.9302022384236803,"Z":1.5778012053050583},{"Level":5,"Radius":0.31876398046728993,"X":2.9302022384236803,"Y":2.479401894050806,"Z":1.5778012053050583},{"Level":4,"Radius":1.4037600977966975,"X":-4.96304142155568,"Y":-6.94825799017795,"Z":0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":-0.6970739038486623,"Y":-0.97590346538812722,"Z":0.13941478076973246},{"Level":5,"Radius":1.1978243827074595,"X":-1.6939794873660703,"Y":-8.469897436830351,"Z":-1.6939794873660703},{"Level":5,"Radius":1.0445812551367069,"X":-8.1249353790827268,"Y":-0.7386304890075206,"Z":-3.6931524450376023},{"Level":5,"Radius":0.83175965498126991,"X":4.1170002464824735,"Y":2.9407144617731955,"Z":7.6458576006103094},{"Level":4,"Radius":1.4037600977966975,"X":6.94825799017795,"Y":4.96304142155568,"Z":0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":0.97590346538812722,"Y":0.6970739038486623,"Z":0.13941478076973246},{"Level":5,"Radius":1.1978243827074595,"X":8.469897436830351,"Y":1.6939794873660703,"Z":-1.6939794873660703},{"Level":5,"Radius":1.0445812551367069,"X":0.7386304890075206,"Y":8.1249353790827268,"Z":-3.6931524450376023},{"Level":5,"Radius":0.83175965498126991,"X":-2.9407144617731955,"Y":-4.1170002464824735,"Z":7.6458576006103094},{"Level":3,"Radius":2.139387691339814,"X":-7.5638777206670751,"Y":-1.5127755441334152,"Z":1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":-1.3355651448148294,"Y":-0.2671130289629659,"Z":0.2671130289629659},{"Level":5,"Radius":0.31876398046728993,"X":1.5778012053050583,"Y":-2.9302022384236803,"Z":-2.479401894050806},{"Level":5,"Radius":0.34576134060244468,"X":-2.6893920747335427,"Y":1.2224509430607009,"Z":-1.2224509430607009},{"Level":5,"Radius":0.31876398046728993,"X":1.5778012053050583,"Y":2.479401894050806,"Z":2.9302022384236803},{"Level":4,"Radius":1.4037600977966975,"X":0.992608284311136,"Y":-6.94825799017795,"Z":-4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":0.13941478076973246,"Y":-0.97590346538812722,"Z":-0.6970739038486623},{"Level":5,"Radius":1.0445812551367069,"X":-3.6931524450376023,"Y":-0.7386304890075206,"Z":-8.1249353790827268},{"Level":5,"Radius":0.83175965498126991,"X":7.6458576006103094,"Y":2.9407144617731955,"Z":4.1170002464824735},{"Level":4,"Radius":1.4037600977966975,"X":0.992608284311136,"Y":4.96304142155568,"Z":6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":0.13941478076973246,"Y":0.6970739038486623,"Z":0.97590346538812722},{"Level":5,"Radius":0.83175965498126991,"X":7.6458576006103094,"Y":-4.1170002464824735,"Z":-2.9407144617731955},{"Level":5,"Radius":1.0445812551367069,"X":-3.6931524450376023,"Y":8.1249353790827268,"Z":0.7386304890075206},{"Level":5,"Radius":1.1978243827074595,"X":-1.6939794873660703,"Y":1.6939794873660703,"Z":8.469897436830351},{"Level":3,"Radius":2.139387691339814,"X":1.5127755441334152,"Y":7.5638777206670751,"Z":1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":0.2671130289629659,"Y":1.3355651448148294,"Z":0.2671130289629659},{"Level":5,"Radius":0.31876398046728993,"X":2.9302022384236803,"Y":-1.5778012053050583,"Z":-2.479401894050806},{"Level":5,"Radius":0.34576134060244468,"X":-1.2224509430607009,"Y":2.6893920747335427,"Z":-1.2224509430607009},{"Level":5,"Radius":0.31876398046728993,"X":-2.479401894050806,"Y":-1.5778012053050583,"Z":2.9302022384236803},{"Level":4,"Radius":1.4037600977966975,"X":6.94825799017795,"Y":-0.992608284311136,"Z":-4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":0.97590346538812722,"Y":-0.13941478076973246,"Z":-0.6970739038486623},{"Level":5,"Radius":1.0445812551367069,"X":0.7386304890075206,"Y":3.6931524450376023,"Z":-8.1249353790827268},{"Level":5,"Radius":0.83175965498126991,"X":-2.9407144617731955,"Y":-7.6458576006103094,"Z":4.1170002464824735},{"Level":4,"Radius":1.4037600977966975,"X":-4.96304142155568,"Y":-0.992608284311136,"Z":6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":-0.6970739038486623,"Y":-0.13941478076973246,"Z":0.97590346538812722},{"Level":5,"Radius":0.83175965498126991,"X":4.1170002464824735,"Y":-7.6458576006103094,"Z":-2.9407144617731955},{"Level":5,"Radius":1.0445812551367069,"X":-8.1249353790827268,"Y":3.6931524450376023,"Z":0.7386304890075206},{"Level":1,"Radius":4.4948974278317806,"X":3.1783724519578227,"Y":3.1783724519578227,"Z":-3.1783724519578227},{"Level":2,"Radius":2.8989794855663567,"X":-4.09977610552932,"Y":-4.09977610552932,"Z":4.09977610552932},{"Level":3,"Radius":0.69693845669906873,"X":-0.98561981760319706,"Y":-0.98561981760319706,"Z":0.98561981760319706},{"Level":4,"Radius":0.59531041938993878,"X":1.6837921378465335,"Y":-3.367584275693067,"Z":-1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":1.0212056936069329,"Y":-2.0424113872138658,"Z":-1.0212056936069329},{"Level":5,"Radius":0.46089451836521378,"X":-2.6072131147820037,"Y":1.3036065573910018,"Z":-5.2144262295640074},{"Level":5,"Radius":0.51954937761543474,"X":-0.73475377614624837,"Y":-5.1432764330237379,"Z":0.73475377614624837},{"Level":5,"Radius":0.46089451836521378,"X":5.2144262295640074,"Y":1.3036065573910018,"Z":2.6072131147820037},{"Level":4,"Radius":0.59531041938993878,"X":-3.367584275693067,"Y":1.6837921378465335,"Z":-1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":-2.0424113872138658,"Y":1.0212056936069329,"Z":-1.0212056936069329},{"Level":5,"Radius":0.46089451836521378,"X":1.3036065573910018,"Y":-2.6072131147820037,"Z":-5.2144262295640074},{"Level":5,"Radius":0.51954937761543474,"X":-5.1432764330237379,"Y":-0.73475377614624837,"Z":0.73475377614624837},{"Level":5,"Radius":0.46089451836521378,"X":1.3036065573910018,"Y":5.2144262295640074,"Z":2.6072131147820037},{"Level":4,"Radius":0.59531041938993878,"X":1.6837921378465335,"Y":1.6837921378465335,"Z":3.367584275693067},{"Level":5,"Radius":0.361050735467887,"X":1.0212056936069329,"Y":1.0212056936069329,"Z":2.0424113872138658},{"Level":5,"Radius":0.46089451836521378,"X":5.2144262295640074,"Y":-2.6072131147820037,"Z":-1.3036065573910018},{"Level":5,"Radius":0.46089451836521378,"X":-2.6072131147820037,"Y":5.2144262295640074,"Z":-1.3036065573910018},{"Level":5,"Radius":0.51954937761543474,"X":-0.73475377614624837,"Y":-0.73475377614624837,"Z":5.1432764330237379},{"Level":3,"Radius":2.139387691339814,"X":1.5127755441334152,"Y":-7.5638777206670751,"Z":-1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":0.2671130289629659,"Y":-1.3355651448148294,"Z":-0.2671130289629659},{"Level":5,"Radius":0.31876398046728993,"X":-2.479401894050806,"Y":1.5778012053050583,"Z":-2.9302022384236803},{"Level":5,"Radius":0.34576134060244468,"X":-1.2224509430607009,"Y":-2.6893920747335427,"Z":1.2224509430607009},{"Level":5,"Radius":0.31876398046728993,"X":2.9302022384236803,"Y":1.5778012053050583,"Z":2.479401894050806},{"Level":4,"Radius":1.4037600977966975,"X":-4.96304142155568,"Y":0.992608284311136,"Z":-6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":-0.6970739038486623,"Y":0.13941478076973246,"Z":-0.97590346538812722},{"Level":5,"Radius":1.1978243827074595,"X":-1.6939794873660703,"Y":-1.6939794873660703,"Z":-8.469897436830351},{"Level":5,"Radius":1.0445812551367069,"X":-8.1249353790827268,"Y":-3.6931524450376023,"Z":-0.7386304890075206},{"Level":5,"Radius":0.83175965498126991,"X":4.1170002464824735,"Y":7.6458576006103094,"Z":2.9407144617731955},{"Level":4,"Radius":1.4037600977966975,"X":6.94825799017795,"Y":0.992608284311136,"Z":4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":0.97590346538812722,"Y":0.13941478076973246,"Z":0.6970739038486623},{"Level":5,"Radius":1.1978243827074595,"X":8.469897436830351,"Y":-1.6939794873660703,"Z":1.6939794873660703},{"Level":5,"Radius":0.83175965498126991,"X":-2.9407144617731955,"Y":7.6458576006103094,"Z":-4.1170002464824735},{"Level":5,"Radius":1.0445812551367069,"X":0.7386304890075206,"Y":-3.6931524450376023,"Z":8.1249353790827268},{"Level":3,"Radius":2.139387691339814,"X":-7.5638777206670751,"Y":1.5127755441334152,"Z":-1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":-1.3355651448148294,"Y":0.2671130289629659,"Z":-0.2671130289629659},{"Level":5,"Radius":0.31876398046728993,"X":1.5778012053050583,"Y":-2.479401894050806,"Z":-2.9302022384236803},{"Level":5,"Radius":0.34576134060244468,"X":-2.6893920747335427,"Y":-1.2224509430607009,"Z":1.2224509430607009},{"Level":5,"Radius":0.31876398046728993,"X":1.5778012053050583,"Y":2.9302022384236803,"Z":2.479401894050806},{"Level":4,"Radius":1.4037600977966975,"X":0.992608284311136,"Y":-4.96304142155568,"Z":-6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":0.13941478076973246,"Y":-0.6970739038486623,"Z":-0.97590346538812722},{"Level":5,"Radius":1.0445812551367069,"X":-3.6931524450376023,"Y":-8.1249353790827268,"Z":-0.7386304890075206},{"Level":5,"Radius":0.83175965498126991,"X":7.6458576006103094,"Y":4.1170002464824735,"Z":2.9407144617731955},{"Level":4,"Radius":1.4037600977966975,"X":0.992608284311136,"Y":6.94825799017795,"Z":4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":0.13941478076973246,"Y":0.97590346538812722,"Z":0.6970739038486623},{"Level":5,"Radius":0.83175965498126991,"X":7.6458576006103094,"Y":-2.9407144617731955,"Z":-4.1170002464824735},{"Level":5,"Radius":1.1978243827074595,"X":-1.6939794873660703,"Y":8.469897436830351,"Z":1.6939794873660703},{"Level":5,"Radius":1.0445812551367069,"X":-3.6931524450376023,"Y":0.7386304890075206,"Z":8.1249353790827268},{"Level":3,"Radius":2.139387691339814,"X":1.5127755441334152,"Y":1.5127755441334152,"Z":7.5638777206670751},{"Level":4,"Radius":0.37775486824598364,"X":0.2671130289629659,"Y":0.2671130289629659,"Z":1.3355651448148294},{"Level":5,"Radius":0.31876398046728993,"X":2.9302022384236803,"Y":-2.479401894050806,"Z":-1.5778012053050583},{"Level":5,"Radius":0.31876398046728993,"X":-2.479401894050806,"Y":2.9302022384236803,"Z":-1.5778012053050583},{"Level":5,"Radius":0.34576134060244468,"X":-1.2224509430607009,"Y":-1.2224509430607009,"Z":2.6893920747335427},{"Level":4,"Radius":1.4037600977966975,"X":6.94825799017795,"Y":-4.96304142155568,"Z":-0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":0.97590346538812722,"Y":-0.6970739038486623,"Z":-0.13941478076973246},{"Level":5,"Radius":0.83175965498126991,"X":-2.9407144617731955,"Y":4.1170002464824735,"Z":-7.6458576006103094},{"Level":5,"Radius":1.0445812551367069,"X":0.7386304890075206,"Y":-8.1249353790827268,"Z":3.6931524450376023},{"Level":4,"Radius":1.4037600977966975,"X":-4.96304142155568,"Y":6.94825799017795,"Z":-0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":-0.6970739038486623,"Y":0.97590346538812722,"Z":-0.13941478076973246},{"Level":5,"Radius":0.83175965498126991,"X":4.1170002464824735,"Y":-2.9407144617731955,"Z":-7.6458576006103094},{"Level":5,"Radius":1.0445812551367069,"X":-8.1249353790827268,"Y":0.7386304890075206,"Z":3.6931524450376023},{"Level":1,"Radius":4.4948974278317806,"X":-3.1783724519578227,"Y":-3.1783724519578227,"Z":-3.1783724519578227},{"Level":2,"Radius":2.8989794855663567,"X":4.09977610552932,"Y":4.09977610552932,"Z":4.09977610552932},{"Level":3,"Radius":0.69693845669906873,"X":0.98561981760319706,"Y":0.98561981760319706,"Z":0.98561981760319706},{"Level":4,"Radius":0.59531041938993878,"X":3.367584275693067,"Y":-1.6837921378465335,"Z":-1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":2.0424113872138658,"Y":-1.0212056936069329,"Z":-1.0212056936069329},{"Level":5,"Radius":0.46089451836521378,"X":-1.3036065573910018,"Y":2.6072131147820037,"Z":-5.2144262295640074},{"Level":5,"Radius":0.46089451836521378,"X":-1.3036065573910018,"Y":-5.2144262295640074,"Z":2.6072131147820037},{"Level":5,"Radius":0.51954937761543474,"X":5.1432764330237379,"Y":0.73475377614624837,"Z":0.73475377614624837},{"Level":4,"Radius":0.59531041938993878,"X":-1.6837921378465335,"Y":3.367584275693067,"Z":-1.6837921378465335},{"Level":5,"Radius":0.361050735467887,"X":-1.0212056936069329,"Y":2.0424113872138658,"Z":-1.0212056936069329},{"Level":5,"Radius":0.46089451836521378,"X":2.6072131147820037,"Y":-1.3036065573910018,"Z":-5.2144262295640074},{"Level":5,"Radius":0.46089451836521378,"X":-5.2144262295640074,"Y":-1.3036065573910018,"Z":2.6072131147820037},{"Level":5,"Radius":0.51954937761543474,"X":0.73475377614624837,"Y":5.1432764330237379,"Z":0.73475377614624837},{"Level":4,"Radius":0.59531041938993878,"X":-1.6837921378465335,"Y":-1.6837921378465335,"Z":3.367584275693067},{"Level":5,"Radius":0.361050735467887,"X":-1.0212056936069329,"Y":-1.0212056936069329,"Z":2.0424113872138658},{"Level":5,"Radius":0.46089451836521378,"X":2.6072131147820037,"Y":-5.2144262295640074,"Z":-1.3036065573910018},{"Level":5,"Radius":0.46089451836521378,"X":-5.2144262295640074,"Y":2.6072131147820037,"Z":-1.3036065573910018},{"Level":5,"Radius":0.51954937761543474,"X":0.73475377614624837,"Y":0.73475377614624837,"Z":5.1432764330237379},{"Level":3,"Radius":2.139387691339814,"X":7.5638777206670751,"Y":-1.5127755441334152,"Z":-1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":1.3355651448148294,"Y":-0.2671130289629659,"Z":-0.2671130289629659},{"Level":5,"Radius":0.31876398046728993,"X":-1.5778012053050583,"Y":2.479401894050806,"Z":-2.9302022384236803},{"Level":5,"Radius":0.31876398046728993,"X":-1.5778012053050583,"Y":-2.9302022384236803,"Z":2.479401894050806},{"Level":5,"Radius":0.34576134060244468,"X":2.6893920747335427,"Y":1.2224509430607009,"Z":1.2224509430607009},{"Level":4,"Radius":1.4037600977966975,"X":-0.992608284311136,"Y":4.96304142155568,"Z":-6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":-0.13941478076973246,"Y":0.6970739038486623,"Z":-0.97590346538812722},{"Level":5,"Radius":1.1978243827074595,"X":1.6939794873660703,"Y":1.6939794873660703,"Z":-8.469897436830351},{"Level":5,"Radius":0.83175965498126991,"X":-7.6458576006103094,"Y":-4.1170002464824735,"Z":2.9407144617731955},{"Level":5,"Radius":1.0445812551367069,"X":3.6931524450376023,"Y":8.1249353790827268,"Z":-0.7386304890075206},{"Level":4,"Radius":1.4037600977966975,"X":-0.992608284311136,"Y":-6.94825799017795,"Z":4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":-0.13941478076973246,"Y":-0.97590346538812722,"Z":0.6970739038486623},{"Level":5,"Radius":1.1978243827074595,"X":1.6939794873660703,"Y":-8.469897436830351,"Z":1.6939794873660703},{"Level":5,"Radius":0.83175965498126991,"X":-7.6458576006103094,"Y":2.9407144617731955,"Z":-4.1170002464824735},{"Level":5,"Radius":1.0445812551367069,"X":3.6931524450376023,"Y":-0.7386304890075206,"Z":8.1249353790827268},{"Level":3,"Radius":2.139387691339814,"X":-1.5127755441334152,"Y":7.5638777206670751,"Z":-1.5127755441334152},{"Level":4,"Radius":0.37775486824598364,"X":-0.2671130289629659,"Y":1.3355651448148294,"Z":-0.2671130289629659},{"Level":5,"Radius":0.31876398046728993,"X":2.479401894050806,"Y":-1.5778012053050583,"Z":-2.9302022384236803},{"Level":5,"Radius":0.31876398046728993,"X":-2.9302022384236803,"Y":-1.5778012053050583,"Z":2.479401894050806},{"Level":5,"Radius":0.34576134060244468,"X":1.2224509430607009,"Y":2.6893920747335427,"Z":1.2224509430607009},{"Level":4,"Radius":1.4037600977966975,"X":4.96304142155568,"Y":-0.992608284311136,"Z":-6.94825799017795},{"Level":5,"Radius":0.19716227375982742,"X":0.6970739038486623,"Y":-0.13941478076973246,"Z":-0.97590346538812722},{"Level":5,"Radius":0.83175965498126991,"X":-4.1170002464824735,"Y":-7.6458576006103094,"Z":2.9407144617731955},{"Level":5,"Radius":1.0445812551367069,"X":8.1249353790827268,"Y":3.6931524450376023,"Z":-0.7386304890075206},{"Level":4,"Radius":1.4037600977966975,"X":-6.94825799017795,"Y":-0.992608284311136,"Z":4.96304142155568},{"Level":5,"Radius":0.19716227375982742,"X":-0.97590346538812722,"Y":-0.13941478076973246,"Z":0.6970739038486623},{"Level":5,"Radius":0.83175965498126991,"X":2.9407144617731955,"Y":-7.6458576006103094,"Z":-4.1170002464824735},{"Level":5,"Radius":1.1978243827074595,"X":-8.469897436830351,"Y":1.6939794873660703,"Z":1.6939794873660703},{"Level":5,"Radius":1.0445812551367069,"X":-0.7386304890075206,"Y":3.6931524450376023,"Z":8.1249353790827268},{"Level":3,"Radius":2.139387691339814,"X":-1.5127755441334152,"Y":-1.5127755441334152,"Z":7.5638777206670751},{"Level":4,"Radius":0.37775486824598364,"X":-0.2671130289629659,"Y":-0.2671130289629659,"Z":1.3355651448148294},{"Level":5,"Radius":0.31876398046728993,"X":2.479401894050806,"Y":-2.9302022384236803,"Z":-1.5778012053050583},{"Level":5,"Radius":0.31876398046728993,"X":-2.9302022384236803,"Y":2.479401894050806,"Z":-1.5778012053050583},{"Level":5,"Radius":0.34576134060244468,"X":1.2224509430607009,"Y":1.2224509430607009,"Z":2.6893920747335427},{"Level":4,"Radius":1.4037600977966975,"X":4.96304142155568,"Y":-6.94825799017795,"Z":-0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":0.6970739038486623,"Y":-0.97590346538812722,"Z":-0.13941478076973246},{"Level":5,"Radius":0.83175965498126991,"X":-4.1170002464824735,"Y":2.9407144617731955,"Z":-7.6458576006103094},{"Level":5,"Radius":1.0445812551367069,"X":8.1249353790827268,"Y":-0.7386304890075206,"Z":3.6931524450376023},{"Level":4,"Radius":1.4037600977966975,"X":-6.94825799017795,"Y":4.96304142155568,"Z":-0.992608284311136},{"Level":5,"Radius":0.19716227375982742,"X":-0.97590346538812722,"Y":0.6970739038486623,"Z":-0.13941478076973246},{"Level":5,"Radius":0.83175965498126991,"X":2.9407144617731955,"Y":-4.1170002464824735,"Z":-7.6458576006103094},{"Level":5,"Radius":1.0445812551367069,"X":-0.7386304890075206,"Y":8.1249353790827268,"Z":3.6931524450376023}]

The Circle and Sphere types have effectively been translated (via the names of their constructor arguments rather than their internal members, which is a little confusing) into the JSON text format.

That's all it took to expose our local web-service using the ASP.NET Web API - and that's with the "overhead" of needing a separate project for our (actually pretty simple) F# code. This is really a quantum leap forwards in terms of reducing the effort required to expose a RESTful web-service. It's also now relatively straightforward to move a local web-service such as this to be hosted in the cloud.

But let's not get ahead of ourselves: in the next post in this series, we’ll look at approaches for consuming the data returned from calling these APIs and generating equivalent geometry inside AutoCAD.

Exposing a RESTful web service for use inside AutoCAD using the ASP.NET Web API – Part 1

As promised, here begins the technical portion of the series on moving application functionality to the cloud.

As suggested, we’re going to take code from a couple of previous posts and put it in the cloud (although not immediately – first we’re going to move it to a local web-service, consume that in AutoCAD, and then look at our various cloud-hosting options).

So why did I choose these two pieces of code, in particular? A couple of reasons: firstly, they both implement “behind-the-scenes” algorithms that are independent of AutoCAD – a typical piece of business logic that companies might choose to place behind a web-service, in my opinion – and, secondly, they are both implemented in F#, which gives us an opportunity to abstract away technology from the user (it removes the need to deploy a separate class library built using F# from our application).

We’re going to use ASP.NET for this effort, which is Microsoft’s application framework for creating web-sites and applications. To expose our web-services (as opposed to a web-site), we’re going to make use of the ASP.NET Web API feature, which is brand new in the as-yet-unreleased ASP.NET MVC 4.

Let’s first resolve some acronyms…

ASP.NET is the .NET-based version of ASP, which standards for Active Server Pages rather than Application Service Provider.

ASP.NET MVC is a framework that sits on top of ASP.NET (which perhaps makes it a meta-framework or even a meta-meta-framework, if you consider the CLR :-) allowing web developers to use the Model-View-Controller architectural pattern (a type of design pattern) to implement web-sites. MVC encourages a clean separation of data (the model) from the way it is presented (the view) and interacted with (the controller).

It’s not specifically interesting to us in today’s post – where we’re simply using MVC 4 to get at the Web API feature – but it’s generally an interesting paradigm for web-site exposure.

And the hot news around MVC and the Web API is that they are now open source, which means you can browse and even contribute to the source, should you be so inclined.

So why use an unreleased (albeit open source) technology for this post? The short answer is that the Web API makes it incredibly easy to expose RESTful web-services. I’ve briefly mention REST a few times in the past, but it’s been a while. I fully expect to be making increasing use of web-services implementing REST over the coming years, though.

I won’t go into the steps needed to install ASP.NET MVC 4, but I will just say that there are a few different ways of getting it, right now: you can install the Beta for Visual Studio 2010, you can install Visual Studio 11 Express Beta for Web, or you can install Visual Studio 11 Ultimate Beta. I was a little unlucky, in that I had Visual Studio 11 Professional Beta installed – which meant I lost some time trying to install MVC 4 Beta on to of it, before I realised I actually needed to upgrade to Ultimate – but I got there in the end. One thing to bear in mind for later: at the time of writing it seems the Windows Azure .NET SDK doesn’t support Visual Studio 11, so I may have some hurdles to face when I get to that point. So sticking with VS2010 may prove the best option, for those of you who haven’t yet gone with VS11 (they can sit side-by-side, anyway, which is how I’ll probably manage the Azure deployment).

With MVC 4 installed, I went ahead and looked at the project types to create. If you want a good foundational article on using the Web API to use C# to expose web-services, take a look at this one. In our case, we want to use F# on the server, so I ended up choosing an online project template that gives us both C# and F# in an MVC 4 app:

We then get to specify that we want an Web API project and that we don’t (for the purposes of this simple example) care about testing:

This creates some nice boilerplate code that makes it really easy to expose our web-services. In the next post we’ll flesh out this project, hooking it up with our existing F# code to expose a couple of web-services for consumption inside our AutoCAD application.

Russian Homestyler ready for testing

I mentioned some time ago that our Localization Services (LS) team was embarking on a community-based translation of Homestyler into Russian.

The fruits of this labour are now ready for testing: the various translation projects, for the application, for its content and for supporting web-pages are now 100% complete. But that’s not to say things haven’t been missed or mis-translated, so we would love to get feedback from Russian speakers on the quality of the work performed.

The below information has been provided by our LS team for people who are interested in taking Russian Homestyler for a spin (and ideally providing feedback, of course).

Be warned that these steps involve editing a core system file, and so clearly require a certain level of comfort with making such changes as well as appropriate permissions on your testing machine.

1. Open the following file with a text editor (requires administrator privileges):

%windir%\System32\drivers\etc\hosts

2. Add the following entries to the file:

107.22.29.153 www.ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 it.ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 ru.ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 en.ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 es.ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 pt.ec2-107-22-29-153.compute-1.amazonaws.com
107.22.29.153 fr.ec2-107-22-29-153.compute-1.amazonaws.com

3. Open this page in your browser.
4. Choose Russian from the language drop-down in the top right corner:

You should then be able to use the Homestyler application – just as you would in English – but with the various parts of the product translated into Russian:

To provide feedback on the quality of the translated products, please send us an email. If you’re reporting a problem, please make sure your email contains this information:

• Steps to Reproduce
• Browser/Platform
• Image (a screenshot of the issue)
• Additional comments/input

And finally, a huge thanks to the top community contributors to this translation effort. Without your efforts this groundbreaking project would not have been a success!

• AdamSavage
• Baktior
• YarMike
• perevod
• AnanyevVN
• Lena.Talkhina
• VladSh
• snegopad1
• molibden
• aleksandr.sett

Update

The Russian version of Homestyler has now joined the list of official languages in the product, so there's no need to follow steps 1-3 above to gain access to it (simply click here).