Adds CODE128 fonts. Uses fonts to render barcodes, rather than SVG lines.

debug.log

@@ -0,0 +1,4 @@
+[1125/160941.720:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[1126/160944.140:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[1127/160946.724:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[1128/160948.817:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

package-lock.json

@@ -3244,6 +3244,11 @@
         "q": "^1.1.2"
       }
     },
+    "code-128-encoder": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/code-128-encoder/-/code-128-encoder-3.1.1.tgz",
+      "integrity": "sha512-aZvPmAA2GGWydy+piAi5VphSh5WEKKFx1+1LtBV02Vof8ewdr5Xg6E+9N8nQ67qir+i/l5QGkE/JE39vOXYPMw=="
+    },
     "codelyzer": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-5.2.2.tgz",

package.json

@@ -36,6 +36,7 @@
     "@ngx-formly/core": "^5.8.0",
     "@ngx-formly/material": "^5.8.0",
     "bwip-js": "^2.0.11",
+    "code-128-encoder": "^3.1.1",
     "lodash.isequal": "^4.5.0",
     "ngx-qrcode-svg": "^2.0.0",
     "rfdc": "^1.1.4",

src/app/_util/qrCode.ts

@@ -17,8 +17,8 @@ export const createQrCodeValue = (
   const valArray = [
     cardNum,
     compId,
-    dateString,
+    longDate,
-    locId,
+    locationId,
   ];
   return valArray.join(delimiter);
 };

src/app/app.module.ts

@@ -23,7 +23,6 @@ import {CountComponent} from './count/count.component';
 import {FooterComponent} from './footer/footer.component';
 import {CircleQRcodeDoubleComponent} from './label-layout/formats/circle-qrcode-double/circle-qrcode-double.component';
 import {CircleQRcodeSingleComponent} from './label-layout/formats/circle-qrcode-single/circle-qrcode-single.component';
-import {Rectangle3x1Code128Component} from './label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component';
 import {RectangleCode128Component} from './label-layout/formats/rectangle-code128/rectangle-code128.component';
 import {RectangleDatamatrixComponent} from './label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component';
 import {LabelLayoutComponent} from './label-layout/label-layout.component';
@@ -67,7 +66,6 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     NavbarComponent,
     PrintComponent,
     PrintLayoutComponent,
-    Rectangle3x1Code128Component,
     RectangleCode128Component,
     RectangleDatamatrixComponent,
     SampleComponent,

src/app/config/defaults.ts

@@ -25,11 +25,11 @@ export const labelLayouts = {
     delimiter: '',
   }),
   rectangle_code128: new LabelLayout({
-    name: '2in x 1.25in Rectangular Label - CODE128',
+    name: '2.63in x 1.125in Rectangular Label - CODE128',
     barcodeType: 'code128',
     id: 'rectangle_code128',
-    pageWidth: 54,
+    pageWidth: 66.8,
-    pageHeight: 34,
+    pageHeight: 28.6,
     delimiter: '',
   }),
   rectangle_datamatrix: new LabelLayout({

src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.spec.ts

@@ -1,27 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {mockSample} from '../../../testing/sample.mock';
-
-import {Rectangle3x1Code128Component} from './rectangle-3x1-code128.component';
-
-describe('Rectangle3x1Code128Component', () => {
-  let component: Rectangle3x1Code128Component;
-  let fixture: ComponentFixture<Rectangle3x1Code128Component>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [Rectangle3x1Code128Component]
-    })
-      .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(Rectangle3x1Code128Component);
-    component = fixture.componentInstance;
-    component.sample = mockSample;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.svg

@@ -1,54 +0,0 @@
-<svg
-  class="label-layout-format"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="79.375mm"
-  height="28.575mm"
-  viewBox="0 0 79.375 28.575"
->
-  <defs>
-    <g id="up_arrow">
-      <g transform="translate(0, 2)">
-        <text x="1" y="0">UP</text>
-        <g transform="translate(2, -2)">
-          <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" transform="scale(0.1)"/>
-        </g>
-      </g>
-    </g>
-  </defs>
-  <g transform="translate(1.5875, 1.5875)">
-    <rect
-      class="label-layout-border"
-      fill="#FFFFFF"
-      stroke="#CCCCCC"
-      stroke-width="0.2"
-      width="76.2"
-      height="25.4"
-      x="0"
-      y="0"
-      rx="2"
-    />
-    <use xlink:href="#up_arrow" x="71" y="1" />
-    <use xlink:href="#up_arrow" x="71" y="22" />
-<!--    <rect x="18" y="9" width="40" height="10" fill="#FF0000" />-->
-    <g transform="translate(13, 9)">
-      <g
-        appBarcodeSvg
-        [format]="'code128'"
-        [height]="10000"
-        [value]="sample.barcode"
-        [width]="50000"
-        transform="scale(.00035)"/>
-    </g>
-  </g>
-  <text x="50%" y="6" style="font-size: 2.7px">
-    #{{sample.student_id}}
-    {{sample.initials}}
-  </text>
-  <text x="50%" y="9" style="font-size: 2.7px">
-    {{sample.date | date:'yyyy-MM-dd HH:mm'}}
-    {{sample.location}}
-  </text>
-  <text x="50%" y="23" style="font-size: 2.7px">{{sample.barcode}}</text>
-</svg>

src/app/label-layout/formats/rectangle-3x1-code128/rectangle-3x1-code128.component.ts

@@ -1,25 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {AppDefaults} from '../../../models/appDefaults.interface';
-import {Sample} from '../../../models/sample.interface';
-
-@Component({
-  selector: 'app-rectangle-3x1-code128',
-  templateUrl: './rectangle-3x1-code128.component.svg',
-  styleUrls: ['./rectangle-3x1-code128.component.scss']
-})
-export class Rectangle3x1Code128Component implements OnInit {
-  @Input() sample: Sample;
-  @Input() settings: AppDefaults;
-  @Input() x: number;
-  @Input() y: number;
-  @Input() width: number;
-  @Input() height: number;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    //  Replace "#barcode" element with svg of barcode
-
-  }
-
-}

src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts

@@ -1,23 +1,27 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {mockSample} from '../../../testing/sample.mock';
+import {RectangleCode128Component} from './rectangle-code128.component';
+import {LabelLayout} from '../../../models/labelLayout.interface';
+import {labelLayouts} from '../../../config/defaults';
 
-import { RectangleCode128Component } from './rectangle-code128.component';
 
 describe('RectangleCode128Component', () => {
   let component: RectangleCode128Component;
   let fixture: ComponentFixture<RectangleCode128Component>;
+  const layout: LabelLayout = labelLayouts.rectangle_3x1_code128;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RectangleCode128Component ]
+      declarations: [RectangleCode128Component]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RectangleCode128Component);
     component = fixture.componentInstance;
     component.sample = mockSample;
+    component.labelLayout = layout;
     fixture.detectChanges();
   });
 

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

@@ -3,44 +3,54 @@
   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="up_arrow">
-      <g transform="translate(2.5, 2)">
+      <g transform="translate(0, 2)">
-        <g transform="translate(-2.5, -2) scale(0.1)">
-          <path d="M 0,0 H 24 V 24 H 0 Z" style="fill:none"/>
-          <path d="M 20,11 H 7.83 L 13.42,5.41 12,4 4,12 12,20 13.41,18.59 7.83,13 H 20 Z" />
-        </g>
         <text x="1" y="0">UP</text>
+        <g transform="translate(2, -2)">
+          <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" transform="scale(0.1)"/>
+        </g>
       </g>
     </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" />
+    <use
-    <g transform="translate(2, 11)">
+      xlink:href="#up_arrow"
-      <g
+      [attr.x]="width - (marginHorizontal * 5.5)"
-        appBarcodeSvg
+      [attr.y]="marginVertical"
-        [format]="'code128'"
+    />
-        [height]="40"
+    <use
-        [value]="sample.barcode"
+      xlink:href="#up_arrow"
-        [width]="188"
+      [attr.x]="width - (marginHorizontal * 5.5)"
-        transform="scale(0.08625)"/>
+      [attr.y]="height - (marginVertical * 4.25)"
-    </g>
+    />
-    <use xlink:href="#up_arrow" x="2" y="27.5" />
   </g>
-  <text x="50%" y="75%">{{sample.barcode}}</text>
+  <text x="50%" [attr.y]="marginVertical * 4" style="font-size: 2.7px">
+    #{{sample.student_id}}
+    {{sample.initials}}
+  </text>
+  <text x="50%" [attr.y]="marginVertical * 5.5" style="font-size: 2.7px">
+    {{sample.date | date:'yyyy-MM-dd HH:mm'}}
+    {{sample.location}}
+  </text>
+  <g [attr.transform]="'translate(0, ' + (height/2 + 0.75) + ')'">
+    <text x="50%" y="0" class="code128-barcode">{{encodedCode128String}}</text>
+    <text x="50%" y="5.6" class="code128-barcode">{{encodedCode128String}}</text>
+  </g>
+  <text x="50%" [attr.y]="height - (marginVertical * 3.5)" style="font-size: 2.7px">{{sample.barcode}}</text>
 </svg>

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

@@ -1,6 +1,8 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {AppDefaults} from '../../../models/appDefaults.interface';
 import {Sample} from '../../../models/sample.interface';
+import * as Encoder from 'code-128-encoder';
+import {OutputMode} from 'code-128-encoder';
+import {LabelLayout} from '../../../models/labelLayout.interface';
 
 @Component({
   selector: 'app-rectangle-code128',
@@ -9,17 +11,37 @@ import {Sample} from '../../../models/sample.interface';
 })
 export class RectangleCode128Component implements OnInit {
   @Input() sample: Sample;
-  @Input() settings: AppDefaults;
+  @Input() labelLayout: LabelLayout;
-  @Input() x: number;
+  encoder: Encoder;
-  @Input() y: number;
+  marginHorizontal = 3.175 / 2;
-  @Input() width: number;
+  marginVertical = 3.175 / 2;
-  @Input() height: number;
 
-  constructor() { }
+  constructor() {
+    this.encoder = new Encoder();
+  }
+
+  get width() {
+    return this.labelLayout.pageWidth;
+  }
+
+  get height() {
+    return this.labelLayout.pageHeight;
+  }
+
+  get encodedCode128String(): string {
+    return this.encoder.encode(this.sample.barcode, {output: OutputMode.ASCII, mapping: 0});
+  }
+
+  get heightMinusMargins(): number {
+    return (this.height - (this.marginVertical * 2));
+  }
+
+  get widthMinusMargins(): number {
+    return (this.width - (this.marginHorizontal * 2));
+  }
 
   ngOnInit(): void {
     //  Replace "#barcode" element with svg of barcode
-
   }
 
 }

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

@@ -1,5 +1,13 @@
 <app-circle-qrcode-single *ngIf="isLayout('circle_qrcode_single')" [sample]="sample"></app-circle-qrcode-single>
 <app-circle-qrcode-double *ngIf="isLayout('circle_qrcode_double')" [sample]="sample"></app-circle-qrcode-double>
-<app-rectangle-3x1-code128 *ngIf="isLayout('rectangle_3x1_code128')" [sample]="sample"></app-rectangle-3x1-code128>
+<app-rectangle-code128
-<app-rectangle-code128 *ngIf="isLayout('rectangle_code128')" [sample]="sample"></app-rectangle-code128>
+  *ngIf="isLayout('rectangle_3x1_code128')"
+  [sample]="sample"
+  [labelLayout]="settings.labelLayout"
+></app-rectangle-code128>
+<app-rectangle-code128
+  *ngIf="isLayout('rectangle_code128')"
+  [sample]="sample"
+  [labelLayout]="settings.labelLayout"
+></app-rectangle-code128>
 <app-rectangle-datamatrix *ngIf="isLayout('rectangle_datamatrix')" [sample]="sample"></app-rectangle-datamatrix>

src/app/print/print.component.html

@@ -14,6 +14,7 @@
       fxLayout="column"
       fxLayoutAlign="center center"
       *ngIf="isSaved; else loadingMessage"
+      [ngStyle]="{height: pageHeight}"
     >
       <app-print-layout
         [cardNum]="cardNum"

src/app/print/print.component.ts

@@ -73,6 +73,10 @@ export class PrintComponent implements AfterViewInit {
     this.changeDetector.detectChanges();
   }
 
+  get pageHeight() {
+    return `${this.settings.labelLayout.pageHeight * 1.5}${this.settings.labelLayout.units}`;
+  }
+
   save(callback: (s: Sample) => void) {
     const id = createQrCodeValue(
       this.cardNum,

src/app/settings/settings.component.html

@@ -44,10 +44,18 @@
               </div>
               <div fxFlex="50%">
                 <app-circle-qrcode-single *ngIf="layout.id === 'circle_qrcode_single'" [sample]="sampleForLayout(layout)"></app-circle-qrcode-single>
-                <app-circle-qrcode-double *ngIf="layout.id === 'circle_qrcode_double'" [sample]="fakeSample"></app-circle-qrcode-double>
+                <app-circle-qrcode-double *ngIf="layout.id === 'circle_qrcode_double'" [sample]="sampleForLayout(layout)"></app-circle-qrcode-double>
-                <app-rectangle-3x1-code128 *ngIf="layout.id === 'rectangle_3x1_code128'" [sample]="fakeSample"></app-rectangle-3x1-code128>
+                <app-rectangle-code128
-                <app-rectangle-code128 *ngIf="layout.id === 'rectangle_code128'" [sample]="fakeSample"></app-rectangle-code128>
+                  *ngIf="layout.id === 'rectangle_3x1_code128'"
-                <app-rectangle-datamatrix *ngIf="layout.id === 'rectangle_datamatrix'" [sample]="fakeSample"></app-rectangle-datamatrix>
+                  [sample]="sampleForLayout(layout)"
+                  [labelLayout]="layout"
+                ></app-rectangle-code128>
+                <app-rectangle-code128
+                  *ngIf="layout.id === 'rectangle_code128'"
+                  [sample]="sampleForLayout(layout)"
+                  [labelLayout]="layout"
+                ></app-rectangle-code128>
+                <app-rectangle-datamatrix *ngIf="layout.id === 'rectangle_datamatrix'" [sample]="sampleForLayout(layout)"></app-rectangle-datamatrix>
               </div>
             </div>
           </mat-option>

src/material-theme.scss

@@ -1,5 +1,8 @@
+@font-face {
+  font-family: "code128";
+  src: url("assets/fonts/code128.ttf");
+}
 @import "material";
-
 @include mat-core($custom-typography);
 @include angular-material-theme($cr-connect-theme);
 
@@ -443,7 +446,6 @@
     }
   }
 
-
   svg.label-layout-format {
     background-color: transparent;
 
@@ -463,6 +465,13 @@
       font-variant-numeric: normal;
       font-feature-settings: normal;
       text-anchor: middle;
+
+      &.code128-barcode {
+        text-align: center;
+        font-family: "code128", monospace;
+        font-size: 5.7px;
+        font-weight: normal;
+      }
     }
 
     @media print {