Tutorial: Creating a Tag View

A tag view displays one or both sides of a Red Dingo tag, along with rulers and text to be engraved. It is the core visual component of the framework, upon which everything else is built.

Before creating a tag view, however, we need to examine the concept of promises and their use in the framework.

Promises

Some functionality in the tag editor framework requires downloading additional data over the network, such as tag templates, outlines, and fonts. In JavaScript, all network activity is asynchronous, meaning that when the application issues a network request, the code does not wait until it is available; instead, a separate callback function is provided by the program to be invoked after the data arrives.

In the tag editor framework, functions that return a result asynchronously (since it potentially requires network requests) return a Promise object, to which a then callback can be attached to handle both success and failure cases.

For example:

doAsyncAction(params).then(function(result) {
    // Otherwise, the action succeeded. Do something with the result argument
    result.foo();
    result.bar();
    return invokeSomeOtherAsyncAction();
}).then(function(otherResult) {
    // Do something else
}), function(err) {
    // Handle any error in either async action somehow, e.g. with alert()
));

Single-side view

The simplest of all views provided by the framework is SideView: a view that displays only one side of a tag, either the front or back side. All other views and toolbars are built upon this core component.

To create a single-side view, you need to have a canvas HTML element somewhere on the page (either present in the HTML source or created dynamically). The view is bound to the canvas element and becomes responsible for drawing on it.

var viewOptions = { canvasElement: $("#side-canvas") };

TagPreview.createSideView(viewOptions).then(function(view) {
    // Do something with the view
}, function(err) {
    // Handle error
});

The viewOptions argument accepts two optional properties besides canvasElement:

• side can be a string, either "SIDE1" or "SIDE2".
• zoomer passes a Zoomer object, which controls the zoom level of the tag. If one is not passed, it will be created.

Two-side view

TwoSideView displays both sides of a tag; the second side can display either the text to be engraved in case of a double-side tag, or the tag image in case of a single-side tag.

Unlike a single-side view, a two-side view requires two canvas elements. They need not be adjacent on the page and can, in fact, be in completely different parts of it.

var viewOptions = {
    side1CanvasElement: $("#side1-canvas"),
    side2CanvasElement: $("#side2-canvas")
};

TagPreview.createTwoSideView(viewOptions).then(function(view) {
    // Do something with the view
}, function(err) {
    // Handle error
});

Again, an optional zoomer object can be provided. Normally, however, there is no need for that. If none is set, the two-side view creates a new zoomer object and uses it to synchronize zoom level on both sides.

Next step

When first created, a tag view will only display a blank white rectangle, since the tag properties and text are not set yet. You will need to use methods such as setData to set the state of the tag view. See Displaying the Tag and Engraving Lines.