sartography
/
uva-covid19-testing-frontend
mirror of https://github.com/sartography/uva-covid19-testing-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP: Adds components for each type of barcode.

This commit is contained in:
Aaron Louie 2020-11-15 14:28:11 -05:00
parent 474852db3c
commit 6e8e2bf54e
21 changed files with 731 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/app.module.ts
View File

@ -18,9 +18,14 @@ import {QRCodeSVGModule} from 'ngx-qrcode-svg';
import {ThisEnvironment} from '../environments/environment.injectable';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {BarcodeDataMatrixComponent} from './barcode-data-matrix/barcode-data-matrix.component';
import {CountComponent} from './count/count.component';
import {FooterComponent} from './footer/footer.component';
import {HomeComponent} from './home/home.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 {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';
import {LoadingComponent} from './loading/loading.component';
import {NavbarComponent} from './navbar/navbar.component';
@ -31,7 +36,6 @@ import {ApiService} from './services/api.service';
import {CacheService} from './services/cache.service';
import {SettingsService} from './services/settings.service';
import {SettingsComponent} from './settings/settings.component';
import { BarcodeDataMatrixComponent } from './barcode-data-matrix/barcode-data-matrix.component';
/**
* This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@ -62,6 +66,10 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
SampleComponent,
SettingsComponent,
BarcodeDataMatrixComponent,
CircleQRcodeSingleComponent,
CircleQRcodeDoubleComponent,
RectangleDatamatrixComponent,
RectangleCode128Component,
],
imports: [
BrowserAnimationsModule,

2
src/app/barcode-data-matrix/barcode-data-matrix.component.html
View File

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

1
src/app/barcode-data-matrix/barcode-data-matrix.component.svg Normal file
View File

@ -0,0 +1 @@
<svg #barcodeContainer></svg>
Side by Side

After

Width:  |  Height:  |  Size: 30 B

16
src/app/barcode-data-matrix/barcode-data-matrix.component.ts
View File

@ -1,17 +1,22 @@
import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
import {AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import bwipjs from 'bwip-js';
import {AppDefaults} from '../models/appDefaults.interface';
import DrawingSVG from './draw-svg.js';
@Component({
selector: 'app-barcode-data-matrix',
templateUrl: './barcode-data-matrix.component.html',
templateUrl: './barcode-data-matrix.component.svg',
styleUrls: ['./barcode-data-matrix.component.scss']
})
export class BarcodeDataMatrixComponent implements OnInit {
@Input() format: string;
@Input() value: string;
@Input() settings: AppDefaults;
@Input() x: number;
@Input() y: number;
@Input() width: number;
@Input() height: number;
@ViewChild('barcodeContainer') barcodeContainer: ElementRef;
constructor() {
}
@ -22,7 +27,7 @@ export class BarcodeDataMatrixComponent implements OnInit {
renderBarcode(): void {
if (!!(bwipjs && bwipjs.toCanvas && this.settings && this.format)) {
const opts = {
const opts: { [key: string]: any } = {
bcid: this.format,
text: this.value,
scale: 1,
@ -33,7 +38,12 @@ export class BarcodeDataMatrixComponent implements OnInit {
// version: '12x64',
// padding: this.settings.labelLayout.marginSize,
};
if (this.format === 'qrcode') {
opts.eclevel = 'H';
}
const barcodeSVG = bwipjs.render(opts, DrawingSVG(opts), bwipjs.FontLib);
this.barcodeContainer.nativeElement.innerHTML = barcodeSVG;
// bwipjs.toCanvas('barcodeCanvas', );
}
}

16
src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.scss Normal file
View File

@ -0,0 +1,16 @@
text, tspan {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
font-size: 6pt;
line-height: 1.25;
font-family: monospace;
text-align: center;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
}

25
src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CircleQRcodeDoubleComponent } from './circle-qrcode-double.component';
describe('CircleQRcodeDoubleComponent', () => {
let component: CircleQRcodeDoubleComponent;
let fixture: ComponentFixture<CircleQRcodeDoubleComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CircleQRcodeDoubleComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(CircleQRcodeDoubleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

151
src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.svg Normal file
View File

@ -0,0 +1,151 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64mm"
height="32mm"
viewBox="0 0 64 32"
version="1.1"
id="svg936">
<defs
id="defs930"/>
<g
id="layer1"
transform="translate(0,-265)">
<g
id="g1867">
<g
id="g2015">
<circle
id="path12-3"
cx="16"
cy="281"
style="fill:#ffffff;fill-opacity:1;stroke:#cccccc;stroke-width:0.25003096;stroke-opacity:1"
r="14.174985"/>
<!-- <app-barcode-data-matrix-->
<!-- format="qrcode"-->
<!-- [value]="value"-->
<!-- [settings]="settings"-->
<!-- width="20"-->
<!-- height="20"-->
<!-- x="6"-->
<!-- y="271"></app-barcode-data-matrix>-->
<text
id="text827"
y="292.70752"
x="16.070801"
xml:space="preserve"><tspan
y="292.70752"
x="16.070801"
id="tspan825">#987654321</tspan></text>
<text
id="text827-6"
y="270.83347"
x="16.011368"
xml:space="preserve"><tspan
y="270.83347"
x="16.011368"
id="tspan825-3">200912ABC</tspan></text>
<text
id="text827-61"
y="279.11072"
x="4.2645407"
xml:space="preserve"><tspan
id="tspan919"
y="279.11072"
x="4.2645407">T</tspan>
<tspan
y="281.75656"
x="4.2645407"
id="tspan1679">12</tspan>
<tspan
id="tspan925"
y="284.40237"
x="4.2645407">34</tspan></text>
<text
id="text827-61-5"
y="279.11072"
x="27.582506"
xml:space="preserve"><tspan
id="tspan921"
y="279.11072"
x="27.582506">L</tspan>
<tspan
id="tspan929"
y="281.75656"
x="27.582506">40</tspan>
<tspan
id="tspan1928"
y="284.40237"
x="27.582506">40</tspan></text>
</g>
</g>
<g
id="g2031">
<circle
r="14.174985"
style="fill:#ffffff;fill-opacity:1;stroke:#cccccc;stroke-width:0.25003096;stroke-opacity:1"
cy="281"
cx="47.999985"
id="path12-3-9"/>
<!-- <app-barcode-data-matrix-->
<!-- format="qrcode"-->
<!-- [value]="value"-->
<!-- [settings]="settings"-->
<!-- width="20"-->
<!-- height="20"-->
<!-- x="38"-->
<!-- y="271"></app-barcode-data-matrix>-->
<text
xml:space="preserve"
x="48.070786"
y="292.70752"
id="text827-4"><tspan
id="tspan825-8"
x="48.070786"
y="292.70752"
>#987654321</tspan></text>
<text
xml:space="preserve"
x="48.011353"
y="270.83347"
id="text827-6-1"><tspan
id="tspan825-3-0"
x="48.011353"
y="270.83347"
>200912ABC</tspan></text>
<text
xml:space="preserve"
x="36.264526"
y="279.11072"
id="text827-61-3"><tspan
x="36.264526"
y="279.11072"
id="tspan919-0">T</tspan>
<tspan
id="tspan1679-4"
x="36.264526"
y="281.75656"
>12</tspan>
<tspan
x="36.264526"
y="284.40237"
id="tspan925-4">34</tspan></text>
<text
xml:space="preserve"
x="59.582493"
y="279.11072"
id="text827-61-5-4"><tspan
x="59.582493"
y="279.11072"
id="tspan921-4">L</tspan>
<tspan
x="59.582493"
y="281.75656"
id="tspan929-7">40</tspan>
<tspan
x="59.582493"
y="284.40237"
id="tspan1928-6">40</tspan></text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

22
src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.ts Normal file
View File

@ -0,0 +1,22 @@
import {Component, Input, OnInit} from '@angular/core';
import {AppDefaults} from '../../../models/appDefaults.interface';
@Component({
selector: 'app-circle-qrcode-double',
templateUrl: './circle-qrcode-double.component.svg',
styleUrls: ['./circle-qrcode-double.component.scss']
})
export class CircleQRcodeDoubleComponent implements OnInit {
@Input() value: string;
@Input() settings: AppDefaults;
@Input() x: number;
@Input() y: number;
@Input() width: number;
@Input() height: number;
constructor() { }
ngOnInit(): void {
}
}

16
src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.scss Normal file
View File

@ -0,0 +1,16 @@
text, tspan {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
font-size: 6pt;
line-height: 1.25;
font-family: monospace;
text-align: center;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
}

25
src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CircleQRcodeSingleComponent } from './circle-qrcode-single.component';
describe('CircleQRcodeSingleComponent', () => {
let component: CircleQRcodeSingleComponent;
let fixture: ComponentFixture<CircleQRcodeSingleComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ CircleQRcodeSingleComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(CircleQRcodeSingleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

83
src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.svg Normal file
View File

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32mm"
height="32mm"
viewBox="0 0 32 32"
version="1.1"
id="svg936">
<defs
id="defs930"/>
<g
id="layer1"
transform="translate(0,-265)">
<g
id="g1867">
<g
id="g2015">
<circle
id="path12-3"
cx="16"
cy="281"
style="fill:#ffffff;fill-opacity:1;stroke:#cccccc;stroke-width:0.25003096;stroke-opacity:1"
r="14.174985"/>
<!-- <app-barcode-data-matrix-->
<!-- format="qrcode"-->
<!-- [value]="value"-->
<!-- [settings]="settings"-->
<!-- width="20"-->
<!-- height="20"-->
<!-- x="6"-->
<!-- y="271"></app-barcode-data-matrix>-->
<text
id="text827"
y="292.70752"
x="16.070801"
xml:space="preserve"><tspan
y="292.70752"
x="16.070801"
id="tspan825">#987654321</tspan></text>
<text
id="text827-6"
y="270.83347"
x="16.011368"
xml:space="preserve"><tspan
y="270.83347"
x="16.011368"
id="tspan825-3">200912ABC</tspan></text>
<text
id="text827-61"
y="279.11072"
x="4.2645407"
xml:space="preserve"><tspan
id="tspan919"
y="279.11072"
x="4.2645407">T</tspan>
<tspan
y="281.75656"
x="4.2645407"
id="tspan1679">12</tspan>
<tspan
id="tspan925"
y="284.40237"
x="4.2645407">34</tspan></text>
<text
id="text827-61-5"
y="279.11072"
x="27.582506"
xml:space="preserve"><tspan
id="tspan921"
y="279.11072"
x="27.582506">L</tspan>
<tspan
id="tspan929"
y="281.75656"
x="27.582506">40</tspan>
<tspan
id="tspan1928"
y="284.40237"
x="27.582506">40</tspan></text>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

22
src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.ts Normal file
View File

@ -0,0 +1,22 @@
import {Component, Input, OnInit} from '@angular/core';
import {AppDefaults} from '../../../models/appDefaults.interface';
@Component({
selector: 'app-circle-qrcode-single',
templateUrl: './circle-qrcode-single.component.svg',
styleUrls: ['./circle-qrcode-single.component.scss']
})
export class CircleQRcodeSingleComponent implements OnInit {
@Input() value: string;
@Input() settings: AppDefaults;
@Input() x: number;
@Input() y: number;
@Input() width: number;
@Input() height: number;
constructor() { }
ngOnInit(): void {
}
}

16
src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.scss Normal file
View File

@ -0,0 +1,16 @@
text, tspan {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
font-size: 6pt;
line-height: 1.25;
font-family: monospace;
text-align: center;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
}

25
src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts Normal file
View File

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

108
src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg Normal file
View File

@ -0,0 +1,108 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="54mm"
height="34mm"
viewBox="0 0 54.000002 34.000001"
version="1.1"
id="svg8">
<defs
id="defs2"/>
<g
id="layer1"
transform="translate(0,-262.99998)">
<text
xml:space="preserve"
x="26.96641"
y="287.95969"
id="text830"><tspan
id="tspan828"
x="26.966412"
y="287.95969">123456789-ABCDE-202011101110-1010</tspan></text>
<g
transform="matrix(0.07422947,0,0,-0.07422947,3.9888643,285.41873)"
id="g860">
<g
transform="scale(0.1)"
id="g862">
<!-- <app-barcode-data-matrix-->
<!-- format="code128"-->
<!-- [value]="value"-->
<!-- [settings]="settings"-->
<!-- width="6150"-->
<!-- height="1000"-->
<!-- x="0"-->
<!-- y="0"></app-barcode-data-matrix>-->
<rect
id="barcode"
x="0"
y="0"
width="6150"
height="1000"
fill="black"
/>
</g>
</g>
<g
transform="translate(0,-2e-5)"
id="g872">
<rect
ry="1.5875"
rx="1.5875"
y="264.125"
x="1.6000004"
height="31.75"
width="50.799999"
id="rect5000"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#cccccc;stroke-width:0.17638889;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
<g
id="g1163"
transform="translate(-2.087723,-1.7764499)">
<text
xml:space="preserve"
x="6.6571178"
y="268.65799"
id="text4940-2-2-3"><tspan
x="6.6571178"
y="268.65799"
id="tspan4951-6-0-1">UP</tspan></text>
<g
id="g5088-1"
transform="matrix(0.08333333,0,0,0.08333333,4.687723,266.90145)">
<path
id="path5074-0"
d="M 0,0 H 24 V 24 H 0 Z"
style="fill:none"/>
<path
id="path5076-3"
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>
<g
id="g1163-9"
transform="translate(-2.087723,25.97355)">
<text
xml:space="preserve"
x="6.6571178"
y="268.65799"
id="text4940-2-2-3-0"><tspan
x="6.6571178"
y="268.65799"
id="tspan4951-6-0-1-8">UP</tspan></text>
<g
id="g5088-1-8"
transform="matrix(0.08333333,0,0,0.08333333,4.687723,266.90145)">
<path
id="path5074-0-5"
d="M 0,0 H 24 V 24 H 0 Z"
style="fill:none"/>
<path
id="path5076-3-0"
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>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

24
src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts Normal file
View File

@ -0,0 +1,24 @@
import {Component, Input, OnInit} from '@angular/core';
import {AppDefaults} from '../../../models/appDefaults.interface';
@Component({
selector: 'app-rectangle-code128',
templateUrl: './rectangle-code128.component.svg',
styleUrls: ['./rectangle-code128.component.scss']
})
export class RectangleCode128Component implements OnInit {
@Input() value: string;
@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
}
}

16
src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.scss Normal file
View File

@ -0,0 +1,16 @@
text, tspan {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-stretch: normal;
font-size: 6pt;
line-height: 1.25;
font-family: monospace;
text-align: center;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
font-variant-numeric: normal;
font-feature-settings: normal;
}

25
src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.spec.ts Normal file
View File

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

107
src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg Normal file
View File

@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="54mm"
height="34mm"
viewBox="0 0 54 34"
version="1.1"
id="svg5173">
<defs
id="defs5167" />
<g
id="layer1"
transform="translate(0,-263)">
<g
id="g872">
<rect
ry="1.5875"
rx="1.5875"
y="264.125"
x="1.6000004"
height="31.75"
width="50.799999"
id="rect5000"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#cccccc;stroke-width:0.17638889;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<g
id="g1163"
transform="translate(-2.087723,-1.7764499)">
<text
xml:space="preserve"
x="6.6571178"
y="268.65799"
id="text4940-2-2-3"><tspan
x="6.6571178"
y="268.65799"
id="tspan4951-6-0-1">UP</tspan></text>
<g
id="g5088-1"
transform="matrix(0.08333333,0,0,0.08333333,4.687723,266.90145)">
<path
id="path5074-0"
d="M 0,0 H 24 V 24 H 0 Z"
style="fill:none" />
<path
id="path5076-3"
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>
<g
id="g1163-9"
transform="translate(-2.087723,25.97355)">
<text
xml:space="preserve"
x="6.6571178"
y="268.65799"
id="text4940-2-2-3-0"><tspan
x="6.6571178"
y="268.65799"
id="tspan4951-6-0-1-8">UP</tspan></text>
<g
id="g5088-1-8"
transform="matrix(0.08333333,0,0,0.08333333,4.687723,266.90145)">
<path
id="path5074-0-5"
d="M 0,0 H 24 V 24 H 0 Z"
style="fill:none" />
<path
id="path5076-3-0"
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>
</g>
<g
transform="matrix(0.125,0,0,-0.125,4.387,285.125)"
id="g1445">
<g
transform="scale(0.1)"
id="g1447">
<!-- <app-barcode-data-matrix-->
<!-- format="datamatrix"-->
<!-- [value]="value"-->
<!-- [settings]="settings"-->
<!-- width="820"-->
<!-- height="820"-->
<!-- x="0"-->
<!-- y="0"></app-barcode-data-matrix>-->
</g>
</g>
<text
xml:space="preserve"
x="17.653555"
y="278.20511"
id="text4940-2"><tspan
x="17.653555"
y="278.20511"
id="tspan4944-4">#987654321</tspan><tspan
x="17.653555"
y="281.02734"
id="tspan4953-0">2021-01-23 12:34</tspan><tspan
x="17.653555"
y="283.84955"
id="tspan4951-6">ABCDE 0404</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

22
src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.ts Normal file
View File

@ -0,0 +1,22 @@
import {Component, Input, OnInit} from '@angular/core';
import {AppDefaults} from '../../../models/appDefaults.interface';
@Component({
selector: 'app-rectangle-datamatrix',
templateUrl: './rectangle-datamatrix.component.svg',
styleUrls: ['./rectangle-datamatrix.component.scss']
})
export class RectangleDatamatrixComponent implements OnInit {
@Input() value: string;
@Input() settings: AppDefaults;
@Input() x: number;
@Input() y: number;
@Input() width: number;
@Input() height: number;
constructor() { }
ngOnInit(): void {
}
}

6
src/app/settings/settings.component.html
View File

@ -34,7 +34,11 @@
{{layout.name}}
</div>
<div fxFlex="50%">
<img src="/assets/formats/{{layout.type}}.svg" alt="{{layout.name}}">
<!-- <img src="/assets/formats/{{layout.type}}.svg" alt="{{layout.name}}">-->
<app-circle-qrcode-single *ngIf="layout.type === 'circle_1up_32mm_x_32mm_qrcode'"></app-circle-qrcode-single>
<app-circle-qrcode-double *ngIf="layout.type === 'circle_2up_64mm_x_32mm_qrcode'"></app-circle-qrcode-double>
<app-rectangle-code128 *ngIf="layout.type === 'rectangular_54mm_x_34mm_code128'"></app-rectangle-code128>
<app-rectangle-datamatrix *ngIf="layout.type === 'rectangular_54mm_x_34mm_datamatrix'"></app-rectangle-datamatrix>
</div>
</div>
</mat-option>