WIP: Adds components for each type of barcode.

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

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

@@ -1,2 +0,0 @@
-<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.svg

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

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', );
     }
   }

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;
+}

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

src/app/label-layout/formats/circle-qrcode-double/circle-qrcode-double.component.svg

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

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 {
+  }
+
+}

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;
+}

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

src/app/label-layout/formats/circle-qrcode-single/circle-qrcode-single.component.svg

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

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 {
+  }
+
+}

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;
+}

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

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

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

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

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;
+}

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

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

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

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 {
+  }
+
+}

src/app/settings/settings.component.html

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