This topic demonstrates how to configure the igQRCodeBarcode™ control’s size and dimensional aspects, like the stretch and fill and the size of the minimum-size element.
The following topics are prerequisites to understanding this topic:
igQRCodeBarcode Overview: This topic provides conceptual information about the igQRCodeBarcode control including its main features and minimum requirements.
Adding igQRCodeBarcode: This is a group of topics demonstrating how to add the igQRCodeBarcode control to an HTML page and to an ASP.NET MVC application.
This topic contains the following sections:
If the width and height properties have not been set for the igQRCodeBarcode control, it is sized according to the size of its container (if defined). Setting the height and width creates a containing rectangular area in which the QR (Quick Response) barcode matrix is displayed. You can specify how the matrix fills this containing area in several aspects:
For details, see QR barcode dimensions configuration summary chart.
The following table lists the configurable aspects related to the QR barcode dimensions. Further details are available after the table.
| Configurable aspect | Details | Properties |
|---|---|---|
| Size of the minimum-size element | You can adjust igQRCodeBarcode minimum-size element’s width for the symbol in millimeters. |
|
| Stretch of the matrix | You can specify the horizontal and vertical space which igQRCodeBarcode takes inside its container. |
|
| Logical grid’s fill mode | You can customize how the internal grid containing the bars will fill the igQRCodeBarcode control's dimensions. |
The minimum-size element width for the matrix affects the size of the matrix itself and is related to the available space in the container and the technology used to decode the QR barcode, i.e. mobile phones, etc.. The size of the minimum-size element is managed by the xDimension property of the igQRCodeBarcode control. The property value is taken into account when the stretch option of the control is set to a value which suggests that its content preserves its nominal size, i.e. stretch = “none”.
The following table maps the desired behavior to property settings.
| In order to: | Use this property: | And set it to: |
|---|---|---|
| Specify the minimum-size element’s width | xDimension | The desired value in millimeters in the range 0.01÷100 |
The screenshot below demonstrates how the igQRCodeBarcode control looks as a result of the following settings:
| Property | Value |
|---|---|
| width | “100px” |
| height | “150px” |
| data | “http://www.infragistics.com” |
| stretch | “none” |
| xDimension | “0.8” |
Following is the code that implements this example.
In HTML:
<head>
...
<script type="text/jscript">
$(function () {
$("#barcode").igQRCodeBarcode({
data: "http://www.infragistics.com",
width: "100px",
height: "150px",
stretch:"none",
xDimension:"0.8"
});
});
</script>
</head>
<body>
<div id="barcode"></div>
</body>
The stretch of the QR barcode matrix determines the horizontal and vertical extents of the width which the matrix occupies the control’s container. This is managed by the stretch option.
The following table explains the supported values of the stretch option and demonstrates their effect.
| Value | Result | Description | Details |
|---|---|---|---|
| fill |  |
The content is resized to fill the destination’s dimensions. | When using fill, as the content's height and width are scaled independently, the original aspect ratio of the image is not preserved which is why using this value is not recommended when the barcode is used for reading (for reading, use either none or uniform). |
| none |  |
The content preserves its nominal dimensions. | uniform |
| (default) |  |
The content is resized to fit the destination’s dimensions while its native aspect ratio is preserved. | |
| uniformToFill |  |
The content is resized to fill the destination’s dimensions completely while it preserves its native aspect ratio. | If the aspect ratio of the destination rectangle differs from that of the source, the excessive source content will be cut off. |
The following table maps the desired stretch behavior to the property settings that configure it.
| In order to: | Use this property: | And set it to: |
|---|---|---|
| Resize the source content to fill the destination’s dimensions | stretch |
|
| Keep the nominal dimensions of the source content | stretch |
|
| Resize the source content to fit in the destination’s dimensions while keeping its native aspect ratio | stretch |
|
| Resize the source content to fill the destination’s dimensions while keeping its native aspect ratio | stretch |
|
The screenshot below demonstrates how the igQRCodeBarcode control looks
as a result of the following settings:
| Property | Value |
|---|---|
| width | “100px” |
| height | “150px” |
| data | “http://www.infragistics.com” |
| stretch | “fill” |
Following is the code that implements this example.
In HTML:
<head>
...
<script type="text/jscript">
$(function () {
$("#barcode").igQRCodeBarcode({
data: "http://www.infragistics.com",
width: "100px",
height: "150px",
stretch:"fill"
});
});
</script>
</head>
<body>
<div id="barcode"></div>
</body>
The various bars comprising the barcode are visualized in a logical grid. The barsFillMode property of the igQRCodeBarcode control defines how the logical grid containing the bars fills the control's dimensions. By default, the grid fills all the available space for igQRCodeBarcode control.
When the barsFillMode has been set to fillSpace, depending on the dimensions of the control and the bars grid and the DPI of the user, in some cases, the actual bars’ width and height may differ from those that have been set in the code. This might render the barcode unreadable – for instance, if the internal grid has 200 columns and the width of the control is 300 px, then the columns’ bars will have integer widths (some will be 1 px and some 2 px) to fill the control. This mode is recommended for all scenarios where there is no machine reading.
The recommended mode for machine reading is ensureEqualSize. If the internal grid has 200 columns and the width of the control is 300 px, then the grid will shrink to 200 px in width making all cells equal.
The following table maps the desired fill behaviors of the logical grid to the property settings that configure it.
| In order to: | Use this property: | And set it to: |
|---|---|---|
| Configure the logical grid to fill the control’s container | barsFillMode | fillSpace |
| Configure bar cells of the logical grid to have the same dimensions | barsFillMode | ensureEqualSize |
The screenshot below demonstrates how the igQRCodeBarcode control looks
as a result of the following settings:
| Property | Value |
|---|---|
| width | “150px” |
| height | “150px” |
| data | “http://www.infragistics.com” |
| barsFillMode | “ensureEqualSize” |
Following is the code that implements this example.
In HTML:
<head>
…
<script type="text/jscript">
$(function () {
$("#barcode").igQRCodeBarcode({
data: "http://www.infragistics.com",
width: "150px",
height: "150px",
barsFillMode:"ensureEqualSize"
});
});
</script>
</head>
<body>
<div id="barcode"></div>
</body>
The following topics provide additional information related to this topic.
Configuring the QR-Code-Specific Settings (igQRCodeBarcode): This topic explains, with code examples, how to configure the settings of the igQRCodeBarcode control that are specific to the QR (Quick Response) barcode, like the error correction level, size version, FNC1 mode, and the application indicator.
Configuring the Character Encoding (igQRCodeBarcode): This topic explains how to configure the desired character encoding in the igQRCodeBarcode control.
jQuery and MVC API Links (igQRCodeBarcode): This topic provides links to the API reference documentation about the igQRCodeBarcode control and the ASP.NET MVC Helper for it.
The following samples provide additional information related to this topic.
igQRCodeBarcode control.View on GitHub