Getting Started

Overview

Canvas allows users to interact with the CadX technology in the browser. The objectives of the API are:

Canvas HTML Component

Implements an HTML component where documents can be rendered and manipulated by the user.

Canvas 3D HTML Component

Provides a 3D model viewer for real time edition of designs.

Canvas Scripting

Provide an imperative view of CDL that support both simple and complext manipulation of documents.

var figures = canvas.selectedFigures();
canvas.group(figures);
canvas.commit$();

Canvas API Core services

Expose CadX Core services in packed an easy to use functions that returns concrete JavaScript objects (Document, Figure, Brush). Users should be able to load a document, change it and save it back in the server with ease:

Cx.Document.load$(id) .then(function(doc){
// Modify doc...
doc.save();
});
Getting Started

Setup

Canvas depends on CoreJS and it uses the Cx.js loading scheme. Given that CoreJS path is [Core] and Canvas path is [Canvas], the minimun setup looks like:

<html>
  <head>
    <script type="text/javascript" src="[Core]/Cx-include.js"></script> 
    <script type="text/javascript" src="[Canvas]/Canvas-include.js"></script>
    <script type="text/javascript">
      Cx.js( Cx.Core({ base: '[Core]' })
           , Cx.Canvas({ base: '[Canvas]' }));
      
      Cx.ready( function(){
      var canvas = Cx.Canvas({ renderTo: 'CadXCanvas' });
      });
    </script>
  </head>
  <body>
    <div id="CadXCanvas" style="width:500px,height:500px"></div>
  </body>
</html>

Both Core and Canvas are versioned libraries:

CoreJS needs a running CadXWorX server. The Edge version of the server is deployed at http://cadxfarm1.cloudapp.net/master-edge.
You can tell Core the path of the server using:

Cx.Core.setServer('cadxfarm1.cloudapp.net/master-edge');

As with any other config option, you can alternatevily define it using an URL switch:

http://canvas.app.com?cadx.server=cadxfarm1.cloudapp.net/master-edge

Check the Configuration reference for a complete list of options. While developping your app is advisable you always include &cadx.v=&cadx.debug=true in your app URL. This will expose the Canvas debug tools, read the Debugging page for more information.

A simple Demo app that only adds a Canvas in the center of the page can be accessed at:
http://cadxcdn.blob.core.windows.net/canvas-edge/Demo/index.html?cadx.server=devapp.poweredbycadworx.com&sid2=4ad899d5-89ca-4239-9d95-79b20d844ac8&cadx.v=&cadx.debug=true