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

This commit is contained in:
Aaron Louie 2020-11-30 21:40:22 -05:00
parent fa58a9c7d6
commit 56cb563cdf
20 changed files with 124 additions and 156 deletions

4
debug.log Normal file
View File

@ -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)

5
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

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

View File

@ -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,

View File

@ -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,
pageHeight: 34,
pageWidth: 66.8,
pageHeight: 28.6,
delimiter: '',
}),
rectangle_datamatrix: new LabelLayout({

View File

@ -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();
});
});

View File

@ -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>

Before

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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
}
}

View File

@ -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();
});

View File

@ -3,44 +3,54 @@
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="54mm"
height="34mm"
viewBox="0 0 54 34"
[attr.width]="labelLayout.dimensions.pageWidth"
[attr.height]="labelLayout.dimensions.pageHeight"
[attr.viewBox]="'0 0 ' + width + ' ' + height"
>
<defs>
<g id="up_arrow">
<g transform="translate(2.5, 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>
<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.5, 1)">
<g [attr.transform]="'translate(' + marginHorizontal + ', ' + marginVertical + ')'">
<rect
class="label-layout-border"
fill="#FFFFFF"
stroke="#CCCCCC"
stroke-width="0.2"
width="51"
height="32"
[attr.width]="widthMinusMargins"
[attr.height]="heightMinusMargins"
x="0"
y="0"
rx="2"
/>
<use xlink:href="#up_arrow" x="2" y="2" />
<g transform="translate(2, 11)">
<g
appBarcodeSvg
[format]="'code128'"
[height]="40"
[value]="sample.barcode"
[width]="188"
transform="scale(0.08625)"/>
</g>
<use xlink:href="#up_arrow" x="2" y="27.5" />
<use
xlink:href="#up_arrow"
[attr.x]="width - (marginHorizontal * 5.5)"
[attr.y]="marginVertical"
/>
<use
xlink:href="#up_arrow"
[attr.x]="width - (marginHorizontal * 5.5)"
[attr.y]="height - (marginVertical * 4.25)"
/>
</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>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -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() x: number;
@Input() y: number;
@Input() width: number;
@Input() height: number;
@Input() labelLayout: LabelLayout;
encoder: Encoder;
marginHorizontal = 3.175 / 2;
marginVertical = 3.175 / 2;
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
}
}

View File

@ -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 *ngIf="isLayout('rectangle_code128')" [sample]="sample"></app-rectangle-code128>
<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>

View File

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

View File

@ -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,

View File

@ -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-rectangle-3x1-code128 *ngIf="layout.id === 'rectangle_3x1_code128'" [sample]="fakeSample"></app-rectangle-3x1-code128>
<app-rectangle-code128 *ngIf="layout.id === 'rectangle_code128'" [sample]="fakeSample"></app-rectangle-code128>
<app-rectangle-datamatrix *ngIf="layout.id === 'rectangle_datamatrix'" [sample]="fakeSample"></app-rectangle-datamatrix>
<app-circle-qrcode-double *ngIf="layout.id === 'circle_qrcode_double'" [sample]="sampleForLayout(layout)"></app-circle-qrcode-double>
<app-rectangle-code128
*ngIf="layout.id === 'rectangle_3x1_code128'"
[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>

Binary file not shown.

Binary file not shown.

View File

@ -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 {