Understanding Ajax Vector Objects Architecture

Why AJAX Vector Objects

AJAX Vector Objects offers the following functionality out of the box:

• The ASP.NET Web Form control for embedding the graphics editor into ASP.NET and ASP.NET MVC websites.
• No third-party plug-in dependencies. The HTML5 <canvas> element is used for displaying a print design on the client side. Therefore, the technology does not require any web browser extensions like Adobe Flash or Microsoft Silverlight.
• Interactive user manipulations. On the user level, AJAX Vector Objects offers a way to manipulate the design and its objects using a mouse, a touch device, or a keyboard.
• Both client and server have full programmatic access to objects in the design. The print product can be created or changed right in your code written in JavaScript or C#.
• Zooming and scrolling the design in the web browser.
• Automatic optimization of graphics objects for screen size and zoom level. When users design oversized products, a full-size product version can cause performance problems on the client side, especially on mobile devices. AJAX Vector Objects resolves this problem: the server always optimizes graphics before sending them to the client, and it considers the current screen size and zoom level set in the web browser.
• Design serialization/deserialization: you can save the design to a file and edit it later.
• Rendering the design created in the web browser to print-ready raster or PDF files.
• Mockup objects, which are visible while creating a design, but hidden on the resulting image. For instance, while designing a bottle label, for convenience, a picture of the bottle can be shown on the graphics but the rendered image will contain the label only.
• Parsing SVG and displaying it on the canvas.
• Accurate color management for generated print-ready files.

AJAX Vector Objects Architecture

The centerpiece of AJAX Vector Objects is the canvas control. It is built on top of HTML5 <canvas> and provides a powerful object model. Canvas operates on the client side and sends asynchronous requests sent to the server in the background without interfering with the user interface. This allows updating only a part of the content without reloading the entire page.

The basic concept of the AJAX Vector Objects technique is the interactivity between canvas and users. The library architecture, shown on the following illustration, supports this concept:

Now let us consider each element of the AJAX Vector Objects architecture in more detail.

Client Architecture

Visualization

Canvas control represented in AJAX Vector Objects is a scrollable and zoomable viewport created for visualization of print designs using HTML5 <canvas>. This powerful technology is supported by all modern web browsers and does not require users to install additional browser extensions.

HTML5 <canvas> allows the creating of magnificent and sophisticated designs but it supports only low-level drawing operations. If you are familiar with Graphics, HTML5 <canvas> works on the same abstraction level. You just "tell" the control what to draw and where. On the <canvas> there is no way to move the previously created object or change its properties (like outline or fill color) without redrawing the whole content.

AJAX Vector Objects eliminates this problem and offers a way to operate on graphic objects. For example, you can draw a rectangle and then change its border color without re-rendering the whole graphic. AJAX Vector Objects also supports SVG, including organizing objects by layers, and many other useful features.

Another important feature is that AJAX Vector Objects automatically optimizes graphics for screen size. Thus, you can display even large graphic objects on the client side without performance issues or a visible loss of quality.

Client Interactions

Using the library you can draw a lot of objects, namely, raster images, text, and vector objects (line, rectangle, ellipse, SVG, etc.). Each object can be transformed in the code, but more important is that users can edit all of them interactively.

Users can perform numerous actions on an object: add or remove objects, move them, resize them (proportionally or not), and rotate them. Also, you can "lock" some objects on the design and prevent users from editing them, AJAX Vector Objects supports this feature as well. Users can also interact with the canvas itself by zooming or scrolling its content.

AJAX Vector Objects supports three interaction tools: mouse, touch, and keyboard. Actions on canvas objects such as zoom and scroll operations, can be performed using either a mouse or a touch device. For touch manipulation AJAX Vector Objects supports all standard gestures. The keyboard can also be used for moving objects, for instance, when the object should be accurately positioned.

Browser Compatibility

AJAX Vector Objects supports all modern web browsers including mobile browsers, for example:

• Internet Explorer 11
• Microsoft Edge
• Mozilla Firefox, the two last versions
• Google Chrome, the two last versions
• Safari, the two last versions

API

AJAX Vector Objects provides an API that allows you to manipulate with the canvas and its content on the client side via JavaScript. Any object modifications that we considered in the client interaction paragraph, such as moving, rotating, resizing, etc., can be performed locally on the client side. Also, you can zoom and scroll the canvas content, specify its control settings and events from a script.

AJAX Vector Objects allows you to create print designs on the canvas programmatically. This means that you can create the whole design or just add several objects to the canvas using the API. For example, you can create a predefined graphic template with the API right before displaying the web page, and then allow a user to finish it.

When the canvas content is changed by a user, the client script automatically keeps API objects reflecting the content up-to-date. This allows making calls to the client API without unnecessary connections to the server, which streamlines and increases the responsiveness of the user interface. However, if the canvas state should be synchronized between the server and client sides, it can be easily organized via postback, AJAX request, websocket, etc. This is needed, for example, when the canvas is being serialized or rendered to the output copy.

Networking

AJAX Vector Objects cannot perform all the manipulations only on the client side due to the limited memory and performance of web browsers. Thus, some transformations are done on the server. For example, if you have a raster object and you are enlarging it on the canvas, the client side cannot perform this action without loss of quality. In this case, the server side comes into play. It has the original image and also "knows" the requested image size, current zoom level, and screen size. Based on these data it prepares a new optimized copy of the image and passes it to the client canvas. Connection is then made via AJAX requests that dynamically load data and partially update the canvas without reloading the web page.

You do not need to take care of organizing transport between the client and server side. AJAX Vector Objects does that for you and automatically feeds the canvas state to the server. After the state is updated on the server, it is sent back to the client and the canvas immediately updates its state. A good example of where this can be useful would be when you want to print a design loaded in the canvas to a print-ready file. You just make a postback, get the canvas content in your server code and render it using a special method (see below).

Server Architecture

Script Support

AJAX Vector Objects comes with client scripts embedded in assemblies. Therefore, you do not need to take care of linking the correct versions of scripts with your project. The library will do this automatically.

AJAX Vector Objects provides two versions of JavaScript: release and debug. The first one is a minified production version that does not add much size to your web page. The second one is a development version containing fully readable JavaScript for debugging. In the project settings you can choose which script version to link with your project.

API

In AJAX Vector Objects the canvas control and each object on it has the same API for both client and server sides. Thus, all client-side operations mentioned before are available in the server code. This way, in the server code written in C# you can add the canvas control, specify its settings and pre-populate it with a design, then render the page and allow users to customize it.

There are a number of tasks that can be implemented only on the server, for example, serialization and deserialization of designs. The server API allows you to save the current canvas state to a file and then load it for further editing.

Networking

When a user is working on a design, most of the work is done on the client side. However, there are situations when the help of the server side is necessary. For example, if the user is resizing a raster object, it might require the server to prepare a copy optimized for the current image and screen size. Another example is rendering text objects. Even though the client side can work with fonts, font support is very limited, which is why all text objects are rendered on the server side. All this logic is done seamlessly and a programmer does not have to address it.

Print-Ready File Generation

One of the main features of AJAX Vector Objects is the ability to prepare designs for printing. For example, you can render canvas content into a printable postcard designed by the user. AJAX Vector Objects allows you to render the canvas content to a raster image in any format supported by Graphics Mill Web Controls (for example, JPEG or TIFF). In addition, you can specify resolution in DPI and color space of the resulting image. For instance, you can create an RGB preview with 72 DPI for displaying in a web gallery and CMYK bitmap with 300 DPI for printing out.

Colors on a printed image can look quite different from colors displayed on the screen. This is caused by output devices such as monitors and printers producing colors in a different way. They depend on color profiles to address this problem (for more information see Color Management Basics). AJAX Vector Objects supports color profiles and can apply color management while preparing graphics for displaying in the web browser or rendering a print-ready copy.

See Also

Manual

• A Turnkey AJAX Vector Objects Solution

Other

• HTML5 <canvas>