WIP: Uncouples barcode dimensions from label dimensions

src/app/_util/qrCode.ts

@@ -3,7 +3,7 @@ import {formatDate} from '@angular/common';
 export const createQrCodeValue = (barCode: string, initials: string, dateCreated: Date, locationId: string): string => {
   const valArray = [
     barCode,
-    initials,
+    initials.toUpperCase(),
     formatDate(dateCreated, 'yyyyMMddHHmm', 'en-us'),
     locationId,
   ];

src/app/barcode-data-matrix/barcode-data-matrix.component.html

@@ -1,2 +1,2 @@
-<canvas id="barcodeCanvas"></canvas>
+<canvas id="barcodeCanvas" [ngStyle]="{width: settings.labelLayout.dimensions.barcodeWidth, height: settings.labelLayout.dimensions.barcodeHeight}"></canvas>
 <div id="err"></div>

src/app/barcode-data-matrix/barcode-data-matrix.component.scss

@@ -1,4 +1,4 @@
 #barcodeCanvas {
-  width: 100%;
+  //width: 100%;
-  height: 100%;
+  //height: 100%;
 }

src/app/barcode-data-matrix/barcode-data-matrix.component.spec.ts

@@ -20,7 +20,7 @@ describe('BarcodeDataMatrixComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(BarcodeDataMatrixComponent);
     component = fixture.componentInstance;
-    // settings.labelLayout = labelLayouts.rectangular_lg;
+    settings.labelLayout = labelLayouts.rectangular_54x32;
     component.settings = settings;
     component.format = settings.labelLayout.barcodeType;
     component.value = '987654321-202101231122-ABCDE-0123';

src/app/barcode-data-matrix/barcode-data-matrix.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
 import bwipjs from 'bwip-js';
 import {AppDefaults} from '../models/appDefaults.interface';
 
@@ -20,17 +20,17 @@ export class BarcodeDataMatrixComponent implements OnInit {
   }
 
   renderBarcode(): void {
-    if (bwipjs && bwipjs.toCanvas && this.settings && this.format) {
+    if (!!(bwipjs && bwipjs.toCanvas && this.settings && this.format)) {
       bwipjs.toCanvas('barcodeCanvas', {
         bcid: this.format,
         text: this.value,
-        scale: 2,
+        scale: 1,
-        width: this.settings.labelLayout.labelWidth,
+        width: this.settings.labelLayout.barcodeWidth,
-        height: this.settings.labelLayout.labelHeight,
+        height: this.settings.labelLayout.barcodeHeight,
-        includetext: false,
+        // includetext: false,
-        textalign: 'center',
+        // textalign: 'center',
         // version: '12x64',
-        padding: this.settings.labelLayout.marginSize,
+        // padding: this.settings.labelLayout.marginSize,
       });
     }
   }

src/app/config/defaults.ts

@@ -8,8 +8,8 @@ export const labelLayouts = {
     type: 'round_32mm_1up',
     numCols: 1,
     columnGap: 0,
-    labelWidth: 28.6,
+    barcodeWidth: 28.6,
-    labelHeight: 28.6,
+    barcodeHeight: 28.6,
     sideTextMargin: 0,
     topTextMargin: 0,
     bottomTextMargin: 0,
@@ -20,37 +20,39 @@ export const labelLayouts = {
     type: 'round_32mm_2up',
     numCols: 2,
     columnGap: 3.4,
-    labelWidth: 28.6,
+    barcodeWidth: 28.6,
-    labelHeight: 28.6,
+    barcodeHeight: 28.6,
     sideTextMargin: 0,
     topTextMargin: 0,
     bottomTextMargin: 0,
   }),
-  // rectangular_lg: new LabelLayout({
+  rectangular_54x32: new LabelLayout({
-  //   name: '2in x 1.25in Rectangular Label',
+    name: '2in x 1.25in Rectangular Label',
-  //   barcodeType: 'qrcode',
+    barcodeType: 'datamatrix',
-  //   type: 'rectangular_lg',
+    type: 'rectangular_54x32',
-  //   numCols: 1,
+    numCols: 1,
-  //   columnGap: 0,
+    columnGap: 0,
-  //   labelWidth: 28.6,
+    columnWidth: 54,
-  //   labelHeight: 28.6,
+    columnHeight: 34,
-  //   sideTextMargin: 10,
+    barcodeWidth: 10,
-  //   topTextMargin: 1,
+    barcodeHeight: 10,
-  //   bottomTextMargin: 1,
+    sideTextMargin: 0,
-  // }),
+    topTextMargin: 0,
-  // rectangular_sm: new LabelLayout({
+    bottomTextMargin: 0,
-  //   name: '96mm x 15mm Rectangular Label',
+  }),
-  //   barcodeType: 'datamatrix',
+  rectangular_sm: new LabelLayout({
-  //   type: 'rectangular_sm',
+    name: '96mm x 15mm Rectangular Label',
-  //   numCols: 1,
+    barcodeType: 'datamatrix',
-  //   columnGap: 0,
+    type: 'rectangular_sm',
-  //   labelWidth: 32,
+    numCols: 1,
-  //   labelHeight: 16,
+    columnGap: 0,
-  //   marginSize: 6,
+    barcodeWidth: 32,
-  //   sideTextMargin: 2,
+    barcodeHeight: 16,
-  //   topTextMargin: 3,
+    marginSize: 6,
-  //   bottomTextMargin: 3,
+    sideTextMargin: 2,
-  // }),
+    topTextMargin: 3,
+    bottomTextMargin: 3,
+  }),
 };
 
 export const defaultOptions: AppDefaultsOptions = {

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

@@ -18,13 +18,13 @@
     *ngIf="settings.labelLayout.barcodeType === 'qrcode'"
     [value]="qrCodeValue"
     errorCorrectionLevel="H"
-    [ngStyle]="labelStyle"
+    [ngStyle]="barcodeStyle"
   ></qrcode-svg>
   <app-barcode-data-matrix
     *ngIf="settings.labelLayout.barcodeType !== 'qrcode'"
     [value]="qrCodeValue"
     [format]="settings.labelLayout.barcodeType"
-    [ngStyle]="labelStyle"
+    [ngStyle]="barcodeStyle"
     [settings]="settings"
   ></app-barcode-data-matrix>
   <div

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

@@ -14,7 +14,7 @@
   width: 24.6mm;
   height: 24.6mm;
   border: 2mm solid transparent;
-  border-radius: 100%;
+  border-radius: 2mm;
   background-color: white;
   padding: 0;
   margin: 0;

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

@@ -15,30 +15,30 @@ export class LabelLayoutComponent implements OnInit {
   @Input() initials: string;
   settings: AppDefaults;
   pageStyle: CssStyle;
-  labelStyle: CssStyle;
+  barcodeStyle: CssStyle;
 
   constructor(private settingsService: SettingsService) {
     this.settings = this.settingsService.getSettings();
     const d = this.settings.labelLayout.dimensions;
 
     this.pageStyle = {
-      width: d.labelWidth,
+      width: d.columnWidth,
-      height: d.labelHeight,
+      height: d.columnHeight,
       padding: d.marginWidth,
     };
 
-    this.labelStyle = {
+    this.barcodeStyle = {
-      width: d.labelWidth,
+      width: d.barcodeWidth,
-      height: d.labelHeight,
+      height: d.barcodeHeight,
-      marginTop: `-${this.settings.labelLayout.labelHeight / 2}mm`,
+      marginTop: `-${this.settings.labelLayout.barcodeHeight / 2}mm`,
-      marginLeft: `-${this.settings.labelLayout.labelWidth / 2}mm`,
+      marginLeft: `-${this.settings.labelLayout.barcodeWidth / 2}mm`,
     };
   }
 
   get qrCodeValue(): string {
     return createQrCodeValue(
       this.barCode,
-      this.initials.toUpperCase(),
+      this.initials,
       this.dateCreated,
       this.settings.locationId
     );

src/app/models/labelLayout.interface.ts

@@ -4,8 +4,10 @@ export interface LayoutOptions {
   name?: string;
   units?: string;
   pointsPerUnit?: number;
-  labelWidth?: number;
+  barcodeWidth?: number;
-  labelHeight?: number;
+  barcodeHeight?: number;
+  columnHeight?: number;
+  columnWidth?: number;
   marginSize?: number;
   numCols?: number;
   columnGap?: number;
@@ -24,8 +26,10 @@ export class LabelLayout {
   name = '32mm Round Label - 1up';
   units = 'mm';
   pointsPerUnit = 0.3528;
-  labelHeight = 28.6;
+  barcodeHeight = 28.6;
-  labelWidth = 28.6;
+  barcodeWidth = 28.6;
+  columnHeight = 32;
+  columnWidth = 32;
   marginSize = 1.7;
   numCols = 1;
   columnGap = 0;
@@ -49,10 +53,12 @@ export class LabelLayout {
       bottomTextMargin: this._toUnits(this.bottomTextMargin),
       columnGap: this._toUnits(this.columnGap),
       fontSize: this._toUnits(this.fontSize),
-      labelWidth: this._toUnits(this.labelWidth),
+      columnWidth: this._toUnits(this.columnWidth),
-      labelWidthWithMargins: this._toUnits(this.labelWidthWithMargins),
+      columnHeight: this._toUnits(this.columnHeight),
-      labelHeight: this._toUnits(this.labelHeight),
+      barcodeWidth: this._toUnits(this.barcodeWidth),
-      labelHeightWithMargins: this._toUnits(this.labelHeightWithMargins),
+      barcodeWidthWithMargins: this._toUnits(this.barcodeWidthWithMargins),
+      barcodeHeight: this._toUnits(this.barcodeHeight),
+      barcodeHeightWithMargins: this._toUnits(this.barcodeHeightWithMargins),
       marginWidth: this._toUnits(this.marginSize),
       pageHeight: this._toUnits(this.pageHeight),
       pageWidth: this._toUnits(this.pageWidth),
@@ -63,17 +69,17 @@ export class LabelLayout {
     };
   }
 
-  get labelWidthWithMargins(): number {
+  get barcodeWidthWithMargins(): number {
     return (
-      this.labelWidth +
+      this.barcodeWidth +
       (this.marginSize * 2) +
       (this.sideTextMargin * 2)
     );
   }
 
-  get labelHeightWithMargins(): number {
+  get barcodeHeightWithMargins(): number {
     return (
-      this.labelHeight +
+      this.barcodeHeight +
       (this.marginSize * 2) +
       this.topTextMargin +
       this.bottomTextMargin
@@ -81,11 +87,11 @@ export class LabelLayout {
   }
 
   get pageWidth(): number {
-    return (this.labelWidthWithMargins * this.numCols);
+    return (this.barcodeWidthWithMargins * this.numCols);
   }
 
   get pageHeight(): number {
-    return (this.labelHeightWithMargins * this.numCopies);
+    return (this.barcodeHeightWithMargins * this.numCopies);
   }
 
   get fontSize(): number {

src/app/print/print.component.ts

@@ -75,7 +75,7 @@ export class PrintComponent implements AfterViewInit {
   save(callback: (s: Sample) => void) {
     const id = createQrCodeValue(
       this.barCode,
-      this.initials.toUpperCase(),
+      this.initials,
       this.dateCreated,
       this.settings.locationId
     );