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:

Open Aurigma.DesignAtoms.Samples.sln in Visual Studio.
On the menu, click Tools > NuGet Package Manager > Manage NuGet Packages for Solution > Restore to get NuGet packages.
In the Solution Explorer, right-click package.json and click Restore Packages to get NodeJS packages.
On the menu, click Build > Build Solution.
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 a free trial 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 - code for connecting to Design Atoms.
index.html - the entry point of the application.
\samples\ - samples in single folders.
\samples\<sampleName>\index.html - an HTML markup of a sample.
\samples\<sampleName>\index.ts - TypeScript code of a sample.
\samples\<sampleName>\style.css - CSS styles.
\scripts\ - common helpers and utilities for these samples.

Available Samples

Now, let us see what samples you can find when you open the Aurigma.DesignAtoms.Samples repository.

backend

An example of how to use back-end and front-end libraries together. It demonstrates the following features:

Constructing a design on the server side.
Sending the design from a server to a client and vice versa.
Loading a template from an IDML or PSD file.
Rendering a design to a JPEG or PDF file on the server.
Serialization/deserialization of a design to a file system (i.e. save/restore in its own file format).

background-backend

An example of how you can set and delete the background at the server side. The following features are illustrated:

Setting a color as the background.
Setting an image as the background.
Deleting the background.

curved-text

A demo for the curved text feature. It demonstrates how you can (both back-end and front-end code):

Create a curved text item based on a path and text.
Apply it to both plain text and rich formatted text.

demo

Quick start demo. Here, you can see an example of how to work with the front-end library and CanvasViewer control. The following features are demonstrated:

Constructing a design on the client side.
Changing the colors of all items.
Changing font settings of a currently selected item.
Reading item properties of a currently selected item.

events-demo

An example of how you can detect changes in the design as well as get a selected item. The following features are illustrated:

Listening to the product model changes.
Determining what items and properties are changed.
Receiving the old and new values.
Detecting elements being added or removed.
Detecting an element selection.

import

An example of how you can upload a PSD or IDML file (with embedded resources) and convert it to a state file on the back end. You can use a controller implemented in this demo as a starting point if you want to use state files as the single design format used in Customer's Canvas.

Note that, to make it brief, this sample does not implement any validation of the uploaded files. For example, if your application doesn't contain fonts that were applied in a PSD file, it will throw an exception.

mockup-backend

An example of how you can assign and delete mockups on the back end. The following features are illustrated:

Setting images as mockups.
Deleting mockups.

open-type-feature

An example of how to work with OpenType Features of text (such as ligatures, swash, all caps/small caps, subscript/superscript, and many more). It demonstrates:

Adding and removing OpenType Features to/from text items on the back end and front end.
Reading OpenType Features and updating the user interface based on them.

pdf-box-backend

An example of how you can specify safety lines on the back end. The following features are illustrated:

Setting the trim box.
Setting the crop box.
Setting the bleed box.

state-fonts-backend

An example of how you can get a list of used fonts from a state file on the back end.

vector-mask

A demo for the mask feature. It illustrates the following features (both back-end and front-end code):

Adding a vector mask to different design item types.
Removing a mask.