When using Corda® Builder™ to create dynamic Image Template files for use with Corda Server™, the image displayed in Corda Builder is often be very different from that generated by Corda Server.
Consider the following factors when creating a dynamic Image Template file:
In order to send dynamic data to and/or customize objects in an Image Template file, each object must have its own unique name, which is used to reference the object when sending PCScript or ITXML commands to Corda Server. For example, the PCScript command to modify the data inside a textbox is:
textbox.setText(My Title)
In this case, the name of the textbox object is textbox. If the textbox were named title, for instance, the command would be:
title.setText(My Title)
Thus, it is important to know what object names, and make sure there are no duplicate names. By default, Corda Builder assigns objects unique names. For example, the first textbox in a project is named textbox, with subsequent textboxes named textbox2, textbox3, and so on.
Map names are predefined since they are usually named after the country or area they represent (e.g., US for a map of the United States).
You may want to change these names to be more descriptive. For example, a pie graph that shows voting percentages might have a default name of graph2. A more suitable name for this graph might be votes.
The object name is stored in the name property, and can be changed from Object Properties. More information on this property is available in the Corda 7 Object Reference.
One very important object is the title textbox. The textbox named title is always considered the title textbox. When you display descriptive text, the contents of this textbox is used to determine the title of the image.
For more information, see Textboxes.
When creating an Image Template file, try to make the dimensions of the Image Template file are exactly the same as the dimensions of the images you want to output. Changing the dimensions of the Image Template file dynamically can lead to reduced image quality or unexpected cropping or repositioning of objects.
To change Image Template file dimensions, either click and drag out a corner of the Image Template file's border in the Corda Builder interface, specify the project's width and height in the width and height properties in Object Properties.
Dynamically resize the Corda images through the height and width Corda Embedder attributes or the @_HEIGHT and @_WIDTH server commands. However, remember that resizing Corda images does not mean that the image is scaled. It simply enlarges or reduces the dimensions of the Corda images. Objects may be repositioned or cropped if they are outside of the Image Template files boundaries.
Alternatively, scale the Corda image with the htmlHeight and htmlWidth Corda Embedder attributes. This not recommended for JPEG or PNG image formats, as image quality suffers.
It is difficult to anticipate the data set for a dynamic Corda image. A graph that looks good with a small sample data set may look horrible with twenty or thirty categories and series. A map's sample data may look good with the defined map ranges, but those same map ranges might not work with the dynamic data. To help minimize surprises with dynamic data, make the sample data set as similar as possible to the expected dynamic data set.
Change a graph's sample data in Properties > Data Editor.
Important: Test Image template files with a variety of data sets to make sure they respond well to different types of data.
Set colors for all of the data series, not just the ones displayed in Corda Builder. That way, if the user inputs more data series than you expected, you still have control over the colors in the graph. Set these by changing the Series Colors buttons on the top half of the Graph Properties > Colors dialog. Alternatively, you may want to provide the user with color themes (refer to Creating New Color Themes).
Dynamic data can cause objects in Image Template files, such as text boxes, graphs or maps, and legends, can grow to unexpected sizes. To compensate for this, Corda Server can try to move or resize objects. For example, if a textbox doubles in height, overlapping with a graph, Corda Server can shrink the graph to compensate.
Most of this functionality is turned on by default. However, you may not want this behavior. For example, if you have a textbox that you want to always stay the same size, you may need to turn off its Auto Size Adjustment option.
The following topics affect object repositioning:
Corda Builder provides options at the project level for managing automatic object repositioning.
Properties and attributes related to global repositioning options are available from the Image Template > Layout property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
All graph components are placed within predefined boundaries, including text, tick marks, scales, and everything on the grid area. By default, a graph's data is scaled to fit within these boundaries. This means that as the scales and scale label text grow, the grid area may shrink to compensate. To avoid potential problems with this, set the tick marks and scales to be outside of the graph boundaries so that the grid area always remains the same size.
The size of scale labels may also affect graph labels (see Graph Scale Label Adjustments below).
Properties and attributes related to automatic graph resizing are available from the Graph Settings property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
A legend never shrinks in size. By default, it also never grows in size, even if it runs out of room to display legend items. If necessary, change this default behavior in the following ways:
Maximum Size: Specify horizontal and vertical maximums to which the legend can grow.
Add Additional Columns: Add additional columns to the legend as needed.
Shrink Legend Font: shrink the legend font down to a minimum point size that you define.
Truncate Legend Labels: Truncates the legend labels to the specified number of characters.
Properties and attributes related to legend resizing are available from the Legend Settings > Layout property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
By default, textboxes automatically shrink so that the text fits exactly within the box, including the specified textbox margin. However, Corda Builder supports additional resizing options for textboxes.
Properties and attributes related to textbox resizing are available from the Textbox Settings > Layout property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
Depending on the number of categories in a graph, Corda Server may have difficulty displaying all of the scales labels. When this happens, Corda Server can make automatic adjustments to accommodate the scale labels.
If labels overlap, it applies enabled rules to prevent overlap by first applying each rule individually. If that doesn't work, it applies combinations of the rules until the scale labels don't overlap or its options are exhausted.
Properties and attributes related to automatic scale label adjustments are available from the Value Scale > Labels property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
Corda Builder also provides manual adjustment options for scale labels. Properties and attributes related to manual graph scale label adjustments are available from the Image Template > Layout property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
When you align a group of objects, Corda Server shrinks or grows these objects in such a manner that the objects are always aligned with each other.
To align objects
Select the objects you want to align.
Select Alignment from the menu bar or right-click the selected item(s) to display the alignment options.
Specify the desired alignment option.
Left. Aligns the second object, and any subsequently selected objects, with the left edge of the first selected object.
Center. Aligns the second object, and any subsequently selected objects, with the horizontal center of the first selected object.
Right. Aligns the second object, and any subsequently selected objects, with the right edge of the first selected object.
Top. Aligns the second object, and any subsequently selected objects, with the top edge of the first selected object.
Middle. Aligns the second object, and any subsequently selected objects, with the vertical middle of the first selected object.
Bottom. Aligns the second object, and any subsequently selected objects, with the bottom edge of the first selected object.
Depending on how the objects are anchored, the alignment may not be preserved if Corda Server has to enlarge or shrink the objects.
Anchors are used to control the position of textboxes, graphs or maps, and legends as they expand.
For example, if additional text is added to a textbox, the anchor determines how (in what direction) the textbox adjusts for the additional text. If the anchor is set to top-left, then as the textbox content grows the textbox expands down and to the right to accomodate the additional text.
Properties and attributes related to andhored objects are available from the Common property in Object Properties. More information on these properties and attributes is available in the Corda 7 Object Reference.
To achieve the best image quality, use Flash* or SVG* image formats. Consider the following when serving images other formats:
PDF and EPS PDF and EPS images allow no interactivity. drilldown effects, rollover data labels, transparency, and hover text are not shown in these image formats.
PNG and JPEG Interactivity for PNG and JPEG images may not be supported in some browsers, or if you do not use Corda Embedder.