Updates DataMatrix layout to fit 2in x 1in label and use DMRE 8x96 version.

src/app/barcode-svg/barcode-svg.directive.ts

@@ -30,6 +30,10 @@ export class BarcodeSvgDirective implements OnInit {
         // padding: this.settings.labelLayout.marginSize,
       };
 
+      if (this.format === 'datamatrixrectangularextension') {
+        opts.version = '8x96';
+      }
+
       if (this.format === 'qrcode') {
         opts.eclevel = 'H';
       }

src/app/config/defaults.ts

@@ -35,11 +35,11 @@ export const labelLayouts = {
     delimiter: '',
   }),
   rectangle_datamatrix: new LabelLayout({
-    name: '2in x 1.25in Rectangular Label - DataMatrix',
+    name: '2in x 1in Rectangular Label - DataMatrix',
     barcodeType: 'datamatrix',
     id: 'rectangle_datamatrix',
-    pageWidth: 54,
+    pageWidth: 50.8 + labelMargin,
-    pageHeight: 34,
+    pageHeight: 25.4 + labelMargin,
   }),
 };
 

src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg

@@ -3,11 +3,18 @@
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="54mm"
+  [attr.width]="labelLayout.dimensions.pageWidth"
-  height="34mm"
+  [attr.height]="labelLayout.dimensions.pageHeight"
-  viewBox="0 0 54 34"
+  [attr.viewBox]="'0 0 ' + width + ' ' + height"
 >
   <defs>
+    <g id="fill_line">
+      <line x1="0" y1="0" x2="0" y2="3" stroke-width="0.3" stroke="#999999" />
+      <line x1="0" y1="1.5" x2="5" y2="1.5" stroke-width="0.3" stroke="#999999" />
+      <text x="8" y="2.25" fill="#999999">FILL</text>
+      <line x1="11" y1="1.5" x2="16" y2="1.5" stroke-width="0.3" stroke="#999999" />
+      <line x1="16" y1="0" x2="16" y2="3" stroke-width="0.3" stroke="#999999" />
+    </g>
     <g id="up_arrow">
       <g transform="translate(2.5, 2)">
         <g transform="translate(-2.5, -2) scale(0.1)">
@@ -19,38 +26,50 @@
     </g>
   </defs>
 
-  <g transform="translate(1.5, 1)">
+  <g [attr.transform]="'translate(' + marginHorizontal + ', ' + marginVertical + ')'">
     <rect
       class="label-layout-border"
       fill="#FFFFFF"
       stroke="#CCCCCC"
       stroke-width="0.2"
-      width="51"
+      [attr.width]="widthMinusMargins"
-      height="32"
+      [attr.height]="heightMinusMargins"
       x="0"
       y="0"
       rx="2"
     />
     <use xlink:href="#up_arrow" x="2" y="2" />
-    <g
+    <use xlink:href="#up_arrow" x="2" [attr.y]="heightMinusMargins - 4" />
-      appBarcodeSvg
+    <use
-      format="datamatrix"
+      xlink:href="#fill_line"
-      [value]="sample.barcode"
+      [attr.x]="labelCenterHorizontal - 15"
-      [width]="3.5"
+      [attr.y]="0"
-      [height]="3.5"
-      transform="translate(3.5, 10)"
     />
-    <g transform="translate(18, 14)">
+    <use
+      xlink:href="#fill_line"
+      [attr.x]="labelCenterHorizontal - 15"
+      [attr.y]="heightMinusMargins - 3"
+    />
+    <g transform="translate(5, 7)">
+      <g
+        appBarcodeSvg
+        format="datamatrixrectangularextension"
+        [value]="sample.barcode"
+        [width]="36"
+        [height]="3"
+        transform="scale(0.4)"
+      />
+    </g>
+    <g transform="translate(5, 16)">
       <text x="0" y="0" style="text-anchor: start; text-align: left;">
         #{{sample.student_id}}
       </text>
-      <text x="0" y="3" style="text-anchor: start; text-align: left;">
+      <text x="0" y="2" style="text-anchor: start; text-align: left;">
         {{sample.date | date:'yyyy-MM-dd HH:mm'}}
       </text>
-      <text x="0" y="6" style="text-anchor: start; text-align: left;">
+      <text x="0" y="4" style="text-anchor: start; text-align: left;">
         {{sample.initials}} {{sample.location}}
       </text>
     </g>
-    <use xlink:href="#up_arrow" x="2" y="27.5" />
   </g>
 </svg>

src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {AppDefaults} from '../../../models/appDefaults.interface';
+import {LabelLayout} from '../../../models/labelLayout.interface';
 import {Sample} from '../../../models/sample.interface';
 
 @Component({
@@ -9,14 +10,36 @@ import {Sample} from '../../../models/sample.interface';
 })
 export class RectangleDatamatrixComponent implements OnInit {
   @Input() sample: Sample;
-  @Input() settings: AppDefaults;
+  @Input() labelLayout: LabelLayout;
-  @Input() x: number;
+  marginHorizontal = 3.175 / 2;
-  @Input() y: number;
+  marginVertical = 3.175 / 2;
-  @Input() width: number;
-  @Input() height: number;
 
   constructor() { }
 
+  get width() {
+    return this.labelLayout.pageWidth;
+  }
+
+  get height() {
+    return this.labelLayout.pageHeight;
+  }
+
+  get heightMinusMargins(): number {
+    return (this.height - (this.marginVertical * 2));
+  }
+
+  get widthMinusMargins(): number {
+    return (this.width - (this.marginHorizontal * 2));
+  }
+
+  get labelCenterHorizontal(): number {
+    return (this.widthMinusMargins / 2);
+  }
+
+  get labelCenterVertical(): number {
+    return (this.heightMinusMargins / 2);
+  }
+
   ngOnInit(): void {
   }
 

src/app/label-layout/label-layout.component.html

@@ -10,4 +10,8 @@
   [sample]="sample"
   [labelLayout]="settings.labelLayout"
 ></app-rectangle-code128>
-<app-rectangle-datamatrix *ngIf="isLayout('rectangle_datamatrix')" [sample]="sample"></app-rectangle-datamatrix>
+<app-rectangle-datamatrix
+  *ngIf="isLayout('rectangle_datamatrix')"
+  [sample]="sample"
+  [labelLayout]="settings.labelLayout"
+></app-rectangle-datamatrix>

src/app/settings/settings.component.html

@@ -55,7 +55,11 @@
                   [sample]="sampleForLayout(layout)"
                   [labelLayout]="layout"
                 ></app-rectangle-code128>
-                <app-rectangle-datamatrix *ngIf="layout.id === 'rectangle_datamatrix'" [sample]="sampleForLayout(layout)"></app-rectangle-datamatrix>
+                <app-rectangle-datamatrix
+                  *ngIf="layout.id === 'rectangle_datamatrix'"
+                  [sample]="sampleForLayout(layout)"
+                  [labelLayout]="layout"
+                ></app-rectangle-datamatrix>
               </div>
             </div>
           </mat-option>