Year in review — 2019.
  1. Aurigma Customer's Canvas 5.18.0
  2. Getting Started

Design Atoms Sample Project

After you have read about Customer's Canvas 5 and Design Atoms Framework, you may want to try our out-of-box sample demonstrating this framework. This topic describes how you can run the sample project and start using Design Atoms in your solution.

Distribution Packages

Design Atoms Framework consists of two parts - a front-end library available as npm package @aurigma/design-atoms and ASP.NET assembly the Aurigma.DesignAtoms available at Nuget.

To install a front end, run in the command prompt in your project folder:

npm install @aurigma/design-atoms --save

To get a back-end library, you can run the following command in the Visual Studio Package Manager Console:

Install-Package Aurigma.DesignAtoms

This assembly implements all necessary endpoints required by the front-end library. All you need is to add a reference to this assembly and add one line of code to the Global.asax file. A sample project and front-end code samples are available in the following GitHub repository:

DesignAtomsSamples

Starting the Sample Project

First, clone the DesignAtomsSamples repository or download it from GitHub. To build and start this project:

  1. Open Aurigma.DesignAtoms.Samples.sln in Visual Studio.
  2. On the menu, click Tools > NuGet Package Manager > Manage NuGet Packages for Solution > Restore to get NuGet packages.

    Restore NuGet packages.

  3. In the Solution Explorer, right-click package.json and click Restore Packages to get NodeJS packages.

    Restore npm packages.

  4. On the menu, click Build > Build Solution.
  5. Click Debug > Start Debugging to start the project.
Important

To run projects based on the Design Atoms Framework, you need a valid license key. You can register an evaluation license key in the Customer's Canvas License Manager. If you don't have this tool, contact our support team.

The Project Structure

In this project, pay attention to the following files:

  • Global.asax contains code for connecting to Design Atoms.
  • index.html represents the entry point of the application.
  • \samples\ contains samples in single folders.
  • \samples\demo\index.html defines an HTML markup of the demo.
  • \samples\demo\index.ts contains TypeScript code of the demo.
  • \scripts\ contains common helpers and utilities for these samples.

Using the Design Atoms Framework

Now, let us see how you can connect your front-end application to the back end, initialize the canvas viewer, and add design elements to the viewer.

In the \samples\demo\index.ts, we connect to the back end first.

TypeScript 
const backendUrl = "http://localhost:60669";
const holderId = "#viewer";
const viewer = new Viewer({
    holderElement: holderId,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});

After that, we configure canvas properties, create a product, and assign a product surface (a design page) to the viewer.

TypeScript 
// Configure the canvas.
initCanvas(viewer.canvas);

// Create a product.
const product = new Product([new Surface()]);
product.name = "Sample product";

// Display the first surface.
viewer.surface = product.surfaces.get(0);

In InitSurface(), we define the surface and design elements.

TypeScript 
// Define the design region to be printed.
surface.printAreas.add(
    printArea = new PrintArea(new RectangleF(36, 36, 419.5, 595.2))
);

// Define the main container for design elements.
surface.containers.setRange([
    mainContainer = assignProperties(new SurfaceContainer(), { name: "main" })
]);
	
// Create and add an image to the surface.
let image = assignProperties(new ImageItem(), {
    sourceRectangle: new RectangleF(58.8+36, 60+36, 301.9, 174.48),
    source: new ImageItem.ImageSource(null, backendUrl+"/assets/image.jpg"),
    locked: false
});
mainContainer.items.add(image);

See Also

Manual