diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e59adca..f0f5455 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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 `` value from `index.html`.
@@ -62,6 +66,10 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
SampleComponent,
SettingsComponent,
BarcodeDataMatrixComponent,
+ CircleQRcodeSingleComponent,
+ CircleQRcodeDoubleComponent,
+ RectangleDatamatrixComponent,
+ RectangleCode128Component,
],
imports: [
BrowserAnimationsModule,
diff --git a/src/app/barcode-data-matrix/barcode-data-matrix.component.html b/src/app/barcode-data-matrix/barcode-data-matrix.component.html
deleted file mode 100644
index 3f5b639..0000000
--- a/src/app/barcode-data-matrix/barcode-data-matrix.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/src/app/barcode-data-matrix/barcode-data-matrix.component.svg b/src/app/barcode-data-matrix/barcode-data-matrix.component.svg
new file mode 100644
index 0000000..da52023
--- /dev/null
+++ b/src/app/barcode-data-matrix/barcode-data-matrix.component.svg
@@ -0,0 +1 @@
+
diff --git a/src/app/barcode-data-matrix/barcode-data-matrix.component.ts b/src/app/barcode-data-matrix/barcode-data-matrix.component.ts
index 00fa93a..c010ddb 100644
--- a/src/app/barcode-data-matrix/barcode-data-matrix.component.ts
+++ b/src/app/barcode-data-matrix/barcode-data-matrix.component.ts
@@ -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', );
}
}
diff --git a/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.scss b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.scss
new file mode 100644
index 0000000..99ea9a9
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.scss
@@ -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;
+}
diff --git a/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.spec.ts b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.spec.ts
new file mode 100644
index 0000000..94968a8
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.spec.ts
@@ -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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CircleQRcodeDoubleComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CircleQRcodeDoubleComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.svg b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.svg
new file mode 100644
index 0000000..082bd14
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.svg
@@ -0,0 +1,151 @@
+
+
diff --git a/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.ts b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.ts
new file mode 100644
index 0000000..f55714e
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.ts
@@ -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 {
+ }
+
+}
diff --git a/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.scss b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.scss
new file mode 100644
index 0000000..99ea9a9
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.scss
@@ -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;
+}
diff --git a/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.spec.ts b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.spec.ts
new file mode 100644
index 0000000..9696acf
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.spec.ts
@@ -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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CircleQRcodeSingleComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CircleQRcodeSingleComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.svg b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.svg
new file mode 100644
index 0000000..fcf0417
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.svg
@@ -0,0 +1,83 @@
+
+
diff --git a/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.ts b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.ts
new file mode 100644
index 0000000..dc50724
--- /dev/null
+++ b/src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.ts
@@ -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 {
+ }
+
+}
diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.scss b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.scss
new file mode 100644
index 0000000..99ea9a9
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.scss
@@ -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;
+}
diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts
new file mode 100644
index 0000000..1f0c23d
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.spec.ts
@@ -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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ RectangleCode128Component ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RectangleCode128Component);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg
new file mode 100644
index 0000000..c189a90
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.svg
@@ -0,0 +1,108 @@
+
+
diff --git a/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts
new file mode 100644
index 0000000..f372263
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-code128/rectangle-code128.component.ts
@@ -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
+
+ }
+
+}
diff --git a/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.scss b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.scss
new file mode 100644
index 0000000..99ea9a9
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.scss
@@ -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;
+}
diff --git a/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.spec.ts b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.spec.ts
new file mode 100644
index 0000000..e1d1058
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.spec.ts
@@ -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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ RectangleDatamatrixComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RectangleDatamatrixComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg
new file mode 100644
index 0000000..3747bad
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.svg
@@ -0,0 +1,107 @@
+
+
diff --git a/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.ts b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.ts
new file mode 100644
index 0000000..96070cd
--- /dev/null
+++ b/src/app/label-layout/formats/rectangle-datamatrix/rectangle-datamatrix.component.ts
@@ -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 {
+ }
+
+}
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 3f2759a..28cd91a 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -34,7 +34,11 @@
{{layout.name}}
-
+
+
+
+
+